hrms-bangkok/hrms-edm
7
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

Merge branch 'phatt' into development

Browse source
This commit is contained in:
puri-ph4tt 2023-11-30 16:49:49 +07:00
commit 957ee1110f
7 changed files with 188 additions and 43 deletions
Download patch file Download diff file Expand all files Collapse all files

22
Services/client/src/components/FileForm.vue
View file

@ -4,7 +4,10 @@ import { onMounted, onUnmounted, ref } from 'vue'
const props = withDefaults(
defineProps<{
open: boolean
error: { fileExist?: boolean }
error: {
fileExist?: boolean
fileName2Long?: boolean
}
mode: 'create' | 'edit'
title?: string
description?: string
@ -50,7 +53,7 @@ function submit() {
keyword: props.keyword ?? '',
category: props.category ?? '',
})
reset()
emit('update:open', !open), reset()
}
onMounted(() => window.addEventListener('keydown', keydown))
@ -100,9 +103,13 @@ const file = ref<File | undefined>()
v-model="file"
@update:model-value="(v) => $emit('filechange', v.name)"
:label="file?.name ? undefined : 'เลือกไฟล์'"
:error="!!error.fileExist"
:error="!!error.fileExist || !!error.fileName2Long"
:error-message="
error.fileExist ? 'พบไฟล์ในระบบ ข้อมูลในระบบจะถูกเขียนทับ' : ''
error.fileExist
? 'พบไฟล์ในระบบ ข้อมูลในระบบจะถูกเขียนทับ'
: error.fileName2Long
? 'ไม่สามารถเพิ่มไฟล์ที่ชื่อยาวเกิน 85 ตัวอักษรได้'
: ''
"
>
<template v-slot:prepend>
@ -161,7 +168,12 @@ const file = ref<File | undefined>()
</section>
<section :style="{ display: 'flex', gap: '.5rem' }">
<q-btn label="บันทึก" type="submit" color="primary" />
<q-btn
label="บันทึก"
type="submit"
color="primary"
:disable="error.fileName2Long"
/>
<q-btn
label="ยกเลิก"
type="reset"

10
Services/client/src/components/FileItem.vue
View file

