[Core] [Refactor] [UI] Add delete

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

@@ -2,6 +2,14 @@ export default {
     common: {
         list: 'Report List',
         view: 'View Report [ $VALUE ]',
-        modify: 'Modify Report'
+        modify: 'Modify Report',
+        delete: 'Delete Report',
+        deleteInfo: 'Delete Report [ $VALUE ]'
+    },
+    tip: {
+        deleteSuccess: 'Delete report [ $VALUE ] successfully',
+        deleteAlert1: 'You are deleting a report. This action permanently deletes the report. Please be sure to confirm your actions before proceeding.',
+        deleteAlert2: 'Warning: This cannot be undone.',
+        deleteAlert3: 'To confirm, type [ $VALUE ] in the box below',
     }
 }

core/datacap-ui/src/i18n/langs/zhCn/report.ts

@@ -2,6 +2,14 @@ export default {
     common: {
         list: '报表列表',
         view: '查看报表 [ $VALUE ]',
-        modify: '修改报表'
+        modify: '修改报表',
+        delete: '删除报表',
+        deleteInfo: '删除报表 [ $VALUE ]'
+    },
+    tip: {
+        deleteSuccess: '删除报表 [ $VALUE ] 成功',
+        deleteAlert1: '您正在删除报表。此操作将永久删除报表。在继续操作之前，请务必确认您的操作。',
+        deleteAlert2: '警告：此操作无法撤销。',
+        deleteAlert3: '要确认，请在下面的框中键入 [ $VALUE ]',
     }
 }

core/datacap-ui/src/views/pages/admin/report/ReportDelete.vue

@@ -0,0 +1,108 @@
+<template>
+  <Dialog :is-visible="visible" :title="title as string" :width="'40%'" @close="handlerCancel">
+    <div class="pl-3 pr-3 space-y-2">
+      <Alert type="error">
+        <template #description>{{ $t('report.tip.deleteAlert1') }}</template>
+      </Alert>
+      <Alert type="error">
+        <template #description>{{ $t('report.tip.deleteAlert2') }}</template>
+      </Alert>
+      <Alert type="info">
+        <template #description>{{ $t('report.tip.deleteAlert3').replace('$VALUE', info?.name as string) }}</template>
+      </Alert>
+      <Input v-model="inputValue"/>
+    </div>
+    <template #footer>
+      <div class="space-x-5">
+        <Button variant="outline" size="sm" @click="handlerCancel">
+          {{ $t('common.cancel') }}
+        </Button>
+        <Button size="sm" variant="destructive" :loading="loading" :disabled="loading || inputValue !== info?.name" @click="handlerSubmit()">
+          {{ title }}
+        </Button>
+      </div>
+    </template>
+  </Dialog>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import Dialog from '@/views/ui/dialog'
+import ReportService from '@/services/report'
+import { ToastUtils } from '@/utils/toast'
+import Button from '@/views/ui/button'
+import Alert from '@/views/ui/alert'
+import { Input } from '@/components/ui/input'
+import { ReportModel } from '@/model/report'
+
+export default defineComponent({
+  name: 'ReportDelete',
+  components: {
+    Input,
+    Alert,
+    Button,
+    Dialog
+  },
+  computed: {
+    visible: {
+      get(): boolean
+      {
+        return this.isVisible
+      },
+      set(value: boolean)
+      {
+        this.$emit('close', value)
+      }
+    }
+  },
+  props: {
+    isVisible: {
+      type: Boolean
+    },
+    info: {
+      type: Object as () => ReportModel | null
+    }
+  },
+  data()
+  {
+    return {
+      title: null as string | null,
+      loading: false,
+      inputValue: ''
+    }
+  },
+  created()
+  {
+    this.handlerInitialize()
+  },
+  methods: {
+    handlerInitialize()
+    {
+      if (this.info) {
+        this.title = `${ this.$t('report.common.deleteInfo').replace('$VALUE', this.info.name as string) }`
+      }
+    },
+    handlerSubmit()
+    {
+      if (this.info) {
+        this.loading = true
+        ReportService.deleteById(this.info.id as number)
+                     .then((response) => {
+                       if (response.status) {
+                         ToastUtils.success(this.$t('report.tip.deleteSuccess').replace('$VALUE', this.info?.name as string))
+                         this.handlerCancel()
+                       }
+                       else {
+                         ToastUtils.error(response.message)
+                       }
+                     })
+                     .finally(() => this.loading = false)
+      }
+    },
+    handlerCancel()
+    {
+      this.visible = false
+    }
+  }
+})
+</script>

core/datacap-ui/src/views/pages/admin/report/ReportHome.vue

@@ -34,6 +34,10 @@
                       <span>{{ $t('report.common.modify') }}</span>
                     </RouterLink>
                   </DropdownMenuItem>
