181 lines
3.9 KiB
Vue
181 lines
3.9 KiB
Vue
<template>
|
|
<section class="h-full px-5 py-4">
|
|
<n-data-table
|
|
remote
|
|
:row-key="(row) => row.id"
|
|
:columns="tableColumns"
|
|
:data="bundles"
|
|
:loading="loading"
|
|
:pagination="tablePagination"
|
|
@page-change="handlePageChange"
|
|
/>
|
|
</section>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import {
|
|
NDataTable,
|
|
type DataTableColumns,
|
|
type PaginationProps,
|
|
useMessage,
|
|
useLoadingBar,
|
|
NButton,
|
|
NIcon,
|
|
NSpace,
|
|
useDialog,
|
|
} from 'naive-ui'
|
|
import { h, onMounted, ref } from 'vue'
|
|
import { useRouter } from 'vue-router'
|
|
import { DeleteRound } from '@vicons/material'
|
|
|
|
const router = useRouter()
|
|
|
|
const bundles = ref<any[]>([])
|
|
|
|
const tableColumns: DataTableColumns<any> = [
|
|
{
|
|
title: 'Name',
|
|
key: 'name',
|
|
render(row: any) {
|
|
return h(
|
|
NButton,
|
|
{
|
|
text: true,
|
|
onClick: () => {
|
|
router.push(`/bundles/${row.id}`)
|
|
},
|
|
},
|
|
{
|
|
default: () => row.name,
|
|
},
|
|
)
|
|
},
|
|
maxWidth: 80,
|
|
ellipsis: true,
|
|
},
|
|
{
|
|
title: 'Description',
|
|
key: 'description',
|
|
maxWidth: 180,
|
|
ellipsis: true,
|
|
},
|
|
{
|
|
title: 'Expired At',
|
|
key: 'expired_at',
|
|
render(row: any) {
|
|
if (!row.expired_at) return 'Never'
|
|
return new Date(row.expired_at).toLocaleString()
|
|
},
|
|
},
|
|
{
|
|
title: 'Created At',
|
|
key: 'created_at',
|
|
render(row: any) {
|
|
return new Date(row.created_at).toLocaleString()
|
|
},
|
|
},
|
|
{
|
|
title: 'Updated At',
|
|
key: 'updated_at',
|
|
render(row: any) {
|
|
return new Date(row.updated_at).toLocaleString()
|
|
},
|
|
},
|
|
{
|
|
title: 'Action',
|
|
key: 'action',
|
|
render(row: any) {
|
|
return h(NSpace, {}, [
|
|
h(
|
|
NButton,
|
|
{
|
|
circle: true,
|
|
text: true,
|
|
type: 'error',
|
|
onClick: () => {
|
|
askDeleteBundle(row)
|
|
},
|
|
},
|
|
{
|
|
icon: () => h(NIcon, {}, { default: () => h(DeleteRound) }),
|
|
},
|
|
),
|
|
])
|
|
},
|
|
},
|
|
]
|
|
|
|
const tablePagination = ref<PaginationProps>({
|
|
page: 1,
|
|
itemCount: 0,
|
|
pageSize: 10,
|
|
showSizePicker: true,
|
|
pageSizes: [10, 20, 30, 40, 50],
|
|
})
|
|
|
|
async function fetchBundles() {
|
|
if (loading.value) return
|
|
try {
|
|
loading.value = true
|
|
const pag = tablePagination.value
|
|
const response = await fetch(
|
|
`/api/bundles/me?take=${pag.pageSize}&offset=${(pag.page! - 1) * pag.pageSize!}`,
|
|
)
|
|
if (!response.ok) {
|
|
throw new Error('Network response was not ok')
|
|
}
|
|
const data = await response.json()
|
|
bundles.value = data
|
|
tablePagination.value.itemCount = parseInt(response.headers.get('x-total') ?? '0')
|
|
} catch (error) {
|
|
messageDialog.error('Failed to fetch bundles: ' + (error as Error).message)
|
|
console.error('Failed to fetch bundles:', error)
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
}
|
|
onMounted(() => fetchBundles())
|
|
|
|
function handlePageChange(page: number) {
|
|
tablePagination.value.page = page
|
|
fetchBundles()
|
|
}
|
|
|
|
const loading = ref(false)
|
|
|
|
const messageDialog = useMessage()
|
|
const loadingBar = useLoadingBar()
|
|
const dialog = useDialog()
|
|
|
|
function askDeleteBundle(bundle: any) {
|
|
dialog.warning({
|
|
title: 'Confirm',
|
|
content: `Are you sure you want to delete the bundle ${bundle.name}?`,
|
|
positiveText: 'Sure',
|
|
negativeText: 'Not Sure',
|
|
onPositiveClick: () => {
|
|
deleteBundle(bundle)
|
|
},
|
|
})
|
|
}
|
|
|
|
async function deleteBundle(bundle: any) {
|
|
try {
|
|
loadingBar.start()
|
|
const response = await fetch(`/api/bundles/${bundle.id}`, {
|
|
method: 'DELETE',
|
|
})
|
|
if (!response.ok) {
|
|
throw new Error('Network response was not ok')
|
|
}
|
|
tablePagination.value.page = 1
|
|
await fetchBundles()
|
|
loadingBar.finish()
|
|
messageDialog.success('Bundle deleted successfully')
|
|
} catch (error) {
|
|
loadingBar.error()
|
|
messageDialog.error('Failed to delete bundle: ' + (error as Error).message)
|
|
}
|
|
}
|
|
</script>
|