Skip to content

Commit

Permalink
feat: New Print Format Builder
Browse files Browse the repository at this point in the history
- Print Format Builder Beta page
- Add margin fields in Print Format
- Using vuedraggable for drag and drop
  • Loading branch information
netchampfaris committed Sep 6, 2021
1 parent c3c4057 commit b8fbed0
Show file tree
Hide file tree
Showing 17 changed files with 815 additions and 12 deletions.
39 changes: 37 additions & 2 deletions frappe/printing/doctype/print_format/print_format.json
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,10 @@
"html",
"raw_commands",
"section_break_9",
"margin_top",
"margin_bottom",
"margin_left",
"margin_right",
"align_labels_right",
"show_section_headings",
"line_breaks",
Expand All @@ -31,7 +35,8 @@
"section_break_13",
"print_format_help",
"format_data",
"print_format_builder"
"print_format_builder",
"print_format_builder_beta"
],
"fields": [
{
Expand Down Expand Up @@ -205,13 +210,43 @@
"fieldname": "absolute_value",
"fieldtype": "Check",
"label": "Show Absolute Values"
},
{
"default": "0",
"fieldname": "print_format_builder_beta",
"fieldtype": "Check",
"label": "Print Format Builder Beta"
},
{
"default": "15",
"fieldname": "margin_top",
"fieldtype": "Float",
"label": "Margin Top"
},
{
"default": "15",
"fieldname": "margin_bottom",
"fieldtype": "Float",
"label": "Margin Bottom"
},
{
"default": "15",
"fieldname": "margin_left",
"fieldtype": "Float",
"label": "Margin Left"
},
{
"default": "15",
"fieldname": "margin_right",
"fieldtype": "Float",
"label": "Margin Right"
}
],
"icon": "fa fa-print",
"idx": 1,
"index_web_pages_for_search": 1,
"links": [],
"modified": "2021-03-01 15:25:46.578863",
"modified": "2021-07-11 11:53:52.028982",
"modified_by": "Administrator",
"module": "Printing",
"name": "Print Format",
Expand Down
4 changes: 4 additions & 0 deletions frappe/printing/doctype/print_format/print_format.py
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,10 @@ def validate(self):

def extract_images(self):
from frappe.core.doctype.file.file import extract_images_from_html

if self.print_format_builder_beta:
return

