Merge pull request #242 from frappe/develop

chore: Merge develop to main

frontend/src/components/Modals/ContactModal.vue

@@ -10,10 +10,10 @@
           </div>
           <div class="flex items-center gap-1">
             <Button
-              v-if="detailMode"
+              v-if="isManager() || detailMode"
               variant="ghost"
               class="w-7"
-              @click="detailMode = false"
+              @click="detailMode ? (detailMode = false) : openQuickEntryModal()"
             >
               <EditIcon class="h-4 w-4" />
             </Button>
@@ -91,8 +91,9 @@ import AddressIcon from '@/components/Icons/AddressIcon.vue'
 import CertificateIcon from '@/components/Icons/CertificateIcon.vue'
 import EditIcon from '@/components/Icons/EditIcon.vue'
 import Dropdown from '@/components/frappe-ui/Dropdown.vue'
+import { usersStore } from '@/stores/users'
 import { call, createResource } from 'frappe-ui'
-import { ref, nextTick, watch, computed, h } from 'vue'
+import { ref, nextTick, watch, computed } from 'vue'
 import { createToast } from '@/utils'
 import { useRouter } from 'vue-router'
 
@@ -111,6 +112,8 @@ const props = defineProps({
   },
 })
 
+const { isManager } = usersStore()
+
 const router = useRouter()
 const show = defineModel()
 
