From d4fa6a8174332192457a2a57b12a8a0ebe6fad73 Mon Sep 17 00:00:00 2001 From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com> Date: Wed, 8 May 2024 17:19:39 +0530 Subject: [PATCH] Nc fix: linked records dropdown followup (#8415) * fix(nc-gui): update link record dropdown border radius * fix(nc-gui): move link/unlink btn to the right side * fix(nc-gui): update placeholder text color * fix(nc-gui): reduce link record dropdown bottom bar padding x * fix(nc-gui): update expanded form save btn text in create new record from link record * fix(nc-gui): grid active cell border issue * fix(nc-gui): link record dropdown trigger & dropdown spacing * fix(nc-gui): link record footer btn size * fix(nc-gui): link record loading state * fix(nc-gui): update link record search input icon * fix(nc-gui): update link record item skeleton * fix(nc-gui): update grid row hover & selected state bg color * fix(nc-gui): add tooltip on hover over expand icon * fix(nc-gui): link record tooltip issue * fix(nc-gui): update search query empty state status * fix(nc-gui): bt cell ui fixes * feat(nc-gui): resizable link record dropdown * fix(nc-gui): external DB, fields re-order to re-align sub fields needs a fix * chore(nc-gui): lint * fix(nc-gui): bt & oto cell unlink & link btn visibility issue * fix(nc-gui): pr review changes * fix: docs --------- Co-authored-by: Raju Udava <86527202+dstala@users.noreply.github.com> --- .../smartsheet/expanded-form/index.vue | 3 +- .../components/smartsheet/grid/Table.vue | 20 +++-- .../components/virtual-cell/BelongsTo.vue | 4 +- .../components/virtual-cell/HasMany.vue | 2 +- .../nc-gui/components/virtual-cell/Links.vue | 2 +- .../components/virtual-cell/ManyToMany.vue | 2 +- .../components/virtual-cell/OneToOne.vue | 10 ++- .../virtual-cell/components/ItemChip.vue | 67 +++++++++------- .../components/LinkRecordDropdown.vue | 13 +++- .../virtual-cell/components/LinkedItems.vue | 49 ++++++------ .../virtual-cell/components/ListItem.vue | 73 +++++++++++------- .../virtual-cell/components/UnLinkedItems.vue | 52 +++++++------ packages/nc-gui/lang/en.json | 1 + .../040.links-based/010.links.md | 8 +- .../static/img/v2/fields/add-link-modal.png | Bin 299272 -> 371127 bytes .../img/v2/fields/linked-record-modal.png | Bin 305640 -> 377338 bytes packages/nocodb/src/models/Column.ts | 37 ++++----- 17 files changed, 202 insertions(+), 141 deletions(-) diff --git a/packages/nc-gui/components/smartsheet/expanded-form/index.vue b/packages/nc-gui/components/smartsheet/expanded-form/index.vue index d30aeee9d2..31846ed182 100644 --- a/packages/nc-gui/components/smartsheet/expanded-form/index.vue +++ b/packages/nc-gui/components/smartsheet/expanded-form/index.vue @@ -26,6 +26,7 @@ interface Props { closeAfterSave?: boolean newRecordHeader?: string skipReload?: boolean + newRecordSubmitBtnText?: string } const props = defineProps() @@ -882,7 +883,7 @@ export default { size="medium" @click="save" > -
Save
+
{{ newRecordSubmitBtnText ?? 'Save' }}
diff --git a/packages/nc-gui/components/smartsheet/grid/Table.vue b/packages/nc-gui/components/smartsheet/grid/Table.vue index bad2e2e52c..ecab8a49da 100644 --- a/packages/nc-gui/components/smartsheet/grid/Table.vue +++ b/packages/nc-gui/components/smartsheet/grid/Table.vue @@ -427,8 +427,8 @@ const cellMeta = computed(() => { const colMeta = computed(() => { return fields.value.map((col) => { return { - isLookup: isLinksOrLTAR(col), - isRollup: isBt(col), + isLookup: isLookup(col), + isRollup: isRollup(col), isFormula: isFormula(col), isCreatedOrLastModifiedTimeCol: isCreatedOrLastModifiedTimeCol(col), isCreatedOrLastModifiedByCol: isCreatedOrLastModifiedByCol(col), @@ -857,7 +857,7 @@ onClickOutside(tableBodyEl, (e) => { // ignore unselecting if clicked inside or on the picker(Date, Time, DateTime, Year) // or single/multi select options const activePickerOrDropdownEl = document.querySelector( - '.nc-picker-datetime.active,.nc-dropdown-single-select-cell.active,.nc-dropdown-multi-select-cell.active,.nc-dropdown-user-select-cell.active,.nc-picker-date.active,.nc-picker-year.active,.nc-picker-time.active', + '.nc-picker-datetime.active,.nc-dropdown-single-select-cell.active,.nc-dropdown-multi-select-cell.active,.nc-dropdown-user-select-cell.active,.nc-picker-date.active,.nc-picker-year.active,.nc-picker-time.active,.nc-link-dropdown-root', ) if ( e.target && @@ -1892,6 +1892,7 @@ onKeyStroke('ArrowDown', onDown) :class="{ 'active-row': activeCell.row === rowIndex || selectedRange._start?.row === rowIndex, 'mouse-down': isGridCellMouseDown || isFillMode, + 'selected-row': row.rowMeta.selected, }" :style="{ height: rowHeight ? `${rowHeightInPx[`${rowHeight}`]}px` : `${rowHeightInPx['1']}px` }" :data-testid="`grid-row-${rowIndex}`" @@ -2430,7 +2431,7 @@ onKeyStroke('ArrowDown', onDown) td, th { - @apply border-gray-100 border-solid border-r bg-gray-50 p-0; + @apply border-gray-100 border-solid border-r bg-gray-100 p-0; min-height: 32px !important; height: 32px !important; position: relative; @@ -2685,9 +2686,18 @@ onKeyStroke('ArrowDown', onDown) @apply !xs:hidden flex; } + &:not(.selected-row) { + td.nc-grid-cell:not(.active), + td:nth-child(2):not(.active) { + @apply !bg-gray-50 border-b-gray-200 border-r-gray-200; + } + } + } + + &.selected-row { td.nc-grid-cell:not(.active), td:nth-child(2):not(.active) { - @apply !bg-gray-50 border-b-gray-200 border-r-gray-200; + @apply !bg-[#F0F3FF] border-b-gray-200 border-r-gray-200; } } } diff --git a/packages/nc-gui/components/virtual-cell/BelongsTo.vue b/packages/nc-gui/components/virtual-cell/BelongsTo.vue index a1b1e05d26..2930e32ecc 100644 --- a/packages/nc-gui/components/virtual-cell/BelongsTo.vue +++ b/packages/nc-gui/components/virtual-cell/BelongsTo.vue @@ -87,8 +87,8 @@ watch(value, (next) => {