fix: check label instead of no_tabs flag

This commit is contained in:
Shariq Ansari 2025-01-01 01:59:46 +05:30
parent 7d81f531d3
commit 45c759cc4e
8 changed files with 94 additions and 77 deletions

View File

@ -29,7 +29,7 @@ def get_fields_layout(doctype: str, type: str):
has_tabs = tabs[0].get("sections") if tabs and tabs[0] else False has_tabs = tabs[0].get("sections") if tabs and tabs[0] else False
if not has_tabs: if not has_tabs:
tabs = [{"no_tabs": True, "sections": tabs}] tabs = [{"sections": tabs}]
allowed_fields = [] allowed_fields = []
for tab in tabs: for tab in tabs:
@ -92,7 +92,7 @@ def get_default_layout(doctype: str):
if field.fieldtype not in ["Tab Break", "Section Break", "Column Break"] if field.fieldtype not in ["Tab Break", "Section Break", "Column Break"]
] ]
return [{"no_tabs": True, "sections": [{"hideLabel": True, "fields": fields}]}] return [{"sections": [{"fields": fields}]}]
def getOptions(field): def getOptions(field):

View File

@ -30,6 +30,8 @@ def get_new_layout(old_layout, type):
for tab in old_layout: for tab in old_layout:
new_tab = tab.copy() new_tab = tab.copy()
if "no_tabs" in new_tab:
new_tab.pop("no_tabs")
new_tab["sections"] = [] new_tab["sections"] = []
for section in tab.get("sections"): for section in tab.get("sections"):
if "contacts" in section: if "contacts" in section:
@ -55,7 +57,7 @@ def get_new_layout(old_layout, type):
continue continue
if len(fields) == 1 and column_count > 1: if len(fields) == 1 and column_count > 1:
new_section["columns"].append({"fields": fields[0]}) new_section["columns"].append({"fields": [fields[0]]})
new_section["columns"].append({"fields": []}) new_section["columns"].append({"fields": []})
new_tab["sections"].append(new_section) new_tab["sections"].append(new_section)
continue continue
@ -73,5 +75,9 @@ def get_new_layout(old_layout, type):
new_layout = new_layout[0].get("sections") new_layout = new_layout[0].get("sections")
if already_converted: if already_converted:
return json.dumps(old_layout) new_layout = old_layout
if type == "Side Panel" and "sections" in old_layout[0]:
new_layout = new_layout[0].get("sections")
return json.dumps(new_layout) return json.dumps(new_layout)

View File

@ -284,7 +284,11 @@ const { getFormattedPercent, getFormattedFloat, getFormattedCurrency } =
getMeta(props.doctype) getMeta(props.doctype)
const { getUser } = usersStore() const { getUser } = usersStore()
const hasTabs = computed(() => !props.tabs[0].no_tabs) const hasTabs = computed(() => {
return (
props.tabs.length > 1 || (props.tabs.length == 1 && props.tabs[0].label)
)
})
const _tabs = computed(() => { const _tabs = computed(() => {
return props.tabs.map((tab) => { return props.tabs.map((tab) => {

View File

@ -4,7 +4,7 @@
class="flex items-center gap-2 text-base bg-surface-gray-2 rounded py-2 px-2.5" class="flex items-center gap-2 text-base bg-surface-gray-2 rounded py-2 px-2.5"
> >
<Draggable <Draggable
v-if="tabs.length && !tabs[tabIndex].no_tabs" v-if="tabs.length && tabs[tabIndex].label"
:list="tabs" :list="tabs"
item-key="label" item-key="label"
class="flex items-center gap-2" class="flex items-center gap-2"
@ -41,7 +41,7 @@
</div> </div>
</div> </div>
<Dropdown <Dropdown
v-if="!tab.no_tabs && tabIndex == i" v-if="tab.label && tabIndex == i"
:options="getTabOptions(tab)" :options="getTabOptions(tab)"
class="!h-4" class="!h-4"
@click.stop @click.stop
@ -114,62 +114,69 @@
</template> </template>
</Dropdown> </Dropdown>
</div> </div>
<Draggable <div class="flex gap-1.5">
:list="section.fields" <div
group="fields" class="w-full p-2 border border-dashed border-outline-gray-2 rounded bg-surface-white"
item-key="label" v-for="(column, index) in section.columns"
class="grid gap-1.5" :key="index"
:class="gridClass(section.columns)" >
handle=".cursor-grab" <Draggable
> :list="column.fields"
<template #item="{ element: field }"> group="fields"
<div item-key="label"
class="px-2.5 py-2 border border-outline-gray-2 rounded text-base bg-surface-modal text-ink-gray-8 flex items-center leading-4 justify-between gap-2" class="flex flex-col gap-1.5"
handle=".cursor-grab"
> >
<div class="flex items-center gap-2 truncate"> <template #item="{ element: field }">
<DragVerticalIcon class="h-3.5 cursor-grab" /> <div
<div class="truncate">{{ field.label }}</div> class="px-2.5 py-2 border border-outline-gray-2 rounded text-base bg-surface-modal text-ink-gray-8 flex items-center leading-4 justify-between gap-2"
</div> >
<Button <div class="flex items-center gap-2 truncate">
variant="ghost" <DragVerticalIcon class="h-3.5 cursor-grab" />
class="!size-4 rounded-sm" <div class="truncate">{{ field.label }}</div>
icon="x" </div>
@click=" <Button
section.fields.splice(section.fields.indexOf(field), 1) variant="ghost"
" class="!size-4 rounded-sm"
/> icon="x"
</div> @click="
</template> column.fields.splice(column.fields.indexOf(field), 1)
</Draggable> "
<Autocomplete />
v-if="fields.data" </div>
value="" </template>
:options="fields.data" </Draggable>
@change="(e) => addField(section, e)" <Autocomplete
> v-if="fields.data"
<template #target="{ togglePopover }"> value=""
<div class="gap-2 w-full"> :options="fields.data"
<Button @change="(e) => addField(column, e)"
class="w-full !h-8 !bg-surface-modal" >
variant="outline" <template #target="{ togglePopover }">
@click="togglePopover()" <div class="gap-2 w-full">
:label="__('Add Field')" <Button
> class="w-full !h-8 !bg-surface-modal"
<template #prefix> variant="outline"
<FeatherIcon name="plus" class="h-4" /> @click="togglePopover()"
</template> :label="__('Add Field')"
</Button> >
</div> <template #prefix>
</template> <FeatherIcon name="plus" class="h-4" />
<template #item-label="{ option }"> </template>
<div class="flex flex-col gap-1 text-ink-gray-9"> </Button>
<div>{{ option.label }}</div> </div>
<div class="text-ink-gray-4 text-sm"> </template>
{{ `${option.fieldname} - ${option.fieldtype}` }} <template #item-label="{ option }">
</div> <div class="flex flex-col gap-1 text-ink-gray-9">
</div> <div>{{ option.label }}</div>
</template> <div class="text-ink-gray-4 text-sm">
</Autocomplete> {{ `${option.fieldname} - ${option.fieldtype}` }}
</div>
</div>
</template>
</Autocomplete>
</div>
</div>
</div> </div>
</template> </template>
</Draggable> </Draggable>
@ -208,7 +215,7 @@ const props = defineProps({
const tabIndex = ref(0) const tabIndex = ref(0)
const slotName = computed(() => { const slotName = computed(() => {
if (props.tabs.length == 1 && props.tabs[0].no_tabs) { if (props.tabs.length == 1 && !props.tabs[0].label) {
return 'prefix' return 'prefix'
} }
return 'default' return 'default'
@ -252,7 +259,9 @@ const fields = createResource({
for (let tab of props.tabs) { for (let tab of props.tabs) {
for (let section of tab.sections) { for (let section of tab.sections) {
existingFields = existingFields.concat(section.fields) for (let column of section.columns) {
existingFields = existingFields.concat(column.fields)
}
} }
} }
@ -266,22 +275,23 @@ const fields = createResource({
}) })
function addTab() { function addTab() {
if (props.tabs.length == 1 && props.tabs[0].no_tabs) { if (props.tabs.length == 1 && !props.tabs[0].label) {
delete props.tabs[0].no_tabs props.tabs[0].label = __('New Tab')
return return
} }
props.tabs.push({ label: __('New Tab'), sections: [] }) props.tabs.push({ label: __('New Tab'), sections: [] })
tabIndex.value = props.tabs.length ? props.tabs.length - 1 : 0 tabIndex.value = props.tabs.length ? props.tabs.length - 1 : 0
} }
function addField(section, field) { function addField(column, field) {
if (!field) return if (!field) return
let newFieldObj = { let newFieldObj = {
...field, ...field,
name: field.fieldname, name: field.fieldname,
type: field.fieldtype, type: field.fieldtype,
} }
section.fields.push(newFieldObj) column.fields.push(newFieldObj)
} }
function getTabOptions(tab) { function getTabOptions(tab) {
@ -296,7 +306,7 @@ function getTabOptions(tab) {
icon: 'trash-2', icon: 'trash-2',
onClick: () => { onClick: () => {
if (props.tabs.length == 1) { if (props.tabs.length == 1) {
props.tabs[0].no_tabs = true props.tabs[0].label = ''
return return
} }
props.tabs.splice(tabIndex.value, 1) props.tabs.splice(tabIndex.value, 1)

View File

@ -161,7 +161,7 @@ const filteredSections = computed(() => {
}) })
}) })
return [{ no_tabs: true, sections: allSections }] return [{ sections: allSections }]
}) })
watch( watch(

View File

@ -168,7 +168,7 @@ const filteredSections = computed(() => {
} }
}) })
return [{ no_tabs: true, sections: _filteredSections }] return [{ sections: _filteredSections }]
}) })
const dealStatuses = computed(() => { const dealStatuses = computed(() => {

View File

@ -160,7 +160,7 @@ const filteredSections = computed(() => {
}) })
}) })
return [{ no_tabs: true, sections: allSections }] return [{ sections: allSections }]
}) })
watch( watch(

View File

@ -106,12 +106,9 @@ const tabs = computed(() => {
if (fieldsData[0].type != 'Tab Break') { if (fieldsData[0].type != 'Tab Break') {
let _sections = [] let _sections = []
if (fieldsData[0].type != 'Section Break') { if (fieldsData[0].type != 'Section Break') {
_sections.push({ no_tabs: true, columns: [{ fields: [] }] }) _sections.push({ columns: [{ fields: [] }] })
} }
_tabs.push({ _tabs.push({ sections: _sections })
no_tabs: true,
sections: _sections,
})
} }
fieldsData.forEach((field) => { fieldsData.forEach((field) => {