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

feat(gui-v2,deps): update attachment cell styles 

# What's changed?

* add a "button" into empty cell to add items
* add a dropzone to cell
pull/2972/head
braks 2 years ago
parent
380675d152
commit
1189ec02eb
4 changed files with 93 additions and 93 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. 178
      packages/nc-gui-v2/components/cell/Attachment.vue
  2. 2
      packages/nc-gui-v2/components/smartsheet/Cell.vue
  3. 2
      packages/nc-gui-v2/components/smartsheet/Grid.vue
  4. 4
      packages/nc-gui-v2/composables/useViewColumns.ts

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

@ -1,15 +1,15 @@
<script setup lang="ts">
import { useToast } from 'vue-toastification'
import { inject, reactive, ref, useProject, watchEffect } from '#imports'
import { useNuxtApp } from '#app'
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 MaterialPlusIcon from '~icons/mdi/plus'
import MaterialSymbolsAttachFile from '~icons/material-symbols/attach-file'
import MaterialArrowExpandIcon from '~icons/mdi/arrow-expand'
import MaterialSymbolsFileCopyOutline from '~icons/material-symbols/file-copy-outline'
interface Props {
modelValue: string | any[] | null
modelValue: string | Record<string, any>[] | null
}
const { modelValue } = defineProps<Props>()
@ -17,27 +17,44 @@ 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 meta = inject(MetaInj)!
const column = inject(ColumnInj)!
const editEnabled = inject(EditModeInj, ref(false))
const localFilesState = reactive([])
const attachments = ref([])
const uploading = ref(false)
const fileInput = ref<HTMLInputElement>()
const { $api } = useNuxtApp()
const dropZoneRef = ref<HTMLDivElement>()
const { api } = useApi()
const { project } = useProject()
const toast = useToast()
const { files, open, reset } = useFileDialog()
watchEffect(() => {
if (modelValue) {
attachments.value = ((typeof modelValue === 'string' ? JSON.parse(modelValue) : modelValue) || []).filter(Boolean)
const { isOverDropZone } = useDropZone(dropZoneRef, onDrop)
watch(
() => modelValue,
(nextModel) => {
if (nextModel) {
attachments.value = ((typeof nextModel === 'string' ? JSON.parse(nextModel) : nextModel) || []).filter(Boolean)
}
},
)
function onDrop(droppedFiles: File[] | null) {
if (droppedFiles) {
// set files
console.log(droppedFiles)
}
})
}
const selectImage = (file: any, i: unknown) => {
// todo: implement
@ -47,11 +64,9 @@ const openUrl = (url: string, target = '_blank') => {
window.open(url, target)
}
const addFile = () => {
fileInput.value?.click()
}
const onFileSelection = async (e: unknown) => {
if (!files.value) return
// if (this.isPublicGrid) {
// return
// }
@ -76,90 +91,85 @@ const onFileSelection = async (e: unknown) => {
// return
// }
// todo : move to com
uploading.value = true
const newAttachments = []
for (const file of fileInput.value?.files ?? []) {
for (const file of files.value) {
try {
const data = await $api.storage.upload(
const data = await api.storage.upload(
{
path: [NOCO, project.value.title, meta?.value?.title, column?.title].join('/'),
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
notification.error({
message: e.message || 'Some internal error occurred',
})
}
}
uploading.value = false
emit('update:modelValue', JSON.stringify([...attachments.value, ...newAttachments]))
}
watch(files, console.log)
const items = computed(() => (isPublicForm ? files.value : attachments.value) || [])
</script>
<template>
<div class="h-full w-full">
<div class="flex items-center img-container">
<div class="d-flex no-overflow">
<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
v-for="(item, i) in isPublicForm ? localFilesState : attachments"
:key="item.url || item.title"
class="thumbnail align-center justify-center d-flex"
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-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> -->
<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">
<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)"
/>
<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>
</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>
<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="hidden" @change="onFileSelection" />
<!-- 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>
<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>
</a-tooltip>
</div>
<MaterialArrowExpandIcon v-if="items.length" @click.stop />
</template>
</div>
</div>
</template>
@ -175,14 +185,4 @@ const onFileSelection = async (e: unknown) => {
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);
}
</style>

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

@ -89,7 +89,7 @@ div {
}
.nc-cell {
position: relative;
@apply relative w-full h-full;
}
.nc-locked-overlay {

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

@ -177,7 +177,7 @@ if (meta) useProvideColumnCreateStore(meta)
padding: 0 5px;
& > * {
@apply flex align-center h-auto;
@apply flex items-center;
}
overflow: hidden;
}

4
packages/nc-gui-v2/composables/useViewColumns.ts
Unescape View File

@ -28,8 +28,8 @@ export function useViewColumns(
if (!meta || !view) return
let order = 1
if (view?.value?.id) {
const data = (await $api.dbViewColumn.list(view?.value?.id)) as any[]
if (view.value?.id) {
const data = (await $api.dbViewColumn.list(view.value.id)) as any[]
const fieldById = data.reduce<Record<string, any>>((acc, curr) => {
curr.show = !!curr.show

Write Preview
Loading…
Cancel
Save