refactor: Assign to as popover instead of dialog

(cherry picked from commit 995f3564193ec1a44c2a6bfa344e734bce415a46)

frontend/components.d.ts

@@ -25,6 +25,7 @@ declare module 'vue' {
     AscendingIcon: typeof import('./src/components/Icons/AscendingIcon.vue')['default']
     AssignmentModal: typeof import('./src/components/Modals/AssignmentModal.vue')['default']
     AssignTo: typeof import('./src/components/AssignTo.vue')['default']
+    AssignToBody: typeof import('./src/components/AssignToBody.vue')['default']
     AttachmentArea: typeof import('./src/components/Activities/AttachmentArea.vue')['default']
     AttachmentIcon: typeof import('./src/components/Icons/AttachmentIcon.vue')['default']
     AttachmentItem: typeof import('./src/components/AttachmentItem.vue')['default']

frontend/src/components/AssignTo.vue

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

frontend/src/components/AssignToBody.vue

@@ -0,0 +1,196 @@
+<template>
+  <div
+    class="flex flex-col gap-2 my-2 w-96 rounded-lg bg-surface-modal shadow-2xl ring-1 ring-black p-3 ring-opacity-5 focus:outline-none"
+  >
+    <div class="text-base text-ink-gray-5">{{ __('Assign to') }}</div>
+    <Link
+      class="form-control"
+      value=""
+      doctype="User"
+      @change="(option) => addValue(option) && ($refs.input.value = '')"
+      :placeholder="__('John Doe')"
+      :filters="{
+        name: ['in', users.data.crmUsers?.map((user) => user.name)],
+      }"
+      :hideMe="true"
+    >
+      <template #target="{ togglePopover }">
+        <div
+          class="w-full min-h-12 flex flex-wrap items-center gap-1.5 p-1.5 pb-5 rounded-lg bg-surface-gray-2 cursor-text"
+          @click.stop="togglePopover"
+        >
+          <Tooltip
+            :text="assignee.name"
+            v-for="assignee in assignees"
+            :key="assignee.name"
+            @click.stop
+          >
+            <div>
+              <div
+                class="flex items-center text-sm text-ink-gray-6 border border-outline-gray-1 bg-surface-white rounded-full hover:bg-surface-white !p-0.5"
+                @click.stop
+              >
+                <UserAvatar :user="assignee.name" size="sm" />
+                <div class="ml-1">{{ getUser(assignee.name).full_name }}</div>
+                <Button
+                  variant="ghost"
+                  class="rounded-full !size-4 m-1"
+                  @click.stop="removeValue(assignee.name)"
+                >
+                  <template #icon>
+                    <FeatherIcon name="x" class="h-3 w-3 text-ink-gray-6" />
+                  </template>
+                </Button>
+              </div>
+            </div>
+          </Tooltip>
+        </div>
+      </template>
+      <template #item-prefix="{ option }">
+        <UserAvatar class="mr-2" :user="option.value" size="sm" />
+      </template>
+      <template #item-label="{ option }">
+        <Tooltip :text="option.value">
+          <div class="cursor-pointer text-ink-gray-9">
+            {{ getUser(option.value).full_name }}
+          </div>
+        </Tooltip>
+      </template>
+    </Link>
+    <div class="flex items-center justify-between gap-2">
+      <div
+        class="text-base text-ink-gray-5 cursor-pointer select-none"
+        @click="assignToMe = !assignToMe"
+      >
+        {{ __('Assign to me') }}
+      </div>
+      <Switch v-model="assignToMe" @click.stop />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import UserAvatar from '@/components/UserAvatar.vue'
+import Link from '@/components/Controls/Link.vue'
+import { usersStore } from '@/stores/users'
+import { capture } from '@/telemetry'
+import { Tooltip, call, Switch, toast } from 'frappe-ui'
+import { ref, computed, watch } from 'vue'
+
+const props = defineProps({
+  doc: {
+    type: Object,
+    default: null,
+  },
+  doctype: {
+    type: String,
+    default: '',
+  },
+  open: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+const emit = defineEmits(['reload'])
+
+const assignees = defineModel()
+const oldAssignees = ref([])
+const assignToMe = ref(false)
+
+const error = ref('')
+const ownerRemoved = ref(false)
+
+const { users, getUser } = usersStore()
+
+const owner = computed(() => {
+  if (!props.doc) return ''
+  if (props.doctype == 'CRM Lead') return props.doc.lead_owner
+  return props.doc.deal_owner
+})
+
+const removeValue = (value) => {
+  if (value === getUser('').name) {
+    assignToMe.value = false
+  }
+
+  assignees.value = assignees.value.filter(
+    (assignee) => assignee.name !== value,
+  )
+}
+
+const addValue = (value) => {
+  error.value = ''
+  let obj = {
+    name: value,
+    image: getUser(value).user_image,
+    label: getUser(value).full_name,
+  }
+  if (!assignees.value.find((assignee) => assignee.name === value)) {
+    assignees.value.push(obj)
+  }
+}
+
+watch(assignToMe, (val) => {
+  let user = getUser('')
+  if (val) {
+    addValue(user.name)
+  } else {
+    removeValue(user.name)
+  }
+})
+
+watch(
+  () => props.open,
+  (val) => {
+    ownerRemoved.value = false
+    if (val) {
+      oldAssignees.value = [...(assignees.value || [])]
+
+      assignToMe.value = assignees.value.some(
+        (assignee) => assignee.name === getUser('').name,
+      )
+    } else {
+      updateAssignees()
+    }
+  },
+)
+
+async function updateAssignees() {
+  const removedAssignees = oldAssignees.value
+    .filter(
+      (assignee) => !assignees.value.find((a) => a.name === assignee.name),
+    )
+    .map((assignee) => assignee.name)
+
+  const addedAssignees = assignees.value
+    .filter(
+      (assignee) => !oldAssignees.value.find((a) => a.name === assignee.name),
+    )
+    .map((assignee) => assignee.name)
+
+  if (removedAssignees.length) {
+    if (!ownerRemoved.value && removedAssignees.includes(owner.value)) {
+      ownerRemoved.value = true
+      return
+    }
+
+    await call('crm.api.doc.remove_assignments', {
+      doctype: props.doctype,
+      name: props.doc.name,
+      assignees: JSON.stringify(removedAssignees),
+    })
+    toast.success(__('Assignees removed successfully.'))
+  }
+
+  if (addedAssignees.length) {
+    capture('assign_to', { doctype: props.doctype })
+    call('frappe.desk.form.assign_to.add', {
+      doctype: props.doctype,
+      name: props.doc.name,
+      assign_to: addedAssignees,
+    })
+    toast.success(__('Assignees added successfully.'))
+  }
+}
+</script>