refactor: LivstView Cabinet and Drawer can CRUD

Services/client/src/components/ListView.vue

@@ -3,11 +3,22 @@ import { computed, ref } from 'vue'
 import { storeToRefs } from 'pinia'
 import type { QTableProps } from 'quasar'
 import { useTreeDataStore } from '@/stores/tree-data'
+import FromEdit from '@/components/FromEdit.vue'
 
+const { deleteFolder } = useTreeDataStore()
 const { listDataFile, listDataFolder, currentDept } = storeToRefs(
   useTreeDataStore()
 )
 const { getFolder } = useTreeDataStore()
+const DEPT_NAME = ['ตู้เอกสาร', 'ลิ้นชัก', 'แฟ้ม', 'แฟ้มย่อย']
+const drawer = ref<boolean>(false)
+const drawerFile = ref<boolean>(false)
+const drawerStatus = ref<'edit' | 'create'>('create')
+const editPathname = ref<string>('')
+
+const props = defineProps<{
+  mode: 'admin' | 'user'
+}>()
 
 const currentLevel = computed(() =>
   currentDept.value === 0
@@ -19,8 +30,6 @@ const currentLevel = computed(() =>
     : 'แฟ้มย่อย'
 )
 
-
-
 const currentIcon = computed(() =>
   currentDept.value === 0
     ? 'mdi-file-cabinet'
@@ -123,7 +132,13 @@ const columnsFile: QTableProps['columns'] = [
             color="primary"
             dense
             icon="add"
-            @click=""
+            @click="
+              () => {
+                drawer = !drawer
+                drawerStatus = 'create'
+                drawerFile = false
+              }
+            "
           />
         </div>
       </div>
@@ -161,9 +176,27 @@ const columnsFile: QTableProps['columns'] = [
                 {{ actionsRow.row.name }}
               </q-tooltip>
             </div>
-            <div>
-              <q-btn flat color="positive" dense icon="edit" @click="" />
-              <q-btn flat color="negative" dense icon="delete" @click="" />
+            <div v-if="props.mode === 'admin'">
+              <q-btn
+                flat
+                color="positive"
+                dense
+                icon="edit"
+                @click="
+                  () => {
+                    drawer = !drawer
+                    drawerStatus = 'edit'
+                    editPathname = actionsRow.row.pathname
+                  }
+                "
+              />
+              <q-btn
+                flat
+                color="negative"
+                dense
+                icon="delete"
+                @click="() => deleteFolder(actionsRow.row.pathname)"
+              />
             </div>
           </q-td>
         </template>
@@ -225,7 +258,7 @@ const columnsFile: QTableProps['columns'] = [
                 {{ actionsRow.row.fileSize }}
               </q-tooltip>
             </div>
-            <div>
+            <div v-if="props.mode === 'admin'">
               <q-btn flat color="positive" dense icon="edit" @click="" />
               <q-btn flat color="negative" dense icon="delete" @click="" />
             </div>
@@ -234,6 +267,15 @@ const columnsFile: QTableProps['columns'] = [
       </q-table>
     </div>
   </div>
+
+  <from-edit
+    :drawer="drawer"
+    :drawerStatus="drawerStatus"
+    :DEPT_NAME="DEPT_NAME"
+    :currentDept="currentDept"
+    :editPathname="editPathname"
+    @update:drawer="() => (drawer = !drawer)"
+  />
 </template>
 
 <style lang="scss" scoped>