Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 1102fc2

Browse files
author
Lionel Bijaoui
committed
[wip] modification to work with vuejs 2.0.
1 parent 0dd2b92 commit 1102fc2

File tree

4 files changed

+98
-93
lines changed

4 files changed

+98
-93
lines changed

‎app.vue

Lines changed: 54 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,27 @@
1-
<template lang="jade">
2-
.row
3-
.col-md-10.col-md-offset-1
4-
data-table(:rows="rows", :selected="selected", :select="selectRow")
5-
6-
.row(v-show="model")
7-
.col-md-5.col-md-offset-1
8-
.control-buttons.text-center
9-
button.btn.btn-default.new(@click="newModel")
10-
i.fa.fa-plus
11-
| New
12-
button.btn.btn-primary.save(@click="saveModel")
13-
i.fa.fa-floppy-o
14-
| Save
15-
i.fa.fa-warning(v-if="showWarning()")
16-
button.btn.btn-danger.delete(@click="deleteModel")
17-
i.fa.fa-trash
18-
| Delete
19-
20-
.errors.text-center
21-
div.alert.alert-danger(v-for="item in validationErrors", track-by="$index") {{ item.field.label}}:
22-
strong {{ item.error }}
23-
24-
vue-form-generator(:schema='schema', :model='model', :options='formOptions', :multiple="selected.length > 1", v-ref:form, :is-new-model="isNewModel")
25-
26-
27-
.col-md-6
28-
pre(v-if='model') {{{ model | prettyJSON }}}
1+
<template>
2+
<div>
3+
<div class="row">
4+
<div class="col-md-10 col-md-offset-1">
5+
<data-table :rows="rows" :selected="selected" :select="selectRow"></data-table>
6+
</div>
7+
</div>
8+
<div v-show="model" class="row">
9+
<div class="col-md-5 col-md-offset-1">
10+
<div class="control-buttons text-center">
11+
<button @click="newModel" class="btn btn-default new"> <i class="fa fa-plus"></i>New</button>
12+
<button @click="saveModel" class="btn btn-primary save"> <i class="fa fa-floppy-o"></i>Save<i v-if="showWarning()" class="fa fa-warning"></i></button>
13+
<button @click="deleteModel" class="btn btn-danger delete"> <i class="fa fa-trash"></i>Delete</button>
14+
</div>
15+
<div class="errors text-center">
16+
<div v-for="item in validationErrors" track-by="$index" class="alert alert-danger">{{ item.field.label}}: <strong>{{ item.error }}</strong></div>
17+
</div>
18+
<vue-form-generator :schema="schema" :model="model" :options="formOptions" :multiple="selected.length > 1" ref="form" :is-new-model="isNewModel" @model-updated="modelUpdated"></vue-form-generator>
19+
</div>
20+
<div class="col-md-6">
21+
<pre v-if="model" v-html="prettyModel"></pre>
22+
</div>
23+
</div>
24+
</div>
2925

3026
</template>
3127

