100 lines
3.3 KiB
Vue
100 lines
3.3 KiB
Vue
<script setup lang="ts">
|
|
import type { ColumnDef } from '@tanstack/vue-table'
|
|
|
|
import { computed } from 'vue'
|
|
import { useI18n } from 'vue-i18n'
|
|
|
|
import type { DataTableProps } from '@/components/data-table/types'
|
|
import type { Device } from '@/pages/admin/devices/data/schema'
|
|
|
|
import BulkActions from '@/components/data-table/bulk-actions.vue'
|
|
import DataTable from '@/components/data-table/data-table.vue'
|
|
import { SelectColumn } from '@/components/data-table/table-columns'
|
|
import { generateVueTable } from '@/components/data-table/use-generate-vue-table'
|
|
import DataTableViewOptions from '@/components/data-table/view-options.vue'
|
|
import { getColumns } from '@/pages/admin/devices/components/columns'
|
|
import DataTableToolbar from '@/pages/admin/devices/components/data-table-toolbar.vue'
|
|
|
|
const props = defineProps<Omit<DataTableProps<Device>, 'columns'> & {
|
|
onToggleStatus: (row: Device) => void
|
|
onDelete: (row: Device) => void
|
|
onForceOffline: (row: Device) => void
|
|
}>()
|
|
|
|
const emit = defineEmits<{
|
|
refresh: []
|
|
batchUnbind: []
|
|
batchBan: []
|
|
batchUnban: []
|
|
}>()
|
|
|
|
const { t } = useI18n()
|
|
|
|
const columns = computed(() => [
|
|
SelectColumn as ColumnDef<Device>,
|
|
...getColumns({
|
|
onToggleStatus: props.onToggleStatus,
|
|
onDelete: props.onDelete,
|
|
onForceOffline: props.onForceOffline,
|
|
}),
|
|
])
|
|
|
|
const table = generateVueTable<Device>({
|
|
get data() { return props.data },
|
|
get loading() { return props.loading },
|
|
columns: columns.value,
|
|
}, columns.value)
|
|
|
|
const columnLabels: Record<string, string> = {
|
|
'select': 'admin.devices.select',
|
|
'device_id': 'admin.devices.columns.deviceId',
|
|
'device_name': 'admin.devices.columns.deviceName',
|
|
'device_type': 'admin.devices.columns.deviceType',
|
|
'user.username': 'admin.devices.columns.user',
|
|
'application.name': 'admin.devices.columns.application',
|
|
'online_status': 'admin.devices.columns.status',
|
|
'online_sessions': 'admin.devices.columns.onlineSessions',
|
|
'status': 'admin.devices.columns.deviceStatus',
|
|
'created_at': 'admin.devices.columns.createdAt',
|
|
}
|
|
|
|
defineExpose({
|
|
table,
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<DataTable :columns="columns" :data :loading :table @refresh="emit('refresh')">
|
|
<template #toolbar>
|
|
<div class="space-y-3">
|
|
<BulkActions :table="table" entity-name="devices">
|
|
<UiButton variant="outline" size="sm" @click="emit('batchUnban')">
|
|
{{ t('admin.devices.batchUnban') }}
|
|
</UiButton>
|
|
<UiButton variant="outline" size="sm" @click="emit('batchBan')">
|
|
{{ t('admin.devices.batchBan') }}
|
|
</UiButton>
|
|
<UiButton variant="destructive" size="sm" @click="emit('batchUnbind')">
|
|
{{ t('admin.devices.batchUnbind') }}
|
|
</UiButton>
|
|
</BulkActions>
|
|
<div class="flex flex-wrap items-center justify-between gap-2">
|
|
<div class="flex flex-wrap items-center gap-2">
|
|
<DataTableToolbar
|
|
:table
|
|
@batch-unbind="emit('batchUnbind')"
|
|
@batch-ban="emit('batchBan')"
|
|
@batch-unban="emit('batchUnban')"
|
|
@refresh="emit('refresh')"
|
|
/>
|
|
<slot name="filters" />
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<DataTableViewOptions :table="table" :column-labels="columnLabels" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</DataTable>
|
|
</template>
|