From 75385225ec0206d2d9e13b17c9dc461d1246a212 Mon Sep 17 00:00:00 2001
From: Yue JIN <yjin@nustarnuclear.com>
Date: Wed, 24 Jan 2024 17:46:17 +0800
Subject: [PATCH] feat: add dialog component

---
 components/DialogConfirm.vue |  60 +++++++++++
 components/PageWrapper.vue   |   3 -
 pages/labs.vue               | 127 -----------------------
 pages/nested.vue             |   2 +-
 pages/nested/menu2.vue       |   2 +-
 pages/table.vue              | 194 +++++++++++++++++++++++++++++++++++
 6 files changed, 256 insertions(+), 132 deletions(-)
 create mode 100644 components/DialogConfirm.vue
 delete mode 100644 components/PageWrapper.vue
 delete mode 100644 pages/labs.vue
 create mode 100644 pages/table.vue

diff --git a/components/DialogConfirm.vue b/components/DialogConfirm.vue
new file mode 100644
index 0000000..46ae220
--- /dev/null
+++ b/components/DialogConfirm.vue
@@ -0,0 +1,60 @@
+<script lang="ts">
+export default defineComponent({
+  data: () => ({
+    dialog: false,
+    confirmed: false,
+    resolve: (confirmed: boolean) => {
+      confirmed
+    },
+    reject: (val: unknown) => {
+      val
+    },
+    message: '',
+  }),
+  watch: {
+    dialog(value) {
+      if (value === false) {
+        this.resolve(this.confirmed)
+      }
+    },
+  },
+  methods: {
+    open(message: string) {
+      this.confirmed = false
+      this.dialog = true
+      this.message = message
+      return new Promise<boolean>((resolve, reject) => {
+        this.resolve = resolve
+        this.reject = reject
+      })
+    },
+    confirm() {
+      this.confirmed = true
+      this.dialog = false
+    },
+    cancel() {
+      this.confirmed = false
+      this.dialog = false
+    },
+  },
+})
+</script>
+
+<template>
+  <v-dialog v-model="dialog" max-width="400px">
+    <v-card style="z-index: -1">
+      <!-- <v-card-title class="font-weight-bold d-flex justify-center pt-5">
+      </v-card-title> -->
+      <v-card-text class="font-weight-bold d-flex">
+        <v-icon class="mr-2" color="warning">$warning</v-icon>
+        <span>{{ message }}</span>
+      </v-card-text>
+      <v-card-actions>
+        <v-spacer></v-spacer>
+        <v-btn color="primary darken-1" @click="cancel">Cancel</v-btn>
+        <v-btn color="primary darken-1" @click="confirm">Confirm</v-btn>
+        <v-spacer></v-spacer>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
diff --git a/components/PageWrapper.vue b/components/PageWrapper.vue
deleted file mode 100644
index 8f62b8b..0000000
--- a/components/PageWrapper.vue
+++ /dev/null
@@ -1,3 +0,0 @@
-<template>
-  <NuxtPage />
-</template>
diff --git a/pages/labs.vue b/pages/labs.vue
deleted file mode 100644
index b7b8960..0000000
--- a/pages/labs.vue
+++ /dev/null
@@ -1,127 +0,0 @@
-<script setup lang="ts">
-import type { DataTableHeaders } from '~/plugins/vuetify'
-
-definePageMeta({
-  icon: 'mdi-flask',
-  title: 'Labs',
-  drawerIndex: 3,
-})
-
-const headers: DataTableHeaders = [
-  {
-    title: 'Dessert (100g serving)',
-    key: 'name',
-  },
-  { title: 'Calories', key: 'calories' },
-  { title: 'Fat (g)', key: 'fat' },
-  { title: 'Carbs (g)', key: 'carbs' },
-  { title: 'Protein (g)', key: 'protein' },
-  { title: 'Iron (%)', key: 'iron' },
-]
-const desserts = ref([
-  {
-    name: 'Frozen Yogurt',
-    calories: 159,
-    fat: 6.0,
-    carbs: 24,
-    protein: 4.0,
-    iron: '1',
-  },
-  {
-    name: 'Jelly bean',
-    calories: 375,
-    fat: 0.0,
-    carbs: 94,
-    protein: 0.0,
-    iron: '0',
-  },
-  {
-    name: 'KitKat',
-    calories: 518,
-    fat: 26.0,
-    carbs: 65,
-    protein: 7,
-    iron: '6',
-  },
-  {
-    name: 'Eclair',
-    calories: 262,
-    fat: 16.0,
-    carbs: 23,
-    protein: 6.0,
-    iron: '7',
-  },
-  {
-    name: 'Gingerbread',
-    calories: 356,
-    fat: 16.0,
-    carbs: 49,
-    protein: 3.9,
-    iron: '16',
-  },
-  {
-    name: 'Ice cream sandwich',
-    calories: 237,
-    fat: 9.0,
-    carbs: 37,
-    protein: 4.3,
-    iron: '1',
-  },
-  {
-    name: 'Lollipop',
-    calories: 392,
-    fat: 0.2,
-    carbs: 98,
-    protein: 0,
-    iron: '2',
-  },
-  {
-    name: 'Cupcake',
-    calories: 305,
-    fat: 3.7,
-    carbs: 67,
-    protein: 4.3,
-    iron: '8',
-  },
-  {
-    name: 'Honeycomb',
-    calories: 408,
-    fat: 3.2,
-    carbs: 87,
-    protein: 6.5,
-    iron: '45',
-  },
-  {
-    name: 'Donut',
-    calories: 452,
-    fat: 25.0,
-    carbs: 51,
-    protein: 4.9,
-    iron: '22',
-  },
-  {
-    name: 'Donut2',
-    calories: 452,
-    fat: 25.0,
-    carbs: 51,
-    protein: 4.9,
-    iron: '22',
-  },
-])
-</script>
-
-<template>
-  <v-container fluid>
-    <v-row>
-      <v-col>
-        <v-card>
-          <v-data-table
-            :headers="headers"
-            :items="desserts"
-            item-value="name"
-          ></v-data-table>
-        </v-card>
-      </v-col>
-    </v-row>
-  </v-container>
-</template>
diff --git a/pages/nested.vue b/pages/nested.vue
index cb4cfa8..f5600d3 100644
--- a/pages/nested.vue
+++ b/pages/nested.vue
@@ -7,5 +7,5 @@ definePageMeta({
 })
 </script>
 <template>
