From 7765ea11277bb9fcb4167dffebe869977c4d16e4 Mon Sep 17 00:00:00 2001
From: Pranav C Balan <pranavxc@gmail.com>
Date: Sun, 13 Jun 2021 13:25:29 +0530
Subject: [PATCH] feat: Add manytomany cell

Signed-off-by: Pranav C Balan <pranavxc@gmail.com>
---
 .../nc-gui/components/auth/userManagement.vue |   2 +-
 .../components/project/appStore/FormInput.vue |   4 +-
 .../{ => components}/cell/attachmentCell.vue  |   0
 .../{ => components}/cell/enumCell.vue        |   0
 .../{ => components}/cell/setListCell.vue     |   0
 .../{editColumn => components}/editColumn.vue |   6 +-
 .../editColumn/customSelectOptions.vue        |   0
 .../editColumn/linkedToAnotherOptions.vue     |   0
 .../editColumn/relationOptions.vue            |   0
 .../spreadsheet/components/editableCell.vue   |  32 +--
 .../components/editableCell/belogsToCell.vue  | 239 ++++++++++++++++
 .../editableCell/booleanCell.vue              |   0
 .../editableCell/datePickerCell.vue           |   0
 .../editableCell/dateTimePickerCell.vue       |   0
 .../editableCell/editableAttachmentCell.vue   |   0
 .../editableCell/enumListEditableCell.vue     |   0
 .../editableCell/enumRadioEditableCell.vue    |   0
 .../editableCell/floatCell.vue                |   0
 .../editableCell/hasManyCell.vue              |   0
 .../editableCell/integerCell.vue              |   0
 .../editableCell/jsonCell.vue                 |   0
 .../components/editableCell/manyToMany.vue    | 270 ++++++++++++++++++
 .../editableCell/setListCheckboxCell.vue      |   0
 .../editableCell/setListEditableCell.vue      |   0
 .../editableCell/textAreaCell.vue             |   0
 .../editableCell/textCell.vue                 |   0
 .../editableCell/timePickerCell.vue           |   0
 .../spreadsheet/components/headerCell.vue     |   2 +-
 .../tableCell.vue                             |  10 +-
 .../project/spreadsheet/mixins/spreadsheet.js |   1 -
 .../project/spreadsheet/rowsXcDataTable.vue   |   3 +-
 .../project/spreadsheet/views/xcGridView.vue  |  39 ++-
 32 files changed, 565 insertions(+), 43 deletions(-)
 rename packages/nc-gui/components/project/spreadsheet/{ => components}/cell/attachmentCell.vue (100%)
 rename packages/nc-gui/components/project/spreadsheet/{ => components}/cell/enumCell.vue (100%)
 rename packages/nc-gui/components/project/spreadsheet/{ => components}/cell/setListCell.vue (100%)
 rename packages/nc-gui/components/project/spreadsheet/{editColumn => components}/editColumn.vue (99%)
 rename packages/nc-gui/components/project/spreadsheet/{ => components}/editColumn/customSelectOptions.vue (100%)
 rename packages/nc-gui/components/project/spreadsheet/{ => components}/editColumn/linkedToAnotherOptions.vue (100%)
 rename packages/nc-gui/components/project/spreadsheet/{ => components}/editColumn/relationOptions.vue (100%)
 create mode 100644 packages/nc-gui/components/project/spreadsheet/components/editableCell/belogsToCell.vue
 rename packages/nc-gui/components/project/spreadsheet/{ => components}/editableCell/booleanCell.vue (100%)
 rename packages/nc-gui/components/project/spreadsheet/{ => components}/editableCell/datePickerCell.vue (100%)
 rename packages/nc-gui/components/project/spreadsheet/{ => components}/editableCell/dateTimePickerCell.vue (100%)
 rename packages/nc-gui/components/project/spreadsheet/{ => components}/editableCell/editableAttachmentCell.vue (100%)
 rename packages/nc-gui/components/project/spreadsheet/{ => components}/editableCell/enumListEditableCell.vue (100%)
 rename packages/nc-gui/components/project/spreadsheet/{ => components}/editableCell/enumRadioEditableCell.vue (100%)
 rename packages/nc-gui/components/project/spreadsheet/{ => components}/editableCell/floatCell.vue (100%)
 rename packages/nc-gui/components/project/spreadsheet/{ => components}/editableCell/hasManyCell.vue (100%)
 rename packages/nc-gui/components/project/spreadsheet/{ => components}/editableCell/integerCell.vue (100%)
 rename packages/nc-gui/components/project/spreadsheet/{ => components}/editableCell/jsonCell.vue (100%)
 create mode 100644 packages/nc-gui/components/project/spreadsheet/components/editableCell/manyToMany.vue
 rename packages/nc-gui/components/project/spreadsheet/{ => components}/editableCell/setListCheckboxCell.vue (100%)
 rename packages/nc-gui/components/project/spreadsheet/{ => components}/editableCell/setListEditableCell.vue (100%)
 rename packages/nc-gui/components/project/spreadsheet/{ => components}/editableCell/textAreaCell.vue (100%)
 rename packages/nc-gui/components/project/spreadsheet/{ => components}/editableCell/textCell.vue (100%)
 rename packages/nc-gui/components/project/spreadsheet/{ => components}/editableCell/timePickerCell.vue (100%)
 rename packages/nc-gui/components/project/spreadsheet/{editableCell => components}/tableCell.vue (84%)

