refactor(gui-v2): has many and many to many ui corrections

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

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

@@ -81,9 +81,9 @@ const expandedFormRow = ref()
 </script>
 
 <template>
-  <component :is="container" v-model:visible="vModel" :footer="null" title="Child list">
-    <div class="max-h-[max(calc(100vh_-_300px)_,500px)] flex flex-col">
-      <div class="flex mb-4 items-center gap-2">
+  <component :is="container" v-model:visible="vModel" :footer="null" title="Child list" :body-style="{ padding: 0 }">
+    <div class="max-h-[max(calc(100vh_-_300px)_,500px)] flex flex-col py-6">
+      <div class="flex mb-4 items-center gap-2 px-12">
         <div class="flex-1" />
 
         <MdiReload v-if="!isForm" class="cursor-pointer text-gray-500" @click="loadChildrenList" />
@@ -96,11 +96,11 @@ const expandedFormRow = ref()
         </a-button>
       </div>
       <template v-if="(isNew && state?.[column?.title]?.length) || childrenList?.pageInfo?.totalRows">
-        <div class="flex-1 overflow-auto min-h-0">
+        <div class="flex-1 overflow-auto min-h-0 scrollbar-thin-dull px-12">
           <a-card
             v-for="(row, i) of childrenList?.list ?? state?.[column?.title] ?? []"
             :key="i"
-            class="m-2 hover:(!bg-gray-200/50 shadow-md)"
+            class="!my-4 hover:(!bg-gray-200/50 shadow-md)"
             @click="
               () => {
                 expandedFormRow = row
@@ -113,7 +113,6 @@ const expandedFormRow = ref()
                 {{ row[relatedTablePrimaryValueProp] }}
                 <span class="text-gray-400 text-[11px] ml-1">(Primary key : {{ getRelatedTableRowId(row) }})</span>
               </div>
-              <div class="flex-1"></div>
               <div v-if="!readonly" class="flex gap-2">
                 <MdiLinkVariantRemove
                   class="text-xs text-grey hover:(!text-red-500) cursor-pointer"
@@ -128,15 +127,18 @@ const expandedFormRow = ref()
             </div>
           </a-card>
         </div>
-        <a-pagination
-          v-if="!isNew && childrenList?.pageInfo"
-          v-model:current="childrenListPagination.page"
-          v-model:page-size="childrenListPagination.size"
-          class="mt-2 mx-auto"
-          size="small"
-          :total="childrenList.pageInfo.totalRows"
-          show-less-items
-        />
+
+        <div class="flex justify-center mt-6">
+          <a-pagination
+            v-if="!isNew && childrenList?.pageInfo"
+            v-model:current="childrenListPagination.page"
+            v-model:page-size="childrenListPagination.size"
+            class="mt-2 mx-auto"
+            size="small"
+            :total="childrenList.pageInfo.totalRows"
+            show-less-items
+          />
+        </div>
       </template>
       <a-empty
         v-else

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

@@ -97,9 +97,9 @@ const newRowState = computed(() => {
 </script>
 
 <template>
-  <a-modal v-model:visible="vModel" :footer="null" title="Link Record">
-    <div class="max-h-[max(calc(100vh_-_300px)_,500px)] flex flex-col">
-      <div class="flex mb-4 items-center gap-2">
+  <a-modal v-model:visible="vModel" :footer="null" title="Link Record" :body-style="{ padding: 0 }">
+    <div class="max-h-[max(calc(100vh_-_300px)_,500px)] flex flex-col py-6">
+      <div class="flex mb-4 items-center gap-2 px-12">
         <a-input
           v-model:value="childrenExcludedListPagination.query"
           placeholder="Filter query"
@@ -111,11 +111,11 @@ const newRowState = computed(() => {
         <a-button v-if="!isPublic" type="primary" size="small" @click="expandedFormDlg = true">Add new record</a-button>
       </div>
       <template v-if="childrenExcludedList?.pageInfo?.totalRows">
-        <div class="flex-1 overflow-auto min-h-0">
+        <div class="flex-1 overflow-auto min-h-0 scrollbar-thin-dull px-12">
           <a-card
             v-for="(refRow, i) in childrenExcludedList?.list ?? []"
             :key="i"
-            class="m-2 cursor-pointer hover:(!bg-gray-200/50 shadow-md) group"
+            class="!my-4 cursor-pointer hover:(!bg-gray-200/50 shadow-md) group"
             @click="linkRow(refRow)"
           >
             {{ refRow[relatedTablePrimaryValueProp]
@@ -124,15 +124,17 @@ const newRowState = computed(() => {
             >
           </a-card>
         </div>
-        <a-pagination
-          v-if="childrenExcludedList?.pageInfo"
-          v-model:current="childrenExcludedListPagination.page"
-          v-model:page-size="childrenExcludedListPagination.size"
-          class="mt-2 mx-auto !text-xs"
-          size="small"
-          :total="childrenExcludedList.pageInfo.totalRows"
-          show-less-items
-        />
+        <div class="flex justify-center mt-6">
+          <a-pagination
+            v-if="childrenExcludedList?.pageInfo"
+            v-model:current="childrenExcludedListPagination.page"
+            v-model:page-size="childrenExcludedListPagination.size"
+            class="mt-2 !text-xs"
+            size="small"
+            :total="childrenExcludedList.pageInfo.totalRows"
+            show-less-items
+          />
+        </div>
       </template>
       <a-empty v-else class="my-10" :image="Empty.PRESENTED_IMAGE_SIMPLE" />
 

packages/nc-gui-v2/plugins/tele.ts

@@ -14,6 +14,8 @@ export default defineNuxtPlugin(async (nuxtApp) => {
     try {
       if (socket) socket.disconnect()
 
+      // location.href - route.path
+
       // todo: extract base url
       const url = 'http://localhost:8080' // new URL($axios.defaults.baseURL, window.location.href.split(/[?#]/)[0]).href
       socket = io(url, {

packages/nc-gui/nuxt.config.js

@@ -224,6 +224,7 @@ export default {
         config.output.publicPath = './_nuxt/'
       }
 
+
       return config
     }
   },