95 lines
2.2 KiB
Vue
95 lines
2.2 KiB
Vue
<template>
|
|
<n-message-provider>
|
|
<FlashMessages
|
|
:messages="props.flashMessages"
|
|
/>
|
|
</n-message-provider>
|
|
<n-data-table
|
|
:columns="columns"
|
|
:data="users"
|
|
row-class-name="group"
|
|
/>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
|
|
import type { User } from '../../types/User'
|
|
import type { DataTableColumns } from 'naive-ui'
|
|
import type { VNode } from 'vue'
|
|
|
|
import { h } from 'vue'
|
|
import BELayout from '@/layouts/BELayout.vue'
|
|
import FlashMessages from '@/components/FlashMessages.vue'
|
|
import { NIcon, NButton } from 'naive-ui'
|
|
|
|
import {
|
|
AdminPanelSettingsFilled as Admin,
|
|
EditRound as Edit,
|
|
DeleteRound as Delete,
|
|
} from '@vicons/material'
|
|
|
|
defineOptions({ layout: BELayout })
|
|
|
|
const props = defineProps<{
|
|
users?: User[],
|
|
flashMessages?: Object
|
|
}>()
|
|
|
|
const columns: DataTableColumns<User> = [
|
|
{
|
|
title: "Admin",
|
|
key: "is_admin",
|
|
align: "center",
|
|
render (row) {
|
|
if(row.is_admin) {
|
|
return h(
|
|
NIcon,
|
|
{ size: 20, component: Admin, class: "align-middle" }
|
|
)
|
|
}
|
|
}
|
|
},
|
|
{
|
|
title: "Benutzername",
|
|
key: "username",
|
|
},
|
|
{
|
|
title: "Aktionen",
|
|
key: "actions",
|
|
className: "space-x-4",
|
|
render(row) {
|
|
let arr: VNode[] = []
|
|
arr[0] = h(
|
|
NButton,
|
|
{
|
|
class: "invisible group-hover:visible align-middle",
|
|
circle: true,
|
|
onClick: () => { clickEdit(row.id) },
|
|
renderIcon: () => { return h(NIcon, { component: Edit, size: 20 }) },
|
|
},
|
|
)
|
|
arr[1] = h(
|
|
NButton,
|
|
{
|
|
class: "invisible group-hover:visible align-middle",
|
|
secondary: true,
|
|
circle: true,
|
|
type: "error",
|
|
onClick: () => { clickDelete(row.id) },
|
|
renderIcon: () => { return h(NIcon, { component: Delete, size: 20 }) },
|
|
},
|
|
)
|
|
return arr
|
|
}
|
|
}
|
|
]
|
|
|
|
function clickEdit(id: Number){
|
|
console.log("Edit clicked: "+id)
|
|
}
|
|
|
|
function clickDelete(id: Number){
|
|
console.log("Delete clicked: "+id)
|
|
}
|
|
|
|
</script> |