refactor(page): refactor system -> template

core/datacap-ui/src/views/pages/system/template/TemplateHome.vue

@@ -1,74 +1,72 @@
 <template>
-  <div class="w-full">
-    <DataCapCard>
-      <template #title>{{ $t('template.common.list') }}</template>
-      <template #extra>
-        <Button size="icon" class="ml-auto gap-1 h-6 w-6" @click="handlerInfo(true, null)">
-          <Plus :size="20"/>
-        </Button>
-      </template>
-      <TableCommon :loading="loading" :columns="headers" :data="data" :pagination="pagination" @changePage="handlerChangePage">
-        <template #plugin="{row}">
-          <div class="flex items-center p-4 sm:justify-between">
-            <div class="flex -space-x-2 overflow-hidden">
-              <Avatar v-for="item in row?.plugin.split(',')" size="sm" class="border-2 border-background w-8 h-8">
-                <AvatarImage :src="'/static/images/plugin/' + item + '.png'"/>
-                <AvatarFallback>{{ item }}</AvatarFallback>
-              </Avatar>
-            </div>
-          </div>
+  <ShadcnCard>
+    <template #title>
+      <div class="ml-2 font-normal text-sm">{{ $t('template.common.list') }}</div>
+    </template>
+
+    <template #extra>
+      <ShadcnButton size="small" circle @click="handlerInfo(true, null)">
+        <template #icon>
+          <ShadcnIcon icon="Plus"/>
         </template>
+      </ShadcnButton>
+    </template>
+
+    <div class="relative">
+      <ShadcnSpin v-if="loading" fixed/>
+
+      <ShadcnTable size="small" :columns="headers" :data="data">
+        <template #plugin="{ row }">
+          <ShadcnAvatar v-for="item in row?.plugin.split(',')"
+                        size="small"
+                        :src="'/static/images/plugin/' + item + '.png'"
+                        :alt="item"/>
+        </template>
+
         <template #system="{ row }">
-          <Switch disabled :default-checked="row?.system"/>
+          <ShadcnSwitch v-model="row.system" size="small" :disabled="row.system"/>
         </template>
-        <template #action="{row}">
-          <TooltipProvider :delay-duration="0">
-            <Tooltip>
-              <TooltipTrigger as-child>
-                <Button variant="outline" size="icon" class="rounded-full w-8 h-8" @click="handlerInfo(true, row)">
-                  <Pencil :size="15"></Pencil>
-                </Button>
-              </TooltipTrigger>
-              <TooltipContent>
-                <p>{{ $t('common.editData') }}</p>
-              </TooltipContent>
-            </Tooltip>
-          </TooltipProvider>
+
+        <template #action="{ row }">
+          <ShadcnSpace>
+            <ShadcnTooltip :content="$t('common.editData')">
+              <ShadcnButton size="small" circle @click="handlerInfo(true, row)">
+                <ShadcnIcon icon="Pencil" size="15"/>
+              </ShadcnButton>
+            </ShadcnTooltip>
+          </ShadcnSpace>
         </template>
-      </TableCommon>
-    </DataCapCard>
-  </div>
+      </ShadcnTable>
+
+      <ShadcnPagination v-model="pageIndex"
+                        class="py-2"
+                        show-total
+                        show-sizer
+                        :page-size="pageSize"
+                        :total="dataCount"
+                        :sizerOptions="[10, 20, 50]"
+                        @on-change="onPageChange"
+                        @on-prev="onPrevChange"
+                        @on-next="onNextChange"
+                        @on-change-size="onSizeChange"/>
+    </div>
+  </ShadcnCard>
+
   <TemplateInfo v-if="dataInfoVisible" :is-visible="dataInfoVisible" :info="dataInfo" @close="handlerInfo(false, null)"/>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue'
-import { DataCapCard } from '@/views/ui/card'
-import TableCommon from '@/views/components/table/TableCommon.vue'
-import { Button } from '@/components/ui/button'
 import { FilterModel } from '@/model/filter'
 import { createHeaders } from '@/views/pages/system/template/TemplateUtils'
 import { useI18n } from 'vue-i18n'
-import { PaginationModel, PaginationRequest } from '@/model/pagination'
 import TemplateService from '@/services/template'
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
 import { TemplateModel } from '@/model/template'
-import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
-import { Switch } from '@/components/ui/switch'
 import TemplateInfo from '@/views/pages/system/template/TemplateInfo.vue'
 
 export default defineComponent({
   name: 'TemplateHome',
-  components: {
-    DataCapCard,
-    TemplateInfo,
-    Switch,
-    Button,
-    Pencil, Plus, Import, Cog,
-    TableCommon,
-    Tooltip, TooltipContent, TooltipProvider, TooltipTrigger,
-    Avatar, AvatarFallback, AvatarImage
-  },
+  components: { TemplateInfo },
   setup()
   {
     const filter: FilterModel = new FilterModel()
@@ -85,7 +83,9 @@ export default defineComponent({
       loading: false,
       dataInfoVisible: false,
       data: [] as TemplateModel[],
-      pagination: {} as PaginationModel,
+      pageIndex: 1,
+      pageSize: 10,
+      dataCount: 0,
       dataInfo: null as TemplateModel | null
     }
   },
@@ -101,17 +101,36 @@ export default defineComponent({
                      .then((response) => {
                        if (response.status) {
                          this.data = response.data.content
-                         this.pagination = PaginationRequest.of(response.data)
+                         this.dataCount = response.data.total
+                         this.pageSize = response.data.size
+                         this.pageIndex = response.data.page
                        }
                      })
                      .finally(() => this.loading = false)
     },
-    handlerChangePage(value: PaginationModel)
+    fetchData(value: number)
     {
-      this.filter.page = value.currentPage
-      this.filter.size = value.pageSize
+      this.filter.page = value
+      this.filter.size = this.pageSize
       this.handlerInitialize()
     },
+    onPageChange(value: number)
+    {
+      this.fetchData(value)
+    },
+    onPrevChange(value: number)
+    {
+      this.fetchData(value)
+    },
+    onNextChange(value: number)
+    {
+      this.fetchData(value)
+    },
+    onSizeChange(value: number)
+    {
+      this.pageSize = value
+      this.fetchData(this.pageIndex)
+    },
     handlerInfo(opened: boolean, value: null | TemplateModel)
     {
       this.dataInfoVisible = opened

core/datacap-ui/src/views/pages/system/template/TemplateInfo.vue

@@ -1,101 +1,64 @@
 <template>
-  <Sheet :open="visible" class="w-full" @update:open="handlerCancel">
-    <SheetContent class="min-w-[25%]">
-      <SheetHeader class="border-b pb-3">
-        <SheetTitle class="-mt-3">{{ title }}</SheetTitle>
-      </SheetHeader>
-      <CircularLoading v-if="loading" :show="loading"/>
-      <div v-else class="grid gap-4 py-4">
-        <FormField v-slot="{ componentField }" name="name">
-          <FormItem>
-            <FormLabel>{{ $t('common.name') }}</FormLabel>
-            <FormControl>
-              <Input v-model="formState.name" :default-value="formState.name" :disabled="formState.system" v-bind="componentField"/>
-            </FormControl>
-          </FormItem>
-        </FormField>
-        <FormField v-slot="{ componentField }" name="plugin">
-          <FormItem>
-            <FormLabel>{{ $t('common.plugin') }}</FormLabel>
-            <FormControl>
-              <div>
-                <DropdownMenu>
-                  <DropdownMenuTrigger as-child>
-                    <Button variant="outline" class="col-span-3">
-                      {{ $t('function.tip.selectPluginHolder') }}
-                      <span v-if="formState.plugin" class="ml-1">[ {{ formState.plugin.split(',').length }} ]</span>
-                    </Button>
-                  </DropdownMenuTrigger>
-                  <DropdownMenuContent class="max-h-48 overflow-y-auto">
-                    <DropdownMenuCheckboxItem class="cursor-pointer" v-for="plugin in plugins" v-model:checked="plugin.checked" @update:checked="setChecked"
-                                              v-bind="componentField">
-                      {{ (plugin as any).name }}
-                    </DropdownMenuCheckboxItem>
-                  </DropdownMenuContent>
-                </DropdownMenu>
-              </div>
-            </FormControl>
-          </FormItem>
-        </FormField>
-        <FormField v-slot="{ componentField }" name="description">
-          <FormItem>
-            <FormLabel>{{ $t('common.description') }}</FormLabel>
-            <FormControl>
-              <Textarea v-model="formState.description" :default-value="formState.description" v-bind="componentField"/>
-            </FormControl>
-          </FormItem>
-        </FormField>
-        <FormField v-slot="{ componentField }" name="content">
-          <FormItem>
-            <FormLabel>{{ $t('common.content') }}</FormLabel>
-            <FormControl>
-              <AceEditor :value="formState.content" v-bind="componentField" @update:value="setContent"/>
-            </FormControl>
-          </FormItem>
-        </FormField>
-      </div>
-      <SheetFooter class="absolute bottom-0 left-0 right-0 mb-3 mr-3 pt-3 border-t">
-        <SheetClose as-child>
-          <Button :disabled="saving" variant="destructive" @click="handlerCancel()">{{ $t('common.cancel') }}</Button>
-          <Button :disabled="saving" @click="handlerSave()">
-            <Loader2 v-if="saving" class="w-full justify-center animate-spin"/>
+  <ShadcnDrawer v-model="visible" :title="title" width="40%">
+    <ShadcnSpin v-if="loading" fixed/>
+
+    <ShadcnForm v-model="formState" v-if="formState" @on-submit="onSubmit">
+      <ShadcnFormItem name="name"
+                      :label="$t('common.name')"
+                      :rules="[
+                          { required: true, message: $t('common.name') }
+                      ]">
+        <ShadcnInput v-model="formState.name" name="name" :disabled="formState.system"/>
+      </ShadcnFormItem>
+
+      <ShadcnFormItem name="plugin"
+                      :label="$t('common.plugin')"
+                      :rules="[
+                          { required: true, message: $t('function.tip.selectPluginHolder') },
+                      ]">
+        <ShadcnCheckboxGroup v-model="formState.plugin" name="plugin">
+          <ShadcnCheckbox v-for="item in plugins" :value="item.name">{{ item.name }} ({{ item.type }})</ShadcnCheckbox>
+        </ShadcnCheckboxGroup>
+      </ShadcnFormItem>
+
+      <ShadcnFormItem name="description" :label="$t('common.description')">
+        <ShadcnInput v-model="formState.description" name="description" type="textarea"/>
+      </ShadcnFormItem>
+
+      <ShadcnFormItem name="content"
+                      :label="$t('common.content')"
+                      :rules="[{ required: true, message: $t('common.content') }]">
+        <AceEditor :value="formState.content" name="content" @update:value="setContent"/>
+      </ShadcnFormItem>
+
+      <div class="flex justify-end">
+        <ShadcnSpace>
+          <ShadcnButton type="error"
+                        :loading="saving"
+                        :disabled="saving"
+                        @click="onCancel()">
+            {{ $t('common.cancel') }}
+          </ShadcnButton>
+          <ShadcnButton submit :loading="saving" :disabled="saving">
             {{ $t('common.save') }}
-          </Button>
-        </SheetClose>
-      </SheetFooter>
-    </SheetContent>
-  </Sheet>
+          </ShadcnButton>
+        </ShadcnSpace>
+      </div>
+    </ShadcnForm>
+  </ShadcnDrawer>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue'
 import { TemplateModel, TemplateRequest } from '@/model/template'
-
-import { Textarea } from '@/components/ui/textarea'
-import { Sheet, SheetClose, SheetContent, SheetFooter, SheetHeader, SheetTitle } from '@/components/ui/sheet'
-import { ToastUtils } from '@/utils/toast'
-import { Label } from '@/components/ui/label'
-import { Input } from '@/components/ui/input'
 import SourceService from '@/services/source'
 import TemplateService from '@/services/template'
-import { Button } from '@/components/ui/button'
-import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/components/ui/dropdown-menu'
 import { cloneDeep } from 'lodash'
-import CircularLoading from '@/views/components/loading/CircularLoading.vue'
 import AceEditor from '@/views/components/editor/AceEditor.vue'
 
 export default defineComponent({
   name: 'TemplateInfo',
-  components: {
-    AceEditor,
-    CircularLoading,
-    Button,
-    Input,
-    Label,
-    SheetClose, SheetFooter, SheetTitle, SheetHeader, Sheet, SheetContent,
-    Textarea,
-    DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger,
-  },
+  components: { AceEditor },
   computed: {
     visible: {
       get(): boolean
@@ -133,10 +96,10 @@ export default defineComponent({
   methods: {
     handlerInitialize()
     {
-      this.title = `${this.$t('template.common.create')}`
+      this.title = `${ this.$t('template.common.create') }`
       if (this.info) {
         this.formState = cloneDeep(this.info)
-        this.title = `${this.$t('template.common.modify').replace('$NAME', this.info.name as string)}`
+        this.title = `${ this.$t('template.common.modify').replace('$NAME', this.info.name as string) }`
       }
       else {
         this.formState = TemplateRequest.of()
@@ -144,48 +107,41 @@ export default defineComponent({
 
       this.loading = true
       SourceService.getPlugins()
-          .then(response => {
-            if (response.status) {
-              this.plugins = Object.values(response.data).reduce((acc, curr) => (acc as any).concat(curr), []) as any[]
-              this.formState.plugin?.split(',').forEach(formPlugin => {
-                const foundPlugin = this.plugins.find(plugin => plugin.name === formPlugin)
-                if (foundPlugin) {
-                  foundPlugin.checked = true
-                }
-              })
-              this.setChecked()
-            }
-          })
-          .finally(() => this.loading = false)
-    },
-    handlerSave()
-    {
-      this.saving = true
-      TemplateService.saveOrUpdate(this.formState)
-          .then((response) => {
-            if (response.status) {
-              ToastUtils.success('Create successful')
-              this.handlerCancel()
-            }
-            else {
-              ToastUtils.error(response.message)
-            }
-          })
-          .finally(() => this.saving = false)
-    },
-    handlerCancel()
-    {
-      this.$emit('close', false)
-    },
-    setChecked()
-    {
-      this.formState.plugin = this.plugins.filter(it => it.checked)
-          .map(it => it.name)
-          .join(',')
+                   .then(response => {
+                     if (response.status) {
+                       this.plugins = Object.values(response.data).reduce((acc, curr) => (acc as any).concat(curr), []) as any[]
+                     }
+                   })
+                   .finally(() => this.loading = false)
     },
     setContent(value: string)
     {
       this.formState.content = value
+    },
+    onSubmit()
+    {
+      this.saving = true
+      TemplateService.saveOrUpdate(this.formState)
+                     .then((response) => {
+                       if (response.status) {
+                         this.$Message.success({
+                           content: 'Create successful',
+                           showIcon: true
+                         })
+                         this.onCancel()
+                       }
+                       else {
+                         this.$Message.error({
+                           content: response.message,
+                           showIcon: true
+                         })
+                       }
+                     })
+                     .finally(() => this.saving = false)
+    },
+    onCancel()
+    {
+      this.$emit('close', false)
     }
   }
 })

core/datacap-ui/src/views/pages/system/template/TemplateUtils.ts

@@ -1,13 +1,13 @@
 const createHeaders = (i18n: any) => {
     return [
-        {key: 'id', hidden: true, header: i18n.t('common.id')},
-        {key: 'name', hidden: true, header: i18n.t('common.name')},
-        {key: 'description', hidden: true, header: i18n.t('common.description')},
-        {key: 'plugin', hidden: true, header: i18n.t('common.plugin'), slot: 'plugin', class: 'text-center'},
-        {key: 'system', hidden: true, header: i18n.t('common.system'), slot: 'system', width: 120, class: 'text-center'},
-        {key: 'createTime', hidden: true, header: i18n.t('common.createTime'), width: 160, class: 'text-center'},
-        {key: 'updateTime', hidden: true, header: i18n.t('common.updateTime'), width: 160, class: 'text-center'},
-        {key: 'action', hidden: true, header: i18n.t('common.action'), slot: 'action', class: 'text-right'}
+        { key: 'id', label: i18n.t('common.id') },
+        { key: 'name', label: i18n.t('common.name') },
+        { key: 'description', label: i18n.t('common.description') },
+        { key: 'plugin', label: i18n.t('common.plugin'), slot: 'plugin' },
+        { key: 'system', label: i18n.t('common.system'), slot: 'system' },
+        { key: 'createTime', label: i18n.t('common.createTime') },
+        { key: 'updateTime', label: i18n.t('common.updateTime') },
+        { key: 'action', label: i18n.t('common.action'), slot: 'action' }
     ]
 }