mirror of https://github.com/nocodb/nocodb
Wing-Kam Wong
2 years ago
35 changed files with 3009 additions and 1190 deletions
@ -1,338 +0,0 @@
|
||||
<script setup lang="ts"> |
||||
import { useToast } from 'vue-toastification' |
||||
import { inject, ref, useProject, watchEffect } from '#imports' |
||||
import { useNuxtApp } from '#app' |
||||
import { ColumnInj, MetaInj } from '~/context' |
||||
import { NOCO } from '~/lib' |
||||
import { isImage } from '~/utils' |
||||
import MaterialPlusIcon from '~icons/mdi/plus' |
||||
import MaterialArrowExpandIcon from '~icons/mdi/arrow-expand' |
||||
|
||||
interface Props { |
||||
modelValue: string | any[] | null |
||||
} |
||||
|
||||
const { modelValue } = defineProps<Props>() |
||||
|
||||
const emit = defineEmits(['update:modelValue']) |
||||
|
||||
const isPublicForm = inject<boolean>('isPublicForm', false) |
||||
const isForm = inject<boolean>('isForm', false) |
||||
const meta = inject(MetaInj) |
||||
const column = inject(ColumnInj) |
||||
const editEnabled = inject<boolean>('editEnabled', false) |
||||
|
||||
const localFilesState = reactive([]) |
||||
const attachments = ref([]) |
||||
const uploading = ref(false) |
||||
const fileInput = ref<HTMLInputElement>() |
||||
|
||||
const { $api } = useNuxtApp() |
||||
const { project } = useProject() |
||||
const toast = useToast() |
||||
|
||||
watchEffect(() => { |
||||
if (modelValue) { |
||||
attachments.value = ((typeof modelValue === 'string' ? JSON.parse(modelValue) : modelValue) || []).filter(Boolean) |
||||
} |
||||
}) |
||||
|
||||
const selectImage = (file: any, i: unknown) => { |
||||
// todo: implement |
||||
} |
||||
|
||||
const openUrl = (url: string, target = '_blank') => { |
||||
window.open(url, target) |
||||
} |
||||
|
||||
const addFile = () => { |
||||
fileInput.value?.click() |
||||
} |
||||
|
||||
const onFileSelection = async (e: unknown) => { |
||||
// if (this.isPublicGrid) { |
||||
// return |
||||
// } |
||||
// if (!this.$refs.file.files || !this.$refs.file.files.length) { |
||||
// return |
||||
// } |
||||
|
||||
// if (this.isPublicForm) { |
||||
// this.localFilesState.push(...Array.from(this.$refs.file.files).map((file) => { |
||||
// const res = { file, title: file.name } |
||||
// if (isImage(file.name, file.mimetype)) { |
||||
// const reader = new FileReader() |
||||
// reader.onload = (e) => { |
||||
// this.$set(res, 'data', e.target.result) |
||||
// } |
||||
// reader.readAsDataURL(file) |
||||
// } |
||||
// return res |
||||
// })) |
||||
// |
||||
// this.$emit('input', this.localFilesState.map(f => f.file)) |
||||
// return |
||||
// } |
||||
|
||||
// todo : move to com |
||||
uploading.value = true |
||||
const newAttachments = [] |
||||
for (const file of fileInput.value?.files ?? []) { |
||||
try { |
||||
const data = await $api.storage.upload( |
||||
{ |
||||
path: [NOCO, project.value.title, meta?.value?.title, column?.title].join('/'), |
||||
}, |
||||
{ |
||||
files: file, |
||||
json: '{}', |
||||
}, |
||||
) |
||||
newAttachments.push(...data) |
||||
} catch (e: any) { |
||||
toast.error(e.message || 'Some internal error occurred') |
||||
uploading.value = false |
||||
return |
||||
} |
||||
} |
||||
uploading.value = false |
||||
emit('update:modelValue', JSON.stringify([...attachments.value, ...newAttachments])) |
||||
|
||||
// this.$emit('input', JSON.stringify(this.localState)) |
||||
// this.$emit('update') |
||||
} |
||||
</script> |
||||
|
||||
<template> |
||||
<div class="main h-100"> |
||||
<div class="d-flex align-center img-container"> |
||||
<div class="d-flex no-overflow"> |
||||
<div |
||||
v-for="(item, i) in isPublicForm ? localFilesState : attachments" |
||||
:key="item.url || item.title" |
||||
class="thumbnail align-center justify-center d-flex" |
||||
> |
||||
<!-- <v-tooltip bottom> --> |
||||
<!-- <template #activator="{ on }"> --> |
||||
<!-- <v-img |
||||
v-if="isImage(item.title, item.mimetype)" |
||||
lazy-src="https://via.placeholder.com/60.png?text=Loading..." |
||||
alt="#" |
||||
max-height="99px" |
||||
contain |
||||
:src="item.url || item.data" |
||||
v-on="on" |
||||
@click="selectImage(item.url || item.data, i)" |
||||
> --> |
||||
<img |
||||
v-if="isImage(item.title, item.mimetype)" |
||||
alt="#" |
||||
style="max-height: 30px; max-width: 30px" |
||||
:src="item.url || item.data" |
||||
@click="selectImage(item.url || item.data, i)" |
||||
/> |
||||
<!-- <template #placeholder> --> |
||||
<!-- <v-skeleton-loader type="image" :height="active ? 33 : 22" :width="active ? 33 : 22" /> --> |
||||
<!-- </template> --> |
||||
<v-icon v-else-if="item.icon" :size="active ? 33 : 22" v-on="on" @click="openUrl(item.url || item.data, '_blank')"> |
||||
{{ item.icon }} |
||||
</v-icon> |
||||
<v-icon v-else :size="active ? 33 : 22" v-on="on" @click="openUrl(item.url || item.data, '_blank')"> mdi-file </v-icon> |
||||
<!-- </template> --> |
||||
<!-- <span>{{ item.title }}</span> --> |
||||
<!-- </v-tooltip> --> |
||||
</div> |
||||
</div> |
||||
<!-- todo: hide or toggle based on ancestor --> |
||||
<div class="add d-flex align-center justify-center px-1 nc-attachment-add" @click="addFile"> |
||||
<v-icon v-if="uploading" small color="primary" class="nc-attachment-add-spinner"> mdi-loading mdi-spin</v-icon> |
||||
<!-- <v-btn v-else-if="isForm" outlined x-small color="" text class="nc-attachment-add-btn"> |
||||
<v-icon x-small color="" icon="MaterialPlusIcon"> mdi-plus </v-icon> |
||||
Attachment |
||||
</v-btn> |
||||
<v-icon small color="primary nc-attachment-add-icon"> |
||||
mdi-plus |
||||
</v-icon> --> |
||||
<MaterialPlusIcon /> |
||||
</div> |
||||
|
||||
<v-spacer /> |
||||
|
||||
<MaterialArrowExpandIcon @click.stop="dialog = true" /> |
||||
<!-- <v-icon class="expand-icon mr-1" x-small color="primary" @click.stop="dialog = true"> mdi-arrow-expand </v-icon> --> |
||||
</div> |
||||
|
||||
<input ref="fileInput" type="file" multiple class="d-none" @change="onFileSelection" /> |
||||
</div> |
||||
</template> |
||||
|
||||
<style scoped lang="scss"> |
||||
.thumbnail { |
||||
height: 30px; |
||||
width: 30px; |
||||
margin: 2px; |
||||
border-radius: 4px; |
||||
|
||||
img { |
||||
max-height: 33px; |
||||
max-width: 33px; |
||||
} |
||||
} |
||||
|
||||
.expand-icon { |
||||
margin-left: 8px; |
||||
border-radius: 2px; |
||||
transition: 0.3s background-color; |
||||
} |
||||
|
||||
.expand-icon:hover { |
||||
background-color: var(--v-primary-lighten4); |
||||
} |
||||
|
||||
/*.img-container { |
||||
margin: 0 -2px; |
||||
} |
||||
|
||||
.no-overflow { |
||||
overflow: hidden; |
||||
} |
||||
|
||||
.add { |
||||
transition: 0.2s background-color; |
||||
!*background-color: #666666ee;*! |
||||
border-radius: 4px; |
||||
height: 33px; |
||||
margin: 5px 2px; |
||||
} |
||||
|
||||
.add:hover { |
||||
!*background-color: #66666699;*! |
||||
} |
||||
|
||||
.thumbnail { |
||||
height: 99px; |
||||
width: 99px; |
||||
margin: 2px; |
||||
border-radius: 4px; |
||||
} |
||||
|
||||
.thumbnail img { |
||||
!*max-height: 33px;*! |
||||
max-width: 99px; |
||||
} |
||||
|
||||
.main { |
||||
min-height: 20px; |
||||
position: relative; |
||||
height: auto; |
||||
} |
||||
|
||||
.expand-icon { |
||||
margin-left: 8px; |
||||
border-radius: 2px; |
||||
!*opacity: 0;*! |
||||
transition: 0.3s background-color; |
||||
} |
||||
|
||||
.expand-icon:hover { |
||||
!*opacity: 1;*! |
||||
background-color: var(--v-primary-lighten4); |
||||
} |
||||
|
||||
.modal-thumbnail img { |
||||
height: 50px; |
||||
max-width: 100%; |
||||
border-radius: 4px; |
||||
} |
||||
|
||||
.modal-thumbnail { |
||||
position: relative; |
||||
margin: 10px 10px; |
||||
} |
||||
|
||||
.remove-icon { |
||||
position: absolute; |
||||
top: 5px; |
||||
right: 5px; |
||||
} |
||||
|
||||
.modal-thumbnail-card { |
||||
.download-icon { |
||||
position: absolute; |
||||
bottom: 5px; |
||||
right: 5px; |
||||
opacity: 0; |
||||
transition: 0.4s opacity; |
||||
} |
||||
|
||||
&:hover .download-icon { |
||||
opacity: 1; |
||||
} |
||||
} |
||||
|
||||
.image-overlay-container { |
||||
max-height: 100vh; |
||||
overflow-y: auto; |
||||
position: relative; |
||||
} |
||||
|
||||
.image-overlay-container .close-icon { |
||||
position: fixed; |
||||
top: 15px; |
||||
right: 15px; |
||||
} |
||||
|
||||
.overlay-thumbnail { |
||||
transition: 0.4s transform, 0.4s opacity; |
||||
opacity: 0.5; |
||||
} |
||||
|
||||
.overlay-thumbnail.active { |
||||
transform: scale(1.4); |
||||
opacity: 1; |
||||
} |
||||
|
||||
.overlay-thumbnail:hover { |
||||
opacity: 1; |
||||
} |
||||
|
||||
.modal-title { |
||||
text-overflow: ellipsis; |
||||
white-space: nowrap; |
||||
width: 100%; |
||||
overflow: hidden; |
||||
} |
||||
|
||||
.modal-thumbnail-card { |
||||
transition: 0.4s transform; |
||||
} |
||||
|
||||
.modal-thumbnail-card:hover { |
||||
transform: scale(1.05); |
||||
} |
||||
|
||||
.drop-overlay { |
||||
z-index: 5; |
||||
position: absolute; |
||||
width: 100%; |
||||
height: 100%; |
||||
left: 0; |
||||
right: 0; |
||||
top: 0; |
||||
bottom: 5px; |
||||
background: #aaaaaa44; |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
pointer-events: none; |
||||
} |
||||
|
||||
.expand-icon { |
||||
opacity: 0; |
||||
transition: 0.4s opacity; |
||||
} |
||||
|
||||
.main:hover .expand-icon { |
||||
opacity: 1; |
||||
}*/ |
||||
</style> |
||||
@ -0,0 +1,148 @@
|
||||
<script lang="ts" setup> |
||||
import { onKeyDown } from '@vueuse/core' |
||||
import { useAttachmentCell } from './utils' |
||||
import { isImage } from '~/utils' |
||||
import { computed, onClickOutside, ref, watch } from '#imports' |
||||
import MaterialSymbolsArrowCircleRightRounded from '~icons/material-symbols/arrow-circle-right-rounded' |
||||
import MaterialSymbolsArrowCircleLeftRounded from '~icons/material-symbols/arrow-circle-left-rounded' |
||||
import MdiCloseCircle from '~icons/mdi/close-circle' |
||||
|
||||
const { selectedImage, visibleItems, downloadFile } = useAttachmentCell()! |
||||
|
||||
const carouselRef = ref() |
||||
|
||||
const imageItems = computed(() => visibleItems.value.filter((item) => isImage(item.title, item.mimetype))) |
||||
|
||||
/** navigate to previous image on button click */ |
||||
onKeyDown( |
||||
(e) => ['Left', 'ArrowLeft', 'A'].includes(e.key), |
||||
() => { |
||||
if (carouselRef.value) carouselRef.value.prev() |
||||
}, |
||||
) |
||||
|
||||
/** navigate to next image on button click */ |
||||
onKeyDown( |
||||
(e) => ['Right', 'ArrowRight', 'D'].includes(e.key), |
||||
() => { |
||||
if (carouselRef.value) carouselRef.value.next() |
||||
}, |
||||
) |
||||
|
||||
/** set our selected image when slide changes */ |
||||
function onSlideChange(index: number) { |
||||
selectedImage.value = imageItems.value[index] |
||||
} |
||||
|
||||
/** set our carousel ref and move to initial slide */ |
||||
const setCarouselRef = (el: Element) => { |
||||
carouselRef.value = el |
||||
|
||||
carouselRef.value?.goTo( |
||||
imageItems.value.findIndex((item) => item === selectedImage.value), |
||||
true, |
||||
) |
||||
} |
||||
|
||||
/** close overlay view when clicking outside of image */ |
||||
onClickOutside(carouselRef, () => { |
||||
selectedImage.value = false |
||||
}) |
||||
</script> |
||||
|
||||
<template> |
||||
<general-overlay v-model="selectedImage"> |
||||
<template v-if="selectedImage"> |
||||
<div class="overflow-hidden p-12 text-center relative"> |
||||
<div class="text-white group absolute top-5 right-5"> |
||||
<MdiCloseCircle class="group-hover:text-red-500 cursor-pointer text-4xl" @click.stop="selectedImage = false" /> |
||||
</div> |
||||
|
||||
<div |
||||
class="select-none group hover:ring active:ring-pink-500 cursor-pointer leading-8 inline-block px-3 py-1 bg-gray-300 text-white mb-4 text-center rounded shadow" |
||||
@click.stop="downloadFile(selectedImage)" |
||||
> |
||||
<h3 class="group-hover:text-primary">{{ selectedImage && selectedImage.title }}</h3> |
||||
</div> |
||||
|
||||
<a-carousel |
||||
v-if="!!selectedImage" |
||||
:ref="setCarouselRef" |
||||
dots-class="slick-dots slick-thumb" |
||||
:after-change="onSlideChange" |
||||
arrows |
||||
> |
||||
<template #prevArrow> |
||||
<div class="custom-slick-arrow left-2 z-1"> |
||||
<MaterialSymbolsArrowCircleLeftRounded class="bg-white rounded-full" /> |
||||
</div> |
||||
</template> |
||||
|
||||
<template #nextArrow> |
||||
<div class="custom-slick-arrow !right-2 z-1"> |
||||
<MaterialSymbolsArrowCircleRightRounded class="bg-white rounded-full" /> |
||||
</div> |
||||
</template> |
||||
|
||||
<template #customPaging="props"> |
||||
<a> |
||||
<nuxt-img |
||||
class="!block" |
||||
:alt="imageItems[props.i].title || `#${props.i}`" |
||||
:src="imageItems[props.i].url || imageItems[props.i].data" |
||||
/> |
||||
</a> |
||||
</template> |
||||
|
||||
<div v-for="item of imageItems" :key="item.url"> |
||||
<div |
||||
:style="{ backgroundImage: `url('${item.url}')` }" |
||||
class="min-w-70vw min-h-70vh w-full h-full bg-contain bg-center bg-no-repeat" |
||||
/> |
||||
</div> |
||||
</a-carousel> |
||||
</div> |
||||
</template> |
||||
</general-overlay> |
||||
</template> |
||||
|
||||
<style scoped> |
||||
.ant-carousel :deep(.slick-dots) { |
||||
@apply relative mt-4; |
||||
} |
||||
|
||||
.ant-carousel :deep(.slick-slide) { |
||||
@apply w-full; |
||||
} |
||||
|
||||
.ant-carousel :deep(.slick-slide img) { |
||||
@apply border-1 m-auto; |
||||
} |
||||
|
||||
.ant-carousel :deep(.slick-thumb) { |
||||
@apply bottom-2; |
||||
} |
||||
|
||||
.ant-carousel :deep(.slick-thumb li) { |
||||
@apply w-[60px] h-[45px]; |
||||
} |
||||
|
||||
.ant-carousel :deep(.slick-thumb li img) { |
||||
@apply w-full h-full block; |
||||
filter: grayscale(100%); |
||||
} |
||||
|
||||
.ant-carousel :deep .slick-thumb li.slick-active img { |
||||
filter: grayscale(0%); |
||||
} |
||||
|
||||
.ant-carousel :deep(.slick-arrow.custom-slick-arrow) { |
||||
@apply text-4xl text-white hover:text-primary active:text-pink-500 opacity-100 cursor-pointer z-1; |
||||
} |
||||
.ant-carousel :deep(.custom-slick-arrow:before) { |
||||
display: none; |
||||
} |
||||
.ant-carousel :deep(.custom-slick-arrow:hover) { |
||||
opacity: 0.5; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,211 @@
|
||||
<script lang="ts" setup> |
||||
import { onKeyDown } from '@vueuse/core' |
||||
import { useAttachmentCell } from './utils' |
||||
import { useSortable } from './sort' |
||||
import { ref, useDropZone, useUIPermission } from '#imports' |
||||
import { isImage, openLink } from '~/utils' |
||||
import MaterialSymbolsAttachFile from '~icons/material-symbols/attach-file' |
||||
import MdiCloseCircle from '~icons/mdi/close-circle' |
||||
import MdiDownload from '~icons/mdi/download' |
||||
import MaterialSymbolsFileCopyOutline from '~icons/material-symbols/file-copy-outline' |
||||
import IcOutlineInsertDriveFile from '~icons/ic/outline-insert-drive-file' |
||||
|
||||
const { isUIAllowed } = useUIPermission() |
||||
|
||||
const { |
||||
open, |
||||
isLoading, |
||||
isPublicGrid, |
||||
isForm, |
||||
isReadonly, |
||||
visibleItems, |
||||
modalVisible, |
||||
column, |
||||
FileIcon, |
||||
removeFile, |
||||
onDrop, |
||||
downloadFile, |
||||
updateModelValue, |
||||
selectedImage, |
||||
} = useAttachmentCell()! |
||||
|
||||
// todo: replace placeholder var |
||||
const isLocked = ref(false) |
||||
|
||||
const dropZoneRef = ref<HTMLDivElement>() |
||||
|
||||
const sortableRef = ref<HTMLDivElement>() |
||||
|
||||
const { dragging } = useSortable(sortableRef, visibleItems, updateModelValue, isReadonly) |
||||
|
||||
const { isOverDropZone } = useDropZone(dropZoneRef, onDrop) |
||||
|
||||
onKeyDown('Escape', () => { |
||||
modalVisible.value = false |
||||
isOverDropZone.value = false |
||||
}) |
||||
</script> |
||||
|
||||
<template> |
||||
<a-modal v-model:visible="modalVisible" class="nc-attachment-modal" width="80%" :footer="null"> |
||||
<template #title> |
||||
<div class="flex gap-4"> |
||||
<div |
||||
v-if="!isReadonly && (isForm || isUIAllowed('tableAttachment')) && !isPublicGrid && !isLocked" |
||||
class="nc-attach-file group" |
||||
@click="open" |
||||
> |
||||
<MaterialSymbolsAttachFile class="transform group-hover:(text-pink-500 scale-120)" /> |
||||
Attach File |
||||
</div> |
||||
|
||||
<div class="flex items-center gap-2"> |
||||
<div v-if="isReadonly" class="text-gray-400">[Readonly]</div> |
||||
Viewing Attachments of |
||||
<div class="font-semibold underline">{{ column.title }}</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<div ref="dropZoneRef"> |
||||
<template v-if="!isReadonly && !dragging"> |
||||
<general-overlay |
||||
v-model="isOverDropZone" |
||||
inline |
||||
class="text-white ring ring-pink-500 bg-gray-700/75 flex items-center justify-center gap-2 backdrop-blur-xl" |
||||
> |
||||
<MaterialSymbolsFileCopyOutline class="text-pink-500" height="35" width="35" /> |
||||
<div class="text-white text-3xl">Drop here</div> |
||||
</general-overlay> |
||||
</template> |
||||
|
||||
<div ref="sortableRef" :class="{ dragging }" class="grid grid-cols-2 md:grid-cols-3 xl:grid-cols-4 gap-6 relative p-6"> |
||||
<div v-for="(item, i) of visibleItems" :key="`${item.title}-${i}`" class="flex flex-col gap-1"> |
||||
<a-card class="nc-attachment-item group"> |
||||
<a-tooltip v-if="!isReadonly"> |
||||
<template #title> Remove File </template> |
||||
|
||||
<MdiCloseCircle |
||||
v-if="isUIAllowed('tableAttachment') && !isPublicGrid && !isLocked" |
||||
class="nc-attachment-remove" |
||||
@click.stop="removeFile(i)" |
||||
/> |
||||
</a-tooltip> |
||||
|
||||
<a-tooltip placement="bottom"> |
||||
<template #title> Download file </template> |
||||
|
||||
<div class="nc-attachment-download group-hover:(opacity-100)"> |
||||
<MdiDownload @click.stop="downloadFile(item)" /> |
||||
</div> |
||||
</a-tooltip> |
||||
|
||||
<div |
||||
:class="[dragging ? 'cursor-move' : 'cursor-pointer']" |
||||
class="nc-attachment h-full w-full flex items-center justify-center" |
||||
> |
||||
<div |
||||
v-if="isImage(item.title, item.mimetype)" |
||||
:style="{ backgroundImage: `url('${item.url}')` }" |
||||
class="w-full h-full bg-contain bg-center bg-no-repeat" |
||||
@click.stop="() => (selectedImage = item) && (modalVisible = false)" |
||||
/> |
||||
|
||||
<component |
||||
:is="FileIcon(item.icon)" |
||||
v-else-if="item.icon" |
||||
height="150" |
||||
width="150" |
||||
@click.stop="openLink(item.url || item.data)" |
||||
/> |
||||
|
||||
<IcOutlineInsertDriveFile v-else height="150" width="150" @click.stop="openLink(item.url || item.data)" /> |
||||
</div> |
||||
</a-card> |
||||
|
||||
<div class="truncate" :title="item.title"> |
||||
{{ item.title }} |
||||
</div> |
||||
</div> |
||||
|
||||
<div v-if="isLoading" class="flex flex-col gap-1"> |
||||
<a-card class="nc-attachment-item group"> |
||||
<div class="nc-attachment h-full w-full flex items-center justify-center"> |
||||
<a-skeleton-image class /> |
||||
</div> |
||||
</a-card> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</a-modal> |
||||
</template> |
||||
|
||||
<style lang="scss"> |
||||
.nc-attachment-modal { |
||||
.nc-attach-file { |
||||
@apply select-none cursor-pointer color-transition flex items-center gap-1 border-1 p-2 rounded |
||||
@apply hover:(bg-primary/10 text-primary ring); |
||||
@apply active:(ring-pink-500 bg-primary/20); |
||||
} |
||||
|
||||
.nc-attachment-item { |
||||
@apply !h-2/3 !min-h-[200px] flex items-center justify-center relative; |
||||
|
||||
@supports (-moz-appearance: none) { |
||||
@apply hover:border-0; |
||||
} |
||||
|
||||
&::after { |
||||
@apply pointer-events-none rounded absolute top-0 left-0 right-0 bottom-0 transition-all duration-150 ease-in-out; |
||||
content: ''; |
||||
} |
||||
|
||||
@supports (-moz-appearance: none) { |
||||
&:hover::after { |
||||
@apply ring shadow transform scale-103; |
||||
} |
||||
|
||||
&:active::after { |
||||
@apply ring ring-pink-500 shadow transform scale-103; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.nc-attachment-download { |
||||
@apply bg-white absolute bottom-2 right-2; |
||||
@apply transition-opacity duration-150 ease-in opacity-0 hover:ring; |
||||
@apply cursor-pointer rounded shadow flex items-center p-1 border-1; |
||||
@apply active:(ring border-0 ring-pink-500); |
||||
} |
||||
|
||||
.nc-attachment-remove { |
||||
@apply absolute top-2 right-2 bg-white; |
||||
@apply hover:(ring ring-red-500); |
||||
@apply cursor-pointer rounded-full border-2; |
||||
@apply active:(ring border-0 ring-red-500); |
||||
} |
||||
|
||||
.ant-card-body { |
||||
@apply !p-2 w-full h-full; |
||||
} |
||||
|
||||
.ant-modal-body { |
||||
@apply !p-0; |
||||
} |
||||
|
||||
.ghost, |
||||
.ghost > * { |
||||
@apply !pointer-events-none; |
||||
} |
||||
|
||||
.dragging { |
||||
.nc-attachment-item { |
||||
@apply !pointer-events-none; |
||||
} |
||||
|
||||
.ant-tooltip { |
||||
@apply !hidden; |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,168 @@
|
||||
<script setup lang="ts"> |
||||
import { onKeyDown } from '@vueuse/core' |
||||
import { useProvideAttachmentCell } from './utils' |
||||
import Modal from './Modal.vue' |
||||
import { useSortable } from './sort' |
||||
import Carousel from './Carousel.vue' |
||||
import { onMounted, ref, useDropZone, watch } from '#imports' |
||||
import { isImage, openLink } from '~/utils' |
||||
import MaterialSymbolsAttachFile from '~icons/material-symbols/attach-file' |
||||
import MaterialArrowExpandIcon from '~icons/mdi/arrow-expand' |
||||
import MaterialSymbolsFileCopyOutline from '~icons/material-symbols/file-copy-outline' |
||||
import MdiReload from '~icons/mdi/reload' |
||||
import IcOutlineInsertDriveFile from '~icons/ic/outline-insert-drive-file' |
||||
|
||||
interface Props { |
||||
modelValue: string | Record<string, any>[] | null |
||||
} |
||||
|
||||
interface Emits { |
||||
(event: 'update:modelValue', value: string | Record<string, any>): void |
||||
} |
||||
|
||||
const { modelValue } = defineProps<Props>() |
||||
|
||||
const emits = defineEmits<Emits>() |
||||
|
||||
const dropZoneRef = ref<HTMLTableDataCellElement>() |
||||
|
||||
const sortableRef = ref<HTMLDivElement>() |
||||
|
||||
const { column, modalVisible, attachments, visibleItems, onDrop, isLoading, open, FileIcon, selectedImage, isReadonly } = |
||||
useProvideAttachmentCell(updateModelValue) |
||||
|
||||
const { dragging } = useSortable(sortableRef, visibleItems, updateModelValue, isReadonly) |
||||
|
||||
const { isOverDropZone } = useDropZone(dropZoneRef, onDrop) |
||||
|
||||
/** on new value, reparse our stored attachments */ |
||||
watch( |
||||
() => modelValue, |
||||
(nextModel) => { |
||||
if (nextModel) { |
||||
attachments.value = ((typeof nextModel === 'string' ? JSON.parse(nextModel) : nextModel) || []).filter(Boolean) |
||||
} |
||||
}, |
||||
{ immediate: true }, |
||||
) |
||||
|
||||
/** updates attachments array for autosave */ |
||||
function updateModelValue(data: string | Record<string, any>) { |
||||
emits('update:modelValue', typeof data !== 'string' ? JSON.stringify(data) : data) |
||||
} |
||||
|
||||
/** Close modal on escape press, disable dropzone as well */ |
||||
onKeyDown('Escape', () => { |
||||
modalVisible.value = false |
||||
isOverDropZone.value = false |
||||
}) |
||||
|
||||
/** if possible, on mounted we try to fetch the relevant `td` cell to use as a dropzone */ |
||||
onMounted(() => { |
||||
if (typeof document !== 'undefined') { |
||||
dropZoneRef.value = document.querySelector(`td[data-col="${column.id}"]`) as HTMLTableDataCellElement |
||||
} |
||||
}) |
||||
</script> |
||||
|
||||
<template> |
||||
<div class="nc-attachment-cell relative flex-1 color-transition flex items-center justify-between gap-1"> |
||||
<Carousel /> |
||||
|
||||
<template v-if="!isReadonly && !dragging && dropZoneRef"> |
||||
<general-overlay |
||||
v-model="isOverDropZone" |
||||
inline |
||||
:target="`td[data-col='${column.id}']`" |
||||
class="text-white text-lg ring ring-pink-500 bg-gray-700/75 flex items-center justify-center gap-2 backdrop-blur-xl" |
||||
> |
||||
<MaterialSymbolsFileCopyOutline class="text-pink-500" /> Drop here |
||||
</general-overlay> |
||||
</template> |
||||
|
||||
<div |
||||
v-if="!isReadonly" |
||||
:class="{ 'mx-auto px-4': !visibleItems.length }" |
||||
class="group flex gap-1 items-center active:ring rounded border-1 p-1 hover:bg-primary/10" |
||||
@click.stop="open" |
||||
> |
||||
<MdiReload v-if="isLoading" :class="{ 'animate-infinite animate-spin': isLoading }" /> |
||||
|
||||
<a-tooltip v-else placement="bottom"> |
||||
<template #title> Click or drop a file into cell </template> |
||||
|
||||
<div class="flex items-center gap-2"> |
||||
<MaterialSymbolsAttachFile class="transform group-hover:(text-pink-500 scale-120)" /> |
||||
|
||||
<div v-if="!visibleItems.length" class="group-hover:text-primary">Add file(s)</div> |
||||
</div> |
||||
</a-tooltip> |
||||
</div> |
||||
|
||||
<template v-if="visibleItems.length"> |
||||
<div ref="sortableRef" :class="{ dragging }" class="flex flex-wrap gap-2 p-1 scrollbar-thin-primary"> |
||||
<div |
||||
v-for="(item, i) of visibleItems" |
||||
:id="item.url" |
||||
:key="item.url || item.title" |
||||
style="flex: 1 1 50px" |
||||
:class="isImage(item.title, item.mimetype) ? '' : 'border-1 rounded'" |
||||
class="nc-attachment flex items-center justify-center" |
||||
> |
||||
<a-tooltip placement="bottom"> |
||||
<template #title> |
||||
<div class="text-center w-full">{{ item.title }}</div> |
||||
</template> |
||||
|
||||
<nuxt-img |
||||
v-if="isImage(item.title, item.mimetype)" |
||||
placeholder |
||||
width="150" |
||||
height="150" |
||||
:alt="item.title || `#${i}`" |
||||
:src="item.url || item.data" |
||||
class="ring-1 ring-gray-300 rounded" |
||||
@click="selectedImage = item" |
||||
/> |
||||
|
||||
<component :is="FileIcon(item.icon)" v-else-if="item.icon" @click="openLink(item.url || item.data)" /> |
||||
|
||||
<IcOutlineInsertDriveFile v-else @click.stop="openLink(item.url || item.data)" /> |
||||
</a-tooltip> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="group flex gap-1 items-center border-1 active:ring rounded p-1 hover:bg-primary/10"> |
||||
<MdiReload v-if="isLoading" :class="{ 'animate-infinite animate-spin': isLoading }" /> |
||||
|
||||
<a-tooltip v-else placement="bottom"> |
||||
<template #title> View attachments </template> |
||||
|
||||
<MaterialArrowExpandIcon |
||||
class="select-none transform group-hover:(text-pink-500 scale-120)" |
||||
@click.stop="modalVisible = true" |
||||
/> |
||||
</a-tooltip> |
||||
</div> |
||||
</template> |
||||
|
||||
<Modal /> |
||||
</div> |
||||
</template> |
||||
|
||||
<style lang="scss"> |
||||
.nc-cell { |
||||
.nc-attachment-cell { |
||||
.ghost, |
||||
.ghost > * { |
||||
@apply !pointer-events-none; |
||||
} |
||||
|
||||
.dragging { |
||||
.ant-tooltip { |
||||
@apply !hidden; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,65 @@
|
||||
import type { SortableEvent } from 'sortablejs' |
||||
import Sortable from 'sortablejs' |
||||
import type { MaybeRef } from '@vueuse/core' |
||||
import { watchPostEffect } from '@vue/runtime-core' |
||||
import { unref } from '#imports' |
||||
|
||||
export function useSortable( |
||||
element: MaybeRef<HTMLElement | undefined>, |
||||
items: MaybeRef<any[]>, |
||||
updateModelValue: (data: string | Record<string, any>[]) => void, |
||||
isReadonly: MaybeRef<boolean> = false, |
||||
) { |
||||
let dragging = $ref(false) |
||||
|
||||
function onSortStart(evt: SortableEvent) { |
||||
evt.stopImmediatePropagation() |
||||
evt.preventDefault() |
||||
dragging = true |
||||
} |
||||
|
||||
async function onSortEnd(evt: SortableEvent) { |
||||
evt.stopImmediatePropagation() |
||||
evt.preventDefault() |
||||
dragging = false |
||||
|
||||
const _items = unref(items) |
||||
|
||||
if (_items.length < 2) return |
||||
|
||||
const { newIndex = 0, oldIndex = 0 } = evt |
||||
|
||||
if (newIndex === oldIndex) return |
||||
|
||||
_items.splice(newIndex, 0, ..._items.splice(oldIndex, 1)) |
||||
|
||||
updateModelValue(_items) |
||||
} |
||||
|
||||
let sortable: Sortable |
||||
|
||||
// todo: replace with vuedraggable
|
||||
const initSortable = (el: HTMLElement) => { |
||||
sortable = new Sortable(el, { |
||||
handle: '.nc-attachment', |
||||
ghostClass: 'ghost', |
||||
onStart: onSortStart, |
||||
onEnd: onSortEnd, |
||||
}) |
||||
} |
||||
|
||||
watchPostEffect((onCleanup) => { |
||||
const _element = unref(element) |
||||
|
||||
onCleanup(() => { |
||||
if (_element && sortable) sortable.destroy() |
||||
}) |
||||
|
||||
if (_element && !unref(isReadonly)) initSortable(_element) |
||||
}) |
||||
|
||||
return { |
||||
dragging: $$(dragging), |
||||
initSortable, |
||||
} |
||||
} |
||||
@ -0,0 +1,157 @@
|
||||
import { notification } from 'ant-design-vue' |
||||
import FileSaver from 'file-saver' |
||||
import { computed, inject, ref, useApi, useFileDialog, useInjectionState, useProject, watch } from '#imports' |
||||
import { ColumnInj, EditModeInj, MetaInj, ReadonlyInj } from '~/context' |
||||
import { isImage } from '~/utils' |
||||
import { NOCO } from '~/lib' |
||||
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' |
||||
|
||||
export const [useProvideAttachmentCell, useAttachmentCell] = useInjectionState( |
||||
(updateModelValue: (data: string | Record<string, any>[]) => void) => { |
||||
const isReadonly = inject(ReadonlyInj, false) |
||||
|
||||
const isPublicForm = inject('isPublicForm', false) |
||||
|
||||
const isForm = inject('isForm', false) |
||||
|
||||
// todo: replace placeholder var
|
||||
const isPublicGrid = $ref(false) |
||||
|
||||
const meta = inject(MetaInj)! |
||||
|
||||
const column = inject(ColumnInj)! |
||||
|
||||
const editEnabled = inject(EditModeInj, ref(false)) |
||||
|
||||
const storedFiles = ref<{ title: string; file: File }[]>([]) |
||||
|
||||
const attachments = ref<File[]>([]) |
||||
|
||||
const modalVisible = ref(false) |
||||
|
||||
const selectedImage = ref() |
||||
|
||||
const { project } = useProject() |
||||
|
||||
const { api, isLoading } = useApi() |
||||
|
||||
const { files, open } = useFileDialog() |
||||
|
||||
/** remove a file from our stored attachments (either locally stored or saved ones) */ |
||||
function removeFile(i: number) { |
||||
if (isPublicForm) { |
||||
storedFiles.value.splice(i, 1) |
||||
|
||||
updateModelValue(storedFiles.value.map((storedFile) => storedFile.file)) |
||||
} else { |
||||
attachments.value.splice(i, 1) |
||||
updateModelValue(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 || isPublicGrid) return |
||||
|
||||
if (isPublicForm) { |
||||
storedFiles.value.push( |
||||
...Array.from(selectedFiles).map((file) => { |
||||
const res = { file, title: file.name } |
||||
if (isImage(file.name, (file as any).mimetype)) { |
||||
const reader = new FileReader() |
||||
reader.readAsDataURL(file) |
||||
} |
||||
return res |
||||
}), |
||||
) |
||||
|
||||
return updateModelValue(storedFiles.value.map((storedFile) => storedFile.file)) |
||||
} |
||||
|
||||
const newAttachments = [] |
||||
|
||||
for (const file of selectedFiles) { |
||||
try { |
||||
const data = await api.storage.upload( |
||||
{ |
||||
path: [NOCO, project.value.title, meta.value.title, column.title].join('/'), |
||||
}, |
||||
{ |
||||
files: file, |
||||
json: '{}', |
||||
}, |
||||
) |
||||
|
||||
newAttachments.push(...data) |
||||
} catch (e: any) { |
||||
notification.error({ |
||||
message: e.message || 'Some internal error occurred', |
||||
}) |
||||
} |
||||
} |
||||
|
||||
updateModelValue([...attachments.value, ...newAttachments]) |
||||
} |
||||
|
||||
/** 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<string, any>) { |
||||
FileSaver.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 isPublicForm status */ |
||||
const visibleItems = computed<any[]>(() => (isPublicForm ? storedFiles.value : attachments.value) || ([] as any[])) |
||||
|
||||
watch(files, (nextFiles) => nextFiles && onFileSelect(nextFiles)) |
||||
|
||||
return { |
||||
attachments, |
||||
storedFiles, |
||||
visibleItems, |
||||
isPublicForm, |
||||
isForm, |
||||
isPublicGrid, |
||||
isReadonly, |
||||
meta, |
||||
column, |
||||
editEnabled, |
||||
isLoading, |
||||
api, |
||||
open, |
||||
onDrop, |
||||
modalVisible, |
||||
FileIcon, |
||||
removeFile, |
||||
downloadFile, |
||||
updateModelValue, |
||||
selectedImage, |
||||
} |
||||
}, |
||||
'attachmentCell', |
||||
) |
||||
@ -0,0 +1,58 @@
|
||||
<script lang="ts" setup> |
||||
import { onKeyDown } from '@vueuse/core' |
||||
import type { TeleportProps } from '@vue/runtime-core' |
||||
import { useVModel, watch } from '#imports' |
||||
|
||||
interface Props { |
||||
modelValue?: any |
||||
/** if true, overlay will use `position: absolute` instead of `position: fixed` */ |
||||
inline?: boolean |
||||
/** target to teleport to */ |
||||
target?: TeleportProps['to'] |
||||
teleportDisabled?: TeleportProps['disabled'] |
||||
transition?: boolean |
||||
} |
||||
|
||||
interface Emits { |
||||
(event: 'update:modelValue', value: boolean): void |
||||
(event: 'close'): void |
||||
(event: 'open'): void |
||||
} |
||||
|
||||
const { transition = true, teleportDisabled = false, inline = false, target, ...rest } = defineProps<Props>() |
||||
|
||||
const emits = defineEmits<Emits>() |
||||
|
||||
const vModel = useVModel(rest, 'modelValue', emits) |
||||
|
||||
onKeyDown('Escape', () => { |
||||
vModel.value = false |
||||
}) |
||||
|
||||
watch(vModel, (nextVal) => { |
||||
if (nextVal) emits('open') |
||||
else emits('close') |
||||
}) |
||||
</script> |
||||
|
||||
<script lang="ts"> |
||||
export default { |
||||
inheritAttrs: false, |
||||
} |
||||
</script> |
||||
|
||||
<template> |
||||
<teleport :disabled="teleportDisabled || (inline && !target)" :to="target || 'body'"> |
||||
<div |
||||
v-bind="$attrs" |
||||
:class="[ |
||||
vModel ? 'opacity-100' : 'opacity-0 pointer-events-none', |
||||
inline ? 'absolute' : 'fixed', |
||||
transition ? 'transition-opacity duration-200 ease-in-out' : '', |
||||
]" |
||||
class="z-100 top-0 left-0 bottom-0 right-0 bg-gray-700/75" |
||||
> |
||||
<slot :is-open="vModel" /> |
||||
</div> |
||||
</teleport> |
||||
</template> |
||||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in new issue