feat: added way to edit accounts, fixed webpack issue

backend/logic/io.js

@@ -44,6 +44,21 @@ module.exports = class extends coreClass {
 					});
 				},
 
+				"getAccount": (cb, accountId) => {
+					this.mongo.models.account.findById(accountId, (err, account) => {
+						if (err || !account)
+							return cb({
+								status: "failure",
+								err: err
+							});
+						else
+							return cb({
+								status: "success",
+								account
+							});
+					});
+				},
+
 				"addAccount": (cb, account) => {
 					this.mongo.models.account.create(account, (err) => {
 						if (err)
@@ -59,6 +74,21 @@ module.exports = class extends coreClass {
 					});
 				},
 
+				"editAccount": (cb, accountId, account) => {
+					this.mongo.models.account.updateOne({ _id: accountId }, account, (err) => {
+						if (err)
+							return cb({
+								status: "failure",
+								err: err
+							});
+						else
+							console.log("Editted account!");
+							return cb({
+								status: "success"
+							});
+					});
+				},
+
 				"getAccountSchema": cb => {
 					this.mongo.models.accountSchema.find({}, null, { sort: "-version", limit: 1 }, (err, res) => {
 						if (err || !res || res.length !== 1)

backend/logic/mongo/schemas/account.js

@@ -1,4 +1,4 @@
 module.exports = {
 	version: { type: Number, required: true },
-	fields: [{ type: Object }]
+	fields: { type: Object }
 };

frontend/main.js

@@ -15,13 +15,25 @@ const router = new VueRouter({
 			path: "/",
 			component: () => import("./vue/pages/Homepage.vue")
 		},
+		{
+			path: "*",
+			component: () => import("./vue/pages/NotFound.vue")
+		},
 		{
 			path: "/add",
 			component: () => import("./vue/pages/AddAccount.vue")
-		}
+		},
+		{
+			path: "/edit/:accountId",
+			component: () => import("./vue/pages/EditAccount.vue")
+		},
 	]
 });
 
+// router.beforeEach((to, from, next) => {
+// 	next();
+// });
+
 io.init("http://localhost:8080");
 
 new Vue({

frontend/vue/components/AccountForm.vue

@@ -25,10 +25,7 @@ export default {
 	data: function() {
 		return {
 			fields: [],
-			account: {
-				version: 1,
-				fields: {}
-			}
+			account: {}
 		};
 	},
 	methods: {
@@ -43,7 +40,8 @@ export default {
 		}
 	},
 	props: {
-		onSubmit: Function
+		onSubmit: Function,
+		initialAccount: Object
 	},
 	mounted() {
 		io.getSocket(socket => {
@@ -51,19 +49,26 @@ export default {
 
 			socket.emit("getAccountSchema", res => {
 				this.fields = res.schema.fields;
-				this.fields.forEach(field => {
-					let defaultObject = {};
-					field.fieldTypes.forEach(fieldType => {
-						if (fieldType.type === "text" || fieldType.type === "select") defaultObject[fieldType.fieldTypeId] = "";
-						else if (fieldType.type === "checkbox") defaultObject[fieldType.fieldTypeId] = false;
-					});
+				if (!this.initialAccount) {
+					this.account.fields = {};
+					this.account.version = res.schema.version;
 
-					this.account.fields[field.fieldId] = [];
+					this.fields.forEach(field => {
+						let defaultObject = {};
+						field.fieldTypes.forEach(fieldType => {
+							if (fieldType.type === "text" || fieldType.type === "select") defaultObject[fieldType.fieldTypeId] = "";
+							else if (fieldType.type === "checkbox") defaultObject[fieldType.fieldTypeId] = false;
+						});
+						
+						this.account.fields[field.fieldId] = [];
 
-					for(let i = 0; i < field.minEntries; i++) {
-						this.account.fields[field.fieldId].push(defaultObject);
-					}
-				});
+						for(let i = 0; i < field.minEntries; i++) {
+							this.account.fields[field.fieldId].push(defaultObject);
+						}
+					});
+				} else {
+					this.account = this.initialAccount;
+				}
 			});
 		});
 	}

frontend/vue/components/AccountsList.vue

@@ -2,11 +2,11 @@
 	<div class="accounts-list">
 		<div class="account" v-for="(account, accountIndex) in accounts">
 			Account
-			<button
-				@click="editAccount(accountIndex)"
+			<router-link
+				:to="`edit/${account._id}`"
 			>
 				Edit account
-			</button>
+			</router-link>
 		</div>
 	</div>
 </template>
@@ -27,22 +27,7 @@ export default {
 	mounted() {
 	},
 	methods: {
-		editAccount(index) {
-			console.log(this.accounts[index]);
-		}
-		/*addEntry() {
-			let emptyEntry = [];
-			this.fieldTypes.forEach((fieldType) => {
-				emptyEntry.push(null);
-			});
-			this.entries.push(emptyEntry);
-		},
-		removeEntry(index) {
-			this.entries.splice(index, 1);
-		},
-		toggleCheckbox(entryIndex, fieldIndex) {
-			this.$set(this.entries[entryIndex], fieldIndex, !this.entries[entryIndex][fieldIndex]);
-		}*/
+		
 	}
 };
 </script>

frontend/vue/pages/AddAccount.vue

@@ -27,8 +27,6 @@ export default {
 	mounted() {
 		io.getSocket(socket => {
 			this.socket = socket;
-
-			
 		});
 	}
 };

frontend/vue/pages/EditAccount.vue

@@ -0,0 +1,46 @@
+<template>
+	<account-form v-if="account.version" :onSubmit="onSubmit" :initialAccount="account"/>
+</template>
+
+<script>
+import AccountForm from '../components/AccountForm.vue';
+
+import io from "../../io.js";
+
+export default {
+	components: { AccountForm },
+	data: () => {
+		return {
+			account: {},
+			accountId: ""
+		}
+	},
+	methods: {
+		onSubmit(account) {
+			this.socket.emit("editAccount", account._id, account, (res) => {
+				console.log(res);
+				if (res.status === "success") {
+					this.$router.push("/")
+				}
+			});
+		}
+	},
+	mounted() {
+		this.accountId = this.$route.params.accountId;
+		io.getSocket(socket => {
+			this.socket = socket;
+
+			this.socket.emit("getAccount", this.accountId, res => {
+				console.log(res);
+				if (res.status === "success") {
+					this.account = res.account;
+				}
+			});
+		});
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+
+</style>

frontend/vue/pages/Homepage.vue

@@ -33,9 +33,6 @@ export default {
 				console.log(res);
 				alert(res.status);
 			});
-		},
-		addAccount() {
-			
 		}
 	},
 	mounted() {

frontend/vue/pages/NotFound.vue

@@ -0,0 +1,23 @@
+<template>
+	<h1>404</h1>
+</template>
+
+<script>
+export default {
+	data: () => {
+		return {
+			
+		}
+	},
+	methods: {
+		
+	},
+	mounted() {
+		
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+
+</style>

frontend/webpack.js

@@ -8,7 +8,8 @@ module.exports = {
 	devtool: "inline-source-map",
 	output: {
 		path: `${__dirname}/dist/build/`,
-		filename: "[name].[hash].js"
+		filename: "[name].[hash].js",
+		publicPath: "/"
 	},
 	plugins: [
 		new VueLoaderPlugin(),