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

fix: show/hide preview quick entry & sidebar fields

Browse Source
This commit is contained in:
Shariq Ansari 2024-06-19 18:35:39 +05:30
parent a6fdf4cec3
commit 3e4680abb9
4 changed files with 172 additions and 140 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
frontend/src/components/SectionFields.vue
View File

@ -36,7 +36,7 @@
<FormControl
v-else-if="
['email', 'number', 'date', 'password', 'textarea'].includes(
field.type
field.type,
)
"
class="form-control"
@ -137,7 +137,10 @@ const _fields = computed(() => {
props.fields?.forEach((field) => {
let df = field.all_properties
if (df?.depends_on) evaluate_depends_on(df.depends_on, field)
all_fields.push(field)
all_fields.push({
...field,
placeholder: field.placeholder || field.label,
})
})
return all_fields
})

17
frontend/src/components/Settings/QuickEntryLayout.vue
View File

@ -27,15 +27,29 @@
@click="saveChanges"
/>
<Button :label="__('Reset')" @click="reload" />
<Button
:label="preview ? __('Hide Preview') : __('Show Preview')"
@click="preview = !preview"
/>
</div>
</div>
</div>
<div v-if="sections?.data" class="overflow-y-auto p-8 pt-3">
<QuickEntryLayoutBuilder :sections="sections.data" :doctype="doctype" />
<div
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"
>
<QuickEntryLayoutBuilder
v-if="!preview"
:sections="sections.data"
:doctype="doctype"
/>
<Fields v-else :sections="sections.data" :data="{}" />
</div>
</div>
</div>
</template>
<script setup>
import Fields from '@/components/Fields.vue'
import QuickEntryLayoutBuilder from '@/components/Settings/QuickEntryLayoutBuilder.vue'
import { useDebounceFn } from '@vueuse/core'
import { Badge, call, createResource } from 'frappe-ui'
@ -44,6 +58,7 @@ import { ref, watch, onMounted } from 'vue'
const doctype = ref('CRM Lead')
const loading = ref(false)
const dirty = ref(false)
const preview = ref(false)
function getParams() {
return { doctype: doctype.value, type: 'Quick Entry' }

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

@ -1,8 +1,5 @@
<template>
<div
class="rounded-xl h-full inline-block w-full transform overflow-y-auto bg-white text-left align-middle shadow-xl transition-all"
>
<div class="bg-white px-4 pb-6 pt-5 sm:px-6 overflow-y-auto">
<div>
<Draggable :list="sections" item-key="label" class="flex flex-col">
<template #item="{ element: section }">
<div
@ -49,9 +46,7 @@
item-key="label"
class="grid gap-2"
:class="
section.columns
? 'grid-cols-' + section.columns
: 'grid-cols-3'
section.columns ? 'grid-cols-' + section.columns : 'grid-cols-3'
"
handle=".cursor-grab"
>
@ -68,10 +63,7 @@
variant="ghost"
icon="x"
@click="
section.fields.splice(
section.fields.indexOf(field),
1,
)
section.fields.splice(section.fields.indexOf(field), 1)
"
/>
</div>
@ -137,7 +129,6 @@
</Button>
</div>
</div>
</div>
</template>
<script setup>
import Autocomplete from '@/components/frappe-ui/Autocomplete.vue'

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

@ -27,6 +27,10 @@
@click="saveChanges"
/>
<Button :label="__('Reset')" @click="reload" />
<Button
:label="preview ? __('Hide Preview') : __('Show Preview')"
@click="preview = !preview"
/>
</div>
</div>
<Resizer
@ -37,13 +41,30 @@
>
<div class="flex flex-1 flex-col justify-between overflow-hidden">
<div class="flex flex-col overflow-y-auto">
<SidebarLayoutBuilder :sections="sections.data" :doctype="doctype" />
<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'
@ -54,6 +75,8 @@ 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' }