From 917312f9f8123974cd360b59f134c0307af50ae9 Mon Sep 17 00:00:00 2001
From: oat <oatkub402@gmail.com>
Date: Tue, 28 Nov 2023 09:24:20 +0700
Subject: [PATCH] refactor: UI update in folder level

---
 Services/client/src/components/FileItem.vue | 77 +++++++++++++++++++--
 1 file changed, 73 insertions(+), 4 deletions(-)

diff --git a/Services/client/src/components/FileItem.vue b/Services/client/src/components/FileItem.vue
index e02bb8f..dca5f14 100644
--- a/Services/client/src/components/FileItem.vue
+++ b/Services/client/src/components/FileItem.vue
@@ -55,7 +55,9 @@ async function handleSubmit() {
 
 <template>
   <div class="q-mt-md">
-    <div class="q-gutter-md">
+    <span class="text-h6 text-weight-light" v-if="currentDept === 3"
+      >แฟ้มย่อย</span>
+    <div class="q-gutter-md" v-if="currentDept < 3">
       <div
         :key="value.name"
         v-for="value in currentFolder"
@@ -65,10 +67,15 @@ async function handleSubmit() {
           <q-card flat @click="() => getFolder(value.pathname)">
             <q-card-section
               class="column justify-center relative q-px-xl"
-              style="max-width: 220px"
+              style="max-width: 225px"
               :title="value.name"
             >
-              <q-icon :name="currentIcon" size="6em" color="primary"  class="column justify-center relative q-px-md"/>
+              <q-icon
+                :name="currentIcon"
+                size="6em"
+                color="primary"
+                class="column justify-center relative q-px-lg"
+              />
               <div
                 class="absolute"
                 style="top: 0.5rem; right: 0.5rem"
@@ -129,9 +136,65 @@ async function handleSubmit() {
         </div>
       </div>
     </div>
+
+
+    <div class="q-gutter-md q-mt-sm" v-if="currentDept === 3">
+      <div
+        :key="value.name"
+        v-for="value in currentFolder"
+        class="inline-block"
+      >
+        <div class="box border-radius-inherit q-px-sm  q-py-sm">
+          <q-card flat @click="() => getFolder(value.pathname)">
+          <q-td>
+            <q-icon :name="currentIcon" size="3em" color="primary" class="col" />
+           <span class="q-mx-md">{{ value.name }}</span>
+            <file-item-action
+                  :editname="value.name"
+                  :pathname="value.pathname"
+                  @editname="
+                    () => {
+                      drawer = !drawer
+                      drawerStatus = 'edit'
+                      editPathname = value.pathname
+                    }
+                  "
+                />
+          </q-td>
+        </q-card>
+        </div>
+      </div>
+      <div
+        class="inline-block"
+        v-if="props.action && currentDept < 4"
+        tabindex="0"
+      >
+        <div class="dashed border-radius-inherit q-px-lg q-py-sm">
+          <q-card
+            flat
+            @click="
+              () => {
+                drawer = !drawer
+                drawerStatus = 'create'
+                drawerFile = false
+              }
+            "
+          >
+          <q-td>
+            <q-icon :name="currentIcon" size="3em" color="primary" class="col" />
+            <q-btn round class="add-button-folder-level" color="white" size="6px">
+                <q-icon name="add" color="primary" size="1.2rem"></q-icon>
+              </q-btn>
+           <span class="q-mx-md">สร้าง{{ DEPT_NAME[currentDept] }}ใหม่</span>
+          </q-td>
+          </q-card>
+        </div>
+      </div>
+    </div>
   </div>
   <div class="q-mt-md">
-    <div class="q-gutter-md">
+    <span class="text-h6 text-weight-light" v-if="currentDept > 2">เอกสาร</span>
+    <div class="q-gutter-md q-mt-xs">
       <div
         v-for="(value, index) in currentFile"
         :key="value.title"
@@ -314,6 +377,12 @@ async function handleSubmit() {
   right: 45px;
   background-color: white;
 }
+.add-button-folder-level {
+  position: absolute;
+  left: 30px;
+  top: 22px;
+  background-color: white;
+}
 
 .text-overflow-handle {
   overflow: hidden;