refactor: cleanup

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

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

@@ -379,19 +379,11 @@ export default {
 </script>
 
 <template>
-  <div class="flex align-center gap-1 w-full chips-wrapper group" :class="{ active }">
+  <div class="flex align-center gap-1 w-full chips-wrapper group">
     <!--    <template v-if="!isForm"> -->
     <div class="chips flex align-center img-container flex-grow hm-items flex-nowrap min-w-0 overflow-hidden">
-      <template v-if="value || localState">
+      <template v-if="value">
-        <ItemChip v-for="(ch, i) in value || localState" :key="i" :value="ch[relatedTablePrimaryValueProp]" @unlink="unlink(ch)" />
+        <ItemChip v-for="(ch, i) in value" :key="i" :value="ch[relatedTablePrimaryValueProp]" @unlink="unlink(ch)" />
-
-        <!--
-                    :active="active"     :item="ch"
-                    :value="getCellValue(ch)"
-                    :readonly="isLocked || isPublic"
-                    @edit="editChild"
-                    @unlink="unlinkChild "        -->
-
         <span v-if="value?.length === 10" class="caption pointer ml-1 grey--text" @click="childListDlg = true">more... </span>
       </template>
     </div>
@@ -401,210 +393,5 @@ export default {
     <ListItems v-model="listItemsDlg" />
     <ListChildItems v-model="childListDlg" />
 
-    <!--      <div -->
-    <!--        v-if="!isLocked" -->
-    <!--        class="actions align-center justify-center px-1 flex-shrink-1" -->
-    <!--        :class="{ 'd-none': !active, 'd-flex': active }" -->
-    <!--      > -->
-    <!--        <x-icon -->
-    <!--          v-if="_isUIAllowed('xcDatatableEditable') && (isForm || !isPublic)" -->
-    <!--          small -->
-    <!--          :color="['primary', 'grey']" -->
-    <!--          @click="showNewRecordModal" -->
-    <!--        > -->
-    <!--          mdi-plus -->
-    <!--        </x-icon> -->
-    <!--        <x-icon x-small :color="['primary', 'grey']" class="ml-2" @click="showChildListModal"> mdi-arrow-expand </x-icon> -->
-    <!--      </div> -->
-    <!--    </template> -->
-
-    <!--    <ListItems
-          v-if="newRecordModal"
-          v-model="newRecordModal"
-          :size="10"
-          :meta="childMeta"
-          :primary-col="childPrimaryCol"
-          :primary-key="childPrimaryKey"
-          :api="childApi"
-          :parent-meta="meta"
-          :column="column"
-          :query-params="{
-            ...childQueryParams,
-            // check if it needs to bypass to
-            // avoid foreign key constraint violation in real relation
-            isByPass,
-            where:
-              // show all for new record
-              isNew
-                ? null
-                : // filter out those selected items
-                  `~not(${childForeignKey},eq,${parentId})` +
-                  // allow the child with empty key
-                  `~or(${childForeignKey},is,null)`,
-          }"
-          :is-public="isPublic"
-          :password="password"
-          :row-id="parentId"
-          @add-new-record="insertAndAddNewChildRecord"
-          @add="addChildToParent"
-        />
-
-        <ListChildItems
-          :is="isForm ? 'list-child-items' : 'list-child-items-modal'"
-          v-if="childMeta && (childListModal || isForm)"
-          ref="childList"
-          v-model="childListModal"
-          v-model:local-state="localState"
-          :is-form="isForm"
-          :is-new="isNew"
-          :size="10"
-          :meta="childMeta"
-          :parent-meta="meta"
-          :password="password"
-          :primary-col="childPrimaryCol"
-          :primary-key="childPrimaryKey"
-          :api="childApi"
-          :column="column"
-          :query-params="{
-            ...childQueryParams,
-            where: `(${childForeignKey},eq,${parentId})`,
-          }"
-          :is-public="isPublic"
-          :row-id="parentId"
-          type="hm"
-          @new-record="showNewRecordModal"
-          @edit="editChild"
-          @unlink="unlinkChild"
-          @delete="deleteChild"
-        />
-
-        <DlgLabelSubmitCancel
-          v-if="dialogShow"
-          type="primary"
-          :actions-mtd="confirmAction"
-          :dialog-show="dialogShow"
-          :heading="confirmMessage"
-        />
-
-        <v-dialog v-model="expandFormModal" :overlay-opacity="0.8" width="1000px" max-width="100%" class="mx-auto">
-          <component
-            :is="form"
-            v-if="selectedChild"
-            ref="expandedForm"
-            v-model="selectedChild"
-            :db-alias="nodes.dbAlias"
-            :has-many="childMeta.hasMany"
-            :belongs-to="childMeta.belongsTo"
-            :table="childMeta.table_name"
-            v-model:is-new="isNewChild"
-            :old-row="{ ...selectedChild }"
-            :meta="childMeta"
-            :primary-value-column="childPrimaryCol"
-            :api="childApi"
-            :available-columns="childAvailableColumns"
-            icon-color="warning"
-            :nodes="nodes"
-            :query-params="childQueryParams"
-            :disabled-columns="disabledChildColumns"
-            :breadcrumbs="breadcrumbs"
-            @cancel="
-              selectedChild = null
-              expandFormModal = false
-            "
-            @input="onChildSave"
-          />
-        </v-dialog>
-      -->
   </div>
 </template>
