|
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, index) 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> |
29 | 25 |
|
30 | 26 | </template> |
31 | 27 |
|
32 | 28 | <script> |
33 | 29 | import Vue from "vue"; |
34 | | - import VueFormGenerator from "../src"; |
| 30 | + import VueFormGenerator from "../../src"; |
35 | 31 | import DataTable from "./dataTable.vue"; |
36 | 32 | import Fakerator from "fakerator"; |
37 | 33 |
|
|
82 | 78 | return this.$refs.form.errors; |
83 | 79 |
|
84 | 80 | return []; |
| 81 | + }, |
| 82 | + prettyModel(){ |
| 83 | + return filters.prettyJSON(this.model); |
85 | 84 | } |
86 | 85 | }, |
87 | 86 |
|
|
95 | 94 | selectRow(event, row, add) { |
96 | 95 | this.isNewModel = false; |
97 | 96 | 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 { |
101 | 101 | this.selected.push(row); |
| 102 | + } |
102 | 103 | } else { |
103 | 104 | this.clearSelection(); |
104 | 105 | this.selected.push(row); |
|
114 | 115 | generateModel() { |
115 | 116 | if (this.selected.length == 1) { |
116 | 117 | this.model = cloneDeep(this.selected[0]); |
117 | | - } |
118 | | - else if (this.selected.length > 1) { |
| 118 | + } else if (this.selected.length > 1) { |
119 | 119 | this.model = VueFormGenerator.schema.mergeMultiObjectFields(Schema, this.selected); |
120 | | - } |
121 | | - else |
| 120 | + } else { |
122 | 121 | this.model = null; |
| 122 | + } |
123 | 123 | }, |
124 | 124 |
|
125 | 125 | newModel() { |
|
146 | 146 | } |
147 | 147 |
|
148 | 148 | } else { |
| 149 | + console.warn("Error saving model..."); |
149 | 150 | // Validation error |
150 | 151 | } |
151 | 152 | }, |
|
162 | 163 | deleteModel() { |
163 | 164 | if (this.selected.length > 0) { |
164 | 165 | each(this.selected, (row) => { |
165 | | - this.rows.$remove(row); |
| 166 | + let index = this.rows.indexOf(row); |
| 167 | + this.rows.splice(index, 1) |
166 | 168 | }) |
167 | 169 | this.clearSelection(); |
168 | 170 | } |
|
180 | 182 | }, |
181 | 183 |
|
182 | 184 | validate() { |
| 185 | + console.log("validate", this.$refs.form, this.$refs.form.validate()); |
183 | 186 | 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; |
184 | 192 | } |
185 | 193 |
|
186 | 194 | |
187 | 195 | }, |
188 | 196 | |
189 | | - ready() { |
190 | | - window.app = this; |
| 197 | + mounted() { |
| 198 | + this.$nextTick(function () { |
| 199 | + window.app = this; |
191 | 200 |
|
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 | + } |
195 | 204 |
|
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 | + }) |
199 | 209 | } |
200 | 210 | } |
201 | 211 |
|
|
0 commit comments