From bc0212b0f17829843b249473cb54d7fb990d7497 Mon Sep 17 00:00:00 2001 From: puri-ph4tt Date: Wed, 29 Nov 2023 11:16:50 +0700 Subject: [PATCH] fix: isPreview 2 isFilePreview & getFileNameFormat --- Services/client/src/components/FileItem.vue | 17 +-------- .../client/src/components/FileSearched.vue | 2 - Services/client/src/components/ListView.vue | 4 +- Services/client/src/components/PageLayout.vue | 6 +-- .../client/src/components/TreeExplorer.vue | 6 +-- .../01_user/components/FileDownload.vue | 10 ++--- Services/client/src/stores/file-info-data.ts | 38 +++++++++++++------ 7 files changed, 40 insertions(+), 43 deletions(-) diff --git a/Services/client/src/components/FileItem.vue b/Services/client/src/components/FileItem.vue index 3b8a68f..cf9db03 100644 --- a/Services/client/src/components/FileItem.vue +++ b/Services/client/src/components/FileItem.vue @@ -15,11 +15,8 @@ const props = withDefaults( action: false, } ) - const DEPT_NAME = ['ตู้เอกสาร', 'ลิ้นชัก', 'แฟ้ม', 'แฟ้มย่อย'] as const - -const { isPreview } = storeToRefs(useFileInfoStore()) -const { getFileInfo } = useFileInfoStore() +const { getFileInfo, getFileNameFormat } = useFileInfoStore() const { currentFolder, currentFile, currentDept, currentPath } = storeToRefs( useTreeDataStore() ) @@ -108,13 +105,6 @@ function triggerFileEdit( } } -function getFileNameFormat(fileName: string): string { - const dotIndex = fileName.lastIndexOf('.') - const fileNameOnly = fileName.substring(0, dotIndex) - - return fileNameOnly -} - async function submitFileForm(value: { mode: 'create' | 'edit' file: File @@ -278,10 +268,7 @@ async function submitFileForm(value: { class="inline-block" >
- + @@ -23,7 +22,6 @@ const { getFileInfo } = useFileInfoStore() @click=" () => { getFileInfo(foundFile[index]) - isPreview = true } " > diff --git a/Services/client/src/components/ListView.vue b/Services/client/src/components/ListView.vue index 956ae91..e1f8f12 100644 --- a/Services/client/src/components/ListView.vue +++ b/Services/client/src/components/ListView.vue @@ -8,7 +8,7 @@ import FileIcon from '@/components/FileIcon.vue' import FileForm from './FileForm.vue' import FolderForm from './FolderForm.vue' -const { getFormatDate, getSize, getType } = useFileInfoStore() +const { getFormatDate, getSize, getType, getFileInfo } = useFileInfoStore() const { listDataFile, listDataFolder, currentDept, currentPath } = storeToRefs( useTreeDataStore() ) @@ -348,7 +348,7 @@ const onRowClick = (evt: Event, row: TreeDataFolder, index: number) => { style="width: 50%" @click=" () => { - getFolder(nameRow.row.pathname) + currentDept >= 3 ? getFileInfo(nameRow.row) : getFolder(nameRow.row.pathname); } " > diff --git a/Services/client/src/components/PageLayout.vue b/Services/client/src/components/PageLayout.vue index 6f5ae94..f2a8d98 100644 --- a/Services/client/src/components/PageLayout.vue +++ b/Services/client/src/components/PageLayout.vue @@ -14,7 +14,7 @@ import FolderForm from './FolderForm.vue' const DEPT_NAME = ['ตู้เอกสาร', 'ลิ้นชัก', 'แฟ้ม', 'แฟ้มย่อย'] as const -const { isPreview } = storeToRefs(useFileInfoStore()) +const { isFilePreview } = storeToRefs(useFileInfoStore()) const { isSearch } = storeToRefs(useSearchDataStore()) const { data, currentDept } = storeToRefs(useTreeDataStore()) const { createFolder, getCabinet, gotoParent } = useTreeDataStore() @@ -89,10 +89,10 @@ onMounted(getCabinet)
- +
diff --git a/Services/client/src/components/TreeExplorer.vue b/Services/client/src/components/TreeExplorer.vue index 7b17bf6..df684c6 100644 --- a/Services/client/src/components/TreeExplorer.vue +++ b/Services/client/src/components/TreeExplorer.vue @@ -3,11 +3,9 @@ import { storeToRefs } from 'pinia' import { useTreeDataStore, type TreeDataFolder } from '@/stores/tree-data' import { useSearchDataStore } from '@/stores/searched-data' import { useFileInfoStore } from '@/stores/file-info-data' -import { computed } from '@vue/reactivity' -import FolderForm from './FolderForm.vue' const { isSearch } = storeToRefs(useSearchDataStore()) -const { isPreview } = storeToRefs(useFileInfoStore()) +const { isFilePreview } = storeToRefs(useFileInfoStore()) const { getFolder } = useTreeDataStore() const props = withDefaults( @@ -31,7 +29,7 @@ const MAX_NAME_LENGTH = 20 () => { getFolder(folder.pathname, false) isSearch = false - isPreview = false + isFilePreview = false } " :header-inset-level="level * 0.25" diff --git a/Services/client/src/modules/01_user/components/FileDownload.vue b/Services/client/src/modules/01_user/components/FileDownload.vue index a2b9c82..d46c6c3 100644 --- a/Services/client/src/modules/01_user/components/FileDownload.vue +++ b/Services/client/src/modules/01_user/components/FileDownload.vue @@ -7,8 +7,8 @@ import { useFileInfoStore } from '@/stores/file-info-data' import FileIcon from '@/components/FileIcon.vue' -const { isPreview, fileInfo } = storeToRefs(useFileInfoStore()) -const { getType, getFormatDate, getSize } = useFileInfoStore() +const { isFilePreview, fileInfo } = storeToRefs(useFileInfoStore()) +const { getType, getFormatDate, getSize, getFileNameFormat } = useFileInfoStore() async function downloadSubmit(path: any) { const [cabinet, drawer, folder, file] = path.split('/') @@ -47,7 +47,7 @@ async function downloadSubmit(path: any) { flat dense class="q-mr-sm q-px-sm" - @click="() => (isPreview = false)" + @click="() => (isFilePreview = false)" > - {{ fileInfo?.title }}
@@ -70,7 +70,7 @@ async function downloadSubmit(path: any) { :fileMimeType="fileInfo?.fileType" /> {{ - fileInfo?.title + getFileNameFormat(fileInfo?.fileName) }} diff --git a/Services/client/src/stores/file-info-data.ts b/Services/client/src/stores/file-info-data.ts index fa1d1a6..4ccac65 100644 --- a/Services/client/src/stores/file-info-data.ts +++ b/Services/client/src/stores/file-info-data.ts @@ -12,7 +12,7 @@ export interface TypeSetting { export const useFileInfoStore = defineStore('info', () => { const fileInfo = ref() - const isPreview = ref(false) + const isFilePreview = ref(false) const file: TypeSetting = { word: { icon: 'mdi-file-word-outline', color: 'blue-11' }, excel: { icon: 'mdi-file-excel-outline', color: 'green-4' }, @@ -126,13 +126,14 @@ export const useFileInfoStore = defineStore('info', () => { }, } - function getType(mimeType: any): string { - return mimeType && mimeFileMapping.hasOwnProperty(mimeType) - ? mimeFileMapping[mimeType].type - : 'unknown type' + function getType(mimeType: string | undefined): string { + if (mimeType === undefined) { + return 'unknown type' + } + return mimeFileMapping[mimeType].type } - function getFormatDate(dateTime: any): string { + function getFormatDate(dateTime: string | undefined): string { if (dateTime === undefined) { return 'unknown date' } @@ -144,30 +145,43 @@ export const useFileInfoStore = defineStore('info', () => { }) } - function getSize(size: any): string { + function getFileNameFormat(fileName: string | undefined): string { + if (fileName === undefined) { + return 'unknow name' + } + const dotIndex = fileName.lastIndexOf('.') + const fileNameOnly = fileName.substring(0, dotIndex) + + return fileNameOnly + } + + function getSize(size: string | undefined): string { if (size === undefined) { return 'unknow size' } const units = ['B', 'KB', 'MB', 'GB', 'TB'] let i = 0 - while (size >= 1024 && i < units.length - 1) { - size /= 1024 + let sizeNumber = parseFloat(size) + while (sizeNumber >= 1024 && i < units.length - 1) { + sizeNumber /= 1024 i++ } - return size.toFixed(2) + ' ' + units[i] + return sizeNumber.toFixed(2) + ' ' + units[i] } async function getFileInfo(data: EhrFile) { + isFilePreview.value = true fileInfo.value = data } return { mimeFileMapping, - isPreview, + isFilePreview, fileInfo, - getSize, getType, getFormatDate, + getFileNameFormat, + getSize, getFileInfo, } })