Merge pull request #495 from frappe/develop

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)
@@ -251,7 +251,9 @@ const fields = computed(() => {
     )
     return d
   }
-  return gridFields?.map((f) => getFieldObj(f)) || []
+  return (
+    gridFields?.filter((f) => f.in_list_view).map((f) => getFieldObj(f)) || []
+  )
 })
 
 function getFieldObj(field) {
@@ -275,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
 })
 
@@ -283,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"
@@ -176,7 +175,14 @@ function update() {
   saveUserSettings(props.parentDoctype, 'GridView', updateFields, () => {
     loading.value = false
     show.value = false
-    userSettings[props.parentDoctype]['GridView'][props.doctype] = updateFields
+    if (userSettings[props.parentDoctype]?.['GridView']) {
+      userSettings[props.parentDoctype]['GridView'][props.doctype] =
+        updateFields
+    } else {
+      userSettings[props.parentDoctype] = {
+        GridView: { [props.doctype]: updateFields },
+      }
+    }
   })
 }
 

frontend/src/components/Modals/ContactModal.vue

@@ -1,11 +1,11 @@
 <template>
-  <Dialog v-model="show" :options="dialogOptions">
+  <Dialog v-model="show" :options="{ size: 'xl' }">
     <template #body>
       <div class="bg-surface-modal px-4 pb-6 pt-5 sm:px-6">
         <div class="mb-5 flex items-center justify-between">
           <div>
             <h3 class="text-2xl font-semibold leading-6 text-ink-gray-9">
-              {{ __(dialogOptions.title) || __('Untitled') }}
+              {{ __('New Contact') }}
             </h3>
           </div>
           <div class="flex items-center gap-1">
@@ -34,25 +34,19 @@
         <div class="space-y-2">
           <Button
             class="w-full"
-            v-for="action in dialogOptions.actions"
+            variant="solid"
-            :key="action.label"
+            :label="__('Create')"
-            v-bind="action"
+            :loading="loading"
-            :label="__(action.label)"
+            @click="createContact"
           />
         </div>
       </div>
     </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'
@@ -81,35 +75,14 @@ const { isManager } = usersStore()
 const router = useRouter()
 const show = defineModel()
 
-const editMode = ref(false)
+const loading = ref(false)
+
 let _contact = ref({})
 let _address = ref({})
 
 const showAddressModal = ref(false)
 
-async function updateContact() {
+async function createContact() {
-  if (!dirty.value) {
-    show.value = false
-    return
-  }
-
-  const values = { ..._contact.value }
-
-  let name = await callSetValue(values)
-
-  handleContactUpdate({ name })
-}
-
-async function callSetValue(values) {
-  const d = await call('frappe.client.set_value', {
-    doctype: 'Contact',
-    name: props.contact.data.name,
-    fieldname: values,
-  })
-  return d.name
-}
-
-async function callInsertDoc() {
   if (_contact.value.email_id) {
     _contact.value.email_ids = [{ email_id: _contact.value.email_id }]
     delete _contact.value.email_id
@@ -144,27 +117,22 @@ function handleContactUpdate(doc) {
   props.options.afterInsert && props.options.afterInsert(doc)
 }
 
-const dialogOptions = computed(() => {
-  let title = !editMode.value ? 'New Contact' : _contact.value.full_name
-
-  let size = 'xl'
-  let actions = [
-    {
-      label: editMode.value ? 'Save' : 'Create',
-      variant: 'solid',
-      disabled: !dirty.value,
-      onClick: () => (editMode.value ? updateContact() : callInsertDoc()),
-    },
-  ]
-
-  return { title, size, actions }
-})
-
 const tabs = createResource({
   url: 'crm.fcrm.doctype.crm_fields_layout.crm_fields_layout.get_fields_layout',
   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(() => {
@@ -194,25 +162,17 @@ const filteredSections = computed(() => {
   return [{ no_tabs: true, sections: allSections }]
 })
 
-const dirty = computed(() => {
-  return JSON.stringify(props.contact.data) !== JSON.stringify(_contact.value)
-})
-
 watch(
   () => show.value,
   (value) => {
     if (!value) return
-    editMode.value = false
     nextTick(() => {
       _contact.value = { ...props.contact.data }
-      if (_contact.value.name) {
-        editMode.value = true
-      }
     })
   },
 )
 
-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

@@ -1,11 +1,11 @@
 <template>
-  <Dialog v-model="show" :options="dialogOptions">
+  <Dialog v-model="show" :options="{ size: 'xl' }">
     <template #body>
       <div class="bg-surface-modal px-4 pb-6 pt-5 sm:px-6">
         <div class="mb-5 flex items-center justify-between">
           <div>
             <h3 class="text-2xl font-semibold leading-6 text-ink-gray-9">
-              {{ __(dialogOptions.title) || __('Untitled') }}
+              {{ __('New Organization') }}
             </h3>
           </div>
           <div class="flex items-center gap-1">
@@ -34,26 +34,19 @@
         <div class="space-y-2">
           <Button
             class="w-full"
-            v-for="action in dialogOptions.actions"
+            variant="solid"
-            :key="action.label"
+            :label="__('Create')"
-            v-bind="action"
-            :label="__(action.label)"
             :loading="loading"
+            @click="createOrganization"
           />
         </div>
       </div>
     </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'
@@ -81,8 +74,9 @@ const organization = defineModel('organization')
 
 const loading = ref(false)
 const title = ref(null)
-const editMode = ref(false)
+
 let _address = ref({})
+
 let _organization = ref({
   organization_name: '',
   website: '',
@@ -95,54 +89,7 @@ const showAddressModal = ref(false)
 
 let doc = ref({})
 
-async function updateOrganization() {
+async function createOrganization() {
-  const old = { ...doc.value }
-  const newOrg = { ..._organization.value }
-
-  const nameChanged = old.organization_name !== newOrg.organization_name
-  delete old.organization_name
-  delete newOrg.organization_name
-
-  const otherFieldChanged = JSON.stringify(old) !== JSON.stringify(newOrg)
-  const values = newOrg
-
-  if (!nameChanged && !otherFieldChanged) {
-    show.value = false
-    return
-  }
-
-  let name
-  loading.value = true
-  if (nameChanged) {
-    name = await callRenameDoc()
-  }
-  if (otherFieldChanged) {
-    name = await callSetValue(values)
-  }
-  handleOrganizationUpdate({ name }, nameChanged)
-}
-
-async function callRenameDoc() {
-  const d = await call('frappe.client.rename_doc', {
-    doctype: 'CRM Organization',
-    old_name: doc.value?.organization_name,
-    new_name: _organization.value.organization_name,
-  })
-  loading.value = false
-  return d
-}
-
-async function callSetValue(values) {
-  const d = await call('frappe.client.set_value', {
-    doctype: 'CRM Organization',
-    name: _organization.value.name,
-    fieldname: values,
-  })
-  loading.value = false
-  return d.name
-}
-
-async function callInsertDoc() {
   const doc = await call('frappe.client.insert', {
     doc: {
       doctype: 'CRM Organization',
@@ -156,40 +103,35 @@ async function callInsertDoc() {
   }
 }
 
-function handleOrganizationUpdate(doc, renamed = false) {
+function handleOrganizationUpdate(doc) {
-  if (doc.name && (props.options.redirect || renamed)) {
+  if (doc.name && props.options.redirect) {
     router.push({
       name: 'Organization',
       params: { organizationId: doc.name },
     })
   } else {
-    organization.value.reload?.()
+    organization.value?.reload?.()
   }
   show.value = false
   props.options.afterInsert && props.options.afterInsert(doc)
 }
 
-const dialogOptions = computed(() => {
-  let title = !editMode.value
-    ? __('New Organization')
-    : __(_organization.value.organization_name)
-  let size = 'xl'
-  let actions = [
-    {
-      label: editMode.value ? __('Save') : __('Create'),
-      variant: 'solid',
-      onClick: () => (editMode.value ? updateOrganization() : callInsertDoc()),
-    },
-  ]
-
-  return { title, size, actions }
-})
-
 const tabs = createResource({
   url: 'crm.fcrm.doctype.crm_fields_layout.crm_fields_layout.get_fields_layout',
   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(() => {
@@ -223,20 +165,16 @@ watch(
   () => show.value,
   (value) => {
     if (!value) return
-    editMode.value = false
     nextTick(() => {
       // TODO: Issue with FormControl
       // title.value.el.focus()
       doc.value = organization.value?.doc || organization.value || {}
       _organization.value = { ...doc.value }
-      if (_organization.value.name) {
-        editMode.value = true
-      }
     })
   },
 )
 
-const showQuickEntryModal = ref(false)
+const showQuickEntryModal = defineModel('showQuickEntryModal')
 
 function openQuickEntryModal() {
   showQuickEntryModal.value = true

frontend/src/components/Section.vue

@@ -1,42 +1,44 @@
 <template>
-  <slot name="header" v-bind="{ opened, hide, open, close, toggle }">
+  <div>
-    <div v-if="!hide" class="flex items-center justify-between">
+    <slot name="header" v-bind="{ opened, hide, open, close, toggle }">
-      <div
+      <div v-if="!hide" class="flex items-center justify-between">
-        class="flex text-ink-gray-9 max-w-fit cursor-pointer items-center gap-2 text-base"
+        <div
-        v-bind="$attrs"
+          class="flex text-ink-gray-9 max-w-fit cursor-pointer items-center gap-2 text-base"
-        @click="collapsible && toggle()"
+          v-bind="$attrs"
-      >
+          @click="collapsible && toggle()"
-        <FeatherIcon
+        >
-          v-if="collapsible && collapseIconPosition === 'left'"
+          <FeatherIcon
-          name="chevron-right"
+            v-if="collapsible && collapseIconPosition === 'left'"
-          class="h-4 transition-all duration-300 ease-in-out"
+            name="chevron-right"
-          :class="{ 'rotate-90': opened }"
+            class="h-4 transition-all duration-300 ease-in-out"
-        />
+            :class="{ 'rotate-90': opened }"
-        <span>
+          />
-          {{ __(label) || __('Untitled') }}
+          <span>
-        </span>
+            {{ __(label) || __('Untitled') }}
-        <FeatherIcon
+          </span>
-          v-if="collapsible && collapseIconPosition === 'right'"
+          <FeatherIcon
-          name="chevron-right"
+            v-if="collapsible && collapseIconPosition === 'right'"
-          class="h-4 transition-all duration-300 ease-in-out"
+            name="chevron-right"
-          :class="{ 'rotate-90': opened }"
+            class="h-4 transition-all duration-300 ease-in-out"
-        />
+            :class="{ 'rotate-90': opened }"
+          />
+        </div>
+        <slot name="actions"></slot>
       </div>
-      <slot name="actions"></slot>
+    </slot>
-    </div>
+    <transition
-  </slot>
+      enter-active-class="duration-300 ease-in"
-  <transition
+      leave-active-class="duration-300 ease-[cubic-bezier(0, 1, 0.5, 1)]"
-    enter-active-class="duration-300 ease-in"
+      enter-to-class="max-h-[200px] overflow-hidden"
-    leave-active-class="duration-300 ease-[cubic-bezier(0, 1, 0.5, 1)]"
+      leave-from-class="max-h-[200px] overflow-hidden"
-    enter-to-class="max-h-[200px] overflow-hidden"
+      enter-from-class="max-h-0 overflow-hidden"
-    leave-from-class="max-h-[200px] overflow-hidden"
+      leave-to-class="max-h-0 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 v-show="opened">
+      </div>
-      <slot v-bind="{ opened, open, close, toggle }" />
+    </transition>
-    </div>
+  </div>
-  </transition>
 </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({})

frontend/src/stores/meta.js

@@ -80,7 +80,11 @@ export function getMeta(doctype) {
     let oldUserSettings = userSettings[parentDoctype]
     let newUserSettings = JSON.parse(JSON.stringify(oldUserSettings))
 
-    newUserSettings[key][doctype] = value
+    if (newUserSettings[key] === undefined) {
+      newUserSettings[key] = { [doctype]: value }
+    } else {
+      newUserSettings[key][doctype] = value
+    }
 
     if (JSON.stringify(oldUserSettings) !== JSON.stringify(newUserSettings)) {
       return createResource({