vue_crud 0.1.9.9 → 0.1.10.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 40d52197d5a622260d03585e2cfb9c75cae50a7f
-  data.tar.gz: af620b33a8f9ffe73b440b73a19d619d8006e2cf
+  metadata.gz: abae5940ab3389b7e2048b209e5fab59f7887d1b
+  data.tar.gz: 0e8044954b536c4535835c0dbb7cf1e223f35730
 SHA512:
-  metadata.gz: f0bee3dbd0cf666c8bbc37ea95c8980c4e6e1b37f345bad8386ccf51a9645680dae60705a47ea2febc449ff37d4b7d5d40454f28d285952d4515aa962f32cca0
-  data.tar.gz: df17eebc41a7c88f32b1f02dd131b21ecb6d83f7f02a1a77550e30ab8efe6b9ea4e1e94d8dc847a0ccd7ee7fb929cf0da3ef8595c80a40879547b9d8ff99beee
+  metadata.gz: 4baf2d67fb5fa2ccc416fc60947d6ea5345a09732e1b1251d2a03f9bb0c6227e2e1537d6288ac026addca6156b66160e64b78820d833d359b40dc3c880e83fcd
+  data.tar.gz: b67c9f5ce30ecc5cb0e5a6148c263aabd31b7d37a2405a11340beacc2c4e2a96b51cb2305df78cc1419e09c186ca5eada222424d8b67ded207965a185741639d

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

