Skip to content

Commit e7b4ba1

Browse files
icebobicebob
committed
Extend dev env
1 parent 52b0775 commit e7b4ba1

File tree

7 files changed

+301
-80
lines changed

7 files changed

+301
-80
lines changed

‎dev/app.vue

Lines changed: 138 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -1,85 +1,154 @@
11
<template lang="jade">
2-
.row
3-
.col-md-6
4-
vue-form-generator(:schema='schema', :model='model', :options='formOptions')
5-
.col-md-6
6-
pre(v-if='model') {{{ model | prettyJSON }}}
2+
.row
3+
.col-md-10.col-md-offset-1
4+
data-table(:rows="rows", :selected="selected", :select="selectRow")
5+
6+
.row(v-if="model")
7+
.col-md-6
8+
.buttons.text-center
9+
button.btn.btn-default.new(@click="newModel") New
10+
button.btn.btn-primary.save(@click="saveModel") Save
11+
button.btn.btn-danger.delete(@click="deleteModel") Delete
12+
13+
vue-form-generator(:schema='schema', :model='model', :options='formOptions', :multiple="selected.length > 1", v-ref:form, :is-new-model="isNewModel")
14+
15+
16+
.col-md-6
17+
pre(v-if='model') {{{ model | prettyJSON }}}
718

819
</template>
920

