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 CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA1:
3
- metadata.gz: fa7649e34ace82b2f070560a061948bbf1f964f0
4
- data.tar.gz: 39c905037c25eb6e932dababd1506ac30c0469c8
3
+ metadata.gz: 71097ddc2018e4fcc3e8633bd2c7208ac9947d3c
4
+ data.tar.gz: f9651d796b1a6cd2144fea361c10dc74749129c9
5
5
  SHA512:
6
- metadata.gz: 63dffe3f65609f8bcd478c29825d3bb139ed343092e3e1807ca1a7f547376986156eca0196a647405fd7544a2d09d8bfc6cf0ea7144a91549e4991259c760acd
7
- data.tar.gz: fc770a277eb7504f26a0e8c4ce86ac7a99fa6b8ddd019ab11836905802513b31db1b86cf6d1f01d0325c157996c10a5d95d3c96dc34880a4de00499059f528fc
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 models = $($('#models-' + column_type).html());
8
+ var model = $($('#model-' + column_type).html());
9
9
 
10
- models.find('.custom_models').html(
11
- $('#custom_models').html()
10
+ model.find('.custom_model').html(
11
+ $('#custom_model').html()
12
12
  );
13
- models.find('.custom_action').html(
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
- $('#models-' + column_type).html(models);
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
- <div class="ui animated fade green button" @click="addModel('創建')" tabindex="0">
53
- <div class="visible content">新增 {{ info.titles.display_name }}</div>
54
- <div class="hidden content">
55
- <i class="right plus icon"></i>
56
- </div>
57
- </div>
58
- <div class="ui divider"></div>
59
- <!-- NOTE: Filter -->
60
- <div class="ui left action right icon labeled input filter" :class="{loading: is_calculating}">
61
- <a :href="default_url" class="ui button red" v-show="selected_attribute">重置</a>
62
- <div class="ui basic floating dropdown button">
63
- <div class="text">{{ selected_text || '請選擇欄位' }}</div>
64
- <i class="dropdown icon"></i>
65
- <div class="menu attribute_select">
66
- <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>
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
- <div class="ui divider"></div>
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: models -->
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
- <models v-for="model in filteredModels" :original_model="model" :info="info" :selected_attribute="selected_attribute"></models>
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="models" v-for="model in filteredModels" :original_model="model" :info="info" :selected_attribute="selected_attribute">
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="models-table">
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
- <span v-if="attribute.input_type != 'img'">
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('編輯')" tabindex="0">
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" tabindex="0">
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 models -->
201
- <div class="custom_models"></div>
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="models-card">
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><span>點擊查看</span>欄位資料</h3></div>
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.input_type == 'token'">
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.input_type == 'checkbox'">
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.input_type == 'email'">
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.input_type == 'img'">
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 models -->
276
+ <!-- NOTE: Custom model -->
238
277
  </div>
239
- <div class="custom_models"></div>
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('編輯')" tabindex="0">
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" tabindex="0">
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 toggle checkbox">
323
- <input type="checkbox" tabindex="0" class="hidden" :id="'model_' + attribute.display_name" v-model="model[attribute.name]" :class="attribute.input_class">
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 :type="attribute.input_type" :id="'model_' + attribute.display_name" v-model="model[attribute.name]" :class="attribute.input_class">
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 }}
@@ -1,3 +1,3 @@
1
1
  module VueCrud
2
- VERSION = "0.2.0.3"
2
+ VERSION = "0.2.0.4"
3
3
  end
@@ -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
  },
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: vue_crud
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.2.0.3
4
+ version: 0.2.0.4
5
5
  platform: ruby
6
6
  authors:
7
7
  - Donald Chiang