@ -30,6 +30,7 @@ const {
updateFile,
deleteFile,
checkFile,
checkFileName,
} = useTreeDataStore()
const currentIcon = computed(() =>
@ -60,7 +61,7 @@ const fileFormData = ref<{
category?: string
}>({})
const fileFormType = ref<'edit' | 'create'>('create')
const fileFormError = ref<{ fileExist?: boolean }>({})
const fileFormError = ref<{ fileExist?: boolean; fileName2Long?: boolean }>({})
const fileExistNotification = ref<boolean>(false)
function triggerFolderDelete(pathname: string) {
@ -368,7 +369,12 @@ async function submitFileForm(
v-model:description="fileFormData.description"
v-model:keyword="fileFormData.keyword"
v-model:category="fileFormData.category"
@filechange="(name: string) => (fileFormError.fileExist = checkFile(name))"
@filechange="
(name: string) => (
(fileFormError.fileExist = checkFile(name)),
(fileFormError.fileName2Long = checkFileName(name))
)
"
@submit="submitFileForm"
/>

166
Services/client/src/components/FileSearched.vue
View file

@ -3,42 +3,128 @@ import { storeToRefs } from 'pinia'
import { useSearchDataStore } from '@/stores/searched-data'
import { useFileInfoStore } from '@/stores/file-info-data'
import FileIcon from '@/components/FileIcon.vue'
import type { QTableProps } from 'quasar'
defineProps<{
viewMode: 'view_list' | 'view_module'
}>()
const { foundFile } = storeToRefs(useSearchDataStore())
const { getFileInfo } = useFileInfoStore()
const { getFileInfo, getSize, getType, getFileNameFormat } = useFileInfoStore()
const columns: QTableProps['columns'] = [
{
name: 'name',
required: true,
label: 'ชื่อไฟล์',
align: 'left',
field: (row) => row.fileName,
format: (val) => `${val}`,
sortable: true,
style: 'width: 200px',
},
{
name: 'title',
align: 'center',
label: 'ชื่อเรื่อง',
field: 'title',
style: 'width: 200px',
sortable: true,
},
{
name: 'fileType',
align: 'center',
label: 'ประเภทของไฟล์',
field: 'fileType',
sortable: true,
style: 'width: 200px',
},
{
name: 'actions',
align: 'center',
label: '',
field: '',
style: 'width: 20px',
},
]
</script>
<template>
<div class="q-mt-md" v-if="foundFile.length > 0">
<div class="q-gutter-md">
<div
v-for="(value, index) in foundFile"
:key="value.title"
class="inline-block"
>
<div class="box border-radius-inherit">
<q-card
flat
@click="
() => {
getFileInfo(foundFile[index])
}
"
<div v-if="viewMode === 'view_list' && foundFile.length > 0">
<div class="grid q-mt-md">
<div v-for="(value, index) in foundFile" :key="value.title">
<div
:style="{
position: 'relative',
display: 'flex',
gap: '0.5rem',
flexDirection: 'column',
alignItems: 'center',
padding: '1rem',
maxWidth: '100%',
}"
class="box"
@click="() => getFileInfo(foundFile[index])"
>
<div class="q-px-md flex items-center justify-center">
<file-icon
size="preview"
:fileMimeType="value.fileType ? value.fileType : 'unknow'"
/>
</div>
<div
class="text-overflow-handle block q-px-md text-center"
style="max-width: 100%"
>
<q-card-section class="column justify-center relative q-px-xl">
<file-icon
size="preview"
:fileMimeType="value.fileType"
ref="fileIconComp"
/>
<span class="text-center q-pt-md">{{ value.title }}</span>
</q-card-section>
</q-card>
{{ getFileNameFormat(value.fileName) }}
</div>
</div>
</div>
</div>
</div>
<div v-if="viewMode === 'view_module' && foundFile.length > 0">
<q-table
flat
bordered
:rows="foundFile"
:columns="columns"
row-key="name"
hide-bottom
:rows-per-page-options="[0]"
class="cursor"
>
<template v-slot:body-cell-name="nameData">
<q-td style="width: 50%" @click="() => getFileInfo(nameData.row)">
<file-icon size="list" :fileMimeType="nameData.row.fileType" />
{{ nameData.row.fileName }}
</q-td>
</template>
<template v-slot:body-cell-fileType="typeData">
<q-td>
<div class="justify-center">
{{ getType(typeData.row.fileType) }}
</div>
</q-td>
</template>
<template v-slot:body-cell-actions="sizeData">
<q-td class="justify-center">
<div>
<q-icon class="q-ma-sm" name="info" size="2em" color="primary" />
<q-tooltip
anchor="center left"
self="center right"
:offset="[5, 1]"
>
{{ getSize(sizeData.row.fileSize) }}
</q-tooltip>
</div>
</q-td>
</template>
</q-table>
</div>
<div class="q-mt-md" v-if="foundFile.length == 0">
<span>ไม่พบรายการที่ค้นหา</span>
</div>
@ -46,9 +132,35 @@ const { getFileInfo } = useFileInfoStore()
<style scoped lang="scss">
.box {
display: inline-block;
border: 2px solid #f1f2f4;
border: 2px solid $separator-color;
border-radius: 8px;
cursor: pointer;
}
.cursor {
cursor: pointer;
}
.text-overflow-handle {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.grid {
display: grid;
width: 100%;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1rem;
}
@media (min-width: $breakpoint-md-min) {
.grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
.grid .box {
position: relative;
}
</style>

2
Services/client/src/components/FolderForm.vue
View file

@ -31,7 +31,7 @@ function submit() {
mode: props.mode,
name: props.name,
})
reset()
emit('update:open', !open), reset()
}
onMounted(() => window.addEventListener('keydown', keydown))

7
Services/client/src/components/PageLayout.vue
View file

@ -163,13 +163,16 @@ onMounted(getCabinet)
</div>
</div>
<div>
<file-searched v-if="isSearch === true" />
<file-searched :viewMode="viewMode" v-if="isSearch === true" />
<file-item
:viewMode="viewMode"
:action="props.mode === 'admin'"
v-if="isSearch === false && viewMode === 'view_list'"
/>
<list-view v-if="viewMode === 'view_module'" :mode="mode" />
<list-view
v-if="isSearch === false && viewMode === 'view_module'"
:mode="mode"
/>
</div>
</div>
</div>

9
Services/client/src/modules/01_user/components/SearchBar.vue
View file

@ -40,6 +40,10 @@ async function searchSubmit() {
field: searchData.value.field,
value: searchData.value.value,
})
submitSearchData.value.AND.push({
field: 'fileName',
value: searchData.value.value,
})
if (isAdvSearchCall.value && advSearchComp.value) {
const advField = advSearchComp.value.advSearchDataField
@ -71,6 +75,9 @@ async function searchSubmit() {
`${import.meta.env.VITE_API_ENDPOINT}/search`,
submitSearchData.value
)
console.log(submitSearchData.value);
console.log(res.data);
getFoundFile(res.data)
isSearch.value = true
} catch (error) {
@ -108,7 +115,7 @@ async function searchSubmit() {
<template v-slot:append>
<q-icon
name="close"
@click="() => (searchData.value = '')"
@click="() => (searchData.value = '', isSearch = false)"
class="cursor-pointer"
/>
</template>

15
Services/client/src/stores/tree-data.ts
View file

@ -96,7 +96,7 @@ export const useTreeDataStore = defineStore('changeCabinet', () => {
currentPath.value = pathname
const res = await axiosClient.get<EhrFolder[]>(
`${apiEndpoint}${requestPath}`
`${apiEndpoint}${requestPath}`,
)
const list = res.data.map((v) => ({
@ -248,7 +248,7 @@ export const useTreeDataStore = defineStore('changeCabinet', () => {
description: string
keyword: string
category: string
}
},
) {
loader.show()
@ -268,7 +268,7 @@ export const useTreeDataStore = defineStore('changeCabinet', () => {
{
file: file.name,
...metadata,
}
},
)
if (res && res.data.upload) {
@ -297,7 +297,7 @@ export const useTreeDataStore = defineStore('changeCabinet', () => {
keyword: string
category: string
},
file?: File
file?: File,
) {
loader.show()
@ -312,7 +312,7 @@ export const useTreeDataStore = defineStore('changeCabinet', () => {
const res = await axiosClient.patch<{ upload: string }>(
`${apiEndpoint}${requestPath}`,
{ file: file?.name, ...metadata }
{ file: file?.name, ...metadata },
)
if (res && res.data.upload) {
@ -362,6 +362,10 @@ export const useTreeDataStore = defineStore('changeCabinet', () => {
return currentFile.value.some((element) => element.fileName === fileName)
}
function checkFileName(fileName: string) {
return fileName.length >= 85
}
return {
data,
currentFolder,
@ -380,5 +384,6 @@ export const useTreeDataStore = defineStore('changeCabinet', () => {
deleteFolder,
editFolder,
checkFile,
checkFileName,
}
})