@@ -237,7 +240,7 @@ const detailFields = computed(() => {
 const sections = createResource({
   url: 'crm.fcrm.doctype.crm_fields_layout.crm_fields_layout.get_fields_layout',
   cache: ['quickEntryFields', 'Contact'],
-  params: { doctype: 'Contact', type: 'Quick Entry'},
+  params: { doctype: 'Contact', type: 'Quick Entry' },
   auto: true,
 })
 
@@ -273,15 +276,15 @@ const filteredSections = computed(() => {
               onDelete: async (option, isNew) => {
                 props.contact.data.email_ids =
                   props.contact.data.email_ids.filter(
-                    (email) => email.name !== option.name
+                    (email) => email.name !== option.name,
                   )
                 !isNew && (await deleteOption('Contact Email', option.name))
                 if (_contact.value.email_id === option.value) {
                   if (props.contact.data.email_ids.length === 0) {
                     _contact.value.email_id = ''
                   } else {
                     _contact.value.email_id = props.contact.data.email_ids.find(
-                      (email) => email.is_primary
+                      (email) => email.is_primary,
                     )?.email_id
                   }
                 }
@@ -296,7 +299,10 @@ const filteredSections = computed(() => {
             isNew: true,
           })
         }
-      } else if (field.name == 'mobile_no' || field.name == 'actual_mobile_no') {
+      } else if (
+        field.name == 'mobile_no' ||
+        field.name == 'actual_mobile_no'
+      ) {
         field.type = props.contact?.data?.name ? 'Dropdown' : 'Data'
         field.name = 'actual_mobile_no'
         field.options =
@@ -323,7 +329,7 @@ const filteredSections = computed(() => {
               onDelete: async (option, isNew) => {
                 props.contact.data.phone_nos =
                   props.contact.data.phone_nos.filter(
-                    (phone) => phone.name !== option.name
+                    (phone) => phone.name !== option.name,
                   )
                 !isNew && (await deleteOption('Contact Phone', option.name))
                 if (_contact.value.actual_mobile_no === option.value) {
@@ -332,7 +338,7 @@ const filteredSections = computed(() => {
                   } else {
                     _contact.value.actual_mobile_no =
                       props.contact.data.phone_nos.find(
-                        (phone) => phone.is_primary_mobile_no
+                        (phone) => phone.is_primary_mobile_no,
                       )?.phone
                   }
                 }
@@ -432,8 +438,17 @@ watch(
         editMode.value = true
       }
     })
-  }
+  },
 )
+
+const showQuickEntryModal = defineModel('quickEntry')
+
+function openQuickEntryModal() {
+  showQuickEntryModal.value = true
+  nextTick(() => {
+    show.value = false
+  })
+}
 </script>
 
 <style scoped>

frontend/src/components/Modals/DealModal.vue

@@ -1,56 +1,75 @@
 <template>
-  <Dialog
-    v-model="show"
-    :options="{
-      size: '3xl',
-      title: __('Create Deal'),
-    }"
-  >
-    <template #body-content>
-      <div class="mb-4 grid grid-cols-1 gap-4 sm:grid-cols-3">
-        <div class="flex items-center gap-3 text-sm text-gray-600">
-          <div>{{ __('Choose Existing Organization') }}</div>
-          <Switch v-model="chooseExistingOrganization" />
+  <Dialog v-model="show" :options="{ size: '3xl' }">
+    <template #body>
+      <div class="bg-white 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-gray-900">
+              {{ __('Create Deal') }}
+            </h3>
+          </div>
+          <div class="flex items-center gap-1">
+            <Button
+              v-if="isManager()"
+              variant="ghost"
+              class="w-7"
+              @click="openQuickEntryModal"
+            >
+              <EditIcon class="h-4 w-4" />
+            </Button>
+            <Button variant="ghost" class="w-7" @click="show = false">
+              <FeatherIcon name="x" class="h-4 w-4" />
+            </Button>
+          </div>
         </div>
-        <div class="flex items-center gap-3 text-sm text-gray-600">
-          <div>{{ __('Choose Existing Contact') }}</div>
-          <Switch v-model="chooseExistingContact" />
+        <div>
+          <div class="mb-4 grid grid-cols-1 gap-4 sm:grid-cols-3">
+            <div class="flex items-center gap-3 text-sm text-gray-600">
+              <div>{{ __('Choose Existing Organization') }}</div>
+              <Switch v-model="chooseExistingOrganization" />
+            </div>
+            <div class="flex items-center gap-3 text-sm text-gray-600">
+              <div>{{ __('Choose Existing Contact') }}</div>
+              <Switch v-model="chooseExistingContact" />
+            </div>
+          </div>
+          <Fields
+            v-if="filteredSections"
+            class="border-t pt-4"
+            :sections="filteredSections"
+            :data="deal"
+          />
+          <ErrorMessage class="mt-4" v-if="error" :message="__(error)" />
         </div>
       </div>
-      <Fields
-        v-if="filteredSections"
-        class="border-t pt-4"
-        :sections="filteredSections"
-        :data="deal"
-      />
-      <ErrorMessage class="mt-4" v-if="error" :message="__(error)" />
-    </template>
-    <template #actions>
-      <div class="flex flex-row-reverse gap-2">
-        <Button
-          variant="solid"
-          :label="__('Create')"
-          :loading="isDealCreating"
-          @click="createDeal"
-        />
+      <div class="px-4 pb-7 pt-4 sm:px-6">
+        <div class="flex flex-row-reverse gap-2">
+          <Button
+            variant="solid"
+            :label="__('Create')"
+            :loading="isDealCreating"
+            @click="createDeal"
+          />
+        </div>
       </div>
     </template>
   </Dialog>
 </template>
 
 <script setup>
+import EditIcon from '@/components/Icons/EditIcon.vue'
 import Fields from '@/components/Fields.vue'
 import { usersStore } from '@/stores/users'
 import { statusesStore } from '@/stores/statuses'
 import { Switch, createResource } from 'frappe-ui'
-import { computed, ref, reactive, onMounted } from 'vue'
+import { computed, ref, reactive, onMounted, nextTick } from 'vue'
 import { useRouter } from 'vue-router'
 
 const props = defineProps({
   defaults: Object,
 })
 
-const { getUser } = usersStore()
+const { getUser, isManager } = usersStore()
 const { getDealStatus, statusOptions } = statusesStore()
 
 const show = defineModel()
@@ -83,7 +102,7 @@ const chooseExistingOrganization = ref(false)
 const sections = createResource({
   url: 'crm.fcrm.doctype.crm_fields_layout.crm_fields_layout.get_fields_layout',
   cache: ['quickEntryFields', 'CRM Deal'],
-  params: { doctype: 'CRM Deal', type: 'Quick Entry'},
+  params: { doctype: 'CRM Deal', type: 'Quick Entry' },
   auto: true,
   transform: (data) => {
     return data.forEach((section) => {
@@ -108,21 +127,21 @@ const filteredSections = computed(() => {
 
   if (chooseExistingOrganization.value) {
     _filteredSections.push(
-      allSections.find((s) => s.label === 'Select Organization')
+      allSections.find((s) => s.label === 'Select Organization'),
     )
   } else {
     _filteredSections.push(
-      allSections.find((s) => s.label === 'Organization Details')
+      allSections.find((s) => s.label === 'Organization Details'),
     )
   }
 
   if (chooseExistingContact.value) {
     _filteredSections.push(
-      allSections.find((s) => s.label === 'Select Contact')
+      allSections.find((s) => s.label === 'Select Contact'),
     )
   } else {
     _filteredSections.push(
-      allSections.find((s) => s.label === 'Contact Details')
+      allSections.find((s) => s.label === 'Contact Details'),
     )
   }
 
@@ -197,6 +216,15 @@ function createDeal() {
   })
 }
 
+const showQuickEntryModal = defineModel('quickEntry')
+
+function openQuickEntryModal() {
+  showQuickEntryModal.value = true
+  nextTick(() => {
+    show.value = false
+  })
+}
+
 onMounted(() => {
   Object.assign(deal, props.defaults)
   if (!deal.deal_owner) {

frontend/src/components/Modals/LeadModal.vue

@@ -1,41 +1,60 @@
 <template>
-  <Dialog
-    v-model="show"
-    :options="{
-      size: '3xl',
-      title: __('Create Lead'),
-    }"
-  >
-    <template #body-content>
-      <Fields v-if="sections.data" :sections="sections.data" :data="lead" />
-      <ErrorMessage class="mt-4" v-if="error" :message="__(error)" />
-    </template>
-    <template #actions>
-      <div class="flex flex-row-reverse gap-2">
-        <Button
-          variant="solid"
-          :label="__('Create')"
-          :loading="isLeadCreating"
-          @click="createNewLead"
-        />
+  <Dialog v-model="show" :options="{ size: '3xl' }">
+    <template #body>
+      <div class="bg-white 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-gray-900">
+              {{ __('Create Lead') }}
+            </h3>
+          </div>
+          <div class="flex items-center gap-1">
+            <Button
+              v-if="isManager()"
+              variant="ghost"
+              class="w-7"
+              @click="openQuickEntryModal"
+            >
+              <EditIcon class="h-4 w-4" />
+            </Button>
+            <Button variant="ghost" class="w-7" @click="show = false">
+              <FeatherIcon name="x" class="h-4 w-4" />
+            </Button>
+          </div>
+        </div>
+        <div>
+          <Fields v-if="sections.data" :sections="sections.data" :data="lead" />
+          <ErrorMessage class="mt-4" v-if="error" :message="__(error)" />
+        </div>
+      </div>
+      <div class="px-4 pb-7 pt-4 sm:px-6">
+        <div class="flex flex-row-reverse gap-2">
+          <Button
+            variant="solid"
+            :label="__('Create')"
+            :loading="isLeadCreating"
+            @click="createNewLead"
+          />
+        </div>
       </div>
     </template>
   </Dialog>
 </template>
 
 <script setup>
+import EditIcon from '@/components/Icons/EditIcon.vue'
 import Fields from '@/components/Fields.vue'
 import { usersStore } from '@/stores/users'
 import { statusesStore } from '@/stores/statuses'
 import { createResource } from 'frappe-ui'
-import { computed, onMounted, ref, reactive } from 'vue'
+import { computed, onMounted, ref, reactive, nextTick } from 'vue'
 import { useRouter } from 'vue-router'
 
 const props = defineProps({
   defaults: Object,
 })
 
-const { getUser } = usersStore()
+const { getUser, isManager } = usersStore()
 const { getLeadStatus, statusOptions } = statusesStore()
 
 const show = defineModel()
@@ -149,6 +168,15 @@ function createNewLead() {
   })
 }
 
+const showQuickEntryModal = defineModel('quickEntry')
+
+function openQuickEntryModal() {
+  showQuickEntryModal.value = true
+  nextTick(() => {
+    show.value = false
+  })
+}
+
 onMounted(() => {
   Object.assign(lead, props.defaults)
   if (!lead.lead_owner) {