Extend dev env

vue-generators · Apr 28, 2016 · e7b4ba1 · e7b4ba1
1 parent 52b0775
commit e7b4ba1
Show file tree

Hide file tree

Showing 7 changed files with 301 additions and 80 deletions.
diff --git a/dev/app.vue b/dev/app.vue
@@ -1,85 +1,154 @@
 <template lang="jade">
-    .row
-      .col-md-6
-        vue-form-generator(:schema='schema', :model='model', :options='formOptions')
-      .col-md-6
-        pre(v-if='model') {{{ model | prettyJSON }}}   
+		.row
+			.col-md-10.col-md-offset-1
+				data-table(:rows="rows", :selected="selected", :select="selectRow")
+
+		.row(v-if="model")
+			.col-md-6
+				.buttons.text-center
+					button.btn.btn-default.new(@click="newModel") New
+					button.btn.btn-primary.save(@click="saveModel") Save
+					button.btn.btn-danger.delete(@click="deleteModel") Delete
+
+				vue-form-generator(:schema='schema', :model='model', :options='formOptions', :multiple="selected.length > 1", v-ref:form, :is-new-model="isNewModel")
+
+
+			.col-md-6
+				pre(v-if='model') {{{ model | prettyJSON }}}   
 
 </template>
 
 <script>
 	import Vue from "vue";
 	import VueFormGenerator from "../src";
+	import DataTable from "./dataTable.vue";
+
 	import Schema from "./schema";
