feat: show setting values on the settings page and implement sending to backend (no saving yet)

src/api/routes/service/configPOST.js

@@ -0,0 +1,20 @@
+const Joi = require('joi');
+
+const Route = require('../../structures/Route');
+const Util = require('../../utils/Util');
+
+const { schema } = require('../../structures/Setting');
+
+class configGET extends Route {
+	constructor() {
+		super('/service/config', 'post', { adminOnly: true });
+	}
+
+	run(req, res) {
+		const { settings } = req.body;
+		const validationRes = schema.validate(settings, { abortEarly: false });
+		console.log(JSON.stringify(validationRes));
+	}
+}
+
+module.exports = configGET;

src/site/components/settings/JoiObject.vue

@@ -1,6 +1,6 @@
 <template>
-	<div v-if="keys">
+	<div v-if="settings">
-		<div v-for="[key, field] in Object.entries(keys)" :key="key">
+		<div v-for="[key, field] in Object.entries(settings)" :key="key">
 			<b-field
 				:label="field.flags.label"
 				:message="field.flags.description"
@@ -8,12 +8,12 @@
 				horizontal>
 				<b-input
 					v-if="getDisplayType(field) === 'string'"
-					v-model="settings.serviceName"
+					v-model="values[key]"
 					class="chibisafe-input"
 					expanded />
 				<b-input
 					v-else-if="getDisplayType(field) === 'number'"
-					v-model="settings.serviceName"
+					v-model="values[key]"
 					type="number"
 					class="chibisafe-input"
 					:min="getMin(field)"
@@ -21,22 +21,21 @@
 					expanded />
 				<b-switch
 					v-else-if="getDisplayType(field) === 'boolean'"
-					v-model="settings.publicMode"
+					v-model="values[key]"
 					:rounded="false"
 					:true-value="true"
 					:false-value="false" />
 				<!-- TODO: If array and has allowed items, limit input to those items only -->
 				<b-taginput
 					v-else-if="getDisplayType(field) === 'array' || getDisplayType(field) === 'tagInput'"
-					v-model="settings.arr"
+					v-model="values[key]"
 					ellipsis
 					icon="label"
 					:placeholder="field.flags.label"
-					aria-close-label="Delete this tag"
 					class="taginp" />
 				<div v-else-if="getDisplayType(field) === 'checkbox'">
 					<b-checkbox v-for="item in getAllowedItems(field)" :key="item"
-						v-model="settings.ech"
+						v-model="values[key]"
 						:native-value="item">
 						{{ item }}
 					</b-checkbox>
@@ -55,11 +54,7 @@
 export default {
 	name: 'JoiObject',
 	props: {
-		keys: {
+		settings: {
-			type: Object,
-			required: true
-		},
-		values: {
 			type: Object,
 			required: true
 		},
@@ -70,14 +65,13 @@ export default {
 	},
 	data() {
 		return {
-			fields: null, // keys + values combined
+			values: {}
-			settings: {
-				ech: []
-			}
 		};
 	},
-	mounted() {
+	created() {
-
+		for (const [k, v] of Object.entries(this.settings)) {
+			this.$set(this.values, k, v.value);
+		}
 	},
 	methods: {
 		getMin(field) {
@@ -113,6 +107,9 @@ export default {
 
 				return [...acc, ...item.allow];
 			}, []);
+		},
+		getValues() {
+			return this.values;
 		}
 	}
 };

src/site/pages/dashboard/admin/settings.vue

@@ -15,7 +15,7 @@
 						<h5 class="title is-5 has-text-grey-lighter">
 							{{ sectionName }}
 						</h5>
-						<JoiObject :keys="fields" :values="{}" />
+						<JoiObject ref="jois" :settings="fields" />
 					</div>
 
 					<div class="mb2 mt2 text-center">
@@ -49,13 +49,13 @@ export default {
 		}),
 		sectionedSettings() {
 			return Object.entries(this.settingsSchema.keys).reduce((acc, [key, field]) => {
-				if (!field.metas) acc['Other'] = { ...acc['Other'], [key]: field };
+				if (!field.metas) acc.Other = { ...acc.Other, [key]: field };
 
 				const sectionMeta = field.metas.find(e => e.section);
 				if (sectionMeta) {
 					acc[sectionMeta.section] = { ...acc[sectionMeta.section], [key]: field };
 				} else {
-					acc['Other'] = { ...acc['Other'], [key]: field };
+					acc.Other = { ...acc.Other, [key]: field };
 				}
 
 				return acc;
@@ -64,18 +64,26 @@ export default {
 	},
 	async asyncData({ app }) {
 		await app.store.dispatch('admin/fetchSettings');
-		// TODO: Implement merging fields with values from the db (no endpoint to fetch settings yet)
 		await app.store.dispatch('admin/getSettingsSchema');
+		await app.store.commit('admin/populateSchemaWithValues');
 	},
 	methods: {
 		promptRestartService() {
 			this.$buefy.dialog.confirm({
 				message: 'Keep in mind that restarting only works if you have PM2 or something similar set up. Continue?',
-				onConfirm: () => this.restartService()
+				onConfirm: () => this.saveSettings()
 			});
 		},
-		restartService() {
+		saveSettings() {
-			this.$handler.executeAction('admin/restartService');
+			// handle refs
+			let settings = {};
+			for (const joiComponent of this.$refs.jois) {
+				settings = { ...settings, ...joiComponent.getValues() };
+			}
+
+			this.$handler.executeAction('admin/saveSettings', settings);
+			// restart service
+			// this.$handler.executeAction('admin/restartService');
 		}
 	},
 	head() {

src/site/store/admin.js

@@ -26,6 +26,12 @@ export const actions = {
 
 		return response;
 	},
+	async saveSettings({ commit }, settings) {
+		const response = await this.$axios.$post('service/config', { settings });
+		commit('setSettings', response);
+
+		return response;
+	},
 	async fetchStatistics({ commit }, category) {
 		const url = category ? `service/statistics/${category}` : 'service/statistics';
 		const response = await this.$axios.$get(url);
@@ -148,5 +154,12 @@ export const mutations = {
 				state.user.isAdmin = isAdmin;
 			}
 		}
+	},
+	populateSchemaWithValues({ settings, settingsSchema }) {
+		for (const [key, value] of Object.entries(settings)) {
+			if (settingsSchema.keys?.[key] !== undefined) {
+				settingsSchema.keys[key].value = value;
+			}
+		}
 	}
 };