1021
<script>
1122
import Vue from "vue";
1223
import VueFormGenerator from "../src";
24+
import DataTable from "./dataTable.vue";
25+
1326
import Schema from "./schema";
27+
import { users } from "./data";
28+
import { filters } from "./utils";
29+
30+
import {each, isFunction, cloneDeep, merge} from 'lodash';
1431
1532
export default {
1633
components: {
17-
"VueFormGenerator": VueFormGenerator.component
34+
"VueFormGenerator": VueFormGenerator.component,
35+
DataTable
1836
},
1937
20-
filters: {
21-
prettyJSON: function(json) {
22-
if (json) {
23-
json = JSON.stringify(json, undefined, 4);
24-
json = json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
25-
return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
26-
var cls = 'number';
27-
if (/^"/.test(match)) {
28-
if (/:$/.test(match)) {
29-
cls = 'key';
30-
} else {
31-
cls = 'string';
32-
}
33-
} else if (/true|false/.test(match)) {
34-
cls = 'boolean';
35-
} else if (/null/.test(match)) {
36-
cls = 'null';
37-
}
38-
return '<span class="' + cls + '">' + match + '</span>';
39-
});
40-
}
41-
}
42-
},
38+
filters: filters,
4339
4440
data() {
4541
return {
46-
model: {
47-
id: 1,
48-
name: "John Doe",
49-
type: "personal",
50-
password: "J0hnD03!x4",
51-
skills: [
52-
"Javascript",
53-
"VueJS"
54-
],
55-
email: "john.doe@gmail.com",
56-
language: "en-GB",
57-
age: 35,
58-
dob: 348966000000,
59-
rank: 6,
60-
address: {
61-
country: "United Kingdom",
62-
city: "London",
63-
street: "SW1A 5 Parliament St",
64-
geo: {
65-
lat: 51.501015,
66-
lng: -0.126005
67-
}
68-
},
69-
role: "admin",
70-
created: 1461834815864,
71-
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.",
72-
status: true,
73-
74-
},
42+
isNewModel: false,
43+
44+
selected: [],
45+
46+
model: null,
47+
48+
rows: users,
7549
7650
schema: Schema,
7751
7852
formOptions: {
7953
validateAfterLoad: true,
80-
validateAfterChanged: true
54+
validateAfterChanged: true,
55+
validateBeforeSave: true
56+
}
57+
}
58+
},
59+
60+
methods: {
61+
selectRow(event, row, add) {
62+
if ( (add || (event && event.ctrlKey))) {
63+
if (this.selected.indexOf(row) != -1)
64+
this.selected.$remove(row);
65+
else
66+
this.selected.push(row);
67+
} else {
68+
this.clearSelection();
69+
this.selected.push(row);
70+
}
71+
this.generateModel();
72+
},
73+
74+
clearSelection() {
75+
this.selected.splice(0);
76+
this.generateModel();
77+
},
78+
79+
generateModel() {
80+
if (this.selected.length == 1) {
81+
this.model = cloneDeep(this.selected[0]);
8182
}
83+
else if (this.selected.length > 1) {
84+
this.model = VueFormGenerator.schema.mergeMultiObjectFields(Schema, this.selected);
85+
}
86+
else
87+
this.model = null;
88+
},
89+
90+
newModel() {
91+
console.log("Create new model...");
92+
this.selected.splice(0);
93+
let newRow = VueFormGenerator.schema.createDefaultObject(Schema, { id: this.getNextID() })
94+
this.isNewModel = true;
95+
this.model = newRow;
96+
97+
let el = document.querySelector("div.form input:nth-child(1):not([readonly]):not(:disabled)");
98+
if (el)
99+
el.focus()
100+
101+
},
102+
103+
saveModel() {
104+
console.log("Save model...");
105+
if (this.formOptions.validateBeforeSave === false || this.validate()) {
106+
this.mergeModelValues();
107+
108+
if (this.isNewModel) {
109+
this.rows.push(this.model);
110+
this.selectRow(null, this.model, false);
111+
}
112+
113+
} else {
114+
// Validation error
115+
}
116+
},
117+
118+
mergeModelValues() {
119+
let model = this.model;
120+
if (model && this.selected.length > 0) {
121+
each(this.selected, (row) => {
122+
merge(row, model);
123+
});
124+
}
125+
},
126+
127+
deleteModel() {
128+
if (this.selected.length > 0) {
129+
each(this.selected, (row) => {
130+
this.rows.$remove(row);
131+
})
132+
this.clearSelection();
133+
}
134+
},
135+
136+
getNextID() {
137+
let id = 0;
138+
139+
each(this.rows, (row) => {
140+
if (row.id > id)
141+
id = row.id;
142+
});
143+
144+
return ++id;
145+
},
146+
147+
validate() {
148+
return this.$refs.form.validate();
82149
}
150+
151+
83152
},
84153
85154
ready() {
@@ -95,7 +164,7 @@
95164
96165
html {
97166
font-family: "Open Sans";
98-
font-size: 14px;
167+
font-size: 14px;
99168
}
100169
101170
* {
@@ -104,14 +173,14 @@
104173
box-sizing: border-box;
105174
}
106175
107-
pre {
108-
overflow: auto;
109-
110-
.string { color: #885800; }
111-
.number { color: blue; }
112-
.boolean { color: magenta; }
113-
.null { color: red; }
114-
.key { color: green; }
115-
}
176+
pre {
177+
overflow: auto;
178+
179+
.string { color: #885800; }
180+
.number { color: blue; }
181+
.boolean { color: magenta; }
182+
.null { color: red; }
183+
.key { color: green; }
184+
}
116185
117186
</style>

‎dev/data.js

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
import faker from 'faker';
2+
import moment from 'moment';
3+
4+
module.exports = {
5+
roles: [
6+
{ id: "admin", name: "Administrator"},
7+
{ id: "moderator", name: "Moderator"},
8+
{ id: "user", name: "Registered User"},
9+
{ id: "visitor", name: "Visitor"}
10+
],
11+
12+
skills: [ "HTML5", "Javascript", "CSS3", "CoffeeScript", "AngularJS", "ReactJS", "VueJS" ],
13+
14+
users: (function() {
15+
let res = [];
16+
for (let i = 0; i < 5; i++) {
17+
let lang = faker.helpers.randomize(['en-US', 'en-GB', 'de', 'fr', 'it']);
18+
//faker.locale = lang;
19+
let user = faker.helpers.createCard();
20+
user.id = i + 1;
21+
user.type = faker.helpers.randomize(["personal", "business"]);
22+
user.password = faker.internet.password(10);
23+
user.bio = faker.lorem.paragraph();
24+
let dob = faker.date.past(40, "1998-01-01");
25+
user.dob = dob.valueOf();
26+
user.age = moment().year() - moment(dob).year();
27+
user.rank = faker.random.number({
28+
min: 1,
29+
max: 10
30+
});
31+
user.role = faker.helpers.randomize(module.exports.roles).id;
32+
33+
34+
user.skills = [];
35+
user.skills.push(faker.helpers.randomize(module.exports.skills));
36+
user.skills.push(faker.helpers.randomize(module.exports.skills));
37+
38+
user.language = lang;
39+
user.status = faker.helpers.randomize([true, false, true]);
40+
user.created = faker.date.recent(30).valueOf();
41+
42+
if (user.type == "business") {
43+
user.company = {
44+
"name": faker.company.companyName(),
45+
"catchPhrase": faker.company.catchPhrase(),
46+
"bs": faker.company.bs(),
47+
"website": faker.internet.domainName(),
48+
"phone": faker.phone.phoneNumber(),
49+
"address": {
50+
"street": faker.address.streetAddress(),
51+
"city": faker.address.city(),
52+
"country": faker.address.country(),
53+
"zipcode": faker.address.zipCode(),
54+
"geo": {
55+
"lat": faker.address.latitude(),
56+
"lng": faker.address.longitude()
57+
}
58+
}
59+
60+
}
61+
} else {
62+
user.company = undefined;
63+
}
64+
65+
user.posts = undefined;
66+
user.accountHistory = undefined;
67+
68+
res.push(user);
69+
console.log(user);
70+
}
71+
//console.log(res);
72+
return res;
73+
})()
74+
}

‎dev/dataTable.vue

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
<template lang="jade">
2+
table.table.table-hover.table-bordered
3+
thead
4+
tr
5+
th ID
6+
th Name
7+
th E-mail
8+
th Country
9+
10+
tbody
11+
tr(v-for="row in rows", @click="select($event, row)", :class="{ active: isSelected(row) }")
12+
td {{ row.id }}
13+
td {{ row.name }}
14+
td {{ row.email }}
15+
td {{ row.address.country }}
16+
</template>
17+
18+
<script>
19+
import Vue from "vue";
20+
import VueFormGenerator from "../src";
21+
import Schema from "./schema";
22+
import { users } from "./data";
23+
24+
export default {
25+
props: [
26+
"rows",
27+
"selected",
28+
"select"
29+
],
30+
31+
methods: {
32+
isSelected(row) {
33+
return this.selected.indexOf(row) != -1;
34+
}
35+
}
36+
}
37+
</script>
38+
39+
<style lang="sass" scoped>
40+
41+
42+
.table {
43+
tr {
44+
cursor: pointer;
45+
}
46+
}
47+
48+
</style>

‎dev/index.html

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,8 @@
1515
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.3.0/lodash.min.js"></script>
1616
</head>
1717
<body>
18-
<app class="container-fluid"></app>
18+
<div class="container-fluid"></div>
19+
<app></app>
1920
<script src="/app.js"></script>
2021
</body>
2122
</html>

0 commit comments

Comments
 (0)