test/crm
1
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: assignment modal for bulk assign

Browse Source
This commit is contained in:
Shariq Ansari 2025-08-01 12:54:16 +05:30
parent 995f356419
commit aeb3f150c5
1 changed files with 54 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

108
frontend/src/components/Modals/AssignmentModal.vue
View File

@ -5,59 +5,60 @@
@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=""
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 }">
<Button
:label="__('Add assignee')"
variant="subtle"
icon-left="plus"
@click.stop="togglePopover"
/>
</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 }}
<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>
</template>
</Link>
</div>
</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>
</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),