Browse Source

fix: lookup rendering

pull/7202/head
mertmit 12 months ago
parent
commit
d171bdf133
  1. 10
      packages/nc-gui/components/cell/User.vue
  2. 2
      packages/nc-gui/components/smartsheet/grid/Table.vue
  3. 19
      packages/nc-gui/components/virtual-cell/Lookup.vue

10
packages/nc-gui/components/cell/User.vue

@ -237,7 +237,7 @@ const handleClose = (e: MouseEvent) => {
isOpen.value && isOpen.value &&
aselect.value && aselect.value &&
!aselect.value.$el.contains(e.target) && !aselect.value.$el.contains(e.target) &&
!document.querySelector('.nc-dropdown-multi-select-cell.active')?.contains(e.target as Node) !document.querySelector('.nc-dropdown-user-select-cell.active')?.contains(e.target as Node)
) { ) {
// loose focus when clicked outside // loose focus when clicked outside
isEditable.value = false isEditable.value = false
@ -258,7 +258,7 @@ const filterOption = (input: string, option: any) => {
</script> </script>
<template> <template>
<div class="nc-multi-select h-full w-full flex items-center" :class="{ 'read-only': readOnly }" @click="toggleMenu"> <div class="nc-user-select h-full w-full flex items-center" :class="{ 'read-only': readOnly }" @click="toggleMenu">
<div <div
v-if="!active || isPublic" v-if="!active || isPublic"
class="flex flex-wrap" class="flex flex-wrap"
@ -301,7 +301,7 @@ const filterOption = (input: string, option: any) => {
:open="isOpen && editAllowed" :open="isOpen && editAllowed"
:disabled="readOnly || !editAllowed" :disabled="readOnly || !editAllowed"
:class="{ 'caret-transparent': !hasEditRoles }" :class="{ 'caret-transparent': !hasEditRoles }"
:dropdown-class-name="`nc-dropdown-multi-select-cell ${isOpen ? 'active' : ''}`" :dropdown-class-name="`nc-dropdown-user-select-cell ${isOpen ? 'active' : ''}`"
:filter-option="filterOption" :filter-option="filterOption"
@search="search" @search="search"
@keydown.stop @keydown.stop
@ -396,7 +396,7 @@ const filterOption = (input: string, option: any) => {
} }
.rounded-tag { .rounded-tag {
@apply py-0 px-[12px] rounded-[12px]; @apply bg-gray-200 py-0 px-[12px] rounded-[12px];
} }
:deep(.ant-tag) { :deep(.ant-tag) {
@ -415,7 +415,7 @@ const filterOption = (input: string, option: any) => {
@apply flex-nowrap overflow-hidden; @apply flex-nowrap overflow-hidden;
} }
.nc-multi-select:not(.read-only) { .nc-user-select:not(.read-only) {
:deep(.ant-select-selector), :deep(.ant-select-selector),
:deep(.ant-select-selector input) { :deep(.ant-select-selector input) {
@apply "!cursor-pointer"; @apply "!cursor-pointer";

2
packages/nc-gui/components/smartsheet/grid/Table.vue

@ -1586,7 +1586,7 @@ onKeyStroke('ArrowDown', onDown)
@dblclick="makeEditable(row, columnObj)" @dblclick="makeEditable(row, columnObj)"
@contextmenu="showContextMenu($event, { row: rowIndex, col: colIndex })" @contextmenu="showContextMenu($event, { row: rowIndex, col: colIndex })"
> >
<div v-if="!switchingTab" class="w-full h-full"> <div v-if="!switchingTab" class="w-full">
<LazySmartsheetVirtualCell <LazySmartsheetVirtualCell
v-if="isVirtualCol(columnObj) && columnObj.title" v-if="isVirtualCol(columnObj) && columnObj.title"
v-model="row.row[columnObj.title]" v-model="row.row[columnObj.title]"

19
packages/nc-gui/components/virtual-cell/Lookup.vue

@ -97,20 +97,16 @@ const { showEditNonEditableFieldWarning, showClearNonEditableFieldWarning, activ
</script> </script>
<template> <template>
<div <div class="h-full w-full nc-lookup-cell" @dblclick="activateShowEditNonEditableFieldWarning">
class="h-full w-full nc-lookup-cell"
:style="{ height: rowHeight && rowHeight !== 1 ? `${rowHeight * 2}rem` : `2.85rem` }"
@dblclick="activateShowEditNonEditableFieldWarning"
>
<div <div
class="h-full w-full flex gap-1 p-1" class="h-full w-full flex gap-1"
:class="{ :class="{
'!overflow-x-auto nc-cell-lookup-scroll nc-scrollbar-x-md !overflow-y-hidden': rowHeight === 1, '!overflow-x-auto nc-cell-lookup-scroll nc-scrollbar-x-md !overflow-y-hidden': rowHeight === 1,
}" }"
> >
<template v-if="lookupColumn"> <template v-if="lookupColumn">
<!-- Render virtual cell --> <!-- Render virtual cell -->
<div v-if="isVirtualCol(lookupColumn)" class="flex"> <div v-if="isVirtualCol(lookupColumn)" class="flex h-full">
<!-- If non-belongs-to LTAR column then pass the array value, else iterate and render --> <!-- If non-belongs-to LTAR column then pass the array value, else iterate and render -->
<template <template
v-if=" v-if="
@ -151,7 +147,7 @@ const { showEditNonEditableFieldWarning, showClearNonEditableFieldWarning, activ
}" }"
> >
<div <div
class="flex gap-1.5 w-full" class="flex gap-1.5 w-full h-full py-[3px]"
:class="{ :class="{
'flex-wrap': rowHeight !== 1 && !isAttachment(lookupColumn), 'flex-wrap': rowHeight !== 1 && !isAttachment(lookupColumn),
'!overflow-x-auto nc-cell-lookup-scroll nc-scrollbar-x-md !overflow-y-hidden': '!overflow-x-auto nc-cell-lookup-scroll nc-scrollbar-x-md !overflow-y-hidden':
@ -162,11 +158,12 @@ const { showEditNonEditableFieldWarning, showClearNonEditableFieldWarning, activ
v-for="(v, i) of arrValue" v-for="(v, i) of arrValue"
:key="i" :key="i"
:class="{ :class="{
'bg-gray-100 px-1 rounded-full min-h-7.5': !isAttachment(lookupColumn), 'bg-gray-100 rounded-full': !isAttachment(lookupColumn),
'border-gray-200 rounded border-1 pt-0.75': ![ 'border-gray-200 rounded border-1': ![
UITypes.Attachment, UITypes.Attachment,
UITypes.MultiSelect, UITypes.MultiSelect,
UITypes.SingleSelect, UITypes.SingleSelect,
UITypes.User,
].includes(lookupColumn.uidt), ].includes(lookupColumn.uidt),
'min-h-0 min-w-0': isAttachment(lookupColumn), 'min-h-0 min-w-0': isAttachment(lookupColumn),
}" }"
@ -180,7 +177,7 @@ const { showEditNonEditableFieldWarning, showClearNonEditableFieldWarning, activ
class="" class=""
:class="{ :class="{
'min-h-0 min-w-0': isAttachment(lookupColumn), 'min-h-0 min-w-0': isAttachment(lookupColumn),
'!max-w-40 !min-w-20 !w-auto px-2': !isAttachment(lookupColumn), '!min-w-20 !w-auto pl-2': !isAttachment(lookupColumn),
}" }"
/> />
</div> </div>

Loading…
Cancel
Save