@@ -27258,7 +27265,7 @@ var view = {
var formpage = class FormPage extends page {
constructor(doctype) {
let meta = frappejs.getMeta(doctype);
- super(`Edit ${meta.name}`);
+ super({title: `Edit ${meta.name}`});
this.meta = meta;
this.form = new (view.getFormClass(doctype))({
@@ -27298,12 +27305,22 @@ var formpage = class FormPage extends page {
var listpage = class ListPage extends page {
constructor(doctype) {
let meta = frappejs.getMeta(doctype);
- super(frappejs._("List: {0}", meta.name));
+
+ // if center column is present, list does not have its route
+ const hasRoute = frappejs.desk.center ? false : true;
+
+ super({
+ title: frappejs._("List: {0}", meta.name),
+ parent: hasRoute ? frappejs.desk.body : frappejs.desk.center,
+ hasRoute: hasRoute
+ });
+
this.list = new (view.getList_class(doctype))({
doctype: doctype,
parent: this.body,
page: this
});
+
this.on('show', async () => {
await this.list.run();
});
@@ -27351,6 +27368,45 @@ var navbar = class Navbar {
}
};
+var menu = class DeskMenu {
+ constructor(parent) {
+ this.parent = parent;
+ this.routeItems = {};
+ this.make();
+ }
+
+ make() {
+ this.listGroup = frappejs.ui.add('div', 'list-group list-group-flush', this.parent);
+ }
+
+ addItem(label, action) {
+ let item = frappejs.ui.add('a', 'list-group-item list-group-item-action', this.listGroup);
+ item.textContent = label;
+ if (typeof action === 'string') {
+ item.href = action;
+ this.routeItems[action] = item;
+ } else {
+ item.addEventListener('click', () => {
+ action();
+ this.setActive(item);
+ });
+ }
+ }
+
+ setActive() {
+ if (this.routeItems[window.location.hash]) {
+ let item = this.routeItems[window.location.hash];
+ let className = 'list-group-item-secondary';
+ let activeItem = this.listGroup.querySelector('.' + className);
+
+ if (activeItem) {
+ activeItem.classList.remove(className);
+ }
+ item.classList.add(className);
+ }
+ }
+};
+
var formmodal = class FormModal extends modal {
constructor(doctype, name) {
super({title: doctype});
@@ -27393,18 +27449,15 @@ var formmodal = class FormModal extends modal {
};
var desk = class Desk {
- constructor() {
+ constructor(columns=2) {
frappejs.router = new router();
frappejs.router.listen();
let body = document.querySelector('body');
this.navbar = new navbar();
this.container = frappejs.ui.add('div', 'container-fluid', body);
-
this.containerRow = frappejs.ui.add('div', 'row', this.container);
- this.sidebar = frappejs.ui.add('div', 'col-md-2 sidebar d-none d-md-block', this.containerRow);
- this.sidebarList = frappejs.ui.add('div', 'list-group list-group-flush', this.sidebar);
- this.body = frappejs.ui.add('div', 'col-md-10 main', this.containerRow);
+ this.makeColumns(columns);
this.pages = {
lists: {},
@@ -27418,10 +27471,38 @@ var desk = class Desk {
// this.search = new Search(this.nav);
}
+ makeColumns(columns) {
+ this.menu = null; this.center = null;
+ this.columnCount = columns;
+ if (columns === 3) {
+ this.makeMenu();
+ this.center = frappejs.ui.add('div', 'col-md-4 desk-center', this.containerRow);
+ this.body = frappejs.ui.add('div', 'col-md-6 desk-body', this.containerRow);
+ } else if (columns === 2) {
+ this.makeMenu();
+ this.body = frappejs.ui.add('div', 'col-md-10 desk-body', this.containerRow);
+ } else if (columns === 1) {
+ this.makeMenuPage();
+ this.body = frappejs.ui.add('div', 'col-md-12 desk-body', this.containerRow);
+ } else {
+ throw 'columns can be 1, 2 or 3'
+ }
+ }
+
+ makeMenu() {
+ this.menuColumn = frappejs.ui.add('div', 'col-md-2 desk-menu', this.containerRow);
+ this.menu = new menu(this.menuColumn);
+ }
+
+ makeMenuPage() {
+ // make menu page for 1 column layout
+ this.menuPage = null;
+ }
+
initRoutes() {
frappejs.router.add('not-found', async (params) => {
if (!this.notFoundPage) {
- this.notFoundPage = new page('Not Found');
+ this.notFoundPage = new page({title: 'Not Found'});
}
await this.notFoundPage.show();
this.notFoundPage.renderError('Not Found', params ? params.route : '');
@@ -27444,8 +27525,8 @@ var desk = class Desk {
});
frappejs.router.on('change', () => {
- if (this.routeItems[window.location.hash]) {
- this.setActive(this.routeItems[window.location.hash]);
+ if (this.menu) {
+ this.menu.setActive();
}
});
@@ -27503,7 +27584,7 @@ frappejs.ui = ui;
var client = {
- async start({server}) {
+ async start({server, columns = 2}) {
window.frappe = frappejs;
frappejs.init();
common.init_libs(frappejs);
@@ -27513,7 +27594,7 @@ var client = {
frappejs.flags.cache_docs = true;
- frappejs.desk = new desk();
+ frappejs.desk = new desk(columns);
await frappejs.login();
}
};
@@ -28316,8 +28397,8 @@ var account_client = {
};
client.start({
- server: 'localhost:8000',
- container: document.querySelector('.wrapper'),
+ columns: 3,
+ server: 'localhost:8000'
}).then(() => {
// require modules
@@ -28333,11 +28414,11 @@ client.start({
frappe.modules.todo_client = todo_client;
frappe.modules.account_client = account_client;
- frappe.desk.addSidebarItem('ToDo', '#list/todo');
- frappe.desk.addSidebarItem('Accounts', '#list/account');
- frappe.desk.addSidebarItem('Items', '#list/item');
- frappe.desk.addSidebarItem('Customers', '#list/customer');
- frappe.desk.addSidebarItem('Invoice', '#list/invoice');
+ frappe.desk.menu.addItem('ToDo', '#list/todo');
+ frappe.desk.menu.addItem('Accounts', '#list/account');
+ frappe.desk.menu.addItem('Items', '#list/item');
+ frappe.desk.menu.addItem('Customers', '#list/customer');
+ frappe.desk.menu.addItem('Invoice', '#list/invoice');
frappe.router.default = '#list/todo';
diff --git a/src/index.js b/src/index.js
index d8a5bfc4..045bf8fc 100644
--- a/src/index.js
+++ b/src/index.js
@@ -2,8 +2,8 @@ const client = require('frappejs/client');
// start server
client.start({
- server: 'localhost:8000',
- container: document.querySelector('.wrapper'),
+ columns: 3,
+ server: 'localhost:8000'
}).then(() => {
// require modules
@@ -19,11 +19,11 @@ client.start({
frappe.modules.todo_client = require('frappejs/models/doctype/todo/todo_client.js');
frappe.modules.account_client = require('../models/doctype/account/account_client.js');
- frappe.desk.addSidebarItem('ToDo', '#list/todo');
- frappe.desk.addSidebarItem('Accounts', '#list/account');
- frappe.desk.addSidebarItem('Items', '#list/item');
- frappe.desk.addSidebarItem('Customers', '#list/customer');
- frappe.desk.addSidebarItem('Invoice', '#list/invoice');
+ frappe.desk.menu.addItem('ToDo', '#list/todo');
+ frappe.desk.menu.addItem('Accounts', '#list/account');
+ frappe.desk.menu.addItem('Items', '#list/item');
+ frappe.desk.menu.addItem('Customers', '#list/customer');
+ frappe.desk.menu.addItem('Invoice', '#list/invoice');
frappe.router.default = '#list/todo';