refactor: moved assignto into a separate component

crm/fcrm/doctype/crm_deal/api.py

@@ -10,7 +10,7 @@ def get_deal(name):
 
 	deal["fields_meta"] = get_fields_meta("CRM Deal")
 	deal["_form_script"] = get_form_script("CRM Deal")
-	deal["_assign"] = get_assigned_users("CRM Deal", deal.name, deal.owner)
+	deal["_assign"] = get_assigned_users("CRM Deal", deal.name)
 	return deal
 
 

crm/fcrm/doctype/crm_lead/api.py

@@ -10,5 +10,5 @@ def get_lead(name):
 
 	lead["fields_meta"] = get_fields_meta("CRM Lead")
 	lead["_form_script"] = get_form_script("CRM Lead")
-	lead["_assign"] = get_assigned_users("CRM Lead", lead.name, lead.owner)
+	lead["_assign"] = get_assigned_users("CRM Lead", lead.name)
 	return lead

frontend/src/components/AssignTo.vue

@@ -0,0 +1,31 @@
+<template>
+  <component
+    v-if="assignees?.length"
+    :is="assignees?.length == 1 ? 'Button' : 'div'"
+  >
+    <MultipleAvatar :avatars="assignees" @click="showAssignmentModal = true" />
+  </component>
+  <Button v-else @click="showAssignmentModal = true">
+    {{ __('Assign to') }}
+  </Button>
+  <AssignmentModal
+    v-if="showAssignmentModal"
+    v-model="showAssignmentModal"
+    v-model:assignees="assignees"
+    :doctype="doctype"
+    :doc="data"
+  />
+</template>
+<script setup>
+import MultipleAvatar from '@/components/MultipleAvatar.vue'
+import AssignmentModal from '@/components/Modals/AssignmentModal.vue'
+import { ref } from 'vue'
+
+const props = defineProps({
+  data: Object,
+  doctype: String,
+})
+
+const showAssignmentModal = ref(false)
+const assignees = defineModel()
+</script>

frontend/src/components/Modals/AssignmentModal.vue

