Dashboard Admin Cleanup

- refactoring Api: FHC-API controller for Edit/Update, widgets and presets
- delete dashboard with Prompt
- phrases

public/js/api/factory/dashboard/dashboardAdmin.js

@@ -0,0 +1,85 @@
+/*
+* This program is free software: you can redistribute it and/or modify
+* it under the terms of the GNU General Public License as published by
+* the Free Software Foundation, either version 3 of the License, or
+* (at your option) any later version.
+*
+* This program is distributed in the hope that it will be useful,
+* but WITHOUT ANY WARRANTY; without even the implied warranty of
+* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+* GNU General Public License for more details.
+*
+* You should have received a copy of the GNU General Public License
+* along with this program.  If not, see <https://www.gnu.org/licenses/>.
+*/
+
+export default {
+	addDashboard(params) {
+		return {
+			method: 'post',
+			url: 'api/frontend/v1/dashboard/DashboardAdmin/createDashboard',
+			params
+		};
+	},
+	updateDashboard(params) {
+		return {
+			method: 'post',
+			url: 'api/frontend/v1/dashboard/DashboardAdmin/updateDashboard',
+			params
+		};
+	},
+	deleteDashboard(dashboard_id) {
+		return {
+			method: 'post',
+			url: 'api/frontend/v1/dashboard/DashboardAdmin/deleteDashboard',
+			params: { dashboard_id }
+		};
+	},
+	getAllDashboards(){
+		return {
+			method: 'get',
+			url: 'api/frontend/v1/dashboard/DashboardAdmin/getAllDashboards'
+		};
+	},
+	getAllWidgets(dashboard_id){
+		return {
+			method: 'get',
+			url: 'api/frontend/v1/dashboard/DashboardAdmin/getAllWidgets',
+			params: {dashboard_id}
+		};
+	},
+	setWidgetAllowed(params){
+		return {
+			method: 'post',
+			url: 'api/frontend/v1/dashboard/DashboardAdmin/setWidgetAllowed',
+			params
+		};
+	},
+	loadFunktionen(){
+		return {
+			method: 'get',
+			url: 'api/frontend/v1/dashboard/DashboardAdmin/funktionen'
+		};
+	},
+	addWidgetsToPreset(params){
+		return {
+			method: 'post',
+			url: 'api/frontend/v1/dashboard/DashboardAdmin/addWidgetsToPreset',
+			params
+		};
+	},
+	removeWidgetFromPreset(params){
+		return {
+			method: 'post',
+			url: 'api/frontend/v1/dashboard/DashboardAdmin/removeWidgetFromPreset',
+			params
+		};
+	},
+	presetBatch(params){
+		return {
+			method: 'get',
+			url: 'api/frontend/v1/dashboard/DashboardAdmin/presetBatch',
+			params
+		};
+	},
+}

public/js/components/Dashboard/Admin.js

@@ -3,11 +3,14 @@ import DashboardAdminEdit from "./Admin/Edit.js";
 import DashboardAdminWidgets from "./Admin/Widgets.js";
 import DashboardAdminPresets from "./Admin/Presets.js";
 
+import ApiDashboardAdmin from "../../api/factory/dashboard/dashboardAdmin.js";
+
 export default {
+	name: 'DashboardAdmin',
 	components: {
 		DashboardAdminEdit,
 		DashboardAdminWidgets,
-		DashboardAdminPresets
+		DashboardAdminPresets,
 	},
 	provide() {
 		return {
@@ -22,9 +25,6 @@ export default {
 		};
 	},
 	computed: {
-		apiurl() {
-			return FHC_JS_DATA_STORAGE_OBJECT.app_root + FHC_JS_DATA_STORAGE_OBJECT.ci_router + '/dashboard';
-		},
 		dashboard() {
 			return this.dashboards.find(el => el.dashboard_id == this.current);
 		}
@@ -35,33 +35,49 @@ export default {
 			BsPrompt.popup('New Dashboard name').then(
 				name => {
 					_name = name;
-					return axios.post(this.apiurl + '/Dashboard/create', {
+					const params = {
 						dashboard_kurzbz: name
-					})
-				}
-			).then(res => {
-				let newDashboard = {
-					dashboard_id: res.data.retval,
-					dashboard_kurzbz: _name,
-					beschreibung: ''
-				};
-				this.dashboards.push(newDashboard);
-				this.current = newDashboard.dashboard_id;
-			}).catch(err => err !== undefined ? console.error('ERROR:', err) : 0);
+					};
+					return this.$api
+						.call(ApiDashboardAdmin.addDashboard(params))
+						.then(response =>{
+							this.$fhcAlert.alertSuccess(this.$p.t('ui', 'successSave')); //TODO(Manu) phrase here working
+
+							let newDashboard = {
+								dashboard_id: response.data,
+								dashboard_kurzbz: _name,
+								beschreibung: ''
+							};
+							this.dashboards.push(newDashboard);
+							this.current = newDashboard.dashboard_id;
+						})
+						.catch(this.$fhcAlert.handleSystemError);
+					});
 		},
 		dashboardUpdate(dashboard) {
-			// TODO(chris): Loading or message
-			axios.post(this.apiurl + '/Dashboard/update', dashboard).then(() => {
-				let old = this.dashboards.find(el => el.dashboard_id == dashboard.dashboard_id);
-				old.dashboard_kurzbz = dashboard.dashboard_kurzbz;
-				old.beschreibung = dashboard.beschreibung;
-			}).catch(err => console.error('ERROR:', err));
+			return this.$api
+				.call(ApiDashboardAdmin.updateDashboard(dashboard))
+				.then(response =>{
+					this.$fhcAlert.alertSuccess(this.$p.t('ui', 'successSave')); //TODO(Manu) phrase here working
+
+					let old = this.dashboards.find(el => el.dashboard_id == dashboard.dashboard_id);
+					old.dashboard_kurzbz = dashboard.dashboard_kurzbz;
+					old.beschreibung = dashboard.beschreibung;
+				})
+				.catch(this.$fhcAlert.handleSystemError);
 		},
 		dashboardDelete(dashboard_id) {
-			axios.post(this.apiurl + '/Dashboard/delete', {dashboard_id}).then(() => {
-				this.current = -1;
-				this.dashboards = this.dashboards.filter(el => el.dashboard_id != dashboard_id);
-			}).catch(err => console.error('ERROR:', err));
+			return this.$api
+				.call(ApiDashboardAdmin.deleteDashboard(dashboard_id))
+				.then(response => {
+					this.$fhcAlert.alertSuccess(this.$p.t('ui', 'successDelete')); //TODO(Manu) phrase here NOT always working
+
+				})
+				.catch(this.$fhcAlert.handleSystemError)
+				.finally(() => {
+					this.current = -1;
+					this.dashboards = this.dashboards.filter(el => el.dashboard_id != dashboard_id);
+				});
 		},
 		assignWidgets(widgets) {
 			this.widgets = widgets;
@@ -72,18 +88,23 @@ export default {
 		}
 	},
 	created() {
-		axios.get(this.apiurl + '/Dashboard').then(res => {
-			this.dashboards = res.data.retval;
-		}).catch(err => console.error('ERROR:', err));
+		this.$api
+			.call(ApiDashboardAdmin.getAllDashboards())
+			.then(result => {
+				this.dashboards = result.data.retval;
+			})
+			.catch(this.$fhcAlert.handleSystemError);
 	},
 	template: `<div class="dashboard-admin">
+
 		<div class="input-group">
-			<label for="dashbaord-select" class="input-group-text">Dashboard:</label>
-			<select id="dashbaord-select" class="form-select" v-model="current">
+			<label for="dashboard-select" class="input-group-text">Dashboard:</label>
+			<select id="dashboard-select" class="form-select" v-model="current">
 				<option v-for="dashboard in dashboards" :key="dashboard.dashboard_id" :value="dashboard.dashboard_id">{{dashboard.dashboard_kurzbz}}</option>
 			</select>
 			<button class="btn btn-outline-secondary" type="button" @click="dashboardAdd"><i class="fa-solid fa-plus"></i></button>
 		</div>
+
 		<div v-if="dashboard">
 			<ul class="nav nav-tabs mt-3" role="tablist">
 				<li class="nav-item" role="presentation">

public/js/components/Dashboard/Admin/Edit.js

@@ -18,7 +18,9 @@ export default {
 	},
 	methods: {
 		sendDelete() {
-			BsConfirm.popup('Sure?').then(() => this.$emit('delete', this.dashboard_id)).catch();
+			//TODO(Manu) phrases here NOT always working
+			BsConfirm.popup(this.$p.t('alert', 'confirm_delete') + " " + this.$p.t('dashboard', 'deleteInfo'))
+				.then(() => this.$emit('delete', this.dashboard_id)).catch();
 		}
 	},
 	template: `<div class="dashboard-admin-edit px-3">

public/js/components/Dashboard/Admin/Presets.js

@@ -1,6 +1,7 @@
 import DashboardSection from "../Section.js";
 import DashboardWidgetPicker from "../Widget/Picker.js";
 import ObjectUtils from "../../../helpers/ObjectUtils.js";
+import ApiDashboardAdmin from "../../../api/factory/dashboard/dashboardAdmin.js";
 
 export default {
 	components: {
@@ -17,9 +18,6 @@ export default {
 		tmpLoading: ''
 	}),
 	computed: {
-		apiurl() {
-			return FHC_JS_DATA_STORAGE_OBJECT.app_root + FHC_JS_DATA_STORAGE_OBJECT.ci_router + '/dashboard';
-		},
 		pickerWidgets() {
 			return this.widgets.filter(widget => widget.allowed);
 		}
@@ -36,26 +34,29 @@ export default {
 					if (section.name == section_name)
 						section.widgets.push(loading);
 				});
-				
-				axios.post(this.apiurl + '/Config/addWidgetsToPreset', {
+
+				const params = {
 					db: this.dashboard,
 					funktion_kurzbz: section_name,
 					widgets: [widget]
-				}).then(result => {
-					let newId = Object.keys(result.data.retval.data[section_name].widgets).pop();
-					widget.id = newId;
-					widget.custom = 1;
-					this.sections.forEach(section => {
-						if (section.name == section_name) {
-							section.widgets.splice(section.widgets.indexOf(loading),1);
-							section.widgets.push(widget);
-						}
-					});
-				}).catch(error => {
-					console.error('ERROR: ', error);
-					alert('ERROR: ' + error.response.data.retval);
-				});
-			}).catch(() => {});
+				};
+
+				return this.$api
+					.call(ApiDashboardAdmin.addWidgetsToPreset(params))
+					.then(result => {
+						let newId = Object.keys(result.data[section_name].widgets).pop();
+						widget.id = newId;
+						widget.custom = 1;
+						this.sections.forEach(section => {
+							if (section.name == section_name) {
+								section.widgets.splice(section.widgets.indexOf(loading),1);
+								section.widgets.push(widget);
+							}
+						});
+					})
+					.catch(this.$fhcAlert.handleSystemError);
+			})
+			.catch(() => {});
 		},
 		widgetUpdate(section_name, payload) {
 			payload = payload[section_name];
@@ -78,76 +79,90 @@ export default {
 				payload[k].widgetid = k;
 				delete payload[k].custom;
 			}
-			axios.post(this.apiurl + '/Config/addWidgetsToPreset', {
+
+			//TODO(manu) test
+			const params = {
 				db: this.dashboard,
 				funktion_kurzbz: section_name,
 				widgets: payload
-			}).then(() => {
-				this.sections.forEach(section => {
-					if (section.name == section_name) {
-						section.widgets.forEach((widget, i) => {
-							if (payload[widget.id]) {
-								payload[widget.id].id = widget.id;
-								payload[widget.id].index = widget.index;
-								section.widgets[i] = payload[widget.id];
-								section.widgets[i].custom = 1;
-							}
-						});
-					}
-				});
-			}).catch(error => {
-				// TODO(chris): revert placement on failure
-				console.error('ERROR: ', error);
-				alert('ERROR: ' + error.response.data.retval);
-			});
+			};
+
+			return this.$api
+				.call(ApiDashboardAdmin.addWidgetsToPreset(params))
+				.then(result => {
+					this.sections.forEach(section => {
+						if (section.name == section_name) {
+							section.widgets.forEach((widget, i) => {
+								if (payload[widget.id]) {
+									payload[widget.id].id = widget.id;
+									payload[widget.id].index = widget.index;
+									section.widgets[i] = payload[widget.id];
+									section.widgets[i].custom = 1;
+								}
+							});
+						}
+					});
+				})
+				.catch(this.$fhcAlert.handleSystemError);
 		},
 		widgetRemove(section_name, id) {
-			axios.post(this.apiurl + '/Config/removeWidgetFromPreset', {
+			const params = {
 				db: this.dashboard,
 				funktion_kurzbz: section_name,
 				widgetid: id
-			}).then(() => {
-				this.sections.forEach(section => {
-					if (section.name == section_name)
-						section.widgets = section.widgets.filter(widget => widget.id != id);
-				});
-			}).catch(error => {
-				console.error('ERROR: ', error);
-				alert('ERROR: ' + error.response.data.retval);
-			});
+			};
+			return this.$api
+				.call(ApiDashboardAdmin.removeWidgetFromPreset(params))
+				.then(result => {
+					this.sections.forEach(section => {
+						if (section.name == section_name)
+							section.widgets = section.widgets.filter(widget => widget.id != id);
+					});
+				})
+				.catch(this.$fhcAlert.handleSystemError);
 		},
 		loadSections(evt) {
 			let funktionen = Array.from(evt.target.querySelectorAll("option:checked"),e=>e.value);
 			this.sections = [];
 			this.tmpLoading = funktionen.join('###');
-			axios.get(this.apiurl + '/Config/presetBatch', {params: {
+
+			const params = {
 				db: this.dashboard,
 				funktionen
-			}}).then(res => {
-				if (this.tmpLoading !== funktionen.join('###'))
-					return; // NOTE(chris): prevent race condition
-				for (var section in res.data.retval) {
-					let widgets = [];
-					for (var wid in res.data.retval[section]) {
-						res.data.retval[section][wid].id = wid;
-						res.data.retval[section][wid].custom = 1;
-						widgets.push(res.data.retval[section][wid]);
+			};
+
+			return this.$api
+				.call(ApiDashboardAdmin.presetBatch(params))
+				.then(result => {
+					if (this.tmpLoading !== funktionen.join('###'))
+						return; // NOTE(chris): prevent race condition
+					for (var section in result.data) {
+						let widgets = [];
+						for (var wid in result.data[section]) {
+							result.data[section][wid].id = wid;
+							result.data[section][wid].custom = 1;
+							widgets.push(result.data[section][wid]);
+						}
+						this.sections.push({
+							name: section,
+							widgets
+						});
 					}
-					this.sections.push({
-						name: section,
-						widgets
-					});
-				}
-			}).catch(err => console.error('ERROR:', err));
+				})
+				.catch(this.$fhcAlert.handleSystemError);
+
 		}
 	},
 	created() {
-		axios.get(this.apiurl + '/Config/funktionen').then(res => {
-			this.funktionen = {general: 'GENERAL'};
-			res.data.retval.forEach(funktion => {
-				this.funktionen[funktion.funktion_kurzbz] = funktion.beschreibung;
-			});
-		}).catch(err => console.error('ERROR:', err));
+		this.$api
+			.call(ApiDashboardAdmin.loadFunktionen())
+			.then(result => {
+				//console.log(result);
+				result.data.forEach(funktion => {
+					this.funktionen[funktion.funktion_kurzbz] = funktion.beschreibung;
+				});
+			})
+			.catch(this.$fhcAlert.handleSystemError);
 	},
 	watch: {
 		dashboard() {

public/js/components/Dashboard/Admin/Widgets.js

@@ -1,3 +1,5 @@
+import ApiDashboardAdmin from "../../../api/factory/dashboard/dashboardAdmin.js";
+
 export default {
 	emits: [
 		"change",
@@ -7,34 +9,34 @@ export default {
 		dashboard_id: Number,
 		widgets: Array
 	},
-	computed: {
-		apiurl() {
-			return FHC_JS_DATA_STORAGE_OBJECT.app_root + FHC_JS_DATA_STORAGE_OBJECT.ci_router + '/dashboard';
-		}
-	},
 	methods: {
 		sendChange(widget_id) {
 			let allow = !this.widgets.find(el => el.widget_id == widget_id).allowed;
-			axios.post(this.apiurl + '/Widget/setAllowed', {
+			const params = {
 				dashboard_id: this.dashboard_id,
 				widget_id,
 				action: allow ? 'add' : 'delete'
-			}).catch(err => console.error('ERROR: ' + err));
+			};
+
+			this.$api
+				.call(ApiDashboardAdmin.setWidgetAllowed(params))
+				.catch(this.$fhcAlert.handleSystemError);
 		}
 	},
 	created() {
-		axios.get(this.apiurl + '/Widget/getAll', {
-			params:{
-				dashboard_id: this.dashboard_id
-			}
-		}).then(
-			result => {
-				this.$emit('assignWidgets', result.data.retval.map(el => ({
+		this.$api
+			.call(ApiDashboardAdmin.getAllWidgets(this.dashboard_id))
+			.then(result => {
+/*				console.log(result.data.map(el => ({
+						...el,
+						...{setup:JSON.parse(el.setup),arguments:JSON.parse(el.arguments),allowed:!!el.allowed}
+				})));*/
+				this.$emit('assignWidgets', result.data.map(el => ({
 					...el,
 					...{setup:JSON.parse(el.setup),arguments:JSON.parse(el.arguments),allowed:!!el.allowed}
 				})));
-			}
-		).catch(err => console.error('ERROR:', err));
+			})
+			.catch(this.$fhcAlert.handleSystemError);
 	},
 	template: `
 	<div class="dashboard-admin-widgets">

public/js/components/Dashboard/Section.js

@@ -151,7 +151,7 @@ export default {
 		},
 		removeWidget(item, revert) {
 			if (item.custom) {
-				BsConfirm.popup('Are you sure you want to delete this widget?').then(() => this.$emit('widgetRemove', this.name, item.id));
+				BsConfirm.popup(this.$p.t('dashboard', 'alert_deleteWidget')).then(() => this.$emit('widgetRemove', this.name, item.id));
 			} else {
 				let update = {};
 				update[item.id] = { hidden: !revert };