refactor: confirm delete

Services/client/src/components/DialogDelete.vue

@@ -0,0 +1,87 @@
+<script setup lang="ts">
+import { useTreeDataStore } from '@/stores/tree-data'
+
+const { deleteFolder } = useTreeDataStore()
+const emit = defineEmits(['update:confirmDelete'])
+const props = withDefaults(
+  defineProps<{ confirmDelete: boolean; pathname: string }>(),
+  {
+    confirmDelete: false,
+  }
+)
+</script>
+
+<template>
+  <q-dialog
+    v-model="props.confirmDelete"
+    persistent
+    transition-show="scale"
+    transition-hide="scale"
+  >
+    <q-card style="width: 400px">
+      <q-card-section>
+        <div class="text-h6">แจ้งเตือนการลบ</div>
+      </q-card-section>
+
+      <q-card-section class="q-pt-none">
+        ถ้าดำเนินการต่อจะทำการลบ
+      </q-card-section>
+
+      <q-card-actions align="right" class="bg-white text-red">
+        <q-space />
+        <q-btn
+          flat
+          label="ยกเลิก"
+          v-close-popup
+          @click="
+            () => {
+              emit('update:confirmDelete')
+            }
+          "
+        />
+
+        <q-btn
+          flat
+          label="ลบ"
+          v-close-popup
+          class="text-teal"
+          @click="
+            () => {
+              deleteFolder(pathname)
+              emit('update:confirmDelete')
+            }
+          "
+        />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style lang="scss" scoped>
+.box {
+  display: inline-block;
+  border: 2px solid #f1f2f4;
+  border-radius: 8px;
+  cursor: pointer;
+}
+
+.dashed {
+  opacity: 0.4;
+  display: inline-block;
+  border: 2px solid #babdc3;
+  border-radius: 8px;
+  cursor: pointer;
+  border-style: dashed;
+}
+
+.add-icon {
+  margin: auto auto;
+}
+
+.add-button {
+  position: absolute;
+  top: 75px;
+  right: 45px;
+  background-color: white;
+}
+</style>

Services/client/src/components/FileItemAction.vue

@@ -1,9 +1,8 @@
 <script lang="ts" setup>
-import { useTreeDataStore } from '@/stores/tree-data'
 import { ref } from 'vue'
-import { storeToRefs } from 'pinia'
-const { currentDept } = storeToRefs(useTreeDataStore())
-const { deleteFolder, editFolder } = useTreeDataStore()
+import DialogDelete from '@/components/DialogDelete.vue'
+
+const confirmDelete = ref<boolean>(false)
 defineProps<{
   pathname: string
   editname: string
@@ -24,7 +23,8 @@ defineEmits(['editname', 'deletename'])
           </q-item-section>
         </q-item>
         <q-item clickable>
-          <q-item-section @click="() => deleteFolder(pathname)">
+          <!-- <q-item-section @click="() => deleteFolder(pathname)"> -->
+          <q-item-section @click="() => (confirmDelete = !confirmDelete)">
             <div class="row items-center">
               <q-icon name="delete" color="negative" />
               <span class="q-ml-sm">ลบ</span>
@@ -34,4 +34,10 @@ defineEmits(['editname', 'deletename'])
       </q-list>
     </q-menu>
   </q-btn>
+
+  <dialog-delete
+    :confirmDelete="confirmDelete"
+    :pathname="pathname"
+    @update:confirmDelete="() => (confirmDelete = false)"
+  />
 </template>

Services/client/src/components/ListView.vue

@@ -7,6 +7,7 @@ import { useFileInfoStore } from '@/stores/file-info-data'
 import FromEdit from '@/components/FromEdit.vue'
 import FileIcon from '@/components/FileIcon.vue'
 import FormUpload from '@/components/FormUpload.vue'
+import DialogDelete from '@/components/DialogDelete.vue'
 
 const { deleteFolder } = useTreeDataStore()
 const { getFormatDate, getSize, getType } = useFileInfoStore()
@@ -19,6 +20,8 @@ const drawer = ref<boolean>(false)
 const drawerFile = ref<boolean>(false)
 const drawerStatus = ref<'edit' | 'create'>('create')
 const editPathname = ref<string>('')
+const confirmDelete = ref<boolean>(false)
+const currentPathDelete = ref<string>('')
 
 const props = defineProps<{
   mode: 'admin' | 'user'
@@ -206,7 +209,12 @@ const onRowClick = (evt: Event, row: TreeDataFolder, index: number) => {
                 color="negative"
                 dense
                 icon="delete"
-                @click.stop="() => deleteFolder(actionsRow.row.pathname)"
+                @click.stop="
+                  () => {
+                    confirmDelete = !confirmDelete
+                    currentPathDelete = actionsRow.row.pathname
+                  }
+                "
               />
             </div>
           </q-td>
@@ -306,6 +314,11 @@ const onRowClick = (evt: Event, row: TreeDataFolder, index: number) => {
     :drawerFile="drawerFile"
     @update:drawerFile="() => (drawerFile = false)"
   />
+  <dialog-delete
+    :confirmDelete="confirmDelete"
+    :pathname="currentPathDelete"
+    @update:confirmDelete="() => (confirmDelete = false)"
+  />
 </template>
 
 <style lang="scss" scoped>