fix(gui-v2): show notification on error

Signed-off-by: Pranav C <pranavxc@gmail.com>

packages/nc-gui-v2/components/smartsheet/VirtualCell.vue

@@ -29,7 +29,7 @@ const { isLookup, isBt, isRollup, isMm, isHm, isFormula, isCount } = useVirtualC
 
 <template>
   <div
-    class="nc-virtual-cell"
+    class="nc-virtual-cell w-full"
     @keydown.stop.enter.exact="emit('navigate', NavigateDir.NEXT)"
     @keydown.stop.shift.enter.exact="emit('navigate', NavigateDir.PREV)"
   >

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

@@ -25,19 +25,19 @@ await loadRelatedTableMeta()
 </script>
 
 <template>
-  <div class="flex align-center gap-1 w-full chips-wrapper">
+  <div class="flex align-center gap-1 w-full min-full chips-wrapper">
     <div class="chips flex align-center img-container flex-grow hm-items flex-nowrap min-w-0 overflow-hidden">
       <template v-if="value">
         <ItemChip v-for="(ch, i) in value" :key="i" :value="ch[relatedTablePrimaryValueProp]" @unlink="unlink(ch)" />
         <span v-if="value?.length === 10" class="caption pointer ml-1 grey--text" @click="childListDlg = true">more... </span>
       </template>
     </div>
-    <div class="flex-1 flex justify-end gap-1">
+    <div class="flex-grow flex justify-end gap-1">
       <MdiExpandIcon
-        class="select-none transform group-hover:(text-pink-500 scale-120) text-sm nc-action-icon text-gray-500/50 hover:text-gray-500"
+        class="select-none transform text-sm nc-action-icon text-gray-500/50 hover:text-gray-500"
         @click="childListDlg = true"
       />
-      <MdiPlusIcon class="text-sm nc-action-icon text-gray-500/50 hover:text-gray-500" @click="listItemsDlg = true" />
+      <MdiPlusIcon class="select-none text-sm nc-action-icon text-gray-500/50 hover:text-gray-500" @click="listItemsDlg = true" />
     </div>
     <ListItems v-model="listItemsDlg" />
     <ListChildItems v-model="childListDlg" @attach-record=";(childListDlg = false), (listItemsDlg = true)" />

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

@@ -10,8 +10,16 @@ const emit = defineEmits(['update:modelValue', 'attachRecord'])
 
 const vModel = useVModel(props, 'modelValue', emit)
 