+	import { users } from "./data";
+	import { filters } from "./utils";
+
+	import {each, isFunction, cloneDeep, merge} from 'lodash';	
 
 	export default {
 		components: {
-			"VueFormGenerator": VueFormGenerator.component
+			"VueFormGenerator": VueFormGenerator.component,
+			DataTable
 		},
 
-		filters: {
-			prettyJSON: function(json) {
-				if (json) {
-					json = JSON.stringify(json, undefined, 4);
-					json = json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
-					return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
-						var cls = 'number';
-						if (/^"/.test(match)) {
-							if (/:$/.test(match)) {
-								cls = 'key';
-							} else {
-								cls = 'string';
-							}
-						} else if (/true|false/.test(match)) {
-							cls = 'boolean';
-						} else if (/null/.test(match)) {
-							cls = 'null';
-						}
-						return '<span class="' + cls + '">' + match + '</span>';
-					});
-				}
-			}
-		},
+		filters: filters,
 
 		data() {
 			return {
-				model: {
-					id: 1,
-					name: "John Doe",
-					type: "personal",
-					password: "J0hnD03!x4",
-					skills: [
-						"Javascript",
-						"VueJS"
-					],
-					email: "[email protected]",
-					language: "en-GB",
-					age: 35,
-					dob: 348966000000,
-					rank: 6,
-					address: {
-						country: "United Kingdom",
-						city: "London",
-						street: "SW1A 5 Parliament St",
-						geo: {
-							lat: 51.501015, 
-							lng: -0.126005
-						}
-					},
-					role: "admin",
-					created: 1461834815864,
-					bio: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non lacus porttitor, pellentesque odio sit amet, hendrerit felis. In turpis mauris, viverra a lacinia nec, fringilla ut nisi. Curabitur rutrum mattis risus, at dapibus nisl tempus et. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus eget elementum lorem. Pellentesque tempor nec ante ut molestie. Suspendisse imperdiet tempus hendrerit. Morbi a dignissim augue.",
-					status: true,
-
-				},
+				isNewModel: false, 
+
+				selected: [],
+
+				model: null,
+
+				rows: users,
 
 				schema: Schema,
 
 				formOptions: {
 					validateAfterLoad: true,
-					validateAfterChanged: true
+					validateAfterChanged: true,
+					validateBeforeSave: true
+				}
+			}
+		},
+
+		methods: {
+			selectRow(event, row, add) {
+				if ( (add || (event && event.ctrlKey))) {
+					if (this.selected.indexOf(row) != -1)
+						this.selected.$remove(row);
+					else
+						this.selected.push(row);
+				} else {
+					this.clearSelection();
+					this.selected.push(row);
+				}
+				this.generateModel();
+			},
+
+			clearSelection() {
+				this.selected.splice(0);
+				this.generateModel();
+			},			
+
+			generateModel() {
+				if (this.selected.length == 1) {
+					this.model = cloneDeep(this.selected[0]);
 				}
+				else if (this.selected.length > 1) {
+					this.model = VueFormGenerator.schema.mergeMultiObjectFields(Schema, this.selected);
+				}
+				else
+					this.model = null;				
+			},
+
+			newModel() {
+				console.log("Create new model...");
+				this.selected.splice(0);
+				let newRow = VueFormGenerator.schema.createDefaultObject(Schema, { id: this.getNextID() })
+				this.isNewModel = true;
+				this.model = newRow;
+
+				let el = document.querySelector("div.form input:nth-child(1):not([readonly]):not(:disabled)");
+				if (el)
+					el.focus()
+
+			},			
+
+			saveModel() {
+				console.log("Save model...");
+				if (this.formOptions.validateBeforeSave === false ||  this.validate()) {
+					this.mergeModelValues();
+
+					if (this.isNewModel) {
+						this.rows.push(this.model);
+						this.selectRow(null, this.model, false);
+					}
+
+				} else {
+					// Validation error
+				}
+			},
+
+			mergeModelValues() {
+				let model = this.model;
+				if (model && this.selected.length > 0) {
+					each(this.selected, (row) => {
+						merge(row, model);
+					});
+				}
+			},
+
+			deleteModel() {
+				if (this.selected.length > 0) {
+					each(this.selected, (row) => {
+						this.rows.$remove(row);
+					})
+					this.clearSelection();
+				}
+			},
+
+			getNextID() {
+				let id = 0;
+
+				each(this.rows, (row) => {
+					if (row.id > id)
+						id = row.id;
+				});
+
+				return ++id;
+			},
+
+			validate()	{
+				return this.$refs.form.validate();
 			}
+
+			 
 		},
 		
 		ready() {
@@ -95,7 +164,7 @@
 
 	html {
 		font-family: "Open Sans";
-        font-size: 14px;
+				font-size: 14px;
 	}
 
 	* {
@@ -104,14 +173,14 @@
 		box-sizing: border-box;
 	}
 
-      pre {
-        overflow: auto;
-        
-        .string { color: #885800; }
-        .number { color: blue; }
-        .boolean { color: magenta; }
-        .null { color: red; }
-        .key { color: green; }    	
-      }
+	pre {
+		overflow: auto;
+		
+		.string { color: #885800; }
+		.number { color: blue; }
+		.boolean { color: magenta; }
+		.null { color: red; }
+		.key { color: green; }    	
+	}
 
 </style>
diff --git a/dev/data.js b/dev/data.js
@@ -0,0 +1,74 @@
+import faker from 'faker';
+import moment from 'moment';
+
+module.exports = {
+	roles: [
+		{ id: "admin", name: "Administrator"},
+		{ id: "moderator", name: "Moderator"},
+		{ id: "user", name: "Registered User"},
+		{ id: "visitor", name: "Visitor"}
+	],
+
+	skills: [ "HTML5", "Javascript", "CSS3", "CoffeeScript", "AngularJS", "ReactJS", "VueJS" ],
+
+	users: (function() {
+		let res = [];
+		for (let i = 0; i < 5; i++) {
+			let lang = faker.helpers.randomize(['en-US', 'en-GB', 'de', 'fr', 'it']);
+			//faker.locale = lang;
+			let user = faker.helpers.createCard();
+			user.id = i + 1;
+			user.type = faker.helpers.randomize(["personal", "business"]);
+			user.password = faker.internet.password(10);
+			user.bio = faker.lorem.paragraph();
+			let dob = faker.date.past(40, "1998-01-01");
+			user.dob = dob.valueOf();
+			user.age = moment().year() - moment(dob).year();
+			user.rank = faker.random.number({
+				min: 1,
+				max: 10
+			});
+			user.role = faker.helpers.randomize(module.exports.roles).id;
+
+
+			user.skills = [];
+			user.skills.push(faker.helpers.randomize(module.exports.skills));
+			user.skills.push(faker.helpers.randomize(module.exports.skills));
+
+			user.language = lang;
+			user.status = faker.helpers.randomize([true, false, true]);
+			user.created = faker.date.recent(30).valueOf();
+
+			if (user.type == "business") {
+				user.company = {
+					"name": faker.company.companyName(),
+					"catchPhrase": faker.company.catchPhrase(),
+					"bs": faker.company.bs(),
+					"website": faker.internet.domainName(),
+					"phone": faker.phone.phoneNumber(),
+					"address": {
+						"street": faker.address.streetAddress(),
+						"city": faker.address.city(),
+						"country": faker.address.country(),
+						"zipcode": faker.address.zipCode(),
+						"geo": {
+							"lat": faker.address.latitude(),
+							"lng": faker.address.longitude()
+						}
+					}
+
+				}
+			} else {
+				user.company = undefined;
+			}
+
+			user.posts = undefined;
+			user.accountHistory = undefined;
+
+			res.push(user);
+			console.log(user);
+		}
+		//console.log(res);
+		return res;
+	})()
+}
diff --git a/dev/dataTable.vue b/dev/dataTable.vue
@@ -0,0 +1,48 @@
+<template lang="jade">
+	table.table.table-hover.table-bordered
+		thead
+			tr
+				th ID
+				th Name
+				th E-mail
+				th Country
+
+		tbody
+			tr(v-for="row in rows", @click="select($event, row)", :class="{ active: isSelected(row) }")
+				td {{ row.id }}
+				td {{ row.name }}
+				td {{ row.email }}
+				td {{ row.address.country }}
+</template>
+
+<script>
+	import Vue from "vue";
+	import VueFormGenerator from "../src";
+	import Schema from "./schema";
+	import { users } from "./data";
+
+	export default {
+		props: [
+			"rows",
+			"selected",
+			"select"
+		],
+
+		methods: {
+			isSelected(row) {
+				return this.selected.indexOf(row) != -1;
+			}			
+		}
+	}
+</script>
+
+<style lang="sass" scoped>
+
+
+	.table {
+		tr {
+			cursor: pointer;
+		}
+	}
+
+</style>
diff --git a/dev/index.html b/dev/index.html
@@ -15,7 +15,8 @@
 	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.3.0/lodash.min.js"></script>
   </head>
   <body>
-    <app class="container-fluid"></app>
+    <div class="container-fluid"></div>
+    <app></app>
   	<script src="/app.js"></script>
   </body>
 </html>