-
-<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: 0.5em;
-  }
-
-  &:hover .primary-key {
-    display: inline;
-  }
-}
-
-.child-card {
-  cursor: pointer;
-
-  &:hover {
-    box-shadow: 0 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;
-}
-
-::v-deep {
-  .unlink-icon {
-    padding: 0px 1px 2px 1px;
-    margin-top: 2px;
-    margin-right: -2px;
-  }
-
-  .search-field {
-    input {
-      max-height: 28px !important;
-    }
-
-    .v-input__slot {
-      min-height: auto !important;
-    }
-  }
-}
-
-.chips-wrapper {
-  .chips {
-    max-width: 100%;
-  }
-
-  &.active {
-    .chips {
-      max-width: calc(100% - 44px);
-    }
-  }
-}*/
-</style>
-<!--
-/**
- * @copyright Copyright (c) 2021, Xgene Cloud Ltd
- *
- * @author Naveen MR <oof1lab@gmail.com>
- * @author Pranav C Balan <pranavxc@gmail.com>
- * @author Wing-Kam Wong <wingkwong.code@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/>.
- *
- */
--->

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

@@ -4,12 +4,18 @@ import { useProvideLTARStore } from '~/composables'
 import ItemChip from './components/ItemChip.vue'
 import ListChildItems from './components/ListChildItems.vue'
 import ListItems from './components/ListItems.vue'
+import MdiExpandIcon from '~icons/mdi/arrow-expand'
+import MdiPlusIcon from '~icons/mdi/plus'
 import { ColumnInj, RowInj, ValueInj } from '~/context'
 
 const column = inject(ColumnInj)
 const row = inject(RowInj)
 const value = inject(ValueInj)
 
+
+const listItemsDlg = ref(false)
+const childListDlg = ref(false)
+
 const {
   relatedTableMeta,
   loadRelatedTableMeta,
@@ -22,12 +28,12 @@ await loadRelatedTableMeta()
 </script>
 
 <template>
-  <div class="d-flex d-100 chips-wrapper" :class="{ active }">
+  <div class="d-flex d-100 chips-wrapper" >
-    <div class="flex align-center gap-1 w-full chips-wrapper group" :class="{ active }">
+    <div class="flex align-center gap-1 w-full chips-wrapper group" >
       <!--    <template v-if="!isForm"> -->
       <div class="chips flex align-center img-container flex-grow hm-items flex-nowrap min-w-0 overflow-hidden">
-        <template v-if="value || localState">
+        <template v-if="value ">
-          <ItemChip v-for="(ch, i) in value || localState" :key="i" :value="ch[relatedTablePrimaryValueProp]"
+          <ItemChip v-for="(ch, i) in value " :key="i" :value="ch[relatedTablePrimaryValueProp]"
                     @unlink="unlink(ch)" />
 
           <!--

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

@@ -1,15 +1,20 @@
 <script lang="ts" setup>
+import { watchEffect } from '@vue/runtime-core'
 import { useVModel } from '@vueuse/core'
 import { useLTARStoreOrThrow } from '~/composables'
 
-const props = defineProps<{ modelValue: boolean }>()
+const props = defineProps<{ modelValue?: boolean }>()
 const emit = defineEmits(['update:modelValue'])
 
 const vModel = useVModel(props, 'modelValue', emit)
 
 const { childrenList, loadChildrenList, childrenListPagination, relatedTablePrimaryValueProp, link } = useLTARStoreOrThrow()
 
-await loadChildrenList()
+watchEffect(() => {
+  if (vModel.value) {
+    loadChildrenList()
+  }
+})
 </script>
 
 <template>

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

@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import { watchEffect } from '@vue/runtime-core'
 import { useVModel } from '@vueuse/core'
 import { useLTARStoreOrThrow } from '~/composables'
 import MdiReloadIcon from '~icons/mdi/reload'
@@ -17,7 +18,11 @@ const {
 } =
   useLTARStoreOrThrow()
 
-await loadChildrenExcludedList()
+watchEffect(() => {
+  if (vModel.value) {
+    loadChildrenExcludedList()
+  }
+})
 /* import Pagination from '~/components/project/spreadsheet/components/Pagination'
 import { NOCO } from '~/lib/constants'
 

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

@@ -52,7 +52,6 @@ const [useProvideLTARStore, useLTARStore] = useInjectionState((column: Required<
   }
 
   const loadRelatedTableMeta = async () => {
-    debugger
     await getMeta(colOptions?.fk_related_model_id as string)
   }