feat: make page read only if editing is restricted

This commit is contained in:
Shariq Ansari 2022-10-23 20:08:59 +05:30
parent 330c87f203
commit e3a67b1aa1
6 changed files with 25 additions and 4 deletions

View file

@ -51,6 +51,7 @@ watch(
v-if="editing"
ref="label_input"
class="label-input"
:disabled="store.read_only"
type="text"
:placeholder="__('Label')"
v-model="field.df.label"
@ -60,7 +61,7 @@ watch(
<span v-else-if="field.df.label">{{ field.df.label }}</span>
<i class="text-muted" v-else> {{ __("No Label") }} ({{ field.df.fieldtype }}) </i>
</div>
<div class="field-actions">
<div class="field-actions" :hidden="store.read_only">
<button
v-if="field.df.fieldtype == 'HTML'"
class="btn btn-xs btn-icon"

View file

@ -48,6 +48,7 @@ let docfield_df = computed(() => {
class="mb-2 form-control form-control-sm"
type="text"
v-model="store.selected_field[df.fieldname]"
:disabled="store.read_only"
/>
</div>
<div class="description" v-if="df.description">{{ df.description }}</div>

View file

@ -125,7 +125,7 @@ let section_options = computed(() => {
:placeholder="__('Section Title')"
v-model="section.df.label"
/>
<div class="d-flex align-items-center">
<div class="section-actions" :hidden="store.read_only">
<div class="dropdown">
<button
class="btn btn-xs btn-section dropdown-button"
@ -165,6 +165,7 @@ let section_options = computed(() => {
filter="[data-is-custom='0']"
:animation="150"
item-key="id"
:disabled="store.read_only"
>
<template #item="{ element }">
<Field :field="element" :data-is-custom="store.is_custom(element)" />
@ -232,6 +233,11 @@ let section_options = computed(() => {
}
}
.section-actions {
display: flex;
align-items: center;
}
.btn-section {
padding: var(--padding-xs);
box-shadow: none;

View file

@ -126,6 +126,7 @@ function remove_tab() {
filter="[data-is-custom='0']"
:animation="200"
item-key="id"
:disabled="store.read_only"
>
<template #item="{ element }">
<div
@ -142,7 +143,7 @@ function remove_tab() {
</div>
</template>
</draggable>
<div class="tab-actions">
<div class="tab-actions" :hidden="store.read_only">
<button
class="new-tab-btn btn btn-xs"
:class="{ 'no-tabs' : !has_tabs }"
@ -183,6 +184,7 @@ function remove_tab() {
filter="[data-is-custom='0']"
:animation="200"
item-key="id"
:disabled="store.read_only"
>
<template #item="{ element }">
<Section :section="element" @add_section_above="add_section_above(element)" />

View file

@ -19,7 +19,9 @@ class FormBuilder {
this.page.set_title(__("Form Builder: {0}", [this.doctype]));
// setup page actions
this.page.set_primary_action(__("Save"), () => this.store.save_changes());
this.primary_btn = this.page.set_primary_action(__("Save"), () =>
this.store.save_changes()
);
this.customize_form_btn = this.page.add_button(__("Switch to Customize Form"), () => {
frappe.set_route("form-builder", this.doctype, "customize");
@ -80,6 +82,12 @@ class FormBuilder {
},
{ immediate: true }
);
watch(
() => this.store.read_only,
(value) => this.primary_btn.toggle(!value),
{ immediate: true }
);
}
}

View file

@ -12,6 +12,7 @@ export const useStore = defineStore("store", {
active_tab: "",
selected_field: null,
dirty: false,
read_only: false,
is_customize_form: false,
}),
getters: {
@ -52,8 +53,10 @@ export const useStore = defineStore("store", {
doc.doc_type = this.doctype;
let r = await frappe.call({ method: "fetch_to_customize", doc });
this.doc = r.docs[0];
this.read_only = false;
} else {
this.doc = await frappe.db.get_doc("DocType", this.doctype);
this.read_only = !frappe.boot.developer_mode && !this.doc.custom;
}
if (!this.get_docfields.length) {