feat: Virtual column in expanded form

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

packages/nc-gui/components/project/spreadsheet/components/expandedForm.vue

@@ -4,7 +4,8 @@
       <div class="d-100 d-flex ">
         <h5 class="title text-center">
           <v-icon :color="iconColor">mdi-table-arrow-right</v-icon>
-          {{ table }} : {{ localState[primaryValueColumn] }}</h5>
+          {{ table }} : {{ localState[primaryValueColumn] }}
+        </h5>
         <v-spacer>
         </v-spacer>
         <v-btn small text @click="reload">
@@ -46,9 +47,11 @@
                    :key="i" class="row-col  my-4">
                 <div>
                   <label :for="`data-table-form-${col._cn}`" class="body-2 text-capitalize">
-                    <!--              {{ col.cn }}-->
+                    <span v-if="col.virtual">
-
+                      {{ col._cn }}
+                    </span>
                     <header-cell
+                      v-else
                       :is-form="true"
                       :is-foreign-key="col.cn in belongsTo || col.cn in hasMany"
                       :value="col._cn"
@@ -56,6 +59,17 @@
                       :sql-ui="sqlUi"></header-cell>
 
                   </label>
+                  <virtual-cell
+                    v-if="col.virtual"
+                    :column="col"
+                    :row="localState"
+                    :nodes="nodes"
+                    :meta="meta"
+                    :api="api"
+                    :active="true"
+                    :sql-ui="sqlUi"
+                    @loadTableData="reload"
+                  ></virtual-cell>
 
                   <div
                     style="height:100%; width:100%"
@@ -168,13 +182,14 @@ import HeaderCell from "@/components/project/spreadsheet/components/headerCell";
 import EditableCell from "@/components/project/spreadsheet/components/editableCell";
 import dayjs from 'dayjs';
 import colors from "@/mixins/colors";
+import VirtualCell from "@/components/project/spreadsheet/components/virtualCell";
 
 const relativeTime = require('dayjs/plugin/relativeTime')
 const utc = require('dayjs/plugin/utc')
 dayjs.extend(utc)
 dayjs.extend(relativeTime)
 export default {
-  components: {EditableCell, HeaderCell},
+  components: {VirtualCell, EditableCell, HeaderCell},
   mixins: [colors],
   props: {
     dbAlias: String,
@@ -192,7 +207,10 @@ export default {
     iconColor: {
       type: String,
       default: 'primary'
-    }
+    },
+    availableColumns: [Object, Array],
+    nodes: [Object],
+    queryParams: Object
   },
   name: "expanded-form",
   data: () => ({
@@ -286,9 +304,11 @@ export default {
       }
     },
     async reload() {
-      const id = this.meta.columns.filter((c) => c.pk).map(c => this.localState[c._cn]).join('___');
+      // const id = this.meta.columns.filter((c) => c.pk).map(c => this.localState[c._cn]).join('___');
+      const where = this.meta.columns.filter((c) => c.pk).map(c => `(${c._cn},eq,${this.localState[c._cn]})`).join('');
       this.$set(this, 'changedColumns', {});
-      this.localState = await this.api.read(id);
+      // this.localState = await this.api.read(id);
+      this.localState = (await this.api.list({...(this.queryParams || {}), where}) || [{}])[0];
       if (!this.isNew && this.toggleDrawer) {
         this.getAuditsAndComments()
       }
@@ -320,6 +340,7 @@ export default {
       return !!Object.keys(this.changedColumns).length;
     },
     fields() {
+      if (this.availableColumns) return this.availableColumns;
 
       const hideCols = ['created_at', 'updated_at'];
 

packages/nc-gui/components/project/spreadsheet/components/virtualCell.vue

@@ -38,13 +38,17 @@
 </template>
 
 <script>
-import HasManyCell from "@/components/project/spreadsheet/components/virtualCell/hasManyCell";
+import hasManyCell from "@/components/project/spreadsheet/components/virtualCell/hasManyCell";
-import ManyToManyCell from "@/components/project/spreadsheet/components/virtualCell/manyToManyCell";
+import manyToManyCell from "@/components/project/spreadsheet/components/virtualCell/manyToManyCell";
-import BelongsToCell from "@/components/project/spreadsheet/components/virtualCell/belogsToCell";
+import belongsToCell from "@/components/project/spreadsheet/components/virtualCell/belogsToCell";
 
 export default {
   name: "virtual-cell",
-  components: {BelongsToCell, ManyToManyCell, HasManyCell},
+  components: {
+    belongsToCell,
+    manyToManyCell,
+    hasManyCell
+  },
   props: {
     column: [Object],
     row: [Object],

packages/nc-gui/components/project/spreadsheet/components/virtualCell/hasManyCell.vue

@@ -112,8 +112,9 @@
       max-width="100%"
       class=" mx-auto"
       v-model="showExpandModal">
-      <expanded-form
+      <component
         v-if="selectedChild"
+        :is="form"
         :db-alias="nodes.dbAlias"
         :has-many="childMeta.hasMany"
         :belongs-to="childMeta.belongsTo"
@@ -127,7 +128,7 @@
         :primary-value-column="childPrimaryCol"
         :api="childApi"
         icon-color="warning"
-      ></expanded-form>
+      ></component>
     </v-dialog>
 
   </div>
@@ -136,14 +137,12 @@
 <script>
 import colors from "@/mixins/colors";
 import ApiFactory from "@/components/project/spreadsheet/apis/apiFactory";
-import expandedForm from "@/components/project/spreadsheet/components/expandedForm";
 import DlgLabelSubmitCancel from "@/components/utils/dlgLabelSubmitCancel";
 
 export default {
   name: "has-many-cell",
   components: {
-    DlgLabelSubmitCancel,
+    DlgLabelSubmitCancel
-    expandedForm
   },
   mixins: [colors],
   props: {
@@ -165,7 +164,7 @@ export default {
     confirmAction: null,
     confirmMessage: '',
     selectedChild: null,
-    showExpandModal: false
+    showExpandModal: false,
   }),
 
   methods: {
@@ -225,7 +224,7 @@ export default {
 
       this.$emit('loadTableData')
     },
-    editChild(child) {
+   async editChild(child) {
       this.selectedChild = child;
       this.showExpandModal = true;
     }
@@ -241,7 +240,12 @@ export default {
     },
     childPrimaryKey() {
       return this.childMeta && (this.childMeta.columns.find(c => c.pk) || {})._cn
+    },
+    // todo:
+    form(){
+      return () => import("@/components/project/spreadsheet/components/expandedForm")
     }
+
   }
 }
 </script>

packages/nc-gui/components/project/spreadsheet/rowsXcDataTable.vue

@@ -409,6 +409,9 @@
         :primary-value-column="primaryValueColumn"
         :api="api"
         @commented="reloadComments"
+        :availableColumns="availableColumns"
+        :nodes="nodes"
+        :queryParams="queryParams"
       ></expanded-form>
 
     </v-dialog>