fix: ListView CRUD
This commit is contained in:
somnetsak123
Methapon2001
parent
906c3bc4f5
commit
576736574c
3 changed files with 189 additions and 86 deletions
|
|
@ -2,7 +2,7 @@
|
|||
import { ref } from 'vue'
|
||||
import { storeToRefs } from 'pinia'
|
||||
import { useTreeDataStore } from '@/stores/tree-data'
|
||||
import TagInput from '@/components/TagInput.vue'
|
||||
import TagInput from '@/components/TagInput.vue'
|
||||
const { currentPath } = storeToRefs(useTreeDataStore())
|
||||
const { uploadFile, checkFile } = useTreeDataStore()
|
||||
|
||||
|
|
@ -44,8 +44,8 @@ async function handleSubmit(continueUpload: boolean = false) {
|
|||
await uploadFile(currentPath.value, inputFile.value, {
|
||||
title: fileTitle.value,
|
||||
description: fileDesc.value,
|
||||
keyword: [fileKeyword.value],
|
||||
category: [fileCategory.value],
|
||||
keyword: fileKeyword.value,
|
||||
category: fileCategory.value,
|
||||
})
|
||||
} else notification.value = true
|
||||
}
|
||||
|
|
@ -113,9 +113,7 @@ async function handleSubmit(continueUpload: boolean = false) {
|
|||
dense
|
||||
/>
|
||||
|
||||
<tag-input/>
|
||||
|
||||
|
||||
<tag-input />
|
||||
</q-drawer>
|
||||
|
||||
<q-dialog
|
||||
|
|
|
|||
|
|
@ -4,24 +4,25 @@ import { storeToRefs } from 'pinia'
|
|||
import type { QTableProps } from 'quasar'
|
||||
import { useTreeDataStore, type TreeDataFolder } from '@/stores/tree-data'
|
||||
import { useFileInfoStore } from '@/stores/file-info-data'
|
||||
import FromEdit from '@/components/FromEdit.vue'
|
||||
import FileIcon from '@/components/FileIcon.vue'
|
||||
import FormUpload from '@/components/FormUpload.vue'
|
||||
import DialogDelete from '@/components/DialogDelete.vue'
|
||||
import FileForm from './FileForm.vue'
|
||||
import FolderForm from './FolderForm.vue'
|
||||
|
||||
const { deleteFolder } = useTreeDataStore()
|
||||
const { getFormatDate, getSize, getType } = useFileInfoStore()
|
||||
const { listDataFile, listDataFolder, currentDept } = storeToRefs(
|
||||
const { listDataFile, listDataFolder, currentDept, currentPath } = storeToRefs(
|
||||
useTreeDataStore()
|
||||
)
|
||||
const { getFolder } = useTreeDataStore()
|
||||
const DEPT_NAME = ['ตู้เอกสาร', 'ลิ้นชัก', 'แฟ้ม', 'แฟ้มย่อย']
|
||||
const drawer = ref<boolean>(false)
|
||||
const drawerFile = ref<boolean>(false)
|
||||
const drawerStatus = ref<'edit' | 'create'>('create')
|
||||
const editPathname = ref<string>('')
|
||||
const confirmDelete = ref<boolean>(false)
|
||||
const currentPathDelete = ref<string>('')
|
||||
const {
|
||||
createFolder,
|
||||
editFolder,
|
||||
getFolder,
|
||||
deleteFolder,
|
||||
uploadFile,
|
||||
updateFile,
|
||||
deleteFile,
|
||||
} = useTreeDataStore()
|
||||
|
||||
const DEPT_NAME = ['ตู้เอกสาร', 'ลิ้นชัก', 'แฟ้ม', 'แฟ้มย่อย'] as const
|
||||
|
||||
const props = defineProps<{
|
||||
mode: 'admin' | 'user'
|
||||
|
|
@ -44,6 +45,105 @@ const currentIcon = computed(() =>
|
|||
? 'inbox'
|
||||
: 'o_folder_open'
|
||||
)
|
||||
|
||||
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
|
||||
}
|
||||
|
||||
const columnsFolder: QTableProps['columns'] = [
|
||||
{
|
||||
name: 'name',
|
||||
|
|
@ -144,16 +244,11 @@ const onRowClick = (evt: Event, row: TreeDataFolder, index: number) => {
|
|||
color="primary"
|
||||
dense
|
||||
icon="add"
|
||||
@click="
|
||||
() => {
|
||||
drawer = !drawer
|
||||
drawerStatus = 'create'
|
||||
drawerFile = false
|
||||
}
|
||||
"
|
||||
@click="() => triggerFolderCreate()"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<q-table
|
||||
flat
|
||||
bordered
|
||||
|
|
@ -197,11 +292,10 @@ const onRowClick = (evt: Event, row: TreeDataFolder, index: number) => {
|
|||
dense
|
||||
icon="edit"
|
||||
@click.stop="
|
||||
() => {
|
||||
drawer = !drawer
|
||||
drawerStatus = 'edit'
|
||||
editPathname = actionsRow.row.pathname
|
||||
}
|
||||
triggerFolderEdit(
|
||||
actionsRow.row.name,
|
||||
actionsRow.row.pathname
|
||||
)
|
||||
"
|
||||
/>
|
||||
<q-btn
|
||||
|
|
@ -209,12 +303,7 @@ const onRowClick = (evt: Event, row: TreeDataFolder, index: number) => {
|
|||
color="negative"
|
||||
dense
|
||||
icon="delete"
|
||||
@click.stop="
|
||||
() => {
|
||||
confirmDelete = !confirmDelete
|
||||
currentPathDelete = actionsRow.row.pathname
|
||||
}
|
||||
"
|
||||
@click.stop="deleteFolder(actionsRow.row.pathname)"
|
||||
/>
|
||||
</div>
|
||||
</q-td>
|
||||
|
|
@ -240,12 +329,7 @@ const onRowClick = (evt: Event, row: TreeDataFolder, index: number) => {
|
|||
color="primary"
|
||||
dense
|
||||
icon="add"
|
||||
@click="
|
||||
() => {
|
||||
drawerFile = !drawerFile
|
||||
drawer = false
|
||||
}
|
||||
"
|
||||
@click="() => triggerFileCreate()"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -294,8 +378,22 @@ const onRowClick = (evt: Event, row: TreeDataFolder, index: number) => {
|
|||
</q-tooltip>
|
||||
</div>
|
||||
<div v-if="props.mode === 'admin'">
|
||||
<q-btn flat color="positive" dense icon="edit" @click="" />
|
||||
<q-btn flat color="negative" dense icon="delete" @click="" />
|
||||
<q-btn
|
||||
flat
|
||||
color="positive"
|
||||
dense
|
||||
icon="edit"
|
||||
@click="
|
||||
() => triggerFileEdit(actionsRow.row, actionsRow.row.pathname)
|
||||
"
|
||||
/>
|
||||
<q-btn
|
||||
flat
|
||||
color="negative"
|
||||
dense
|
||||
icon="delete"
|
||||
@click="() => deleteFile(actionsRow.row.pathname)"
|
||||
/>
|
||||
</div>
|
||||
</q-td>
|
||||
</template>
|
||||
|
|
@ -303,23 +401,23 @@ const onRowClick = (evt: Event, row: TreeDataFolder, index: number) => {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<from-edit
|
||||
v-if="drawer"
|
||||
: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)"
|
||||
/>
|
||||
<dialog-delete
|
||||
:confirmDelete="confirmDelete"
|
||||
:pathname="currentPathDelete"
|
||||
@update:confirmDelete="() => (confirmDelete = 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>
|
||||
|
||||
|
|
|
|||
|
|
@ -10,19 +10,14 @@ import SearchBar from '@/modules/01_user/components/SearchBar.vue'
|
|||
import FileSearched from '@/components/FileSearched.vue'
|
||||
import FileDownload from '@/modules/01_user/components/FileDownload.vue'
|
||||
import ListView from '@/components/ListView.vue'
|
||||
import FromEdit from '@/components/FromEdit.vue'
|
||||
import FolderForm from './FolderForm.vue'
|
||||
|
||||
|
||||
const DEPT_NAME = ['ตู้เอกสาร', 'ลิ้นชัก', 'แฟ้ม', 'แฟ้มย่อย', 'ไฟล์']
|
||||
const DEPT_NAME = ['ตู้เอกสาร', 'ลิ้นชัก', 'แฟ้ม', 'แฟ้มย่อย'] as const
|
||||
|
||||
const { isPreview } = storeToRefs(useFileInfoStore())
|
||||
const { isSearch } = storeToRefs(useSearchDataStore())
|
||||
const { data, currentDept } = storeToRefs(useTreeDataStore())
|
||||
const { getCabinet, gotoParent } = useTreeDataStore()
|
||||
|
||||
const drawer = ref<boolean>(false)
|
||||
const drawerFile = ref<boolean>(false)
|
||||
const drawerStatus = ref<'create'>('create')
|
||||
const { createFolder, getCabinet, gotoParent } = useTreeDataStore()
|
||||
|
||||
const viewMode = ref<'view_list' | 'view_module'>('view_list')
|
||||
const inputSearch = ref<string>()
|
||||
|
|
@ -30,6 +25,27 @@ const props = defineProps<{
|
|||
mode: 'admin' | 'user'
|
||||
}>()
|
||||
|
||||
const folderFormState = ref<boolean>(false)
|
||||
const folderFormType = ref<'edit' | 'create'>('create')
|
||||
const folderFormData = ref<{
|
||||
name?: string
|
||||
}>({})
|
||||
|
||||
function triggerFolderCreate() {
|
||||
folderFormType.value = 'create'
|
||||
folderFormData.value = {}
|
||||
folderFormState.value = !folderFormState.value
|
||||
}
|
||||
|
||||
async function submitFolderForm(value: {
|
||||
mode: 'create' | 'edit'
|
||||
name: string
|
||||
}) {
|
||||
if (value.mode === 'create') {
|
||||
await createFolder(value.name)
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(getCabinet)
|
||||
</script>
|
||||
<template>
|
||||
|
|
@ -107,13 +123,7 @@ onMounted(getCabinet)
|
|||
color="primary"
|
||||
dense
|
||||
icon="add"
|
||||
@click="
|
||||
() => {
|
||||
drawer = !drawer
|
||||
drawerStatus = 'create'
|
||||
drawerFile = false
|
||||
}
|
||||
"
|
||||
@click="()=> triggerFolderCreate()"
|
||||
/>
|
||||
</span>
|
||||
<q-btn
|
||||
|
|
@ -142,16 +152,13 @@ onMounted(getCabinet)
|
|||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
<from-edit
|
||||
v-if="currentDept === 0 && drawer "
|
||||
:drawer="drawer"
|
||||
:drawerStatus="drawerStatus"
|
||||
:DEPT_NAME="DEPT_NAME"
|
||||
:currentDept="currentDept"
|
||||
editPathname=""
|
||||
@update:drawer="() => (drawer = 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>
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue