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

Merge pull request #304 from shariquerik/refactor-layout-builder-modal

Browse Source 
refactor: side panel layout builder modal
This commit is contained in:
Shariq Ansari 2024-08-14 14:02:45 +05:30 committed by GitHub
commit 043dd45896
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
7 changed files with 211 additions and 340 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

135
frontend/src/components/Settings/QuickEntryLayoutBuilder.vue
View File

@ -1,14 +1,11 @@
<template> <template>
<div> <div>
<Draggable :list="sections" item-key="label" class="flex flex-col"> <Draggable :list="sections" item-key="label" class="flex flex-col gap-5.5">
<template #item="{ element: section }"> <template #item="{ element: section }">
<div <div class="flex flex-col gap-1.5 p-2.5 bg-gray-50 rounded">
class="py-2 first:pt-0" <div class="flex items-center justify-between">
:class="section.hideBorder ? '' : 'border-t first:border-t-0'"
>
<div class="flex items-center justify-between pb-2">
<div <div
class="flex h-7 max-w-fit cursor-pointer items-center gap-2 text-base font-semibold leading-5" class="flex h-7 max-w-fit cursor-pointer items-center gap-2 text-base font-medium leading-4"
> >
<div <div
v-if="!section.editingLabel" v-if="!section.editingLabel"
@ -39,81 +36,71 @@
</template> </template>
</Dropdown> </Dropdown>
</div> </div>
<div> <Draggable
<Draggable :list="section.fields"
:list="section.fields" group="fields"
group="fields" item-key="label"
item-key="label" class="grid gap-1.5"
class="grid gap-2" :class="
:class=" section.columns ? 'grid-cols-' + section.columns : 'grid-cols-3'
section.columns ? 'grid-cols-' + section.columns : 'grid-cols-3' "
" handle=".cursor-grab"
handle=".cursor-grab" >
> <template #item="{ element: field }">
<template #item="{ element: field }"> <div
<div class="px-2.5 py-2 border rounded text-base bg-white text-gray-800 flex items-center leading-4 justify-between gap-2"
class="px-1.5 py-1 border rounded text-base text-gray-800 flex items-center justify-between gap-2" >
> <div class="flex items-center gap-2">
<div class="flex items-center gap-2"> <DragVerticalIcon class="h-3.5 cursor-grab" />
<DragVerticalIcon class="h-3.5 cursor-grab" /> <div>{{ field.label }}</div>
<div>{{ field.label }}</div>
</div>
<div>
<Button
variant="ghost"
icon="x"
@click="
section.fields.splice(section.fields.indexOf(field), 1)
"
/>
</div>
</div> </div>
</template> <Button
</Draggable> variant="ghost"
<Autocomplete class="!size-4 rounded-sm"
v-if="fields.data" icon="x"
value="" @click="
:options="fields.data" section.fields.splice(section.fields.indexOf(field), 1)
@change="(e) => addField(section, e)"
>
<template #target="{ togglePopover }">
<div
class="grid gap-2 w-full"
:class="
section.columns
? 'grid-cols-' + section.columns
: 'grid-cols-3'
" "
/>
</div>
</template>
</Draggable>
<Autocomplete
v-if="fields.data"
value=""
:options="fields.data"
@change="(e) => addField(section, e)"
>
<template #target="{ togglePopover }">
<div class="gap-2 w-full">
<Button
class="w-full !h-8 !border-gray-200 hover:!border-gray-300"
variant="outline"
@click="togglePopover()"
:label="__('Add Field')"
> >
<Button <template #prefix>
class="mt-2 w-full !h-[38px] !border-gray-200" <FeatherIcon name="plus" class="h-4" />
variant="outline" </template>
@click="togglePopover()" </Button>
:label="__('Add Field')" </div>
> </template>
<template #prefix> <template #item-label="{ option }">
<FeatherIcon name="plus" class="h-4" /> <div class="flex flex-col gap-1">
</template> <div>{{ option.label }}</div>
</Button> <div class="text-gray-500 text-sm">
{{ `${option.fieldname} - ${option.fieldtype}` }}
</div> </div>
</template> </div>
<template #item-label="{ option }"> </template>
<div class="flex flex-col gap-1"> </Autocomplete>
<div>{{ option.label }}</div>
<div class="text-gray-500 text-sm">
{{ `${option.fieldname} - ${option.fieldtype}` }}
</div>
</div>
</template>
</Autocomplete>
</div>
</div> </div>
</template> </template>
</Draggable> </Draggable>
<div class="py-2 border-t"> <div class="mt-5.5">
<Button <Button
class="w-full !h-[38px] !border-gray-200" class="w-full h-8"
variant="outline" variant="subtle"
:label="__('Add Section')" :label="__('Add Section')"
@click=" @click="
sections.push({ sections.push({

96
frontend/src/components/Settings/QuickEntryModal.vue
View File

@ -1,62 +1,62 @@
<template> <template>
<Dialog v-model="show" :options="{ size: '3xl' }"> <Dialog v-model="show" :options="{ size: '3xl' }">
<template #body> <template #body-title>
<div class="flex flex-col overflow-hidden h-[calc(100vh_-_8rem)]"> <h3
<div class="flex flex-col gap-2 p-8 pb-5"> class="flex items-center gap-2 text-2xl font-semibold leading-6 text-gray-900"
<h2 class="flex gap-2 text-xl font-semibold leading-none h-5 mb-4"> >
<div>{{ __('Edit Quick Entry Layout') }}</div> <div>{{ __('Edit Quick Entry Layout') }}</div>
<Badge <Badge
v-if="dirty" v-if="dirty"
:label="__('Not Saved')" :label="__('Not Saved')"
variant="subtle" variant="subtle"
theme="orange" theme="orange"
/> />
</h2> </h3>
<div class="flex gap-6 items-end"> </template>
<FormControl <template #body-content>
class="flex-1" <div class="flex flex-col gap-3">
type="select" <div class="flex justify-between gap-2">
v-model="_doctype" <FormControl
:label="__('DocType')" type="select"
:options="['CRM Lead', 'CRM Deal', 'Contact', 'CRM Organization']" class="w-1/4"
@change="reload" v-model="_doctype"
/> :options="['CRM Lead', 'CRM Deal', 'Contact', 'CRM Organization']"
<div class="flex flex-row-reverse gap-2"> @change="reload"
<Button />
:loading="loading" <Switch
:label="__('Save')" v-model="preview"
variant="solid" :label="preview ? __('Hide preview') : __('Show preview')"
@click="saveChanges" size="sm"
/> />
<Button :label="__('Reset')" @click="reload" />
<Button
:label="preview ? __('Hide Preview') : __('Show Preview')"
@click="preview = !preview"
/>
</div>
</div>
</div> </div>
<div v-if="sections?.data" class="overflow-y-auto p-8 pt-3"> <div v-if="sections?.data">
<div <QuickEntryLayoutBuilder
class="rounded-xl h-full inline-block w-full px-4 pb-6 pt-5 sm:px-6 transform overflow-y-auto bg-white text-left align-middle shadow-xl transition-all" v-if="!preview"
> :sections="sections.data"
<QuickEntryLayoutBuilder :doctype="_doctype"
v-if="!preview" />
:sections="sections.data" <Fields v-else :sections="sections.data" :data="{}" />
:doctype="_doctype"
/>
<Fields v-else :sections="sections.data" :data="{}" />
</div>
</div> </div>
</div> </div>
</template> </template>
<template #actions>
<div class="flex flex-row-reverse gap-2">
<Button
:loading="loading"
:label="__('Save')"
variant="solid"
@click="saveChanges"
/>
<Button :label="__('Reset')" @click="reload" />
</div>
</template>
</Dialog> </Dialog>
</template> </template>
<script setup> <script setup>
import Fields from '@/components/Fields.vue' import Fields from '@/components/Fields.vue'
import QuickEntryLayoutBuilder from '@/components/Settings/QuickEntryLayoutBuilder.vue' import QuickEntryLayoutBuilder from '@/components/Settings/QuickEntryLayoutBuilder.vue'
import { useDebounceFn } from '@vueuse/core' import { useDebounceFn } from '@vueuse/core'
import { Dialog, Badge, call, createResource } from 'frappe-ui' import { Dialog, Badge, Switch, call, createResource } from 'frappe-ui'
import { ref, watch, onMounted, nextTick } from 'vue' import { ref, watch, onMounted, nextTick } from 'vue'
const props = defineProps({ const props = defineProps({
@ -121,7 +121,7 @@ function saveChanges() {
}, },
).then(() => { ).then(() => {
loading.value = false loading.value = false
reload() show.value = false
}) })
} }
</script> </script>

52
frontend/src/components/Settings/SidePanelLayoutBuilder.vue
View File

@ -1,11 +1,13 @@
<template> <template>
<div> <div>
<Draggable :list="sections" item-key="label" class="flex flex-col"> <Draggable :list="sections" item-key="label" class="flex flex-col gap-5.5">
<template #item="{ element: section }"> <template #item="{ element: section }">
<div class="border-b"> <div class="flex flex-col gap-3">
<div class="flex items-center justify-between p-2"> <div
class="flex items-center justify-between rounded px-2.5 py-2 bg-gray-50"
>
<div <div
class="flex h-7 max-w-fit cursor-pointer items-center gap-2 pl-2 pr-3 text-base font-semibold leading-5" class="flex max-w-fit cursor-pointer items-center gap-2 text-base leading-4"
@click="section.opened = !section.opened" @click="section.opened = !section.opened"
> >
<FeatherIcon <FeatherIcon
@ -26,51 +28,54 @@
<Button <Button
v-if="section.editingLabel" v-if="section.editingLabel"
icon="check" icon="check"
class="!size-4 rounded-sm"
variant="ghost" variant="ghost"
@click.stop="section.editingLabel = false" @click.stop="section.editingLabel = false"
/> />
</div> </div>
</div> </div>
<div> <div class="flex gap-1 items-center">
<Button <Button
v-if="!section.editingLabel" v-if="!section.editingLabel"
icon="edit" class="!size-4 rounded-sm"
variant="ghost" variant="ghost"
@click="section.editingLabel = true" @click="section.editingLabel = true"
/> >
<EditIcon class="h-3.5" />
</Button>
<Button <Button
v-if="section.editable !== false" v-if="section.editable !== false"
class="!size-4 rounded-sm"
icon="x" icon="x"
variant="ghost" variant="ghost"
@click="sections.splice(sections.indexOf(section), 1)" @click="sections.splice(sections.indexOf(section), 1)"
/> />
</div> </div>
</div> </div>
<div v-show="section.opened" class="p-4 pt-0 pb-2"> <div v-show="section.opened">
<Draggable <Draggable
:list="section.fields" :list="section.fields"
group="fields" group="fields"
item-key="label" item-key="label"
class="flex flex-col gap-1" class="flex flex-col gap-1.5"
handle=".cursor-grab" handle=".cursor-grab"
> >
<template #item="{ element: field }"> <template #item="{ element: field }">
<div <div
class="px-1.5 py-1 border rounded text-base text-gray-800 flex items-center justify-between gap-2" class="px-2.5 py-2 border rounded text-base leading-4 text-gray-800 flex items-center justify-between gap-2"
> >
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<DragVerticalIcon class="h-3.5 cursor-grab" /> <DragVerticalIcon class="h-3.5 cursor-grab" />
<div>{{ field.label }}</div> <div>{{ field.label }}</div>
</div> </div>
<div> <Button
<Button variant="ghost"
variant="ghost" icon="x"
icon="x" class="!size-4 rounded-sm"
@click=" @click="
section.fields.splice(section.fields.indexOf(field), 1) section.fields.splice(section.fields.indexOf(field), 1)
" "
/> />
</div>
</div> </div>
</template> </template>
</Draggable> </Draggable>
@ -82,7 +87,7 @@
> >
<template #target="{ togglePopover }"> <template #target="{ togglePopover }">
<Button <Button
class="w-full mt-2" class="w-full h-8 mt-1.5 !border-gray-200 hover:!border-gray-300"
variant="outline" variant="outline"
@click="togglePopover()" @click="togglePopover()"
:label="__('Add Field')" :label="__('Add Field')"
@ -113,10 +118,10 @@
</div> </div>
</template> </template>
</Draggable> </Draggable>
<div class="p-2"> <div class="mt-5.5">
<Button <Button
class="w-full" class="w-full h-8"
variant="outline" variant="subtle"
:label="__('Add Section')" :label="__('Add Section')"
@click=" @click="
sections.push({ label: __('New Section'), opened: true, fields: [] }) sections.push({ label: __('New Section'), opened: true, fields: [] })
@ -130,6 +135,7 @@
</div> </div>
</template> </template>
<script setup> <script setup>
import EditIcon from '@/components/Icons/EditIcon.vue'
import Autocomplete from '@/components/frappe-ui/Autocomplete.vue' import Autocomplete from '@/components/frappe-ui/Autocomplete.vue'
import DragVerticalIcon from '@/components/Icons/DragVerticalIcon.vue' import DragVerticalIcon from '@/components/Icons/DragVerticalIcon.vue'
import Draggable from 'vuedraggable' import Draggable from 'vuedraggable'

130
frontend/src/components/Settings/SidePanelModal.vue
View File

@ -1,67 +1,70 @@
<template> <template>
<Dialog v-model="show" :options="{ size: '3xl' }"> <Dialog v-model="show" :options="{ size: '3xl' }">
<template #body> <template #body-title>
<div ref="parentRef" class="flex h-[calc(100vh_-_8rem)]"> <h3
<div class="flex-1 flex flex-col justify-between gap-2 p-8"> class="flex items-center gap-2 text-2xl font-semibold leading-6 text-gray-900"
<div class="flex flex-col gap-2"> >
<h2 class="flex gap-2 text-xl font-semibold leading-none h-5 mb-4"> <div>{{ __('Edit Field Layout') }}</div>
<div>{{ __('Edit Fields Layout') }}</div> <Badge
<Badge v-if="dirty"
v-if="dirty" :label="__('Not Saved')"
:label="__('Not Saved')" variant="subtle"
variant="subtle" theme="orange"
theme="orange" />
/> </h3>
</h2> </template>
<FormControl <template #body-content>
type="select" <div class="flex flex-col gap-5.5">
v-model="_doctype" <div class="flex justify-between gap-2">
:label="__('DocType')" <FormControl
:options="['CRM Lead', 'CRM Deal']" type="select"
@change="reload" class="w-1/4"
/> v-model="_doctype"
</div> :options="['CRM Lead', 'CRM Deal']"
<div class="flex flex-row-reverse gap-2"> @change="reload"
<Button />
:loading="loading" <Switch
:label="__('Save')" v-model="preview"
variant="solid" :label="preview ? __('Hide preview') : __('Show preview')"
@click="saveChanges" size="sm"
/> />
<Button :label="__('Reset')" @click="reload" />
<Button
:label="preview ? __('Hide Preview') : __('Show Preview')"
@click="preview = !preview"
/>
</div>
</div> </div>
<Resizer <div v-if="sections.data" class="flex gap-4">
v-if="sections.data" <SidePanelLayoutBuilder
class="flex flex-col justify-between border-l" class="flex flex-1 flex-col pr-2"
:parent="parentRef" :sections="sections.data"
side="right" :doctype="_doctype"
> />
<div class="flex flex-1 flex-col justify-between overflow-hidden"> <div v-if="preview" class="flex flex-1 flex-col border rounded">
<div class="flex flex-col overflow-y-auto"> <div
<SidePanelLayoutBuilder v-for="(section, i) in sections.data"
v-if="!preview" :key="section.label"
:sections="sections.data" class="flex flex-col py-1.5 px-1"
:doctype="_doctype" :class="{ 'border-b': i !== sections.data.length - 1 }"
/> >
<div <Section :is-opened="section.opened" :label="section.label">
v-else <SectionFields :fields="section.fields" v-model="data" />
v-for="(section, i) in sections.data" </Section>
:key="section.label"
class="flex flex-col p-3"
:class="{ 'border-b': i !== sections.data.length - 1 }"
>
<Section :is-opened="section.opened" :label="section.label">
<SectionFields :fields="section.fields" v-model="data" />
</Section>
</div>
</div> </div>
</div> </div>
</Resizer> <div
v-else
class="flex flex-1 justify-center items-center text-gray-600 bg-gray-50 rounded border border-gray-50"
>
{{ __('Toggle on for preview') }}
</div>
</div>
</div>
</template>
<template #actions>
<div class="flex flex-row-reverse gap-2">
<Button
:loading="loading"
:label="__('Save')"
variant="solid"
@click="saveChanges"
/>
<Button :label="__('Reset')" @click="reload" />
</div> </div>
</template> </template>
</Dialog> </Dialog>
@ -69,10 +72,9 @@
<script setup> <script setup>
import Section from '@/components/Section.vue' import Section from '@/components/Section.vue'
import SectionFields from '@/components/SectionFields.vue' import SectionFields from '@/components/SectionFields.vue'
import Resizer from '@/components/Resizer.vue'
import SidePanelLayoutBuilder from '@/components/Settings/SidePanelLayoutBuilder.vue' import SidePanelLayoutBuilder from '@/components/Settings/SidePanelLayoutBuilder.vue'
import { useDebounceFn } from '@vueuse/core' import { useDebounceFn } from '@vueuse/core'
import { Dialog, Badge, call, createResource } from 'frappe-ui' import { Dialog, Badge, Switch, call, createResource } from 'frappe-ui'
import { ref, watch, onMounted, nextTick } from 'vue' import { ref, watch, onMounted, nextTick } from 'vue'
const props = defineProps({ const props = defineProps({
@ -82,9 +84,10 @@ const props = defineProps({
}, },
}) })
const emit = defineEmits(['reload'])
const show = defineModel() const show = defineModel()
const _doctype = ref(props.doctype) const _doctype = ref(props.doctype)
const parentRef = ref(null)
const loading = ref(false) const loading = ref(false)
const dirty = ref(false) const dirty = ref(false)
const preview = ref(false) const preview = ref(false)
@ -139,7 +142,8 @@ function saveChanges() {
}, },
).then(() => { ).then(() => {
loading.value = false loading.value = false
reload() show.value = false
emit('reload')
}) })
} }
</script> </script>

131
frontend/src/components/Settings/SidebarFieldsLayout.vue
View File

@ -1,131 +0,0 @@
<template>
<div ref="parentRef" class="flex h-full">
<div class="flex-1 flex flex-col justify-between gap-2 p-8">
<div class="flex flex-col gap-2">
<h2 class="flex gap-2 text-xl font-semibold leading-none h-5 mb-4">
<div>{{ __('Sidebar Fields Layout') }}</div>
<Badge
v-if="dirty"
:label="__('Not Saved')"
variant="subtle"
theme="orange"
/>
</h2>
<FormControl
type="select"
v-model="doctype"
:label="__('DocType')"
:options="['CRM Lead', 'CRM Deal']"
@change="reload"
/>
</div>
<div class="flex flex-row-reverse gap-2">
<Button
:loading="loading"
:label="__('Save')"
variant="solid"
@click="saveChanges"
/>
<Button :label="__('Reset')" @click="reload" />
<Button
:label="preview ? __('Hide Preview') : __('Show Preview')"
@click="preview = !preview"
/>
</div>
</div>
<Resizer
v-if="sections.data"
class="flex flex-col justify-between border-l"
:parent="parentRef"
side="right"
>
<div class="flex flex-1 flex-col justify-between overflow-hidden">
<div class="flex flex-col overflow-y-auto">
<SidebarLayoutBuilder
v-if="!preview"
:sections="sections.data"
:doctype="doctype"
/>
<div
v-else
v-for="(section, i) in sections.data"
:key="section.label"
class="flex flex-col p-3"
:class="{ 'border-b': i !== sections.data.length - 1 }"
>
<Section :is-opened="section.opened" :label="section.label">
<SectionFields :fields="section.fields" v-model="data" />
</Section>
</div>
</div>
</div>
</Resizer>
</div>
</template>
<script setup>
import Section from '@/components/Section.vue'
import SectionFields from '@/components/SectionFields.vue'
import Resizer from '@/components/Resizer.vue'
import SidebarLayoutBuilder from '@/components/Settings/SidebarLayoutBuilder.vue'
import { useDebounceFn } from '@vueuse/core'
import { Badge, call, createResource } from 'frappe-ui'
import { ref, watch, onMounted } from 'vue'
const parentRef = ref(null)
const doctype = ref('CRM Lead')
const loading = ref(false)
const dirty = ref(false)
const preview = ref(false)
const data = ref({})
function getParams() {
return { doctype: doctype.value, type: 'Side Panel' }
}
const sections = createResource({
url: 'crm.fcrm.doctype.crm_fields_layout.crm_fields_layout.get_fields_layout',
cache: ['sidebar-sections', doctype.value],
params: getParams(),
onSuccess(data) {
sections.originalData = JSON.parse(JSON.stringify(data))
},
})
watch(
() => sections?.data,
() => {
dirty.value =
JSON.stringify(sections?.data) !== JSON.stringify(sections?.originalData)
},
{ deep: true },
)
onMounted(() => useDebounceFn(reload, 100)())
function reload() {
sections.params = getParams()
sections.reload()
}
function saveChanges() {
let _sections = JSON.parse(JSON.stringify(sections.data))
_sections.forEach((section) => {
if (!section.fields) return
section.fields = section.fields.map(
(field) => field.fieldname || field.name,
)
})
loading.value = true
call(
'crm.fcrm.doctype.crm_fields_layout.crm_fields_layout.save_fields_layout',
{
doctype: doctype.value,
type: 'Side Panel',
layout: JSON.stringify(_sections),
},
).then(() => {
loading.value = false
reload()
})
}
</script>

1
frontend/src/pages/Deal.vue
View File

@ -298,6 +298,7 @@
v-if="showSidePanelModal" v-if="showSidePanelModal"
v-model="showSidePanelModal" v-model="showSidePanelModal"
doctype="CRM Deal" doctype="CRM Deal"
@reload="() => fieldsLayout.reload()"
/> />
</template> </template>
<script setup> <script setup>

6
frontend/src/pages/Lead.vue
View File

@ -266,7 +266,11 @@
</div> </div>
</template> </template>
</Dialog> </Dialog>
<SidePanelModal v-if="showSidePanelModal" v-model="showSidePanelModal" /> <SidePanelModal
v-if="showSidePanelModal"
v-model="showSidePanelModal"
@reload="() => fieldsLayout.reload()"
/>
</template> </template>
<script setup> <script setup>
import Resizer from '@/components/Resizer.vue' import Resizer from '@/components/Resizer.vue'