-const { childrenList, meta, deleteRelatedRow, loadChildrenList, childrenListPagination, relatedTablePrimaryValueProp, unlink } =
-  useLTARStoreOrThrow()
+const {
+  childrenList,
+  meta,
+  deleteRelatedRow,
+  loadChildrenList,
+  childrenListPagination,
+  relatedTablePrimaryValueProp,
+  unlink,
+  getRelatedTableRowId,
+} = useLTARStoreOrThrow()
 
 watch(vModel, () => {
   if (vModel.value) {
@@ -44,8 +52,10 @@ const unlinkRow = async (row: Record<string, any>) => {
           <a-card v-for="(row, i) of childrenList?.list ?? []" :key="i" class="ma-2 hover:(!bg-gray-200/50 shadow-md)">
             <div class="flex align-center">
               <div class="flex-grow overflow-hidden min-w-0">
-                {{ row[relatedTablePrimaryValueProp] }}
+                {{ row[relatedTablePrimaryValueProp]
+                }}<span class="text-gray-400 text-[11px] ml-1">(Primary key : {{ getRelatedTableRowId(row) }})</span>
               </div>
+              <div class="flex-1"></div>
               <div class="flex gap-2">
                 <MdiUnlinkIcon class="text-xs text-grey hover:(!text-red-500) cursor-pointer" @click="unlinkRow(row)" />
                 <MdiDeleteIcon class="text-xs text-grey hover:(!text-red-500) cursor-pointer" @click="deleteRelatedRow(row)" />

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

@@ -9,8 +9,14 @@ const emit = defineEmits(['update:modelValue'])
 
 const vModel = useVModel(props, 'modelValue', emit)
 
-const { childrenExcludedList, loadChildrenExcludedList, childrenExcludedListPagination, relatedTablePrimaryValueProp, link } =
-  useLTARStoreOrThrow()
+const {
+  childrenExcludedList,
+  loadChildrenExcludedList,
+  childrenExcludedListPagination,
+  relatedTablePrimaryValueProp,
+  link,
+  getRelatedTableRowId,
+} = useLTARStoreOrThrow()
 
 watch(vModel, () => {
   if (vModel.value) {
@@ -44,10 +50,13 @@ const linkRow = async (row: Record<string, any>) => {
           <a-card
             v-for="(row, i) in childrenExcludedList?.list ?? []"
             :key="i"
-            class="ma-2 cursor-pointer hover:(!bg-gray-200/50 shadow-md)"
+            class="ma-2 cursor-pointer hover:(!bg-gray-200/50 shadow-md) group"
             @click="linkRow(row)"
           >
-            {{ row[relatedTablePrimaryValueProp] }}
+            {{ row[relatedTablePrimaryValueProp]
+            }}<span class="hidden group-hover:(inline) text-gray-400 text-[11px] ml-1"
+              >(Primary key : {{ getRelatedTableRowId(row) }})</span
+            >
           </a-card>
         </div>
         <a-pagination

packages/nc-gui-v2/composables/useLTARStore.ts

@@ -111,7 +111,10 @@ const [useProvideLTARStore, useLTARStore] = useInjectionState(
             reloadData?.()
             await loadChildrenList()
           } catch (e: any) {
-            notification.error(await extractSdkResponseErrorMsg(e))
+            notification.error({
+              message: 'Delete failed',
+              description: await extractSdkResponseErrorMsg(e),
+            })
           }
         },
       })
@@ -131,18 +134,23 @@ const [useProvideLTARStore, useLTARStore] = useInjectionState(
       //   this.$toast.info('Unlink is not possible, instead map to another parent.').goAway(3000);
       //   return;
       // }
-
-      // todo: audit
-      await $api.dbTableRow.nestedRemove(
-        NOCO,
-        project.value.title as string,
-        meta.value.title,
-        rowId.value,
-        colOptions.type as 'mm' | 'hm',
-        column.title,
-        getRelatedTableRowId(row) as string,
-      )
-
+      try {
+        // todo: audit
+        await $api.dbTableRow.nestedRemove(
+          NOCO,
+          project.value.title as string,
+          meta.value.title,
+          rowId.value,
+          colOptions.type as 'mm' | 'hm',
+          column.title,
+          getRelatedTableRowId(row) as string,
+        )
+      } catch (e) {
+        notification.error({
+          message: 'Unlink failed',
+          description: await extractSdkResponseErrorMsg(e),
+        })
+      }
       reloadData?.()
       // todo: reload table data and children list
       // this.$emit('loadTableData');
@@ -165,15 +173,22 @@ const [useProvideLTARStore, useLTARStore] = useInjectionState(
       //   this.newRecordModal = false;
       //   return;
       // }
-      await $api.dbTableRow.nestedAdd(
-        NOCO,
-        project.value.title as string,
-        meta.value.title as string,
-        rowId.value,
-        colOptions.type as 'mm' | 'hm',
-        column.title,
-        getRelatedTableRowId(row) as string,
-      )
+      try {
+        await $api.dbTableRow.nestedAdd(
+          NOCO,
+          project.value.title as string,
+          meta.value.title as string,
+          rowId.value,
+          colOptions.type as 'mm' | 'hm',
+          column.title,
+          getRelatedTableRowId(row) as string,
+        )
+      } catch (e) {
+        notification.error({
+          message: 'Linking failed',
+          description: await extractSdkResponseErrorMsg(e),
+        })
+      }
 
       // todo: reload table data and child list
       // this.pid = pid;
@@ -213,6 +228,7 @@ const [useProvideLTARStore, useLTARStore] = useInjectionState(
       loadChildrenList,
       row,
       deleteRelatedRow,
+      getRelatedTableRowId,
     }
   },
   'ltar-store',