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

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

import FileItemAction from '@/components/FileItemAction.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 } = storeToRefs(
  useTreeDataStore()
)
const { getFolder, createFolder, editFolder } = useTreeDataStore()
const drawer = ref<boolean>(false)
const drawerFile = ref<boolean>(false)
const drawerStatus = ref<'edit' | 'create'>('create')
const input = ref<string>('')
const inputFile = ref<File>()
const fileTitle = ref<string>('')
const fileDesc = ref<string>('')
const fileCategory = ref<string>('')
const optionsCategory = [
  { label: 'ศิลปะ', value: 'art' },
  { label: 'ภาพวาด', value: 'drawing' },
  { label: 'ภาษาไทย', value: 'thai' },
]
const fileKeyword = ref<string>('')
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">
    <div class="q-gutter-md">
      <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">
              <q-icon :name="currentIcon" size="6em" color="primary" />
              <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">{{ value.name }}</span>
            </q-card-section>
          </q-card>
        </div>
      </div>
      <div
        class="inline-block"
        v-if="props.action && currentDept < 4"
        tabindex="0"
        @keydown.esc="() => (drawer = false)"
      >
        <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>
  <div class="q-mt-md">
    <div class="q-gutter-md">
      <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">
              <q-icon name="description" size="6em" color="primary" />
              <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="description"
                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>

  <q-drawer
    class="q-pa-md"
    side="right"
    v-model="drawer"
    bordered
    :width="300"
    :breakpoint="500"
    overlay
    behavior="mobile"
    tabindex="0"
    @keydown.esc="
      () => {
        drawer = false
        input = ''
      }
    "
    @keyup.enter="
      () => {
        drawer = false
        drawerStatus === 'create'
          ? createFolder(input)
          : editFolder(input, editPathname)
        input = ''
      }
    "
  >
    <q-toolbar class="q-mb-md q-pa-none" @keydown.esc="() => (drawer = false)">
      <q-toolbar-title>
        <span class="text-weight-bold" v-if="drawerStatus == 'edit'"
          >แก้ไขชื่อ{{ DEPT_NAME[currentDept] }}</span
        >
        <span class="text-weight-bold" v-if="drawerStatus == 'create'"
          >สร้าง{{ DEPT_NAME[currentDept] }}</span
        >
      </q-toolbar-title>
      <q-btn
        flat
        round
        dense
        icon="close"
        v-close-popup
        color="red"
        @click="() => (drawer = !drawer)"
      />
    </q-toolbar>
    <span class="text-weight-bold">ชื่อ{{ DEPT_NAME[currentDept] }}</span>
    <q-input
      class="q-my-md"
      outlined
      v-model="input"
      :placeholder="`กรอกชื่อ${DEPT_NAME[currentDept]}`"
      dense
    />
    <q-btn
      class="q-px-md"
      label="บันทึก"
      type="submit"
      color="primary"
      dense
      @click="
        () => {
          drawer = !drawer
          drawerStatus === 'create'
            ? createFolder(input)
            : editFolder(input, editPathname)
          input = ''
        }
      "
    />
  </q-drawer>
  <q-drawer
    class="q-pa-md"
    side="right"
    v-model="drawerFile"
    bordered
    :width="300"
    :breakpoint="500"
    overlay
  >
    <q-toolbar class="q-mb-md q-pa-none">
      <q-toolbar-title>
        <span class="text-weight-bold">สร้างเอกสาร</span>
      </q-toolbar-title>
      <q-btn
        flat
        round
        dense
        icon="close"
        v-close-popup
        color="red"
        @click="() => (drawerFile = !drawerFile)"
      />
    </q-toolbar>
    <span class="text-weight-bold">อัพโหลดไฟล์</span>
    <q-input
      model-value="inputfile"
      class="q-my-md"
      outlined
      type="file"
      :placeholder="`กรอกชื่อ${DEPT_NAME[currentDept]}`"
      dense
    />
    <span class="text-weight-bold">ชื่อเรื่อง</span>
    <q-input
      class="q-my-md"
      outlined
      v-model="fileTitle"
      placeholder="กรอกชื่อเรื่อง"
      dense
    />
    <span class="text-weight-bold">รายละเอียดของเอกสาร</span>
    <q-input
      class="q-my-md"
      outlined
      type="textarea"
      v-model="fileDesc"
      placeholder="กรอกรายละเอียด"
      dense
    />
    <span class="text-weight-bold">กลุ่ม/หมวดหมู่</span>
    <q-select
      class="q-my-md"
      outlined
      :options="optionsCategory"
      v-model="fileCategory"
      placeholder="เลือกกลุ่ม/หมวดหมู่"
      dense
    />
    <span class="text-weight-bold">คำสำคัญ</span>
    <q-input
      class="q-my-md"
      outlined
      v-model="fileKeyword"
      placeholder="กรอกคำสำคัญ"
      dense
    />
    <q-btn
      class="q-px-md"
      label="บันทึก"
      type="submit"
      color="primary"
      dense
      @click="
        () => {
          drawerFile = !drawerFile
        }
      "
    />
  </q-drawer>
</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;
}
</style>