seitime-frappe/frappe/public/js/print_format_builder/Preview.vue
Faris Ansari 18b3651b46 feat: Google font selection
google_fonts.json with a decent selection of fonts
2021-10-20 17:20:59 +05:30

129 lines
2.8 KiB
Vue

<template>
<div class="h-100">
<div class="row">
<div class="col">
<div ref="doc-select"></div>
</div>
<div class="col">
<div ref="preview-type"></div>
</div>
<div class="col d-flex">
<a
v-if="url"
class="btn btn-default btn-sm btn-new-tab"
target="_blank"
:href="url"
>
{{ __("Open in a new tab") }}
</a>
<button
v-if="url"
class="ml-3 btn btn-default btn-sm btn-new-tab"
@click="refresh"
>
{{ __("Refresh") }}
</button>
</div>
</div>
<div v-if="url && !preview_loaded">Generating preview...</div>
<iframe
ref="iframe"
:src="url"
v-if="url"
v-show="preview_loaded"
class="preview-iframe"
@load="preview_loaded = true"
></iframe>
</div>
</template>
<script>
import { storeMixin } from "./store";
export default {
name: "Preview",
mixins: [storeMixin],
data() {
return {
type: "PDF",
docname: null,
preview_loaded: false
};
},
mounted() {
this.doc_select = frappe.ui.form.make_control({
parent: this.$refs["doc-select"],
df: {
label: __("Select {0}", [__(this.doctype)]),
fieldname: "docname",
fieldtype: "Link",
options: this.doctype,
change: () => {
this.docname = this.doc_select.get_value();
}
},
render_input: true
});
this.preview_type = frappe.ui.form.make_control({
parent: this.$refs["preview-type"],
df: {
label: __("Preview type"),
fieldname: "docname",
fieldtype: "Select",
options: ["PDF", "HTML"],
change: () => {
this.type = this.preview_type.get_value();
}
},
render_input: true
});
this.preview_type.set_value(this.type);
this.get_default_docname().then(
docname => docname && this.doc_select.set_value(docname)
);
this.$store.$on("after_save", () => {
this.refresh();
});
},
methods: {
refresh() {
this.$refs.iframe.contentWindow.location.reload();
},
get_default_docname() {
return frappe.db.get_list(this.doctype, { limit: 1 }).then(doc => {
return doc.length > 0 ? doc[0].name : null;
});
}
},
computed: {
doctype() {
return this.print_format.doc_type;
},
url() {
if (!this.docname) return null;
let params = new URLSearchParams();
params.append("doctype", this.doctype);
params.append("name", this.docname);
params.append("print_format", this.print_format.name);
if (this.$store.letterhead) {
params.append("letterhead", this.$store.letterhead.name);
}
let url =
this.type == "PDF"
? `/api/method/frappe.utils.weasyprint.download_pdf`
: "/printpreview";
return `${url}?${params.toString()}`;
}
}
};
</script>
<style scoped>
.preview-iframe {
width: 100%;
height: 96%;
border: none;
border-radius: var(--border-radius);
}
.btn-new-tab {
margin-top: auto;
margin-bottom: 1.2rem;
}
</style>