refactor: LivstView Cabinet and Drawer can CRUD

2023-11-28 09:22:44 +07:00 · 2023-11-28 09:22:44 +07:00 · 3553164a8a
commit 3553164a8a
parent a28bc7de6b
6 changed files with 183 additions and 42 deletions
--- a/Services/client/src/components/FileItem.vue
+++ b/Services/client/src/components/FileItem.vue
@ -85,7 +85,11 @@ const props = withDefaults(
        class="inline-block"
        v-if="props.action && currentDept < 4"
        tabindex="0"
-        @keydown.esc="() => (drawer = false)"
+        @keydown.esc="
+          () => {
+            drawer = false
+          }
+        "
      >
        <div class="dashed border-radius-inherit">
          <q-card
@ -177,9 +181,94 @@ const props = withDefaults(
    </div>
  </div>

-<from-edit :drawer="drawer" :drawerStatus="drawerStatus" :DEPT_NAME="DEPT_NAME" :currentDept="currentDept" :editPathname="editPathname" />
-
+  <from-edit
+    :drawer="drawer"
+    :drawerStatus="drawerStatus"
+    :DEPT_NAME="DEPT_NAME"
+    :currentDept="currentDept"
+    :editPathname="editPathname"
+    @update:drawer="() => (drawer = !drawer)"
+  />

+  <q-drawer
+    class="q-pa-md"
+    side="right"
+    v-model="drawerFile"
+    bordered
+    :width="300"
+    :breakpoint="500"
+    overlay
+  >
+    <q-toolbar class="q-mb-md q-pa-none">
+      <q-toolbar-title>
+        <span class="text-weight-bold">สร้างเอกสาร</span>
+      </q-toolbar-title>
+      <q-btn
+        flat
+        round
+        dense
+        icon="close"
+        v-close-popup
+        color="red"
+        @click="() => (drawerFile = !drawerFile)"
+      />
+    </q-toolbar>
+    <span class="text-weight-bold">อัพโหลดไฟล์</span>
+    <q-input
+      model-value="inputfile"
+      class="q-my-md"
+      outlined
+      type="file"
+      :placeholder="`กรอกชื่อ${DEPT_NAME[currentDept]}`"
+      dense
+    />
+    <span class="text-weight-bold">ชื่อเรื่อง</span>
+    <q-input
+      class="q-my-md"
+      outlined
+      v-model="fileTitle"
+      placeholder="กรอกชื่อเรื่อง"
+      dense
+    />
+    <span class="text-weight-bold">รายละเอียดของเอกสาร</span>
+    <q-input
+      class="q-my-md"
+      outlined
+      type="textarea"
+      v-model="fileDesc"
+      placeholder="กรอกรายละเอียด"
+      dense
+    />
+    <span class="text-weight-bold">กลุ่ม/หมวดหมู่</span>
+    <q-select
+      class="q-my-md"
+      outlined
+      :options="optionsCategory"
+      v-model="fileCategory"
+      placeholder="เลือกกลุ่ม/หมวดหมู่"
+      dense
+    />
+    <span class="text-weight-bold">คำสำคัญ</span>
+    <q-input
+      class="q-my-md"
+      outlined
+      v-model="fileKeyword"
+      placeholder="กรอกคำสำคัญ"
+      dense
+    />
+    <q-btn
+      class="q-px-md"
+      label="บันทึก"
+      type="submit"
+      color="primary"
+      dense
+      @click="
+        () => {
+          drawerFile = !drawerFile
+        }
+      "
+    />
+  </q-drawer>
 </template>

 <style lang="scss" scoped>
--- a/Services/client/src/components/FileItemAction.vue
+++ b/Services/client/src/components/FileItemAction.vue
@ -8,14 +8,7 @@ defineProps<{
  pathname: string
  editname: string
 }>()
-defineEmits([
-  'editname',
-  'deletename',
-])
-
-const editdrawer = ref(false)
-const DEPT_NAME = ['ตู้เอกสาร', 'ลิ้นชัก', 'แฟ้ม', 'แฟ้มย่อย']
-const editInput = ref<string>()
+defineEmits(['editname', 'deletename'])
 </script>

 <template>
@ -23,9 +16,7 @@ const editInput = ref<string>()
    <q-menu auto-close>
      <q-list dense>
        <q-item clickable>
-          <q-item-section @click="() => ( 
-             $emit('editname')
-            )">
+          <q-item-section @click="() => $emit('editname')">
            <div class="row items-center">
              <q-icon name="edit" color="positive" />
              <span class="q-ml-sm">แก้ไข</span>
--- a/Services/client/src/components/FromEdit.vue
+++ b/Services/client/src/components/FromEdit.vue
@ -5,7 +5,6 @@ import { useTreeDataStore } from '@/stores/tree-data'
 const { createFolder, editFolder } = useTreeDataStore()

 const input = ref<string>('')
-const drawerclose = ref<boolean>()

 const props = withDefaults(
  defineProps<{
@ -20,8 +19,7 @@ const props = withDefaults(
    drawerStatus: 'create',
  }
 )
-
-drawerclose.value = props.drawer
+defineEmits(['update:drawer'])
 </script>

 <template>
@ -50,13 +48,7 @@ drawerclose.value = props.drawer
        icon="close"
        v-close-popup
        color="red"
-        @click="
-          () => {
-            console.log(props.drawer)
-            props.drawer = !props.drawer
-            console.log(props.drawer)
-          }
-        "
+        @click="() => $emit('update:drawer')"
      />
    </q-toolbar>
    <span class="text-weight-bold"
@ -77,7 +69,7 @@ drawerclose.value = props.drawer
      dense
      @click="
        () => {
-          props.drawer = !props.drawer
+          $emit('update:drawer')
          props.drawerStatus === 'create'
            ? createFolder(input)
            : editFolder(input, editPathname)
--- a/Services/client/src/components/ListView.vue
+++ b/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>
--- a/Services/client/src/components/PageLayout.vue
+++ b/Services/client/src/components/PageLayout.vue
@ -10,6 +10,7 @@ import SearchBar from '@/modules/01_user/components/SearchBar.vue'
 import FileSearched from '@/components/FileSearched.vue'
 import FileDownload from '@/modules/01_user/components/FileDownload.vue'
 import ListView from '@/components/ListView.vue'
+import FromEdit from '@/components/FromEdit.vue'

 const DEPT_NAME = ['ตู้เอกสาร', 'ลิ้นชัก', 'แฟ้ม', 'แฟ้มย่อย', 'ไฟล์']

@ -17,6 +18,11 @@ const { isPreview } = storeToRefs(useFileInfoStore())
 const { isSearch } = storeToRefs(useSearchDataStore())
 const { data, currentDept } = storeToRefs(useTreeDataStore())
 const { getCabinet, gotoParent } = useTreeDataStore()
+
+const drawer = ref<boolean>(false)
+const drawerFile = ref<boolean>(false)
+const drawerStatus = ref<'create'>('create')
+
 const viewMode = ref<'view_list' | 'view_module'>('view_list')
 const inputSearch = ref<string>()
 const props = defineProps<{
@ -66,8 +72,11 @@ onMounted(getCabinet)
      </div>
    </div>
    <div class="col">
-      <file-download v-if="isPreview === true"/>
-      <div class="bg-white rounded-borders shadow-5 relative" v-if="isPreview === false">
+      <file-download v-if="isPreview === true" />
+      <div
+        class="bg-white rounded-borders shadow-5 relative"
+        v-if="isPreview === false"
+      >
        <search-bar v-if="mode === 'user'" />
        <div class="bg-white q-pa-md">
          <div class="row items-center justify-between">
@ -81,7 +90,9 @@ onMounted(getCabinet)
              >
                <q-icon name="arrow_back" size="1rem" color="primary"
              /></q-btn>
-              <span v-if="isSearch === false">{{ DEPT_NAME[currentDept] }}</span>
+              <span v-if="isSearch === false">{{
+                DEPT_NAME[currentDept]
+              }}</span>
              <span v-if="isSearch === true">ผลการค้นหา</span>
              <q-btn
                v-if="
@ -95,7 +106,13 @@ onMounted(getCabinet)
                color="primary"
                dense
                icon="add"
-                @click=""
+                @click="
+                  () => {
+                    drawer = !drawer
+                    drawerStatus = 'create'
+                    drawerFile = false
+                  }
+                "
              />
            </span>
            <q-btn
@ -123,6 +140,16 @@ onMounted(getCabinet)
      </div>
    </div>
  </section>
+
+  <from-edit
+    v-if="currentDept === 0"
+    :drawer="drawer"
+    :drawerStatus="drawerStatus"
+    :DEPT_NAME="DEPT_NAME"
+    :currentDept="currentDept"
+    editPathname=""
+    @update:drawer="() => (drawer = !drawer)"
+  />
 </template>

 <style lang="scss" scoped>