From 9f9fbebdfe56b0fd101b7dadbc4d918f7ac232c9 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Sun, 29 Dec 2024 23:47:48 +0530
Subject: [PATCH] fix: allow adding table in quick entry field

---
 frontend/src/components/Controls/Grid.vue     | 30 ++++----
 .../Controls/GridFieldsEditorModal.vue        |  1 -
 .../src/components/Modals/ContactModal.vue    | 19 +++--
 frontend/src/components/Modals/DealModal.vue  |  4 +
 frontend/src/components/Modals/LeadModal.vue  |  4 +
 .../components/Modals/OrganizationModal.vue   | 19 +++--
 frontend/src/components/Section.vue           | 76 ++++++++++---------
 frontend/src/pages/Contacts.vue               | 17 ++++-
 frontend/src/pages/Organizations.vue          | 13 +++-
 9 files changed, 113 insertions(+), 70 deletions(-)

diff --git a/frontend/src/components/Controls/Grid.vue b/frontend/src/components/Controls/Grid.vue
index efa22317..5b96ccee 100644
--- a/frontend/src/components/Controls/Grid.vue
+++ b/frontend/src/components/Controls/Grid.vue
@@ -50,7 +50,7 @@
         </div>
       </div>
       <!-- Rows -->
-      <template v-if="rows.length">
+      <template v-if="rows?.length">
         <Draggable class="w-full" v-model="rows" group="rows" item-key="name">
           <template #item="{ element: row, index }">
             <div
@@ -186,18 +186,18 @@
       />
       <Button :label="__('Add Row')" @click="addRow" />
     </div>
+    <GridRowFieldsModal
+      v-if="showGridRowFieldsModal"
+      v-model="showGridRowFieldsModal"
+      :doctype="doctype"
+    />
+    <GridFieldsEditorModal
+      v-if="showGridFieldsEditorModal"
+      v-model="showGridFieldsEditorModal"
+      :doctype="doctype"
+      :parentDoctype="parentDoctype"
+    />
   </div>
-  <GridRowFieldsModal
-    v-if="showGridRowFieldsModal"
-    v-model="showGridRowFieldsModal"
-    :doctype="doctype"
-  />
-  <GridFieldsEditorModal
-    v-if="showGridFieldsEditorModal"
-    v-model="showGridFieldsEditorModal"
-    :doctype="doctype"
-    :parentDoctype="parentDoctype"
-  />
 </template>
 
 <script setup>