if self.format_data:
data = json.loads(self.format_data)
for df in data:
Expand Down
6 changes: 6 additions & 0 deletions frappe/printing/page/print/print.js
Original file line number Diff line number Diff line change
Expand Up @@ -258,13 +258,19 @@ frappe.ui.form.PrintView = class {
fieldtype: 'Read Only',
default: print_format.name || 'Standard',
},
{
label: __('Use the new Print Format Builder Beta'),
fieldname: 'beta',
fieldtype: 'Check'
},
],
(data) => {
frappe.route_options = {
make_new: true,
doctype: this.frm.doctype,
name: data.print_format_name,
based_on: data.based_on,
beta: data.beta
};
frappe.set_route('print-format-builder');
this.print_sel.val(data.print_format_name);
Expand Down
18 changes: 11 additions & 7 deletions frappe/printing/page/print_format_builder/print_format_builder.js
Original file line number Diff line number Diff line change
Expand Up @@ -12,9 +12,9 @@ frappe.pages['print-format-builder'].on_page_show = function(wrapper) {
});
} else if(frappe.route_options) {
if(frappe.route_options.make_new) {
let { doctype, name, based_on } = frappe.route_options;
let { doctype, name, based_on, beta } = frappe.route_options;
frappe.route_options = null;
frappe.print_format_builder.setup_new_print_format(doctype, name, based_on);
frappe.print_format_builder.setup_new_print_format(doctype, name, based_on, beta);
} else {
frappe.print_format_builder.print_format = frappe.route_options.doc;
frappe.route_options = null;
Expand Down Expand Up @@ -126,18 +126,22 @@ frappe.PrintFormatBuilder = class PrintFormatBuilder {

});
}
setup_new_print_format(doctype, name, based_on) {
setup_new_print_format(doctype, name, based_on, beta) {
frappe.call({
method: 'frappe.printing.page.print_format_builder.print_format_builder.create_custom_format',
args: {
doctype: doctype,
name: name,
based_on: based_on
based_on: based_on,
beta: Boolean(beta)
},
callback: (r) => {
if(!r.exc) {
if(r.message) {
this.print_format = r.message;
if(r.message) {
let print_format = r.message;
if (print_format.print_format_builder_beta) {
frappe.set_route('print-format-builder-beta', print_format.name);
} else {
this.print_format = print_format;
this.refresh();
}
}
Expand Down
Original file line number Diff line number Diff line change
@@ -1,11 +1,16 @@
import frappe

@frappe.whitelist()
def create_custom_format(doctype, name, based_on='Standard'):
def create_custom_format(doctype, name, based_on='Standard', beta=False):
doc = frappe.new_doc('Print Format')
doc.doc_type = doctype
doc.name = name
doc.print_format_builder = 1
beta = frappe.parse_json(beta)

if beta:
doc.print_format_builder_beta = 1
else:
doc.print_format_builder = 1
doc.format_data = frappe.db.get_value('Print Format', based_on, 'format_data') \
if based_on != 'Standard' else None
doc.insert()
Expand Down
Empty file.
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
.layout-main-section-wrapper {
margin-bottom: 0;
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
frappe.pages["print-format-builder-beta"].on_page_load = function(wrapper) {
var page = frappe.ui.make_app_page({
parent: wrapper,
title: __("Print Format Builder"),
single_column: true
});

function load_print_format_builder_beta() {
let route = frappe.get_route();
let $parent = $(wrapper).find(".layout-main-section");
$parent.empty();

if (route.length > 1) {
frappe.require("print_format_builder.bundle.js").then(() => {
frappe.print_format_builder = new frappe.ui.PrintFormatBuilder({
wrapper: $parent,
page,
print_format: route[1]
});
});
}
}

load_print_format_builder_beta();

// hot reload in development
if (frappe.boot.developer_mode) {
frappe.hot_update = frappe.hot_update || [];
frappe.hot_update.push(load_print_format_builder_beta);
}
};
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
{
"content": null,
"creation": "2021-07-10 12:22:16.138485",
"docstatus": 0,
"doctype": "Page",
"idx": 0,
"modified": "2021-07-10 12:22:16.138485",
"modified_by": "Administrator",
"module": "Printing",
"name": "print-format-builder-beta",
"owner": "Administrator",
"page_name": "Print Format Builder Beta",
"roles": [
{
"role": "System Manager"
}
],
"script": null,
"standard": "Yes",
"style": null,
"system_page": 0
}
73 changes: 73 additions & 0 deletions frappe/public/js/print_format_builder/PrintFormat.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
<template>
<div class="print-format-main" :style="rootStyles">
<draggable
v-model="layout.sections"
group="sections"
filter=".section-columns, .column, .field"
:animation="200"
>
<PrintFormatSection
v-for="(section, i) in layout.sections"
:key="i"
:section="section"
@add_section_above="add_section_above(section)"
/>
</draggable>
</div>
</template>

<script>
import draggable from "vuedraggable";
import PrintFormatSection from "./PrintFormatSection.vue";
export default {
name: "PrintFormat",
props: ["print_format", "meta", "layout"],
components: {
draggable,
PrintFormatSection,
},
computed: {
rootStyles() {
let {
margin_top = 0,
margin_bottom = 0,
margin_left = 0,
margin_right = 0,
} = this.print_format;
return {
padding: `${margin_top}mm ${margin_right}mm ${margin_bottom}mm ${margin_left}mm`,
width: "210mm",
minHeight: "297mm",
};
},
},
methods: {
add_section_above(section) {
let sections = [];
for (let _section of this.layout.sections) {
if (_section === section) {
sections.push({
label: "",
columns: [
{ label: "", fields: [] },
{ label: "", fields: [] },
],
});
}
sections.push(_section);
}
this.$set(this.layout, "sections", sections);
},
},
};
</script>

<style scoped>
.print-format-main {
margin-left: auto;
background-color: white;
box-shadow: var(--shadow-lg);
border-radius: var(--border-radius);
}
</style>
Loading

0 comments on commit b8fbed0

Please sign in to comment.