vue_crud 0.1.2 → 0.1.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 194bf74eabdbe50c3be4df10d40f0804220a4bdc
-  data.tar.gz: eb51e54772412085745a4165fe78d7c8d5b997f9
+  metadata.gz: aca8b5b76490166baef0e5a1151e9386142ffc3b
+  data.tar.gz: 409941cd5b60b0f50127b2bc3b4c03068793821f
 SHA512:
-  metadata.gz: 8bc0a7ddadeb665995c6dc9d11871c522cb6fe677be9fac67ba70ea064518ab193fbaa483c9fd25dc85eaf69f0ec54e58e3c1b7aa70a0259849a1cc79d9b0f7b
-  data.tar.gz: a102632c6ee9e12b41551218c9568e42757d2c09fcafd27dd39534bebce8b646fd8b3f88472f0fdf6b60b36f899efca6ab4b0353002a79e59acb6abe741ef2b0
+  metadata.gz: 6e935c7200e37d4f8892408d83d8292802e3adea3c25cfdf17ee34c6f5f5cffefb37125dbcd73e92733d0fb162d2d18155dc43e96dd2fb41929859038661a3ac
+  data.tar.gz: 8fa29bba092322022135227752205aa1a27e58f1b0f43c12539f402fea0501d34798aa3a0e2b6f77c0ce752de3a47e5c680590b58908e267a8d52479f68ebded

data/lib/generators/vue_crud/templates/vue_crud.html

@@ -1,6 +1,8 @@
 <script type="text/javascript">
