refactor: side panel layout builder modal
This commit is contained in:
Shariq Ansari
parent
dbb1c2d804
commit
4848b09022
@ -1,11 +1,13 @@
|
||||
<template>
|
||||
<div>
|
||||
<Draggable :list="sections" item-key="label" class="flex flex-col">
|
||||
<FadedScrollableDiv>
|
||||
<Draggable :list="sections" item-key="label" class="flex flex-col gap-5.5">
|
||||
<template #item="{ element: section }">
|
||||
<div class="border-b">
|
||||
<div class="flex items-center justify-between p-2">
|
||||
<div class="flex flex-col gap-3">
|
||||
<div
|
||||
class="flex items-center justify-between rounded px-2.5 py-2 bg-gray-50"
|
||||
>
|
||||
<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"
|
||||
>
|
||||
<FeatherIcon
|
||||
@ -26,37 +28,41 @@
|
||||
<Button
|
||||
v-if="section.editingLabel"
|
||||
icon="check"
|
||||
class="!size-4 rounded-sm"
|
||||
variant="ghost"
|
||||
@click.stop="section.editingLabel = false"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="flex gap-1 items-center">
|
||||
<Button
|
||||
v-if="!section.editingLabel"
|
||||
icon="edit"
|
||||
class="!size-4 rounded-sm"
|
||||
variant="ghost"
|
||||
@click="section.editingLabel = true"
|
||||
/>
|
||||
>
|
||||
<EditIcon class="h-3.5" />
|
||||
</Button>
|
||||
<Button
|
||||
v-if="section.editable !== false"
|
||||
class="!size-4 rounded-sm"
|
||||
icon="x"
|
||||
variant="ghost"
|
||||
@click="sections.splice(sections.indexOf(section), 1)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div v-show="section.opened" class="p-4 pt-0 pb-2">
|
||||
<div v-show="section.opened">
|
||||
<Draggable
|
||||
:list="section.fields"
|
||||
group="fields"
|
||||
item-key="label"
|
||||
class="flex flex-col gap-1"
|
||||
class="flex flex-col gap-1.5"
|
||||
handle=".cursor-grab"
|
||||
>
|
||||
<template #item="{ element: field }">
|
||||
<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 text-gray-800 flex items-center justify-between gap-2"
|
||||
>
|
||||
<div class="flex items-center gap-2">
|
||||
<DragVerticalIcon class="h-3.5 cursor-grab" />
|
||||
@ -66,6 +72,7 @@
|
||||
<Button
|
||||
variant="ghost"
|
||||
icon="x"
|
||||
class="!size-4 rounded-sm"
|
||||
@click="
|
||||
section.fields.splice(section.fields.indexOf(field), 1)
|
||||
"
|
||||
@ -82,7 +89,7 @@
|
||||
>
|
||||
<template #target="{ togglePopover }">
|
||||
<Button
|
||||
class="w-full mt-2"
|
||||
class="w-full h-8 mt-1.5 !border-gray-200 hover:!border-gray-300"
|
||||
variant="outline"
|
||||
@click="togglePopover()"
|
||||
:label="__('Add Field')"
|
||||
@ -113,10 +120,10 @@
|
||||
</div>
|
||||
</template>
|
||||
</Draggable>
|
||||
<div class="p-2">
|
||||
<div class="mt-5.5">
|
||||
<Button
|
||||
class="w-full"
|
||||
variant="outline"
|
||||
class="w-full h-8"
|
||||
variant="subtle"
|
||||
:label="__('Add Section')"
|
||||
@click="
|
||||
sections.push({ label: __('New Section'), opened: true, fields: [] })
|
||||
@ -127,9 +134,11 @@
|
||||
</template>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</FadedScrollableDiv>
|
||||
</template>
|
||||
<script setup>
|
||||
import FadedScrollableDiv from '@/components/FadedScrollableDiv.vue'
|
||||
import EditIcon from '@/components/Icons/EditIcon.vue'
|
||||
import Autocomplete from '@/components/frappe-ui/Autocomplete.vue'
|
||||
import DragVerticalIcon from '@/components/Icons/DragVerticalIcon.vue'
|
||||
import Draggable from 'vuedraggable'
|
||||
|
||||
@ -1,67 +1,73 @@
|
||||
<template>
|
||||
<Dialog v-model="show" :options="{ size: '3xl' }">
|
||||
<template #body>
|
||||
<div ref="parentRef" class="flex h-[calc(100vh_-_8rem)]">
|
||||
<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>{{ __('Edit 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>
|
||||
<template #body-title>
|
||||
<h3
|
||||
class="flex items-center gap-2 text-2xl font-semibold leading-6 text-gray-900"
|
||||
>
|
||||
<div>{{ __('Edit Field Layout') }}</div>
|
||||
<Badge
|
||||
v-if="dirty"
|
||||
:label="__('Not Saved')"
|
||||
variant="subtle"
|
||||
theme="orange"
|
||||
/>
|
||||
</h3>
|
||||
</template>
|
||||
<template #body-content>
|
||||
<div class="flex flex-col gap-5.5 h-[calc(100vh_-_17rem)]">
|
||||
<div class="flex justify-between gap-2">
|
||||
<FormControl
|
||||
type="select"
|
||||
class="w-1/4"
|
||||
v-model="_doctype"
|
||||
:options="['CRM Lead', 'CRM Deal']"
|
||||
@change="reload"
|
||||
/>
|
||||
<Switch
|
||||
v-model="preview"
|
||||
:label="preview ? __('Hide preview') : __('Show preview')"
|
||||
size="sm"
|
||||
/>
|
||||
</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">
|
||||
<SidePanelLayoutBuilder
|
||||
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 v-if="sections.data" class="flex gap-4 overflow-hidden">
|
||||
<SidePanelLayoutBuilder
|
||||
class="flex flex-1 flex-col overflow-y-auto pr-2"
|
||||
:sections="sections.data"
|
||||
:doctype="_doctype"
|
||||
/>
|
||||
<div
|
||||
v-if="preview"
|
||||
class="flex flex-1 flex-col overflow-y-auto border rounded"
|
||||
>
|
||||
<div
|
||||
v-for="(section, i) in sections.data"
|
||||
:key="section.label"
|
||||
class="flex flex-col py-1.5 px-1"
|
||||
: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>
|
||||
</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>
|
||||
</template>
|
||||
</Dialog>
|
||||
@ -69,10 +75,9 @@
|
||||
<script setup>
|
||||
import Section from '@/components/Section.vue'
|
||||
import SectionFields from '@/components/SectionFields.vue'
|
||||
import Resizer from '@/components/Resizer.vue'
|
||||
import SidePanelLayoutBuilder from '@/components/Settings/SidePanelLayoutBuilder.vue'
|
||||
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'
|
||||
|
||||
const props = defineProps({
|
||||
@ -84,7 +89,6 @@ const props = defineProps({
|
||||
|
||||
const show = defineModel()
|
||||
const _doctype = ref(props.doctype)
|
||||
const parentRef = ref(null)
|
||||
const loading = ref(false)
|
||||
const dirty = ref(false)
|
||||
const preview = ref(false)
|
||||
@ -139,6 +143,7 @@ function saveChanges() {
|
||||
},
|
||||
).then(() => {
|
||||
loading.value = false
|
||||
show.value = false
|
||||
reload()
|
||||
})
|
||||
}
|
||||
|
||||
@ -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>
|
||||
Loading…
x
Reference in New Issue
Block a user