vue_crud 0.2.0.3 → 0.2.0.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- 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
|
},
|