hrms-publish/src/views/HomeView.vue

<script setup lang="ts">
import doc from '@/api/document'
import book from '@/assets/book.png'
import type { StorageFile, MetadataObject } from '@/interface/response/storage'
import { onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'

const data = ref<StorageFile & { downloadUrl: string }>()
const metadata = ref<MetadataObject>()

const route = useRoute()

onMounted(async () => {
  const result = await doc.info(
    'เล่ม 2',
    route.params.id as string,
    '1-เอกสารเล่ม 2'
  )
  const result2 = await doc.info(
    'เล่ม 2',
    route.params.id as string,
    '2-เอกสารเล่ม 2 (ฉบับแก้ไข)'
  )
  if (result) {
    data.value = result
    metadata.value = result.metadata
  }
  if (result2) {
    data.value = result2
    metadata.value = result2.metadata
  }
})
</script>

<template>
  <div class="row col-xs-12 col-sm-10 col-md-12 col-lg-12 justify-center">
    <div class="col-12 text-left">
      <div class="text-h6 text-weight-bold q-mb-md">
        {{ metadata?.additionalProp1 }}
      </div>
    </div>

    <div
      class="row col-12 relative-position"
      :style="
        $q.screen.xs
          ? 'height: 50px'
          : $q.screen.sm
          ? 'height: 60px'
          : $q.screen.md
          ? 'height: 70px'
          : $q.screen.gt.lg
          ? 'height: 120px'
          : 'height: 60px'
      "
    >
      <q-img
        :src="book"
        class="fixed-top absolute-center"
        :style="
          $q.screen.xs
            ? 'height: auto; max-width: 160px; top: -40px'
            : $q.screen.sm
            ? 'height: auto; max-width: 190px; top: -50px'
            : $q.screen.md
            ? 'height: auto; max-width: 200px; top: -40px'
            : $q.screen.gt.lg
            ? 'height: auto; max-width: 250px; top: -50px'
            : 'height: auto; max-width: 250px; top: -70px'
        "
      />
    </div>

    <div class="row col-12 justify-center q-px-lg">
      <div
        class="row col-xs-12 col-sm-9 col-md-8 col-lg-9 q-col-gutter-y-lg text-left"
      >
        <div class="col-12 q-my-lg">
          <div class="text-h5 text-center text-bold q-mb-md">
            {{ metadata?.subject[0] || data?.fileName }}
          </div>

          <div class="text-body text-center">
            {{ metadata?.author || data?.author }}
          </div>
        </div>

        <div class="row col-12" v-if="metadata?.subject.length > 1">
          <div class="col-4 text-title text-left">ผลงานอื่นๆ</div>
          <div class="col-8 text-body text-right">
            <div
              v-for="(item, index) in metadata?.subject.slice(1)"
              :key="index"
            >
              {{ item }}
            </div>
          </div>
        </div>

        <div class="row col-12">
          <div class="col-4 text-title text-left">ตำแหน่งที่ได้รับ</div>
          <div class="col-8 text-body text-right">
            {{ metadata?.position || '-' }}
          </div>
        </div>

        <div class="row col-12">
          <div class="col-4 text-title text-left">ขนาดไฟล์</div>
          <div class="col-8 text-body text-right">
            {{ data && doc.util.formatBytes(data.fileSize) }}
          </div>
        </div>

        <div class="row col-12">
          <div class="col-4 text-title text-left">วันที่อัปโหลด</div>
          <div class="col-8 text-body text-right">
            {{
              data &&
              new Date(data.createdAt).toLocaleDateString('th', {
                day: 'numeric',
                month: 'short',
                year: 'numeric',
              })
            }}
          </div>
        </div>

        <div class="col-12 q-mb-md q-mt-lg">
          <q-separator color="grey-6" />
        </div>
        <div class="col-12 row justify-center">
          <q-btn
            unelevated
            color="primary"
            size="md"
            class="col-12 btn"
            @click="
              () => data && doc.util.download(data.downloadUrl, data.fileName)
            "
            style="border-radius: 10px"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="22"
              height="23"
              viewBox="0 0 22 23"
              fill="none"
            >
              <path
                d="M1.83334 11.5H3.66668V16.0833H18.3333V11.5H20.1667V16.0833C20.1667 17.1008 19.3508 17.9167 18.3333 17.9167H3.66668C2.65834 17.9167 1.83334 17.1008 1.83334 16.0833V11.5ZM11 14.25L16.0875 9.24501L14.7858 7.95251L11.9167 10.8125V2.33334H10.0833V10.8125L7.22334 7.95251L5.92168 9.25418L11 14.25Z"
                fill="white"
              />
            </svg>
            <span class="q-pl-md">ดาวน์โหลด</span>
          </q-btn>
        </div>
      </div>
    </div>
  </div>
</template>

<style>
.frame {
  width: 100%;
  height: 500px;
  border: 1px solid #c8d3db !important;
  border-radius: 5px;
  background-color: white;
  box-shadow: 0px 4px 20px 0px rgba(224, 235, 240, 0.537);
}
.text-title {
  color: #35473c;
  font-weight: 600;
}
.text-body {
  color: #818181;
}
.btn {
  box-shadow: 0px 4px 10px 0px rgba(120, 207, 197, 0.721);
}
</style>