refactor: notification on file exist and main view

2023-11-29 15:26:18 +07:00 · 2023-11-29 15:26:18 +07:00 · cbad753124
commit cbad753124
parent d7f1cf1bac
9 changed files with 1462 additions and 1037 deletions
--- a/Services/client/src/components/FileForm.vue
+++ b/Services/client/src/components/FileForm.vue
@ -4,6 +4,7 @@ import { onMounted, onUnmounted, ref } from 'vue'
 const props = withDefaults(
  defineProps<{
    open: boolean
+    error: { fileExist?: boolean }
    mode: 'create' | 'edit'
    title?: string
    description?: string
@ -12,7 +13,7 @@ const props = withDefaults(
  }>(),
  {
    open: false,
-  }
+  },
 )

 const emit = defineEmits([
@ -21,6 +22,7 @@ const emit = defineEmits([
  'update:description',
  'update:keyword',
  'update:category',
+  'filechange',
  'submit',
 ])

@ -96,7 +98,12 @@ const file = ref<File | undefined>()
          dense
          outlined
          v-model="file"
+          @update:model-value="(v) => $emit('filechange', v.name)"
          :label="file?.name ? undefined : 'เลือกไฟล์'"
+          :error="!!error.fileExist"
+          :error-message="
+            error.fileExist ? 'พบไฟล์ในระบบ ข้อมูลในระบบจะถูกเขียนทับ' : ''
+          "
        >
          <template v-slot:prepend>
            <q-icon name="attach_file" />
@ -168,7 +175,7 @@ const file = ref<File | undefined>()
 </template>

 <style scoped>
-.no-resize >>> textarea {
+.no-resize :deep(textarea) {
  resize: none;
 }
 </style>
--- a/Services/client/src/components/FileItem.vue
+++ b/Services/client/src/components/FileItem.vue
@ -6,6 +6,7 @@ import FileIcon from '@/components/FileIcon.vue'
 import FileItemAction from '@/components/FileItemAction.vue'
 import FileForm from './FileForm.vue'
 import FolderForm from './FolderForm.vue'
+import UploadExistDialog from './UploadExistDialog.vue'
 import { useTreeDataStore } from '@/stores/tree-data'
 import { useFileInfoStore } from '@/stores/file-info-data'

@ -13,13 +14,12 @@ const props = withDefaults(
  defineProps<{ action: boolean; viewMode: 'view_list' | 'view_module' }>(),
  {
    action: false,
-  }
+  },
 )
 const DEPT_NAME = ['ตู้เอกสาร', 'ลิ้นชัก', 'แฟ้ม', 'แฟ้มย่อย'] as const
 const { getFileInfo, getFileNameFormat } = useFileInfoStore()
-const { currentFolder, currentFile, currentDept, currentPath } = storeToRefs(
-  useTreeDataStore()
-)
+const { currentFolder, currentFile, currentDept, currentPath } =
+  storeToRefs(useTreeDataStore())
 const {
  createFolder,
  editFolder,
@ -28,14 +28,15 @@ const {
  uploadFile,
  updateFile,
  deleteFile,
+  checkFile,
 } = useTreeDataStore()

 const currentIcon = computed(() =>
  currentDept.value === 0
    ? 'mdi-file-cabinet'
    : currentDept.value === 1
-    ? 'inbox'
-    : 'o_folder_open'
+      ? 'inbox'
+      : 'o_folder_open',
 )

 const folderFormState = ref<boolean>(false)
@ -54,6 +55,8 @@ const fileFormData = ref<{
  category?: string
 }>({})
 const fileFormType = ref<'edit' | 'create'>('create')
+const fileFormError = ref<{ fileExist?: boolean }>({})
+const fileExistNotification = ref<boolean>(false)

 function triggerFolderCreate() {
  folderFormType.value = 'create'
@ -92,7 +95,7 @@ function triggerFileEdit(
    keyword: string
    category: string
  },
-  pathname: string
+  pathname: string,
 ) {
  fileFormState.value = true
  fileFormType.value = 'edit'
@ -105,14 +108,26 @@ function triggerFileEdit(
  }
 }

-async function submitFileForm(value: {
-  mode: 'create' | 'edit'
-  file: File
-  title: string
-  description: string
-  keyword: string
-  category: string
-}) {
+const currentParam = ref<Parameters<typeof submitFileForm>[0]>()
+
+async function submitFileForm(
+  value: {
+    mode: 'create' | 'edit'
+    file: File
+    title: string
+    description: string
+    keyword: string
+    category: string
+  },
+  force = false,
+) {
+  currentParam.value = value
+
+  if (checkFile(value.file.name) && !force) {
+    fileExistNotification.value = true
+    return
+  }
+
  if (value.mode === 'create') {
    await uploadFile(currentPath.value, value.file, {
      title: value.title,
@ -129,207 +144,214 @@ async function submitFileForm(value: {
        keyword: value.keyword,
        category: value.category,
      },
-      value.file
+      value.file,
    )
  }
  fileFormData.value = {}
  fileFormState.value = false
+  currentParam.value = undefined
 }
 </script>

 <template>
-  <div class="q-my-md">
-    <span class="text-h6 text-weight-light" v-if="currentDept === 3">
-      แฟ้มย่อย
-    </span>
-    <div class="q-gutter-md" v-if="currentDept < 3">
+  <div class="text-h6 q-mt-md" v-if="currentDept > 2">
+    {{ DEPT_NAME[currentDept] }}
+  </div>
+  <div class="grid q-mt-md">
+    <div v-for="value in currentFolder">
      <div
-        :key="value.name"
-        v-for="value in currentFolder"
-        class="inline-block"
+        :style="{
+          position: 'relative',
+          display: 'flex',
+          gap: '0.5rem',
+          flexDirection: currentDept > 2 ? 'row' : 'column',
+          alignItems: 'center',
+          padding: currentDept > 2 ? '.5rem 0' : '.5rem',
+        }"
+        class="box"
+        @click="() => getFolder(value.pathname)"
      >
-        <div class="box border-radius-inherit">
-          <q-card flat @click="() => getFolder(value.pathname)">
-            <q-card-section
-              class="column justify-center relative q-px-xl"
-              style="max-width: 225px"
-              :title="value.name"
-            >
-              <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"
-                v-if="props.action"
-              >
-                <file-item-action
-                  @delete="() => deleteFolder(value.pathname)"
-                  @edit="() => triggerFolderEdit(value.name, value.pathname)"
-                />
-              </div>
-              <span
-                class="text-center q-pt-md text-overflow-handle"
-                style="max-width: 132px"
-              >
-                {{ value.name }}
-              </span>
-            </q-card-section>
-          </q-card>
+        <div class="q-px-md flex items-center justify-center">
+          <q-icon
+            :name="currentIcon"
+            :size="currentDept > 2 ? '3em' : '6em'"
+            color="primary"
+            class="col"
+          />
        </div>
-      </div>
-      <div
-        class="inline-block"
-        v-if="props.action && currentDept < 4"
-        tabindex="0"
-      >
-        <div class="dashed border-radius-inherit">
-          <q-card flat @click="() => triggerFolderCreate()">
-            <q-card-section class="column justify-center relative q-px-xl">
-              <q-icon
-                :name="currentIcon"
-                class="column justify-center relative q-px-lg"
-                size="6em"
-                color="primary"
-              />
-              <q-btn round class="add-button" color="white" size="10px">
-                <q-icon name="add" color="primary" size="1.5rem"></q-icon>
-              </q-btn>
-              <span class="text-center q-pt-md"
-                >สร้าง{{ DEPT_NAME[currentDept] }}ใหม่</span
-              >
-            </q-card-section>
-          </q-card>
+        <div
+          class="absolute flex items-center justify-center"
+          style="top: 0.5rem; right: 0.5rem"
+          :style="{ bottom: currentDept > 2 ? '0.5rem' : 'unset' }"
+          v-if="props.action"
+        >
+          <file-item-action
+            @delete="() => deleteFolder(value.pathname)"
+            @edit="() => triggerFolderEdit(value.name, value.pathname)"
+          />
+        </div>
+        <div
+          class="text-overflow-handle block text-center"
+          :class="{
+            'q-px-md': currentDept < 3,
+            'q-pr-xl': currentDept > 2,
+          }"
+          style="max-width: 100%"
+        >
+          {{ value.name }}
        </div>
      </div>
    </div>
-
-    <div class="q-gutter-md q-mt-sm" v-if="currentDept === 3">
+    <div v-if="props.action && currentDept < 4">
      <div
-        :key="value.name"
-        v-for="value in currentFolder"
-        class="inline-block"
+        class="dashed"
+        :style="{
+          position: 'relative',
+          display: 'flex',
+          gap: '0.5rem',
+          flexDirection: currentDept > 2 ? 'row' : 'column',
+          alignItems: 'center',
+          padding: currentDept > 2 ? '.5rem 0' : '.5rem',
+        }"
+        @click="() => triggerFolderCreate()"
      >
-        <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
-                @delete="() => deleteFolder(value.pathname)"
-                @edit="() => triggerFolderEdit(value.name, value.pathname)"
-              />
-            </q-td>
-          </q-card>
+        <div
+          class="q-px-md flex items-center justify-center"
+          style="position: relative"
+        >
+          <q-icon
+            :name="currentIcon"
+            :size="currentDept > 2 ? '3em' : '6em'"
+            color="primary"
+            class="col"
+          />
+          <q-btn
+            round
+            :dense="currentDept > 2"
+            color="white"
+            size="10px"
+            style="position: absolute; bottom: 0"
+            :style="{ right: currentDept > 2 ? '.5rem' : '1.75rem' }"
+          >
+            <q-icon name="add" color="primary" size="1.5rem" />
+          </q-btn>
        </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="() => triggerFolderCreate()">
-            <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
+          class="text-overflow-handle block text-center"
+          :class="{
+            'q-px-md': currentDept < 3,
+            'q-pr-xl': currentDept > 2,
+          }"
+          style="max-width: 100%"
+        >
+          สร้าง{{ DEPT_NAME[currentDept] }}ใหม่
        </div>
      </div>
    </div>
  </div>
-  <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"
-      class="inline-block"
-    >
-      <div class="box border-radius-inherit">
-        <q-card flat @click="() => getFileInfo(currentFile[index])">
-          <q-card-section class="column justify-center relative q-px-xl">
-            <file-icon
-              size="preview"
-              :fileMimeType="value.fileType ? value.fileType : 'unknow'"
-              ref="fileIconComp"
-            />
-            <div
-              class="absolute"
-              style="top: 0.5rem; right: 0.5rem"
-              v-if="props.action"
-            >
-              <file-item-action
-                @edit="
-                  () =>
-                    triggerFileEdit(
-                      {
-                        title: value.title,
-                        description: value.description,
-                        keyword: value.keyword.join(','),
-                        category: value.category.join(','),
-                      },
-                      value.pathname
-                    )
-                "
-                @delete="() => deleteFile(value.pathname)"
-              />
-            </div>
-            <span class="text-center q-pt-md">{{
-              getFileNameFormat(value.fileName)
-            }}</span>
-          </q-card-section>
-        </q-card>
+  <div
+    style="grid-column: 1 / span 5"
+    class="text-h6 q-mt-md"
+    v-if="currentDept > 2"
+  >
+    เอกสาร
+  </div>
+  <div class="grid q-mt-md">
+    <div v-for="value in currentFile">
+      <div
+        :style="{
+          position: 'relative',
+          display: 'flex',
+          gap: '0.5rem',
+          flexDirection: 'column',
+          alignItems: 'center',
+          padding: '1rem',
+          maxWidth: '100%',
+        }"
+        class="box"
+        @click="() => getFileInfo(value)"
+      >
+        <div class="q-px-md flex items-center justify-center">
+          <file-icon
+            size="preview"
+            :fileMimeType="value.fileType ? value.fileType : 'unknow'"
+          />
+        </div>
+        <div
+          class="absolute"
+          style="top: 0.5rem; right: 0.5rem"
+          v-if="props.action"
+        >
+          <file-item-action
+            @edit="
+              () =>
+                triggerFileEdit(
+                  {
+                    title: value.title,
+                    description: value.description,
+                    keyword: value.keyword.join(','),
+                    category: value.category.join(','),
+                  },
+                  value.pathname,
+                )
+            "
+            @delete="() => deleteFile(value.pathname)"
+          />
+        </div>
+        <div
+          class="text-overflow-handle block q-px-md text-center"
+          style="max-width: 100%"
+        >
+          {{ getFileNameFormat(value.fileName) }}
+        </div>
      </div>
    </div>
-    <div class="inline-block" v-if="props.action && currentDept > 2">
-      <div class="dashed border-radius-inherit">
-        <q-card flat @click="() => triggerFileCreate()">
-          <q-card-section class="column justify-center relative q-px-xl">
-            <q-icon
-              name="mdi-file"
-              class="add-icon"
-              size="6em"
-              color="primary"
-            />
-            <q-btn round class="add-button" color="white" size="10px">
-              <q-icon name="add" color="primary" size="1.5rem"></q-icon>
-            </q-btn>
-            <span class="text-center q-pt-md">สร้างไฟล์ใหม่</span>
-          </q-card-section>
-        </q-card>
+    <div v-if="props.action && currentDept > 2">
+      <div
+        :style="{
+          display: 'flex',
+          gap: '0.5rem',
+          flexDirection: 'column',
+          alignItems: 'center',
+          padding: '1rem',
+          maxWidth: '100%',
+        }"
+        class="dashed"
+        @click="() => triggerFileCreate()"
+      >
+        <div
+          class="q-px-md flex items-center justify-center"
+          style="position: relative"
+        >
+          <q-icon name="mdi-file" class="add-icon" size="6em" color="primary" />
+          <q-btn
+            round
+            color="white"
+            size="10px"
+            style="position: absolute; right: 1.75rem; bottom: 0"
+          >
+            <q-icon name="add" color="primary" size="1.5rem" />
+          </q-btn>
+        </div>
+        <div
+          class="text-overflow-handle block q-px-md text-center"
+          style="max-width: 100%"
+        >
+          สร้างไฟล์ใหม่
+        </div>
      </div>
    </div>
  </div>

  <file-form
    :mode="fileFormType"
