[Core] [Refactor] [UI] [Dashboard] Add pagination to list

core/datacap-ui/src/views/components/table/TableCommon.vue

@@ -90,8 +90,7 @@ import { Input } from '@/components/ui/input'
 import { Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'
 import { Button } from '@/components/ui/button'
 import { ArrowUpDown, ChevronDown, Loader2 } from 'lucide-vue-next'
-import { Pagination, PaginationEllipsis, PaginationFirst, PaginationLast, PaginationNext, PaginationPrev } from '@/components/ui/pagination'
-import { PaginationList, PaginationListItem } from 'radix-vue'
+import { Pagination, PaginationEllipsis, PaginationFirst, PaginationLast, PaginationList, PaginationListItem, PaginationNext, PaginationPrev } from '@/components/ui/pagination'
 import { PaginationModel } from '@/model/pagination'
 import { cloneDeep, toNumber } from 'lodash'
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'

core/datacap-ui/src/views/pages/admin/dashboard/DashboardHome.vue

@@ -2,11 +2,15 @@
   <div class="w-full">
     <Card>
       <template #title>{{ $t('dashboard.common.list') }}</template>
-      <template #extra></template>
+      <template #extra>
+        <Button class="w-24" size="sm" to="/admin/dashboard/info">
+          {{ $t('dashboard.common.create') }}
+        </Button>
+      </template>
       <Loader2 v-if="loading" class="w-full justify-center animate-spin"/>
       <div v-else class="hidden flex-col md:flex">
         <div class="flex-1 space-y-4 pt-6">
-          <div class="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
+          <div class="grid gap-4 md:grid-cols-2 lg:grid-cols-6">
             <Card title-class="p-2 pl-4 pr-4" v-for="item in data">
               <template #title>
                 <RouterLink :to="`/admin/dashboard/info/${item.id}/preview`" target="_blank">{{ item.name }}</RouterLink>
@@ -34,6 +38,9 @@
               <p class="text-xs text-muted-foreground mt-2">{{ item.createTime }}</p>
             </Card>
           </div>
+          <div>
+            <Pagination :pagination="pagination" @changePage="handlerChangePage"/>
+          </div>
         </div>
       </div>
     </Card>
@@ -51,18 +58,23 @@ import { DashboardModel } from '@/model/dashboard'
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/components/ui/dropdown-menu'
 import DashboardDelete from '@/views/pages/admin/dashboard/DashboardDelete.vue'
 import Card from '@/views/ui/card'
+import Pagination from '@/views/ui/pagination'
+import Button from '@/views/ui/button'
 
 export default defineComponent({
   name: 'DashboardHome',
   components: {
+    Pagination,
     DashboardDelete,
     DropdownMenuItem, DropdownMenuSeparator, DropdownMenuLabel, DropdownMenuContent, DropdownMenuTrigger, DropdownMenu,
     Loader2, Cog, Trash, Pencil,
-    Card
+    Card,
+    Button
   },
   setup()
   {
     const filter: FilterModel = new FilterModel()
+    filter.size = 30
 
     return {
       filter
@@ -102,6 +114,12 @@ export default defineComponent({
       if (!opened) {
         this.handlerInitialize()
       }
+    },
+    handlerChangePage(value: PaginationModel)
+    {
+      this.filter.page = value.currentPage
+      this.filter.size = value.pageSize
+      this.handlerInitialize()
     }
   }
 })

core/datacap-ui/src/views/ui/pagination/index.ts

@@ -0,0 +1,3 @@
+import Pagination from '@/views/ui/pagination/pagination.vue'
+
+export default Pagination

core/datacap-ui/src/views/ui/pagination/pagination.vue

@@ -0,0 +1,72 @@
+<template>
+  <div v-if="pagination" class="flex w-full justify-center mt-3">
+    <Pagination v-slot="{ page }" :total="pagination.total" :items-per-page="pagination.pageSize" :sibling-count="1" show-edges
+                :default-page="pagination.currentPage + 1" @update:page="handlerChangePage($event)">
+      <PaginationList v-slot="{ items }" class="flex items-center gap-1">
+        <PaginationFirst class="w-6 h-6"/>
+        <PaginationPrev class="w-6 h-6"/>
+        <template v-for="(item, index) in items">
+          <PaginationListItem v-if="item.type === 'page'" :key="index" :value="item.value" class="w-6 h-6" as-child>
+            <Button class="w-6 h-6 p-0" size="sm" :variant="item.value === page ? 'default' : 'outline'">
+              {{ item.value }}
+            </Button>
+          </PaginationListItem>
+          <PaginationEllipsis class="w-6 h-6" v-else :key="item.type" :index="index"/>
+        </template>
+        <PaginationNext class="w-6 h-6"/>
+        <PaginationLast class="w-6 h-6"/>
+      </PaginationList>
+    </Pagination>
+    <div v-if="pagination" class="ml-2">
+      <Select :defaultValue="pagination.pageSize.toString()" @update:modelValue="handlerChangeSize">
+        <SelectTrigger class="h-6">
+          <SelectValue placeholder="Select a size"/>
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem class="h-6 cursor-pointer" :value="'10'">10</SelectItem>
+          <SelectItem class="h-6 cursor-pointer" :value="'20'">20</SelectItem>
+          <SelectItem class="h-6 cursor-pointer" :value="'30'">30</SelectItem>
+          <SelectItem class="h-6 cursor-pointer" :value="'50'">50</SelectItem>
+          <SelectItem class="h-6 cursor-pointer" :value="'100'">100</SelectItem>
+        </SelectContent>
+      </Select>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import { Pagination, PaginationEllipsis, PaginationFirst, PaginationLast, PaginationList, PaginationListItem, PaginationNext, PaginationPrev } from '@/components/ui/pagination'
+import { PaginationModel } from '@/model/pagination.ts'
+import { cloneDeep, toNumber } from 'lodash'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
+import Button from '@/views/ui/button'
+
+export default defineComponent({
+  name: 'DcPagination',
+  components: {
+    Pagination, PaginationEllipsis, PaginationFirst, PaginationLast, PaginationList, PaginationListItem, PaginationNext, PaginationPrev,
+    SelectItem, SelectContent, SelectValue, SelectTrigger, Select,
+    Button
+  },
+  props: {
+    pagination: {
+      type: Object as () => PaginationModel
+    }
+  },
+  methods: {
+    handlerChangePage(value: number)
+    {
+      const pagination: PaginationModel = cloneDeep(this.pagination) as PaginationModel
+      pagination.currentPage = value
+      this.$emit('changePage', pagination)
+    },
+    handlerChangeSize(value: string)
+    {
+      const pagination: PaginationModel = cloneDeep(this.pagination) as PaginationModel
+      pagination.pageSize = toNumber(value)
+      this.$emit('changePage', pagination)
+    }
+  }
+})
+</script>