vassili/seitime-frappe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

Merge pull request #19462 from shariquerik/form-builder-fixes

Browse source
This commit is contained in:
Shariq Ansari 2023-01-02 22:14:50 +05:30 • committed by GitHub
commit 82bc1e6c7d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
14 changed files with 167 additions and 58 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
cypress/integration/form_builder.js
View file

@ -244,7 +244,7 @@ context("Form Builder", () => {
let first_field =
".tab-content.active .section-columns-container:first .column:first .field:first";
cy.get(".fields-container .field[title='Check']").drag(first_field, {
cy.get(".fields-container .field[title='Data']").drag(first_field, {
target: { x: 100, y: 10 },
});

119
frappe/public/js/form_builder/components/Column.vue
View file

@ -1,6 +1,7 @@
<script setup>
import draggable from "vuedraggable";
import Field from "./Field.vue";
import EditableInput from "./EditableInput.vue";
import { ref } from "vue";
import { useStore } from "../store";
import { move_children_to_parent } from "../utils";
@ -55,6 +56,7 @@ function remove_column() {
// remove column
columns.splice(index, 1);
store.selected_field = null;
}
function move_columns_to_section() {
@ -74,25 +76,43 @@ function move_columns_to_section() {
@mouseover.stop="hovered = true"
@mouseout.stop="hovered = false"
>
<div class="column-actions" :hidden="store.read_only">
<button
v-if="section.columns.indexOf(column)"
class="btn btn-xs btn-icon"
:title="__('Move the current column & the following columns to a new section')"
@click="move_columns_to_section"
>
<div v-html="frappe.utils.icon('move', 'sm')"></div>
</button>
<button class="btn btn-xs btn-icon" :title="__('Add Column')" @click="add_column">
<div v-html="frappe.utils.icon('add', 'sm')"></div>
</button>
<button
class="btn btn-xs btn-icon"
:title="__('Remove Column')"
@click="remove_column"
>
<div v-html="frappe.utils.icon('remove', 'sm')"></div>
</button>
<div
:class="[
'column-header',
column.df.label ? 'has-label' : '',
]"
:hidden="!column.df.label && store.read_only"
>
<div class="column-label">
<EditableInput
:text="column.df.label"
:placeholder="__('Column Title')"
v-model="column.df.label"
/>
</div>
<div class="column-actions">
<button
v-if="section.columns.indexOf(column)"
class="btn btn-xs btn-icon"
:title="__('Move the current column & the following columns to a new section')"
@click="move_columns_to_section"
>
<div v-html="frappe.utils.icon('move', 'sm')"></div>
</button>
<button class="btn btn-xs btn-icon" :title="__('Add Column')" @click="add_column">
<div v-html="frappe.utils.icon('add', 'sm')"></div>
</button>
<button
class="btn btn-xs btn-icon"
:title="__('Remove Column')"
@click.stop="remove_column"
>
<div v-html="frappe.utils.icon('remove', 'sm')"></div>
</button>
</div>
</div>
<div v-if="column.df.description" class="column-description">
{{ column.df.description }}
</div>
<draggable
class="column-container"
@ -140,7 +160,7 @@ function move_columns_to_section() {
}
&.selected {
.column-actions {
.column-header {
display: flex;
}
@ -149,6 +169,48 @@ function move_columns_to_section() {
}
}
.column-header {
display: none;
align-items: center;
justify-content: space-between;
padding-bottom: 0.5rem;
padding-left: 0.3rem;
&.has-label {
display: flex;
}
.column-label {
:deep(span) {
font-weight: 600;
color: var(--heading-color);
}
}
.column-actions {
display: flex;
justify-content: flex-end;
.btn.btn-icon {
padding: 2px;
box-shadow: none;
opacity: 0;
&:hover {
opacity: 1;
background-color: var(--fg-color);
}
}
}
}
.column-description {
margin-bottom: 10px;
margin-left: 0.3rem;
font-size: var(--text-xs);
color: var(--text-muted);
}
&:first-child {
margin-left: 0px;
}
@ -162,22 +224,5 @@ function move_columns_to_section() {
min-height: 2rem;
border-radius: var(--border-radius);
}
.column-actions {
display: none;
justify-content: flex-end;
padding-bottom: 0.5rem;
.btn.btn-icon {
padding: 2px;
box-shadow: none;
opacity: 0;
&:hover {
opacity: 1;
background-color: var(--fg-color);
}
}
}
}
</style>

3
frappe/public/js/form_builder/components/Field.vue
View file

@ -19,6 +19,7 @@ function remove_field() {
}
let index = props.column.fields.indexOf(props.field);
props.column.fields.splice(index, 1);
store.selected_field = null;
}
function move_fields_to_column() {
@ -75,7 +76,7 @@ function move_fields_to_column() {
>
<div v-html="frappe.utils.icon('move', 'sm')"></div>
</button>
<button class="btn btn-xs btn-icon" @click="remove_field">
<button class="btn btn-xs btn-icon" @click.stop="remove_field">
<div v-html="frappe.utils.icon('remove', 'sm')"></div>
</button>
</div>

4
frappe/public/js/form_builder/components/FieldProperties.vue
View file

@ -25,6 +25,10 @@ let docfield_df = computed(() => {
return false;
}
if (df.fieldname === "reqd" && store.selected_field.fieldtype === "Check") {
return false;
}
if (df.fieldname === "options") {
df.fieldtype = "Small Text";
df.options = "";

12
frappe/public/js/form_builder/components/FormBuilder.vue
View file

@ -210,6 +210,10 @@ onMounted(() => {
}
}
.section-description {
padding-left: 15px;
}
.section-columns {
margin-top: 8px;
@ -219,6 +223,14 @@ onMounted(() => {
padding-right: 15px;
margin: 0;
.column-header {
padding-left: 0;
}
.column-description {
margin-left: 0;
}
.field {
margin: 0;
margin-bottom: 1rem;

11
frappe/public/js/form_builder/components/Section.vue
View file

@ -50,6 +50,7 @@ function remove_section() {
// remove section
sections.splice(index, 1);
store.selected_field = null;
}
function select_section() {
@ -122,12 +123,13 @@ function move_sections_to_tab() {
<button
class="btn btn-xs btn-section"
:title="__('Remove section')"
@click="remove_section"
@click.stop="remove_section"
>
<div v-html="frappe.utils.icon('remove', 'sm')"></div>
</button>
</div>
</div>
<div v-if="section.df.description" class="section-description">{{ section.df.description }}</div>
<div class="section-columns" :class="{ hidden: section.df.collapsible && collapsed }">
<draggable
class="section-columns-container"
@ -206,6 +208,7 @@ function move_sections_to_tab() {
:deep(span) {
font-weight: 600;
color: var(--heading-color);
}
.collapse-indicator {
@ -228,6 +231,12 @@ function move_sections_to_tab() {
}
}
.section-description {
margin-bottom: 10px;
font-size: var(--text-xs);
color: var(--text-muted);
}
.section-columns-container {
display: flex;
min-height: 2rem;

26
frappe/public/js/form_builder/form_builder.bundle.js
View file

@ -45,18 +45,26 @@ class FormBuilder {
this.store.read_only = this.store.preview;
this.read_only = true;
});
this.customize_form_btn = this.page.add_button(__("For Customize Form"), () => {
frappe.set_route("form-builder", this.doctype, "customize");
});
this.doctype_form_btn = this.page.add_button(__("For DocType Form"), () => {
frappe.set_route("form-builder", this.doctype);
});
this.reset_changes_btn = this.page.add_button(__("Reset Changes"), () => {
this.store.reset_changes();
});
this.go_to_doctype_btn = this.page.add_menu_item(__("Go to Doctype"), () =>
this.go_to_doctype_list_btn = this.page.add_button(
__("Go to {0} List", [__(this.doctype)]),
() => {
window.open(`/app/${frappe.router.slug(this.doctype)}`);
}
);
this.customize_form_btn = this.page.add_menu_item(__("Switch to Customize Form"), () => {
frappe.set_route("form-builder", this.doctype, "customize");
});
this.doctype_form_btn = this.page.add_menu_item(__("Switch to DocType Form"), () => {
frappe.set_route("form-builder", this.doctype);
});
this.go_to_doctype_btn = this.page.add_menu_item(__("Go to DocType"), () =>
frappe.set_route("Form", "DocType", this.doctype)
);
this.go_to_customize_form_btn = this.page.add_menu_item(__("Go to Customize Form"), () =>
@ -121,9 +129,7 @@ class FormBuilder {
? __("Go to {0}", [__(this.doctype)])
: __("Go to {0} List", [__(this.doctype)]);
this.page.add_menu_item(label, () => {
window.open(`/app/${frappe.router.slug(this.doctype)}`);
});
this.go_to_doctype_list_btn.text(label);
}
// toggle preview btn text

9
frappe/public/js/form_builder/store.js
View file

@ -226,8 +226,13 @@ export const useStore = defineStore("form-builder-store", {
}
section.columns.forEach((column, k) => {
// do not consider first column
if (k > 0 || column.fields.length == 0) {
// do not consider first column if label is not set
if (
(k == 0 &&
this.is_df_updated(column.df, this.get_df("Column Break"))) ||
k > 0 ||
column.fields.length == 0
) {
idx++;
column.df.idx = idx;
fields.push(column.df);

4
frappe/public/js/form_builder/utils.js
View file

@ -279,7 +279,7 @@ export function scrub_field_names(fields) {
if (d.fieldtype) {
if (!d.fieldname) {
if (d.label) {
d.fieldname = d.label.trim().toLowerCase().replace(" ", "_");
d.fieldname = d.label.trim().toLowerCase().replaceAll(" ", "_");
if (d.fieldname.endsWith("?")) {
d.fieldname = d.fieldname.slice(0, -1);
}
@ -295,7 +295,7 @@ export function scrub_field_names(fields) {
}
} else {
d.fieldname =
d.fieldtype.toLowerCase().replace(" ", "_") +
d.fieldtype.toLowerCase().replaceAll(" ", "_") +
"_" +
frappe.utils.get_random(4);
}

12
frappe/public/js/frappe/form/column.js
View file

@ -19,12 +19,20 @@ export default class Column {
this.form = this.wrapper.find("form").on("submit", () => false);
if (this.df.description) {
$(`
<p class="col-sm-12 form-column-description">
${__(this.df.description)}
</p>
`).prependTo(this.wrapper);
}
if (this.df.label) {
$(`
<label class="control-label">
<label class="column-label">
${__(this.df.label)}
</label>
`).appendTo(this.wrapper);
`).prependTo(this.wrapper);
}
}

15
frappe/public/scss/desk/form.scss
View file

@ -70,6 +70,21 @@
}
}
.form-column {
.form-column-description {
margin-bottom: 10px;
font-size: var(--text-xs);
color: var(--text-muted);
padding-left: 0;
}
.column-label {
font-weight: 600;
color: var(--heading-color);
cursor: pointer;
}
}
.empty-section {
display: none !important;
border: 0 !important;

2
frappe/public/scss/website/web_form.scss
View file

@ -18,7 +18,7 @@
.page_content {
max-width: 800px;
margin: auto;
.tooltip-content {
display: none;
}

4
frappe/website/doctype/web_form/templates/web_form_row.html Normal file
View file

@ -0,0 +1,4 @@
<div>
<a href="{{ doc.route }}">{{ doc.title or doc.name }}</a>
</div>
<!-- this is a sample default list template -->

2
frappe/website/doctype/web_form/web_form.json
View file

@ -364,7 +364,7 @@
"icon": "icon-edit",
"is_published_field": "published",
"links": [],
"modified": "2022-12-15 17:14:44.939645",
"modified": "2023-01-02 10:19:15.680960",
"modified_by": "Administrator",
"module": "Website",
"name": "Web Form",