chore: port dashboards to v12

frappe/core/page/dashboard/dashboard.js

@@ -6,7 +6,7 @@ frappe.provide('frappe.dashboards.chart_sources');
 
 
 frappe.pages['dashboard'].on_page_load = function(wrapper) {
-	var page = frappe.ui.make_app_page({
+	frappe.ui.make_app_page({
 		parent: wrapper,
 		title: __("Dashboard"),
 		single_column: true
@@ -21,8 +21,8 @@ frappe.pages['dashboard'].on_page_load = function(wrapper) {
 class Dashboard {
 	constructor(wrapper) {
 		this.wrapper = $(wrapper);
-		$(`<div class="dashboard">
-			<div class="dashboard-graph row"></div>
+		$(`<div class="dashboard" style="overflow-y: hidden">
+			<div class="dashboard-graph"></div>
 		</div>`).appendTo(this.wrapper.find(".page-content").empty());
 		this.container = this.wrapper.find(".dashboard-graph");
 		this.page = wrapper.page;
@@ -59,7 +59,7 @@ class Dashboard {
 	}
 
 	show_dashboard(current_dashboard_name) {
-		if(this.dashboard_name !== current_dashboard_name) {
+		if (this.dashboard_name !== current_dashboard_name) {
 			this.dashboard_name = current_dashboard_name;
 			let title = this.dashboard_name;
 			if (!this.dashboard_name.toLowerCase().includes(__('dashboard'))) {
@@ -76,212 +76,117 @@ class Dashboard {
 	}
 
 	refresh() {
-		this.get_dashboard_doc().then((doc) => {
-			this.dashboard_doc = doc;
-			this.charts = this.dashboard_doc.charts;
+		frappe.run_serially([
+			() => this.render_cards(),
+			() => this.render_charts()
+		]);
+	}
+
+	render_charts() {
+		return this.get_permitted_items(
+			'frappe.desk.doctype.dashboard.dashboard.get_permitted_charts'
+		).then(charts => {
+			if (!charts.length) {
+				frappe.msgprint(__('No Permitted Charts on this Dashboard'), __('No Permitted Charts'))
+			}
 
-			this.charts.map((chart) => {
-				let chart_container = $("<div></div>");
-				chart_container.appendTo(this.container);
+			frappe.dashboard_utils.get_dashboard_settings().then((settings) => {
+				let chart_config = settings.chart_config? JSON.parse(settings.chart_config): {};
+				this.charts =
+					charts.map(chart => {
+						return {
+							chart_name: chart.chart,
+							label: chart.chart,
+							chart_settings: chart_config[chart.chart] || {},
+							...chart
+						}
+					});
 
-				frappe.model.with_doc("Dashboard Chart", chart.chart).then( chart_doc => {
-					let dashboard_chart = new DashboardChart(chart_doc, chart_container);
-					dashboard_chart.show();
+				this.chart_group = new frappe.widget.WidgetGroup({
+					title: null,
+					container: this.container,
+					type: "chart",
+					columns: 2,
+					options: {
+						allow_sorting: false,
+						allow_create: false,
+						allow_delete: false,
+						allow_hiding: false,
+						allow_edit: false,
+					},
+					widgets: this.charts,
 				});
-			});
-		});
-	}
-
-	get_dashboard_doc() {
-		return frappe.model.with_doc('Dashboard', this.dashboard_name);
-	}
-
-	set_dropdown() {
-		this.page.clear_menu();
-
-		this.page.add_menu_item('Edit...', () => {
-			frappe.set_route('Form', 'Dashboard', frappe.dashboard.dashboard_name);
-		}, 1);
-
-		this.page.add_menu_item('New...', () => {
-			frappe.new_doc('Dashboard');
-		}, 1);
-
-		frappe.db.get_list("Dashboard").then(dashboards => {
-			dashboards.map(dashboard => {
-				let name = dashboard.name;
-				if(name != this.dashboard_name){
-					this.page.add_menu_item(name, () => frappe.set_route("dashboard", name));
-				}
-			});
-		});
-	}
-}
-
-class DashboardChart {
-	constructor(chart_doc, chart_container) {
-		this.chart_doc = chart_doc;
-		this.container = chart_container;
-	}
-
-	show() {
-		this.get_settings().then(() => {
-			this.prepare_chart_object();
-			this.prepare_container();
-			this.prepare_chart_actions();
-			this.fetch(this.filters).then((data) => {
-				this.update_last_synced();
-				this.data = data;
-				this.render();
-			});
+			})
 		});
 	}
 
-	prepare_container() {
-		const column_width_map = {
-			"Half": "6",
-			"Full": "12",
-		};
-		let columns = column_width_map[this.chart_doc.width];
-		this.chart_container = $(`<div class="col-sm-${columns} chart-column-container">
-			<div class="chart-wrapper">
-				<div class="chart-loading-state text-muted">${__("Loading...")}</div>
-				<div class="chart-empty-state hide text-muted">${__("No Data")}</div>
-			</div>
-		</div>`);
-		this.chart_container.appendTo(this.container);
-
-		let last_synced_text = $(`<span class="text-muted last-synced-text"></span>`);
-		last_synced_text.prependTo(this.chart_container);
-	}
-
-	prepare_chart_actions() {
-		let actions = [
-			{
-				label: __("Refresh"),
-				action: 'action-refresh',
-				handler: () => {
-					this.fetch(this.filters, true).then(data => {
-						this.update_chart_object();
-						this.data = data;
-						this.render();
-					});
-				}
-			},
-			{
-				label: __("Edit..."),
-				action: 'action-edit',
-				handler: () => {
-					frappe.set_route('Form', 'Dashboard Chart', this.chart_doc.name);
-				}
+	render_cards() {
+		return this.get_permitted_items(
+			'frappe.desk.doctype.dashboard.dashboard.get_permitted_cards'
+		).then(cards => {
+			if (!cards.length) {
+				return;
 			}
-		];
-		if (this.chart_doc.document_type) {
-			actions.push({
-				label: __("{0} List", [this.chart_doc.document_type]),
-				action: 'action-list',
-				handler: () => {
-					frappe.set_route('List', this.chart_doc.document_type);
-				}
-			})
-		}
-		this.set_chart_actions(actions);
-	}
 
-	set_chart_actions(actions) {
-		this.chart_actions = $(`<div class="chart-actions btn-group dropdown pull-right">
-			<a class="dropdown-toggle" data-toggle="dropdown"
-				aria-haspopup="true" aria-expanded="false"> <button class="btn btn-default btn-xs"><span class="caret"></span></button>
-			</a>
-			<ul class="dropdown-menu" style="max-height: 300px; overflow-y: auto;">
-				${actions.map(action => `<li><a data-action="${action.action}">${action.label}</a></li>`).join('')}
-			</ul>
-		</div>
-		`);
+			this.number_cards =
+				cards.map(card => {
+					return {
+						name: card.card,
+					};
+				});
 
-		this.chart_actions.find("a[data-action]").each((i, o) => {
-			const action = o.dataset.action;
-			$(o).click(actions.find(a => a.action === action));
+			this.number_card_group = new frappe.widget.WidgetGroup({
+				container: this.container,
+				type: "number_card",
+				columns: 3,
+				options: {
+					allow_sorting: false,
+					allow_create: false,
+					allow_delete: false,
+					allow_hiding: false,
+					allow_edit: false,
+				},
+				widgets: this.number_cards,
+			});
 		});
-		this.chart_actions.prependTo(this.chart_container);
 	}
 
-	fetch(filters, refresh=false) {
-		this.chart_container.find('.chart-loading-state').removeClass('hide');
-		let method = this.settings ? this.settings.method
-			: 'frappe.desk.doctype.dashboard_chart.dashboard_chart.get';
-
+	get_permitted_items(method) {
 		return frappe.xcall(
 			method,
 			{
-				chart_name: this.chart_doc.name,
-				filters: filters,
-				refresh: refresh ? 1 : 0,
+				dashboard_name: this.dashboard_name
 			}
-		);
+		).then(items => {
+			return items;
+		});
 	}
 
-	render() {
-		const chart_type_map = {
-			"Line": "line",
-			"Bar": "bar",
-		};
-
-		this.chart_container.find('.chart-loading-state').addClass('hide');
-		if (!this.data) {
-			this.chart_container.find('.chart-empty-state').removeClass('hide');
-		} else {
-			let chart_args = {
-				title: this.chart_doc.chart_name,
-				data: this.data,
-				type: chart_type_map[this.chart_doc.type],
-				colors: [this.chart_doc.color || "light-blue"],
-				axisOptions: {
-					xIsSeries: this.chart_doc.timeseries,
-					shortenYAxisNumbers: 1
-				}
-			};
-			if (!this.chart) {
-				this.chart = new frappe.Chart(this.chart_container.find(".chart-wrapper")[0], chart_args);
-			} else {
-				this.chart.update(this.data);
-			}
-		}
-	}
+	set_dropdown() {
+		this.page.clear_menu();
 
-	update_last_synced() {
-		let last_synced_text = __("Last synced {0}", [comment_when(this.chart_doc.last_synced_on)]);
-		this.container.find(".last-synced-text").html(last_synced_text);
-	}
+		this.page.add_menu_item(__('Edit'), () => {
+			frappe.set_route('Form', 'Dashboard', frappe.dashboard.dashboard_name);
+		});
 
-	update_chart_object() {
-		frappe.db.get_doc("Dashboard Chart", this.chart_doc.name).then(doc => {
-			this.chart_doc = doc;
-			this.prepare_chart_object();
-			this.update_last_synced();
+		this.page.add_menu_item(__('New'), () => {
+			frappe.new_doc('Dashboard');
 		});
-	}
 
-	prepare_chart_object() {
-		this.filters = JSON.parse(this.chart_doc.filters_json || '{}');
-	}
+		this.page.add_menu_item(__('Refresh All'), () => {
+			this.chart_group &&
+				this.chart_group.widgets_list.forEach(chart => chart.refresh());
+			this.number_card_group &&
+				this.number_card_group.widgets_list.forEach(card => card.render_card());
+		});
 
-	get_settings() {
-		if (this.chart_doc.chart_type == 'Custom') {
-			// custom source
-			if (frappe.dashboards.chart_sources[this.chart_doc.source]) {
-				this.settings = frappe.dashboards.chart_sources[this.chart_doc.source];
-				return Promise.resolve();
-			} else {
-				return frappe.xcall('frappe.desk.doctype.dashboard_chart_source.dashboard_chart_source.get_config',
-					{name: this.chart_doc.source})
-					.then(config => {
-						frappe.dom.eval(config);
-						this.settings = frappe.dashboards.chart_sources[this.chart_doc.source];
-					});
-			}
-		} else {
-			return Promise.resolve();
-		}
+		frappe.db.get_list('Dashboard').then(dashboards => {
+			dashboards.map(dashboard => {
+				let name = dashboard.name;
+				if(name != this.dashboard_name){
+					this.page.add_menu_item(name, () => frappe.set_route("dashboard", name), 1);
+				}
+			});
+		});
 	}
 }

frappe/core/page/dashboard/dashboard.json

@@ -4,7 +4,7 @@
  "docstatus": 0,
  "doctype": "Page",
  "idx": 0,
- "modified": "2019-01-08 19:19:48.073410",
+ "modified": "2020-03-26 13:30:44.603948",
  "modified_by": "Administrator",
  "module": "Core",
  "name": "dashboard",