多维表格
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

535 lines
16 KiB

<script setup lang="ts">
import { onKeyDown } from '@vueuse/core'
import { useProvideAttachmentCell } from './utils'
import { useSortable } from './sort'
interface Props {
modelValue?: string | Record<string, any>[] | null
rowIndex?: number
}
interface Emits {
(event: 'update:modelValue', value: string | Record<string, any>[]): void
}
const { modelValue } = defineProps<Props>()
const emits = defineEmits<Emits>()
const dropZoneInjection = inject(DropZoneRef, ref())
const attachmentCellRef = ref<HTMLDivElement>()
const sortableRef = ref<HTMLDivElement>()
const currentCellRef = inject(CurrentCellInj, dropZoneInjection.value)
const isGallery = inject(IsGalleryInj, ref(false))
const isKanban = inject(IsKanbanInj, ref(false))
const isExpandedForm = inject(IsExpandedFormOpenInj, ref(false))
const isSurveyForm = inject(IsSurveyFormInj, ref(false))
Nc fix: UI improvements (#8223) * fix(nc-gui): add background color for row on hover in grid view * fix(nc-gui): reduce width of index column * fix(nc-gui): on hover grid row bg opacity issue * fix(nc-gui): reduce font size and grid cell height * fix(nc-gui): reduce font size * fix(nc-gui): set column default width to 180px * fix(nc-gui): revert sidebar changes * fix(nc-gui): disable grid row hover effect if fillMode is true * fix(nc-gui): display checkbox & row expand icon if it is active row * fix(nc-gui): increase the weight of display value cell * fix(nc-gui): grid cell should have constant padding * fix(nc-gui): att cell row height auto increase issue * fix(nc-gui): att cell center align issue * fix(nc-gui): percent cell spacing issue * fix(nc-gui): text overflow ellipsis * fix(nc-gui): single select auto increase height issue if rowHeight is short * fix(nc-gui): grayed out header text color * fix(nc-gui): reduce header icon size * fix(nc-gui): set 12px grid header horizontal padding * fix(nc-gui): center align expand icon for short row height * fix(nc-gui): rich text and select type field auto row height increase issue * fix(nc-gui): lookup cell auto increase height issue * fix(nc-gui): small changes * fix(nc-gui): truncate text after no. of lines base on rowHeight * fix(nc-gui): barcode & qrcode cell row height issue * chore(nc-gui): lint * fix(test): update row height pw test * fix(test): grid toolbar rowHeight test update * fix(nc-gui): ai review changes * fix(test): multiselect pw test update * fix(test): verify multiselct options test update * fix(nc-gui): merge conflicts * fix(nc-gui): small changes * fix(nc-gui): small changes * fix(nc-gui): display value should be in blue color
8 months ago
const isGrid = inject(IsGridInj, ref(false))
const { isSharedForm } = useSmartsheetStoreOrThrow()!
const { isMobileMode } = useGlobal()
5 months ago
const { getPossibleAttachmentSrc } = useAttachment()
const {
isPublic,
isForm,
column,
modalRendered,
5 months ago
downloadAttachment,
renameFile,
modalVisible,
attachments,
visibleItems,
onDrop,
isLoading,
FileIcon,
selectedFile,
isReadonly,
storedFiles,
removeFile,
} = useProvideAttachmentCell(updateModelValue)
const { dragging } = useSortable(sortableRef, visibleItems, updateModelValue, isReadonly)
feat: Improved UI (#6222) * feat: Improved ui (#6156) * refactor: revert Signed-off-by: Pranav C <pranavxc@gmail.com> feat: shared base Signed-off-by: Pranav C <pranavxc@gmail.com> fix: remove duplicate import statement Signed-off-by: Pranav C <pranavxc@gmail.com> fix: disable starred & license menu Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> test: fix airtable wait issue Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> test: enable mysql in ci Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> test: fix checkbox order for sqlite Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> test: disable quick tests Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> test: fix dbType env variable for CI Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> test: workspace API access error fix Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> test: enable SQLite CI CD Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> test: use DB_TYPE env variable Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> test: enable SQLite UT Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> test: isHub cleanup Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> test: add check for EE Timezone spec Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> chore: cleanup Signed-off-by: Pranav C <pranavxc@gmail.com> chore: cleanup Signed-off-by: Pranav C <pranavxc@gmail.com> test: EE check fix Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> chore: test correction Signed-off-by: Pranav C <pranavxc@gmail.com> chore: sync latest changes Signed-off-by: Pranav C <pranavxc@gmail.com> test: set EE=false Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> test: set NC Edition to community in workflow file Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> chore: update sdk build command Signed-off-by: Pranav C <pranavxc@gmail.com> refactor: i18n and other changes Signed-off-by: Pranav C <pranavxc@gmail.com> feat: new ui Signed-off-by: Pranav C <pranavxc@gmail.com> * chore: sync tests Signed-off-by: Pranav C <pranavxc@gmail.com> * chore: lint Signed-off-by: Pranav C <pranavxc@gmail.com> * fix: shared view/base related bugs Signed-off-by: Pranav C <pranavxc@gmail.com> * test: checkbox verification sort order fix Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> * test: fix sqlite reset Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> * test: enable selfhosted runners Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> * docs: table ops (draft) Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> * Docs: screenshots for table-operations.md * refactor: introduce missing buttons Signed-off-by: Pranav C <pranavxc@gmail.com> * fix: get all fields Signed-off-by: Pranav C <pranavxc@gmail.com> * test: UT fix- new data API response Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> * test: EE is false Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> * test: webhook lookup as string in CE Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> * fix: include created_at and updated_at Signed-off-by: Pranav C <pranavxc@gmail.com> * test: fix UT newDataAPI response for PG Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> * fix: separate api for webhook related plugins Signed-off-by: Pranav C <pranavxc@gmail.com> * test: msyql filter corrections Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> * test: mysql group by test corrections Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> * test: fix datatype for rating field in groupby spec for pg Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> * test: kanban datatype correction Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> * test: column edit for mysql- rating field Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> * test: misc fixes Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> * test: enable 4 workers Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> * test: enable 2 workers per shard only Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> * docs: table CRUD * Rename table-operations.md to table-crud.md * Create column-crud.md * docs: row CRUD * Rename row.md to row-crud.md * docs: project crud * docs: toolbar (skeleton) * refactor: single page UI and bug fixes Signed-off-by: Pranav C <pranavxc@gmail.com> * chore: sync tests playwright Signed-off-by: Pranav C <pranavxc@gmail.com> * chore: add missing dependency Signed-off-by: Pranav C <pranavxc@gmail.com> * feat: single page ui, test corrections Signed-off-by: Pranav C <pranavxc@gmail.com> * chore: tests Signed-off-by: Pranav C <pranavxc@gmail.com> * test: project rename test correction Signed-off-by: Pranav C <pranavxc@gmail.com> * chore: remove only Signed-off-by: Pranav C <pranavxc@gmail.com> * test: remove wrong import statement Signed-off-by: Pranav C <pranavxc@gmail.com> * fix: delete option not visible in project context menu Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> * test: move ws access within isEE() Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> * test: fix groupby * test: groupby fix Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> * docs: signup & landing page * docs: project crud * docs: project-crud misc * docs: toolbar fields * docs: toolbar / filters * docs: toolbar / group by * docs: toolbar / sort * docs: toolbar / row height * docs: filters additional options * docs: file re-order Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> * docs: add links to column types * docs: code snippets * docs: links * docs: lookup * docs: rollup * docs: formula * docs: primary key * docs: display value * docs: development setup * docs: swagger * fix(nc-gui): encodeURIComponent for row id - closes: #6202 * docs: language * docs: expanded record * docs: import airtable * docs: airtable * docs: webhook * docs: revert file rename Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> * docs: account settings * docs: audit * docs: meta management * docs: project settings * docs: shared base * docs: shared view * docs: meta sync * docs: team-auth * docs: views * docs: fix URL * docs: URL corrections * fix: shared base, view related bugs Signed-off-by: Pranav C <pranavxc@gmail.com> * test: EE check for WSaccess Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> * test: exclude EE tests Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> * fix: missing project delete closes #6215 Signed-off-by: Pranav C <pranavxc@gmail.com> * fix: merge existing project meta if found closes #6216 Signed-off-by: Pranav C <pranavxc@gmail.com> * fix: merge existing project meta if found closes #6216 Signed-off-by: Pranav C <pranavxc@gmail.com> --------- Signed-off-by: Pranav C <pranavxc@gmail.com> Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> Co-authored-by: Raju Udava <86527202+dstala@users.noreply.github.com> Co-authored-by: DarkPhoenix2704 <anbarasun123@gmail.com> Co-authored-by: Wing-Kam Wong <wingkwong.code@gmail.com> * refactor: docs and other bug fixes Signed-off-by: Pranav C <pranavxc@gmail.com> * feat: populate default project on super admin signup Signed-off-by: Pranav C <pranavxc@gmail.com> * fix: include created project details in signup response if avail, missing Dockerfile Signed-off-by: Pranav C <pranavxc@gmail.com> * chore: use custom function for resolving ts path aliases Signed-off-by: Pranav C <pranavxc@gmail.com> * chore: add missing generate script Signed-off-by: Pranav C <pranavxc@gmail.com> * chore: webpack build correction - ts path resolve Signed-off-by: Pranav C <pranavxc@gmail.com> --------- Signed-off-by: Pranav C <pranavxc@gmail.com> Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> Co-authored-by: mertmit <mertmit99@gmail.com> Co-authored-by: Raju Udava <86527202+dstala@users.noreply.github.com> Co-authored-by: DarkPhoenix2704 <anbarasun123@gmail.com> Co-authored-by: Wing-Kam Wong <wingkwong.code@gmail.com>
1 year ago
const active = inject(ActiveCellInj, ref(false))
const { state: rowState, row } = useSmartsheetRowStoreOrThrow()
const meta = inject(MetaInj, ref())
if (!isPublic.value && !isForm.value && meta.value) {
useProvideRowComments(meta, row)
}
const { isOverDropZone } = useDropZone(currentCellRef as any, onDrop)
/** on new value, reparse our stored attachments */
watch(
() => modelValue,
async (nextModel) => {
if (nextModel) {
try {
const nextAttachments = ((typeof nextModel === 'string' ? JSON.parse(nextModel) : nextModel) || []).filter(Boolean)
if (isPublic.value && isForm.value) {
storedFiles.value = nextAttachments
} else {
attachments.value = nextAttachments
}
} catch (e) {
console.error(e)
if (isPublic.value && isForm.value) {
storedFiles.value = []
} else {
attachments.value = []
}
}
} else {
if (isPublic.value && isForm.value) {
storedFiles.value = []
} else {
attachments.value = []
}
}
},
{
immediate: true,
},
)
/** updates attachments array for autosave */
function updateModelValue(data: string | Record<string, any>[]) {
emits('update:modelValue', data)
}
/** Close modal on escape press, disable dropzone as well */
onKeyDown('Escape', () => {
modalVisible.value = false
isOverDropZone.value = false
})
/** sync storedFiles state with row state */
watch(
() => storedFiles.value.length || 0,
() => {
rowState.value[column.value!.title!] = storedFiles.value
},
)
const isNewAttachmentModalOpen = ref(false)
useSelectedCellKeyupListener(inject(ActiveCellInj, ref(false)), (e) => {
if (modalVisible.value) return
if (e.key === 'Enter' && !isReadonly.value && !selectedFile.value) {
if (isNewAttachmentModalOpen.value) return
e.stopPropagation()
if (!modalVisible.value && !isMobileMode.value) {
modalRendered.value = true
modalVisible.value = true
} else {
// click Attach File button
;(document.querySelector('.nc-attachment-modal.active .nc-attach-file') as HTMLDivElement)?.click()
}
}
})
const rowHeight = inject(RowHeightInj, ref())
const openAttachmentModal = () => {
isNewAttachmentModalOpen.value = true
}
const open = (e: Event) => {
e.stopPropagation()
openAttachmentModal()
}
const onExpand = () => {
if (isMobileMode.value) return
modalRendered.value = true
modalVisible.value = true
}
const onFileClick = (item: any) => {
if (isMobileMode.value && !isExpandedForm.value) return
Nc Refactor: Gallery view (#8674) * fix(nc-gui): introduce header icon in gallery view card and update style * fix(nc-gui): field modal width issue if it is rich text * fix(nc-gui): hide longtext expanded icon on gallery & kanban view card hove * fix(nc-gui): date field alignment issue * fix(nc-gui): udpate kanban view card * fix(nc-gui): udpate gallery & kanban view card display value style * fix(nocodb): hide cover image in new gallery, kanban view if it is not pv column * feat(nc-gui): change cover image object fit property change support * fix(nc-gui): virtual cell card value alignment issue * fix(nc-gui): gallery view card image navigation issue * fix(nc-gui): gallerym, kanban card cover image dots navigation overflow issue * fix(nocodb): use optional chaining to access nested variable * chore(nc-gui): lint * fix(nc-gui): long text max line shuld be 4 in card * test: update open expanded form in gallery test * fix(nc-gui): add empty card in gallery view if cards length is less than 4 * fix(nc-gui): update gallery view card min width * fix(nocodb): small changes * fix(nc-gui): review changes * fix(nc-gui): add input shadow effect * fix(nc-gui): update card image navigation buttons icon * fix(nc-gui): udpate gallery view bg color * fix(nc-gui): update email, url, phone cell height from card * fix(nc-gui): update isEmptyRow function logic * fix(nc-gui): some review changes * fix(nc-gui): card display value color * fix(nc-gui): udpate gallery view card min width * fix(nc-gui): update card shadow & border on hover * fix(nc-gui): update gallery loader card width * fix(nc-gui): add min height for card image * chore(nc-gui): lint * fix(nc-gui): card rich text height * fix(nc-gui): align record count in right side in gallery view * fix(nc-gui): review changes * fix(nc-gui): shared view show & hide field issue * chore(nc-gui): lint * fix(nc-gui): link record test fail issue
6 months ago
if (!isMobileMode.value && (isGallery.value || isKanban.value) && !isExpandedForm.value) return
selectedFile.value = item
}
const keydownEnter = (e: KeyboardEvent) => {
if (!isSurveyForm.value) {
open(e)
e.stopPropagation()
}
}
const keydownSpace = (e: KeyboardEvent) => {
if (isSurveyForm.value) {
open(e)
e.stopPropagation()
}
}
const { isUIAllowed } = useRoles()
const isConfirmModalOpen = ref(false)
const filetoDelete = reactive({
title: '',
i: 0,
})
function onRemoveFileClick(title: any, i: number) {
isConfirmModalOpen.value = true
filetoDelete.i = i
filetoDelete.title = title
}
const handleFileDelete = (i: number) => {
removeFile(i)
isConfirmModalOpen.value = false
filetoDelete.i = 0
filetoDelete.title = ''
}
const attachmentSize = computed(() => {
if (isForm.value || isExpandedForm.value) {
return 'small'
}
switch (rowHeight.value) {
case 1:
return 'tiny'
case 2:
return 'tiny'
case 4:
return 'small'
case 6:
return 'small'
default:
return 'tiny'
}
})
</script>
<template>
5 months ago
<div v-if="isExpandedForm || isForm" class="form-attachment-cell">
<NcButton data-testid="attachment-cell-file-picker-button" type="secondary" size="small" @click="open">
5 months ago
<div class="flex items-center !text-xs gap-1 justify-center">
<MaterialSymbolsAttachFile class="text-gray-500 text-tiny" />
<span class="text-[10px]">
{{ $t('activity.addFiles') }}
</span>
</div>
</NcButton>
<LazyCellAttachmentCarousel v-if="selectedFile" />
5 months ago
<div v-if="visibleItems.length > 0" class="grid mt-2 gap-2 grid-cols-2">
5 months ago
<div
v-for="(item, i) in visibleItems"
:key="`${item?.title}-${i}`"
class="nc-attachment-item group gap-2 flex border-1 rounded-md border-gray-200 flex-col relative"
5 months ago
>
<div
:class="[dragging ? 'cursor-move' : 'cursor-pointer']"
class="nc-attachment h-full flex justify-center items-center overflow-hidden"
>
<LazyCellAttachmentPreviewImage
v-if="isImage(item.title, item.mimetype)"
:srcs="getPossibleAttachmentSrc(item, 'small')"
object-fit="cover"
class="!w-full !h-42 object-cover !m-0 rounded-t-[5px] justify-center"
@click="onFileClick(item)"
5 months ago
/>
<component :is="FileIcon(item.icon)" v-else-if="item.icon" :height="45" :width="45" @click="selectedFile = item" />
5 months ago
<IcOutlineInsertDriveFile v-else :height="45" :width="45" @click="selectedFile = item" />
5 months ago
</div>
<div class="relative px-1 flex" :title="item.title">
<NcTooltip show-on-truncate-only class="flex-auto truncate w-full text-[13px] items-center text-sm line-height-4">
5 months ago
{{ item.title }}
<template #title>
{{ item.title }}
</template>
</NcTooltip>
<div class="flex-none hide-ui transition-all transition-ease-in-out !h-5 gap-0.5 pb-2 flex items-center bg-white">
5 months ago
<NcTooltip placement="bottom">
<template #title> {{ $t('title.downloadFile') }} </template>
<NcButton
class="!p-0 !w-5 !h-5 text-gray-500 !min-w-[fit-content]"
size="xsmall"
type="text"
@click="downloadAttachment(item)"
>
5 months ago
<component :is="iconMap.download" class="!text-xs h-13px w-13px" />
5 months ago
</NcButton>
</NcTooltip>
<NcTooltip v-if="!isSharedForm || (!isReadonly && isUIAllowed('dataEdit') && !isPublic)" placement="bottom">
<template #title> {{ $t('title.renameFile') }} </template>
<NcButton
size="xsmall"
class="!p-0 nc-attachment-rename !h-5 !w-5 !text-gray-500 !min-w-[fit-content]"
type="text"
@click="renameFile(item, i)"
>
5 months ago
<component :is="iconMap.rename" class="text-xs h-13px w-13px" />
5 months ago
</NcButton>
</NcTooltip>
<NcTooltip v-if="!isReadonly" placement="bottom">
<template #title> {{ $t('title.removeFile') }} </template>
<NcButton
class="!p-0 !h-5 !w-5 !text-red-500 nc-attachment-remove !min-w-[fit-content]"
size="xsmall"
type="text"
@click="onRemoveFileClick(item.title, i)"
>
5 months ago
<component
:is="iconMap.delete"
v-if="isSharedForm || (isUIAllowed('dataEdit') && !isPublic)"
class="text-xs h-13px w-13px"
/>
5 months ago
</NcButton>
</NcTooltip>
</div>
</div>
</div>
</div>
</div>
<div
5 months ago
v-else
ref="attachmentCellRef"
:style="{
5 months ago
height: `max(${!rowHeight || rowHeight === 1 ? rowHeightInPx['1'] - 10 : rowHeightInPx[`${rowHeight}`] - 18}px, ${
isGrid ? '22px' : '32px'
})`,
}"
5 months ago
class="nc-attachment-cell relative group flex color-transition gap-2 flex items-center w-full xs:(min-h-12 max-h-32)"
:class="{ 'justify-center': !active, 'justify-between': active }"
>
<LazyCellAttachmentCarousel v-if="selectedFile" />
5 months ago
<template v-if="!isReadonly && !dragging && !!currentCellRef">
<general-overlay
v-model="isOverDropZone"
inline
:target="currentCellRef"
data-rec="true"
5 months ago
class="nc-attachment-cell-dropzone text-white text-lg bg-gray-600/75 flex text-sm items-center justify-center gap-2"
>
5 months ago
<MaterialSymbolsFileCopyOutline />
{{ $t('labels.dropHere') }}
</general-overlay>
</template>
<div
v-if="!isReadonly && active && !visibleItems.length"
:class="{ 'sm:(mx-auto px-4) xs:(w-full min-w-8)': !visibleItems.length }"
class="group cursor-pointer py-1 flex gap-1 items-center rounded border-none"
tabindex="0"
@keydown.enter="keydownEnter"
@keydown.space="keydownSpace"
>
<component :is="iconMap.reload" v-if="isLoading" :class="{ 'animate-infinite animate-spin': isLoading }" />
<NcTooltip placement="bottom" class="xs:w-full">
<template #title>
<span data-rec="true">{{ $t('activity.attachmentDrop') }} </span>
</template>
<NcButton
type="secondary"
size="xsmall"
data-testid="attachment-cell-file-picker-button"
class="!px-2 !h-5.5 !min-w-[fit-content]"
@click.stop="open"
>
<div class="flex items-center !text-xs gap-1 justify-center">
<MaterialSymbolsAttachFile class="text-gray-500 text-tiny" />
<span class="text-[10px]">
{{ $t('activity.addFiles') }}
</span>
</div>
</NcButton>
</NcTooltip>
</div>
<template v-if="visibleItems.length > 0">
<div
ref="sortableRef"
Nc fix: UI improvements (#8223) * fix(nc-gui): add background color for row on hover in grid view * fix(nc-gui): reduce width of index column * fix(nc-gui): on hover grid row bg opacity issue * fix(nc-gui): reduce font size and grid cell height * fix(nc-gui): reduce font size * fix(nc-gui): set column default width to 180px * fix(nc-gui): revert sidebar changes * fix(nc-gui): disable grid row hover effect if fillMode is true * fix(nc-gui): display checkbox & row expand icon if it is active row * fix(nc-gui): increase the weight of display value cell * fix(nc-gui): grid cell should have constant padding * fix(nc-gui): att cell row height auto increase issue * fix(nc-gui): att cell center align issue * fix(nc-gui): percent cell spacing issue * fix(nc-gui): text overflow ellipsis * fix(nc-gui): single select auto increase height issue if rowHeight is short * fix(nc-gui): grayed out header text color * fix(nc-gui): reduce header icon size * fix(nc-gui): set 12px grid header horizontal padding * fix(nc-gui): center align expand icon for short row height * fix(nc-gui): rich text and select type field auto row height increase issue * fix(nc-gui): lookup cell auto increase height issue * fix(nc-gui): small changes * fix(nc-gui): truncate text after no. of lines base on rowHeight * fix(nc-gui): barcode & qrcode cell row height issue * chore(nc-gui): lint * fix(test): update row height pw test * fix(test): grid toolbar rowHeight test update * fix(nc-gui): ai review changes * fix(test): multiselect pw test update * fix(test): verify multiselct options test update * fix(nc-gui): merge conflicts * fix(nc-gui): small changes * fix(nc-gui): small changes * fix(nc-gui): display value should be in blue color
8 months ago
:class="{
5 months ago
'justify-center': !isGallery && !isKanban,
'py-1': rowHeight === 1,
'py-1.5 !gap-4 ': rowHeight !== 1,
Nc fix: UI improvements (#8223) * fix(nc-gui): add background color for row on hover in grid view * fix(nc-gui): reduce width of index column * fix(nc-gui): on hover grid row bg opacity issue * fix(nc-gui): reduce font size and grid cell height * fix(nc-gui): reduce font size * fix(nc-gui): set column default width to 180px * fix(nc-gui): revert sidebar changes * fix(nc-gui): disable grid row hover effect if fillMode is true * fix(nc-gui): display checkbox & row expand icon if it is active row * fix(nc-gui): increase the weight of display value cell * fix(nc-gui): grid cell should have constant padding * fix(nc-gui): att cell row height auto increase issue * fix(nc-gui): att cell center align issue * fix(nc-gui): percent cell spacing issue * fix(nc-gui): text overflow ellipsis * fix(nc-gui): single select auto increase height issue if rowHeight is short * fix(nc-gui): grayed out header text color * fix(nc-gui): reduce header icon size * fix(nc-gui): set 12px grid header horizontal padding * fix(nc-gui): center align expand icon for short row height * fix(nc-gui): rich text and select type field auto row height increase issue * fix(nc-gui): lookup cell auto increase height issue * fix(nc-gui): small changes * fix(nc-gui): truncate text after no. of lines base on rowHeight * fix(nc-gui): barcode & qrcode cell row height issue * chore(nc-gui): lint * fix(test): update row height pw test * fix(test): grid toolbar rowHeight test update * fix(nc-gui): ai review changes * fix(test): multiselect pw test update * fix(test): verify multiselct options test update * fix(nc-gui): merge conflicts * fix(nc-gui): small changes * fix(nc-gui): small changes * fix(nc-gui): display value should be in blue color
8 months ago
}"
class="nc-attachment-wrapper flex cursor-pointer w-full items-center flex-wrap gap-3 nc-scrollbar-thin mt-0 items-start px-[1px]"
:style="{
5 months ago
maxHeight: `max(100%, ${isGrid ? '22px' : '32px'})`,
}"
>
<template v-for="(item, i) of visibleItems" :key="item.url || item.title">
<NcTooltip placement="bottom" class="nc-attachment-item">
<template #title>
<div class="text-center w-full">{{ item.title }}</div>
</template>
<div v-if="isImage(item.title, item.mimetype ?? item.type)">
<div
class="nc-attachment flex items-center flex-col flex-wrap justify-center flex-auto"
@click="() => onFileClick(item)"
>
<LazyCellAttachmentPreviewImage
:alt="item.title || `#${i}`"
class="rounded"
:class="{
Nc fix: UI improvements (#8223) * fix(nc-gui): add background color for row on hover in grid view * fix(nc-gui): reduce width of index column * fix(nc-gui): on hover grid row bg opacity issue * fix(nc-gui): reduce font size and grid cell height * fix(nc-gui): reduce font size * fix(nc-gui): set column default width to 180px * fix(nc-gui): revert sidebar changes * fix(nc-gui): disable grid row hover effect if fillMode is true * fix(nc-gui): display checkbox & row expand icon if it is active row * fix(nc-gui): increase the weight of display value cell * fix(nc-gui): grid cell should have constant padding * fix(nc-gui): att cell row height auto increase issue * fix(nc-gui): att cell center align issue * fix(nc-gui): percent cell spacing issue * fix(nc-gui): text overflow ellipsis * fix(nc-gui): single select auto increase height issue if rowHeight is short * fix(nc-gui): grayed out header text color * fix(nc-gui): reduce header icon size * fix(nc-gui): set 12px grid header horizontal padding * fix(nc-gui): center align expand icon for short row height * fix(nc-gui): rich text and select type field auto row height increase issue * fix(nc-gui): lookup cell auto increase height issue * fix(nc-gui): small changes * fix(nc-gui): truncate text after no. of lines base on rowHeight * fix(nc-gui): barcode & qrcode cell row height issue * chore(nc-gui): lint * fix(test): update row height pw test * fix(test): grid toolbar rowHeight test update * fix(nc-gui): ai review changes * fix(test): multiselect pw test update * fix(test): verify multiselct options test update * fix(nc-gui): merge conflicts * fix(nc-gui): small changes * fix(nc-gui): small changes * fix(nc-gui): display value should be in blue color
8 months ago
'h-5.5': !isGrid && (!rowHeight || rowHeight === 1),
'h-4.5': isGrid && (!rowHeight || rowHeight === 1),
'h-8': rowHeight === 2,
'h-16.8': rowHeight === 4,
5 months ago
'h-20.8': rowHeight === 6,
}"
:srcs="getPossibleAttachmentSrc(item, attachmentSize)"
/>
</div>
</div>
<div
v-else
class="nc-attachment flex items-center justify-center px-4"
:class="{
'h-5.5': !isGrid && (!rowHeight || rowHeight === 1),
'h-4.5': isGrid && (!rowHeight || rowHeight === 1),
'h-8': rowHeight === 2,
'h-16.8': rowHeight === 4,
5 months ago
'h-20.8 !w-30': rowHeight === 6,
}"
@click="onFileClick(item)"
>
5 months ago
<component :is="FileIcon(item.icon)" v-if="item.icon" />
5 months ago
<IcOutlineInsertDriveFile v-else />
</div>
</NcTooltip>
</template>
</div>
<NcTooltip
placement="bottom"
5 months ago
class="nc-action-icon !absolute hidden right-0 nc-text-area-expand-btn !group-hover:block z-3"
:class="{
5 months ago
'top-0': isGrid && !(!rowHeight || rowHeight === 1),
'top-1': !isGrid,
}"
5 months ago
:style="isGrid && (!rowHeight || rowHeight === 1) ? { top: '50%', transform: 'translateY(-50%)' } : undefined"
>
<template #title>{{ $t('activity.viewAttachment') }}</template>
<NcButton
type="secondary"
size="xsmall"
data-testid="attachment-cell-file-picker-button"
class="!p-0 !w-5 !h-5 !min-w-[fit-content]"
@click.stop="onExpand"
>
<component :is="iconMap.reload" v-if="isLoading" :class="{ 'animate-infinite animate-spin': isLoading }" />
<component :is="iconMap.expand" v-else class="transform group-hover:(!text-grey-800) text-gray-700 text-xs" />
</NcButton>
</NcTooltip>
<NcTooltip
placement="bottom"
5 months ago
class="nc-action-icon !absolute hidden left-0 nc-text-area-expand-btn !group-hover:block z-3"
:class="{
5 months ago
'top-0': isGrid && !(!rowHeight || rowHeight === 1),
'top-1': !isGrid,
}"
5 months ago
:style="isGrid && (!rowHeight || rowHeight === 1) ? { top: '50%', transform: 'translateY(-50%)' } : undefined"
>
<template #title>{{ $t('activity.addFiles') }}</template>
<NcButton
type="secondary"
size="xsmall"
data-testid="attachment-cell-file-picker-button"
class="!p-0 !w-5 !h-5 !min-w-[fit-content]"
@click.stop="open"
>
<MaterialSymbolsAttachFile class="text-gray-500 text-tiny group-hover:(!text-grey-800) text-gray-700" />
</NcButton>
</NcTooltip>
</template>
<LazyCellAttachmentModal v-if="modalRendered" />
</div>
5 months ago
<LazyGeneralDeleteModal
v-if="isForm || isExpandedForm"
v-model:visible="isConfirmModalOpen"
entity-name="File"
:on-delete="() => handleFileDelete(filetoDelete.i)"
>
<template #entity-preview>
<span>
<div class="flex flex-row items-center py-2.25 px-2.5 bg-gray-50 rounded-lg text-gray-700 mb-4">
<GeneralIcon icon="file" class="nc-view-icon"></GeneralIcon>
<div
class="capitalize text-ellipsis overflow-hidden select-none w-full pl-1.75"
:style="{ wordBreak: 'keep-all', whiteSpace: 'nowrap', display: 'inline' }"
>
{{ filetoDelete.title }}
</div>
</div>
</span>
</template>
</LazyGeneralDeleteModal>
<LazyCellAttachmentAttachFile v-if="isNewAttachmentModalOpen" v-model:value="isNewAttachmentModalOpen" />
</template>
<style lang="scss">
5 months ago
.nc-data-cell {
&:has(.form-attachment-cell) {
@apply !border-none pt-1 -mt-1;
5 months ago
box-shadow: none !important;
&:focus-within:not(.nc-readonly-div-data-cell):not(.nc-system-field) {
box-shadow: none !important;
}
5 months ago
}
.nc-cell-attachment {
@apply !border-none;
}
}
.nc-cell {
.nc-attachment-cell {
.nc-attachment {
@apply min-h-5.5 !ring-1 !ring-gray-300 !rounded;
}
.ghost,
.ghost > * {
@apply !pointer-events-none;
}
.dragging {
.ant-tooltip {
@apply !hidden;
}
}
}
.nc-attachment-item {
@apply relative;
}
}
</style>