✨ File bundle

DysonNetwork.Drive/Client/src/views/dashboard/bundles.vue

@@ -0,0 +1,183 @@
+<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,
+        },
+      )
+    },
+  },
+  {
+    title: 'Description',
+    key: 'description',
+  },
+  {
+    title: 'Files',
+    key: 'files',
+    render(row: any) {
+      return row.files.length
+    },
+  },
+  {
+    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>

DysonNetwork.Drive/Client/src/views/dashboard/files.vue

@@ -140,7 +140,7 @@ const tableColumns: DataTableColumns<any> = [
     title: 'Expired At',
     key: 'expired_at',
     render(row: any) {
-      if (!row.expired_at) return 'Keep-alive'
+      if (!row.expired_at) return 'Never'
       return new Date(row.expired_at).toLocaleString()
     },
   },

DysonNetwork.Drive/Client/src/views/dashboard/quotas.vue

@@ -0,0 +1,101 @@
+<template>
+  <section class="h-full px-5 py-4">
+    <n-data-table
+      remote
+      :row-key="(row) => row.id"
+      :columns="tableColumns"
+      :data="quotas"
+      :loading="loading"
+      :pagination="tablePagination"
+      @page-change="handlePageChange"
+    />
+  </section>
+</template>
+
+<script lang="ts" setup>
+import { NDataTable, type DataTableColumns, type PaginationProps, useMessage } from 'naive-ui'
+import { onMounted, ref } from 'vue'
+import { formatBytes } from '../format'
+
+const quotas = ref<any[]>([])
+
+const tableColumns: DataTableColumns<any> = [
+  {
+    title: 'Name',
+    key: 'name',
+  },
+  {
+    title: 'Description',
+    key: 'description',
+  },
+  {
+    title: 'Quota',
+    key: 'quota',
+    render(row: any) {
+      return formatBytes(row.quota * 1024 * 1024)
+    },
+  },
+  {
+    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()
+    },
+  },
+]
+
+const tablePagination = ref<PaginationProps>({
+  page: 1,
+  itemCount: 0,
+  pageSize: 10,
+  showSizePicker: true,
+  pageSizes: [10, 20, 30, 40, 50],
+})
+
+async function fetchQuotas() {
+  if (loading.value) return
+  try {
+    loading.value = true
+    const pag = tablePagination.value
+    const response = await fetch(
+      `/api/billing/quota/records?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()
+    quotas.value = data
+    tablePagination.value.itemCount = parseInt(response.headers.get('x-total') ?? '0')
+  } catch (error) {
+    messageDialog.error('Failed to fetch quotas: ' + (error as Error).message)
+    console.error('Failed to fetch quotas:', error)
+  } finally {
+    loading.value = false
+  }
+}
+onMounted(() => fetchQuotas())
+
+function handlePageChange(page: number) {
+  tablePagination.value.page = page
+  fetchQuotas()
+}
+
+const loading = ref(false)
+
+const messageDialog = useMessage()
+</script>