feat(gui-v2): shared form LTAR - load referenced table data

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

packages/nc-gui-v2/components/shared-view/Form.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { RelationTypes, UITypes, isVirtualCol } from 'nocodb-sdk'
-import {  ref, useProvideSmartsheetRowStore } from '#imports'
-import { useSharedFormStoreOrThrow } from '#imports'
+import { ref, useProvideSmartsheetRowStore, useSharedFormStoreOrThrow } from '#imports'
 
 const { sharedView, submitForm, v$, formState, notFound, formColumns, meta } = useSharedFormStoreOrThrow()
 
@@ -12,7 +11,10 @@ function isRequired(_columnObj: Record<string, any>, required = false) {
     columnObj.colOptions &&
     columnObj.colOptions.type === RelationTypes.BELONGS_TO
   ) {
-    columnObj = formColumns.value.find((c: Record<string, any>) => c.id === columnObj.colOptions.fk_child_column_id) as Record<string,any>
+    columnObj = formColumns.value.find((c: Record<string, any>) => c.id === columnObj.colOptions.fk_child_column_id) as Record<
+      string,
+      any
+    >
   }
 
   return required || (columnObj && columnObj.rqd && !columnObj.cdf)

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

@@ -89,7 +89,10 @@ const unlinkRef = async (rec: Record<string, any>) => {
       </div>
 
       <div class="flex-1 flex justify-end gap-1 min-h-[30px] align-center">
-        <MdiArrowExpand class="text-sm nc-action-icon text-gray-500/50 hover:text-gray-500 nc-arrow-expand" @click="childListDlg = true" />
+        <MdiArrowExpand
+          class="text-sm nc-action-icon text-gray-500/50 hover:text-gray-500 nc-arrow-expand"
+          @click="childListDlg = true"
+        />
 
         <MdiPlus
           v-if="!readonly"

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

@@ -2,6 +2,7 @@ import type { ColumnType, LinkToAnotherRecordType, PaginatedType, TableType } fr
 import type { ComputedRef, Ref } from 'vue'
 import { Modal, message } from 'ant-design-vue'
 import {
+  IsPublicInj,
   NOCO,
   computed,
   extractSdkResponseErrorMsg,
@@ -39,6 +40,8 @@ const [useProvideLTARStore, useLTARStore] = useInjectionState(
       size: 10,
     })
 
+    const isPublic: boolean = $(inject(IsPublicInj, ref(false)))
+
     const colOptions = $computed(() => column?.value.colOptions as LinkToAnotherRecordType)
 
     // getters
@@ -79,8 +82,29 @@ const [useProvideLTARStore, useLTARStore] = useInjectionState(
 
     const loadChildrenExcludedList = async () => {
       try {
-        /** if new row load all records */
-        if (isNewRow?.value) {
+        if (isPublic) {
+          const route = useRoute()
+          childrenExcludedList.value = await $api.public.dataRelationList(
+            route.params.viewId as string,
+            column?.value?.id,
+            {},
+            {
+              headers: {
+                'xc-password': '',
+              },
+              query: {
+                limit: childrenExcludedListPagination.size,
+                offset: childrenExcludedListPagination.size * (childrenExcludedListPagination.page - 1),
+                where:
+                  childrenExcludedListPagination.query &&
+                  `(${relatedTablePrimaryValueProp.value},like,${childrenExcludedListPagination.query})`,
+                fields: [relatedTablePrimaryValueProp.value, ...relatedTablePrimaryKeyProps.value],
+              } as any,
+            },
+          )
+
+          /** if new row load all records */
+        } else if (isNewRow?.value) {
           childrenExcludedList.value = await $api.dbTableRow.list(
             NOCO,
             project.value.id as string,

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

@@ -25,9 +25,9 @@ const [useProvideSharedFormStore, useSharedFormStore] = useInjectionState(() =>
     () =>
       columns?.value
         ?.filter?.(
-        (f: Record<string, any>) =>
-          f.show && f.uidt !== UITypes.Rollup && f.uidt !== UITypes.Lookup && f.uidt !== UITypes.Formula,
-      )
+          (f: Record<string, any>) =>
+            f.show && f.uidt !== UITypes.Rollup && f.uidt !== UITypes.Lookup && f.uidt !== UITypes.Formula,
+        )
         .sort((a: Record<string, any>, b: Record<string, any>) => a.order - b.order)
         .map<ColumnType & { required: boolean }>((c: ColumnType & { required?: boolean }) => ({
           ...c,
@@ -147,7 +147,7 @@ const [useProvideSharedFormStore, useSharedFormStore] = useInjectionState(() =>
     formState,
     notFound,
     password,
-    submitted
+    submitted,
   }
 }, 'expanded-form-store')