+    :error="fileFormError"
    v-model:open="fileFormState"
    v-model:title="fileFormData.title"
    v-model:description="fileFormData.description"
    v-model:keyword="fileFormData.keyword"
    v-model:category="fileFormData.category"
+    @filechange="(name: string) => (fileFormError.fileExist = checkFile(name))"
    @submit="submitFileForm"
  />

@ -341,11 +363,16 @@ async function submitFileForm(value: {
    v-model:name="folderFormData.name"
    @submit="submitFolderForm"
  />
+
+  <upload-exist-dialog
+    v-model:notification="fileExistNotification"
+    @confirm="() => currentParam && submitFileForm(currentParam, true)"
+    @cancel="() => (currentParam = undefined)"
+  />
 </template>

 <style lang="scss" scoped>
 .box {
-  display: inline-block;
  border: 2px solid $separator-color;
  border-radius: 8px;
  cursor: pointer;
@ -366,8 +393,8 @@ async function submitFileForm(value: {

 .add-button {
  position: absolute;
-  top: 75px;
-  right: 70px;
+  top: 50%;
+  right: 40%;
  background-color: white;
 }

@ -383,4 +410,21 @@ async function submitFileForm(value: {
  white-space: nowrap;
  text-overflow: ellipsis;
 }
+
+.grid {
+  display: grid;
+  width: 100%;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 1rem;
+}
+
+@media (min-width: $breakpoint-md-min) {
+  .grid {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+}
+
+.grid .box {
+  position: relative;
+}
 </style>
--- a/Services/client/src/components/FileItemAction.vue
+++ b/Services/client/src/components/FileItemAction.vue
@ -7,7 +7,7 @@ defineEmits(['edit', 'delete'])
    <q-menu auto-close>
      <q-list dense>
        <q-item clickable>
-          <q-item-section @click="() => $emit('edit')">
+          <q-item-section @click.prevent.stop="() => $emit('edit')">
            <div class="row items-center">
              <q-icon name="edit" color="positive" />
              <span class="q-ml-sm">แก้ไข</span>
@ -15,7 +15,7 @@ defineEmits(['edit', 'delete'])
          </q-item-section>
        </q-item>
        <q-item clickable>
-          <q-item-section @click="() => $emit('delete')">
+          <q-item-section @click.prevent.stop="() => $emit('delete')">
            <div class="row items-center">
              <q-icon name="delete" color="negative" />
              <span class="q-ml-sm">ลบ</span>
--- a/Services/client/src/components/FormUpload.vue
+++ b/Services/client/src/components/FormUpload.vue
@ -3,6 +3,7 @@ import { ref } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useTreeDataStore } from '@/stores/tree-data'
 import TagInput from '@/components/TagInput.vue'
+
 const { currentPath } = storeToRefs(useTreeDataStore())
 const { uploadFile, checkFile } = useTreeDataStore()

@ -39,7 +40,7 @@ function saveTag() {

 async function handleSubmit(continueUpload: boolean = false) {
  if (!inputFile.value) return
-  // getFile(p)
+
  if (checkFile(inputFile.value.name) || continueUpload) {
    await uploadFile(currentPath.value, inputFile.value, {
      title: fileTitle.value,
@ -118,7 +119,6 @@ async function handleSubmit(continueUpload: boolean = false) {

  <q-dialog
    v-model="notification"
-    persistent
    transition-show="scale"
    transition-hide="scale"
  >