feat: added ObjectViewer and replaced account/convert schema viewers with it

frontend/vue/components/ObjectItem.vue

@@ -0,0 +1,72 @@
+<template>
+	<div @click.stop="toggle()" class="object-container" :class="{ 'toggled-off': toggledOff }">
+		<div v-if="isObject(item) && !toggledOff">
+			<p v-for="(value, name) in item">
+				<b>{{ name }}</b>: 
+				<object-item :item="value" v-if="isArray(value) || isObject(value)"/>
+				<span v-else>{{ value }}</span>
+			</p>
+		</div>
+
+		<div v-if="isArray(item) && !toggledOff">
+			<p v-for="(value, index) in item">
+				<b>{{ index }}</b>
+				<object-item :item="value" v-if="isArray(value) || isObject(value)"/>
+				<span v-else>{{ value }}</span>
+			</p>
+		</div>
+	</div>
+</template>
+
+<script>
+import ObjectItem from './ObjectItem.vue';
+
+export default {
+	components: { ObjectItem },
+	name: "ObjectItem",
+	data: () => {
+		return {
+			toggledOff: false
+		}
+	},
+	computed: {
+		
+	},
+	props: {
+		item: [Object, Array]
+	},
+	methods: {
+		isObject(item) {
+			return typeof item === "object" && item !== null && !Array.isArray(item);
+		},
+		isArray(item) {
+			return Array.isArray(item);
+		},
+		toggle() {
+			this.toggledOff = !this.toggledOff;
+		}
+	},
+	mounted() {
+		
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+.object-container {
+	padding-left: 25px;
+	border: 1px solid black;
+	margin-right: -1px;
+	margin-bottom: -1px;
+
+	&.toggled-off {
+		padding: 10px;
+		
+		&::before {
+			content: "Click to show";
+		}
+	}
+}
+
+
+</style>

frontend/vue/components/ObjectViewer.vue

@@ -0,0 +1,34 @@
+<template>
+	<div>
+		<object-item :item="object"/>
+	</div>
+</template>
+
+<script>
+import ObjectItem from '../components/ObjectItem.vue';
+
+export default {
+	components: { ObjectItem },
+	data: () => {
+		return {
+			
+		}
+	},
+	computed: {
+		
+	},
+	props: {
+		object: Object
+	},
+	methods: {
+		
+	},
+	mounted() {
+		
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+
+</style>

frontend/vue/pages/ViewAccountSchema.vue

@@ -3,34 +3,7 @@
 		<h1>View schema</h1>
 		<hr/>
 		<br/>
-		<p><b>Name</b>: {{ schema.name }}</p>
-		<p><b>Description</b>: {{ schema.description }}</p>
-		<p><b>Version</b>: v{{ schema.version }}</p>
-		<p><b>Fields</b>: </p>
-		<div class="fields-container">
-			<div v-for="field in schema.fields" class="field-item">
-				<p><b>Field ID</b>: {{ field.fieldId }}</p>
-				<p><b>Name</b>: {{ field.name }}</p>
-				<p><b>Min entries</b>: {{ field.minEntries }}</p>
-				<p><b>Max entries</b>: {{ field.maxEntries }}</p>
-				<p><b>Field types</b>:</p>
-				<div class="field-types-container">
-					<div v-for="fieldType in field.fieldTypes" class="field-type-item">
-						<p><b>Field type ID</b>: {{ fieldType.fieldTypeId }}</p>
-						<p><b>Type</b>: {{ fieldType.type }}</p>
-						<p><b>Fill</b>: {{ fieldType.fill }}</p>
-						<p v-if="fieldType.type === 'select'"><b>Options</b>: </p>
-						<div v-if="fieldType.type === 'select'">
-							<div v-for="option in fieldType.options" class="option-item">
-								<p><b>Text</b>: {{ option.text }}</p>
-								<p><b>Value</b>: {{ option.value }}</p>
-							</div>
-						</div>
-					</div>
-				</div>
-				
-			</div>
-		</div>
+		<object-viewer :object="schema"/>
 		<br/>
 		<br/>
 		<button class="button" @click="removeSchema()">Remove schema</button>
@@ -38,10 +11,12 @@
 </template>
 
 <script>
+import ObjectViewer from '../components/ObjectViewer.vue';
+
 import io from "../../io.js";
 
 export default {
-	components: {},
+	components: { ObjectViewer },
 	data: () => {
 		return {
 			schema: null

frontend/vue/pages/ViewConvertSchema.vue

@@ -3,14 +3,7 @@
 		<h1>View schema</h1>
 		<hr/>
 		<br/>
-		<p><b>Version from</b>: {{ schema.versionFrom }}</p>
-		<p><b>Version to</b>: {{ schema.versionTo }}</p>
-		<p><b>Changes</b>: </p>
-		<div class="changes-container">
-			<div v-for="(key, value) in schema.changes" class="change-item">
-				<p><b>{{ key }}</b>: {{ value }}</p>
-			</div>
-		</div>
+		<object-viewer :object="schema"/>		
 		<br/>
 		<br/>
 		<button class="button" @click="removeSchema()">Remove schema</button>
@@ -18,10 +11,12 @@
 </template>
 
 <script>
+import ObjectViewer from '../components/ObjectViewer.vue';
+
 import io from "../../io.js";
 
 export default {
-	components: {},
+	components: { ObjectViewer },
 	data: () => {
 		return {
 			schema: null
@@ -45,9 +40,6 @@ export default {
 			this.socket.emit("convertSchema.getById", this.schemaId, res => {
 				if (res.status === "success") {
 					this.schema = res.schema;
-					this.schema.changes = {
-						Test123: "test1232321"
-					}
 				}
 			});
 		});