vue_crud 0.2.0.3 → 0.2.0.4
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/lib/generators/vue_crud/templates/vue_crud.html +99 -53
- data/lib/vue_crud/version.rb +1 -1
- data/vendor/assets/javascripts/vue_crud.js +7 -1
- metadata +1 -1
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA1:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 71097ddc2018e4fcc3e8633bd2c7208ac9947d3c
|
|
4
|
+
data.tar.gz: f9651d796b1a6cd2144fea361c10dc74749129c9
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 538ae320dd2813ad31a432f39470d04d32e5a9f0f9a711e9d34f55b7b57403f8925b1ad399787248188563d013e4c9cb18bdeae3e106813adddc1ac80eb3e4d3
|
|
7
|
+
data.tar.gz: 6636f4982d50af544e98a0e75e84c182c0debfd1f59a772239300e663e7816e817d4b04e01aa435261a1ae42701f94229b08289490da10e635f7e36faaf48b23
|
|
@@ -5,12 +5,12 @@ if(sortable === undefined) var sortable = false;
|
|
|
5
5
|
if(info_url === undefined) var info_url = "http://localhost:3000/service_prototypes/info";
|
|
6
6
|
$(document).ready(function() {
|
|
7
7
|
var modal = $($('#modal').html());
|
|
8
|
-
var
|
|
8
|
+
var model = $($('#model-' + column_type).html());
|
|
9
9
|
|
|
10
|
-
|
|
11
|
-
$('#
|
|
10
|
+
model.find('.custom_model').html(
|
|
11
|
+
$('#custom_model').html()
|
|
12
12
|
);
|
|
13
|
-
|
|
13
|
+
model.find('.custom_action').html(
|
|
14
14
|
$('#custom_action').html()
|
|
15
15
|
);
|
|
16
16
|
modal.find('.modal_body_prepend').html(
|
|
@@ -27,7 +27,7 @@ $(document).ready(function() {
|
|
|
27
27
|
);
|
|
28
28
|
|
|
29
29
|
$('#modal').html(modal);
|
|
30
|
-
$('#
|
|
30
|
+
$('#model-' + column_type).html(model);
|
|
31
31
|
$('.vue_form').html(
|
|
32
32
|
$('#vue_form').html()
|
|
33
33
|
);
|
|
@@ -41,37 +41,48 @@ $(document).ready(function() {
|
|
|
41
41
|
$('.ui.checkbox').checkbox();
|
|
42
42
|
});
|
|
43
43
|
</script>
|
|
44
|
-
|
|
45
|
-
|
|
46
44
|
<div id="vue_crud">
|
|
47
45
|
<input type="text" name="progress" id="form-progress">
|
|
48
|
-
<h1 class="ui header">
|
|
49
|
-
{{ info.titles.title }}
|
|
46
|
+
<h1 class="ui center aligned icon header">
|
|
47
|
+
<i class="icon" :class="info.titles.icon"></i> {{ info.titles.title }}
|
|
50
48
|
<div class="sub header"><small>{{ info.titles.subtitle }}</small></div>
|
|
51
49
|
</h1>
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
<
|
|
55
|
-
<i class="
|
|
56
|
-
</
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
<i class="
|
|
65
|
-
|
|
66
|
-
|
|
50
|
+
|
|
51
|
+
<div class="ui secondary pointing menu">
|
|
52
|
+
<a class="item" onclick="history.back()">
|
|
53
|
+
<i class="arrow left icon"></i>返回
|
|
54
|
+
</a>
|
|
55
|
+
<a class="item" @click="addModel('創建')" v-if="!info.actions.create.disabled">
|
|
56
|
+
<i class="plus icon"></i>新增{{ info.titles.display_name }}
|
|
57
|
+
</a>
|
|
58
|
+
<a class="item active">
|
|
59
|
+
<i class="list icon"></i>列表
|
|
60
|
+
</a>
|
|
61
|
+
<a class="item">
|
|
62
|
+
<i class="browser icon"></i>紀錄
|
|
63
|
+
</a>
|
|
64
|
+
<div class="right menu">
|
|
65
|
+
<div class="item">
|
|
66
|
+
<!-- NOTE: Filter -->
|
|
67
|
+
<div class="ui left action right icon labeled input filter" :class="{loading: is_calculating}">
|
|
68
|
+
<a :href="default_url" class="ui button red" v-show="selected_attribute">重置</a>
|
|
69
|
+
<div class="ui basic floating dropdown button">
|
|
70
|
+
<div class="text">{{ selected_text || '請選擇欄位' }}</div>
|
|
71
|
+
<i class="dropdown icon"></i>
|
|
72
|
+
<div class="menu attribute_select">
|
|
73
|
+
<div class="item attribute_option" v-for="attribute in info.model_attributes" :target="attribute.name" :target_text="attribute.display_name" :class="{selected: selected_attribute == attribute.name, active: selected_attribute == attribute.name}">{{ attribute.display_name }}</div>
|
|
74
|
+
</div>
|
|
75
|
+
</div>
|
|
76
|
+
<input type="text" id="searchQuery" :placeholder="searchStatus" v-model="searchQuery">
|
|
77
|
+
<i class="icon search"></i>
|
|
78
|
+
</div>
|
|
67
79
|
</div>
|
|
68
80
|
</div>
|
|
69
|
-
<input type="text" id="searchQuery" :placeholder="searchStatus" v-model="searchQuery">
|
|
70
|
-
<i class="icon search"></i>
|
|
71
81
|
</div>
|
|
72
|
-
<
|
|
82
|
+
<br>
|
|
83
|
+
|
|
73
84
|
<!-- NOTE: Pagination -->
|
|
74
|
-
<div class="ui pagination menu" v-if="column_type == 'card'">
|
|
85
|
+
<div class="ui pagination menu" v-if="column_type == 'card' && totalPage > 1">
|
|
75
86
|
<a class="item" @click.prevent="setPage(currentPage-1)" :class="{'disabled': (currentPage == '1')}">
|
|
76
87
|
＜
|
|
77
88
|
</a>
|
|
@@ -82,10 +93,10 @@ $(document).ready(function() {
|
|
|
82
93
|
＞
|
|
83
94
|
</a>
|
|
84
95
|
</div>
|
|
85
|
-
<div class="ui divider" v-if="column_type == 'card'"></div>
|
|
86
|
-
<!-- NOTE:
|
|
96
|
+
<div class="ui divider" v-if="column_type == 'card' && totalPage > 1"></div>
|
|
97
|
+
<!-- NOTE: model -->
|
|
87
98
|
<div v-sortable class="ui three column grid" v-if="column_type == 'card'">
|
|
88
|
-
<
|
|
99
|
+
<model v-for="model in filteredModels" :original_model="model" :info="info" :selected_attribute="selected_attribute"></model>
|
|
89
100
|
</div>
|
|
90
101
|
|
|
91
102
|
<table class="ui celled selectable table" v-if="column_type == 'table'">
|
|
@@ -101,7 +112,7 @@ $(document).ready(function() {
|
|
|
101
112
|
</tr>
|
|
102
113
|
</thead>
|
|
103
114
|
<tbody v-sortable>
|
|
104
|
-
<tr is="
|
|
115
|
+
<tr is="model" v-for="model in filteredModels" :original_model="model" :info="info" :selected_attribute="selected_attribute">
|
|
105
116
|
</tr>
|
|
106
117
|
</tbody>
|
|
107
118
|
<tfoot>
|
|
@@ -153,10 +164,34 @@ $(document).ready(function() {
|
|
|
153
164
|
</div>
|
|
154
165
|
</div>
|
|
155
166
|
</script>
|
|
156
|
-
<script type="text/x-template" id="
|
|
167
|
+
<script type="text/x-template" id="model-table">
|
|
157
168
|
<tr :class="{'is_deleted': is_deleted}">
|
|
158
169
|
<td v-for="(attribute, i) in info.model_attributes" v-if="attribute.visible" :class="{'sort-here': i == 0, highlight: attribute.name == selected_attribute}">
|
|
159
|
-
<
|
|
170
|
+
<div v-if="attribute.display_type == 'token'">
|
|
171
|
+
<pre>{{ model[attribute.name] }}</pre>
|
|
172
|
+
</div>
|
|
173
|
+
|
|
174
|
+
<div v-else-if="attribute.display_type == 'boolean'">
|
|
175
|
+
{{ model[attribute.name] | boolean }}
|
|
176
|
+
</div>
|
|
177
|
+
|
|
178
|
+
<div v-else-if="attribute.display_type == 'email'">
|
|
179
|
+
<a :href="'mailto:' + model[attribute.name]" target="new">{{ model[attribute.name] }}</a>
|
|
180
|
+
</div>
|
|
181
|
+
|
|
182
|
+
<div v-else-if="attribute.display_type == 'img'">
|
|
183
|
+
<img :src="model[attribute.name]" />
|
|
184
|
+
</div>
|
|
185
|
+
|
|
186
|
+
<div v-else-if="attribute.display_type == 'text'">
|
|
187
|
+
<span v-html="model[attribute.name]"></span>
|
|
188
|
+
</div>
|
|
189
|
+
|
|
190
|
+
<div v-else>
|
|
191
|
+
{{ model[attribute.name] }}
|
|
192
|
+
</div>
|
|
193
|
+
<!--
|
|
194
|
+
<span v-if="attribute.display_type != 'img'">
|
|
160
195
|
<span v-if="attribute.input_type == 'textarea'" v-html="model[attribute.name]">
|
|
161
196
|
</span>
|
|
162
197
|
<span v-else>
|
|
@@ -165,7 +200,7 @@ $(document).ready(function() {
|
|
|
165
200
|
</span>
|
|
166
201
|
<span v-else>
|
|
167
202
|
<img :src="model[attribute.name]" />
|
|
168
|
-
</span>
|
|
203
|
+
</span> -->
|
|
169
204
|
</td>
|
|
170
205
|
<td style="position: relative;">
|
|
171
206
|
<a @click="restoreModel" onclick="return false" class="ui red right corner label" v-show="is_deleted" title="您已刪除，點擊復原">
|
|
@@ -183,13 +218,13 @@ $(document).ready(function() {
|
|
|
183
218
|
|
|
184
219
|
<!-- NOTE: Custom action -->
|
|
185
220
|
<div class="inline-block custom_action"></div>
|
|
186
|
-
<div class="ui animated fade blue button" @click="editModel('編輯')"
|
|
221
|
+
<div class="ui animated fade blue button" @click="editModel('編輯')" v-if="!info.actions.update.disabled">
|
|
187
222
|
<div class="visible content">編輯</div>
|
|
188
223
|
<div class="hidden content">
|
|
189
224
|
<i class="right edit icon"></i>
|
|
190
225
|
</div>
|
|
191
226
|
</div>
|
|
192
|
-
<div class="ui animated fade red button" @click="deleteModel" class="ui basic red button" v-show="!deleteMode"
|
|
227
|
+
<div class="ui animated fade red button" @click="deleteModel" class="ui basic red button" v-show="!deleteMode" v-if="!info.actions.delete.disabled">
|
|
193
228
|
<div class="visible content">刪除</div>
|
|
194
229
|
<div class="hidden content">
|
|
195
230
|
<i class="right trash icon"></i>
|
|
@@ -197,46 +232,50 @@ $(document).ready(function() {
|
|
|
197
232
|
</div>
|
|
198
233
|
</td>
|
|
199
234
|
<td :colspan="info.model_attributes.length + 1">
|
|
200
|
-
<!-- NOTE: Custom
|
|
201
|
-
<div class="
|
|
235
|
+
<!-- NOTE: Custom model -->
|
|
236
|
+
<div class="custom_model"></div>
|
|
202
237
|
</td>
|
|
203
238
|
</tr>
|
|
204
239
|
</script>
|
|
205
|
-
<script type="text/x-template" id="
|
|
240
|
+
<script type="text/x-template" id="model-card">
|
|
206
241
|
<div class="column">
|
|
207
242
|
<div class="ui fluid card sort-here">
|
|
208
243
|
<div class="content">
|
|
209
244
|
<div class="ui top attached label gray">{{ info.titles.display_name }}</div>
|
|
210
245
|
<div class="header">{{ model[info.titles.title_attribute] }}</div>
|
|
211
246
|
<div class="meta">創建於 {{ model[info.titles.created_at_attribute] | datetime }}</div>
|
|
212
|
-
<div class="ui horizontal divider" v-toggle><h3><i class="bar chart icon"></i
|
|
213
|
-
<div class="description attribute">
|
|
247
|
+
<div class="ui horizontal divider" v-toggle><h3><i class="bar chart icon"></i>欄位資料</h3></div>
|
|
248
|
+
<div class="description attribute" style="display: none;">
|
|
214
249
|
<div class="item" v-for="attribute in info.model_attributes" v-if="attribute.visible" :class="{highlight: attribute.name == selected_attribute}">
|
|
215
|
-
<div v-if="attribute.
|
|
250
|
+
<div v-if="attribute.display_type == 'token'">
|
|
216
251
|
<span class="display_name">{{ attribute.display_name }}：</span>
|
|
217
252
|
<pre>{{ model[attribute.name] }}</pre>
|
|
218
253
|
</div>
|
|
219
|
-
<div v-else-if="attribute.
|
|
254
|
+
<div v-else-if="attribute.display_type == 'boolean'">
|
|
220
255
|
<span class="display_name">{{ attribute.display_name }}：</span>
|
|
221
256
|
{{ model[attribute.name] | boolean }}
|
|
222
257
|
</div>
|
|
223
|
-
<div v-else-if="attribute.
|
|
258
|
+
<div v-else-if="attribute.display_type == 'email'">
|
|
224
259
|
<span class="display_name">{{ attribute.display_name }}：</span>
|
|
225
260
|
<a :href="'mailto:' + model[attribute.name]" target="new">{{ model[attribute.name] }}</a>
|
|
226
261
|
</div>
|
|
227
|
-
<div v-else-if="attribute.
|
|
262
|
+
<div v-else-if="attribute.display_type == 'img'">
|
|
228
263
|
<span class="display_name">{{ attribute.display_name }}：</span>
|
|
229
264
|
<img :src="model[attribute.name]" />
|
|
230
265
|
</div>
|
|
266
|
+
<div v-else-if="attribute.display_type == 'text'">
|
|
267
|
+
<span class="display_name">{{ attribute.display_name }}：</span>
|
|
268
|
+
<span v-html="model[attribute.name]"></span>
|
|
269
|
+
</div>
|
|
231
270
|
<div v-else>
|
|
232
271
|
<span class="display_name">{{ attribute.display_name }}：</span>
|
|
233
272
|
{{ model[attribute.name] }}
|
|
234
273
|
</div>
|
|
235
274
|
<div class="ui divider"></div>
|
|
236
275
|
</div>
|
|
237
|
-
<!-- NOTE: Custom
|
|
276
|
+
<!-- NOTE: Custom model -->
|
|
238
277
|
</div>
|
|
239
|
-
<div class="
|
|
278
|
+
<div class="custom_model"></div>
|
|
240
279
|
</div>
|
|
241
280
|
<div class="extra content">
|
|
242
281
|
<div class="ui red right ribbon label" v-show="is_deleted">您已刪除，點擊<a href="#" @click="restoreModel" onclick="return false" class="save_now">復原</a></div>
|
|
@@ -246,13 +285,13 @@ $(document).ready(function() {
|
|
|
246
285
|
<div class="ui divider"></div>
|
|
247
286
|
<!-- NOTE: Custom action -->
|
|
248
287
|
<div class="inline-block custom_action"></div>
|
|
249
|
-
<div class="ui animated fade blue button" @click="editModel('編輯')"
|
|
288
|
+
<div class="ui animated fade blue button" @click="editModel('編輯')" v-if="!info.actions.update.disabled">
|
|
250
289
|
<div class="visible content">編輯</div>
|
|
251
290
|
<div class="hidden content">
|
|
252
291
|
<i class="right edit icon"></i>
|
|
253
292
|
</div>
|
|
254
293
|
</div>
|
|
255
|
-
<div class="ui animated fade right floated red button" @click="deleteModel" class="ui basic red button" v-show="!deleteMode"
|
|
294
|
+
<div class="ui animated fade right floated red button" @click="deleteModel" class="ui basic red button" v-show="!deleteMode" v-if="!info.actions.delete.disabled">
|
|
256
295
|
<div class="visible content">刪除</div>
|
|
257
296
|
<div class="hidden content">
|
|
258
297
|
<i class="right trash icon"></i>
|
|
@@ -269,6 +308,7 @@ $(document).ready(function() {
|
|
|
269
308
|
<script type="text/x-template" id="vue_form">
|
|
270
309
|
<form class="ui form">
|
|
271
310
|
<div v-for="attribute in model_attributes" v-if="attribute.editable">
|
|
311
|
+
<!-- select -->
|
|
272
312
|
<div class="field" v-if="attribute.input_type == 'select'">
|
|
273
313
|
<label :for="'model_' + attribute.display_name">{{ attribute.display_name }}</label>
|
|
274
314
|
<select :id="'model_' + attribute.display_name" v-model="model[attribute.name]" class="ui fluid dropdown" :class="attribute.input_class">
|
|
@@ -280,6 +320,7 @@ $(document).ready(function() {
|
|
|
280
320
|
</span>
|
|
281
321
|
</div>
|
|
282
322
|
</div>
|
|
323
|
+
<!-- multiSelect -->
|
|
283
324
|
<div class="field" v-else-if="attribute.input_type == 'multiSelect'">
|
|
284
325
|
<label :for="'model_' + attribute.display_name">{{ attribute.display_name }}</label>
|
|
285
326
|
<select :id="'model_' + attribute.display_name" multiple v-model="model[attribute.name]" class="ui fluid dropdown" :class="attribute.input_class">
|
|
@@ -291,6 +332,7 @@ $(document).ready(function() {
|
|
|
291
332
|
</span>
|
|
292
333
|
</div>
|
|
293
334
|
</div>
|
|
335
|
+
<!-- selectInput -->
|
|
294
336
|
<div class="field" v-else-if="attribute.input_type == 'selectInput'">
|
|
295
337
|
<label :for="'model_' + attribute.display_name">{{ attribute.display_name }}</label>
|
|
296
338
|
<div class="ui grid">
|
|
@@ -309,6 +351,7 @@ $(document).ready(function() {
|
|
|
309
351
|
</span>
|
|
310
352
|
</div>
|
|
311
353
|
</div>
|
|
354
|
+
<!-- textarea -->
|
|
312
355
|
<div class="field" v-else-if="attribute.input_type == 'textarea'">
|
|
313
356
|
<label :for="'model_' + attribute.display_name">{{ attribute.display_name }}</label>
|
|
314
357
|
<textarea v-froala :attribute="attribute.name" :id="'model_' + attribute.display_name" v-model="model[attribute.name]" :class="attribute.input_class"></textarea>
|
|
@@ -318,9 +361,10 @@ $(document).ready(function() {
|
|
|
318
361
|
</span>
|
|
319
362
|
</div>
|
|
320
363
|
</div>
|
|
364
|
+
<!-- checkbox -->
|
|
321
365
|
<div class="field" v-else-if="attribute.input_type == 'checkbox'">
|
|
322
|
-
<div class="ui
|
|
323
|
-
<input type="checkbox" tabindex="0"
|
|
366
|
+
<div class="ui checkbox">
|
|
367
|
+
<input type="checkbox" tabindex="0" :id="'model_' + attribute.display_name" v-model="model[attribute.name]" :class="attribute.input_class">
|
|
324
368
|
<label>{{ attribute.display_name }}</label>
|
|
325
369
|
</div>
|
|
326
370
|
<div class="ui pointing red basic label" v-show="errors[attribute.name]">
|
|
@@ -329,6 +373,7 @@ $(document).ready(function() {
|
|
|
329
373
|
</span>
|
|
330
374
|
</div>
|
|
331
375
|
</div>
|
|
376
|
+
<!-- number -->
|
|
332
377
|
<div class="field" v-else-if="attribute.input_type == 'number'">
|
|
333
378
|
<label :for="'model_' + attribute.display_name">{{ attribute.display_name }}</label>
|
|
334
379
|
<input type="number" :id="'model_' + attribute.display_name" v-model="model[attribute.name]" :class="attribute.input_class" number>
|
|
@@ -338,9 +383,10 @@ $(document).ready(function() {
|
|
|
338
383
|
</span>
|
|
339
384
|
</div>
|
|
340
385
|
</div>
|
|
386
|
+
<!-- else -->
|
|
341
387
|
<div class="field" v-else>
|
|
342
388
|
<label :for="'model_' + attribute.display_name">{{ attribute.display_name }}</label>
|
|
343
|
-
<input
|
|
389
|
+
<input type="text" :id="'model_' + attribute.display_name" v-model="model[attribute.name]" :class="attribute.input_class">
|
|
344
390
|
<div class="ui pointing red basic label" v-show="errors[attribute.name]">
|
|
345
391
|
<span style="color: red" v-for="(error, index) in errors[attribute.name]">
|
|
346
392
|
<span v-if="index > 0">,</span> {{ error }}
|
data/lib/vue_crud/version.rb
CHANGED
|
@@ -374,6 +374,13 @@ function vueCRUD_init(params = {}) {
|
|
|
374
374
|
models: [],
|
|
375
375
|
model: {},
|
|
376
376
|
info: {
|
|
377
|
+
actions: {
|
|
378
|
+
index: {},
|
|
379
|
+
create: {},
|
|
380
|
+
read: {},
|
|
381
|
+
update: {},
|
|
382
|
+
delete: {}
|
|
383
|
+
},
|
|
377
384
|
url_prefix: '',
|
|
378
385
|
titles: {},
|
|
379
386
|
model_attributes: []
|
|
@@ -465,7 +472,6 @@ function vueCRUD_init(params = {}) {
|
|
|
465
472
|
data: obj_to_json(that.model),
|
|
466
473
|
url: urlParser(that.info.actions.create.url, that.model, that.info.actions.create.suffix),
|
|
467
474
|
beforeSend: function() {
|
|
468
|
-
console.log(obj_to_json(that.model));
|
|
469
475
|
event_hub.$emit('dimmerOn');
|
|
470
476
|
$('.progress-bar').css('width', '0');
|
|
471
477
|
},
|