-  <PageWrapper />
+  <NuxtPage />
 </template>
diff --git a/pages/nested/menu2.vue b/pages/nested/menu2.vue
index dbc027f..c0f241f 100644
--- a/pages/nested/menu2.vue
+++ b/pages/nested/menu2.vue
@@ -5,5 +5,5 @@ definePageMeta({
 })
 </script>
 <template>
-  <PageWrapper />
+  <NuxtPage />
 </template>
diff --git a/pages/table.vue b/pages/table.vue
new file mode 100644
index 0000000..ae6d9a9
--- /dev/null
+++ b/pages/table.vue
@@ -0,0 +1,194 @@
+<script setup lang="ts">
+import DialogConfirm from '~/components/DialogConfirm.vue'
+import type { DataTableHeaders } from '~/plugins/vuetify'
+
+definePageMeta({
+  icon: 'mdi-table',
+  title: 'Data Table',
+  drawerIndex: 3,
+})
+
+const search = ref('')
+const dialogDelete = ref<InstanceType<typeof DialogConfirm> | null>(null)
+function showDialogDelete(name: string) {
+  dialogDelete.value
+    ?.open('Are you sure you want to delete this dessert?')
+    .then(async (confirmed: boolean) => {
+      if (confirmed) {
+        try {
+          const index = desserts.value!.findIndex((v) => v.name === name)
+          desserts.value!.splice(index, 1)
+          Notify.success('Deleted')
+        } catch (e) {
+          Notify.error(e)
+        }
+      }
+    })
+}
+
+const headers: DataTableHeaders = [
+  {
+    title: 'Dessert (100g serving)',
+    key: 'name',
+  },
+  { title: 'Calories', key: 'calories' },
+  { title: 'Fat (g)', key: 'fat' },
+  { title: 'Carbs (g)', key: 'carbs' },
+  { title: 'Protein (g)', key: 'protein' },
+  { title: 'Iron (%)', key: 'iron' },
+  { title: 'Actions', key: 'actions', sortable: false },
+]
+const desserts = ref([
+  {
+    name: 'Frozen Yogurt',
+    calories: 159,
+    fat: 6.0,
+    carbs: 24,
+    protein: 4.0,
+    iron: '1',
+  },
+  {
+    name: 'Jelly bean',
+    calories: 375,
+    fat: 0.0,
+    carbs: 94,
+    protein: 0.0,
+    iron: '0',
+  },
+  {
+    name: 'KitKat',
+    calories: 518,
+    fat: 26.0,
+    carbs: 65,
+    protein: 7,
+    iron: '6',
+  },
+  {
+    name: 'Eclair',
+    calories: 262,
+    fat: 16.0,
+    carbs: 23,
+    protein: 6.0,
+    iron: '7',
+  },
+  {
+    name: 'Gingerbread',
+    calories: 356,
+    fat: 16.0,
+    carbs: 49,
+    protein: 3.9,
+    iron: '16',
+  },
+  {
+    name: 'Ice cream sandwich',
+    calories: 237,
+    fat: 9.0,
+    carbs: 37,
+    protein: 4.3,
+    iron: '1',
+  },
+  {
+    name: 'Lollipop',
+    calories: 392,
+    fat: 0.2,
+    carbs: 98,
+    protein: 0,
+    iron: '2',
+  },
+  {
+    name: 'Cupcake',
+    calories: 305,
+    fat: 3.7,
+    carbs: 67,
+    protein: 4.3,
+    iron: '8',
+  },
+  {
+    name: 'Honeycomb',
+    calories: 408,
+    fat: 3.2,
+    carbs: 87,
+    protein: 6.5,
+    iron: '45',
+  },
+  {
+    name: 'Donut',
+    calories: 452,
+    fat: 25.0,
+    carbs: 51,
+    protein: 4.9,
+    iron: '22',
+  },
+  {
+    name: 'Donut2',
+    calories: 452,
+    fat: 25.0,
+    carbs: 51,
+    protein: 4.9,
+    iron: '22',
+  },
+])
+</script>
+
+<template>
+  <v-container fluid>
+    <v-row>
+      <v-col>
+        <v-card>
+          <client-only>
+            <teleport to="#app-bar">
+              <v-text-field
+                v-model="search"
+                prepend-inner-icon="mdi-magnify"
+                label="Search"
+                single-line
+                hide-details
+                density="compact"
+                class="mr-2"
+                rounded="xl"
+                flat
+                variant="solo"
+                style="width: 250px"
+              ></v-text-field>
+            </teleport>
+          </client-only>
+          <v-data-table
+            :headers="headers"
+            :items="desserts"
+            item-value="name"
+            :search="search"
+          >
+            <template #item.actions="{ item }">
+              <v-defaults-provider
+                :defaults="{
+                  VBtn: {
+                    size: 20,
+                    rounded: 'sm',
+                    variant: 'text',
+                    class: 'ml-1',
+                    color: '',
+                  },
+                  VIcon: {
+                    size: 20,
+                  },
+                }"
+              >
+                <v-tooltip location="top">
+                  <template #activator="{ props }">
+                    <v-btn
+                      icon="mdi-delete-outline"
+                      v-bind="props"
+                      @click.stop="showDialogDelete(item.name)"
+                    />
+                  </template>
+                  <span>Delete</span>
+                </v-tooltip>
+              </v-defaults-provider>
+            </template>
+          </v-data-table>
+          <DialogConfirm ref="dialogDelete" />
+        </v-card>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>