refactor: Assign to as popover instead of dialog
This commit is contained in:
Shariq Ansari
parent
819a669922
commit
995f356419
1
frontend/components.d.ts
vendored
1
frontend/components.d.ts
vendored
@ -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']
|
||||
|
||||
@ -1,31 +1,34 @@
|
||||
<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"
|
||||
/>
|
||||
<NestedPopover>
|
||||
<template #target>
|
||||
<component
|
||||
v-if="assignees?.length"
|
||||
:is="assignees?.length == 1 ? 'Button' : 'div'"
|
||||
>
|
||||
<MultipleAvatar :avatars="assignees" />
|
||||
</component>
|
||||
<Button v-else :label="__('Assign to')" />
|
||||
</template>
|
||||
<template #body="{ open }">
|
||||
<AssignToBody
|
||||
v-show="open"
|
||||
v-model="assignees"
|
||||
: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 { ref } from 'vue'
|
||||
import AssignToBody from '@/components/AssignToBody.vue'
|
||||
|
||||
const props = defineProps({
|
||||
data: Object,
|
||||
doctype: String,
|
||||
})
|
||||
|
||||
const showAssignmentModal = ref(false)
|
||||
const assignees = defineModel()
|
||||
</script>
|
||||
|
||||
196
frontend/src/components/AssignToBody.vue
Normal file
196
frontend/src/components/AssignToBody.vue
Normal file
@ -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>
|
||||
Loading…
x
Reference in New Issue
Block a user