98 lines
3.3 KiB
Vue
98 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 { APIKey } from '@/pages/admin/extension/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 { getAPIKeyColumns } from '@/pages/admin/extension/components/apikey-columns'
|
|
import APIKeyDataTableToolbar from '@/pages/admin/extension/components/apikey-data-table-toolbar.vue'
|
|
|
|
const props = defineProps<Omit<DataTableProps<APIKey>, 'columns'> & {
|
|
onToggleStatus: (row: APIKey) => void
|
|
onRegenerate: (row: APIKey) => void
|
|
onDelete: (row: APIKey) => void
|
|
searchFilter?: string
|
|
}>()
|
|
|
|
const emit = defineEmits<{
|
|
'refresh': []
|
|
'batchEnable': []
|
|
'batchDisable': []
|
|
'batchDelete': []
|
|
'update:searchFilter': [value: string]
|
|
}>()
|
|
|
|
const { t } = useI18n()
|
|
|
|
const columns = computed(() => [
|
|
SelectColumn as ColumnDef<APIKey>,
|
|
...getAPIKeyColumns({
|
|
onToggleStatus: props.onToggleStatus,
|
|
onRegenerate: props.onRegenerate,
|
|
onDelete: props.onDelete,
|
|
}, t),
|
|
])
|
|
|
|
const table = generateVueTable<APIKey>({
|
|
get data() { return props.data },
|
|
get loading() { return props.loading },
|
|
columns: columns.value,
|
|
}, columns.value)
|
|
|
|
const columnLabels: Record<string, string> = {
|
|
select: 'admin.extension.apiKeys.select',
|
|
name: 'admin.extension.apiKeys.columns.name',
|
|
application_name: 'admin.extension.apiKeys.columns.application',
|
|
access_key: 'admin.extension.apiKeys.columns.accessKey',
|
|
secret_key: 'admin.extension.apiKeys.columns.secretKey',
|
|
permissions: 'admin.extension.apiKeys.columns.permissions',
|
|
status: 'admin.extension.apiKeys.columns.status',
|
|
created_at: 'admin.extension.apiKeys.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="apiKeys">
|
|
<UiButton variant="outline" size="sm" @click="emit('batchEnable')">
|
|
{{ t('admin.extension.apiKeys.enable') }}
|
|
</UiButton>
|
|
<UiButton variant="outline" size="sm" @click="emit('batchDisable')">
|
|
{{ t('admin.extension.apiKeys.disable') }}
|
|
</UiButton>
|
|
<UiButton variant="destructive" size="sm" @click="emit('batchDelete')">
|
|
{{ t('admin.extension.apiKeys.batchDelete') }}
|
|
</UiButton>
|
|
</BulkActions>
|
|
<div class="flex flex-wrap items-center justify-between gap-2">
|
|
<div class="flex flex-wrap items-center gap-2">
|
|
<APIKeyDataTableToolbar
|
|
:table
|
|
:search-filter="searchFilter"
|
|
@update:search-filter="emit('update:searchFilter', $event)"
|
|
/>
|
|
<slot name="filters" />
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<DataTableViewOptions :table="table" :column-labels="columnLabels" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</DataTable>
|
|
</template>
|