refactor: get new docfield's default fields for all newly added fields
This commit is contained in:
Shariq Ansari
parent
93421da3f6
commit
29d2626690
5 changed files with 57 additions and 58 deletions
|
|
@ -2,7 +2,9 @@
|
|||
import SearchBox from "./SearchBox.vue";
|
||||
import draggable from "vuedraggable";
|
||||
import { ref, computed } from "vue";
|
||||
import { useStore } from "../store";
|
||||
|
||||
let store = useStore();
|
||||
let search_text = ref("");
|
||||
|
||||
function clone_field(field) {
|
||||
|
|
@ -27,12 +29,7 @@ let fields = computed(() => {
|
|||
})
|
||||
.map(df => {
|
||||
let out = {
|
||||
df: {
|
||||
label: "",
|
||||
fieldname: "",
|
||||
fieldtype: df,
|
||||
options: "",
|
||||
},
|
||||
df: store.get_df(df),
|
||||
table_columns: [],
|
||||
new_field: true,
|
||||
};
|
||||
|
|
|
|||
|
|
@ -10,19 +10,21 @@ let store = useStore();
|
|||
|
||||
let hovered = ref(false);
|
||||
|
||||
let visible_columns = computed(() => props.section.columns.filter(c => !c.remove));
|
||||
|
||||
function add_column() {
|
||||
if (props.section.columns.length < 4) {
|
||||
if (visible_columns.value.length < 4) {
|
||||
props.section.columns.push({
|
||||
df: { fieldtype: "Column Break" },
|
||||
df: store.get_df("Column Break", "column_break_" + frappe.utils.get_random(4)),
|
||||
new_field: true,
|
||||
fields: []
|
||||
fields: [],
|
||||
});
|
||||
}
|
||||
}
|
||||
function remove_column() {
|
||||
if (props.section.columns.length <= 1) return;
|
||||
if (visible_columns.value.length <= 1) return;
|
||||
|
||||
let columns = props.section.columns.slice();
|
||||
let columns = visible_columns.value.slice();
|
||||
let last_column_fields = columns.slice(-1)[0].fields.slice();
|
||||
let index = columns.length - 1;
|
||||
columns = columns.slice(0, index);
|
||||
|
|
@ -36,25 +38,24 @@ let section_options = computed(() => {
|
|||
return [
|
||||
{
|
||||
label: __("Add section above"),
|
||||
action: () => emit("add_section_above")
|
||||
action: () => emit("add_section_above"),
|
||||
},
|
||||
{
|
||||
label: __("Add column"),
|
||||
action: add_column,
|
||||
condition: () => props.section.columns.length < 4
|
||||
condition: () => visible_columns.value.length < 4,
|
||||
},
|
||||
{
|
||||
label: __("Remove column"),
|
||||
action: remove_column,
|
||||
condition: () => props.section.columns.length > 1
|
||||
condition: () => visible_columns.value.length > 1,
|
||||
},
|
||||
{
|
||||
label: __("Remove section"),
|
||||
action: () => props.section.remove = true
|
||||
action: () => props.section.remove = true,
|
||||
}
|
||||
].filter(option => (option.condition ? option.condition() : true));
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -102,7 +103,7 @@ let section_options = computed(() => {
|
|||
<div class="section-columns">
|
||||
<div
|
||||
class="column col"
|
||||
v-for="(column, i) in section.columns"
|
||||
v-for="(column, i) in visible_columns"
|
||||
:key="i"
|
||||
@mouseover.stop="hovered = false"
|
||||
>
|
||||
|
|
|
|||
|
|
@ -23,22 +23,33 @@ function drag_over(tab) {
|
|||
}, 500);
|
||||
}
|
||||
|
||||
function section_boilerplate() {
|
||||
return [
|
||||
{
|
||||
df: store.get_df("Section Break"),
|
||||
columns: [
|
||||
{
|
||||
df: store.get_df("Column Break", "column_break_" + frappe.utils.get_random(4)),
|
||||
fields: [],
|
||||
new_field: true,
|
||||
},
|
||||
{
|
||||
df: store.get_df("Column Break", "column_break_" + frappe.utils.get_random(4)),
|
||||
fields: [],
|
||||
new_field: true,
|
||||
}
|
||||
],
|
||||
new_field: true,
|
||||
}
|
||||
];
|
||||
}
|
||||
|
||||
function add_section_above(section) {
|
||||
let sections = [];
|
||||
let current_tab = layout.value.tabs.find(tab => tab.df.name == store.active_tab);
|
||||
for (let _section of current_tab.sections) {
|
||||
if (_section === section) {
|
||||
sections.push({
|
||||
df: {
|
||||
name: frappe.utils.get_random(8),
|
||||
fieldtype: "Section Break"
|
||||
},
|
||||
new_field: true,
|
||||
columns: [
|
||||
{ df: { fieldtype: "Column Break" }, new_field: true, fields: [] },
|
||||
{ df: { fieldtype: "Column Break" }, new_field: true, fields: [] }
|
||||
]
|
||||
});
|
||||
sections.push(section_boilerplate());
|
||||
}
|
||||
sections.push(_section);
|
||||
}
|
||||
|
|
@ -47,24 +58,10 @@ function add_section_above(section) {
|
|||
|
||||
function add_new_tab() {
|
||||
let tab = {
|
||||
df: {
|
||||
label: "Tab " + (layout.value.tabs.length + 1),
|
||||
name: frappe.utils.get_random(8),
|
||||
fieldtype: "Tab Break"
|
||||
},
|
||||
sections: [{
|
||||
df: {
|
||||
name: frappe.utils.get_random(8),
|
||||
fieldtype: "Section Break"
|
||||
},
|
||||
columns: [
|
||||
{ df: { fieldtype: "Column Break" }, fields: [], new_field: true },
|
||||
{ df: { fieldtype: "Column Break" }, fields: [], new_field: true }
|
||||
],
|
||||
new_field: true,
|
||||
}],
|
||||
new_field: true,
|
||||
}
|
||||
df: store.get_df("Tab Break", "", "Tab " + (layout.value.tabs.length + 1)),
|
||||
sections: section_boilerplate(),
|
||||
};
|
||||
|
||||
layout.value.tabs.push(tab);
|
||||
activate_tab(tab);
|
||||
}
|
||||
|
|
@ -111,7 +108,7 @@ function remove_tab() {
|
|||
<use href="#icon-add"></use>
|
||||
</svg>
|
||||
<div class="add-btn-text" v-else>
|
||||
{{ __('Add new tab') }}
|
||||
{{ __("Add new tab") }}
|
||||
</div>
|
||||
</button>
|
||||
<button
|
||||
|
|
|
|||
|
|
@ -16,6 +16,16 @@ export const useStore = defineStore("store", {
|
|||
selected: (state) => {
|
||||
return (name) => state.selected_field?.name == name;
|
||||
},
|
||||
get_df() {
|
||||
return (fieldtype, fieldname = "", label = "") => {
|
||||
let df = frappe.model.get_new_doc("DocField");
|
||||
df.name = frappe.utils.get_random(8);
|
||||
df.fieldtype = fieldtype;
|
||||
df.fieldname = fieldname;
|
||||
df.label = label;
|
||||
return df;
|
||||
};
|
||||
},
|
||||
},
|
||||
actions: {
|
||||
async fetch() {
|
||||
|
|
@ -38,7 +48,7 @@ export const useStore = defineStore("store", {
|
|||
this.selected_field = first_tab.df;
|
||||
},
|
||||
get_layout() {
|
||||
return create_layout(this.fields);
|
||||
return create_layout(this.fields, this.get_df);
|
||||
},
|
||||
},
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
export function create_layout(fields) {
|
||||
export function create_layout(fields, get_df) {
|
||||
let layout = {
|
||||
tabs: [],
|
||||
};
|
||||
|
|
@ -32,10 +32,7 @@ export function create_layout(fields) {
|
|||
function get_new_tab(df) {
|
||||
let _tab = {};
|
||||
if (!df) {
|
||||
df = {
|
||||
label: __("Details"),
|
||||
fieldtype: "Tab Break",
|
||||
};
|
||||
df = get_df("Tab Break", "", __("Details"));
|
||||
_tab.new_field = true;
|
||||
}
|
||||
_tab.df = df;
|
||||
|
|
@ -46,10 +43,7 @@ export function create_layout(fields) {
|
|||
function get_new_section(df) {
|
||||
let _section = {};
|
||||
if (!df) {
|
||||
df = {
|
||||
name: frappe.utils.get_random(8),
|
||||
fieldtype: "Section Break",
|
||||
};
|
||||
df = get_df("Section Break");
|
||||
_section.new_field = true;
|
||||
}
|
||||
_section.df = df;
|
||||
|
|
@ -60,7 +54,7 @@ export function create_layout(fields) {
|
|||
function get_new_column(df) {
|
||||
let _column = {};
|
||||
if (!df) {
|
||||
df = { fieldtype: "Column Break" };
|
||||
df = get_df("Column Break", "column_break_" + frappe.utils.get_random(4));
|
||||
_column.new_field = true;
|
||||
}
|
||||
_column.df = df;
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue