2
0
mirror of https://github.com/frappe/books.git synced 2024-09-20 11:29:00 +00:00
books/client/view/page.js

97 lines
3.0 KiB
JavaScript
Raw Normal View History

2018-01-16 06:09:17 +00:00
const frappe = require('frappejs');
2018-01-31 10:13:33 +00:00
const Observable = require('frappejs/utils/observable');
2018-02-14 12:50:56 +00:00
const Dropdown = require('frappejs/client/ui/dropdown');
2018-01-12 12:25:07 +00:00
2018-01-31 10:13:33 +00:00
module.exports = class Page extends Observable {
2018-02-22 07:36:28 +00:00
constructor({title, parent, hasRoute=true} = {}) {
2018-01-31 10:13:33 +00:00
super();
2018-02-14 16:44:50 +00:00
Object.assign(this, arguments[0]);
if (!this.parent) {
this.parent = frappe.desk.body;
}
2018-01-12 12:25:07 +00:00
this.make();
2018-02-14 12:50:56 +00:00
this.dropdowns = {};
2018-02-15 09:53:28 +00:00
if(this.title) {
this.setTitle(this.title);
}
2018-01-12 12:25:07 +00:00
}
make() {
2018-02-14 16:44:50 +00:00
this.wrapper = frappe.ui.add('div', 'page hide', this.parent);
2018-02-15 09:53:28 +00:00
this.wrapper.innerHTML = `<div class="page-head clearfix hide">
2018-02-22 07:36:28 +00:00
<span class="page-title font-weight-bold"></span>
2018-02-15 09:53:28 +00:00
</div>
2018-02-08 09:38:47 +00:00
<div class="page-body"></div>`
this.head = this.wrapper.querySelector('.page-head');
this.body = this.wrapper.querySelector('.page-body');
2018-02-15 09:53:28 +00:00
this.titleElement = this.head.querySelector('.page-title');
}
setTitle(title) {
this.titleElement.textContent = title;
if (this.hasRoute) {
document.title = title;
}
2018-01-12 12:25:07 +00:00
}
addTitleBadge(message, title='', style='secondary') {
this.titleElement.innerHTML += ` <span class='badge badge-${style}' title='${title}'>
${message}</span>`;
}
2018-01-12 12:25:07 +00:00
hide() {
2018-02-20 06:39:41 +00:00
this.parent.activePage = null;
this.wrapper.classList.add('hide');
2018-01-12 12:25:07 +00:00
this.trigger('hide');
}
addButton(label, className, action) {
2018-02-08 09:38:47 +00:00
this.head.classList.remove('hide');
2018-02-15 09:53:28 +00:00
this.button = frappe.ui.add('button', 'btn btn-sm float-right ' + this.getClassName(className), this.head);
2018-02-08 09:38:47 +00:00
this.button.innerHTML = label;
this.button.addEventListener('click', action);
return this.button;
}
2018-02-14 12:50:56 +00:00
getDropdown(label) {
if (!this.dropdowns[label]) {
2018-02-15 09:53:28 +00:00
this.dropdowns[label] = new Dropdown({parent: this.head, label: label,
right: true, cssClass: 'btn-secondary btn-sm'});
2018-02-14 12:50:56 +00:00
}
return this.dropdowns[label];
}
2018-01-16 06:09:17 +00:00
async show(params) {
2018-02-14 16:44:50 +00:00
if (this.parent.activePage) {
this.parent.activePage.hide();
2018-01-12 12:25:07 +00:00
}
2018-02-14 16:44:50 +00:00
this.wrapper.classList.remove('hide');
this.body.classList.remove('hide');
if (this.page_error) {
this.page_error.classList.add('hide');
}
2018-02-14 16:44:50 +00:00
this.parent.activePage = this;
2018-01-12 12:25:07 +00:00
}
2018-02-08 09:38:47 +00:00
renderError(title, message) {
if (!this.page_error) {
this.page_error = frappe.ui.add('div', 'page-error', this.wrapper);
}
this.body.classList.add('hide');
this.page_error.classList.remove('hide');
2018-01-23 08:00:29 +00:00
this.page_error.innerHTML = `<h3 class="text-extra-muted">${title ? title : ""}</h3><p class="text-muted">${message ? message : ""}</p>`;
}
getClassName(className) {
const newName = {
'primary': 'btn-primary',
'secondary': 'btn-outline-secondary'
}[className];
return newName || className;
}
}