+                  <DropdownMenuItem class="cursor-pointer" @click="handlerDelete(true, row)">
+                    <Delete class="mr-2 h-4 w-4"/>
+                    <span>{{ $t('report.common.delete') }}</span>
+                  </DropdownMenuItem>
                 </DropdownMenuGroup>
               </DropdownMenuContent>
             </DropdownMenu>
@@ -43,6 +47,7 @@
     </Card>
   </div>
   <ReportView v-if="dataViewVisible" :is-visible="dataViewVisible" :info="dataInfo" @close="handlerView(false, null)"/>
+  <ReportDelete v-if="dataDeleteVisible" :is-visible="dataDeleteVisible" :info="dataInfo" @close="handlerDelete(false, null)"/>
 </template>
 
 <script lang="ts">
@@ -60,7 +65,7 @@ import Tooltip from '@/views/ui/tooltip'
 import Avatar from '@/views/ui/avatar'
 import Tag from '@/views/ui/tag'
 import Button from '@/views/ui/button'
-import { Cog, Eye, Pencil } from 'lucide-vue-next'
+import { Cog, Delete, Eye, Pencil } from 'lucide-vue-next'
 import { ReportModel } from '@/model/report'
 import ReportView from '@/views/pages/admin/report/ReportView.vue'
 import {
@@ -72,10 +77,12 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger
 } from '@/components/ui/dropdown-menu'
