Merge branch 'feat/document-data'
This commit is contained in:
Methapon2001
commit
47ceda71b8
5 changed files with 210 additions and 33 deletions
80
src/api/document.ts
Normal file
80
src/api/document.ts
Normal file
|
|
@ -0,0 +1,80 @@
|
|||
import type { StorageFile } from '@/interface/response/storage'
|
||||
|
||||
const API_URI = import.meta.env.VITE_API_URI_CONFIG
|
||||
|
||||
export async function getDocumentList(volume: string, id: string) {
|
||||
const res = await fetch(`${API_URI}/document/${volume}/${id}`, {
|
||||
headers: {
|
||||
Accept: 'application/json',
|
||||
},
|
||||
})
|
||||
|
||||
if (res && res.ok) {
|
||||
return (await res.json()) as StorageFile
|
||||
}
|
||||
return false
|
||||
}
|
||||
|
||||
export async function getDocumentInfo(
|
||||
volume: string,
|
||||
id: string,
|
||||
file: string
|
||||
) {
|
||||
const res = await fetch(`${API_URI}/document/${volume}/${id}/${file}`, {
|
||||
headers: {
|
||||
Accept: 'application/json',
|
||||
},
|
||||
})
|
||||
|
||||
if (res && res.ok) {
|
||||
return (await res.json()) as StorageFile & { downloadUrl: string }
|
||||
}
|
||||
return false
|
||||
}
|
||||
|
||||
const util = {
|
||||
formatBytes: (bytes: number, decimals = 2) => {
|
||||
if (!+bytes) return '0 Bytes'
|
||||
|
||||
const k = 1024
|
||||
const dm = decimals < 0 ? 0 : decimals
|
||||
const sizes = [
|
||||
'Bytes',
|
||||
'KiB',
|
||||
'MiB',
|
||||
'GiB',
|
||||
'TiB',
|
||||
'PiB',
|
||||
'EiB',
|
||||
'ZiB',
|
||||
'YiB',
|
||||
]
|
||||
const i = Math.floor(Math.log(bytes) / Math.log(k))
|
||||
|
||||
return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`
|
||||
},
|
||||
download: async (url: string, name?: string) => {
|
||||
await fetch(url, {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
})
|
||||
.then((res) => res.blob())
|
||||
.then((blob) => {
|
||||
const a = document.createElement('a')
|
||||
a.href = window.URL.createObjectURL(blob)
|
||||
a.download = name ?? 'download'
|
||||
a.click()
|
||||
a.remove()
|
||||
})
|
||||
},
|
||||
}
|
||||
|
||||
const doc = {
|
||||
list: getDocumentList,
|
||||
info: getDocumentInfo,
|
||||
util,
|
||||
}
|
||||
|
||||
export default doc
|
||||
BIN
src/assets/cover.png
Normal file
BIN
src/assets/cover.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
20
src/interface/response/storage.ts
Normal file
20
src/interface/response/storage.ts
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
export interface StorageFile {
|
||||
pathname: string
|
||||
|
||||
fileName: string
|
||||
fileSize: number
|
||||
fileType: string
|
||||
|
||||
title: string
|
||||
description: string
|
||||
category: string[]
|
||||
keyword: string[]
|
||||
|
||||
path: string
|
||||
upload: boolean
|
||||
|
||||
updatedAt: string | Date
|
||||
updatedBy: string
|
||||
createdAt: string | Date
|
||||
createdBy: string
|
||||
}
|
||||
|
|
@ -2,23 +2,23 @@ import { createRouter, createWebHistory } from 'vue-router'
|
|||
|
||||
/* import HomeView from '@/views/HomeView.vue' */
|
||||
|
||||
const MainLayout = () => import("@/views/MainLayout.vue");
|
||||
const HomeView = () => import("@/views/HomeView.vue");
|
||||
const MainLayout = () => import('@/views/MainLayout.vue')
|
||||
const HomeView = () => import('@/views/HomeView.vue')
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHistory(import.meta.env.BASE_URL),
|
||||
routes: [
|
||||
{
|
||||
path: '/',
|
||||
path: '/:id',
|
||||
name: 'home',
|
||||
component: MainLayout,
|
||||
children:[
|
||||
children: [
|
||||
{
|
||||
path: "/",
|
||||
name: "HomeView",
|
||||
path: '/:id',
|
||||
name: 'HomeView',
|
||||
component: HomeView,
|
||||
},
|
||||
]
|
||||
],
|
||||
},
|
||||
{
|
||||
path: '/:pathMatch(.*)*',
|
||||
|
|
@ -31,8 +31,8 @@ const router = createRouter({
|
|||
],
|
||||
})
|
||||
|
||||
router.beforeEach((to, from, next) => {
|
||||
next();
|
||||
router.beforeEach((_to, _from, next) => {
|
||||
next()
|
||||
})
|
||||
|
||||
export default router
|
||||
|
|
|
|||
|
|
@ -1,51 +1,128 @@
|
|||
<script setup lang="ts"></script>
|
||||
<script setup lang="ts">
|
||||
import doc from '@/api/document'
|
||||
import cover from '@/assets/cover.png'
|
||||
import type { StorageFile } from '@/interface/response/storage'
|
||||
import { onMounted, ref } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
|
||||
const data = ref<StorageFile & { downloadUrl: string }>()
|
||||
const metadata = ref<{ [key: string]: string }>()
|
||||
|
||||
const route = useRoute()
|
||||
|
||||
onMounted(async () => {
|
||||
const result = await doc.info(
|
||||
'เล่ม 2',
|
||||
route.params.id as string,
|
||||
'1-เอกสาร 2'
|
||||
)
|
||||
|
||||
if (result) {
|
||||
data.value = result
|
||||
metadata.value = result.description
|
||||
? JSON.parse(result.description)
|
||||
: undefined
|
||||
console.log(result)
|
||||
console.log(result)
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="row col-xs-12 col-sm-11 col-md-10 col-lg-9 justify-center">
|
||||
<div class="col-12 text-left">
|
||||
<div class="text-h6 text-weight-bold q-mb-md">วิธีชนะมิตรและจูงใจคน</div>
|
||||
<div class="text-h6 text-weight-bold q-mb-md">{{ data?.fileName }}</div>
|
||||
</div>
|
||||
<div class="row col-12">
|
||||
<div class="col-xs-12 col-sm-4 q-my-sm">
|
||||
<iframe src="https://drive.google.com/file/d/1yaSwM6hsXphmMX5N0q-v8-HUCkhSvqg4/preview" class="frame" allow="autoplay"></iframe>
|
||||
<img :src="cover" class="frame" style="object-fit: cover" />
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-8 q-px-md">
|
||||
<div class="row col-12 justify-center">
|
||||
<div class="row col-xs-12 col-sm-10 q-col-gutter-y-lg text-left ">
|
||||
<div class="row col-xs-12 col-sm-10 q-col-gutter-y-lg text-left">
|
||||
<div class="row col-12 q-mt-sm">
|
||||
<div class="col-4 text-title">ชื่อเรื่อง</div>
|
||||
<div class="col-8 text-body">วิธีชนะมิตรและจูงใจคน</div>
|
||||
<div class="col-8 text-body">{{ data?.title || '-' }}</div>
|
||||
</div>
|
||||
|
||||
<div class="row col-12">
|
||||
<div class="col-4 text-title">เจ้าของผลงาน</div>
|
||||
<div class="col-8 text-body">ธัญลักษณ์ รอดกูล</div>
|
||||
<div class="col-8 text-body">{{ metadata?.author || '-' }}</div>
|
||||
</div>
|
||||
|
||||
<div class="row col-12">
|
||||
<div class="col-4 text-title">กลุ่ม/หมวดหมู่</div>
|
||||
<div class="col-8 text-body">ศิลปะ</div>
|
||||
<div class="col-8 text-body">
|
||||
{{
|
||||
(data &&
|
||||
data.category.length > 0 &&
|
||||
data.category.join(', ')) ||
|
||||
'-'
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row col-12">
|
||||
<div class="col-4 text-title">คำสำคัญ</div>
|
||||
<div class="col-8 text-body">ศิลปะ , ภาพวาด</div>
|
||||
<div class="col-8 text-body">
|
||||
{{
|
||||
(data &&
|
||||
data.keyword.length > 0 &&
|
||||
data.keyword.join(', ')) ||
|
||||
'-'
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row col-12">
|
||||
<div class="col-4 text-title">ขนาดไฟล์</div>
|
||||
<div class="col-8 text-body">753.55 KB</div>
|
||||
<div class="col-8 text-body">
|
||||
{{ data && doc.util.formatBytes(data.fileSize) }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row col-12">
|
||||
<div class="col-4 text-title">วันที่อัปโหลด</div>
|
||||
<div class="col-8 text-body">9 พ.ย. 2566</div>
|
||||
<div class="col-8 text-body">
|
||||
{{
|
||||
data &&
|
||||
new Date(data.createdAt).toLocaleDateString('th', {
|
||||
day: 'numeric',
|
||||
month: 'short',
|
||||
year: 'numeric',
|
||||
})
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 row">
|
||||
<q-btn color="primary" rounded size="md" unelevated class="col-6 btn">
|
||||
<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"/>
|
||||
<q-btn
|
||||
unelevated
|
||||
rounded
|
||||
color="primary"
|
||||
size="md"
|
||||
class="col-6 btn"
|
||||
@click="
|
||||
() =>
|
||||
data &&
|
||||
doc.util.download(
|
||||
data.downloadUrl,
|
||||
data.fileName,
|
||||
data.fileType
|
||||
)
|
||||
"
|
||||
>
|
||||
<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>
|
||||
|
|
@ -57,24 +134,24 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<style >
|
||||
.frame {
|
||||
<style>
|
||||
.frame {
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
border: 1px solid #C8D3DB !important;
|
||||
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;
|
||||
}
|
||||
.text-title {
|
||||
color: #35473c;
|
||||
font-weight: 600;
|
||||
}
|
||||
.text-body{
|
||||
}
|
||||
.text-body {
|
||||
color: #818181;
|
||||
}
|
||||
.btn{
|
||||
}
|
||||
.btn {
|
||||
margin-top: 50px;
|
||||
box-shadow: 0px 4px 10px 0px rgba(120, 207, 197, 0.721);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue