hrms-edm/Services/client/src/modules/01_user/components/FileDownload.vue

<script setup lang="ts">
import { ref } from 'vue'
import { storeToRefs } from 'pinia'
import { useFileInfoStore } from '@/stores/file-info-data'

import FileIcon from '@/components/FileIcon.vue'

const { isPreview, fileInfo } = storeToRefs(useFileInfoStore())
const { getType } = useFileInfoStore()
const fileIconComp = ref<InstanceType<typeof FileIcon>>()
</script>

<template>
  <div class="bg-white rounded-borders shadow-5 relative">
    <div class="bg-white q-pa-md">
      <div class="row items-center justify-between">
        <span class="text-h6">
          <q-btn
            flat
            dense
            class="q-mr-sm q-px-sm"
            @click="() => (isPreview = false)"
          >
            <q-icon
              class="pointer"
              name="arrow_back"
              size="1em"
              color="primary"
            />
          </q-btn>
          {{ fileInfo?.title }}</span
        >
      </div>
      <div class="row">
        <div class="q-pa-sm">
          <div class="col">
            <div class="box border-radius-inherit">
              <q-card flat>
                <q-card-section class="column justify-center relative q-px-xl">
                  <file-icon
                    size="preview"
                    :fileMimeType="fileInfo?.fileType"
                    ref="fileIconComp"
                  />
                  <div class="absolute" style="top: 0.5rem; right: 0.5rem">
                    <file-item-action :edit="() => {}" :delete="() => {}" />
                  </div>
                  <span class="text-center q-pt-md text-h6">{{
                    fileInfo?.title
                  }}</span>
                </q-card-section>
              </q-card>
            </div>
          </div>
          <div class="column q-py-md">
            <q-btn
              color="primary"
              label="ดาวน์โหลด"
              icon="mdi-download"
              class="q-py-sm"
            />
          </div>
        </div>

        <div class="col q-px-lg q-gutter-md">
          <div class="row">
            <div class="col-2">
              <span>ชื่อไฟล์</span>
            </div>
            <div class="col-grow">
              <span class="text-grey">{{ fileInfo?.fileName }}</span>
            </div>
          </div>
          <q-separator />
          <div class="row">
            <div class="col-2">
              <span>ชื่อเรื่อง</span>
            </div>
            <div class="col-grow">
              <span class="text-grey">{{ fileInfo?.title }}</span>
            </div>
          </div>
          <q-separator />
          <div class="row">
            <div class="col-2">
              <span>รายละเอียด</span>
            </div>
            <div class="col-grow">
              <span class="text-grey">{{ fileInfo?.description }}</span>
            </div>
          </div>
          <q-separator />
          <div class="row">
            <div class="col-2">
              <span>กลุ่ม/หมวดหมู่</span>
            </div>
            <div class="col-grow">
              <span class="text-grey">{{ fileInfo?.category }}</span>
            </div>
          </div>
          <q-separator />
          <div class="row">
            <div class="col-2">
              <span>คำสำคัญ</span>
            </div>
            <div class="col-grow">
              <span class="text-grey">{{ fileInfo?.keyword }}</span>
            </div>
          </div>
          <q-separator />
          <div class="row">
            <div class="col-2">
              <span>ขนาดไฟล์</span>
            </div>
            <div class="col-grow">
              <span class="text-grey">{{ fileInfo?.fileSize }}</span>
            </div>
          </div>
          <q-separator />
          <div class="row">
            <div class="col-2">
              <span>ประเภทไฟล์</span>
            </div>
            <div class="col-grow">
              <span class="text-grey">{{ getType(fileInfo?.fileType) }}</span>
            </div>
          </div>
          <q-separator />
          <div class="row">
            <div class="col-2">
              <span>วันที่อัปโหลด</span>
            </div>
            <div class="col-grow">
              <span class="text-grey">{{ fileInfo?.createdAt }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.box {
  border: 2px solid #f1f2f4;
  border-radius: 8px;
}
</style>