crm/frontend/src/components/Modals/NoteModal.vue
2024-08-16 19:21:03 +05:30

161 lines
4.0 KiB
Vue

<template>
<Dialog
v-model="show"
:options="{
size: 'xl',
actions: [
{
label: editMode ? __('Update') : __('Create'),
variant: 'solid',
onClick: () => updateNote(),
},
],
}"
>
<template #body-title>
<div class="flex items-center gap-3">
<h3 class="text-2xl font-semibold leading-6 text-gray-900">
{{ editMode ? __('Edit Note') : __('Create Note') }}
</h3>
<Button
v-if="_note?.reference_docname"
variant="outline"
size="sm"
:label="
_note.reference_doctype == 'CRM Deal'
? __('Open Deal')
: __('Open Lead')
"
@click="redirect()"
>
<template #suffix>
<ArrowUpRightIcon class="h-4 w-4" />
</template>
</Button>
</div>
</template>
<template #body-content>
<div class="flex flex-col gap-4">
<div>
<div class="mb-1.5 text-sm text-gray-600">{{ __('Title') }}</div>
<TextInput
ref="title"
variant="outline"
v-model="_note.title"
:placeholder="__('Call with John Doe')"
/>
</div>
<div>
<div class="mb-1.5 text-sm text-gray-600">{{ __('Content') }}</div>
<TextEditor
variant="outline"
ref="content"
editor-class="!prose-sm overflow-auto min-h-[180px] max-h-80 py-1.5 px-2 rounded border border-gray-300 bg-white hover:border-gray-400 hover:shadow-sm focus:bg-white focus:border-gray-500 focus:shadow-sm focus:ring-0 focus-visible:ring-2 focus-visible:ring-gray-400 text-gray-800 transition-colors"
:bubbleMenu="true"
:content="_note.content"
@change="(val) => (_note.content = val)"
:placeholder="
__('Took a call with John Doe and discussed the new project.')
"
/>
</div>
</div>
</template>
</Dialog>
</template>
<script setup>
import ArrowUpRightIcon from '@/components/Icons/ArrowUpRightIcon.vue'
import { capture } from '@/telemetry'
import { TextEditor, call } from 'frappe-ui'
import { ref, nextTick, watch } from 'vue'
import { useRouter } from 'vue-router'
const props = defineProps({
note: {
type: Object,
default: {},
},
doctype: {
type: String,
default: 'CRM Lead',
},
doc: {
type: String,
default: '',
},
})
const show = defineModel()
const notes = defineModel('reloadNotes')
const emit = defineEmits(['after'])
const router = useRouter()
const title = ref(null)
const editMode = ref(false)
let _note = ref({})
async function updateNote() {
if (
props.note.title === _note.value.title &&
props.note.content === _note.value.content
)
return
if (_note.value.name) {
let d = await call('frappe.client.set_value', {
doctype: 'FCRM Note',
name: _note.value.name,
fieldname: _note.value,
})
if (d.name) {
notes.value?.reload()
emit('after', d)
}
} else {
let d = await call('frappe.client.insert', {
doc: {
doctype: 'FCRM Note',
title: _note.value.title,
content: _note.value.content,
reference_doctype: props.doctype,
reference_docname: props.doc || '',
},
})
if (d.name) {
capture('note_created')
notes.value?.reload()
emit('after', d, true)
}
}
show.value = false
}
function redirect() {
if (!props.note?.reference_docname) return
let name = props.note.reference_doctype == 'CRM Deal' ? 'Deal' : 'Lead'
let params = { leadId: props.note.reference_docname }
if (name == 'Deal') {
params = { dealId: props.note.reference_docname }
}
router.push({ name: name, params: params })
}
watch(
() => show.value,
(value) => {
if (!value) return
editMode.value = false
nextTick(() => {
title.value.el.focus()
_note.value = { ...props.note }
if (_note.value.title || _note.value.content) {
editMode.value = true
}
})
}
)
</script>