fix: show organization details with option to switch to edit mode
This commit is contained in:
Shariq Ansari
parent
baf660be28
commit
0145b3b41d
@ -1,78 +1,112 @@
|
||||
<template>
|
||||
<Dialog
|
||||
v-model="show"
|
||||
:options="{
|
||||
title: editMode ? 'Edit Organization' : 'Create Organization',
|
||||
size: 'xl',
|
||||
actions: [
|
||||
{
|
||||
label: editMode ? 'Update' : 'Create',
|
||||
variant: 'solid',
|
||||
onClick: ({ close }) =>
|
||||
editMode ? updateOrganization(close) : callInsertDoc(close),
|
||||
},
|
||||
],
|
||||
}"
|
||||
>
|
||||
<template #body-content>
|
||||
<div class="flex flex-col gap-4">
|
||||
<FormControl
|
||||
type="text"
|
||||
ref="title"
|
||||
size="md"
|
||||
label="Organization name"
|
||||
variant="outline"
|
||||
v-model="_organization.organization_name"
|
||||
placeholder="Add organization name"
|
||||
/>
|
||||
<div class="flex gap-4">
|
||||
<FormControl
|
||||
class="flex-1"
|
||||
type="text"
|
||||
size="md"
|
||||
label="Website"
|
||||
variant="outline"
|
||||
v-model="_organization.website"
|
||||
placeholder="Add website"
|
||||
/>
|
||||
<FormControl
|
||||
class="flex-1"
|
||||
type="text"
|
||||
size="md"
|
||||
label="Annual revenue"
|
||||
variant="outline"
|
||||
v-model="_organization.annual_revenue"
|
||||
placeholder="Add annual revenue"
|
||||
/>
|
||||
<Dialog v-model="show" :options="dialogOptions">
|
||||
<template #body>
|
||||
<div class="bg-white px-4 pb-6 pt-5 sm:px-6">
|
||||
<div class="mb-5 flex items-center justify-between">
|
||||
<div>
|
||||
<h3 class="text-2xl font-semibold leading-6 text-gray-900">
|
||||
{{ dialogOptions.title || 'Untitled' }}
|
||||
</h3>
|
||||
</div>
|
||||
<div class="flex items-center gap-1">
|
||||
<Button
|
||||
v-if="detailMode"
|
||||
variant="ghost"
|
||||
class="w-7"
|
||||
@click="detailMode = false"
|
||||
>
|
||||
<EditIcon class="h-4 w-4" />
|
||||
</Button>
|
||||
<Button variant="ghost" class="w-7" @click="show = false">
|
||||
<FeatherIcon name="x" class="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-4">
|
||||
<FormControl
|
||||
class="flex-1"
|
||||
type="select"
|
||||
:options="[
|
||||
'1-10',
|
||||
'11-50',
|
||||
'51-200',
|
||||
'201-500',
|
||||
'501-1000',
|
||||
'1001-5000',
|
||||
'5001-10000',
|
||||
'10001+',
|
||||
]"
|
||||
size="md"
|
||||
label="No. of employees"
|
||||
variant="outline"
|
||||
v-model="_organization.no_of_employees"
|
||||
/>
|
||||
<Link
|
||||
class="flex-1"
|
||||
size="md"
|
||||
label="Industry"
|
||||
variant="outline"
|
||||
v-model="_organization.industry"
|
||||
doctype="CRM Industry"
|
||||
placeholder="Add industry"
|
||||
/>
|
||||
<div>
|
||||
<div v-if="detailMode" class="flex flex-col gap-3.5">
|
||||
<div
|
||||
class="flex h-7 items-center gap-2"
|
||||
v-for="field in fields"
|
||||
:key="field.name"
|
||||
>
|
||||
<component class="mx-1" :is="field.icon" />
|
||||
<div>{{ field.value }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>
|
||||
<div class="flex flex-col gap-4">
|
||||
<FormControl
|
||||
type="text"
|
||||
ref="title"
|
||||
size="md"
|
||||
label="Organization name"
|
||||
variant="outline"
|
||||
v-model="_organization.organization_name"
|
||||
placeholder="Add organization name"
|
||||
/>
|
||||
<div class="flex gap-4">
|
||||
<FormControl
|
||||
class="flex-1"
|
||||
type="text"
|
||||
size="md"
|
||||
label="Website"
|
||||
variant="outline"
|
||||
v-model="_organization.website"
|
||||
placeholder="Add website"
|
||||
/>
|
||||
<FormControl
|
||||
class="flex-1"
|
||||
type="text"
|
||||
size="md"
|
||||
label="Annual revenue"
|
||||
variant="outline"
|
||||
v-model="_organization.annual_revenue"
|
||||
placeholder="Add annual revenue"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex gap-4">
|
||||
<FormControl
|
||||
class="flex-1"
|
||||
type="select"
|
||||
:options="[
|
||||
'1-10',
|
||||
'11-50',
|
||||
'51-200',
|
||||
'201-500',
|
||||
'501-1000',
|
||||
'1001-5000',
|
||||
'5001-10000',
|
||||
'10001+',
|
||||
]"
|
||||
size="md"
|
||||
label="No. of employees"
|
||||
variant="outline"
|
||||
v-model="_organization.no_of_employees"
|
||||
/>
|
||||
<Link
|
||||
class="flex-1"
|
||||
size="md"
|
||||
label="Industry"
|
||||
variant="outline"
|
||||
v-model="_organization.industry"
|
||||
doctype="CRM Industry"
|
||||
placeholder="Add industry"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="!detailMode" class="px-4 pb-7 pt-4 sm:px-6">
|
||||
<div class="space-y-2">
|
||||
<Button
|
||||
class="w-full"
|
||||
v-for="action in dialogOptions.actions"
|
||||
:key="action.label"
|
||||
v-bind="action"
|
||||
>
|
||||
{{ action.label }}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -80,9 +114,11 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import EditIcon from '@/components/Icons/EditIcon.vue'
|
||||
import OrganizationsIcon from '@/components/Icons/OrganizationsIcon.vue'
|
||||
import Link from '@/components/Controls/Link.vue'
|
||||
import { FormControl, Dialog, call } from 'frappe-ui'
|
||||
import { ref, defineModel, nextTick, watch } from 'vue'
|
||||
import { FormControl, Dialog, call, FeatherIcon } from 'frappe-ui'
|
||||
import { ref, defineModel, nextTick, watch, computed } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
|
||||
const props = defineProps({
|
||||
@ -94,6 +130,7 @@ const props = defineProps({
|
||||
type: Object,
|
||||
default: {
|
||||
redirect: true,
|
||||
detailMode: false,
|
||||
afterInsert: () => {},
|
||||
},
|
||||
},
|
||||
@ -104,6 +141,7 @@ const show = defineModel()
|
||||
const organizations = defineModel('reloadOrganizations')
|
||||
|
||||
const title = ref(null)
|
||||
const detailMode = ref(false)
|
||||
const editMode = ref(false)
|
||||
let _organization = ref({
|
||||
organization_name: '',
|
||||
@ -113,7 +151,7 @@ let _organization = ref({
|
||||
industry: '',
|
||||
})
|
||||
|
||||
async function updateOrganization(close) {
|
||||
async function updateOrganization() {
|
||||
const old = { ...props.organization }
|
||||
const newOrg = { ..._organization.value }
|
||||
|
||||
@ -125,7 +163,7 @@ async function updateOrganization(close) {
|
||||
const values = newOrg
|
||||
|
||||
if (!nameChanged && !otherFieldChanged) {
|
||||
close()
|
||||
show.value = false
|
||||
return
|
||||
}
|
||||
|
||||
@ -136,7 +174,7 @@ async function updateOrganization(close) {
|
||||
if (otherFieldChanged) {
|
||||
name = await callSetValue(values)
|
||||
}
|
||||
handleOrganizationUpdate({ name }, close)
|
||||
handleOrganizationUpdate({ name })
|
||||
}
|
||||
|
||||
async function callRenameDoc() {
|
||||
@ -157,7 +195,7 @@ async function callSetValue(values) {
|
||||
return d.name
|
||||
}
|
||||
|
||||
async function callInsertDoc(close) {
|
||||
async function callInsertDoc() {
|
||||
const doc = await call('frappe.client.insert', {
|
||||
doc: {
|
||||
doctype: 'CRM Organization',
|
||||
@ -165,10 +203,10 @@ async function callInsertDoc(close) {
|
||||
website: _organization.value.website,
|
||||
},
|
||||
})
|
||||
doc.name && handleOrganizationUpdate(doc, close)
|
||||
doc.name && handleOrganizationUpdate(doc)
|
||||
}
|
||||
|
||||
function handleOrganizationUpdate(doc, close) {
|
||||
function handleOrganizationUpdate(doc) {
|
||||
organizations.value?.reload()
|
||||
if (doc.name && props.options.redirect) {
|
||||
router.push({
|
||||
@ -176,15 +214,67 @@ function handleOrganizationUpdate(doc, close) {
|
||||
params: { organizationId: doc.name },
|
||||
})
|
||||
}
|
||||
close && close()
|
||||
show.value = false
|
||||
props.options.afterInsert && props.options.afterInsert(doc)
|
||||
}
|
||||
|
||||
const dialogOptions = computed(() => {
|
||||
let title = detailMode.value
|
||||
? _organization.value.organization_name
|
||||
: editMode.value
|
||||
? 'Edit Organization'
|
||||
: 'Create Organization'
|
||||
let size = detailMode.value ? '' : 'xl'
|
||||
let actions = detailMode.value
|
||||
? []
|
||||
: [
|
||||
{
|
||||
label: editMode.value ? 'Update' : 'Create',
|
||||
variant: 'solid',
|
||||
onClick: () =>
|
||||
editMode.value ? updateOrganization() : callInsertDoc(),
|
||||
},
|
||||
]
|
||||
|
||||
return { title, size, actions }
|
||||
})
|
||||
|
||||
const fields = computed(() => {
|
||||
return [
|
||||
{
|
||||
icon: OrganizationsIcon,
|
||||
name: 'organization_name',
|
||||
value: _organization.value.organization_name,
|
||||
},
|
||||
{
|
||||
icon: OrganizationsIcon,
|
||||
name: 'website',
|
||||
value: _organization.value.website,
|
||||
},
|
||||
{
|
||||
icon: OrganizationsIcon,
|
||||
name: 'annual_revenue',
|
||||
value: _organization.value.annual_revenue,
|
||||
},
|
||||
{
|
||||
icon: OrganizationsIcon,
|
||||
name: 'no_of_employees',
|
||||
value: _organization.value.no_of_employees,
|
||||
},
|
||||
{
|
||||
icon: OrganizationsIcon,
|
||||
name: 'industry',
|
||||
value: _organization.value.industry,
|
||||
},
|
||||
]
|
||||
})
|
||||
|
||||
watch(
|
||||
() => show.value,
|
||||
(value) => {
|
||||
if (!value) return
|
||||
editMode.value = false
|
||||
detailMode.value = props.options.detailMode
|
||||
nextTick(() => {
|
||||
// TODO: Issue with FormControl
|
||||
// title.value.el.focus()
|
||||
|
||||
@ -113,13 +113,24 @@
|
||||
variant="ghost"
|
||||
label="More"
|
||||
class="-ml-1 cursor-pointer hover:text-gray-900"
|
||||
@click="
|
||||
() => {
|
||||
detailMode = true
|
||||
showOrganizationModal = true
|
||||
}
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
<div class="mt-2 flex gap-1.5">
|
||||
<Button
|
||||
label="Edit"
|
||||
size="sm"
|
||||
@click="showOrganizationModal = true"
|
||||
@click="
|
||||
() => {
|
||||
detailMode = false
|
||||
showOrganizationModal = true
|
||||
}
|
||||
"
|
||||
>
|
||||
<template #prefix>
|
||||
<EditIcon class="h-4 w-4" />
|
||||
@ -205,12 +216,13 @@
|
||||
</div>
|
||||
</template>
|
||||
</Tabs>
|
||||
<OrganizationModal
|
||||
v-model="showOrganizationModal"
|
||||
v-model:reloadOrganizations="organizations"
|
||||
:organization="organization"
|
||||
/>
|
||||
</div>
|
||||
<OrganizationModal
|
||||
v-model="showOrganizationModal"
|
||||
v-model:reloadOrganizations="organizations"
|
||||
:organization="organization"
|
||||
:options="{ detailMode }"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
@ -258,6 +270,7 @@ const props = defineProps({
|
||||
|
||||
const { organizations, getOrganization } = organizationsStore()
|
||||
const showOrganizationModal = ref(false)
|
||||
const detailMode = ref(false)
|
||||
|
||||
const organization = computed(() => getOrganization(props.organizationId))
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user