books/client/desk/formpage.js

const Page = require('frappejs/client/view/page');
const view = require('frappejs/client/view');
const frappe = require('frappejs');

module.exports = class FormPage extends Page {
	constructor(doctype) {
		let meta = frappe.getMeta(doctype)
		super({title: `Edit ${meta.name}`});
		this.meta = meta;

		this.form = new (view.getFormClass(doctype))({
			doctype: doctype,
			parent: this.body,
			container: this,
			actions: ['submit', 'delete', 'duplicate', 'settings']
		});

		this.on('show', async (params) => {
			await this.showDoc(params.doctype, params.name);
			if (frappe.desk.center && !frappe.desk.center.activePage) {
				frappe.desk.showListPage(doctype);
			}
		});

		// if name is different after saving, change the route
		this.form.on('submit', async (params) => {
			let route = frappe.router.get_route();
			if (this.form.doc.name && !(route && route[2] === this.form.doc.name)) {
				await frappe.router.setRoute('edit', this.form.doc.doctype, this.form.doc.name);
				this.form.showAlert('Added', 'success');
			}
		});

		this.form.on('delete', async (params) => {
			await frappe.router.setRoute('list', this.form.doctype);
		});
	}

	async showDoc(doctype, name) {
		try {
			await this.form.setDoc(doctype, name);
			this.setActiveListRow(doctype, name);
		} catch (e) {
			this.renderError(e.status_code, e.message);
		}
	}

	setActiveListRow(doctype, name) {
		let activeListRow = document.querySelector('.list-page .list-body .list-row.active');
		if (activeListRow) {
			activeListRow.classList.remove('active');
		}

		let myListRow = document.querySelector(`.list-body[data-doctype="${doctype}"] .list-row[data-name="${name}"]`);
		if (myListRow) {
			myListRow.classList.add('active');
		}
	}
}