@@ -82,6 +78,9 @@
8278
return this.$refs.form.errors;
8379
8480
return [];
81+
},
82+
prettyModel(){
83+
return filters.prettyJSON(this.model);
8584
}
8685
},
8786
@@ -95,10 +94,12 @@
9594
selectRow(event, row, add) {
9695
this.isNewModel = false;
9796
if ( (add || (event && event.ctrlKey))) {
98-
if (this.selected.indexOf(row) != -1)
99-
this.selected.$remove(row);
100-
else
97+
if (this.selected.indexOf(row) != -1){
98+
var index = this.selected.indexOf(row);
99+
this.selected.splice(index, 1);
100+
} else {
101101
this.selected.push(row);
102+
}
102103
} else {
103104
this.clearSelection();
104105
this.selected.push(row);
@@ -114,12 +115,11 @@
114115
generateModel() {
115116
if (this.selected.length == 1) {
116117
this.model = cloneDeep(this.selected[0]);
117-
}
118-
else if (this.selected.length > 1) {
118+
} else if (this.selected.length > 1) {
119119
this.model = VueFormGenerator.schema.mergeMultiObjectFields(Schema, this.selected);
120-
}
121-
else
120+
} else {
122121
this.model = null;
122+
}
123123
},
124124
125125
newModel() {
@@ -146,6 +146,7 @@
146146
}
147147
148148
} else {
149+
console.warn("Error saving model...");
149150
// Validation error
150151
}
151152
},
@@ -162,7 +163,8 @@
162163
deleteModel() {
163164
if (this.selected.length > 0) {
164165
each(this.selected, (row) => {
165-
this.rows.$remove(row);
166+
let index = this.rows.indexOf(row);
167+
this.rows.splice(index, 1)
166168
})
167169
this.clearSelection();
168170
}
@@ -180,22 +182,30 @@
180182
},
181183
182184
validate() {
185+
console.log("validate", this.$refs.form, this.$refs.form.validate());
183186
return this.$refs.form.validate();
187+
},
188+
189+
modelUpdated(newVal, schema) {
190+
console.log("main model has updated", newVal, schema);
191+
// this.model[schema] = newVal;
184192
}
185193
186194
187195
},
188196
189-
ready() {
190-
window.app = this;
197+
mounted() {
198+
this.$nextTick(function () {
199+
window.app = this;
191200
192-
if (users.length > 0) {
193-
this.selectRow(null, fakerator.random.arrayElement(users));
194-
}
201+
if (users.length > 0) {
202+
this.selectRow(null, fakerator.random.arrayElement(users));
203+
}
195204
196-
// Localize validate errors
197-
VueFormGenerator.validators.resources.fieldIsRequired = "Ezt a mezőt kötelező kitölteni!";
198-
VueFormGenerator.validators.resources.textTooSmall = "A szöveg túl rövid! Jelenleg: {0}, minimum: {1}";
205+
// Localize validate errors
206+
// VueFormGenerator.validators.resources.fieldIsRequired = "Ezt a mezőt kötelező kitölteni!";
207+
// VueFormGenerator.validators.resources.textTooSmall = "A szöveg túl rövid! Jelenleg: {0}, minimum: {1}";
208+
})
199209
}
200210
}
201211

‎index.html

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -3,39 +3,39 @@
33
<head>
44
<meta charset="utf-8">
55
<title>vue-form-generator development</title>
6-
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.1/css/font-awesome.css">
7-
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css">
8-
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/css/bootstrap-select.min.css">
9-
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.css">
6+
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css">
7+
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css">
8+
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.11.2/css/bootstrap-select.min.css">
9+
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.43/css/bootstrap-datetimepicker.css">
1010
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/spectrum/1.8.0/spectrum.css">
1111
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.1.4/css/ion.rangeSlider.css">
1212
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.1.4/css/ion.rangeSlider.skinHTML5.css">
13-
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/8.5.1/nouislider.min.css">
13+
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/9.0.0/nouislider.min.css">
1414
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/pikaday/1.4.0/css/pikaday.min.css">
1515

1616

17-
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.js"></script>
18-
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script>
19-
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.3.0/lodash.min.js"></script>
17+
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.js"></script>
18+
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js"></script>
19+
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.16.4/lodash.min.js"></script>
2020
<!-- jQuery dependent -->
21-
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.js"></script>
22-
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/bootstrap-select.min.js"></script>
23-
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
21+
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
22+
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.11.2/js/bootstrap-select.min.js"></script>
23+
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.43/js/bootstrap-datetimepicker.min.js"></script>
2424
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/spectrum/1.8.0/spectrum.js"></script>
2525
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.maskedinput/1.4.1/jquery.maskedinput.js"></script>
2626
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.1.4/js/ion.rangeSlider.js"></script>
2727
<!-- Vanilla libs -->
28-
<script type="text/javascript" src="https://rawgit.com/monterail/vue-multiselect/master/lib/vue-multiselect.min.js"></script>
28+
<script type="text/javascript" src="https://rawgit.com/monterail/vue-multiselect/2.0/lib/vue-multiselect.min.js"></script>
2929
<script type="text/javascript" src="https://rawgit.com/nosir/cleave.js/master/dist/cleave.min.js"></script>
3030
<script type="text/javascript" src="https://nosir.github.io/cleave.js/lib/cleave-phone.i18n.js"></script>
31-
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/8.5.1/nouislider.js"></script>
31+
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/9.0.0/nouislider.js"></script>
3232
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pikaday/1.4.0/pikaday.min.js"></script>
3333
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCEz-sX9bRJorDS-D_JL0JkZVZe2gzoUMw&amp;libraries=places"></script>
3434

