chore(nc-gui): rename primary value to display value

packages/nc-gui/components/smartsheet/expanded-form/Header.vue

@@ -18,7 +18,7 @@ const route = useRoute()
 
 const { meta, isSqlView } = useSmartsheetStoreOrThrow()
 
-const { commentsDrawer, primaryValue, primaryKey, save: _save, loadRow } = useExpandedFormStoreOrThrow()
+const { commentsDrawer, displayValue, primaryKey, save: _save, loadRow } = useExpandedFormStoreOrThrow()
 
 const { isNew, syncLTARRefs, state } = useSmartsheetRowStoreOrThrow()
 
@@ -99,7 +99,7 @@ const onConfirmDeleteRowClick = async () => {
         {{ meta.title }}
       </template>
 
-      <template v-if="primaryValue">: {{ primaryValue }}</template>
+      <template v-if="displayValue">: {{ displayValue }}</template>
     </h5>
 
     <div class="flex-1" />

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

@@ -68,7 +68,7 @@ const deleteColumn = () =>
     },
   })
 
-const setAsPrimaryValue = async () => {
+const setAsDisplayValue = async () => {
   try {
     await $api.dbTableColumn.primaryColumnSet(column?.value?.id as string)
 
@@ -280,7 +280,7 @@ const hideField = async () => {
         </a-menu-item>
         <a-divider class="!my-0" />
 
-        <a-menu-item v-if="(!virtual || column?.uidt === UITypes.Formula) && !column?.pv" @click="setAsPrimaryValue">
+        <a-menu-item v-if="(!virtual || column?.uidt === UITypes.Formula) && !column?.pv" @click="setAsDisplayValue">
           <div class="nc-column-set-primary nc-header-menu-item">
             <MdiStar class="text-primary" />
 

packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue

@@ -68,7 +68,7 @@ watch(
 
 const numberOfHiddenFields = computed(() => filteredFieldList.value?.filter((field) => !field.show)?.length)
 
-const gridPrimaryValueField = computed(() => {
+const gridDisplayValueField = computed(() => {
   if (activeView.value?.type !== ViewTypes.GRID) return null
   const pvCol = Object.values(metaColumnById.value)?.find((col) => col?.pv)
   return filteredFieldList.value?.find((field) => field.fk_column_id === pvCol?.id)
@@ -194,7 +194,7 @@ useMenuCloseOnEsc(open)
           <Draggable v-model="fields" item-key="id" @change="onMove($event)">
             <template #item="{ element: field, index: index }">
               <div
-                v-if="filteredFieldList.filter((el) => el !== gridPrimaryValueField).includes(field)"
+                v-if="filteredFieldList.filter((el) => el !== gridDisplayValueField).includes(field)"
                 :key="field.id"
                 class="px-2 py-1 flex items-center"
                 :data-testid="`nc-fields-menu-${field.title}`"
@@ -220,10 +220,10 @@ useMenuCloseOnEsc(open)
             </template>
             <template v-if="activeView?.type === ViewTypes.GRID" #header>
               <div
-                v-if="gridPrimaryValueField"
+                v-if="gridDisplayValueField"
-                :key="`pv-${gridPrimaryValueField.id}`"
+                :key="`pv-${gridDisplayValueField.id}`"
                 class="px-2 py-1 flex items-center"
-                :data-testid="`nc-fields-menu-${gridPrimaryValueField.title}`"
+                :data-testid="`nc-fields-menu-${gridDisplayValueField.title}`"
                 @click.stop
               >
                 <a-tooltip placement="bottom">

packages/nc-gui/components/virtual-cell/BelongsTo.vue

@@ -44,7 +44,7 @@ const listItemsDlg = ref(false)
 
 const { state, isNew, removeLTARRef } = useSmartsheetRowStoreOrThrow()
 
-const { loadRelatedTableMeta, relatedTablePrimaryValueProp, unlink } = useProvideLTARStore(
+const { loadRelatedTableMeta, relatedTableDisplayValueProp, unlink } = useProvideLTARStore(
   column as Ref<Required<ColumnType>>,
   row,
   isNew,
@@ -85,8 +85,8 @@ useSelectedCellKeyupListener(active, (e: KeyboardEvent) => {
 <template>
   <div class="flex w-full chips-wrapper items-center" :class="{ active }">
     <div class="chips flex items-center flex-1">
-      <template v-if="value && relatedTablePrimaryValueProp">
+      <template v-if="value && relatedTableDisplayValueProp">
-        <VirtualCellComponentsItemChip :item="value" :value="value[relatedTablePrimaryValueProp]" @unlink="unlinkRef(value)" />
+        <VirtualCellComponentsItemChip :item="value" :value="value[relatedTableDisplayValueProp]" @unlink="unlinkRef(value)" />
       </template>
     </div>
 

packages/nc-gui/components/virtual-cell/HasMany.vue

@@ -40,7 +40,7 @@ const { isUIAllowed } = useUIPermission()
 
 const { state, isNew, removeLTARRef } = useSmartsheetRowStoreOrThrow()
 
-const { loadRelatedTableMeta, relatedTablePrimaryValueProp, unlink } = useProvideLTARStore(
+const { loadRelatedTableMeta, relatedTableDisplayValueProp, unlink } = useProvideLTARStore(
   column as Ref<Required<ColumnType>>,
   row,
   isNew,
@@ -60,9 +60,9 @@ const localCellValue = computed<any[]>(() => {
 
 const cells = computed(() =>
   localCellValue.value.reduce((acc, curr) => {
-    if (!relatedTablePrimaryValueProp.value) return acc
+    if (!relatedTableDisplayValueProp.value) return acc
 
-    const value = curr[relatedTablePrimaryValueProp.value]
+    const value = curr[relatedTableDisplayValueProp.value]
 
     if (!value) return acc
 

packages/nc-gui/components/virtual-cell/ManyToMany.vue

@@ -42,7 +42,7 @@ const { isUIAllowed } = useUIPermission()
 
 const { state, isNew, removeLTARRef } = useSmartsheetRowStoreOrThrow()
 
-const { loadRelatedTableMeta, relatedTablePrimaryValueProp, unlink } = useProvideLTARStore(
+const { loadRelatedTableMeta, relatedTableDisplayValueProp, unlink } = useProvideLTARStore(
   column as Ref<Required<ColumnType>>,
   row,
   isNew,
@@ -62,9 +62,9 @@ const localCellValue = computed<any[]>(() => {
 
 const cells = computed(() =>
   localCellValue.value.reduce((acc, curr) => {
-    if (!relatedTablePrimaryValueProp.value) return acc
+    if (!relatedTableDisplayValueProp.value) return acc
 
-    const value = curr[relatedTablePrimaryValueProp.value]
+    const value = curr[relatedTableDisplayValueProp.value]
 
     if (!value) return acc
 

packages/nc-gui/components/virtual-cell/components/ListChildItems.vue

@@ -37,7 +37,7 @@ const {
   deleteRelatedRow,
   loadChildrenList,
   childrenListPagination,
-  relatedTablePrimaryValueProp,
+  relatedTableDisplayValueProp,
   unlink,
   getRelatedTableRowId,
   relatedTableMeta,
@@ -146,7 +146,7 @@ const onClick = (row: Row) => {
           >
             <div class="flex items-center">
               <div class="flex-1 overflow-hidden min-w-0">
-                {{ row[relatedTablePrimaryValueProp] }}
+                {{ row[relatedTableDisplayValueProp] }}
                 <span class="text-gray-400 text-[11px] ml-1">(Primary key : {{ getRelatedTableRowId(row) }})</span>
               </div>
 

packages/nc-gui/components/virtual-cell/components/ListItems.vue

@@ -32,7 +32,7 @@ const {
   childrenExcludedList,
   loadChildrenExcludedList,
   childrenExcludedListPagination,
-  relatedTablePrimaryValueProp,
+  relatedTableDisplayValueProp,
   link,
   getRelatedTableRowId,
   relatedTableMeta,
@@ -201,7 +201,7 @@ const activeRow = (vNode?: InstanceType<typeof Card>) => {
             :class="{ 'nc-selected-row': selectedRowIndex === i }"
             @click="linkRow(refRow)"
           >
-            {{ refRow[relatedTablePrimaryValueProp] }}
+            {{ refRow[relatedTableDisplayValueProp] }}
             <span class="hidden group-hover:(inline) text-gray-400 text-[11px] ml-1">
               ({{ $t('labels.primaryKey') }} : {{ getRelatedTableRowId(refRow) }})
             </span>

packages/nc-gui/composables/useExpandedFormStore.ts

@@ -49,7 +49,7 @@ const [useProvideExpandedFormStore, useExpandedFormStore] = useInjectionState((m
   const { sharedView } = useSharedView()
 
   // getters
-  const primaryValue = computed(() => {
+  const displayValue = computed(() => {
     if (row?.value?.row) {
       const col = meta?.value?.columns?.find((c) => c.pv)
 
@@ -199,7 +199,7 @@ const [useProvideExpandedFormStore, useExpandedFormStore] = useInjectionState((m
         addOrEditStackRow(row.value, isNewRow)
       }
 
-      message.success(`${primaryValue.value || 'Row'} updated successfully.`)
+      message.success(`${displayValue.value || 'Row'} updated successfully.`)
 
       changedColumns.value = new Set()
     } catch (e: any) {
@@ -237,7 +237,7 @@ const [useProvideExpandedFormStore, useExpandedFormStore] = useInjectionState((m
     isYou,
     commentsDrawer,
     row,
-    primaryValue,
+    displayValue,
     save,
     changedColumns,
     loadRow,

packages/nc-gui/composables/useLTARStore.ts

@@ -94,14 +94,14 @@ const [useProvideLTARStore, useLTARStore] = useInjectionState(
       await getMeta(colOptions.fk_related_model_id as string)
     }
 
-    const relatedTablePrimaryValueProp = computed(() => {
+    const relatedTableDisplayValueProp = computed(() => {
       return (relatedTableMeta.value?.columns?.find((c) => c.pv) || relatedTableMeta?.value?.columns?.[0])?.title || ''
     })
 
     const relatedTablePrimaryKeyProps = computed(() => {
       return relatedTableMeta.value?.columns?.filter((c) => c.pk)?.map((c) => c.title) ?? []
     })
-    const primaryValueProp = computed(() => {
+    const displayValueProp = computed(() => {
       return (meta.value?.columns?.find((c: Required<ColumnType>) => c.pv) || relatedTableMeta?.value?.columns?.[0])?.title
     })
 
@@ -125,8 +125,8 @@ const [useProvideLTARStore, useLTARStore] = useInjectionState(
                 offset: childrenExcludedListPagination.size * (childrenExcludedListPagination.page - 1),
                 where:
                   childrenExcludedListPagination.query &&
-                  `(${relatedTablePrimaryValueProp.value},like,${childrenExcludedListPagination.query})`,
+                  `(${relatedTableDisplayValueProp.value},like,${childrenExcludedListPagination.query})`,
-                fields: [relatedTablePrimaryValueProp.value, ...relatedTablePrimaryKeyProps.value],
+                fields: [relatedTableDisplayValueProp.value, ...relatedTablePrimaryKeyProps.value],
               } as RequestParams,
             },
           )
@@ -142,8 +142,8 @@ const [useProvideLTARStore, useLTARStore] = useInjectionState(
               offset: childrenExcludedListPagination.size * (childrenExcludedListPagination.page - 1),
               where:
                 childrenExcludedListPagination.query &&
-                `(${relatedTablePrimaryValueProp.value},like,${childrenExcludedListPagination.query})`,
+                `(${relatedTableDisplayValueProp.value},like,${childrenExcludedListPagination.query})`,
-              fields: [relatedTablePrimaryValueProp.value, ...relatedTablePrimaryKeyProps.value],
+              fields: [relatedTableDisplayValueProp.value, ...relatedTablePrimaryKeyProps.value],
             } as any,
           )
         } else {
@@ -160,7 +160,7 @@ const [useProvideLTARStore, useLTARStore] = useInjectionState(
               // todo: where clause is missing from type
               where:
                 childrenExcludedListPagination.query &&
-                `(${relatedTablePrimaryValueProp.value},like,${childrenExcludedListPagination.query})`,
+                `(${relatedTableDisplayValueProp.value},like,${childrenExcludedListPagination.query})`,
             } as any,
           )
         }
@@ -183,7 +183,7 @@ const [useProvideLTARStore, useLTARStore] = useInjectionState(
               limit: String(childrenListPagination.size),
               offset: String(childrenListPagination.size * (childrenListPagination.page - 1)),
               where:
-                childrenListPagination.query && `(${relatedTablePrimaryValueProp.value},like,${childrenListPagination.query})`,
+                childrenListPagination.query && `(${relatedTableDisplayValueProp.value},like,${childrenListPagination.query})`,
             } as any,
           )
         } else {
@@ -198,7 +198,7 @@ const [useProvideLTARStore, useLTARStore] = useInjectionState(
               limit: String(childrenListPagination.size),
               offset: String(childrenListPagination.size * (childrenListPagination.page - 1)),
               where:
-                childrenListPagination.query && `(${relatedTablePrimaryValueProp.value},like,${childrenListPagination.query})`,
+                childrenListPagination.query && `(${relatedTableDisplayValueProp.value},like,${childrenListPagination.query})`,
             } as any,
           )
         }
@@ -320,13 +320,13 @@ const [useProvideLTARStore, useLTARStore] = useInjectionState(
     return {
       relatedTableMeta,
       loadRelatedTableMeta,
-      relatedTablePrimaryValueProp,
+      relatedTableDisplayValueProp,
       childrenExcludedList,
       childrenList,
       rowId,
       childrenExcludedListPagination,
       childrenListPagination,
-      primaryValueProp,
+      displayValueProp,
       meta,
       unlink,
       link,