@@ -236,7 +236,7 @@ const props = defineProps({
 const { getGridSettings, getFields } = getMeta(props.doctype)
 
 const rows = defineModel()
-const showRowList = ref(new Array(rows.value.length).fill(false))
+const showRowList = ref(new Array(rows.value?.length || []).fill(false))
 const selectedRows = reactive(new Set())
 
 const showGridFieldsEditorModal = ref(false)
@@ -277,7 +277,7 @@ const gridTemplateColumns = computed(() => {
 })
 
 const allRowsSelected = computed(() => {
-  if (!rows.value.length) return false
+  if (!rows.value?.length) return false
   return rows.value.length === selectedRows.size
 })
 
@@ -285,7 +285,7 @@ const showDeleteBtn = computed(() => selectedRows.size > 0)
 
 const toggleSelectAllRows = (iSelected) => {
   if (iSelected) {
-    rows.value.forEach((row) => selectedRows.add(row.name))
+    rows.value?.forEach((row) => selectedRows.add(row.name))
   } else {
     selectedRows.clear()
   }
diff --git a/frontend/src/components/Controls/GridFieldsEditorModal.vue b/frontend/src/components/Controls/GridFieldsEditorModal.vue
index db38699c..bbedb502 100644
--- a/frontend/src/components/Controls/GridFieldsEditorModal.vue
+++ b/frontend/src/components/Controls/GridFieldsEditorModal.vue
@@ -21,7 +21,6 @@
         <Draggable
           v-if="oldFields?.length"
           :list="fields"
-          @end="reorder"
           group="fields"
           item-key="fieldname"
           class="flex flex-col gap-1"
diff --git a/frontend/src/components/Modals/ContactModal.vue b/frontend/src/components/Modals/ContactModal.vue
index 7cfa190b..da65b30c 100644
--- a/frontend/src/components/Modals/ContactModal.vue
+++ b/frontend/src/components/Modals/ContactModal.vue
@@ -44,15 +44,9 @@
     </template>
   </Dialog>
   <AddressModal v-model="showAddressModal" v-model:address="_address" />
-  <QuickEntryModal
-    v-if="showQuickEntryModal"
-    v-model="showQuickEntryModal"
-    doctype="Contact"
-  />
 </template>
 
 <script setup>
-import QuickEntryModal from '@/components/Modals/QuickEntryModal.vue'
 import FieldLayout from '@/components/FieldLayout.vue'
 import AddressModal from '@/components/Modals/AddressModal.vue'
 import EditIcon from '@/components/Icons/EditIcon.vue'
@@ -165,6 +159,17 @@ const tabs = createResource({
   cache: ['QuickEntry', 'Contact'],
   params: { doctype: 'Contact', type: 'Quick Entry' },
   auto: true,
+  transform: (_tabs) => {
+    return _tabs.forEach((tab) => {
+      tab.sections.forEach((section) => {
+        section.fields.forEach((field) => {
+          if (field.type === 'Table') {
+            _contact.value[field.name] = []
+          }
+        })
+      })
+    })
+  },
 })
 
 const filteredSections = computed(() => {
@@ -212,7 +217,7 @@ watch(
   },
 )
 
-const showQuickEntryModal = ref(false)
+const showQuickEntryModal = defineModel('showQuickEntryModal')
 
 function openQuickEntryModal() {
   showQuickEntryModal.value = true
diff --git a/frontend/src/components/Modals/DealModal.vue b/frontend/src/components/Modals/DealModal.vue
index abb7f22f..49243672 100644
--- a/frontend/src/components/Modals/DealModal.vue
+++ b/frontend/src/components/Modals/DealModal.vue
@@ -117,6 +117,10 @@ const tabs = createResource({
           } else if (field.name == 'deal_owner') {
             field.type = 'User'
           }
+
+          if (field.type === 'Table') {
+            deal[field.name] = []
+          }
         })
       })
     })
diff --git a/frontend/src/components/Modals/LeadModal.vue b/frontend/src/components/Modals/LeadModal.vue
index 401afeac..848d6cb0 100644
--- a/frontend/src/components/Modals/LeadModal.vue
+++ b/frontend/src/components/Modals/LeadModal.vue
@@ -79,6 +79,10 @@ const tabs = createResource({
           } else if (field.name == 'lead_owner') {
             field.type = 'User'
           }
+
+          if (field.type === 'Table') {
+            lead[field.name] = []
+          }
         })
       })
     })
diff --git a/frontend/src/components/Modals/OrganizationModal.vue b/frontend/src/components/Modals/OrganizationModal.vue
index 0ea5e159..4566ead9 100644
--- a/frontend/src/components/Modals/OrganizationModal.vue
+++ b/frontend/src/components/Modals/OrganizationModal.vue
@@ -45,15 +45,9 @@
     </template>
   </Dialog>
   <AddressModal v-model="showAddressModal" v-model:address="_address" />
-  <QuickEntryModal
-    v-if="showQuickEntryModal"
-    v-model="showQuickEntryModal"
-    doctype="CRM Organization"
-  />
 </template>
 
 <script setup>
-import QuickEntryModal from '@/components/Modals/QuickEntryModal.vue'
 import FieldLayout from '@/components/FieldLayout.vue'
 import AddressModal from '@/components/Modals/AddressModal.vue'
 import EditIcon from '@/components/Icons/EditIcon.vue'
