feat: implement formvuelatte

common/portfolio.formSchema.js

@@ -0,0 +1,113 @@
+import SchemaForm from 'formvuelatte';
+import { FormInput, FormTextArea } from '../management-ui/src/components/form/';
+
+export default {
+	schema: {
+		name: {
+			component: SchemaForm,
+			schema: {
+				firstName: {
+					component: FormInput,
+					label: "Your first name",
+					required: true
+				},
+				lastName: {
+					component: FormInput,
+					label: "Your last name",
+					required: true
+				},
+			}
+		},
+		profession: {
+			component: FormInput,
+			label: "Your profession",
+			reqiured: true
+		},
+		aboutMe: {
+			component: FormTextArea,
+			label: "A brief description of yourself",
+			required: true
+		},
+		profileImageUrl: {
+			component: FormInput,
+			label: "Web url to access the provided profile image"
+		},
+		contact: {
+			component: SchemaForm,
+			schema: {
+				email: {
+					component: FormInput,
+					label: "Public email address",
+					config: {
+						type: "email"
+					}
+				},
+				telephone: {
+					component: FormInput,
+					label: "Public telephone number"
+				}
+			}
+		},
+		externalProfiles: {
+			component: SchemaForm,
+			schema: {
+				github: {
+					component: FormInput,
+					label: "Github profile name"
+				},
+				linkedIn: {
+					component: FormInput,
+					label: "LinkedIn profile name"
+				},
+				stackOverflow: {
+					component: FormInput,
+					label: "Stack Overflow profile name"
+				}
+			}
+		},
+		education: {
+			component: SchemaForm,
+			schema: {
+				institution: {
+					component: FormInput,
+					label: "Name of the education establishment",
+					required: true
+				},
+				date: {
+					component: FormInput,
+					label: "When the institution was attended",
+					required: true
+				},
+				qualifications: {
+					component: FormInput,
+					label: "Qualification achieved at the instution",
+					required: true
+				}
+			}
+		},
+		experience: {
+			component: SchemaForm,
+			schema: {
+				organisation: {
+					component: FormInput,
+					label: "Name of the organisation",
+					required: true
+				},
+				date: {
+					component: FormInput,
+					label: "When work was done with the organisation",
+					required: true
+				},
+				description: {
+					component: FormInput,
+					label: "Brief description of the role",
+					required: true
+				},
+				projects: {
+					component: FormInput,
+					label: "Projects worked on at the organisation"
+				}
+			}
+		}
+	}
+}

management-ui/package.json

@@ -12,9 +12,9 @@
     "buefy": "^0.7.7",
     "core-js": "^2.6.5",
     "firebase": "^6.1.0",
+    "formvuelatte": "^0.2.3",
     "vue": "^2.6.10",
     "vue-icon": "^2.1.1",
-    "vue-json-schema-form": "^1.0.4",
     "vue-router": "^3.0.3",
     "vue-toasted": "^1.1.27",
     "vuex": "^3.0.1",

management-ui/src/components/form/FormInput.vue

@@ -0,0 +1,23 @@
+<template>
+	<b-form-input :value="value"
+    @input="onInput($event.target.value)" />
+</template>
+
+<script>
+import { FormMixin } from 'formvuelatte';
+
+export default {
+	mixins: { FormMixin },
+	props: {
+		value: {
+			type: String,
+			required: true
+		}
+	},
+	methods: {
+		onInput(data) {
+			this.$emit('input', data);
+		}
+	}
+};
+</script>

management-ui/src/components/form/FormTextArea.vue

@@ -0,0 +1,23 @@
+<template>
+	<b-form-textarea :value="value"
+    @input="onInput($event.target.value)" />
+</template>
+
+<script>
+import { FormMixin } from 'formvuelatte';
+
+export default {
+	mixins: { FormMixin },
+	props: {
+		value: {
+			type: String,
+			required: true
+		}
+	},
+	methods: {
+		onInput(data) {
+			this.$emit('input', data);
+		}
+	}
+};
+</script>

management-ui/src/components/form/index.js

@@ -0,0 +1,15 @@
+import FormInput from './FormInput.vue';
+import FormTextArea from './FormTextArea.vue';
+
+const components = [
+	{
+		name: 'form-input',
+		component: FormInput
+	},
+	{
+		name: 'form-text-area',
+		component: FormTextArea
+	}
+];
+
+export default components;

management-ui/src/containers/portfolio/Edit.vue

@@ -7,16 +7,19 @@
 			<b-btn variant="info" v-text="'detail'"/>
 		</router-link>
 
-		<schema-form v-if="portfolio" :schema="portfolioSchema" v-model="formData" @submit="onSubmitClick"/>
+		<SchemaForm v-if="portfolio" :schema="formSchema" v-model="formData" @submit="onSubmitClick"/>
 
 	</section>
 </template>
 
 <script>
 import { mapActions, mapGetters } from 'vuex';
+import { SchemaForm } from 'formvuelatte';
 import portfolioSchema from '../../../../common/portfolio.schema.json';
+import portfolioFormSchema from '../../../../common/portfolio.formSchema.js';
 
 export default {
+	components: { SchemaForm },
 	data() {
 		return {
 			portfolioSchema,
@@ -26,7 +29,10 @@ export default {
 	computed: {
 		...mapGetters({
 			portfolio: 'portfolio/portfolio'
-		})
+		}),
+		formSchema() {
+			return portfolioFormSchema;
+		}
 	},
 	methods: {
 		...mapActions({

management-ui/src/main.js

@@ -2,7 +2,7 @@ import Vue from 'vue';
 import BootstrapVue from 'bootstrap-vue';
 import VueIcon from 'vue-icon';
 import VueToasted from 'vue-toasted';
-import VueJsonSchemaForm from 'vue-json-schema-form';
+import FormVueLatte from 'formvuelatte';
 import Buefy from 'buefy';
 import 'buefy/dist/buefy.css';
 import App from './App.vue';
@@ -13,7 +13,7 @@ Vue.config.productionTip = false;
 Vue.use(BootstrapVue);
 Vue.use(VueIcon, 'v-icon');
 Vue.use(VueToasted);
-Vue.use(VueJsonSchemaForm);
+Vue.use(FormVueLatte);
 Vue.use(Buefy);
 
 new Vue({