feat: upload, edit & delete file, folder
This commit is contained in:
Methapon2001
parent
046b915fc3
commit
9e889ccaa1
6 changed files with 583 additions and 227 deletions
|
|
@ -4,24 +4,34 @@ import { storeToRefs } from 'pinia'
|
|||
|
||||
import FileIcon from '@/components/FileIcon.vue'
|
||||
import FileItemAction from '@/components/FileItemAction.vue'
|
||||
import FromEdit from '@/components/FromEdit.vue'
|
||||
import FormUpload from '@/components/FormUpload.vue'
|
||||
import FileForm from './FileForm.vue'
|
||||
import FolderForm from './FolderForm.vue'
|
||||
import { useTreeDataStore } from '@/stores/tree-data'
|
||||
import { useFileInfoStore } from '@/stores/file-info-data'
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{ action: boolean; viewMode: 'view_list' | 'view_module' }>(),
|
||||
{
|
||||
action: false,
|
||||
}
|
||||
)
|
||||
|
||||
const DEPT_NAME = ['ตู้เอกสาร', 'ลิ้นชัก', 'แฟ้ม', 'แฟ้มย่อย'] as const
|
||||
|
||||
const { isPreview } = storeToRefs(useFileInfoStore())
|
||||
const { getFileInfo } = useFileInfoStore()
|
||||
const DEPT_NAME = ['ตู้เอกสาร', 'ลิ้นชัก', 'แฟ้ม', 'แฟ้มย่อย']
|
||||
|
||||
const { currentFolder, currentFile, currentDept, currentPath } = storeToRefs(
|
||||
useTreeDataStore()
|
||||
)
|
||||
const { getFolder, uploadFile } = useTreeDataStore()
|
||||
|
||||
const drawer = ref<boolean>(false)
|
||||
const drawerFile = ref<boolean>(false)
|
||||
const drawerStatus = ref<'edit' | 'create'>('create')
|
||||
const editPathname = ref<string>('')
|
||||
const {
|
||||
createFolder,
|
||||
editFolder,
|
||||
getFolder,
|
||||
deleteFolder,
|
||||
uploadFile,
|
||||
updateFile,
|
||||
deleteFile,
|
||||
} = useTreeDataStore()
|
||||
|
||||
const currentIcon = computed(() =>
|
||||
currentDept.value === 0
|
||||
|
|
@ -30,19 +40,111 @@ const currentIcon = computed(() =>
|
|||
? 'inbox'
|
||||
: 'o_folder_open'
|
||||
)
|
||||
const props = withDefaults(
|
||||
defineProps<{ action: boolean; viewMode: 'view_list' | 'view_module' }>(),
|
||||
{
|
||||
action: false,
|
||||
|
||||
const folderFormState = ref<boolean>(false)
|
||||
const folderFormPath = ref<string>('')
|
||||
const folderFormData = ref<{
|
||||
name?: string
|
||||
}>({})
|
||||
const folderFormType = ref<'edit' | 'create'>('create')
|
||||
const fileFormState = ref<boolean>(false)
|
||||
const fileFormPath = ref<string>('')
|
||||
const fileFormData = ref<{
|
||||
file?: File
|
||||
title?: string
|
||||
description?: string
|
||||
keyword?: string
|
||||
category?: string
|
||||
}>({})
|
||||
const fileFormType = ref<'edit' | 'create'>('create')
|
||||
|
||||
function triggerFolderCreate() {
|
||||
folderFormType.value = 'create'
|
||||
folderFormData.value = {}
|
||||
folderFormState.value = !folderFormState.value
|
||||
}
|
||||
|
||||
function triggerFolderEdit(name: string, pathname: string) {
|
||||
folderFormType.value = 'edit'
|
||||
folderFormPath.value = pathname
|
||||
folderFormData.value.name = name
|
||||
folderFormState.value = true
|
||||
}
|
||||
|
||||
async function submitFolderForm(value: {
|
||||
mode: 'create' | 'edit'
|
||||
name: string
|
||||
}) {
|
||||
if (value.mode === 'create') {
|
||||
await createFolder(value.name)
|
||||
} else {
|
||||
await editFolder(value.name, folderFormPath.value)
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
function triggerFileCreate() {
|
||||
fileFormType.value = 'create'
|
||||
fileFormData.value = {}
|
||||
fileFormState.value = !fileFormState.value
|
||||
}
|
||||
|
||||
function triggerFileEdit(
|
||||
value: {
|
||||
title: string
|
||||
description: string
|
||||
keyword: string
|
||||
category: string
|
||||
},
|
||||
pathname: string
|
||||
) {
|
||||
fileFormState.value = true
|
||||
fileFormType.value = 'edit'
|
||||
fileFormPath.value = pathname
|
||||
fileFormData.value = {
|
||||
title: value.title,
|
||||
description: value.description,
|
||||
keyword: value.keyword,
|
||||
category: value.keyword,
|
||||
}
|
||||
}
|
||||
|
||||
async function submitFileForm(value: {
|
||||
mode: 'create' | 'edit'
|
||||
file: File
|
||||
title: string
|
||||
description: string
|
||||
keyword: string
|
||||
category: string
|
||||
}) {
|
||||
if (value.mode === 'create') {
|
||||
await uploadFile(currentPath.value, value.file, {
|
||||
title: value.title,
|
||||
description: value.description,
|
||||
keyword: value.keyword,
|
||||
category: value.category,
|
||||
})
|
||||
} else {
|
||||
await updateFile(
|
||||
fileFormPath.value,
|
||||
{
|
||||
title: value.title,
|
||||
description: value.description,
|
||||
keyword: value.keyword,
|
||||
category: value.category,
|
||||
},
|
||||
value.file
|
||||
)
|
||||
}
|
||||
fileFormData.value = {}
|
||||
fileFormState.value = false
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="q-my-md">
|
||||
<span class="text-h6 text-weight-light" v-if="currentDept === 3"
|
||||
>แฟ้มย่อย</span
|
||||
>
|
||||
<span class="text-h6 text-weight-light" v-if="currentDept === 3">
|
||||
แฟ้มย่อย
|
||||
</span>
|
||||
<div class="q-gutter-md" v-if="currentDept < 3">
|
||||
<div
|
||||
:key="value.name"
|
||||
|
|
@ -68,22 +170,16 @@ const props = withDefaults(
|
|||
v-if="props.action"
|
||||
>
|
||||
<file-item-action
|
||||
:editname="value.name"
|
||||
:pathname="value.pathname"
|
||||
@editname="
|
||||
() => {
|
||||
drawer = !drawer
|
||||
drawerStatus = 'edit'
|
||||
editPathname = value.pathname
|
||||
}
|
||||
"
|
||||
@delete="() => deleteFolder(value.pathname)"
|
||||
@edit="() => triggerFolderEdit(value.name, value.pathname)"
|
||||
/>
|
||||
</div>
|
||||
<span
|
||||
class="text-center q-pt-md text-overflow-handle"
|
||||
style="max-width: 132px"
|
||||
>{{ value.name }}</span
|
||||
>
|
||||
{{ value.name }}
|
||||
</span>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</div>
|
||||
|
|
@ -94,16 +190,7 @@ const props = withDefaults(
|
|||
tabindex="0"
|
||||
>
|
||||
<div class="dashed border-radius-inherit">
|
||||
<q-card
|
||||
flat
|
||||
@click="
|
||||
() => {
|
||||
drawer = !drawer
|
||||
drawerStatus = 'create'
|
||||
drawerFile = false
|
||||
}
|
||||
"
|
||||
>
|
||||
<q-card flat @click="() => triggerFolderCreate()">
|
||||
<q-card-section class="column justify-center relative q-px-xl">
|
||||
<q-icon
|
||||
:name="currentIcon"
|
||||
|
|
@ -140,15 +227,8 @@ const props = withDefaults(
|
|||
/>
|
||||
<span class="q-mx-md">{{ value.name }}</span>
|
||||
<file-item-action
|
||||
:editname="value.name"
|
||||
:pathname="value.pathname"
|
||||
@editname="
|
||||
() => {
|
||||
drawer = !drawer
|
||||
drawerStatus = 'edit'
|
||||
editPathname = value.pathname
|
||||
}
|
||||
"
|
||||
@delete="() => deleteFolder(value.pathname)"
|
||||
@edit="() => triggerFolderEdit(value.name, value.pathname)"
|
||||
/>
|
||||
</q-td>
|
||||
</q-card>
|
||||
|
|
@ -160,16 +240,7 @@ const props = withDefaults(
|
|||
tabindex="0"
|
||||
>
|
||||
<div class="dashed border-radius-inherit q-px-lg q-py-sm">
|
||||
<q-card
|
||||
flat
|
||||
@click="
|
||||
() => {
|
||||
drawer = !drawer
|
||||
drawerStatus = 'create'
|
||||
drawerFile = false
|
||||
}
|
||||
"
|
||||
>
|
||||
<q-card flat @click="() => triggerFolderCreate()">
|
||||
<q-td>
|
||||
<q-icon
|
||||
:name="currentIcon"
|
||||
|
|
@ -192,83 +263,87 @@ const props = withDefaults(
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="text-h6 text-weight-light" v-if="currentDept > 2"
|
||||
>เอกสาร</span
|
||||
<span class="text-h6 text-weight-light" v-if="currentDept > 2">เอกสาร</span>
|
||||
<div class="q-gutter-md q-mt-xs">
|
||||
<div
|
||||
v-for="(value, index) in currentFile"
|
||||
:key="value.title"
|
||||
class="inline-block"
|
||||
>
|
||||
<div class="q-gutter-md q-mt-xs">
|
||||
<div
|
||||
v-for="(value, index) in currentFile"
|
||||
:key="value.title"
|
||||
class="inline-block"
|
||||
>
|
||||
<div class="box border-radius-inherit">
|
||||
<q-card
|
||||
flat
|
||||
@click="
|
||||
() => {
|
||||
getFileInfo(currentFile[index])
|
||||
isPreview = true
|
||||
}
|
||||
"
|
||||
>
|
||||
<q-card-section class="column justify-center relative q-px-xl">
|
||||
<file-icon
|
||||
size="preview"
|
||||
:fileMimeType="value.fileType"
|
||||
ref="fileIconComp"
|
||||
<div class="box border-radius-inherit">
|
||||
<q-card
|
||||
flat
|
||||
@click="() => (getFileInfo(currentFile[index]), (isPreview = true))"
|
||||
>
|
||||
<q-card-section class="column justify-center relative q-px-xl">
|
||||
<file-icon
|
||||
size="preview"
|
||||
:fileMimeType="value.fileType"
|
||||
ref="fileIconComp"
|
||||
/>
|
||||
<div
|
||||
class="absolute"
|
||||
style="top: 0.5rem; right: 0.5rem"
|
||||
v-if="props.action"
|
||||
>
|
||||
<file-item-action
|
||||
@edit="
|
||||
() =>
|
||||
triggerFileEdit(
|
||||
{
|
||||
title: value.title,
|
||||
description: value.description,
|
||||
keyword: value.keyword.join(','),
|
||||
category: value.category.join(','),
|
||||
},
|
||||
value.pathname
|
||||
)
|
||||
"
|
||||
@delete="() => deleteFile(value.pathname)"
|
||||
/>
|
||||
<div
|
||||
class="absolute"
|
||||
style="top: 0.5rem; right: 0.5rem"
|
||||
v-if="props.action"
|
||||
>
|
||||
<!-- TODO: Edit file data -->
|
||||
</div>
|
||||
<span class="text-center q-pt-md">{{ value.title }}</span>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
<div class="inline-block" v-if="props.action && currentDept > 2">
|
||||
<div class="dashed border-radius-inherit">
|
||||
<q-card
|
||||
flat
|
||||
@click="
|
||||
() => {
|
||||
drawerFile = !drawerFile
|
||||
drawer = false
|
||||
}
|
||||
"
|
||||
>
|
||||
<q-card-section class="column justify-center relative q-px-xl">
|
||||
<q-icon
|
||||
name="mdi-file"
|
||||
class="add-icon"
|
||||
size="6em"
|
||||
color="primary"
|
||||
/>
|
||||
<q-btn round class="add-button" color="white" size="10px">
|
||||
<q-icon name="add" color="primary" size="1.5rem"></q-icon>
|
||||
</q-btn>
|
||||
<span class="text-center q-pt-md">สร้างไฟล์ใหม่</span>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
<span class="text-center q-pt-md">{{ value.title }}</span>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
<div class="inline-block" v-if="props.action && currentDept > 2">
|
||||
<div class="dashed border-radius-inherit">
|
||||
<q-card flat @click="() => triggerFileCreate()">
|
||||
<q-card-section class="column justify-center relative q-px-xl">
|
||||
<q-icon
|
||||
name="mdi-file"
|
||||
class="add-icon"
|
||||
size="6em"
|
||||
color="primary"
|
||||
/>
|
||||
<q-btn round class="add-button" color="white" size="10px">
|
||||
<q-icon name="add" color="primary" size="1.5rem"></q-icon>
|
||||
</q-btn>
|
||||
<span class="text-center q-pt-md">สร้างไฟล์ใหม่</span>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<from-edit
|
||||
:drawer="drawer"
|
||||
:drawerStatus="drawerStatus"
|
||||
:DEPT_NAME="DEPT_NAME"
|
||||
:currentDept="currentDept"
|
||||
:editPathname="editPathname"
|
||||
@update:drawer="() => (drawer = false)"
|
||||
<file-form
|
||||
:mode="fileFormType"
|
||||
v-model:open="fileFormState"
|
||||
v-model:title="fileFormData.title"
|
||||
v-model:description="fileFormData.description"
|
||||
v-model:keyword="fileFormData.keyword"
|
||||
v-model:category="fileFormData.category"
|
||||
@submit="submitFileForm"
|
||||
/>
|
||||
|
||||
<form-upload
|
||||
:drawerFile="drawerFile"
|
||||
@update:drawerFile="() => (drawerFile = false)"
|
||||
<folder-form
|
||||
:mode="folderFormType"
|
||||
:tree="DEPT_NAME[currentDept]"
|
||||
v-if="currentDept < 4"
|
||||
v-model:open="folderFormState"
|
||||
v-model:name="folderFormData.name"
|
||||
@submit="submitFolderForm"
|
||||
/>
|
||||
</template>
|
||||
|
||||
|
|
@ -299,6 +374,7 @@ const props = withDefaults(
|
|||
right: 70px;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.add-button-folder-level {
|
||||
position: absolute;
|
||||
left: 30px;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue