fix: wip

packages/nc-gui/components/smartsheet/header/Menu.vue

@@ -388,6 +388,12 @@ const openLookupMenuDialog = () => {
   isOpen.value = false
   addLookupMenu.value = true
 }
+
+const changeTitleFieldMenu = ref(false)
+
+const changeTitleField = () => {
+  changeTitleFieldMenu.value = false
+}
 </script>
 
 <template>
@@ -424,6 +430,12 @@ const openLookupMenuDialog = () => {
             </div>
           </NcMenuItem>
         </GeneralSourceRestrictionTooltip>
+        <NcMenuItem v-if="isUIAllowed('fieldAlter') && !!column?.pv" title="Change title field" @click="changeTitleField">
+          <div class="nc-column-edit nc-header-menu-item">
+            <component :is="iconMap.cellText" class="text-gray-700 !w-4 !h-4" />
+            {{ $t('labels.changeTitleField') }}
+          </div>
+        </NcMenuItem>
         <NcMenuItem v-if="[UITypes.LinkToAnotherRecord, UITypes.Links].includes(column.uidt)" @click="openLookupMenuDialog">
           <div v-e="['a:field:lookup:create']" class="nc-column-lookup-create nc-header-menu-item">
             <component :is="iconMap.cellLookup" class="text-gray-500 !w-4.5 !h-4.5" />

packages/nc-gui/components/smartsheet/header/UpdateDisplayValue.vue

@@ -0,0 +1,118 @@
+<script setup lang="ts">
+import { type ColumnType, isVirtualCol } from 'nocodb-sdk'
+import Draggable from 'vuedraggable'
+
+interface Props {
+  column: ColumnType
+  value?: boolean
+}
+
+const props = defineProps<Props>()
+
+const baseStore = useBase()
+
+const { loadTables } = baseStore
+
+const meta = inject(MetaInj, ref())
+
+const activeView = inject(ActiveViewInj, ref())
+
+const column = toRef(props, 'column')
+
+const getIcon = (c: ColumnType) =>
+  h(isVirtualCol(c) ? resolveComponent('SmartsheetHeaderVirtualCellIcon') : resolveComponent('SmartsheetHeaderCellIcon'), {
+    columnMeta: c,
+  })
+
+const value = useVModel(props, 'value')
+
+const searchField = ref('')
+</script>
+
+<template>
+  <NcModal v-model:visible="value" size="small">
+    <div class="flex flex-col gap-3">
+      <h1 class="text-base text-gray-800 font-semibold">{{ $t('labels.searchDisplayValue') }}</h1>
+      <div class="text-gray-900">
+        {{
+          $t('labels.selectYourNewTitleFor', {
+            table: relatedModel?.title,
+          })
+        }}
+      </div>
+
+      <div class="flex w-full gap-2 justify-between items-center">
+        <a-input v-model:value="searchField" class="w-full h-8 flex-1" size="small" :placeholder="$t('placeholder.searchFields')">
+          <template #prefix>
+            <component :is="iconMap.search" class="w-4 text-gray-500 h-4" />
+          </template>
+        </a-input>
+        <div class="flex items-center gap-2">
+          <NcButton size="small" type="text" @click="clearAll"> {{ $t('labels.clearAll') }} </NcButton>
+          <NcButton size="small" type="text" @click="selectAll"> {{ $t('general.addAll') }} </NcButton>
+        </div>
+      </div>
+
+      <div class="border-1 rounded-md h-[250px] nc-scrollbar-md border-gray-200">
+        <Draggable v-model="filteredColumns" item-key="id" ghost-class="nc-lookup-menu-items-ghost">
+          <template #item="{ element: field }">
+            <div
+              :key="field.id"
+              :data-testid="`nc-lookup-add-menu-${field.title}`"
+              class="px-3 py-1 flex flex-row items-center rounded-md hover:bg-gray-100"
+              @click.stop="selectedFields[field.id] = !selectedFields[field.id]"
+            >
+              <component :is="iconMap.drag" class="cursor-move !h-3.75 text-gray-600 mr-1" />
+              <div class="flex flex-row items-center w-full cursor-pointer truncate ml-1 py-[5px] pr-2">
+                <component :is="getIcon(field)" class="!w-3.5 !h-3.5 !text-gray-500" />
+                <NcTooltip class="flex-1 pl-1 pr-2 truncate" show-on-truncate-only>
+                  <template #title>
+                    {{ field.title }}
+                  </template>
+                  <template #default>{{ field.title }}</template>
+                </NcTooltip>
+
+                <NcCheckbox v-model:checked="selectedFields[field.id]" size="default" />
+              </div>
+
+              <div class="flex-1" />
+            </div>
+          </template>
+        </Draggable>
+      </div>
+
+      <div class="flex w-full gap-2 justify-end">
+        <NcButton type="secondary" size="small">
+          {{ $t('general.cancel') }}
+        </NcButton>
+
+        <NcButton
+          :loading="isLoading"
+          :disabled="!Object.values(selectedFields).filter(Boolean).length"
+          size="small"
+          @click="createLookups"
+        >
+          {{
+            $t('general.addLookupField', {
+              count: Object.values(selectedFields).filter(Boolean).length || '',
+            })
+          }}
+        </NcButton>
+      </div>
+    </div>
+  </NcModal>
+</template>
+
+<style scoped lang="scss">
+.ant-input::placeholder {
+  @apply text-gray-500;
+}
+
+.ant-input:placeholder-shown {
+  @apply text-gray-500 !text-md;
+}
+
+.ant-input-affix-wrapper {
+  @apply px-4 rounded-lg py-2 w-84 border-1 focus:border-brand-500 border-gray-200 !ring-0;
+}
+</style>

packages/nc-gui/lang/en.json

@@ -522,6 +522,9 @@
     "looksLikeThisStackIsEmpty": "Looks like this stack does not have any records"
   },
   "labels": {
+    "selectYourNewTitleFor": "Select your new title field for ",
+    "searchDisplayValue": "Select display value field",
+    "changeTitleField": "Change title field",
     "clearAll": "Clear all",
     "addNewLookupHelperText": "Lookup fields show data from linked records. Select specific fields from {table} table to add them as Lookup fields in this table.",
     "formatting": "Formatting",