Merge pull request #6938 from nocodb/nc-fix/data-prepopulation-create-new-record-link-modal-mm

fix: Fixed issue with data prepopulation in the case of creating new …

packages/nc-gui/assets/style.scss

@@ -678,3 +678,7 @@ input[type='number'] {
     @apply xs:(visible opacity-100 !text-gray-500)
   }
 }
+
+.ant-message-notice-content {
+  @apply !rounded-md;
+}

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

@@ -41,11 +41,13 @@ interface Props {
   showNextPrevIcons?: boolean
   firstRow?: boolean
   lastRow?: boolean
+  closeAfterSave?: boolean
+  newRecordHeader?: string
 }
 
 const props = defineProps<Props>()
 
-const emits = defineEmits(['update:modelValue', 'cancel', 'next', 'prev'])
+const emits = defineEmits(['update:modelValue', 'cancel', 'next', 'prev', 'createdRecord'])
 
 const { activeView } = storeToRefs(useViewsStore())
 
@@ -201,6 +203,12 @@ const save = async () => {
     reloadTrigger?.trigger()
   }
   isUnsavedFormExist.value = false
+
+  if (props.closeAfterSave) {
+    isExpanded.value = false
+  }
+
+  emits('createdRecord', _row.value.row)
 }
 
 const isPreventChangeModalOpen = ref(false)
