import RenameFile from './RenameFile.vue' import { ColumnInj, EditModeInj, IsFormInj, IsPublicInj, MetaInj, NOCO, ReadonlyInj, computed, inject, isImage, message, ref, useApi, useFileDialog, useI18n, useInjectionState, useProject, watch, } from '#imports' import MdiPdfBox from '~icons/mdi/pdf-box' import MdiFileWordOutline from '~icons/mdi/file-word-outline' import MdiFilePowerpointBox from '~icons/mdi/file-powerpoint-box' import MdiFileExcelOutline from '~icons/mdi/file-excel-outline' import IcOutlineInsertDriveFile from '~icons/ic/outline-insert-drive-file' interface AttachmentProps extends File { data?: any file: File title: string mimetype: string } export const [useProvideAttachmentCell, useAttachmentCell] = useInjectionState( (updateModelValue: (data: string | Record[]) => void) => { const isReadonly = inject(ReadonlyInj, ref(false)) const isPublic = inject(IsPublicInj, ref(false)) const isForm = inject(IsFormInj, ref(false)) const meta = inject(MetaInj, ref()) const column = inject(ColumnInj, ref()) const editEnabled = inject(EditModeInj, ref(false)) /** keep user selected File object */ const storedFiles = ref([]) const attachments = ref([]) const modalVisible = ref(false) const selectedImage = ref() const { project } = useProject() const { api, isLoading } = useApi() const { files, open } = useFileDialog() const { t } = useI18n() /** remove a file from our stored attachments (either locally stored or saved ones) */ function removeFile(i: number) { if (isPublic.value) { storedFiles.value.splice(i, 1) attachments.value.splice(i, 1) updateModelValue(storedFiles.value) } else { attachments.value.splice(i, 1) updateModelValue(JSON.stringify(attachments.value)) } } /** save a file on select / drop, either locally (in-memory) or in the db */ async function onFileSelect(selectedFiles: FileList | File[]) { if (!selectedFiles.length) return if (isPublic.value && isForm.value) { const newFiles = await Promise.all( Array.from(selectedFiles).map( (file) => new Promise((resolve) => { const res: AttachmentProps = { ...file, file, title: file.name, mimetype: file.type } if (isImage(file.name, (file).mimetype ?? file.type)) { const reader = new FileReader() reader.onload = (e) => { res.data = e.target?.result resolve(res) } reader.onerror = () => { resolve(res) } reader.readAsDataURL(file) } else { resolve(res) } }), ), ) attachments.value = [...attachments.value, ...newFiles] return updateModelValue(attachments.value) } const newAttachments = [] for (const file of selectedFiles) { // verify mime type const meta = typeof column.value?.meta === 'string' ? JSON.parse(column.value.meta) : column.value?.meta if (meta.unsupportedAttachmentMimeTypes.includes(file.type)) { message.error(`${file.name} has the mime type ${file.type} which is not allowed in this column.`) continue } // file = await renameFile(file) try { const data = await api.storage.upload( { path: [NOCO, project.value.title, meta.value?.title, column.value?.title].join('/'), }, { files: file, json: '{}', }, ) newAttachments.push(...data) } catch (e: any) { message.error(e.message || t('msg.error.internalError')) } } updateModelValue(JSON.stringify([...attachments.value, ...newAttachments])) } async function renameFile(file: Record) { return new Promise((resolve) => { const { close } = useDialog(RenameFile, { fileName: file.title, fileNames: [...attachments.value.map((file) => file.title), ...storedFiles.value.map((file) => file.title)], onRename: (newName: string) => { close() // TODO: update name resolve(true) }, onCancel: () => { close() resolve(true) }, }) }) } /** save files on drop */ async function onDrop(droppedFiles: File[] | null) { if (droppedFiles) { // set files await onFileSelect(droppedFiles) } } /** download a file */ async function downloadFile(item: Record) { ;(await import('file-saver')).saveAs(item.url || item.data, item.title) } const FileIcon = (icon: string) => { switch (icon) { case 'mdi-pdf-box': return MdiPdfBox case 'mdi-file-word-outline': return MdiFileWordOutline case 'mdi-file-powerpoint-box': return MdiFilePowerpointBox case 'mdi-file-excel-outline': return MdiFileExcelOutline default: return IcOutlineInsertDriveFile } } /** our currently visible items, either the locally stored or the ones from db, depending on isPublic & isForm status */ const visibleItems = computed(() => (isPublic.value && isForm.value ? storedFiles.value : attachments.value)) watch(files, (nextFiles) => nextFiles && onFileSelect(nextFiles)) return { attachments, visibleItems, isPublic, isForm, isReadonly, meta, column, editEnabled, isLoading, api, open: () => open(), onDrop, modalVisible, FileIcon, removeFile, renameFile, downloadFile, updateModelValue, selectedImage, storedFiles, } }, 'useAttachmentCell', )