diff --git a/packages/nc-gui/components/auth/userManagement.vue b/packages/nc-gui/components/auth/userManagement.vue
index 191b5f7679..b19e893d54 100644
--- a/packages/nc-gui/components/auth/userManagement.vue
+++ b/packages/nc-gui/components/auth/userManagement.vue
@@ -450,7 +450,7 @@
 </template>
 
 <script>
-import SetListCheckboxCell from "@/components/project/spreadsheet/editableCell/setListCheckboxCell";
+import SetListCheckboxCell from "@/components/project/spreadsheet/components/editableCell/setListCheckboxCell";
 import {enumColor as colors, enumColor} from "@/components/project/spreadsheet/helpers/colors";
 import DlgLabelSubmitCancel from "@/components/utils/dlgLabelSubmitCancel";
 import {isEmail} from "@/helpers";
diff --git a/packages/nc-gui/components/project/appStore/FormInput.vue b/packages/nc-gui/components/project/appStore/FormInput.vue
index d6d067fcf6..3d47399195 100644
--- a/packages/nc-gui/components/project/appStore/FormInput.vue
+++ b/packages/nc-gui/components/project/appStore/FormInput.vue
@@ -12,9 +12,9 @@
 
 <script>
 import TextField from "@/components/project/appStore/inputs/textField";
-import EditableAttachmentCell from "@/components/project/spreadsheet/editableCell/editableAttachmentCell";
+import EditableAttachmentCell from "@/components/project/spreadsheet/components/editableCell/editableAttachmentCell";
 import Attachment from "@/components/project/appStore/inputs/attachment";