@@ -486,12 +494,17 @@ export default {
             <div v-if="isLoading">
               <a-skeleton-input class="!h-8 !sm:mr-14 !w-52 mt-1 !rounded-md !overflow-hidden" active size="small" />
             </div>
+            <div
+              v-if="row.rowMeta?.new || props.newRecordHeader"
+              class="flex items-center truncate font-bold text-gray-800 text-xl"
+            >
+              {{ props.newRecordHeader ?? $t('activity.newRecord') }}
+            </div>
             <div v-else-if="displayValue && !row.rowMeta?.new" class="flex items-center font-bold text-gray-800 text-xl w-64">
               <span class="truncate">
                 {{ displayValue }}
               </span>
             </div>
-            <div v-if="row.rowMeta?.new" class="flex items-center truncate font-bold text-gray-800 text-xl">New Record</div>
           </div>
           <div class="flex gap-2">
             <NcButton

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

@@ -5,9 +5,9 @@ import FileIcon from '~icons/nc-icons/file'
 
 import { iconMap } from '#imports'
 
-const { relation, relatedTableTitle, displayValue, showHeader, tableTitle } = defineProps<{
+const { relation, relatedTableTitle, displayValue, header, tableTitle } = defineProps<{
   relation: string
-  showHeader?: boolean
+  header?: string | null
   tableTitle: string
   relatedTableTitle: string
   displayValue?: string
@@ -54,12 +54,12 @@ const relationMeta = computed(() => {
 <template>
   <div class="flex sm:justify-between relative pb-2 items-center">
     <div v-if="!isMobileMode" class="flex text-base font-bold justify-start items-center min-w-36">
-      {{ showHeader ? 'Linked Records' : '' }}
+      {{ header ?? '' }}
     </div>
     <div class="flex flex-row sm:w-[calc(100%-16rem)] xs:w-full items-center justify-center gap-2 xs:(h-full)">
       <div class="flex sm:justify-end w-[calc(50%-1.5rem)] xs:(w-[calc(50%-1.5rem)] h-full)">
         <div
-          class="flex max-w-full xs:w-full flex-shrink-0 xs:(h-full) rounded-md gap-1 text-brand-500 items-center bg-gray-100 px-2 py-1"
+          class="flex max-w-full xs:w-full flex-shrink-0 xs:(h-full) rounded-md gap-1 text-gray-700 items-center bg-gray-100 px-2 py-1"
         >
           <FileIcon class="w-4 h-4 min-w-4" />
           <span class="truncate">

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

@@ -192,7 +192,7 @@ const linkOrUnLink = (rowRef: Record<string, string>, id: string) => {
       :relation="relation"
       :linked-records="childrenListCount"
       :table-title="meta?.title"
-      :show-header="true"
+      :header="$t('activity.linkedRecords')"
       :related-table-title="relatedTableMeta?.title"
       :display-value="row.row[displayValueProp]"
     />

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

@@ -29,6 +29,8 @@ const { isSharedBase } = storeToRefs(useBase())
 
 const filterQueryRef = ref()
 
+const { t } = useI18n()
+
 const { $e } = useNuxtApp()
 
 const {
@@ -53,6 +55,8 @@ const { addLTARRef, isNew, removeLTARRef, state: rowState } = useSmartsheetRowSt
 
 const isPublic = inject(IsPublicInj, ref(false))
 
+const isExpandedFormCloseAfterSave = ref(false)
+
 isChildrenExcludedLoading.value = true
 
 const isForm = inject(IsFormInj, ref(false))
@@ -112,7 +116,8 @@ const newRowState = computed(() => {
   if (isNew.value) return {}
   const colOpt = (injectedColumn?.value as ColumnType)?.colOptions as LinkToAnotherRecordType
   const colInRelatedTable: ColumnType | undefined = relatedTableMeta?.value?.columns?.find((col) => {
-    if (col.uidt !== UITypes.LinkToAnotherRecord) return false
+    // Links as for the case of 'mm' we need the 'Links' column
+    if (!isLinksOrLTAR(col)) return false
     const colOpt1 = col?.colOptions as LinkToAnotherRecordType
     if (colOpt1?.fk_related_model_id !== meta.value.id) return false
 
@@ -157,6 +162,10 @@ const relation = computed(() => {
 
 watch(expandedFormDlg, () => {
   if (!expandedFormDlg.value) {
+    isExpandedFormCloseAfterSave.value = false
+    if (!isForm.value) {
+      loadChildrenList()
+    }
     loadChildrenExcludedList(rowState.value)
   }
 })
@@ -173,6 +182,42 @@ const onClick = (refRow: any, id: string) => {
     linkRow(refRow, Number.parseInt(id))
   }
 }
+
+const addNewRecord = () => {
+  expandedFormRow.value = {}
+  expandedFormDlg.value = true
+  isExpandedFormCloseAfterSave.value = true
+}
+
+const onCreatedRecord = (record: any) => {
+  const msgVNode = h(
+    'div',
+    {
+      class: 'ml-1 inline-flex flex-col gap-1 items-start',
+    },
+    [
+      h(
+        'span',
+        {
+          class: 'font-semibold',
+        },
+        t('activity.recordCreatedLinked'),
+      ),
+      h(
+        'span',
+        {
+          class: 'text-gray-500',
+        },
+        t('activity.gotSavedLinkedSuccessfully', {
+          tableName: relatedTableMeta.value?.title,
+          recordTitle: record[relatedTableDisplayValueProp.value],
+        }),
+      ),
+    ],
+  )
+
+  message.success(msgVNode)
+}
 </script>
 
 <template>
@@ -191,14 +236,14 @@ const onClick = (refRow: any, id: string) => {
       :table-title="meta?.title"
       :related-table-title="relatedTableMeta?.title"
       :display-value="row.row[displayValueProp]"
+      :header="$t('activity.addNewLink')"
     />
-    <div class="!xs:hidden my-3 bg-gray-50 border-gray-50 border-b-2"></div>
     <div class="flex mt-2 mb-2 items-center gap-2">
       <div
         class="flex items-center border-1 p-1 rounded-md w-full border-gray-200"
         :class="{ '!border-primary': childrenExcludedListPagination.query.length !== 0 || isFocused }"
       >
-        <MdiMagnify class="w-5 h-5 ml-2" />
+        <MdiMagnify class="w-5 h-5 ml-2 text-gray-500" />
         <a-input
           ref="filterQueryRef"
           v-model:value="childrenExcludedListPagination.query"
@@ -223,12 +268,7 @@ const onClick = (refRow: any, id: string) => {
         type="secondary"
         :size="isMobileMode ? 'medium' : 'small'"
         class="!text-brand-500"
-        @click="
-          () => {
-            expandedFormRow = {}
-            expandedFormDlg = true
-          }
-        "
+        @click="addNewRecord"
       >
         <div class="flex items-center gap-1 px-4"><MdiPlus v-if="!isMobileMode" /> {{ $t('activity.newRecord') }}</div>
       </NcButton>
@@ -344,6 +384,15 @@ const onClick = (refRow: any, id: string) => {
         :row-id="extractPkFromRow(expandedFormRow, relatedTableMeta.columns as ColumnType[])"
         :state="newRowState"
         use-meta-fields
+        :close-after-save="isExpandedFormCloseAfterSave"
+        :new-record-header="
+          isExpandedFormCloseAfterSave
+            ? $t('activity.tableNameCreateNewRecord', {
+                tableName: relatedTableMeta?.title,
+              })
+            : undefined
+        "
+        @created-record="onCreatedRecord"
       />
     </Suspense>
   </NcModal>

packages/nc-gui/lang/en.json

@@ -713,6 +713,8 @@
     "inviteTeam": "Invite Team",
     "inviteUser": "Invite User",
     "inviteToken": "Invite Token",
+    "linkedRecords": "Linked Records",
+    "addNewLink": "Add New Link",
     "newUser": "New User",
     "editUser": "Edit user",
     "deleteUser": "Remove user from base",
@@ -799,6 +801,9 @@
     "linkRecord": "Link record",
     "addNewRecord": "Add new record",
     "newRecord": "New record",
+    "tableNameCreateNewRecord": "{tableName}: Create new record",
+    "gotSavedLinkedSuccessfully": "{tableName} '{recordTitle}' got saved & linked successfully",
+    "recordCreatedLinked": "Record Created & Linked",
     "useConnectionUrl": "Use Connection URL",
     "toggleCommentsDraw": "Toggle comments draw",
     "expandRecord": "Expand Record",