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

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

import FileIcon from './FileIcon.vue'
import FileItemAction from './FileItemAction.vue'
import DialogDelete from './DialogDelete.vue'
import FileFormWrapper from './FileFormWrapper.vue'
import FolderFormWrapper from './FolderFormWrapper.vue'

import { useFileInfoStore } from '@/stores/file-info-data'
import useStorage from '@/stores/storage'

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

const props = withDefaults(
  defineProps<{ action: boolean; viewMode: 'view_list' | 'view_module' }>(),
  { action: false },
)
const { getFileInfo } = useFileInfoStore()

const storageStore = useStorage()
const { folder, file, currentInfo } = storeToRefs(storageStore)
const { goto, deleteFolder, deleteFile } = storageStore

const fileFormComponent = ref<InstanceType<typeof FileFormWrapper>>()
const folderFormComponent = ref<InstanceType<typeof FolderFormWrapper>>()

const deleteState = ref<boolean>(false)
const deletePath = ref<string>('')
const deleteTarget = ref<'deleteFolder' | 'deleteFile'>()
const deleteMap = { deleteFolder, deleteFile }

const currentIcon = computed(() =>
  currentInfo.value.dept === 0
    ? 'mdi-file-cabinet'
    : currentInfo.value.dept === 1
      ? 'o_inbox'
      : 'o_folder_open',
)

function triggerFolderDelete(pathname: string) {
  deleteTarget.value = 'deleteFolder'
  deletePath.value = pathname
  deleteState.value = !deleteState.value
}

function triggerFileDelete(pathname: string) {
  deleteTarget.value = 'deleteFile'
  deletePath.value = pathname
  deleteState.value = !deleteState.value
}
</script>