3535
</head>
3636
<body>
3737
<div class="container-fluid"></div>
38-
<app></app>
38+
<divid="app"></div>
3939
<script src="/app.js"></script>
4040
</body>
4141
</html>

‎main.js

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
11
/* global Vue */
2-
$(function() {
3-
let App = require("./App.vue");
42

5-
let app = new Vue({
6-
el: "body",
7-
components: {
8-
App
9-
}
10-
});
11-
});
3+
// var App = require('./app.vue');
4+
// $(function() {
5+
// App.$mount('#app');
6+
// });
7+
8+
import Vue from 'vue';
9+
import App from './app.vue';
10+
11+
new Vue({
12+
...App
13+
}).$mount('#app');

‎schema.js

Lines changed: 19 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -158,55 +158,48 @@ module.exports = {
158158
label: "Search USELESS",
159159
model: "search",
160160
placeholder: "Entrez un mot-clef",
161-
styleClasses: "half-width",
162-
visible(model){return model.checkbox}
161+
styleClasses: "half-width"
163162
},
164163
{
165164
type: "input",
166165
inputType: "radio",
167166
label: "radio USELESS",
168167
model: "radio",
169-
styleClasses: "half-width",
170-
visible(model){return model.checkbox}
168+
styleClasses: "half-width"
171169
},
172170
{
173171
type: "input",
174172
inputType: "file",
175173
label: "File USELESS",
176-
model: "file",
177-
visible(model){return model.checkbox}
174+
model: "file"
178175
},
179176
{
180177
type: "input",
181178
inputType: "image",
182179
label: "Image USELESS",
183180
model: "image",
184-
styleClasses: "half-width",
185-
visible(model){return model.checkbox}
181+
styleClasses: "half-width"
186182
},
187183
{
188184
type: "input",
189185
inputType: "button",
190186
label: "Button USELESS",
191187
model: "button",
192-
styleClasses: "half-width",
193-
visible(model){return model.checkbox}
188+
styleClasses: "half-width"
194189
},
195190
{
196191
type: "input",
197192
inputType: "reset",
198193
label: "Reset USELESS",
199194
model: "reset",
200-
styleClasses: "half-width",
201-
visible(model){return model.checkbox}
195+
styleClasses: "half-width"
202196
},
203197
{
204198
type: "input",
205199
inputType: "submit",
206200
label: "Submit USELESS",
207201
model: "submit",
208-
styleClasses: "half-width",
209-
visible(model){return model.checkbox}
202+
styleClasses: "half-width"
210203
},
211204

212205
/**************/
@@ -415,18 +408,18 @@ module.exports = {
415408
styleClasses: ["half-width", "first"],
416409
validator: validators.required
417410
},
418-
{
419-
type: "selectEx",
420-
label: "Country (selectEx field)",
421-
model: "address.country",
422-
multi: true,
423-
required: true,
424-
values: ["United Kingdom", "France", "Germany"],
425-
//default: "United Kingdom",
426-
multiSelect: false,
427-
selectOptions: {
428-
// https://silviomoreto.github.io/bootstrap-select/options/
429-
liveSearch: true,
411+
// {
412+
// type: "selectEx",
413+
// label: "Country (selectEx field)",
414+
// model: "address.country",
415+
// multi: true,
416+
// required: true,
417+
// values: ["United Kingdom", "France", "Germany"],
418+
// //default: "United Kingdom",
419+
// multiSelect: false,
420+
// selectOptions: {
421+
// // https://silviomoreto.github.io/bootstrap-select/options/
422+
// liveSearch: true,
430423
size: 10,
431424
noneSelectedText: "Nincs kijelölve"
432425
},

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /