[Core] [Refactor] [UI] [Snippet] Add modify

core/datacap-ui/src/i18n/langs/en/snippet.ts

@@ -2,7 +2,7 @@ export default {
     common: {
         list: 'Snippet List',
         create: 'Create Snippet',
-        modify: 'Modify Snippet [ $NAME ]',
+        modify: 'Modify Snippet [ $VALUE ]',
     },
     tip: {
         createSuccess: 'Snippet [ $VALUE ] created successfully',

core/datacap-ui/src/views/pages/admin/snippet/SnippetHome.vue

@@ -5,9 +5,48 @@
         <template #username="{ row }">
           <Avatar :src="row.user.avatar" :alt="row.user.username"/>
         </template>
+        <template #action="{ row }">
+          <div class="space-x-2">
+            <Tooltip :content="$t('snippet.common.modify').replace('$VALUE', row.name)">
+              <Button size="icon" class="rounded-full w-6 h-6" @click="handlerInfo(true, row)">
+                <Pencil :size="14"/>
+              </Button>
+            </Tooltip>
+            <!--            <DropdownMenu>-->
+            <!--              <DropdownMenuTrigger as-child>-->
+            <!--                <Button size="icon" class="rounded-full w-6 h-6" variant="outline">-->
+            <!--                  <Cog class="w-full justify-center" :size="14"/>-->
+            <!--                </Button>-->
+            <!--              </DropdownMenuTrigger>-->
+            <!--              <DropdownMenuContent>-->
+            <!--                <DropdownMenuGroup>-->
+            <!--                  <DropdownMenuItem :disabled="(loginUserId !== row.user.id) || !row.available" class="cursor-pointer">-->
+            <!--                    <RouterLink :to="`/admin/source/${row?.id}/manager`" target="_blank" class="flex items-center">-->
+            <!--                      <Cog class="mr-2 h-4 w-4"/>-->
+            <!--                      <span>{{ $t('source.common.manager') }}</span>-->
+            <!--                    </RouterLink>-->
+            <!--                  </DropdownMenuItem>-->
+            <!--                  <DropdownMenuItem :disabled="loginUserId !== row.user.id" class="cursor-pointer" @click="handlerDelete(true, row)">-->
+            <!--                    <Trash class="mr-2 h-4 w-4"/>-->
+            <!--                    <span>{{ $t('common.deleteData') }}</span>-->
+            <!--                  </DropdownMenuItem>-->
+            <!--                  <DropdownMenuItem :disabled="(loginUserId !== row.user.id)" class="cursor-pointer" @click="handlerHistory(true, row)">-->
+            <!--                    <History class="mr-2 h-4 w-4"/>-->
+            <!--                    {{ $t('source.common.syncHistory') }}-->
+            <!--                  </DropdownMenuItem>-->
+            <!--                  <DropdownMenuItem :disabled="(loginUserId !== row.user.id) || !row.available" class="cursor-pointer" @click="handlerSyncMetadata(true, row)">-->
+            <!--                    <RefreshCcwDot class="mr-2 h-4 w-4"/>-->
+            <!--                    {{ $t('source.common.syncMetadata') }}-->
+            <!--                  </DropdownMenuItem>-->
+            <!--                </DropdownMenuGroup>-->
+            <!--              </DropdownMenuContent>-->
+            <!--            </DropdownMenu>-->
+          </div>
+        </template>
       </TableCommon>
     </Card>
   </div>
+  <SnippetInfo v-if="dataInfoVisible" :is-visible="dataInfoVisible" :info="dataInfo" @close="handlerInfo(false, null)"/>
 </template>
 
 <script lang="ts">
@@ -21,13 +60,22 @@ import { PaginationModel, PaginationRequest } from '@/model/pagination'
 import SnippetService from '@/services/snippet'
 import { ToastUtils } from '@/utils/toast'
 import Avatar from '@/views/ui/avatar'
+import Tooltip from '@/views/ui/tooltip'
+import Button from '@/views/ui/button'
+import { Pencil } from 'lucide-vue-next'
+import { SnippetModel } from '@/model/snippet'
+import SnippetInfo from '@/views/pages/admin/snippet/SnippetInfo.vue'
 
 export default defineComponent({
   name: 'SnippetHome',
   components: {
+    SnippetInfo,
+    Pencil,
     TableCommon,
     Card,
-    Avatar
+    Avatar,
+    Tooltip,
+    Button
   },
   setup()
   {
@@ -43,7 +91,9 @@ export default defineComponent({
     return {
       loading: false,
       data: [],
-      pagination: {} as PaginationModel
+      pagination: {} as PaginationModel,
+      dataInfoVisible: false,
+      dataInfo: null as null | SnippetModel
     }
   },
   created()
@@ -71,6 +121,14 @@ export default defineComponent({
       this.filter.page = value.currentPage
       this.filter.size = value.pageSize
       this.handlerInitialize()
+    },
+    handlerInfo(opened: boolean, value: null | SnippetModel)
+    {
+      this.dataInfoVisible = opened
+      this.dataInfo = value
+      if (!opened) {
+        this.handlerInitialize()
+      }
     }
   }
 })

core/datacap-ui/src/views/pages/admin/snippet/SnippetInfo.vue

@@ -102,7 +102,7 @@ export default defineComponent({
       if (this.info) {
         this.formState = cloneDeep(this.info)
         if (this.info.id) {
-          this.title = `${ this.$t('function.common.modify').replace('$VALUE', this.info.name as string) }`
+          this.title = `${ this.$t('snippet.common.modify').replace('$VALUE', this.info.name as string) }`
         }
       }
       else {

docs/docs/CNAME

@@ -1 +1 @@
-datacap.edurt.io
+datacap.devlive.org