<template>
  <file-form-wrapper ref="fileFormComponent" />
  <folder-form-wrapper ref="folderFormComponent" />
  <dialog-delete
    v-model:open="deleteState"
    @confirm="() => deleteTarget && deleteMap[deleteTarget](deletePath)"
  />

  <div
    class="text-h6 q-mt-md"
    v-if="currentInfo.dept > 2 && currentInfo.dept < 4"
  >
    <div class="flex justify-between items-center">
      <div>{{ TREE_LEVEL_NAME[currentInfo.dept] }}</div>
      <q-btn
        outline
        push
        dense
        id="listViewFolderCreate"
        class="q-px-md q-ml-md"
        type="submit"
        color="primary"
        icon="add"
        v-if="action"
        :label="'สร้าง' + TREE_LEVEL_NAME[currentInfo.dept]"
        @click.stop="() => folderFormComponent?.triggerFolderCreate()"
      />
    </div>
  </div>
  <div
    class="grid q-mt-md"
    v-if="currentInfo.dept < 4 && folder[currentInfo.path]"
  >
    <div
      v-for="value in folder[currentInfo.path]"
      :data-pathname="value.pathname"
    >
      <div
        class="box"
        :style="{
          position: 'relative',
          display: 'flex',
          gap: '0.5rem',
          alignItems: 'center',
          flexDirection: currentInfo.dept > 2 ? 'row' : 'column',
          padding: currentInfo.dept > 2 ? '.5rem 0' : '.5rem',
        }"
        @click="() => goto(value.pathname)"
      >
        <div class="q-px-md flex items-center justify-center">
          <q-icon
            :name="currentIcon"
            :size="currentInfo.dept > 2 ? '3em' : '6em'"
            color="primary"
            class="col"
          />
        </div>
        <div
          class="absolute flex items-center justify-center"
          style="top: 0.5rem; right: 0.5rem"
          v-if="props.action"
          :style="{ bottom: currentInfo.dept > 2 ? '0.5rem' : 'unset' }"
        >
          <file-item-action
            :nameId="value.pathname"
            @delete="() => triggerFolderDelete(value.pathname)"
            @edit="
              () =>
                folderFormComponent?.triggerFolderEdit(
                  value.name,
                  value.pathname,
                )
            "
          />
        </div>
        <div
          class="text-overflow-handle block text-center"
          style="max-width: 100%"
          :class="{
            'q-px-md': currentInfo.dept < 3,
            'q-pr-xl': currentInfo.dept > 2,
          }"
        >
          {{ value.name }}
        </div>
      </div>
    </div>
    <div v-if="props.action && currentInfo.dept < 4">
      <div
        id="triggerFolderCreateFileItem"
        class="dashed"
        :style="{
          position: 'relative',
          display: 'flex',
          gap: '0.5rem',
          alignItems: 'center',
          flexDirection: currentInfo.dept > 2 ? 'row' : 'column',
          padding: currentInfo.dept > 2 ? '.5rem 0' : '.5rem',
        }"
        @click.stop="() => folderFormComponent?.triggerFolderCreate()"
      >
        <div
          class="q-px-md flex items-center justify-center"
          style="position: relative"
        >
          <q-icon
            :name="currentIcon"
            :size="currentInfo.dept > 2 ? '3em' : '6em'"
            color="primary"
            class="col"
          />
          <q-btn
            round
            color="white"
            size="10px"
            style="position: absolute; bottom: 0"
            :dense="currentInfo.dept > 2"
            :style="{ right: currentInfo.dept > 2 ? '.5rem' : '1rem' }"
          >
            <q-icon name="add" color="primary" size="1.5rem" />
          </q-btn>
        </div>
        <div
          class="text-overflow-handle block text-center"
          :class="{
            'q-px-md': currentInfo.dept < 3,
            'q-pr-xl': currentInfo.dept > 2,
          }"
          style="max-width: 100%"
        >
          สร้าง{{ TREE_LEVEL_NAME[currentInfo.dept] }}
        </div>
      </div>
    </div>
  </div>
  <div
    style="grid-column: 1 / span 5"
    class="q-mt-md"
    v-if="currentInfo.dept > 2 && file[currentInfo.path]"
  >
    <div class="flex justify-between">
      <div>
        <span class="text-h6 q-mr-md">เอกสาร</span>
        <span class="text-body text-grey"
          >จำนวน {{ file[currentInfo.path].length }} รายการ</span
        >
      </div>
      <q-btn
        outline
        push
        dense
        id="listViewFileCreate"
        class="q-px-md q-ml-md"
        label="สร้างเอกสาร"
        type="submit"
        color="primary"
        icon="add"
        v-if="action"
        @click.stop="() => fileFormComponent?.triggerFileCreate()"
      />
    </div>
  </div>
  <div class="grid q-mt-md">
    <div
      v-for="(value, index) in file[currentInfo.path]"
      :data-pathname="value.pathname"
    >
      <div
        class="box"
        :id="`getFileInfoFileItem${index}`"
        @click="() => getFileInfo(value)"
      >
        <div class="q-px-md flex items-center justify-center">
          <file-icon
            size="preview"
            :fileMimeType="value.fileType ? value.fileType : '-'"
            :fileName="value.fileName ? value.fileName : '-'"
          />
        </div>
        <div
          class="absolute"
          style="top: 0.5rem; right: 0.5rem"
          v-if="props.action"
        >
          <file-item-action
            :nameId="value.pathname"
            @edit="
              () =>
                fileFormComponent?.triggerFileEdit(
                  {
                    title: value.title,
                    description: value.description,
                    keyword: value.keyword,
                    category: value.category,
                    author: value.author,
                  },
                  value.pathname,
                  value.fileName,
                )
            "
            @delete="() => triggerFileDelete(value.pathname)"
          />
        </div>
        <div
          class="text-overflow-handle block q-px-md text-center"
          style="max-width: 100%"
        >
          {{ value.title }}
        </div>
      </div>
    </div>
    <div v-if="props.action && currentInfo.dept > 2">
      <div
        id="triggerFileCreateFileItem"
        class="dashed"
        :style="{
          display: 'flex',
          gap: '0.5rem',
          flexDirection: 'column',
          alignItems: 'center',
          padding: '1rem',
          maxWidth: '100%',
        }"
        @click.stop="() => fileFormComponent?.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: 1rem; 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>
</template>

<style lang="scss" scoped>
.box {
  border: 2px solid $separator-color;
  border-radius: 8px;
  position: relative;
  display: flex;
  gap: 0.5rem;
  flex-direction: column;
  align-items: center;
  padding: 1rem;
  max-width: 100%;
  cursor: pointer;
}

.dashed {
  opacity: 0.4;
  display: inline-block;
  border: 2px solid #6985c2;
  border-radius: 8px;
  cursor: pointer;
  border-style: dashed;
}

.add-icon {
  margin: auto auto;
}

.text-overflow-handle {
  overflow: hidden;
  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>