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 …
1 year ago · 4ede2e4791
6 changed files with 87 additions and 16 deletions
--- a/packages/nc-gui/assets/style.scss
+++ b/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;
+}
--- a/packages/nc-gui/components/smartsheet/expanded-form/index.vue
+++ b/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
--- a/packages/nc-gui/components/virtual-cell/components/Header.vue
+++ b/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">
--- a/packages/nc-gui/components/virtual-cell/components/ListChildItems.vue
+++ b/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]"
    />
--- a/packages/nc-gui/components/virtual-cell/components/ListItems.vue
+++ b/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>
--- a/packages/nc-gui/lang/en.json
+++ b/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",