|
|
@ -1,7 +1,7 @@ |
|
|
|
import { message } from 'ant-design-vue' |
|
|
|
import { message } from 'ant-design-vue' |
|
|
|
import FileSaver from 'file-saver' |
|
|
|
import FileSaver from 'file-saver' |
|
|
|
import { computed, inject, ref, useApi, useFileDialog, useInjectionState, useProject, watch } from '#imports' |
|
|
|
import { computed, inject, ref, useApi, useFileDialog, useInjectionState, useProject, watch } from '#imports' |
|
|
|
import { ColumnInj, EditModeInj, MetaInj, ReadonlyInj } from '~/context' |
|
|
|
import { ColumnInj, EditModeInj, IsPublicInj, MetaInj, ReadonlyInj } from '~/context' |
|
|
|
import { isImage } from '~/utils' |
|
|
|
import { isImage } from '~/utils' |
|
|
|
import { NOCO } from '~/lib' |
|
|
|
import { NOCO } from '~/lib' |
|
|
|
import MdiPdfBox from '~icons/mdi/pdf-box' |
|
|
|
import MdiPdfBox from '~icons/mdi/pdf-box' |
|
|
@ -10,11 +10,18 @@ import MdiFilePowerpointBox from '~icons/mdi/file-powerpoint-box' |
|
|
|
import MdiFileExcelOutline from '~icons/mdi/file-excel-outline' |
|
|
|
import MdiFileExcelOutline from '~icons/mdi/file-excel-outline' |
|
|
|
import IcOutlineInsertDriveFile from '~icons/ic/outline-insert-drive-file' |
|
|
|
import IcOutlineInsertDriveFile from '~icons/ic/outline-insert-drive-file' |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
interface AttachmentProps { |
|
|
|
|
|
|
|
data?: any |
|
|
|
|
|
|
|
file: File |
|
|
|
|
|
|
|
title: string |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
export const [useProvideAttachmentCell, useAttachmentCell] = useInjectionState( |
|
|
|
export const [useProvideAttachmentCell, useAttachmentCell] = useInjectionState( |
|
|
|
(updateModelValue: (data: string | Record<string, any>[]) => void) => { |
|
|
|
(updateModelValue: (data: string | Record<string, any>[]) => void) => { |
|
|
|
const isReadonly = inject(ReadonlyInj, false) |
|
|
|
const isReadonly = inject(ReadonlyInj, false) |
|
|
|
|
|
|
|
|
|
|
|
const isPublicForm = inject('isPublicForm', false) |
|
|
|
const isPublic = inject(IsPublicInj, ref(false)) |
|
|
|
|
|
|
|
|
|
|
|
const isForm = inject('isForm', false) |
|
|
|
const isForm = inject('isForm', false) |
|
|
|
|
|
|
|
|
|
|
@ -27,8 +34,11 @@ export const [useProvideAttachmentCell, useAttachmentCell] = useInjectionState( |
|
|
|
|
|
|
|
|
|
|
|
const editEnabled = inject(EditModeInj, ref(false)) |
|
|
|
const editEnabled = inject(EditModeInj, ref(false)) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// todo: refactor name
|
|
|
|
const storedFiles = ref<{ title: string; file: File }[]>([]) |
|
|
|
const storedFiles = ref<{ title: string; file: File }[]>([]) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const storedFilesRefs = ref<File[]>([]) |
|
|
|
|
|
|
|
|
|
|
|
const attachments = ref<File[]>([]) |
|
|
|
const attachments = ref<File[]>([]) |
|
|
|
|
|
|
|
|
|
|
|
const modalVisible = ref(false) |
|
|
|
const modalVisible = ref(false) |
|
|
@ -43,8 +53,9 @@ export const [useProvideAttachmentCell, useAttachmentCell] = useInjectionState( |
|
|
|
|
|
|
|
|
|
|
|
/** remove a file from our stored attachments (either locally stored or saved ones) */ |
|
|
|
/** remove a file from our stored attachments (either locally stored or saved ones) */ |
|
|
|
function removeFile(i: number) { |
|
|
|
function removeFile(i: number) { |
|
|
|
if (isPublicForm) { |
|
|
|
if (isPublic.value) { |
|
|
|
storedFiles.value.splice(i, 1) |
|
|
|
storedFiles.value.splice(i, 1) |
|
|
|
|
|
|
|
storedFilesRefs.value.splice(i, 1) |
|
|
|
|
|
|
|
|
|
|
|
updateModelValue(storedFiles.value.map((storedFile) => storedFile.file)) |
|
|
|
updateModelValue(storedFiles.value.map((storedFile) => storedFile.file)) |
|
|
|
} else { |
|
|
|
} else { |
|
|
@ -57,16 +68,28 @@ export const [useProvideAttachmentCell, useAttachmentCell] = useInjectionState( |
|
|
|
async function onFileSelect(selectedFiles: FileList | File[]) { |
|
|
|
async function onFileSelect(selectedFiles: FileList | File[]) { |
|
|
|
if (!selectedFiles.length || isPublicGrid) return |
|
|
|
if (!selectedFiles.length || isPublicGrid) return |
|
|
|
|
|
|
|
|
|
|
|
if (isPublicForm) { |
|
|
|
if (isPublic.value) { |
|
|
|
|
|
|
|
storedFilesRefs.value.push(...selectedFiles) |
|
|
|
storedFiles.value.push( |
|
|
|
storedFiles.value.push( |
|
|
|
...Array.from(selectedFiles).map((file) => { |
|
|
|
...(await Promise.all<AttachmentProps>( |
|
|
|
const res = { file, title: file.name } |
|
|
|
Array.from(selectedFiles).map( |
|
|
|
if (isImage(file.name, (file as any).mimetype)) { |
|
|
|
(file) => |
|
|
|
const reader = new FileReader() |
|
|
|
new Promise<AttachmentProps>((resolve) => { |
|
|
|
reader.readAsDataURL(file) |
|
|
|
const res: AttachmentProps = { file, title: file.name } |
|
|
|
} |
|
|
|
if (isImage(file.name, (file as any).mimetype)) { |
|
|
|
return res |
|
|
|
const reader = new FileReader() |
|
|
|
}), |
|
|
|
reader.onload = (e: any) => { |
|
|
|
|
|
|
|
res.data = e.target?.result |
|
|
|
|
|
|
|
resolve(res) |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
reader.onerror = () => { |
|
|
|
|
|
|
|
resolve(res) |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
reader.readAsDataURL(file) |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}), |
|
|
|
|
|
|
|
), |
|
|
|
|
|
|
|
)), |
|
|
|
) |
|
|
|
) |
|
|
|
|
|
|
|
|
|
|
|
return updateModelValue(storedFiles.value.map((storedFile) => storedFile.file)) |
|
|
|
return updateModelValue(storedFiles.value.map((storedFile) => storedFile.file)) |
|
|
@ -124,7 +147,7 @@ export const [useProvideAttachmentCell, useAttachmentCell] = useInjectionState( |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
/** our currently visible items, either the locally stored or the ones from db, depending on isPublicForm status */ |
|
|
|
/** our currently visible items, either the locally stored or the ones from db, depending on isPublicForm status */ |
|
|
|
const visibleItems = computed<any[]>(() => (isPublicForm ? storedFiles.value : attachments.value) || ([] as any[])) |
|
|
|
const visibleItems = computed<any[]>(() => (isPublic.value ? storedFiles.value : attachments.value) || ([] as any[])) |
|
|
|
|
|
|
|
|
|
|
|
watch(files, (nextFiles) => nextFiles && onFileSelect(nextFiles)) |
|
|
|
watch(files, (nextFiles) => nextFiles && onFileSelect(nextFiles)) |
|
|
|
|
|
|
|
|
|
|
@ -132,7 +155,7 @@ export const [useProvideAttachmentCell, useAttachmentCell] = useInjectionState( |
|
|
|
attachments, |
|
|
|
attachments, |
|
|
|
storedFiles, |
|
|
|
storedFiles, |
|
|
|
visibleItems, |
|
|
|
visibleItems, |
|
|
|
isPublicForm, |
|
|
|
isPublic, |
|
|
|
isForm, |
|
|
|
isForm, |
|
|
|
isPublicGrid, |
|
|
|
isPublicGrid, |
|
|
|
isReadonly, |
|
|
|
isReadonly, |
|
|
@ -149,6 +172,7 @@ export const [useProvideAttachmentCell, useAttachmentCell] = useInjectionState( |
|
|
|
downloadFile, |
|
|
|
downloadFile, |
|
|
|
updateModelValue, |
|
|
|
updateModelValue, |
|
|
|
selectedImage, |
|
|
|
selectedImage, |
|
|
|
|
|
|
|
storedFilesRefs |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
}, |
|
|
|
'useAttachmentCell', |
|
|
|
'useAttachmentCell', |
|
|
|