fix(gui): Id of table which have composite primary key

Signed-off-by: Pranav C <61551451+pranavxc@users.noreply.github.com>

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

@@ -58,7 +58,7 @@
                   <div
                     style="height:100%; width:100%"
                     class="caption xc-input"
-                    v-if="col.ai || (col.pk && selectedRowMeta.new)"
+                    v-if="col.ai || (col.pk && !selectedRowMeta.new)"
                     @click="col.ai  && $toast.info('Auto Increment field is not editable').goAway(3000)"
                   >
                     <input
@@ -236,7 +236,7 @@ export default {
     async getAuditsAndComments() {
       this.loadingLogs = true;
       const data = await this.$store.dispatch('sqlMgr/ActSqlOp', [{dbAlias: this.dbAlias}, 'xcModelRowAuditAndCommentList', {
-        model_id: this.meta.columns.filter((c) => c.pk).map(c => this.localState[c._cn]).join(','),
+        model_id: this.meta.columns.filter((c) => c.pk).map(c => this.localState[c._cn]).join('___'),
         model_name: this.meta._tn
       }])
       this.logs = data.list;
@@ -251,7 +251,7 @@ export default {
     },
     async save() {
       try {
-        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 updatedObj = Object.keys(this.changedColumns).reduce((obj, col) => {
           obj[col] = this.localState[col];
@@ -280,7 +280,7 @@ 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('___');
       this.$set(this, 'changedColumns', {});
       this.localState = await this.api.read(id);
       if (!this.isNew && this.toggleDrawer) {
@@ -295,7 +295,7 @@ export default {
         await this.$store.dispatch('sqlMgr/ActSqlOp', [
           {dbAlias: this.dbAlias},
           'xcAuditCommentInsert', {
-            model_id: this.meta.columns.filter((c) => c.pk).map(c => this.localState[c._cn]).join(','),
+            model_id: this.meta.columns.filter((c) => c.pk).map(c => this.localState[c._cn]).join('___'),
             model_name: this.meta._tn,
             description: this.comment
           }

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

@@ -391,7 +391,7 @@
         :db-alias="nodes.dbAlias"
         :has-many="hasMany"
         :belongs-to="belongsTo"
-        v-if="selectedExpandRowIndex != null"
+        v-if="selectedExpandRowIndex != null && data[selectedExpandRowIndex]"
         @cancel="showExpandModal = false;"
         @input="showExpandModal = false; (data[selectedExpandRowIndex] && data[selectedExpandRowIndex].rowMeta && delete data[selectedExpandRowIndex].rowMeta.new)"
         :table="table"
@@ -721,7 +721,7 @@ export default {
       } else {
         try {
           if (!this.api) return;
-          const id = this.meta.columns.filter((c) => c.pk).map(c => rowObj[c._cn]).join(',');
+          const id = this.meta.columns.filter((c) => c.pk).map(c => rowObj[c._cn]).join('___');
           await this.api.update(id, {
             [column._cn]: rowObj[column._cn]
           }, {[column._cn]: oldRow[column._cn]})
@@ -742,7 +742,7 @@ export default {
       try {
         const rowObj = this.rowContextMenu.row;
         if (!this.rowContextMenu.rowMeta.new) {
-          const id = this.meta && this.meta.columns && this.meta.columns.filter((c) => c.pk).map(c => rowObj[c._cn]).join(',');
+          const id = this.meta && this.meta.columns && this.meta.columns.filter((c) => c.pk).map(c => rowObj[c._cn]).join('___');
           await this.api.delete(id);
         }
         this.data.splice(this.rowContextMenu.index, 1);
@@ -760,7 +760,7 @@ export default {
             continue;
           }
           if (!rowMeta.new) {
-            const id = this.meta.columns.filter((c) => c.pk).map(c => rowObj[c._cn]).join(',');
+            const id = this.meta.columns.filter((c) => c.pk).map(c => rowObj[c._cn]).join('___');
             await this.api.delete(id);
           }
           this.data.splice(row, 1);