hrms-edm/Services/client/src/components/FileItem.vue

<script setup lang="ts">
import { computed, ref } from 'vue'
import { storeToRefs } from 'pinia'

import FileIcon from '@/components/FileIcon.vue'
import FileItemAction from '@/components/FileItemAction.vue'
import FromEdit from '@/components/FromEdit.vue'
import FormUpload from '@/components/FormUpload.vue'
import { useTreeDataStore } from '@/stores/tree-data'
import { useFileInfoStore } from '@/stores/file-info-data'

const { isPreview } = storeToRefs(useFileInfoStore())
const { getFileInfo } = useFileInfoStore()
const DEPT_NAME = ['ตู้เอกสาร', 'ลิ้นชัก', 'แฟ้ม', 'แฟ้มย่อย']

const { currentFolder, currentFile, currentDept, currentPath } = storeToRefs(
  useTreeDataStore()
)
const { getFolder, uploadFile } = useTreeDataStore()

const drawer = ref<boolean>(false)
const drawerFile = ref<boolean>(false)
const drawerStatus = ref<'edit' | 'create'>('create')
const editPathname = ref<string>('')

const currentIcon = computed(() =>
  currentDept.value === 0
    ? 'mdi-file-cabinet'
    : currentDept.value === 1
    ? 'inbox'
    : 'o_folder_open'
)
const props = withDefaults(
  defineProps<{ action: boolean; viewMode: 'view_list' | 'view_module' }>(),
  {
    action: false,
  }
)
</script>

<template>
  <div class="q-mt-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"
        class="inline-block"
      >
        <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
                  :editname="value.name"
                  :pathname="value.pathname"
                  @editname="
                    () => {
                      drawer = !drawer
                      drawerStatus = 'edit'
                      editPathname = value.pathname
                    }
                  "
                />
              </div>
              <span
                class="text-center q-pt-md text-overflow-handle"
                style="max-width: 150px"
                >{{ value.name }}</span
              >
            </q-card-section>
          </q-card>
        </div>
      </div>
      <div
        class="inline-block"
        v-if="props.action && currentDept < 4"
        tabindex="0"
      >
        <div class="dashed border-radius-inherit">
          <q-card
            flat
            @click="
              () => {
                drawer = !drawer
                drawerStatus = 'create'
                drawerFile = false
              }
            "
          >
            <q-card-section class="column justify-center relative q-px-xl">
              <q-icon
                :name="currentIcon"
                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"
                >สร้าง{{ DEPT_NAME[currentDept] }}ใหม่</span
              >
            </q-card-section>
          </q-card>
        </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">
    <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])
                isPreview = true
              }
            "
          >
            <q-card-section class="column justify-center relative q-px-xl">
              <file-icon
                size="preview"
                :fileMimeType="value.fileType"
                ref="fileIconComp"
              />
              <div
                class="absolute"
                style="top: 0.5rem; right: 0.5rem"
                v-if="props.action"
              >
                <!-- TODO: Edit file data -->
              </div>
              <span class="text-center q-pt-md">{{ value.title }}</span>
            </q-card-section>
          </q-card>
        </div>
      </div>
      <div class="inline-block" v-if="props.action && currentDept > 2">
        <div class="dashed border-radius-inherit">
          <q-card
            flat
            @click="
              () => {
                drawerFile = !drawerFile
                drawer = false
              }
            "
          >
            <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>
      </div>
    </div>
  </div>

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

  <form-upload
    :drawerFile="drawerFile"
    @update:drawerFile="() => (drawerFile = false)"
  />
</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;
}
.add-button-folder-level {
  position: absolute;
  left: 30px;
  top: 22px;
  background-color: white;
}

.text-overflow-handle {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>