@@ -133,10 +133,6 @@ const addValue = (value) => {
 }
 
 function updateAssignees() {
-  if (assignees.value.length === 0) {
-    error.value = 'Please select at least one assignee'
-    return
-  }
   const removedAssignees = oldAssignees.value
     .filter(
       (assignee) => !assignees.value.find((a) => a.name === assignee.name),

frontend/src/pages/Deal.vue

@@ -9,12 +9,11 @@
     </template>
     <template #right-header>
       <CustomActions v-if="customActions" :actions="customActions" />
-      <component :is="deal.data._assignedTo?.length == 1 ? 'Button' : 'div'">
+      <AssignTo
-        <MultipleAvatar
+        v-model="deal.data._assignedTo"
-          :avatars="deal.data._assignedTo"
+        :data="deal.data"
-          @click="showAssignmentModal = true"
+        doctype="CRM Deal"
-        />
+      />
-      </component>
       <Dropdown :options="statusOptions('deal', updateField, customStatuses)">
         <template #default="{ open }">
           <Button
@@ -237,13 +236,6 @@
       afterInsert: (doc) => addContact(doc.name),
     }"
   />
-  <AssignmentModal
-    v-if="showAssignmentModal"
-    v-model="showAssignmentModal"
-    v-model:assignees="deal.data._assignedTo"
-    :doc="deal.data"
-    doctype="CRM Deal"
-  />
   <FilesUploader
     v-if="deal.data?.name"
     v-model="showFilesUploader"
@@ -278,9 +270,8 @@ import AttachmentIcon from '@/components/Icons/AttachmentIcon.vue'
 import LayoutHeader from '@/components/LayoutHeader.vue'
 import Activities from '@/components/Activities/Activities.vue'
 import OrganizationModal from '@/components/Modals/OrganizationModal.vue'
-import AssignmentModal from '@/components/Modals/AssignmentModal.vue'
+import AssignTo from '@/components/AssignTo.vue'
 import FilesUploader from '@/components/FilesUploader/FilesUploader.vue'
-import MultipleAvatar from '@/components/MultipleAvatar.vue'
 import ContactModal from '@/components/Modals/ContactModal.vue'
 import Section from '@/components/Section.vue'
 import SidePanelLayout from '@/components/SidePanelLayout.vue'
@@ -390,7 +381,6 @@ onBeforeUnmount(() => {
 
 const reload = ref(false)
 const showOrganizationModal = ref(false)
-const showAssignmentModal = ref(false)
 const showFilesUploader = ref(false)
 const _organization = ref({})
 

frontend/src/pages/Lead.vue

@@ -9,12 +9,11 @@
     </template>
     <template #right-header>
       <CustomActions v-if="customActions" :actions="customActions" />
-      <component :is="lead.data._assignedTo?.length == 1 ? 'Button' : 'div'">
+      <AssignTo
-        <MultipleAvatar
+        v-model="lead.data._assignedTo"
-          :avatars="lead.data._assignedTo"
+        :data="lead.data"
-          @click="showAssignmentModal = true"
+        doctype="CRM Lead"
-        />
+      />
-      </component>
       <Dropdown :options="statusOptions('lead', updateField, customStatuses)">
         <template #default="{ open }">
           <Button
@@ -180,13 +179,6 @@
       </div>
     </Resizer>
   </div>
-  <AssignmentModal
-    v-if="showAssignmentModal"
-    v-model="showAssignmentModal"
-    v-model:assignees="lead.data._assignedTo"
-    :doc="lead.data"
-    doctype="CRM Lead"
-  />
   <Dialog
     v-model="showConvertToDealModal"
     :options="{
@@ -286,9 +278,8 @@ import ContactsIcon from '@/components/Icons/ContactsIcon.vue'
 import AttachmentIcon from '@/components/Icons/AttachmentIcon.vue'
 import LayoutHeader from '@/components/LayoutHeader.vue'
 import Activities from '@/components/Activities/Activities.vue'
-import AssignmentModal from '@/components/Modals/AssignmentModal.vue'
+import AssignTo from '@/components/AssignTo.vue'
 import FilesUploader from '@/components/FilesUploader/FilesUploader.vue'
-import MultipleAvatar from '@/components/MultipleAvatar.vue'
 import Link from '@/components/Controls/Link.vue'
 import SidePanelLayout from '@/components/SidePanelLayout.vue'
 import SLASection from '@/components/SLASection.vue'
@@ -373,7 +364,6 @@ onMounted(() => {
 })
 
 const reload = ref(false)
-const showAssignmentModal = ref(false)
 const showFilesUploader = ref(false)
 
 function updateLead(fieldname, value, callback) {

frontend/src/pages/MobileDeal.vue

@@ -34,12 +34,11 @@
     v-if="deal.data"
     class="flex h-12 items-center justify-between gap-2 border-b px-3 py-2.5"
   >
-    <component :is="deal.data._assignedTo?.length == 1 ? 'Button' : 'div'">
+    <AssignTo
-      <MultipleAvatar
+      v-model="deal.data._assignedTo"
-        :avatars="deal.data._assignedTo"
+      :data="deal.data"
-        @click="showAssignmentModal = true"
+      doctype="CRM Deal"
-      />
+    />
-    </component>
     <div class="flex items-center gap-2">
       <CustomActions v-if="customActions" :actions="customActions" />
     </div>
@@ -236,13 +235,6 @@
       afterInsert: (doc) => addContact(doc.name),
     }"
   />
-  <AssignmentModal
-    v-if="showAssignmentModal"
-    v-model="showAssignmentModal"
-    v-model:assignees="deal.data._assignedTo"
-    :doc="deal.data"
-    doctype="CRM Deal"
-  />
 </template>
 <script setup>
 import Icon from '@/components/Icon.vue'
@@ -263,8 +255,7 @@ import SuccessIcon from '@/components/Icons/SuccessIcon.vue'
 import LayoutHeader from '@/components/LayoutHeader.vue'
 import Activities from '@/components/Activities/Activities.vue'
 import OrganizationModal from '@/components/Modals/OrganizationModal.vue'
-import AssignmentModal from '@/components/Modals/AssignmentModal.vue'
+import AssignTo from '@/components/AssignTo.vue'
-import MultipleAvatar from '@/components/MultipleAvatar.vue'
 import ContactModal from '@/components/Modals/ContactModal.vue'
 import Link from '@/components/Controls/Link.vue'
 import Section from '@/components/Section.vue'
@@ -356,7 +347,6 @@ onMounted(() => {
 
 const reload = ref(false)
 const showOrganizationModal = ref(false)
-const showAssignmentModal = ref(false)
 const _organization = ref({})
 
 function updateDeal(fieldname, value, callback) {

frontend/src/pages/MobileLead.vue

@@ -34,12 +34,11 @@
     v-if="lead.data"
     class="flex h-12 items-center justify-between gap-2 border-b px-3 py-2.5"
   >
-    <component :is="lead.data._assignedTo?.length == 1 ? 'Button' : 'div'">
+    <AssignTo
-      <MultipleAvatar
+      v-model="lead.data._assignedTo"
-        :avatars="lead.data._assignedTo"
+      :data="lead.data"
-        @click="showAssignmentModal = true"
+      doctype="CRM Lead"
-      />
+    />
-    </component>
     <div class="flex items-center gap-2">
       <CustomActions v-if="customActions" :actions="customActions" />
       <Button
@@ -96,13 +95,6 @@
       />
     </Tabs>
   </div>
-  <AssignmentModal
-    v-if="showAssignmentModal"
-    v-model="showAssignmentModal"
-    v-model:assignees="lead.data._assignedTo"
-    :doc="lead.data"
-    doctype="CRM Lead"
-  />
   <Dialog
     v-model="showConvertToDealModal"
     :options="{
@@ -186,8 +178,7 @@ import OrganizationsIcon from '@/components/Icons/OrganizationsIcon.vue'
 import ContactsIcon from '@/components/Icons/ContactsIcon.vue'
 import LayoutHeader from '@/components/LayoutHeader.vue'
 import Activities from '@/components/Activities/Activities.vue'
-import AssignmentModal from '@/components/Modals/AssignmentModal.vue'
+import AssignTo from '@/components/AssignTo.vue'
-import MultipleAvatar from '@/components/MultipleAvatar.vue'
 import Link from '@/components/Controls/Link.vue'
 import Section from '@/components/Section.vue'
 import SidePanelLayout from '@/components/SidePanelLayout.vue'
@@ -266,7 +257,6 @@ onMounted(() => {
 })
 
 const reload = ref(false)
-const showAssignmentModal = ref(false)
 
 function updateLead(fieldname, value, callback) {
   value = Array.isArray(fieldname) ? '' : value