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 FileForm from './FileForm.vue'
import FolderForm from './FolderForm.vue'
import { useTreeDataStore } from '@/stores/tree-data'
import { useFileInfoStore } from '@/stores/file-info-data'

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 {
  createFolder,
  editFolder,
  getFolder,
  deleteFolder,
  uploadFile,
  updateFile,
  deleteFile,
} = useTreeDataStore()

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

const folderFormState = ref<boolean>(false)
const folderFormPath = ref<string>('')
const folderFormData = ref<{
  name?: string
}>({})
const folderFormType = ref<'edit' | 'create'>('create')
const fileFormState = ref<boolean>(false)
const fileFormPath = ref<string>('')
const fileFormData = ref<{
  file?: File
  title?: string
  description?: string
  keyword?: string
  category?: string
}>({})
const fileFormType = ref<'edit' | 'create'>('create')

function triggerFolderCreate() {
  folderFormType.value = 'create'
  folderFormData.value = {}
  folderFormState.value = !folderFormState.value
}

function triggerFolderEdit(name: string, pathname: string) {
  folderFormType.value = 'edit'
  folderFormPath.value = pathname
  folderFormData.value.name = name
  folderFormState.value = true
}

async function submitFolderForm(value: {
  mode: 'create' | 'edit'
  name: string
}) {
  if (value.mode === 'create') {
    await createFolder(value.name)
  } else {
    await editFolder(value.name, folderFormPath.value)
  }
}

function triggerFileCreate() {
  fileFormType.value = 'create'
  fileFormData.value = {}
  fileFormState.value = !fileFormState.value
}

function triggerFileEdit(
  value: {
    title: string
    description: string
    keyword: string
    category: string
  },
  pathname: string
) {
  fileFormState.value = true
  fileFormType.value = 'edit'
  fileFormPath.value = pathname
  fileFormData.value = {
    title: value.title,
    description: value.description,
    keyword: value.keyword,
    category: value.keyword,
  }
}

async function submitFileForm(value: {
  mode: 'create' | 'edit'
  file: File
  title: string
  description: string
  keyword: string
  category: string
}) {
  if (value.mode === 'create') {
    await uploadFile(currentPath.value, value.file, {
      title: value.title,
      description: value.description,
      keyword: value.keyword,
      category: value.category,
    })
  } else {
    await updateFile(
      fileFormPath.value,
      {
        title: value.title,
        description: value.description,
        keyword: value.keyword,
        category: value.category,
      },
      value.file
    )
  }
  fileFormData.value = {}
  fileFormState.value = false
}
</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
        :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
                  @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>
      </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>
      </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
                @delete="() => deleteFolder(value.pathname)"
                @edit="() => triggerFolderEdit(value.name, 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="() => 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>
      </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>
    </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>
    </div>
  </div>

  <file-form
    :mode="fileFormType"
    v-model:open="fileFormState"
    v-model:title="fileFormData.title"
    v-model:description="fileFormData.description"
    v-model:keyword="fileFormData.keyword"
    v-model:category="fileFormData.category"
    @submit="submitFileForm"
  />

  <folder-form
    :mode="folderFormType"
    :tree="DEPT_NAME[currentDept]"
    v-if="currentDept < 4"
    v-model:open="folderFormState"
    v-model:name="folderFormData.name"
    @submit="submitFolderForm"
  />
</template>

<style lang="scss" scoped>
.box {
  display: inline-block;
  border: 2px solid $separator-color;
  border-radius: 8px;
  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;
}

.add-button {
  position: absolute;
  top: 75px;
  right: 70px;
  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>