refactor: assignment modal for bulk assign

(cherry picked from commit aeb3f150c58a24396824037f01ccf09624bdcc01)

frontend/src/components/Modals/AssignmentModal.vue

@@ -5,28 +5,6 @@
     @close="() => (assignees = [...oldAssignees])"
   >
     <template #body-content>
-      <div class="flex flex-wrap items-center gap-2">
-        <Tooltip
-          :text="assignee.name"
-          v-for="assignee in assignees"
-          :key="assignee.name"
-        >
-          <div>
-            <Button :label="getUser(assignee.name).full_name" theme="gray">
-              <template #prefix>
-                <UserAvatar :user="assignee.name" size="sm" />
-              </template>
-              <template #suffix>
-                <FeatherIcon
-                  v-if="assignee.name !== owner"
-                  class="h-3.5"
-                  name="x"
-                  @click.stop="removeValue(assignee.name)"
-                />
-              </template>
-            </Button>
-          </div>
-        </Tooltip>
       <Link
         class="form-control"
         value=""
@@ -39,12 +17,36 @@
         :hideMe="true"
       >
         <template #target="{ togglePopover }">
-            <Button
+          <div
-              :label="__('Add assignee')"
+            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"
-              variant="subtle"
-              icon-left="plus"
             @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" />
@@ -57,7 +59,6 @@
           </Tooltip>
         </template>
       </Link>
-      </div>
     </template>
     <template #actions>
       <div class="flex justify-between items-center gap-2">
@@ -77,7 +78,6 @@
             variant="solid"
             :label="__('Update')"
             @click="updateAssignees()"
-            :disabled="!assignees.length"
           />
         </div>
       </div>
@@ -142,7 +142,7 @@ const addValue = (value) => {
   }
 }
 
-function updateAssignees() {
+async function updateAssignees() {
   const removedAssignees = oldAssignees.value
     .filter(
       (assignee) => !assignees.value.find((a) => a.name === assignee.name),
@@ -156,7 +156,7 @@ function updateAssignees() {
     .map((assignee) => assignee.name)
 
   if (removedAssignees.length) {
-    call('crm.api.doc.remove_assignments', {
+    await call('crm.api.doc.remove_assignments', {
       doctype: props.doctype,
       name: props.doc.name,
       assignees: JSON.stringify(removedAssignees),