+import ReportDelete from '@/views/pages/admin/report/ReportDelete.vue'
 
 export default defineComponent({
   name: 'ReportHome',
   components: {
+    ReportDelete,
     ReportView,
     TableCommon,
     Card,
@@ -84,7 +91,7 @@ export default defineComponent({
     Avatar,
     Tag,
     Button,
-    Eye, Cog, Pencil,
+    Eye, Cog, Pencil, Delete,
     DropdownMenuItem, DropdownMenuGroup, DropdownMenuSeparator, DropdownMenuLabel, DropdownMenuContent, DropdownMenuTrigger, DropdownMenu
   },
   setup()
@@ -103,7 +110,8 @@ export default defineComponent({
       data: [],
       pagination: {} as PaginationModel,
       dataInfo: null as ReportModel | null,
-      dataViewVisible: false
+      dataViewVisible: false,
+      dataDeleteVisible: false
     }
   },
   created()
@@ -136,6 +144,14 @@ export default defineComponent({
     {
       this.dataViewVisible = opened
       this.dataInfo = value
+    },
+    handlerDelete(opened: boolean, data: ReportModel | null)
+    {
+      this.dataDeleteVisible = opened
+      this.dataInfo = data
+      if (!opened) {
+        this.handlerInitialize()
+      }
     }
   }
 })

core/datacap-web/src/views/admin/report/AdminReport.vue

@@ -1,170 +0,0 @@
-<template>
-  <div>
-    <Card style="width:100%"
-          :title="$t('common.report')"
-          dis-hover>
-      <Table :loading="loading"
-             :columns="headers"
-             :data="data.content">
-        <template #realtime="{ row }">
-          <Switch v-model="row.realtime"
-                  disabled>
-          </Switch>
-        </template>
-        <template #source="{ row }">
-          <Tooltip v-if="row.source"
-                   transfer
-                   :content="row.source.type">
-            <Avatar :src="'/static/images/plugin/' + row.source.type + '.png'"
-                    size="small">
-            </Avatar>
-          </Tooltip>
-          <Tooltip v-else
-                   transfer
-                   :content="`${$t('common.dataset')} [ ${row.dataset.name} ]`">
-            <Icon type="ios-analytics"
-                  size="30">
-            </Icon>
-          </Tooltip>
-        </template>
-        <template #action="{ row }">
-          <Space>
-            <Button shape="circle"
-                    type="primary"
-                    size="small"
-                    icon="md-eye"
-                    @click="handlerViewChart(row, true)">
-            </Button>
-            <Button shape="circle"
-                    size="small"
-                    icon="md-create"
-                    :disabled="!row.dataset"
-                    @click="$router.push(`/admin/dataset/adhoc/${row.dataset.code}/${row.id}`)">
-            </Button>
-            <Tooltip :content="$t('common.delete')"
-                     transfer>
-              <Button shape="circle"
-                      type="error"
-                      size="small"
-                      icon="md-trash"
-                      @click="handlerDelete(row, true)">
-              </Button>
-            </Tooltip>
-          </Space>
-        </template>
-      </Table>
-      <p v-if="!loading"
-         style="margin-top: 10px;">
-        <Page v-model="pagination.current"
-              show-sizer
-              show-elevator
-              show-total
-              :total="pagination.total"
-              :page-size="pagination.pageSize"
-              @on-page-size-change="handlerSizeChange"
-              @on-change="handlerIndexChange">
-        </Page>
-      </p>
-    </Card>
-    <DeleteReport v-if="deleteVisible"
-                  :is-visible="deleteVisible"
-                  :data="contextData"
-                  @close="handlerDelete(null, false)">
-    </DeleteReport>
-    <ViewReport v-if="viewChartVisible"
-                :is-visible="viewChartVisible"
-                :data="contextData"
-                @close="handlerViewChart(null, false)">
-    </ViewReport>
-  </div>
-</template>
-
-<script lang="ts">
-import {defineComponent} from "vue";
-import {useI18n} from 'vue-i18n';
-import {ResponsePage} from "@/model/ResponsePage";
-import {createHeaders} from "@/views/admin/report/ReportUtils";
-import ReportService from "@/services/admin/ReportService";
-import {Filter} from "@/model/Filter";
-import {Pagination, PaginationBuilder} from "@/model/Pagination";
-import DeleteReport from "@/views/admin/report/DeleteReport.vue";
-import ViewReport from "@/views/admin/report/ViewReport.vue";
-
-const filter: Filter = new Filter();
-const pagination: Pagination = PaginationBuilder.newInstance();
-export default defineComponent({
-  name: "ReportAdmin",
-  components: {ViewReport, DeleteReport},
-  setup()
-  {
-    const i18n = useI18n();
-    const headers = createHeaders(i18n);
-    return {
-      headers,
-      filter
-    }
-  },
-  data()
-  {
-    return {
-      data: ResponsePage,
-      loading: false,
-      pagination: {
-        total: 0,
-        current: 1,
-        pageSize: 10
-      },
-      deleteVisible: false,
-      contextData: null,
-      viewChartVisible: false
-    }
-  },
-  created()
-  {
-    this.handlerInitialize(this.filter);
-  },
-  methods: {
-    handlerInitialize(filter: Filter)
-    {
-      this.loading = true;
-      ReportService.getAll(filter)
-        .then((response) => {
-          if (response.status) {
-            this.data = response.data;
-            this.pagination.total = response.data.total;
-          }
-          this.loading = false;
-        })
-    },
-    handlerSizeChange(size: number)
-    {
-      this.pagination.pageSize = size;
-      this.handlerTableChange(this.pagination);
-    },
-    handlerIndexChange(index: number)
-    {
-      this.pagination.current = index;
-      this.handlerTableChange(this.pagination);
-    },
-    handlerTableChange(pagination: any)
-    {
-      this.pagination.current = pagination.current;
-      this.pagination.pageSize = pagination.pageSize;
-      this.handlerInitialize(this.filter)
-    },
-    handlerDelete(data: any, opened: boolean)
-    {
-      this.deleteVisible = opened;
-      this.contextData = data;
-      if (!opened) {
-        this.handlerInitialize(this.filter);
-      }
-    },
-    handlerViewChart(data: any, opened: boolean)
-    {
-      this.viewChartVisible = opened;
-      this.contextData = data;
-    }
-  }
-});
-</script>

core/datacap-web/src/views/admin/report/DeleteReport.vue

@@ -1,82 +0,0 @@
-<template>
-  <div>
-    <Modal v-model="visible"
-           :title="$t('common.delete') + ' [ ' + data.name + ' ]'"
-           :mask-closable="false"
-           @cancel="handlerCancel()">
-      <Alert type="warning"
-             show-icon>
-        {{ $t('report.deleteTip1') }}
-      </Alert>
-      <Alert type="error"
-             show-icon>
-        {{ $t('report.deleteTip2') }}
-      </Alert>
-      <p>{{ $t('report.deleteTip3').replace('REPLACE_NAME', data.name) }}</p>
-      <Input v-model="inputValue"/>
-      <template #footer>
-        <Button type="error"
-                :disabled="inputValue !== data.name"
-                :loading="loading"
-                @click="handlerDelete()">
-          <FontAwesomeIcon icon="delete-left"/>
-          {{ $t('common.delete') }}
-        </Button>
-      </template>
-    </Modal>
-  </div>
-</template>
-<script lang="ts">
-import {defineComponent} from "vue";
-import ReportService from "@/services/admin/ReportService";
-
-export default defineComponent({
-  name: "DeleteReport",
-  props: {
-    isVisible: {
-      type: Boolean,
-      default: () => false
-    },
-    data: {
-      type: Object
-    }
-  },
-  data()
-  {
-    return {
-      loading: false,
-      inputValue: null
-    }
-  },
-  methods: {
-    handlerDelete()
-    {
-      this.loading = true;
-      ReportService.deleteById(this.data.id)
-        .then((response) => {
-          if (response.status) {
-            this.$Message.success(`${this.$t('common.delete')} [ ${this.data.name} ] ${this.$t('common.success')}`);
-            this.handlerCancel();
-          }
-        })
-        .finally(() => this.loading = false);
-    },
-    handlerCancel()
-    {
-      this.visible = false;
-    }
-  },
-  computed: {
-    visible: {
-      get(): boolean
-      {
-        return this.isVisible;
-      },
-      set(value: boolean)
-      {
-        this.$emit('close', value);
-      }
-    }
-  }
-});
-</script>