vue_crud 0.1.9.6 → 0.1.9.7

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

@@ -2,29 +2,36 @@
 if(column_type === undefined) var column_type = 'card';
 if(suffix === undefined) var suffix = '.json';
 if(countOfPage === undefined) var countOfPage = 9;
+if(sortable === undefined) var sortable = false;
 $(document).ready(function() {
-    $('.vue_form_for_new').html($('#vue_form').html());
+    // $('.vue_form_for_new').html($('#vue_form').html());
+    var modal = $($('#modal').html());
     var models = $($('#models-' + column_type).html());
+    modal.find('.vue_form').html(
+        $('#vue_form').html()
+    );
     models.find('.custom_models').html(
         $('#custom_models').html()
     );
     models.find('.custom_action').html(
         $('#custom_action').html()
     );
-    models.find('.vue_form_for_edit').html(
-        $('#vue_form').html()
-    );
-    models.find('.custom_modal_body').html(
+    // models.find('.vue_form_for_edit').html(
+    //     $('#vue_form').html()
+    // );
+    modal.find('.custom_modal_body').html(
         $('#custom_modal_body').html()
     );
-    models.find('.custom_modal_action').html(
+    modal.find('.custom_modal_action').html(
         $('#custom_modal_action').html()
     );
+    $('#modal').html(modal);
     $('#models-' + column_type).html(models);
-    vue_init({
+    vueCRUD_init({
         column_type: column_type,
         suffix: suffix,
-        countOfPage: countOfPage
+        countOfPage: countOfPage,
+        sortable: sortable
     });
     $('.filter .ui.dropdown').dropdown();
     $('.ui.checkbox').checkbox();
@@ -38,7 +45,8 @@ $(document).ready(function() {
         {{ info.titles.title }}
         <div class="sub header"><small>{{ info.titles.subtitle }}</small></div>
     </h1>
-    <div class="ui animated fade green button" data-modal="#modelModal" tabindex="0">
+    <!-- <div class="ui animated fade green button" data-modal="#modelModal" tabindex="0"> -->
+    <div class="ui animated fade green button" @click="addModel('創建')" tabindex="0">
         <div class="visible content">新增 {{ info.titles.display_name }}</div>
         <div class="hidden content">
             <i class="right plus icon"></i>
@@ -47,7 +55,7 @@ $(document).ready(function() {
     <div class="ui divider"></div>
     <!-- NOTE: Filter -->
     <div class="ui left action right icon labeled input filter" :class="{loading: is_calculating}">
-        <a :href="default_url" class="ui button red" v-show="selected_attribute">Reset</a>
+        <a :href="default_url" class="ui button red" v-show="selected_attribute">重置</a>
         <div class="ui basic floating dropdown button">
             <div class="text">{{ selected_text || '請選擇欄位' }}</div>
             <i class="dropdown icon"></i>
@@ -73,7 +81,7 @@ $(document).ready(function() {
     </div>
     <div class="ui divider" v-if="column_type == 'card'"></div>
     <!-- NOTE: models -->
-    <div class="row ui cards" v-if="column_type == 'card'">
+    <div v-sortable class="row ui cards" v-if="column_type == 'card'">
         <models v-for="model in filteredModels" :model="model" :info="info" :selected_attribute="model_prefix + '.' + selected_attribute"></models>
     </div>
 
@@ -89,7 +97,7 @@ $(document).ready(function() {
                 <th></th>
             </tr>
         </thead>
-        <tbody>
+        <tbody v-sortable>
             <tr is="models" v-for="model in filteredModels" :model="model" :info="info" :selected_attribute="model_prefix + '.' + selected_attribute">
             </tr>
         </tbody>
@@ -112,25 +120,34 @@ $(document).ready(function() {
         </tfoot>
     </table>
 
-    <!-- NOTE: modal for new action -->
-    <div class="ui modal new_modal" id="modelModal">
-        <div class="header">創建 {{ info.titles.display_name }}</div>
-        <!-- NOTE: Vue form -->
-        <div class="content vue_form_for_new"></div>
-        <div class="actions">
-            <div class="ui basic gray cancel button">取消</div>
-            <div @click="createModel" class="ui primary button">創建</div>
+    <modal :info="info"></modal>
+</div>
+<script type="text/x-template" id="modal">
+    <div class="ui modal" id="vueModal">
+        <div class="ui inverted dimmer">
+            <div class="ui indeterminate text loader">處理中...</div>
         </div>
-        <div class="ui blue bottom attached progress">
-            <div class="bar" :style="{width: progress + '%'}"></div>
+        <div class="header">{{ action_name }} {{ info.titles.display_name }}</div>
+        <div class="content">
+            <!-- NOTE: Not customMode -->
+            <div v-show="!customMode" class="vue_form"></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">取消</button>
+            <button @click="toggleUpdate" class="ui button blue" v-show="!customMode && editMode">更新</button>
+            <button @click="toggleCreate" class="ui button blue" v-show="!customMode && newMode">創建</button>
+            <!-- NOTE: Custom modal action -->
+            <div class="inline-block custom_modal_action"></div>
         </div>
     </div>
-</div>
-
+</script>
 <!-- NOTE: Templates -->
 <script type="text/x-template" id="models-table">
     <tr>
-        <td v-for="attribute in info.model_attributes" v-if="attribute.visible" :class="{highlight: attribute.model_prefix + '.' + attribute.name == selected_attribute}">
+        <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'">
                     {{ model[attribute.model_prefix][attribute.name] }}
@@ -141,7 +158,11 @@ $(document).ready(function() {
             </p>
             <p v-else>
                 <span v-if="attribute.type != 'img'">
-                    {{ model[attribute.name] }}
+                    <span v-if="attribute.type == 'textarea'" v-html="model[attribute.name]">
+                    </span>
+                    <span v-else>
+                        {{ model[attribute.name] }}
+                    </span>
                 </span>
                 <span v-else>
                     <img :src="model[attribute.name]" />
@@ -149,25 +170,6 @@ $(document).ready(function() {
             </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">處理中...</div>
-                </div>
-                <div class="header">更新 {{ info.titles.display_name }}</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">取消</button>
-                    <button @click="updateModel" class="ui button blue" v-show="!customMode">更新</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>
@@ -176,7 +178,7 @@ $(document).ready(function() {
             </a>
             <!-- NOTE: Custom action -->
             <div class="inline-block custom_action"></div>
-            <div class="ui animated fade blue button" :data-modal="'#editModal_' + model.id" tabindex="0">
+            <div class="ui animated fade blue button" @click="openModal('編輯')" tabindex="0">
                 <div class="visible content">編輯</div>
                 <div class="hidden content">
                     <i class="right edit icon"></i>
@@ -196,7 +198,7 @@ $(document).ready(function() {
     </tr>
 </script>
 <script type="text/x-template" id="models-card">
-    <div class="col-md-4">
+    <div class="col-md-4 sort-here">
         <div class="card">
             <div class="content">
                 <div class="header" v-if="info.titles.title_attribute_model_prefix">{{ model[info.titles.title_attribute_model_prefix][info.titles.title_attribute] }}</div>
@@ -240,7 +242,7 @@ $(document).ready(function() {
                 <div class="ui divider"></div>
                 <!-- NOTE: Custom action -->
                 <div class="inline-block custom_action"></div>
-                <div class="ui animated fade blue button" :data-modal="'#editModal_' + model.id" tabindex="0">
+                <div class="ui animated fade blue button" @click="openModal('編輯')" tabindex="0">
                     <div class="visible content">編輯</div>
                     <div class="hidden content">
                         <i class="right edit icon"></i>
@@ -253,34 +255,15 @@ $(document).ready(function() {
                     </div>
                 </div>
             </div>
-            <div class="ui modal" :id="'editModal_' + model.id">
-                <div class="ui inverted dimmer">
-                    <div class="ui indeterminate text loader">處理中...</div>
-                </div>
-                <div class="header">更新 {{ info.titles.display_name }}</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">取消</button>
-                    <button @click="updateModel" class="ui button blue" v-show="!customMode">更新</button>
-                    <!-- NOTE: Custom modal action -->
-                    <div class="inline-block custom_modal_action"></div>
-                </div>
-            </div>
+
             <div class="ui blue bottom attached progress">
                 <div class="bar" :style="{width: progress + '%'}"></div>
             </div>
         </div>
     </div>
 </script>
-
 <script type="text/x-template" id="vue_form">
-    <form class="ui form">
+    <form class="ui form" v-if="newMode || editMode">
         <div v-for="attribute in info.model_attributes" v-if="attribute.editable">
             <div class="field" v-if="attribute.type == 'select'">
                 <label :for="'model_' + attribute.display_name">{{ attribute.display_name }}</label>
@@ -312,8 +295,8 @@ $(document).ready(function() {
             </div>
             <div class="field" v-if="attribute.type == 'textarea'">
                 <label :for="'model_' + attribute.display_name">{{ attribute.display_name }}</label>
-                <textarea :id="'model_' + attribute.display_name" v-if="attribute.model_prefix" v-model="model[attribute.model_prefix][attribute.name]" :class="attribute.input_class"></textarea>
-                <textarea :id="'model_' + attribute.display_name" v-else v-model="model[attribute.name]" :class="attribute.input_class"></textarea>
+                <textarea v-froala :attribute="attribute.name" :id="'model_' + attribute.display_name" v-if="attribute.model_prefix" v-model="model[attribute.model_prefix][attribute.name]" :class="attribute.input_class"></textarea>
+                <textarea v-froala :attribute="attribute.name" :id="'model_' + attribute.display_name" v-else v-model="model[attribute.name]" :class="attribute.input_class"></textarea>
                 <div class="ui pointing red basic label" v-show="errors[attribute.name]">
                     <span style="color: red" v-for="(error, index) in errors[attribute.name]">
                         <span v-if="index > 0">,</span> {{ error }}

data/lib/vue_crud/version.rb

@@ -1,3 +1,3 @@
 module VueCrud
-  VERSION = "0.1.9.6"
+  VERSION = "0.1.9.7"
 end

data/vendor/assets/javascripts/vue_crud.js

@@ -10,8 +10,10 @@ function sleep(time) {
 function obj_to_json(obj) {
     return JSON.parse(JSON.stringify(obj));
 }
+var modal_mixin = {}
 var models_mixin = {}
 var root_mixin = {}
+
 function removeParam(key, sourceURL) {
     var rtn = sourceURL.split("?")[0],
         param,
@@ -56,15 +58,138 @@ function getParameterByName(name) {
     if (!results[2]) return '';
     return decodeURIComponent(results[2].replace(/\+/g, " "));
 }
-function vue_init(params = {}) {
+function vueCRUD_init(params = {}) {
+    Vue.filter('datetime', function (value) {
+        return new Date(value).toLocaleString();
+    })
     var default_options = {
         suffix: '.json',
         column_type: 'card',
-        countOfPage: 9
+        countOfPage: 9,
+        sortable: false
     }
     var options = $.extend(true, {}, default_options, params)
-    Vue.filter('datetime', function (value) {
-        return new Date(value).toLocaleString();
+    Vue.directive('froala', {
+        inserted: function (el) {
+            $(el).froalaEditor({
+                charCounterCount: false,
+                placeholderText: "",
+                language: 'zh_tw'
+            }).on('froalaEditor.contentChanged', function (e, editor) {
+                event_hub.$emit('changeValue', el);
+            }).addClass('needRefresh');
+        }
+    })
+    Vue.directive('sortable', {
+        inserted: function (el) {
+            if(options.sortable) {
+                var sortable = new Sortable(el, {
+                    handle: ".sort-here",
+                    onUpdate: function (evt) {
+                        event_hub.$emit('updateSort');
+                    }
+                });
+            }
+        }
+    })
+    var modalComponent = Vue.component('modal', {
+        mixins: [modal_mixin],
+        template: '#modal',
+        props: {
+            info: Object
+        },
+        data: function() {
+            return {
+                errors: {},
+                model: {},
+                action_name: '',
+                customMode: false,
+                editMode: false,
+                newMode: false
+            }
+        },
+        mounted: function() {
+            event_hub.$on('update_action_name', function(action_name) {
+                this.action_name = action_name;
+            }.bind(this));
+            event_hub.$on('update_model', function(model) {
+                this.model = model;
+            }.bind(this));
+            event_hub.$on('toggle_mode', function(mode) {
+                if(mode == 'new') {
+                    this.newMode = true;
+                    this.editMode = false;
+                    this.customMode = false;
+                }
+                else if(mode == 'edit') {
+                    this.newMode = false;
+                    this.editMode = true;
+                    this.customMode = false;
+                }
+                else if(mode == 'custom') {
+                    this.customMode = true;
+                    this.newMode = false;
+                    this.editMode = false;
+                }
+            }.bind(this));
+            event_hub.$on('openModal', function() {
+                this.openModal();
+            }.bind(this));
+            event_hub.$on('closeModal', function() {
+                this.closeModal();
+            }.bind(this));
+            event_hub.$on('dimmerOn', function() {
+                this.dimmerOn();
+            }.bind(this));
+            event_hub.$on('dimmerOff', function() {
+                this.dimmerOff();
+            }.bind(this));
+            event_hub.$on('changeValue', function(el) {
+                this.model[$(el).attr('attribute')] = $(el).val();
+            }.bind(this));
+        },
+        methods: {
+            toggleCreate: function() {
+                event_hub.$emit('toggleCreate');
+            },
+            toggleUpdate: function() {
+                event_hub.$emit('toggleUpdate');
+            },
+            dimmerOn: function() {
+                $(this.$el).find('.dimmer').addClass('active');
+            },
+            dimmerOff: function() {
+                $(this.$el).find('.dimmer').removeClass('active');
+            },
+            openModal: function() {
+                var that = this;
+                $(this.$el).modal({
+                    observeChanges: true,
+                    transition: 'fade down',
+                    onShow: function() {
+                        $('.needRefresh').froalaEditor('refresh');
+                        $(this).find('select.ui.dropdown').dropdown();
+                        $(this).find('.ui.checkbox').checkbox();
+                        if(typeof modalOpen !== "undefined") modalOpen(this);
+                    },
+                    onVisible: function() {
+                        $('.needRefresh').froalaEditor('refresh');
+                    },
+                    onHide: function() {
+                        event_hub.$emit('cancel_customMode');
+                        event_hub.$off('toggleCreate');
+                        event_hub.$off('toggleUpdate');
+                        that.dimmerOff();
+                        if(typeof modalClose !== "undefined") modalClose(this);
+                    }
+                }).modal('show');
+            },
+            closeModal: function() {
+                sleep(500).then(() => {
+                    $(this.$el).modal('hide');
+                });
+            }
+        }
     })
 
     var modelsComponent = Vue.component('models', {
@@ -80,7 +205,6 @@ function vue_init(params = {}) {
                 progress: '0',
                 errors: {},
                 modified: false,
-                customMode:  false,
                 deleteMode: false,
                 is_success: false
             }
@@ -106,8 +230,28 @@ function vue_init(params = {}) {
             event_hub.$on('cancel_customMode', function() {
                 this.customMode = false;
             }.bind(this));
+            event_hub.$on('updateSort', function(progress) {
+                if($(this.$el).is(":visible")) {
+                    var sort = ($(this.$el).index() + 1);
+                    if(getParameterByName("p") > 1) {
+                        sort = sort + ((getParameterByName("p") - 1) * options.countOfPage);
+                    }
+                    console.log(this.model.id + ":" + sort);
+                    this.model.sort = sort;
+                    this.updateModel();
+                }
+            }.bind(this));
         },
         methods: {
+            openModal: function(action_name) {
+                event_hub.$emit('update_action_name', action_name);
+                event_hub.$emit('update_model', this.model);
+                event_hub.$emit('toggle_mode', 'edit');
+                event_hub.$on('toggleUpdate', function() {
+                    this.updateModel();
+                }.bind(this));
+                event_hub.$emit('openModal');
+            },
             deleteModel: function () {
                 var that = this;
                 that.deleteMode = true;
@@ -129,7 +273,6 @@ function vue_init(params = {}) {
             },
             updateModel: function() {
                 var that = this;
-                var modal = $('#editModal_' + that.model.id);
                 $.ajax({
                     method: 'PATCH',
                     data: {
@@ -137,24 +280,22 @@ function vue_init(params = {}) {
                     },
                     url: that.info.url_prefix + '/' + that.model.id + options.suffix + location.search,
                     beforeSend: function() {
-                        modal.find('.dimmer').toggleClass('active');
+                        event_hub.$emit('dimmerOn');
                         $('.progress-bar').css('width', '0');
                     },
                     success: function(res) {
                         that.errors = {};
                         that.modified = false;
                         that.is_success = true;
-                        sleep(500).then(() => {
-                            modal.find('.dimmer').toggleClass('active');
-                            modal.modal('hide');
-                        });
+                        event_hub.$emit('closeModal');
+                        event_hub.$emit('dimmerOff');
                         sleep(1500).then(() => {
                             that.is_success = false;
                         });
                     },
                     error: function(res) {
                         that.errors = res.responseJSON.errors;
-                        modal.find('.dimmer').toggleClass('active');
+                        event_hub.$emit('dimmerOff');
                     }
                 });
             }
@@ -164,27 +305,29 @@ function vue_init(params = {}) {
     var rootVue = new Vue({
         mixins: [root_mixin],
         el: '#vue_crud',
-        data: {
-            default_url: '',
-            column_type: options.column_type || 'card',
-            models: [],
-            info: {
-                url_prefix: '',
-                titles: {},
-                structure: {},
-                model_attributes: []
-            },
-            model: {},
-            errors: {},
-            progress: '0',
-            countOfPage: options.countOfPage || 9,
-            currentPage: getParameterByName("p") || 1,
-            searchQuery: getParameterByName("q"),
-            filteredModelCount: null,
-            is_calculating: false,
-            model_prefix: getParameterByName("mp"),
-            selected_attribute: getParameterByName("sa"),
-            selected_text: getParameterByName("st")
+        data: function() {
+            return {
+                default_url: '',
+                column_type: options.column_type || 'card',
+                models: [],
+                model: {},
+                info: {
+                    url_prefix: '',
+                    titles: {},
+                    structure: {},
+                    model_attributes: []
+                },
+                errors: {},
+                progress: '0',
+                countOfPage: options.countOfPage || 9,
+                currentPage: getParameterByName("p") || 1,
+                searchQuery: getParameterByName("q"),
+                filteredModelCount: null,
+                is_calculating: false,
+                model_prefix: getParameterByName("mp"),
+                selected_attribute: getParameterByName("sa"),
+                selected_text: getParameterByName("st")
+            }
         },
         mounted: function() {
             var that = this;
@@ -258,10 +401,14 @@ function vue_init(params = {}) {
                         return String(model[that.selected_attribute]).indexOf(that.searchQuery) !== -1;
                     }
                 });
+
                 that.filteredModelCount = result.length
                 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
@@ -276,6 +423,15 @@ function vue_init(params = {}) {
           }
         },
         methods: {
+            addModel: function(action_name) {
+                event_hub.$emit('update_action_name', action_name);
+                event_hub.$emit('update_model', this.model);
+                event_hub.$emit('toggle_mode', 'new');
+                event_hub.$on('toggleCreate', function() {
+                    this.createModel();
+                }.bind(this));
+                event_hub.$emit('openModal');
+            },
             setPage: function(idx){
                 if( idx <= 0 || idx > this.totalPage ){
                     return;
@@ -291,44 +447,41 @@ function vue_init(params = {}) {
                         model: that.model,
                     },
                     url: that.info.url_prefix + options.suffix + location.search,
-                    before: function() {
-                        $('.new_modal').find('.dimmer').toggleClass('active');
+                    beforeSend: function() {
+                        event_hub.$emit('dimmerOn');
                         $('.progress-bar').css('width', '0');
                     },
                     success: function(res) {
-                        var modal = $(that.$el).parents('.modal');
+                        event_hub.$emit('closeModal');
+                        event_hub.$emit('dimmerOff');
                         that.errors = {};
                         that.model = obj_to_json(that.info.structure);
                         that.models.push(res);
-                        sleep(500).then(() => {
-                            $('.new_modal').find('.dimmer').toggleClass('active');
-                            $('.new_modal').modal('hide');
-                        });
                     },
                     error: function(res) {
                         that.errors = res.responseJSON.errors;
-                        $('.new_modal').find('.dimmer').toggleClass('active');
+                        event_hub.$emit('dimmerOff');
                     }
                 });
             }
         }
     })
 }
-$(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');
-    });
-});
+// $(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');
+//     // });
+// });