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 FromEdit from '@/components/FromEdit.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>

<from-edit :drawer="drawer" :drawerStatus="drawerStatus" :DEPT_NAME="DEPT_NAME" :currentDept="currentDept" :editPathname="editPathname" />


</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>