@@ -190,6 +184,17 @@ const tabs = createResource({
   cache: ['QuickEntry', 'CRM Organization'],
   params: { doctype: 'CRM Organization', type: 'Quick Entry' },
   auto: true,
+  transform: (_tabs) => {
+    return _tabs.forEach((tab) => {
+      tab.sections.forEach((section) => {
+        section.fields.forEach((field) => {
+          if (field.type === 'Table') {
+            _organization.value[field.name] = []
+          }
+        })
+      })
+    })
+  },
 })
 
 const filteredSections = computed(() => {
@@ -236,7 +241,7 @@ watch(
   },
 )
 
-const showQuickEntryModal = ref(false)
+const showQuickEntryModal = defineModel('showQuickEntryModal')
 
 function openQuickEntryModal() {
   showQuickEntryModal.value = true
diff --git a/frontend/src/components/Section.vue b/frontend/src/components/Section.vue
index 6fc178c3..3aaa2c3f 100644
--- a/frontend/src/components/Section.vue
+++ b/frontend/src/components/Section.vue
@@ -1,42 +1,44 @@
 <template>
-  <slot name="header" v-bind="{ opened, hide, open, close, toggle }">
-    <div v-if="!hide" class="flex items-center justify-between">
-      <div
-        class="flex text-ink-gray-9 max-w-fit cursor-pointer items-center gap-2 text-base"
-        v-bind="$attrs"
-        @click="collapsible && toggle()"
-      >
-        <FeatherIcon
-          v-if="collapsible && collapseIconPosition === 'left'"
-          name="chevron-right"
-          class="h-4 transition-all duration-300 ease-in-out"
-          :class="{ 'rotate-90': opened }"
-        />
-        <span>
-          {{ __(label) || __('Untitled') }}
-        </span>
-        <FeatherIcon
-          v-if="collapsible && collapseIconPosition === 'right'"
-          name="chevron-right"
-          class="h-4 transition-all duration-300 ease-in-out"
-          :class="{ 'rotate-90': opened }"
-        />
+  <div>
+    <slot name="header" v-bind="{ opened, hide, open, close, toggle }">
+      <div v-if="!hide" class="flex items-center justify-between">
+        <div
+          class="flex text-ink-gray-9 max-w-fit cursor-pointer items-center gap-2 text-base"
+          v-bind="$attrs"
+          @click="collapsible && toggle()"
+        >
+          <FeatherIcon
+            v-if="collapsible && collapseIconPosition === 'left'"
+            name="chevron-right"
+            class="h-4 transition-all duration-300 ease-in-out"
+            :class="{ 'rotate-90': opened }"
+          />
+          <span>
+            {{ __(label) || __('Untitled') }}
+          </span>
+          <FeatherIcon
+            v-if="collapsible && collapseIconPosition === 'right'"
+            name="chevron-right"
+            class="h-4 transition-all duration-300 ease-in-out"
+            :class="{ 'rotate-90': opened }"
+          />
+        </div>
+        <slot name="actions"></slot>
       </div>
-      <slot name="actions"></slot>
-    </div>
-  </slot>
-  <transition
-    enter-active-class="duration-300 ease-in"
-    leave-active-class="duration-300 ease-[cubic-bezier(0, 1, 0.5, 1)]"
-    enter-to-class="max-h-[200px] overflow-hidden"
-    leave-from-class="max-h-[200px] overflow-hidden"
-    enter-from-class="max-h-0 overflow-hidden"
-    leave-to-class="max-h-0 overflow-hidden"
-  >
-    <div v-show="opened">
-      <slot v-bind="{ opened, open, close, toggle }" />
-    </div>
-  </transition>
+    </slot>
+    <transition
+      enter-active-class="duration-300 ease-in"
+      leave-active-class="duration-300 ease-[cubic-bezier(0, 1, 0.5, 1)]"
+      enter-to-class="max-h-[200px] overflow-hidden"
+      leave-from-class="max-h-[200px] overflow-hidden"
+      enter-from-class="max-h-0 overflow-hidden"
+      leave-to-class="max-h-0 overflow-hidden"
+    >
+      <div v-show="opened">
+        <slot v-bind="{ opened, open, close, toggle }" />
+      </div>
+    </transition>
+  </div>
 </template>
 <script setup>
 import { ref } from 'vue'
diff --git a/frontend/src/pages/Contacts.vue b/frontend/src/pages/Contacts.vue
index fdd69dfc..049f681b 100644
--- a/frontend/src/pages/Contacts.vue
+++ b/frontend/src/pages/Contacts.vue
@@ -59,7 +59,17 @@
       </Button>
     </div>
   </div>
-  <ContactModal v-model="showContactModal" :contact="{}" />
+  <ContactModal
+    v-if="showContactModal"
+    v-model="showContactModal"
+    v-model:showQuickEntryModal="showQuickEntryModal"
+    :contact="{}"
+  />
+  <QuickEntryModal
+    v-if="showQuickEntryModal"
+    v-model="showQuickEntryModal"
+    doctype="Contact"
+  />
 </template>
 
 <script setup>
@@ -68,6 +78,7 @@ import CustomActions from '@/components/CustomActions.vue'
 import ContactsIcon from '@/components/Icons/ContactsIcon.vue'
 import LayoutHeader from '@/components/LayoutHeader.vue'
 import ContactModal from '@/components/Modals/ContactModal.vue'
+import QuickEntryModal from '@/components/Modals/QuickEntryModal.vue'
 import ContactsListView from '@/components/ListViews/ContactsListView.vue'
 import ViewControls from '@/components/ViewControls.vue'
 import { getMeta } from '@/stores/meta'
@@ -75,10 +86,12 @@ import { organizationsStore } from '@/stores/organizations.js'
 import { formatDate, timeAgo } from '@/utils'
 import { ref, computed } from 'vue'
 
-const { getFormattedPercent, getFormattedFloat, getFormattedCurrency } = getMeta('Contact')
+const { getFormattedPercent, getFormattedFloat, getFormattedCurrency } =
+  getMeta('Contact')
 const { getOrganization } = organizationsStore()
 
 const showContactModal = ref(false)
+const showQuickEntryModal = ref(false)
 
 const contactsListView = ref(null)
 
diff --git a/frontend/src/pages/Organizations.vue b/frontend/src/pages/Organizations.vue
index 4853d096..f58bb3f8 100644
--- a/frontend/src/pages/Organizations.vue
+++ b/frontend/src/pages/Organizations.vue
@@ -59,7 +59,16 @@
       </Button>
     </div>
   </div>
-  <OrganizationModal v-model="showOrganizationModal" />
+  <OrganizationModal
+    v-if="showOrganizationModal"
+    v-model="showOrganizationModal"
+    v-model:showQuickEntryModal="showQuickEntryModal"
+  />
+  <QuickEntryModal
+    v-if="showQuickEntryModal"
+    v-model="showQuickEntryModal"
+    doctype="CRM Organization"
+  />
 </template>
 <script setup>
 import ViewBreadcrumbs from '@/components/ViewBreadcrumbs.vue'
@@ -67,6 +76,7 @@ import CustomActions from '@/components/CustomActions.vue'
 import OrganizationsIcon from '@/components/Icons/OrganizationsIcon.vue'
 import LayoutHeader from '@/components/LayoutHeader.vue'
 import OrganizationModal from '@/components/Modals/OrganizationModal.vue'
+import QuickEntryModal from '@/components/Modals/QuickEntryModal.vue'
 import OrganizationsListView from '@/components/ListViews/OrganizationsListView.vue'
 import ViewControls from '@/components/ViewControls.vue'
 import { getMeta } from '@/stores/meta'
@@ -78,6 +88,7 @@ const { getFormattedPercent, getFormattedFloat, getFormattedCurrency } =
 
 const organizationsListView = ref(null)
 const showOrganizationModal = ref(false)
+const showQuickEntryModal = ref(false)
 
 // organizations data is loaded in the ViewControls component
 const organizations = ref({})