feat(gui-v2): show LTAR as list view in form

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

packages/nc-gui-v2/components/smartsheet/expanded-form/Comments.vue

@@ -1,19 +1,11 @@
 <script setup lang="ts">
 import { useExpandedFormStoreOrThrow } from '#imports'
-import { timeAgo } from '~/utils'
+import { enumColor, timeAgo } from '~/utils'
 import MdiKeyboardReturnIcon from '~icons/mdi/keyboard-return'
 import MdiAccountIcon from '~icons/mdi/account-circle'
-import { enumColor } from '~/utils'
 
-const {
+const { loadCommentsAndLogs, commentsAndLogs, isCommentsLoading, commentsOnly, saveComment, isYou, comment } =
-  loadCommentsAndLogs,
+  useExpandedFormStoreOrThrow()
-  commentsAndLogs,
-  isCommentsLoading,
-  commentsOnly,
-  saveComment,
-  isYou,
-  comment,
-} = useExpandedFormStoreOrThrow()
 
 await loadCommentsAndLogs()
 </script>
@@ -24,16 +16,17 @@ await loadCommentsAndLogs()
 
     <div v-else class="blue-grey">
       <div v-for="log of commentsAndLogs" :key="log.id" class="flex gap-1 text-xs">
-
-
         <MdiAccountIcon class="row-span-2" :class="isYou(log.user) ? 'text-pink-300' : 'text-blue-300 '" />
         <div class="flex-grow">
           <p class="mb-1 caption edited-text text-[10px] text-gray">
             {{ isYou(log.user) ? 'You' : log.user == null ? 'Shared base' : log.user }}
             {{ log.op_type === 'COMMENT' ? 'commented' : log.op_sub_type === 'INSERT' ? 'created' : 'edited' }}
           </p>
-          <p v-if="log.op_type === 'COMMENT'" class="caption mb-0 nc-chip w-full min-h-20px"
+          <p
-             :style="{ backgroundColor: enumColor.light[2] }">
+            v-if="log.op_type === 'COMMENT'"
+            class="caption mb-0 nc-chip w-full min-h-20px"
+            :style="{ backgroundColor: enumColor.light[2] }"
+          >
             {{ log.description }}
           </p>
 
@@ -45,7 +38,8 @@ await loadCommentsAndLogs()
         </div>
       </div>
     </div>
-    <a-checkbox v-model:checked="commentsOnly" @change="loadCommentsAndLogs"><span class="text-xs">Comments only</span>
+    <a-checkbox v-model:checked="commentsOnly" @change="loadCommentsAndLogs"
+      ><span class="text-xs">Comments only</span>
     </a-checkbox>
     <div class="flex-shrink-1 mt-2 d-flex pl-4">
       <v-icon color="pink lighten-2" class="mr-2"> mdi-account-circle</v-icon>
@@ -67,10 +61,10 @@ await loadCommentsAndLogs()
 
 <style scoped>
 :deep(.red.lighten-4) {
-  @apply bg-red-100
+  @apply bg-red-100;
 }
 
 :deep(.green.lighten-4) {
-  @apply bg-green-100
+  @apply bg-green-100;
 }
 </style>

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

@@ -37,7 +37,7 @@ const drawerToggleIcon = computed(() => (commentsDrawer.value ? MdiDoorOpen : Md
 </script>
 
 <template>
-  <a-modal v-model:visible="isExpanded" :footer="null" width="min(90vw,1000px)" :body-style="{padding:0}" :closable="false">
+  <a-modal v-model:visible="isExpanded" :footer="null" width="min(90vw,1000px)" :body-style="{ padding: 0 }" :closable="false">
     <div class="flex p-2">
       <div class="flex-grow" />
       <component :is="drawerToggleIcon" class="" @click="commentsDrawer = !commentsDrawer" />
@@ -51,7 +51,7 @@ const drawerToggleIcon = computed(() => (commentsDrawer.value ? MdiDoorOpen : Md
               <SmartsheetHeaderCell v-else :column="col" />
 
               <div class="!bg-white rounded px-1 min-h-[35px] flex align-center">
-                <SmartsheetVirtualCell v-if="isVirtualCol(col)" v-model="row.row[col.title]" :column="col" />
+                <SmartsheetVirtualCell v-if="isVirtualCol(col)" v-model="row.row[col.title]" :row="row.row" :column="col" />
                 <SmartsheetCell
                   v-else
                   v-model="row.row[col.title]"
@@ -65,7 +65,10 @@ const drawerToggleIcon = computed(() => (commentsDrawer.value ? MdiDoorOpen : Md
           </div>
         </div>
 
-        <div class="nc-comments-drawer pr-3 min-w-0 max-h-[calc(90vh_-_100px)] overflow-y-auto" :class="{ active: commentsDrawer }">
+        <div
+          class="nc-comments-drawer pr-3 min-w-0 max-h-[calc(90vh_-_100px)] overflow-y-auto"
+          :class="{ active: commentsDrawer }"
+        >
           <div class="w-[280px]">
             <Comments v-if="commentsDrawer" />
           </div>

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

@@ -7,6 +7,9 @@ import ListItems from './components/ListItems.vue'
 import { computed, inject, ref, useProvideLTARStore } from '#imports'
 import { CellValueInj, ColumnInj, ReloadViewDataHookInj, RowInj } from '~/context'
 
+import { useProvideLTARStore } from '#imports'
+import { CellValueInj, ColumnInj, IsFormInj, ReloadViewDataHookInj, RowInj } from '~/context'
+
 const column = inject(ColumnInj)!
 
 const cellValue = inject(CellValueInj)!
@@ -15,6 +18,8 @@ const row = inject(RowInj)!
 
 const reloadTrigger = inject(ReloadViewDataHookInj)!
 
+const isForm = inject(IsFormInj)
+
 const listItemsDlg = ref(false)
 
 const childListDlg = ref(false)
@@ -42,7 +47,7 @@ const cells = computed(() =>
 
 <template>
   <div class="flex align-center items-center gap-1 w-full chips-wrapper">
-    <div class="chips flex align-center img-container flex-grow hm-items flex-nowrap min-w-0 overflow-hidden">
+    <div v-if="!isForm" class="chips flex align-center img-container flex-grow hm-items flex-nowrap min-w-0 overflow-hidden">
       <template v-if="cellValue">
         <ItemChip v-for="(cell, i) of cells" :key="i" :value="cell.value" @unlink="unlink(cell.item)" />
 

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

@@ -2,10 +2,10 @@
 import { useLTARStoreOrThrow, useVModel, watch } from '#imports'
 
 const props = defineProps<{ modelValue?: boolean }>()
-
 const emit = defineEmits(['update:modelValue', 'attachRecord'])
 
 const vModel = useVModel(props, 'modelValue', emit)
+const isForm = inject(IsFormInj, false)
 
 const {
   childrenList,
@@ -18,8 +18,8 @@ const {
   getRelatedTableRowId,
 } = useLTARStoreOrThrow()
 
-watch(vModel, (nextVal) => {
+watch([vModel, isForm], (nextVal) => {
-  if (nextVal) {
+  if (nextVal[0] || nextVal[1]) {
     loadChildrenList()
   }
 })
@@ -29,10 +29,17 @@ const unlinkRow = async (row: Record<string, any>) => {
 
   await loadChildrenList()
 }
+const container = computed(() =>
+  isForm
+    ? h('div', {
+        class: 'w-full p-2',
+      })
+    : Modal,
+)
 </script>
 
 <template>
-  <a-modal v-model:visible="vModel" :footer="null" title="Child list">
+  <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 align-center gap-2">
         <div class="flex-1" />
@@ -75,7 +82,7 @@ const unlinkRow = async (row: Record<string, any>) => {
       </template>
       <a-empty v-else class="my-10" />
     </div>
-  </a-modal>
+  </component>
 </template>
 
 <style scoped lang="scss">

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

@@ -1,39 +1,49 @@
-import { useNuxtApp } from '#app'
 import type { ColumnType, TableType } from 'nocodb-sdk'
 import type { Ref } from 'vue'
+import { message } from 'ant-design-vue'
+import { useNuxtApp } from '#app'
 import { useInjectionState } from '#imports'
 import { useApi } from '~/composables/useApi'
+import { useViewData } from '~/composables/useViewData'
+import { ActiveViewInj } from '~/context'
 import { extractPkFromRow } from '~/utils'
-import { message } from 'ant-design-vue'
 
 const [useProvideExpandedFormStore, useExpandedFormStore] = useInjectionState(
   (meta: Ref<TableType>, row: Ref<Record<string, any>>) => {
     const { $e, $state } = useNuxtApp()
     const { api, isLoading: isCommentsLoading, error: commentsError } = useApi()
     // { useGlobalInstance: true },
+    // state
     const commentsOnly = ref(false)
     const commentsAndLogs = ref([])
     const comment = ref('')
 
+    // todo
+    const activeView = inject(ActiveViewInj)
+
+    const { updateOrSaveRow, insertRow } = useViewData(meta, activeView as any)
+
+    // actions
     const loadCommentsAndLogs = async () => {
       if (!row.value) return
       const rowId = extractPkFromRow(row.value.row, meta.value.columns as ColumnType[])
       if (!rowId) return
-      commentsAndLogs.value = (await api.utils.commentList({
+      commentsAndLogs.value =
-        row_id: rowId,
+        (
-        fk_model_id: meta.value.id as string,
+          await api.utils.commentList({
-        comments_only: commentsOnly.value,
+            row_id: rowId,
-      }))?.reverse?.() || []
+            fk_model_id: meta.value.id as string,
+            comments_only: commentsOnly.value,
+          })
+        )?.reverse?.() || []
     }
 
-    const  isYou = (email) => {
+    const isYou = (email) => {
-      return $state.user?.value?.email === email;
+      return $state.user?.value?.email === email
     }
 
     const saveComment = async () => {
       try {
-
-
         if (!row.value || !comment.value) return
         const rowId = extractPkFromRow(row.value.row, meta.value.columns as ColumnType[])
         if (!rowId) return
@@ -60,7 +70,8 @@ const [useProvideExpandedFormStore, useExpandedFormStore] = useInjectionState(
       isCommentsLoading,
       commentsError,
       saveComment,
-      comment,isYou
+      comment,
+      isYou,
     }
   },
   'expanded-form-store',

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

@@ -1,7 +1,6 @@
-import VueDOMPurifyHTML from 'vue-dompurify-html';
+import VueDOMPurifyHTML from 'vue-dompurify-html'
 import { defineNuxtPlugin } from 'nuxt/app'
 
-
 export default defineNuxtPlugin((nuxtApp) => {
   nuxtApp.vueApp.use(VueDOMPurifyHTML)
 })