-import TextAreaCell from "~/components/project/spreadsheet/editableCell/textAreaCell";
+import TextAreaCell from "~/components/project/spreadsheet/components/editableCell/textAreaCell";
 import PasswordField from "@/components/project/appStore/inputs/passwordField";
 
 export default {
diff --git a/packages/nc-gui/components/project/spreadsheet/cell/attachmentCell.vue b/packages/nc-gui/components/project/spreadsheet/components/cell/attachmentCell.vue
similarity index 100%
rename from packages/nc-gui/components/project/spreadsheet/cell/attachmentCell.vue
rename to packages/nc-gui/components/project/spreadsheet/components/cell/attachmentCell.vue
diff --git a/packages/nc-gui/components/project/spreadsheet/cell/enumCell.vue b/packages/nc-gui/components/project/spreadsheet/components/cell/enumCell.vue
similarity index 100%
rename from packages/nc-gui/components/project/spreadsheet/cell/enumCell.vue
rename to packages/nc-gui/components/project/spreadsheet/components/cell/enumCell.vue
diff --git a/packages/nc-gui/components/project/spreadsheet/cell/setListCell.vue b/packages/nc-gui/components/project/spreadsheet/components/cell/setListCell.vue
similarity index 100%
rename from packages/nc-gui/components/project/spreadsheet/cell/setListCell.vue
rename to packages/nc-gui/components/project/spreadsheet/components/cell/setListCell.vue
diff --git a/packages/nc-gui/components/project/spreadsheet/editColumn/editColumn.vue b/packages/nc-gui/components/project/spreadsheet/components/editColumn.vue
similarity index 99%
rename from packages/nc-gui/components/project/spreadsheet/editColumn/editColumn.vue
rename to packages/nc-gui/components/project/spreadsheet/components/editColumn.vue
index c58fc3631a..57fd0588ac 100644
--- a/packages/nc-gui/components/project/spreadsheet/editColumn/editColumn.vue
+++ b/packages/nc-gui/components/project/spreadsheet/components/editColumn.vue
@@ -300,10 +300,10 @@
 
 <script>
 import {uiTypes} from "@/components/project/spreadsheet/helpers/uiTypes";
-import CustomSelectOptions from "@/components/project/spreadsheet/editColumn/customSelectOptions";
-import RelationOptions from "@/components/project/spreadsheet/editColumn/relationOptions";
+import CustomSelectOptions from "@/components/project/spreadsheet/components/editColumn/customSelectOptions";
+import RelationOptions from "@/components/project/spreadsheet/components/editColumn/relationOptions";
 import DlgLabelSubmitCancel from "@/components/utils/dlgLabelSubmitCancel";
-import LinkedToAnotherOptions from "@/components/project/spreadsheet/editColumn/linkedToAnotherOptions";
+import LinkedToAnotherOptions from "@/components/project/spreadsheet/components/editColumn/linkedToAnotherOptions";
 import {SqliteUi} from "@/helpers/SqliteUi";
 
 export default {
diff --git a/packages/nc-gui/components/project/spreadsheet/editColumn/customSelectOptions.vue b/packages/nc-gui/components/project/spreadsheet/components/editColumn/customSelectOptions.vue
similarity index 100%
rename from packages/nc-gui/components/project/spreadsheet/editColumn/customSelectOptions.vue
rename to packages/nc-gui/components/project/spreadsheet/components/editColumn/customSelectOptions.vue
diff --git a/packages/nc-gui/components/project/spreadsheet/editColumn/linkedToAnotherOptions.vue b/packages/nc-gui/components/project/spreadsheet/components/editColumn/linkedToAnotherOptions.vue
similarity index 100%
rename from packages/nc-gui/components/project/spreadsheet/editColumn/linkedToAnotherOptions.vue
rename to packages/nc-gui/components/project/spreadsheet/components/editColumn/linkedToAnotherOptions.vue
diff --git a/packages/nc-gui/components/project/spreadsheet/editColumn/relationOptions.vue b/packages/nc-gui/components/project/spreadsheet/components/editColumn/relationOptions.vue
similarity index 100%
rename from packages/nc-gui/components/project/spreadsheet/editColumn/relationOptions.vue
rename to packages/nc-gui/components/project/spreadsheet/components/editColumn/relationOptions.vue
diff --git a/packages/nc-gui/components/project/spreadsheet/components/editableCell.vue b/packages/nc-gui/components/project/spreadsheet/components/editableCell.vue
index db7e2d3b6c..4d783f6699 100644
--- a/packages/nc-gui/components/project/spreadsheet/components/editableCell.vue
+++ b/packages/nc-gui/components/project/spreadsheet/components/editableCell.vue
@@ -68,23 +68,23 @@
 </template>
 
 <script>
-import DatePickerCell from "@/components/project/spreadsheet/editableCell/datePickerCell";
-import TextCell from "@/components/project/spreadsheet/editableCell/textCell";
-import DateTimePickerCell from "@/components/project/spreadsheet/editableCell/dateTimePickerCell";
-import TextAreaCell from "@/components/project/spreadsheet/editableCell/textAreaCell";
-import EnumListCell from "@/components/project/spreadsheet/editableCell/enumListEditableCell";
-import JsonCell from "@/components/project/spreadsheet/editableCell/jsonCell";
-import IntegerCell from "@/components/project/spreadsheet/editableCell/integerCell";
-import FloatCell from "@/components/project/spreadsheet/editableCell/floatCell";
-import TimePickerCell from "@/components/project/spreadsheet/editableCell/timePickerCell";
-import BooleanCell from "@/components/project/spreadsheet/editableCell/booleanCell";
-import SetListCheckboxCell from "@/components/project/spreadsheet/editableCell/setListCheckboxCell";
+import DatePickerCell from "@/components/project/spreadsheet/components/editableCell/datePickerCell";
+import TextCell from "@/components/project/spreadsheet/components/editableCell/textCell";
+import DateTimePickerCell from "@/components/project/spreadsheet/components/editableCell/dateTimePickerCell";
+import TextAreaCell from "@/components/project/spreadsheet/components/editableCell/textAreaCell";
+import EnumListCell from "@/components/project/spreadsheet/components/editableCell/enumListEditableCell";
+import JsonCell from "@/components/project/spreadsheet/components/editableCell/jsonCell";
+import IntegerCell from "@/components/project/spreadsheet/components/editableCell/integerCell";
+import FloatCell from "@/components/project/spreadsheet/components/editableCell/floatCell";
+import TimePickerCell from "@/components/project/spreadsheet/components/editableCell/timePickerCell";
+import BooleanCell from "@/components/project/spreadsheet/components/editableCell/booleanCell";
+import SetListCheckboxCell from "@/components/project/spreadsheet/components/editableCell/setListCheckboxCell";
 import cell from "@/components/project/spreadsheet/mixins/cell";
-import EnumRadioEditableCell from "@/components/project/spreadsheet/editableCell/enumRadioEditableCell";
-import EditableAttachmentCell from "@/components/project/spreadsheet/editableCell/editableAttachmentCell";
-import EnumCell from "@/components/project/spreadsheet/cell/enumCell";
-import SetListEditableCell from "@/components/project/spreadsheet/editableCell/setListEditableCell";
-import SetListCell from "@/components/project/spreadsheet/cell/setListCell";
+import EnumRadioEditableCell from "@/components/project/spreadsheet/components/editableCell/enumRadioEditableCell";
+import EditableAttachmentCell from "@/components/project/spreadsheet/components/editableCell/editableAttachmentCell";
+import EnumCell from "@/components/project/spreadsheet/components/cell/enumCell";
+import SetListEditableCell from "@/components/project/spreadsheet/components/editableCell/setListEditableCell";
+import SetListCell from "@/components/project/spreadsheet/components/cell/setListCell";
 
 export default {
   name: "editable-cell",
diff --git a/packages/nc-gui/components/project/spreadsheet/components/editableCell/belogsToCell.vue b/packages/nc-gui/components/project/spreadsheet/components/editableCell/belogsToCell.vue
new file mode 100644
index 0000000000..bc713a43c6
--- /dev/null
+++ b/packages/nc-gui/components/project/spreadsheet/components/editableCell/belogsToCell.vue
@@ -0,0 +1,239 @@
+<template>
+  <div class="d-flex">
+    <div class="d-flex align-center img-container flex-grow-1 hm-items">
+      <template v-if="value">
+        <v-chip small  :color="colors[0]">{{
+            Object.values(value)[1]
+          }}
+        </v-chip>
+      </template>
+    </div>
+    <div class="d-flex align-center justify-center px-1 flex-shrink-1">
+      <x-icon small :color="['primary','grey']" @click="showNewRecordModal">mdi-plus</x-icon>
+    </div>
+
+
+    <v-dialog v-if="newRecordModal" v-model="newRecordModal" width="600">
+      <v-card width="600" color="backgroundColor">
+        <v-card-title class="textColor--text mx-2">Add Record</v-card-title>
+        <v-card-text>
+          <v-text-field
+            hide-details
+            dense
+            outlined
+            placeholder="Search record"
+            class="mb-2 mx-2 caption"
+          />
+
+          <div class="items-container">
+            <template v-if="list">
+              <v-card
+                v-for="(p,i) in list.list"
+                class="ma-2  child-card"
+                outlined
+                v-ripple
+                @click="addParentToChild(p)"
+                :key="i"
+              >
+                <v-card-title class="primary-value textColor--text text--lighten-2">{{ p[parentPrimaryCol] }}
+                  <span class="grey--text caption primary-key"
+                        v-if="parentPrimaryKey">(Primary Key : {{ p[parentPrimaryKey] }})</span>
+                </v-card-title>
+              </v-card>
+            </template>
+          </div>
+        </v-card-text>
+        <v-card-actions class="justify-center pb-6  ">
+          <v-btn small outlined class="caption" color="primary">
+            <v-icon>mdi-plus</v-icon>
+            Add New Record
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+
+
+
+
+  </div>
+</template>
+
+<script>
+import colors from "@/mixins/colors";
+import ApiFactory from "@/components/project/spreadsheet/apis/apiFactory";
+import DlgLabelSubmitCancel from "@/components/utils/dlgLabelSubmitCancel";
+
+export default {
+  name: "belongs-to-cell",
+  mixins: [colors],
+  props: {
+    value: [Object, Array],
+    meta: [Object],
+    bt: Object,
+    nodes: [Object],
+    row: [Object],
+    api: [Object, Function],
+  },
+  data: () => ({
+    newRecordModal: false,
+    parentListModal: false,
+    parentMeta: null,
+    list: null,
+    childList: null,
+    dialogShow: false,
+    confirmAction: null,
+    confirmMessage: ''
+  }),
+
+  methods: {
+    async showParentListModal() {
+      this.parentListModal = true;
+      await this.getParentMeta();
+      const pid = this.meta.columns.filter((c) => c.pk).map(c => this.row[c._cn]).join(',');
+      const _cn = this.parentMeta.columns.find(c => c.cn === this.hm.cn)._cn;
+      this.childList = await this.parentApi.paginatedList({
+        where: `(${_cn},eq,${pid})`
+      })
+    },
+    async removeChild(child) {
+      this.dialogShow = true;
+      this.confirmMessage =
+        'Do you want to delete the record?';
+      this.confirmAction = async act => {
+        if (act === 'hideDialog') {
+          this.dialogShow = false;
+        } else {
+          const id = this.parentMeta.columns.filter((c) => c.pk).map(c => child[c._cn]).join(',');
+          await this.parentApi.delete(id)
+          this.showParentListModal();
+          this.dialogShow = false;
+          this.$emit('loadTableData')
+        }
+      }
+    },
+    async getParentMeta() {
+      // todo: optimize
+      if (!this.parentMeta) {
+        const parentTableData = await this.$store.dispatch('sqlMgr/ActSqlOp', [{
+          env: this.nodes.env,
+          dbAlias: this.nodes.dbAlias
+        }, 'tableXcModelGet', {
+          tn: this.bt.rtn
+        }]);
+        this.parentMeta = JSON.parse(parentTableData.meta)
+      }
+    },
+    async showNewRecordModal() {
+      this.newRecordModal = true;
+      await this.getParentMeta();
+      this.list = await this.parentApi.paginatedList({})
+    },
+    async addParentToChild(parent) {
+      const pid = this.parentMeta.columns.filter((c) => c.pk).map(c => parent[c._cn]).join(',');
+      const id = this.meta.columns.filter((c) => c.pk).map(c => this.row[c._cn]).join(',');
+      const _cn = this.meta.columns.find(c => c.cn === this.bt.cn)._cn;
+
+      await this.api.update(id, {
+        [_cn]: pid
+      }, {
+        [_cn]: parent[this.parentPrimaryKey]
+      });
+      this.newRecordModal = false;
+
+      this.$emit('loadTableData')
+    }
+  },
+  computed: {
+    parentApi() {
+      return this.parentMeta && this.parentMeta._tn ?
+        ApiFactory.create(this.$store.getters['project/GtrProjectType'],
+          this.parentMeta && this.parentMeta._tn, this.parentMeta && this.parentMeta.columns, this) : null;
+    },
+    parentPrimaryCol() {
+      return this.parentMeta && (this.parentMeta.columns.find(c => c.pv) || {})._cn
+    },
+    parentPrimaryKey() {
+      return this.parentMeta && (this.parentMeta.columns.find(c => c.pk) || {})._cn
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.items-container {
+  overflow-x: visible;
+  max-height: min(500px, 60vh);
+  overflow-y: auto;
+}
+
+.primary-value {
+  .primary-key {
+    display: none;
+    margin-left: .5em;
+  }
+
+  &:hover .primary-key {
+    display: inline;
+  }
+}
+
+
+.child-list-modal {
+  position: relative;
+
+  .remove-child-icon {
+    position: absolute;
+    right: 10px;
+    top: 10px;
+    bottom: 10px;
+    opacity: 0;
+  }
+
+  &:hover .remove-child-icon {
+    opacity: 1;
+  }
+
+}
+
+.child-card {
+  cursor: pointer;
+
+  &:hover {
+    box-shadow: 0 0 .2em var(--v-textColor-lighten5)
+  }
+}
+
+.hm-items {
+  min-width: 200px;
+  max-width: 400px;
+  flex-wrap: wrap;
+  row-gap: 3px;
+  gap:3px;
+  margin: 3px auto;
+}
+
+</style>
+<!--
+/**
+ * @copyright Copyright (c) 2021, Xgene Cloud Ltd
+ *
+ * @author Naveen MR <oof1lab@gmail.com>
+ * @author Pranav C Balan <pranavxc@gmail.com>
+ *
+ * @license GNU AGPL version 3 or any later version
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+-->
diff --git a/packages/nc-gui/components/project/spreadsheet/editableCell/booleanCell.vue b/packages/nc-gui/components/project/spreadsheet/components/editableCell/booleanCell.vue
similarity index 100%
rename from packages/nc-gui/components/project/spreadsheet/editableCell/booleanCell.vue
rename to packages/nc-gui/components/project/spreadsheet/components/editableCell/booleanCell.vue
diff --git a/packages/nc-gui/components/project/spreadsheet/editableCell/datePickerCell.vue b/packages/nc-gui/components/project/spreadsheet/components/editableCell/datePickerCell.vue
similarity index 100%
rename from packages/nc-gui/components/project/spreadsheet/editableCell/datePickerCell.vue
rename to packages/nc-gui/components/project/spreadsheet/components/editableCell/datePickerCell.vue
diff --git a/packages/nc-gui/components/project/spreadsheet/editableCell/dateTimePickerCell.vue b/packages/nc-gui/components/project/spreadsheet/components/editableCell/dateTimePickerCell.vue
similarity index 100%
rename from packages/nc-gui/components/project/spreadsheet/editableCell/dateTimePickerCell.vue
rename to packages/nc-gui/components/project/spreadsheet/components/editableCell/dateTimePickerCell.vue
diff --git a/packages/nc-gui/components/project/spreadsheet/editableCell/editableAttachmentCell.vue b/packages/nc-gui/components/project/spreadsheet/components/editableCell/editableAttachmentCell.vue
similarity index 100%
rename from packages/nc-gui/components/project/spreadsheet/editableCell/editableAttachmentCell.vue
rename to packages/nc-gui/components/project/spreadsheet/components/editableCell/editableAttachmentCell.vue
diff --git a/packages/nc-gui/components/project/spreadsheet/editableCell/enumListEditableCell.vue b/packages/nc-gui/components/project/spreadsheet/components/editableCell/enumListEditableCell.vue
similarity index 100%
rename from packages/nc-gui/components/project/spreadsheet/editableCell/enumListEditableCell.vue
rename to packages/nc-gui/components/project/spreadsheet/components/editableCell/enumListEditableCell.vue
diff --git a/packages/nc-gui/components/project/spreadsheet/editableCell/enumRadioEditableCell.vue b/packages/nc-gui/components/project/spreadsheet/components/editableCell/enumRadioEditableCell.vue
similarity index 100%
rename from packages/nc-gui/components/project/spreadsheet/editableCell/enumRadioEditableCell.vue
rename to packages/nc-gui/components/project/spreadsheet/components/editableCell/enumRadioEditableCell.vue
diff --git a/packages/nc-gui/components/project/spreadsheet/editableCell/floatCell.vue b/packages/nc-gui/components/project/spreadsheet/components/editableCell/floatCell.vue
similarity index 100%
rename from packages/nc-gui/components/project/spreadsheet/editableCell/floatCell.vue
rename to packages/nc-gui/components/project/spreadsheet/components/editableCell/floatCell.vue
diff --git a/packages/nc-gui/components/project/spreadsheet/editableCell/hasManyCell.vue b/packages/nc-gui/components/project/spreadsheet/components/editableCell/hasManyCell.vue
similarity index 100%
rename from packages/nc-gui/components/project/spreadsheet/editableCell/hasManyCell.vue
rename to packages/nc-gui/components/project/spreadsheet/components/editableCell/hasManyCell.vue
diff --git a/packages/nc-gui/components/project/spreadsheet/editableCell/integerCell.vue b/packages/nc-gui/components/project/spreadsheet/components/editableCell/integerCell.vue
similarity index 100%
rename from packages/nc-gui/components/project/spreadsheet/editableCell/integerCell.vue
rename to packages/nc-gui/components/project/spreadsheet/components/editableCell/integerCell.vue
diff --git a/packages/nc-gui/components/project/spreadsheet/editableCell/jsonCell.vue b/packages/nc-gui/components/project/spreadsheet/components/editableCell/jsonCell.vue
similarity index 100%
rename from packages/nc-gui/components/project/spreadsheet/editableCell/jsonCell.vue
rename to packages/nc-gui/components/project/spreadsheet/components/editableCell/jsonCell.vue
diff --git a/packages/nc-gui/components/project/spreadsheet/components/editableCell/manyToMany.vue b/packages/nc-gui/components/project/spreadsheet/components/editableCell/manyToMany.vue
new file mode 100644
index 0000000000..127eb22e9d
--- /dev/null
+++ b/packages/nc-gui/components/project/spreadsheet/components/editableCell/manyToMany.vue
@@ -0,0 +1,270 @@
+<template>
+  <div class="d-flex">
+
+
+    <div class="d-flex align-center img-container flex-grow-1 hm-items">
+      <template v-if="value">
+        <v-chip small v-for="(v,j) in value.map(v=>Object.values(v)[2])"
+                :color="colors[j%colors.length]" :key="j">{{
+            v
+          }}
+        </v-chip>
+      </template>
+    </div>
+    <div class="d-flex align-center justify-center px-1 flex-shrink-1">
+      <x-icon small :color="['primary','grey']" @click="showNewRecordModal">mdi-plus</x-icon>
+    </div>
+
+
+    <v-dialog v-if="newRecordModal" v-model="newRecordModal" width="600">
+      <v-card width="600" color="backgroundColor">
+        <v-card-title class="textColor--text mx-2">Add Record</v-card-title>
+        <v-card-text>
+          <v-text-field
+            hide-details
+            dense
+            outlined
+            placeholder="Search record"
+            class="mb-2 mx-2 caption"
+          />
+
+          <div class="items-container">
+            <template v-if="list">
+              <v-card
+                v-for="(p,i) in list.list"
+                class="ma-2  child-card"
+                outlined
+                v-ripple
+                @click="addChildToParent(p)"
+                :key="i"
+              >
+                <v-card-title class="primary-value textColor--text text--lighten-2">{{ p[childPrimaryCol] }}
+                  <span class="grey--text caption primary-key"
+                        v-if="childPrimaryKey">(Primary Key : {{ p[childPrimaryKey] }})</span>
+                </v-card-title>
+              </v-card>
+            </template>
+          </div>
+        </v-card-text>
+        <v-card-actions class="justify-center pb-6  ">
+          <v-btn small outlined class="caption" color="primary">
+            <v-icon>mdi-plus</v-icon>
+            Add New Record
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+
+
+  </div>
+</template>
+
+<script>
+import colors from "@/mixins/colors";
+import ApiFactory from "@/components/project/spreadsheet/apis/apiFactory";
+import DlgLabelSubmitCancel from "@/components/utils/dlgLabelSubmitCancel";
+
+export default {
+  name: "many-to-many",
+  mixins: [colors],
+  props: {
+    value: [Object, Array],
+    meta: [Object],
+    mm: Object,
+    nodes: [Object],
+    row: [Object],
+    api: [Object, Function],
+  },
+  data: () => ({
+    newRecordModal: false,
+    childListModal: false,
+    childMeta: null,
+    assocMeta: null,
+    list: null,
+    childList: null,
+    dialogShow: false,
+    confirmAction: null,
+    confirmMessage: ''
+  }),
+
+  methods: {
+    async showChildListModal() {
+      this.childListModal = true;
+      await this.getChildMeta();
+      const pid = this.meta.columns.filter((c) => c.pk).map(c => this.row[c._cn]).join(',');
+      const _cn = this.childMeta.columns.find(c => c.cn === this.hm.cn)._cn;
+      this.childList = await this.childApi.paginatedList({
+        where: `(${_cn},eq,${pid})`
+      })
+    },
+    async removeChild(child) {
+      this.dialogShow = true;
+      this.confirmMessage =
+        'Do you want to delete the record?';
+      this.confirmAction = async act => {
+        if (act === 'hideDialog') {
+          this.dialogShow = false;
+        } else {
+          const id = this.childMeta.columns.filter((c) => c.pk).map(c => child[c._cn]).join(',');
+          await this.childApi.delete(id)
+          this.showChildListModal();
+          this.dialogShow = false;
+          this.$emit('loadTableData')
+        }
+      }
+    },
+    async getChildMeta() {
+      // todo: optimize
+      if (!this.childMeta) {
+        const parentTableData = await this.$store.dispatch('sqlMgr/ActSqlOp', [{
+          env: this.nodes.env,
+          dbAlias: this.nodes.dbAlias
+        }, 'tableXcModelGet', {
+          tn: this.mm.rtn
+        }]);
+        this.childMeta = JSON.parse(parentTableData.meta)
+      }
+    },
+    async getAssociateTableMeta() {
+      // todo: optimize
+      if (!this.childMeta) {
+        const assocTableData = await this.$store.dispatch('sqlMgr/ActSqlOp', [{
+          env: this.nodes.env,
+          dbAlias: this.nodes.dbAlias
+        }, 'tableXcModelGet', {
+          tn: this.mm.vtn
+        }]);
+        this.assocMeta = JSON.parse(assocTableData.meta)
+      }
+    },
+    async showNewRecordModal() {
+      this.newRecordModal = true;
+      await Promise.all([this.getChildMeta(), this.getAssociateTableMeta()]);
+      this.list = await this.childApi.paginatedList({})
+    },
+    async addChildToParent(child) {
+      const cid = this.childMeta.columns.filter((c) => c.pk).map(c => child[c._cn]).join(',');
+      const pid = this.meta.columns.filter((c) => c.pk).map(c => this.row[c._cn]).join(',');
+
+      const vcidCol = this.assocMeta.columns.find(c => c.cn === this.mm.vrcn)._cn;
+      const vpidCol = this.assocMeta.columns.find(c => c.cn === this.mm.vcn)._cn;
+
+      await this.assocApi.insert({
+        [vcidCol]: cid,
+        [vpidCol]: pid
+      });
+      this.newRecordModal = false;
+
+      this.$emit('loadTableData')
+    }
+  },
+  computed: {
+    childApi() {
+      return this.childMeta && this.childMeta._tn ?
+        ApiFactory.create(
+          this.$store.getters['project/GtrProjectType'],
+          this.childMeta._tn,
+          this.childMeta.columns,
+          this
+        ) : null;
+    },
+    assocApi() {
+      return this.assocMeta && this.assocMeta._tn ?
+        ApiFactory.create(
+          this.$store.getters['project/GtrProjectType'],
+          this.assocMeta._tn,
+          this.assocMeta.columns,
+          this
+        ) : null;
+    },
+    childPrimaryCol() {
+      return this.childMeta && (this.childMeta.columns.find(c => c.pv) || {})._cn
+    },
+    childPrimaryKey() {
+      return this.childMeta && (this.childMeta.columns.find(c => c.pk) || {})._cn
+    },
+    parentPrimaryKey() {
+      return this.meta && (this.meta.columns.find(c => c.pk) || {})._cn
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.items-container {
+  overflow-x: visible;
+  max-height: min(500px, 60vh);
+  overflow-y: auto;
+}
+
+.primary-value {
+  .primary-key {
+    display: none;
+    margin-left: .5em;
+  }
+
+  &:hover .primary-key {
+    display: inline;
+  }
+}
+
+
+.child-list-modal {
+  position: relative;
+
+  .remove-child-icon {
+    position: absolute;
+    right: 10px;
+    top: 10px;
+    bottom: 10px;
+    opacity: 0;
+  }
+
+  &:hover .remove-child-icon {
+    opacity: 1;
+  }
+
+}
+
+.child-card {
+  cursor: pointer;
+
+  &:hover {
+    box-shadow: 0 0 .2em var(--v-textColor-lighten5)
+  }
+}
+
+.hm-items {
+  min-width: 200px;
+  max-width: 400px;
+  flex-wrap: wrap;
+  row-gap: 3px;
+  gap: 3px;
+  margin: 3px auto;
+}
+
+</style>
+<!--
+/**
+ * @copyright Copyright (c) 2021, Xgene Cloud Ltd
+ *
+ * @author Naveen MR <oof1lab@gmail.com>
+ * @author Pranav C Balan <pranavxc@gmail.com>
+ *
+ * @license GNU AGPL version 3 or any later version
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+-->
diff --git a/packages/nc-gui/components/project/spreadsheet/editableCell/setListCheckboxCell.vue b/packages/nc-gui/components/project/spreadsheet/components/editableCell/setListCheckboxCell.vue
similarity index 100%
rename from packages/nc-gui/components/project/spreadsheet/editableCell/setListCheckboxCell.vue
rename to packages/nc-gui/components/project/spreadsheet/components/editableCell/setListCheckboxCell.vue
diff --git a/packages/nc-gui/components/project/spreadsheet/editableCell/setListEditableCell.vue b/packages/nc-gui/components/project/spreadsheet/components/editableCell/setListEditableCell.vue
similarity index 100%
rename from packages/nc-gui/components/project/spreadsheet/editableCell/setListEditableCell.vue
rename to packages/nc-gui/components/project/spreadsheet/components/editableCell/setListEditableCell.vue
diff --git a/packages/nc-gui/components/project/spreadsheet/editableCell/textAreaCell.vue b/packages/nc-gui/components/project/spreadsheet/components/editableCell/textAreaCell.vue
similarity index 100%
rename from packages/nc-gui/components/project/spreadsheet/editableCell/textAreaCell.vue
rename to packages/nc-gui/components/project/spreadsheet/components/editableCell/textAreaCell.vue
diff --git a/packages/nc-gui/components/project/spreadsheet/editableCell/textCell.vue b/packages/nc-gui/components/project/spreadsheet/components/editableCell/textCell.vue
similarity index 100%
rename from packages/nc-gui/components/project/spreadsheet/editableCell/textCell.vue
rename to packages/nc-gui/components/project/spreadsheet/components/editableCell/textCell.vue
diff --git a/packages/nc-gui/components/project/spreadsheet/editableCell/timePickerCell.vue b/packages/nc-gui/components/project/spreadsheet/components/editableCell/timePickerCell.vue
similarity index 100%
rename from packages/nc-gui/components/project/spreadsheet/editableCell/timePickerCell.vue
rename to packages/nc-gui/components/project/spreadsheet/components/editableCell/timePickerCell.vue
diff --git a/packages/nc-gui/components/project/spreadsheet/components/headerCell.vue b/packages/nc-gui/components/project/spreadsheet/components/headerCell.vue
index 857b227324..4b9b9374c7 100644
--- a/packages/nc-gui/components/project/spreadsheet/components/headerCell.vue
+++ b/packages/nc-gui/components/project/spreadsheet/components/headerCell.vue
@@ -92,7 +92,7 @@
 
 <script>
 import cell from "@/components/project/spreadsheet/mixins/cell";
-import EditColumn from "@/components/project/spreadsheet/editColumn/editColumn";
+import EditColumn from "@/components/project/spreadsheet/components/editColumn";
 
 export default {
   components: {EditColumn},
diff --git a/packages/nc-gui/components/project/spreadsheet/editableCell/tableCell.vue b/packages/nc-gui/components/project/spreadsheet/components/tableCell.vue
similarity index 84%
rename from packages/nc-gui/components/project/spreadsheet/editableCell/tableCell.vue
rename to packages/nc-gui/components/project/spreadsheet/components/tableCell.vue
index 0b1aef658f..849e1d835c 100644
--- a/packages/nc-gui/components/project/spreadsheet/editableCell/tableCell.vue
+++ b/packages/nc-gui/components/project/spreadsheet/components/tableCell.vue
@@ -11,11 +11,11 @@
 
 <script>
 import cell from "@/components/project/spreadsheet/mixins/cell";
-import SetListCell from "@/components/project/spreadsheet/cell/setListCell";
-import EnumCell from "@/components/project/spreadsheet/cell/enumCell";
-import AttachmentCell from "@/components/project/spreadsheet/cell/attachmentCell";
-import EditableAttachmentCell from "@/components/project/spreadsheet/editableCell/editableAttachmentCell";
-import EnumListEditableCell from "@/components/project/spreadsheet/editableCell/enumListEditableCell";
+import SetListCell from "@/components/project/spreadsheet/components/cell/setListCell";
+import EnumCell from "@/components/project/spreadsheet/components/cell/enumCell";
+import AttachmentCell from "@/components/project/spreadsheet/components/cell/attachmentCell";
+import EditableAttachmentCell from "@/components/project/spreadsheet/components/editableCell/editableAttachmentCell";
+import EnumListEditableCell from "@/components/project/spreadsheet/components/editableCell/enumListEditableCell";
 
 export default {
   name: "tableCell",
diff --git a/packages/nc-gui/components/project/spreadsheet/mixins/spreadsheet.js b/packages/nc-gui/components/project/spreadsheet/mixins/spreadsheet.js
index 3c7dd714b2..6ddf188000 100644
--- a/packages/nc-gui/components/project/spreadsheet/mixins/spreadsheet.js
+++ b/packages/nc-gui/components/project/spreadsheet/mixins/spreadsheet.js
@@ -71,7 +71,6 @@ export default {
         columns = (this.meta && this.meta.columns && this.meta.columns.filter(c => !(c.pk && c.ai) && !hideCols.includes(c.cn))) || [];
       }
 
-
       if (this.fieldsOrder.length) {
         return [...columns].sort((c1, c2) => {
           const i1 = this.fieldsOrder.indexOf(c1._cn);
diff --git a/packages/nc-gui/components/project/spreadsheet/rowsXcDataTable.vue b/packages/nc-gui/components/project/spreadsheet/rowsXcDataTable.vue
index be804a3615..42767da4b1 100644
--- a/packages/nc-gui/components/project/spreadsheet/rowsXcDataTable.vue
+++ b/packages/nc-gui/components/project/spreadsheet/rowsXcDataTable.vue
@@ -167,6 +167,7 @@
               :visibleColLength="visibleColLength"
               :meta="meta"
               :isVirtual="selectedView.type === 'vtable'"
+              :api="api"
               @onNewColCreation="onNewColCreation"
               @onCellValueChange="onCellValueChange"
               @insertNewRow="insertNewRow"
@@ -429,7 +430,7 @@ import ApiFactory from "@/components/project/spreadsheet/apis/apiFactory";
 import Table from "@/components/project/table";
 import {SqlUI} from "@/helpers/SqlUiFactory";
 
-import NewColumn from "@/components/project/spreadsheet/editColumn/editColumn";
+import NewColumn from "@/components/project/spreadsheet/components/editColumn";
 import {mapActions} from "vuex";
 import AdditionalFeatures from "@/components/project/spreadsheet/overlay/additinalFeatures";
 import ColumnFilter from "~/components/project/spreadsheet/components/columnFilterMenu";
diff --git a/packages/nc-gui/components/project/spreadsheet/views/xcGridView.vue b/packages/nc-gui/components/project/spreadsheet/views/xcGridView.vue
index 33e8710e88..d7a71dcfe0 100644
--- a/packages/nc-gui/components/project/spreadsheet/views/xcGridView.vue
+++ b/packages/nc-gui/components/project/spreadsheet/views/xcGridView.vue
@@ -291,10 +291,15 @@
 
 
         <td v-for="(bt,i) in meta.belongsTo" class="caption" :key="i">
-          <v-chip x-small v-if="rowObj[bt._rtn]" :color="colors[i%colors.length]">{{
-              Object.values(rowObj[bt._rtn])[1]
-            }}
-          </v-chip>
+          <belongs-to-cell
+            :row="rowObj"
+            :value="rowObj[bt._rtn]"
+            :meta="meta"
+            :bt="bt"
+            :nodes="nodes"
+            @loadTableData="$emit('loadTableData')"
+            :api="api"
+          />
         </td>
 
         <td v-for="(hm,i) in meta.hasMany" class="caption" :key="i">
@@ -314,11 +319,16 @@
           </template>
         </td>
         <td v-for="(mm,i) in meta.manyToMany" class="caption" :key="i">
-          <v-chip v-if="rowObj[mm._rtn]" x-small v-for="(v,j) in rowObj[mm._rtn].map(v=>Object.values(v)[2])"
-                  :color="colors[i%colors.length]" :key="`${i}-${j}`">{{
-              v
-            }}
-          </v-chip>
+
+          <many-to-many
+            :row="rowObj"
+            :value="rowObj[mm._rtn]"
+            :meta="meta"
+            :mm="mm"
+            :nodes="nodes"
+            @loadTableData="$emit('loadTableData')"
+          />
+
         </td>
 
 
@@ -345,20 +355,23 @@
 <script>
 import HeaderCell from "@/components/project/spreadsheet/components/headerCell";
 import EditableCell from "@/components/project/spreadsheet/components/editableCell";
-import EditColumn from "@/components/project/spreadsheet/editColumn/editColumn";
-import TableCell from "@/components/project/spreadsheet/editableCell/tableCell";
+import EditColumn from "@/components/project/spreadsheet/components/editColumn";
+import TableCell from "@/components/project/spreadsheet/components/tableCell";
 import colors from "@/mixins/colors";
 import columnStyling from "@/components/project/spreadsheet/helpers/columnStyling";
-import HasManyCell from "@/components/project/spreadsheet/editableCell/hasManyCell";
+import HasManyCell from "@/components/project/spreadsheet/components/editableCell/hasManyCell";
+import BelongsToCell from "@/components/project/spreadsheet/components/editableCell/belogsToCell";
+import ManyToMany from "@/components/project/spreadsheet/components/editableCell/manyToMany";
 
 export default {
-  components: {HasManyCell, TableCell, EditColumn, EditableCell, HeaderCell},
+  components: {ManyToMany, BelongsToCell, HasManyCell, TableCell, EditColumn, EditableCell, HeaderCell},
   mixins: [colors],
   props: {
     relationType: String,
     availableColumns: [Object, Array],
     showFields: Object,
     sqlUi: [Object, Function],
+    api: [Object, Function],
     isEditable: Boolean,
     nodes: Object,
     primaryValueColumn: String,