fix: allow adding table in quick entry field

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,7 +186,6 @@
       />
       <Button :label="__('Add Row')" @click="addRow" />
     </div>
-  </div>
     <GridRowFieldsModal
       v-if="showGridRowFieldsModal"
       v-model="showGridRowFieldsModal"
@@ -198,6 +197,7 @@
       :doctype="doctype"
       :parentDoctype="parentDoctype"
     />
+  </div>
 </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()
   }

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"

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

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] = []
+          }
         })
       })
     })

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] = []
+          }
         })
       })
     })

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

frontend/src/components/Section.vue

@@ -1,4 +1,5 @@
 <template>
+  <div>
     <slot name="header" v-bind="{ opened, hide, open, close, toggle }">
       <div v-if="!hide" class="flex items-center justify-between">
         <div
@@ -37,6 +38,7 @@
         <slot v-bind="{ opened, open, close, toggle }" />
       </div>
     </transition>
+  </div>
 </template>
 <script setup>
 import { ref } from 'vue'

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)
 

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({})