@@ -146,7 +146,7 @@ $(document).ready(function() {
 </script>
 <!-- NOTE: Templates -->
 <script type="text/x-template" id="models-table">
-    <tr>
+    <tr :class="{'is_deleted': is_deleted}">
         <td v-for="(attribute, i) in info.model_attributes" v-if="attribute.visible"  :class="{'sort-here': i == 0, highlight: attribute.model_prefix + '.' + attribute.name == selected_attribute}">
             <p v-if="attribute.model_prefix">
                 <span v-if="attribute.type != 'img'">
@@ -170,12 +170,19 @@ $(document).ready(function() {
             </p>
         </td>
         <td style="position: relative;">
-            <a @click="updateModel(false)" onclick="return false" class="ui orange right corner label" v-show="modified" title="您有尚未儲存的變更">
+            <a @click="restoreModel" onclick="return false" class="ui red right corner label" v-show="is_deleted" title="您已刪除，點擊復原">
+                <i class="repeat icon"></i>
+            </a>
+            <a @click="restoreModel" onclick="return false" class="ui red right corner label" v-show="is_restore_failed" title="復原失敗">
+                <i class="warning circle icon"></i>
+            </a>
+            <a @click="updateModel" 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 animated fade blue button" @click="openModal('編輯')" tabindex="0">
@@ -237,8 +244,10 @@ $(document).ready(function() {
                 </div>
             </div>
             <div class="extra content">
-                <div class="ui orange right ribbon label" v-show="modified">您有尚未儲存的變更，<a href="#" @click="updateModel(false)" onclick="return false" class="save_now">立即儲存</a></div>
+                <div class="ui red right ribbon label" v-show="is_deleted">您已刪除，點擊<a href="#" @click="restoreModel" onclick="return false" class="save_now">復原</a></div>
+                <div class="ui orange right ribbon label" v-show="modified">您有尚未儲存的變更，<a href="#" @click="updateModel" onclick="return false" class="save_now">立即儲存</a></div>
                 <div class="ui teal right ribbon label" v-show="is_success">儲存成功</div>
+                <div class="ui red right ribbon label" v-show="is_restore_failed">復原失敗</div>
                 <div class="ui divider"></div>
                 <!-- NOTE: Custom action -->
                 <div class="inline-block custom_action"></div>

data/lib/vue_crud/version.rb

@@ -1,3 +1,3 @@
 module VueCrud
-  VERSION = "0.1.9.9"
+  VERSION = "0.1.10.0"
 end

data/vendor/assets/javascripts/vue_crud.js

@@ -83,6 +83,7 @@ function vueCRUD_init(params = {}) {
     Vue.directive('sortable', {
         inserted: function (el) {
             if(options.sortable) {
+                filter: '.is_deleted';
                 var sortable = new Sortable(el, {
                     onUpdate: function (evt) {
                         event_hub.$emit('updateSort');
@@ -205,7 +206,9 @@ function vueCRUD_init(params = {}) {
                 errors: {},
                 modified: false,
                 deleteMode: false,
-                is_success: false
+                is_success: false,
+                is_deleted: false,
+                is_restore_failed: false
             }
         },
         watch: {
@@ -250,6 +253,14 @@ function vueCRUD_init(params = {}) {
                 }.bind(this));
                 event_hub.$emit('openModal');
             },
+            restoreModel: function() {
+                if(confirm("Are you sure?") == true) {
+                    event_hub.$emit('restoreCreate', this.model);
+                }
+                else {
+
+                }
+            },
             deleteModel: function () {
                 var that = this;
                 that.deleteMode = true;
@@ -258,7 +269,20 @@ function vueCRUD_init(params = {}) {
                         method: 'DELETE',
                         url: that.info.url_prefix + '/' + that.model.id + options.suffix + location.search,
                         success: function(res) {
-                            $(that.$el).remove();
+                            that.is_deleted = true;
+                            event_hub.$on('toggleRestoreSuccess', function() {
+                                that.deleteMode = false;
+                                that.is_deleted = false;
+                                that.is_success = true;
+                                sleep(1500).then(() => {
+                                    that.is_success = false;
+                                });
+                            }.bind(this));
+                            event_hub.$on('toggleRestoreFail', function() {
+                                that.is_deleted = false;
+                                that.is_restore_failed = true;
+                                alert('復原失敗，請記錄資料並重新建立');
+                            }.bind(this));
                         },
                         error: function(res) {
                             that.deleteMode = false;
@@ -352,6 +376,10 @@ function vueCRUD_init(params = {}) {
             event_hub.$on('update_progress', function(progress) {
                 this.progress = progress;
             }.bind(this));
+            event_hub.$on('restoreCreate', function(model) {
+                this.model = model;
+                this.restoreModel();
+            }.bind(this));
             $('#form-progress').change(function(){
                 event_hub.$emit('update_progress', $(this).val());
             });
@@ -404,9 +432,6 @@ function vueCRUD_init(params = {}) {
                 setTimeout(function () {
                     that.is_calculating = false
                 }, 500)
-                // TODO: Order by sort after refresh, now computed will not wait for
-                // TODO: the component to finish done the update ajax
-                //.sort((a, b) => a.sort > b.sort ? 1 : -1)
                 return result.slice(
                     that.pageStart,
                     that.countOfPage + that.pageStart
@@ -437,6 +462,22 @@ function vueCRUD_init(params = {}) {
                 this.currentPage = idx;
                 updateQueryStringParam('p', this.currentPage);
             },
+            restoreModel: function () {
+                var that = this;
+                $.ajax({
+                    method: 'POST',
+                    data: {
+                        model: that.model,
+                    },
+                    url: that.info.url_prefix + options.suffix + location.search,
+                    success: function(res) {
+                        event_hub.$emit('toggleRestoreSuccess');
+                    },
+                    error: function(res) {
+                        event_hub.$emit('toggleRestoreFail');
+                    }
+                });
+            },
             createModel: function () {
                 var that = this;
                 $.ajax({
@@ -465,21 +506,3 @@ function vueCRUD_init(params = {}) {
         }
     })
 }
-// $(document).ready(function() {
-//     // $(document).delegate('[data-modal]', 'click', function(event) {
-//     //     var target = $(this).data('modal');
-//     //     $(target).modal({
-//     //         observeChanges: true,
-//     //         transition: 'fade down',
-//     //         onShow: function() {
-//     //             $(this).find('select.ui.dropdown').dropdown();
-//     //             $(this).find('.ui.checkbox').checkbox();
-//     //             if(typeof modalOpen !== "undefined") modalOpen(this);
-//     //         },
-//     //         onHide: function() {
-//     //             event_hub.$emit('cancel_customMode');
-//     //             if(typeof modalClose !== "undefined") modalClose(this);
-//     //         }
-//     //     }).modal('show');
-//     // });
-// });

data/vendor/assets/stylesheets/vue_crud.css

@@ -1,5 +1,16 @@
-#vue_crud .ui.cards > .card > .extra a.save_now {
-    color: rgb(33, 133, 208);
+#vue_crud a.save_now {
+    color: white !important;
+    opacity: 1 !important;
+    text-decoration: underline !important;
+}
+#vue_crud .ui.feed > .event > .content .summary img {
+    width: 100% !important;
+    height: auto !important;
+}
+#vue_crud .is_deleted {
+    opacity: 0.7;
+}
+#vue_crud .is_deleted:hover {
     opacity: 1;
 }
 #vue_crud .card .progress {

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: vue_crud
 version: !ruby/object:Gem::Version
-  version: 0.1.9.9
+  version: 0.1.10.0
 platform: ruby
 authors:
 - Donald Chiang
@@ -213,6 +213,7 @@ files:
 - vendor/assets/stylesheets/vue_crud.css
 - vue_crud-0.1.9.7.gem
 - vue_crud-0.1.9.8.gem
+- vue_crud-0.1.9.9.gem
 - vue_crud.gemspec
 homepage: http://www.mynet.com.tw
 licenses: