feat: upload, edit & delete file, folder

Services/client/src/components/DialogDelete.vue

@@ -1,27 +1,14 @@
 <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,
-  }
-)
+defineEmits(['confirm', 'cancel'])
 </script>
 
 <template>
-  <q-dialog
-    v-model="props.confirmDelete"
-    persistent
-    transition-show="scale"
-    transition-hide="scale"
-  >
+  <q-dialog persistent transition-show="scale" transition-hide="scale">
     <q-card style="width: 400px">
       <q-card-section>
-        
-        <div class="text-h6"><q-icon name="error" color="negative" size="2.5rem"/>แจ้งเตือนการลบ</div>
+        <span class="text-h6">
+          <q-icon name="error" color="negative" size="2.5rem" />แจ้งเตือนการลบ
+        </span>
       </q-card-section>
 
       <q-card-section class="q-pt-none">
@@ -31,58 +18,20 @@ const props = withDefaults(
       <q-card-actions align="right" class="bg-white text-primary">
         <q-space />
         <q-btn
-          flat
           label="ยกเลิก"
+          flat
           v-close-popup
-          @click="
-            () => {
-              emit('update:confirmDelete')
-            }
-          "
+          @click="() => $emit('cancel')"
         />
 
         <q-btn
           flat
-          label="ลบ"
           v-close-popup
+          label="ลบ"
           class="text-red"
-          @click="
-            () => {
-              deleteFolder(pathname)
-              emit('update:confirmDelete')
-            }
-          "
+          @click="() => $emit('confirm')"
         />
       </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>