+if(column_type === undefined) var column_type = 'card';
+if(suffix === undefined) var suffix = '.json';
+if(countOfPage === undefined) var countOfPage = 9;
 $(document).ready(function() {
-    var column_type = 'card';
     $('.vue_form_for_new').html($('#vue_form').html());
     var models = $($('#models-' + column_type).html());
     models.find('.custom_models').html(
@@ -18,11 +20,11 @@ $(document).ready(function() {
     models.find('.custom_modal_action').html(
         $('#custom_modal_action').html()
     );
-
     $('#models-' + column_type).html(models);
     vue_init({
         column_type: column_type,
-        suffix: '.json'
+        suffix: suffix,
+        countOfPage: countOfPage
     });
     $('.filter .ui.dropdown').dropdown();
 });
@@ -75,6 +77,10 @@ $(document).ready(function() {
                 <th v-for="attribute in info.model_attributes" v-if="attribute.visible" :class="{highlight: attribute.model_prefix + '.' + attribute.name == model_prefix + '.' + selected_attribute}">
                     {{ attribute.display_name }}
                 </th>
+                <th>
+                    Action
+                </th>
+                <th></th>
             </tr>
         </thead>
         <tbody>
@@ -83,7 +89,7 @@ $(document).ready(function() {
         </tbody>
         <tfoot>
             <tr>
-                <th :colspan="info.model_attributes.length">
+                <th :colspan="info.model_attributes.length + 2">
                     <div class="ui right floated pagination menu">
                         <a class="item" @click.prevent="setPage(currentPage-1)" :class="{'disabled': (currentPage == '1')}">
                         ＜
@@ -118,17 +124,59 @@ $(document).ready(function() {
 <!-- NOTE: Templates -->
 <script type="text/x-template" id="models-table">
     <tr>
-      <!-- <td>
-        <div class="ui ribbon label">First</div>
-      </td> -->
-      <td v-for="attribute in info.model_attributes" v-if="attribute.visible" :class="{highlight: attribute.model_prefix + '.' + attribute.name == selected_attribute}">
-          <p v-if="attribute.model_prefix">
-              {{ model[attribute.model_prefix][attribute.name] }}
-          </p>
-          <p v-else>
-              {{ model[attribute.name] }}
-          </p>
-      </td>
+        <td v-for="attribute in info.model_attributes" v-if="attribute.visible" :class="{highlight: attribute.model_prefix + '.' + attribute.name == selected_attribute}">
+            <p v-if="attribute.model_prefix">
+                <span v-if="attribute.type != 'img'">
+                    {{ model[attribute.model_prefix][attribute.name] }}
+                </span>
+                <span v-else>
+                    <img :src="model[attribute.model_prefix][attribute.name]" />
+                </span>
+            </p>
+            <p v-else>
+                <span v-if="attribute.type != 'img'">
+                    {{ model[attribute.name] }}
+                </span>
+                <span v-else>
+                    <img :src="model[attribute.name]" />
+                </span>
+            </p>
+        </td>
+        <td style="position: relative;">
+            <div class="ui modal" :id="'editModal_' + model.id">
+                <div class="ui inverted dimmer">
+                    <div class="ui indeterminate text loader">Progressing</div>
+                </div>
+                <div class="header">Update {{ info.titles.title }}</div>
+                <div class="content">
+                    <!-- NOTE: Not customMode -->
+                    <div v-show="!customMode" class="vue_form_for_edit"></div>
+                    <!-- NOTE: Is customMode -->
+                    <!-- NOTE: Custom modal body -->
+                    <div v-show="customMode"><div class="custom_modal_body"></div></div>
+                </div>
+                <div class="actions">
+                    <button class="ui basic gray cancel button">Cancel</button>
+                    <button @click="updateModel" class="ui button blue" v-show="!customMode">Update</button>
+                    <!-- NOTE: Custom modal action -->
+                    <div class="inline-block custom_modal_action"></div>
+                </div>
+            </div>
+            <a @click="updateModel(false)" onclick="return false" class="ui orange right corner label" v-show="modified" title="您有尚未儲存的變更">
+                <i class="save icon"></i>
+            </a>
+            <a class="ui green right corner label" v-show="is_success" title="儲存成功">
+                <i class="check icon"></i>
+            </a>
+            <!-- NOTE: Custom action -->
+            <div class="inline-block custom_action"></div>
+            <div class="ui blue button" :data-modal="'#editModal_' + model.id">Edit</div>
+            <div @click="deleteModel" class="ui basic red button" v-show="!deleteMode">Delete</div>
+        </td>
+        <td :colspan="info.model_attributes.length + 1">
+            <!-- NOTE: Custom models -->
+            <div class="custom_models"></div>
+        </td>
     </tr>
 </script>
 <script type="text/x-template" id="models-card">
@@ -144,10 +192,20 @@ $(document).ready(function() {
                         <div class="event">
                             <div class="content">
                                 <div class="summary" :class="{highlight: attribute.model_prefix + '.' + attribute.name == selected_attribute}" v-if="attribute.model_prefix">
-                                    {{ attribute.display_name }}: {{ model[attribute.model_prefix][attribute.name] }}
+                                    <span v-if="attribute.type != 'img'">
+                                        {{ attribute.display_name }}: {{ model[attribute.model_prefix][attribute.name] }}
+                                    </span>
+                                    <span v-else>
+                                        <img :src="model[attribute.model_prefix][attribute.name]" />
+                                    </span>
                                 </div>
                                 <div class="summary" :class="{highlight: attribute.model_prefix + '.' + attribute.name == selected_attribute}" v-else>
-                                    {{ attribute.display_name }}: {{ model[attribute.name] }}
+                                    <span v-if="attribute.type != 'img'">
+                                        {{ attribute.display_name }}: {{ model[attribute.name] }}
+                                    </span>
+                                    <span v-else>
+                                        <img :src="model[attribute.name]" />
+                                    </span>
                                 </div>
                             </div>
                         </div>

data/lib/vue_crud/version.rb

@@ -1,3 +1,3 @@
 module VueCrud
-  VERSION = "0.1.2"
+  VERSION = "0.1.3"
 end

data/vendor/assets/javascripts/vue_crud.js

@@ -44,7 +44,8 @@ function getParameterByName(name) {
 function vue_init(params = {}) {
     var default_options = {
         suffix: '.json',
-        column_type: 'card'
+        column_type: 'card',
+        countOfPage: 9
     }
     var options = $.extend(true, {}, default_options, params)
     Vue.filter('datetime', function (value) {
@@ -150,7 +151,7 @@ function vue_init(params = {}) {
         mixins: [root_mixin],
         el: '#vue_crud',
         data: {
-            column_type: options.column_type,
+            column_type: options.column_type || 'card',
             models: [],
             info: {
                 url_prefix: '',
@@ -161,7 +162,7 @@ function vue_init(params = {}) {
             model: {},
             errors: {},
             progress: '0',
-            countOfPage: 9,
+            countOfPage: options.countOfPage || 9,
             currentPage: getParameterByName("p") || 1,
             searchQuery: getParameterByName("q"),
             filteredModelCount: null,

data/vendor/assets/stylesheets/vue_crud.css

@@ -9,13 +9,26 @@
     border-radius: 0;
     height: 10px;
 }
+.event .content {
+    width: 100%;
+}
 #form-progress {
     position: fixed;
     top: -9999px;
 }
+.label .icon:before {
+    cursor: pointer;
+}
 .summary.highlight {
     border: 2px solid #a90000;
 }
+.ui.table td {
+    max-width: 150px;
+    overflow: auto;
+}
+.ui.table td img {
+    max-width: 100%;
+}
 th.highlight {
     border: 2px solid #a90000 !important;
 }

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: vue_crud
 version: !ruby/object:Gem::Version
-  version: 0.1.2
+  version: 0.1.3
 platform: ruby
 authors:
 - Donald Chiang
@@ -78,8 +78,6 @@ files:
 - vendor/assets/.DS_Store
 - vendor/assets/javascripts/vue_crud.js
 - vendor/assets/stylesheets/vue_crud.css
-- vue_crud-0.1.0.gem
-- vue_crud-0.1.1.gem
 - vue_crud.gemspec
 homepage: http://www.mynet.com.tw
 licenses: