From 8fd61edaab723decda442bd2cfab6ee177c0a70e Mon Sep 17 00:00:00 2001
From: cgfhtw <christopher.gerbrich@technikum-wien.at>
Date: Fri, 28 Oct 2022 12:41:25 +0200
Subject: [PATCH] Admin Components

---
 public/js/components/Dashboard/Admin.js       | 113 +++++++++++++
 public/js/components/Dashboard/Admin/Edit.js  |  38 +++++
 .../js/components/Dashboard/Admin/Presets.js  | 159 ++++++++++++++++++
 .../js/components/Dashboard/Admin/Widgets.js  |  45 +++++
 4 files changed, 355 insertions(+)
 create mode 100644 public/js/components/Dashboard/Admin.js
 create mode 100644 public/js/components/Dashboard/Admin/Edit.js
 create mode 100644 public/js/components/Dashboard/Admin/Presets.js
 create mode 100644 public/js/components/Dashboard/Admin/Widgets.js

diff --git a/public/js/components/Dashboard/Admin.js b/public/js/components/Dashboard/Admin.js
new file mode 100644
index 000000000..775cd87d6
--- /dev/null
+++ b/public/js/components/Dashboard/Admin.js
@@ -0,0 +1,113 @@
+import BsPrompt from "../Bootstrap/Prompt.js";
+import DashboardAdminEdit from "./Admin/Edit.js";
+import DashboardAdminWidgets from "./Admin/Widgets.js";
+import DashboardAdminPresets from "./Admin/Presets.js";
+
+export default {
+	components: {
+		DashboardAdminEdit,
+		DashboardAdminWidgets,
+		DashboardAdminPresets
+	},
+	provide() {
+		return {
+			adminMode: true
+		};
+	},
+	data() {
+		return {
+			dashboards: [],
+			current: -1,
+			widgets: []
+		};
+	},
+	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);
+		}
+	},
+	methods: {
+		dashboardAdd() {
+			let _name = '';
+			BsPrompt.popup('New Dashboard name').then(
+				name => {
+					_name = name;
+					return axios.post(this.apiurl + '/Dashboard/Create', {
+						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);
+		},
+		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));
+		},
+		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));
+		},
+		assignWidgets(widgets) {
+			this.widgets = widgets;
+			/*while (this.widgets.length)
+				this.widgets.pop();
+			for (var i in widgets)
+				this.widgets.push(widgets[i]);*/
+		}
+	},
+	created() {
+		axios.get(this.apiurl + '/Dashboard').then(res => {
+			//console.log(res.data.retval);
+			this.dashboards = res.data.retval;
+		}).catch(err => console.error('ERROR:', err));
+	},
+	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">
+				<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">
+					<button class="nav-link" id="edit-tab" data-bs-toggle="tab" data-bs-target="#edit" type="button" role="tab" aria-controls="edit" aria-selected="false">Edit</button>
+				</li>
+				<li class="nav-item" role="presentation">
+					<button class="nav-link active" id="widgets-tab" data-bs-toggle="tab" data-bs-target="#widgets" type="button" role="tab" aria-controls="widgets" aria-selected="true">Widgets</button>
+				</li>
+				<li class="nav-item" role="presentation">
+					<button class="nav-link" id="presets-tab" data-bs-toggle="tab" data-bs-target="#presets" type="button" role="tab" aria-controls="presets" aria-selected="false">Presets</button>
+				</li>
+			</ul>
+			<div class="tab-content pt-3">
+				<div class="tab-pane fade" id="edit" role="tabpanel" aria-labelledby="edit-tab">
+					<dashboard-admin-edit v-bind="dashboard" :key="dashboard.dashboard_id" @change="dashboardUpdate($event)" @delete="dashboardDelete($event)"></dashboard-admin-edit>
+				</div>
+				<div class="tab-pane fade show active" id="widgets" role="tabpanel" aria-labelledby="widgets-tab">
+					<dashboard-admin-widgets :key="dashboard.dashboard_id" :dashboard_id="dashboard.dashboard_id" :widgets="widgets" @change="test" @assign-widgets="assignWidgets"></dashboard-admin-widgets>
+				</div>
+				<div class="tab-pane fade" id="presets" role="tabpanel" aria-labelledby="presets-tab">
+					<dashboard-admin-presets :dashboard="dashboard.dashboard_kurzbz" :widgets="widgets"></dashboard-admin-presets>
+				</div>
+			</div>
+		</div>
+	</div>`
+}
diff --git a/public/js/components/Dashboard/Admin/Edit.js b/public/js/components/Dashboard/Admin/Edit.js
new file mode 100644
index 000000000..ec841a9ad
--- /dev/null
+++ b/public/js/components/Dashboard/Admin/Edit.js
@@ -0,0 +1,38 @@
+import BsConfirm from '../../Bootstrap/Confirm.js';
+
+export default {
+	emits: [
+		"change",
+		"delete"
+	],
+	props: {
+		dashboard_id: Number,
+		dashboard_kurzbz: String,
+		beschreibung: String
+	},
+	data() {
+		return {
+			kurzbz: this.dashboard_kurzbz,
+			desc: this.beschreibung
+		}
+	},
+	methods: {
+		sendDelete() {
+			BsConfirm.popup('Sure?').then(() => this.$emit('delete', this.dashboard_id)).catch();
+		}
+	},
+	template: `<div class="dashboard-admin-edit px-3">
+		<div class="mb-3">
+			<label for="dashboard-admin-edit-kurzbz">Kurz Bezeichnung</label>
+			<input id="dashboard-admin-edit-kurzbz" type="text" class="form-control" v-model="kurzbz">
+		</div>
+		<div class="mb-3">
+			<label for="dashboard-admin-edit-beschreibung">Beschreibung</label>
+			<textarea id="dashboard-admin-edit-beschreibung" class="form-control" v-model="desc"></textarea>
+		</div>
+		<div>
+			<button class="btn btn-danger" @click="sendDelete">Delete</button>
+			<button class="btn btn-primary" @click="$emit('change', {dashboard_id,dashboard_kurzbz:kurzbz,beschreibung:desc})">Update</button>
+		</div>
+	</div>`
+}
diff --git a/public/js/components/Dashboard/Admin/Presets.js b/public/js/components/Dashboard/Admin/Presets.js
new file mode 100644
index 000000000..19052171f
--- /dev/null
+++ b/public/js/components/Dashboard/Admin/Presets.js
@@ -0,0 +1,159 @@
+import DashboardSection from "../Section.js";
+import DashboardWidgetPicker from "../Widget/Picker.js";
+import ObjectUtils from "../../../composables/ObjectUtils.js";
+
+export default {
+	components: {
+		DashboardSection,
+		DashboardWidgetPicker
+	},
+	props: {
+		dashboard: String,
+		widgets: Array
+	},
+	data: () => ({
+		funktionen: {},
+		sections: [],
+	}),
+	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);
+		}
+	},
+	methods: {
+		widgetAdd(section_name, widget) {
+			this.$refs.widgetpicker.getWidget().then(widget_id => {
+				widget.widget = widget_id;
+				let loading = {...widget};
+				loading.loading = true;
+				this.sections.forEach(section => {
+					if (section.name == section_name)
+						section.widgets.push(loading);
+				});
+				
+				axios.post(this.apiurl + '/Config/addWidgetsToPreset', {
+					db: this.dashboard,
+					funktion_kurzbz: section_name,
+					widgets: [widget]
+				}).then(result => {
+					let newId = Object.keys(result.data.retval.data.widgets[section_name]).pop();
+					widget.id = newId;
+					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);
+				});
+			});
+		},
+		widgetUpdate(section_name, payload) {
+			payload = payload[section_name];
+			for (var k in payload) {
+				for (var i in this.sections) {
+					if (this.sections[i].name == section_name) {
+						for (var wid in this.sections[i].widgets) {
+							if (this.sections[i].widgets[wid].id == k) {
+								payload[k] = ObjectUtils.mergeDeep(this.sections[i].widgets[wid], payload[k]);
+								// NOTE(chris): remove internal props
+								for (var prop in {_x:1,_y:1,_w:1,_h:1,index:1,id:1})
+									if (payload[k][prop])
+										delete payload[k][prop];
+								break;
+							}
+						}
+						break;
+					}
+				}
+				payload[k].widgetid = k;
+				delete payload[k].custom;
+			}
+			axios.post(this.apiurl + '/Config/addWidgetsToPreset', {
+				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);
+			});
+		},
+		widgetRemove(section_name, id) {
+			axios.post(this.apiurl + '/Config/removeWidgetFromPreset', {
+				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);
+			});
+		},
+		loadSections(evt) {
+			let funktionen = Array.from(evt.target.querySelectorAll("option:checked"),e=>e.value);
+			this.sections = [];
+			axios.get(this.apiurl + '/Config/PresetBatch', {params: {
+				db: this.dashboard,
+				funktionen
+			}}).then(res => {
+				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]);
+					}
+					this.sections.push({
+						name: section,
+						widgets
+					});
+				}
+			}).catch(err => console.error('ERROR:', err));
+		}
+	},
+	created() {
+		axios.get(this.apiurl + '/Config/Funktionen').then(res => {
+			//console.log(res.data.retval);
+			this.funktionen = {general: 'GENERAL'};
+			res.data.retval.forEach(funktion => {
+				this.funktionen[funktion.funktion_kurzbz] = funktion.beschreibung;
+			});
+		}).catch(err => console.error('ERROR:', err));
+	},
+	template: `<div class="dashboard-admin-presets">
+		<div class="row">
+			<div class="col-3">
+				<select class="form-control" multiple @input="loadSections">
+					<option v-for="name,id in funktionen" :key="id" :value="id">{{ name }}</option>
+				</select>
+			</div>
+			<div class="col-9">
+				<dashboard-section v-for="section in sections" :key="section.name" :name="section.name" :widgets="section.widgets" @widget-add="widgetAdd" @widget-update="widgetUpdate" @widget-remove="widgetRemove"></dashboard-section>
+			</div>
+		</div>
+		<dashboard-widget-picker ref="widgetpicker" :widgets="pickerWidgets"></dashboard-widget-picker>
+	</div>`
+}
diff --git a/public/js/components/Dashboard/Admin/Widgets.js b/public/js/components/Dashboard/Admin/Widgets.js
new file mode 100644
index 000000000..34b7b482c
--- /dev/null
+++ b/public/js/components/Dashboard/Admin/Widgets.js
@@ -0,0 +1,45 @@
+export default {
+	emits: [
+		"change",
+		"assignWidgets"
+	],
+	props: {
+		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', {
+				dashboard_id: this.dashboard_id,
+				widget_id,
+				action: allow ? 'add' : 'delete'
+			}).catch(err => console.error('ERROR: ' + err));
+		}
+	},
+	created() {
+		axios.get(this.apiurl + '/Widget/getAll', {
+			params:{
+				dashboard_id: this.dashboard_id
+			}
+		}).then(
+			result => {
+				this.$emit('assignWidgets', result.data.retval.map(el => ({
+					...el,
+					...{setup:JSON.parse(el.setup),arguments:JSON.parse(el.arguments),allowed:!!el.allowed}
+				})));
+			}
+		).catch(err => console.error('ERROR:', err));
+	},
+	template: `<div class="dashboard-admin-widgets">
+		<div v-for="widget in widgets" :key="widget.widget_id" class="form-check form-switch">
+			<input class="form-check-input" type="checkbox" role="switch" :id="'dashboard-admin-widgets-' + widget.widget_id" v-model="widget.allowed" @input.prevent="sendChange(widget.widget_id)">
+			<label class="form-check-label" :for="'dashboard-admin-widgets-' + widget.widget_id">{{(widget.setup && widget.setup.name) || widget.widget_kurzbz}}</label>
+		</div>
+	</div>`
+}