github
/
nocodb
mirror of https://github.com/nocodb/nocodb
1
0
Fork 0
Code Issues Releases Wiki Activity
Browse Source

feat(gui-v2): make attachments list scrollable in cell

pull/2972/head
braks 2 years ago
parent
1189ec02eb
commit
104cfd03c5
3 changed files with 117 additions and 94 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 205
      packages/nc-gui-v2/components/cell/Attachment.vue
  2. 2
      packages/nc-gui-v2/components/smartsheet/Grid.vue
  3. 4
      packages/nc-gui-v2/utils/urlUtils.ts

205
packages/nc-gui-v2/components/cell/Attachment.vue
Unescape View File

@ -3,22 +3,35 @@ import { notification } from 'ant-design-vue'
import { computed, inject, ref, useApi, useDropZone, useFileDialog, useProject, watch } from '#imports'
import { ColumnInj, EditModeInj, MetaInj } from '~/context'
import { NOCO } from '~/lib'
import { isImage } from '~/utils'
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'
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'
interface Props {
modelValue: string | Record<string, any>[] | null
}
interface Emits {
(event: 'update:modelValue', value: string | Record<string, any>): void
}
const { modelValue } = defineProps<Props>()
const emit = defineEmits(['update:modelValue'])
const emits = defineEmits<Emits>()
const isPublicForm = inject('isPublicForm', false)
const isPublicForm = inject<boolean>('isPublicForm', false)
const isForm = inject('isForm', false)
const isForm = inject<boolean>('isForm', false)
// todo: replace placeholder var
const isPublicGrid = $ref(false)
const meta = inject(MetaInj)!
@ -26,13 +39,13 @@ const column = inject(ColumnInj)!
const editEnabled = inject(EditModeInj, ref(false))
const attachments = ref([])
const storedFiles = ref<{ title: string; file: File }[]>([])
const uploading = ref(false)
const attachments = ref<File[]>([])
const dropZoneRef = ref<HTMLDivElement>()
const { api } = useApi()
const { api, isLoading } = useApi()
const { project } = useProject()
@ -47,12 +60,13 @@ watch(
attachments.value = ((typeof nextModel === 'string' ? JSON.parse(nextModel) : nextModel) || []).filter(Boolean)
}
},
{ immediate: true },
)
function onDrop(droppedFiles: File[] | null) {
if (droppedFiles) {
// set files
console.log(droppedFiles)
onFileSelection(droppedFiles)
}
}
@ -60,42 +74,30 @@ const selectImage = (file: any, i: unknown) => {
// todo: implement
}
const openUrl = (url: string, target = '_blank') => {
window.open(url, target)
}
const onFileSelection = async (e: unknown) => {
if (!files.value) return
// 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
// }
uploading.value = true
async function onFileSelection(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
}),
)
emits(
'update:modelValue',
storedFiles.value.map((f) => f.file),
)
}
const newAttachments = []
for (const file of files.value) {
for (const file of selectedFiles) {
try {
const data = await api.storage.upload(
{
@ -115,74 +117,91 @@ const onFileSelection = async (e: unknown) => {
}
}
uploading.value = false
emit('update:modelValue', JSON.stringify([...attachments.value, ...newAttachments]))
emits('update:modelValue', JSON.stringify([...attachments.value, ...newAttachments]))
}
watch(files, console.log)
const items = computed(() => (isPublicForm ? files.value : attachments.value) || [])
watch(files, (nextFiles) => nextFiles && onFileSelection(nextFiles))
const items = computed(() => (isPublicForm ? storedFiles.value : attachments.value) || [])
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
}
}
</script>
<template>
<div class="flex items-center">
<div ref="dropZoneRef" class="flex-1 group color-transition flex items-center p-1 hover:text-primary">
<template v-if="isOverDropZone">
<div ref="dropZoneRef" class="flex-1 color-transition flex items-center justify-between gap-1">
<template v-if="isOverDropZone">
<div
class="w-full h-full flex items-center justify-center p-1 rounded gap-1 bg-gradient-to-t from-primary/10 via-primary/25 to-primary/10 !text-primary"
>
<MaterialSymbolsFileCopyOutline class="text-pink-500" /> Drop here
</div>
</template>
<template v-else>
<div
:class="{ 'mx-auto px-4': !items.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="!items.length" class="group-hover:text-primary">Add file(s)</div>
</div>
</a-tooltip>
</div>
<div class="h-full w-full flex flex-wrap flex-col overflow-x-scroll overflow-y-hidden gap-2 scrollbar-thin-primary py-1">
<div
class="w-full h-full flex items-center justify-center p-1 rounded gap-1 bg-gradient-to-t from-primary/10 via-primary/25 to-primary/10 !text-primary"
v-for="(item, i) of items"
:key="item.url || item.title"
class="flex-auto flex items-center justify-center w-[45px] border-1"
>
<MaterialSymbolsFileCopyOutline class="text-pink-500" /> Drop here
</div>
</template>
<template v-else>
<div class="flex overflow-hidden">
<div v-for="(item, i) of items" :key="item.url || item.title" class="thumbnail align-center justify-center d-flex">
<a-tooltip placement="bottom">
<template #title>
<div class="text-center w-full">{{ item.title }}</div>
</template>
<img
v-if="isImage(item.title, item.mimetype)"
alt="#"
style="max-height: 30px; max-width: 30px"
:alt="item.title || `#${i}`"
:src="item.url || item.data"
@click="selectImage(item.url || item.data, i)"
/>
<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>
</div>
</div>
<!-- todo: hide or toggle based on ancestor -->
<div class="mx-auto flex gap-1 items-center active:ring rounded border-1 py-1 px-4" @click.stop="open">
<v-icon v-if="uploading" small color="primary" class="nc-attachment-add-spinner"> mdi-loading mdi-spin</v-icon>
<component :is="FileIcon(item.icon)" v-else-if="item.icon" @click="openLink(item.url || item.data)" />
<a-tooltip 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="!items.length">Add file(s)</div>
</div>
<IcOutlineInsertDriveFile v-else @click.stop="openLink(item.url || item.data)" />
</a-tooltip>
</div>
</div>
<MaterialArrowExpandIcon v-if="items.length" @click.stop />
</template>
</div>
</div>
</template>
<div v-if="items.length" class="group flex gap-1 items-center active:ring rounded border-1 p-1 hover:bg-primary/10">
<MdiReload v-if="isLoading" :class="{ 'animate-infinite animate-spin': isLoading }" />
<style scoped lang="scss">
.thumbnail {
height: 30px;
width: 30px;
margin: 2px;
border-radius: 4px;
<a-tooltip v-else placement="bottom">
<template #title> View attachments </template>
img {
max-height: 33px;
max-width: 33px;
}
}
</style>
<MaterialArrowExpandIcon class="transform group-hover:(text-pink-500 scale-120)" @click.stop />
</a-tooltip>
</div>
</template>
</div>
</template>

2
packages/nc-gui-v2/components/smartsheet/Grid.vue
Unescape View File

@ -213,7 +213,7 @@ if (meta) useProvideColumnCreateStore(meta)
// todo: replace with css variable
td.active::after {
border: 2px solid #0040bc; /*var(--v-primary-lighten1);*/
@apply border-2 border-solid border-primary;
}
td.active::before {

4
packages/nc-gui-v2/utils/urlUtils.ts
Unescape View File

@ -27,3 +27,7 @@ export const isValidURL = (str: string) => {
/^(?:(?:https?|ftp):\/\/)(?:\S+(?::\S*)?@)?(?:(?!(?:10|127)(?:\.\d{1,3}){3})(?!(?:169\.254|192\.168)(?:\.\d{1,3}){2})(?!172\.(?:1[6-9]|2\d|3[0-1])(?:\.\d{1,3}){2})(?:[1-9]\d?|1\d\d|2[01]\d|22[0-3])(?:\.(?:1?\d{1,2}|2[0-4]\d|25[0-5])){2}(?:\.(?:[1-9]\d?|1\d\d|2[0-4]\d|25[0-4]))|(?:(?:[a-z\u00A1-\uFFFF0-9]-*)*[a-z\u00A1-\uFFFF0-9]+)(?:\.(?:[a-z\u00A1-\uFFFF0-9]-*)*[a-z\u00A1-\uFFFF0-9]+)*(?:\.(?:[a-z\u00A1-\uFFFF]{2,}))\.?)(?::\d{2,5})?(?:[/?#]\S*)?$/i
return !!pattern.test(str)
}
export const openLink = (url: string, target = '_blank') => {
window.open(url, target)
}

Write Preview
Loading…
Cancel
Save