Browse Source

Merge pull request #3501 from nocodb/fix/gallery-attachment-field

fix: gallery view
pull/3506/head
mertmit 2 years ago committed by GitHub
parent
commit
71b5f06f63
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 17
      packages/nc-gui-v2/components/cell/attachment/index.vue
  2. 2
      packages/nc-gui-v2/components/smartsheet/Form.vue
  3. 6
      packages/nc-gui-v2/components/smartsheet/Gallery.vue
  4. 5
      packages/nc-gui-v2/components/smartsheet/Grid.vue
  5. 3
      packages/nc-gui-v2/context/index.ts

17
packages/nc-gui-v2/components/cell/attachment/index.vue

@ -6,6 +6,7 @@ import Modal from './Modal.vue'
import Carousel from './Carousel.vue'
import {
IsFormInj,
IsGalleryInj,
inject,
isImage,
nextTick,
@ -32,6 +33,8 @@ const emits = defineEmits<Emits>()
const isForm = inject(IsFormInj, ref(false))
const isGallery = inject(IsGalleryInj, ref(false))
const attachmentCellRef = ref<HTMLDivElement>()
const sortableRef = ref<HTMLDivElement>()
@ -57,15 +60,21 @@ const currentCellRef = ref()
watch(
[() => rowIndex, isForm],
() => {
if (!rowIndex && isForm.value) {
if (!rowIndex && isForm.value && isGallery.value) {
currentCellRef.value = attachmentCellRef.value
} else {
nextTick(() => {
currentCellRef.value = cellRefs.value.reduceRight((cell, curr) => {
if (!Object.keys(cell).length && curr.dataset.key === `${rowIndex}${column.value.id}`) cell = curr
const nextCell = cellRefs.value.reduceRight((cell, curr) => {
if (!cell && curr.dataset.key === `${rowIndex}${column.value.id}`) cell = curr
return cell
}, {} as HTMLTableDataCellElement)
}, undefined as HTMLTableDataCellElement | undefined)
if (!nextCell) {
currentCellRef.value = attachmentCellRef.value
} else {
currentCellRef.value = nextCell
}
})
}
},

2
packages/nc-gui-v2/components/smartsheet/Form.vue

@ -7,6 +7,7 @@ import type { Permission } from '~/composables/useUIPermission/rolePermissions'
import {
ActiveViewInj,
IsFormInj,
IsGalleryInj,
MetaInj,
computed,
extractSdkResponseErrorMsg,
@ -25,6 +26,7 @@ import {
} from '#imports'
provide(IsFormInj, ref(true))
provide(IsGalleryInj, ref(false))
// todo: generate hideCols based on default values
const hiddenCols = ['created_at', 'updated_at']

6
packages/nc-gui-v2/components/smartsheet/Gallery.vue

@ -8,6 +8,7 @@ import {
ChangePageInj,
FieldsInj,
IsFormInj,
IsGalleryInj,
IsGridInj,
MetaInj,
OpenNewRecordFormHookInj,
@ -42,7 +43,8 @@ const {
const { isUIAllowed } = useUIPermission()
provide(IsFormInj, ref(false))
provide(IsGridInj, false)
provide(IsGalleryInj, ref(true))
provide(IsGridInj, ref(false))
provide(PaginationDataInj, paginationData)
provide(ChangePageInj, changePage)
provide(ReadonlyInj, !isUIAllowed('xcDatatableEditable'))
@ -140,7 +142,7 @@ openNewRecordFormHook?.on(async () => {
<div style="z-index: 1"></div>
</template>
<img
v-for="(attachment, index) in attachments(record).filter((attachment) => attachment.url)"
v-for="(attachment, index) in attachments(record)"
:key="`carousel-${record.row.id}-${index}`"
class="h-52"
:src="attachment.url"

5
packages/nc-gui-v2/components/smartsheet/Grid.vue

@ -8,6 +8,7 @@ import {
ChangePageInj,
FieldsInj,
IsFormInj,
IsGalleryInj,
IsGridInj,
IsLockedInj,
MetaInj,
@ -98,7 +99,9 @@ onMounted(loadGridViewColumns)
provide(IsFormInj, ref(false))
provide(IsGridInj, true)
provide(IsGalleryInj, ref(false))
provide(IsGridInj, ref(true))
provide(PaginationDataInj, paginationData)

3
packages/nc-gui-v2/context/index.ts

@ -15,7 +15,8 @@ export const PaginationDataInj: InjectionKey<ReturnType<typeof useViewData>['pag
Symbol('pagination-data-injection')
export const ChangePageInj: InjectionKey<ReturnType<typeof useViewData>['changePage']> = Symbol('pagination-data-injection')
export const IsFormInj: InjectionKey<Ref<boolean>> = Symbol('is-form-injection')
export const IsGridInj: InjectionKey<boolean> = Symbol('is-grid-injection')
export const IsGridInj: InjectionKey<Ref<boolean>> = Symbol('is-grid-injection')
export const IsGalleryInj: InjectionKey<Ref<boolean>> = Symbol('is-gallery-injection')
export const IsLockedInj: InjectionKey<Ref<boolean>> = Symbol('is-locked-injection')
export const CellValueInj: InjectionKey<Ref<any>> = Symbol('cell-value-injection')
export const ActiveViewInj: InjectionKey<Ref<ViewType>> = Symbol('active-view-injection')

Loading…
Cancel
Save