vue_crud 0.1.10.8.4 → 0.1.10.8.5

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

@@ -1,32 +1,38 @@
 <script type="text/javascript">
 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;
 if(info_url === undefined) var info_url = "http://localhost:3000/service_prototypes/info";
 $(document).ready(function() {
     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()
     );
+    modal.find('.modal_body_prepend').html(
+        $('#modal_body_prepend').html()
+    );
+    modal.find('.modal_body_append').html(
+        $('#modal_body_append').html()
+    );
     modal.find('.custom_modal_body').html(
         $('#custom_modal_body').html()
     );
     modal.find('.custom_modal_action').html(
         $('#custom_modal_action').html()
     );
+
     $('#modal').html(modal);
     $('#models-' + column_type).html(models);
+    $('.vue_form').html(
+        $('#vue_form').html()
+    );
     vueCRUD_init({
         column_type: column_type,
-        suffix: suffix,
         countOfPage: countOfPage,
         sortable: sortable,
         info_url: info_url
@@ -80,7 +86,7 @@ $(document).ready(function() {
     <div class="ui divider" v-if="column_type == 'card'"></div>
     <!-- NOTE: models -->
     <div v-sortable class="ui three column grid" v-if="column_type == 'card'">
-        <models v-for="model in filteredModels" :model="model" :info="info" :selected_attribute="selected_attribute"></models>
+        <models v-for="model in filteredModels" :original_model="model" :info="info" :selected_attribute="selected_attribute"></models>
     </div>
 
     <table class="ui celled selectable table" v-if="column_type == 'table'">
@@ -96,7 +102,7 @@ $(document).ready(function() {
             </tr>
         </thead>
         <tbody v-sortable>
-            <tr is="models" v-for="model in filteredModels" :model="model" :info="info" :selected_attribute="selected_attribute">
+            <tr is="models" v-for="model in filteredModels" :original_model="model" :info="info" :selected_attribute="selected_attribute">
             </tr>
         </tbody>
         <tfoot>
@@ -126,18 +132,24 @@ $(document).ready(function() {
         <div class="ui inverted dimmer">
             <div class="ui indeterminate text loader">處理中...</div>
         </div>
-        <div class="header">{{ action_name }} {{ info.titles.display_name }}</div>
+        <div class="header">{{ action_name }}</div>
         <div class="content">
+            <!-- NOTE: Modal body prepend -->
+            <div v-show="defaultMode" class="modal_body_prepend"></div>
             <!-- NOTE: Not customMode -->
-            <div v-show="!customMode" class="vue_form"></div>
-            <!-- NOTE: Is customMode -->
+            <div v-show="defaultMode" class="vue_form"></div>
+            <!-- NOTE: Modal body prepend -->
+            <div v-show="defaultMode" class="modal_body_append"></div>
+
             <!-- NOTE: Custom modal body -->
-            <div v-show="customMode"><div class="custom_modal_body"></div></div>
+            <div v-show="!defaultMode">
+                <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>
+            <button @click="modalSubmit" class="ui button blue">{{ action_name }}</button>
+            <!-- <button @click="toggleCreate" class="ui button blue" v-show="newAction">{{ action_name }}</button> -->
             <!-- NOTE: Custom modal action -->
             <div class="inline-block custom_modal_action"></div>
         </div>
@@ -173,7 +185,7 @@ $(document).ready(function() {
 
             <!-- NOTE: Custom action -->
             <div class="inline-block custom_action"></div>
-            <div class="ui animated fade blue button" @click="openModal('編輯')" tabindex="0">
+            <div class="ui animated fade blue button" @click="editModel('編輯')" tabindex="0">
                 <div class="visible content">編輯</div>
                 <div class="hidden content">
                     <i class="right edit icon"></i>
@@ -196,29 +208,37 @@ $(document).ready(function() {
     <div class="column">
         <div class="ui fluid card sort-here">
             <div class="content">
+                <div class="ui top attached label gray">{{ info.titles.display_name }}</div>
                 <div class="header">{{ model[info.titles.title_attribute] }}</div>
-                <div class="meta">{{ info.titles.display_name }}</div>
-                <div class="ui divider"></div>
-                <div class="description">
-                    <div class="ui small feed" v-for="attribute in info.model_attributes" v-if="attribute.visible">
-                        <div class="event">
-                            <div class="content">
-                                <div class="summary" :class="{highlight: attribute.name == selected_attribute}">
-                                    <span v-if="attribute.input_type != 'img'">
-                                        <div class="ui teal horizontal label">{{ attribute.display_name }}</div>
-                                        <br>
-                                        {{ model[attribute.name] }}
-                                    </span>
-                                    <span v-else>
-                                        <img :src="model[attribute.name]" />
-                                    </span>
-                                </div>
-                            </div>
+                <div class="meta">創建於 {{ model[info.titles.created_at_attribute] | datetime }}</div>
+                <div class="ui horizontal divider" v-toggle><h3><i class="bar chart icon"></i>欄位資料</h3></div>
+                <div class="description attribute">
+                    <div class="item" v-for="attribute in info.model_attributes" v-if="attribute.visible" :class="{highlight: attribute.name == selected_attribute}">
+                        <div v-if="attribute.input_type == 'token'">
+                            <span class="display_name">{{ attribute.display_name }}：</span>
+                            <pre>{{ model[attribute.name] }}</pre>
+                        </div>
+                        <div v-else-if="attribute.input_type == 'checkbox'">
+                            <span class="display_name">{{ attribute.display_name }}：</span>
+                            {{ model[attribute.name] | boolean }}
+                        </div>
+                        <div v-else-if="attribute.input_type == 'email'">
+                            <span class="display_name">{{ attribute.display_name }}：</span>
+                            <a :href="'mailto:' + model[attribute.name]" target="new">{{ model[attribute.name] }}</a>
                         </div>
+                        <div v-else-if="attribute.input_type == 'img'">
+                            <span class="display_name">{{ attribute.display_name }}：</span>
+                            <img :src="model[attribute.name]" />
+                        </div>
+                        <div v-else>
+                            <span class="display_name">{{ attribute.display_name }}：</span>
+                            {{ model[attribute.name] }}
+                        </div>
+                        <div class="ui divider"></div>
                     </div>
                     <!-- NOTE: Custom models -->
-                    <div class="custom_models"></div>
                 </div>
+                <div class="custom_models"></div>
             </div>
             <div class="extra content">
                 <div class="ui red right ribbon label" v-show="is_deleted">您已刪除，點擊<a href="#" @click="restoreModel" onclick="return false" class="save_now">復原</a></div>
@@ -228,7 +248,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" @click="openModal('編輯')" tabindex="0">
+                <div class="ui animated fade blue button" @click="editModel('編輯')" tabindex="0">
                     <div class="visible content">編輯</div>
                     <div class="hidden content">
                         <i class="right edit icon"></i>
@@ -249,8 +269,8 @@ $(document).ready(function() {
     </div>
 </script>
 <script type="text/x-template" id="vue_form">
-    <form class="ui form" v-if="newMode || editMode">
-        <div v-for="attribute in info.model_attributes" v-if="attribute.editable">
+    <form class="ui form">
+        <div v-for="attribute in model_attributes" v-if="attribute.editable">
             <div class="field" v-if="attribute.input_type == 'select'">
                 <label :for="'model_' + attribute.display_name">{{ attribute.display_name }}</label>
                 <select :id="'model_' + attribute.display_name" v-model="model[attribute.name]" class="ui fluid dropdown" :class="attribute.input_class">
@@ -262,7 +282,7 @@ $(document).ready(function() {
                     </span>
                 </div>
             </div>
-            <div class="field" v-if="attribute.input_type == 'multiSelect'">
+            <div class="field" v-else-if="attribute.input_type == 'multiSelect'">
                 <label :for="'model_' + attribute.display_name">{{ attribute.display_name }}</label>
                 <select :id="'model_' + attribute.display_name" multiple v-model="model[attribute.name]" class="ui fluid dropdown" :class="attribute.input_class">
                     <option v-for="option in attribute.options" :value="option.value" v-text="option.text"></option>
@@ -273,7 +293,25 @@ $(document).ready(function() {
                     </span>
                 </div>
             </div>
-            <div class="field" v-if="attribute.input_type == 'textarea'">
+            <div class="field" v-else-if="attribute.input_type == 'selectInput'">
+                <label :for="'model_' + attribute.display_name">{{ attribute.display_name }}</label>
+                <div class="ui grid">
+                    <div class="ten wide column">
+                        <input type="text" :id="'model_' + attribute.display_name" v-model="model[attribute.name]" :class="attribute.input_class">
+                    </div>
+                    <div class="six wide column">
+                        <select v-model="model[attribute.name]" class="ui dropdown" :class="attribute.input_class" onchange="$(this).parent().prev().find('input').val(this.value)">
+                            <option v-for="option in attribute.options" :value="option.value" v-text="option.text"></option>
+                        </select>
+                    </div>
+                </div>
+                <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 }}
+                    </span>
+                </div>
+            </div>
+            <div class="field" v-else-if="attribute.input_type == 'textarea'">
                 <label :for="'model_' + attribute.display_name">{{ attribute.display_name }}</label>
                 <textarea v-froala :attribute="attribute.name" :id="'model_' + attribute.display_name" v-model="model[attribute.name]" :class="attribute.input_class"></textarea>
                 <div class="ui pointing red basic label" v-show="errors[attribute.name]">
@@ -282,7 +320,7 @@ $(document).ready(function() {
                     </span>
                 </div>
             </div>
-            <div class="field" v-if="attribute.input_type == 'checkbox'">
+            <div class="field" v-else-if="attribute.input_type == 'checkbox'">
                 <div class="ui toggle checkbox">
                     <input type="checkbox" tabindex="0" class="hidden" :id="'model_' + attribute.display_name" v-model="model[attribute.name]" :class="attribute.input_class">
                     <label>{{ attribute.display_name }}</label>
@@ -293,7 +331,7 @@ $(document).ready(function() {
                     </span>
                 </div>
             </div>
-            <div class="field" v-if="attribute.input_type == 'number'">
+            <div class="field" v-else-if="attribute.input_type == 'number'">
                 <label :for="'model_' + attribute.display_name">{{ attribute.display_name }}</label>
                 <input type="number" :id="'model_' + attribute.display_name" v-model="model[attribute.name]" :class="attribute.input_class" number>
                 <div class="ui pointing red basic label" v-show="errors[attribute.name]">
@@ -302,7 +340,7 @@ $(document).ready(function() {
                     </span>
                 </div>
             </div>
-            <div class="field" v-if="attribute.input_type != 'number' && attribute.input_type != 'select' && attribute.input_type != 'multiSelect' && attribute.input_type != 'textarea' && attribute.input_type != 'checkbox'">
+            <div class="field" v-else>
                 <label :for="'model_' + attribute.display_name">{{ attribute.display_name }}</label>
                 <input :type="attribute.input_type" :id="'model_' + attribute.display_name" v-model="model[attribute.name]" :class="attribute.input_class">
                 <div class="ui pointing red basic label" v-show="errors[attribute.name]">

data/lib/vue_crud/version.rb

@@ -1,3 +1,3 @@
 module VueCrud
-  VERSION = "0.1.10.8.4"
+  VERSION = "0.1.10.8.5"
 end

data/vendor/assets/javascripts/vue_crud.js

@@ -1,8 +1,10 @@
-$.FE.prototype.reset = function () {
-    this.$el.html('');
-}
-$.FE.prototype.refresh = function () {
-    this.$el.html(this.$oel.val());
+if($.FE !== undefined) {
+    $.FE.prototype.reset = function () {
+        this.$el.html('');
+    }
+    $.FE.prototype.refresh = function () {
+        this.$el.html(this.$oel.val());
+    }
 }
 $(document).ajaxStart(function() { Pace.restart(); });
 Vue.config.devtools = true;
@@ -10,16 +12,39 @@ Pace.on('done', function() {
     $('#form-progress').val('0');
 });
 var event_hub = new Vue();
+var modal_mixin = {};
+var models_mixin = {};
+var root_mixin = {};
 function sleep(time) {
     return new Promise((resolve) => setTimeout(resolve, time));
 }
 function obj_to_json(obj) {
     return JSON.parse(JSON.stringify(obj));
 }
-var modal_mixin = {}
-var models_mixin = {}
-var root_mixin = {}
-
+// Array.prototype.find_and_replace = function(id, new_obj){
+//     for(var n = 0; n < this.length; n++) {
+//         var current_id = this[n].id || this[n].ID;
+//         if(current_id == id){
+//             console.log(this[n]);
+//             this[n] = new_obj;
+//             return true;
+//         }
+//     }
+//     return false;
+// };
+function urlParser(url, obj) {
+    var parser = document.createElement('a');
+    parser.href = url;
+    parser.parameters = parser.pathname.split('/').filter(function (str) {
+        return str.match(':');
+    });
+    var url = parser.protocol + "//" + parser.host;
+    $.each(parser.parameters, function(i, key){
+        parser.pathname = parser.pathname.replace(key, obj[key.replace(":", "")]);
+    });
+    url += parser.pathname + location.search;
+    return url;
+}
 function removeParam(key, sourceURL) {
     var rtn = sourceURL.split("?")[0],
         param,
@@ -68,8 +93,10 @@ function vueCRUD_init(params = {}) {
     Vue.filter('datetime', function (value) {
         return new Date(value).toLocaleString();
     })
+    Vue.filter('boolean', function (value) {
+        return value? '是':'否';
+    })
     var default_options = {
-        suffix: '.json',
         column_type: 'card',
         countOfPage: 9,
         sortable: false,
@@ -99,49 +126,44 @@ function vueCRUD_init(params = {}) {
             }
         }
     })
+    Vue.directive('toggle', {
+        inserted: function (el) {
+            $(el).css('cursor', 'pointer').click(function(){
+                $(this).next().toggle();
+            });
+        }
+    })
     var modalComponent = Vue.component('modal', {
         mixins: [modal_mixin],
         template: '#modal',
-        props: {
-            info: Object
-        },
         data: function() {
             return {
+                model_attributes: [],
                 errors: {},
                 model: {},
                 action_name: '',
-                customMode: false,
-                editMode: false,
-                newMode: false
+                defaultMode: true
             }
         },
         mounted: function() {
+            // Sync errors and model from modelsComponent
             event_hub.$on('update_error', function(errors) {
                 this.errors = errors;
             }.bind(this));
-            event_hub.$on('update_action_name', function(action_name) {
-                this.action_name = action_name;
+            event_hub.$on('update_model_attributes', function(model_attributes) {
+                this.model_attributes = model_attributes;
             }.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;
-                }
+            // Modes and Actions
+            event_hub.$on('change_mode', function(mode, boolean) {
+                this[mode] = boolean;
+            }.bind(this));
+            event_hub.$on('update_action_name', function(action_name) {
+                this.action_name = action_name;
             }.bind(this));
+            // Modal actions
             event_hub.$on('openModal', function() {
                 this.openModal();
             }.bind(this));
@@ -154,16 +176,14 @@ function vueCRUD_init(params = {}) {
             event_hub.$on('dimmerOff', function() {
                 this.dimmerOff();
             }.bind(this));
+            // For froalaEditor
             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');
+            modalSubmit: function() {
+                event_hub.$emit('modalSubmit');
             },
             dimmerOn: function() {
                 $(this.$el).find('.dimmer').addClass('active');
@@ -172,6 +192,7 @@ function vueCRUD_init(params = {}) {
                 $(this.$el).find('.dimmer').removeClass('active');
             },
             openModal: function() {
+                event_hub.$off('modalSubmit');
                 var that = this;
                 $(this.$el).modal({
                     observeChanges: true,
@@ -187,9 +208,7 @@ function vueCRUD_init(params = {}) {
                         $('.needRefresh').froalaEditor('refresh');
                     },
                     onHide: function() {
-                        event_hub.$emit('cancel_customMode');
-                        event_hub.$off('toggleCreate');
-                        event_hub.$off('toggleUpdate');
+                        event_hub.$emit('modalClose');
                         that.dimmerOff();
                         if(typeof modalClose !== "undefined") modalClose(this);
                     }
@@ -207,12 +226,13 @@ function vueCRUD_init(params = {}) {
         mixins: [models_mixin],
         template: '#models-' + options.column_type,
         props: {
-            model: Object,
+            original_model: Object,
             selected_attribute: String,
             info: Object
         },
         data: function() {
             return {
+                model: {},
                 progress: '0',
                 errors: {},
                 modified: false,
@@ -237,12 +257,10 @@ function vueCRUD_init(params = {}) {
             }
         },
         mounted: function() {
+            this.model = this.original_model;
             event_hub.$on('update_progress', function(progress) {
                 this.progress = progress;
             }.bind(this));
-            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);
@@ -255,21 +273,25 @@ function vueCRUD_init(params = {}) {
             }.bind(this));
         },
         methods: {
-            openModal: function(action_name) {
-                event_hub.$emit('update_action_name', action_name);
+            editModel: function(action_name) {
+                var url = this.info.actions.delete.url;
+                event_hub.$emit('openModal');
+                event_hub.$emit('update_model_attributes', this.info.model_attributes);
                 event_hub.$emit('update_model', this.model);
-                event_hub.$emit('toggle_mode', 'edit');
-                event_hub.$on('toggleUpdate', function() {
+                event_hub.$emit('update_action_name', action_name + this.info.titles.display_name);
+
+                // Bind modalSubmit when modalComponent submit
+                // It will be off when modal close
+                event_hub.$on('modalSubmit', function() {
                     this.updateModel();
                 }.bind(this));
-                event_hub.$emit('openModal');
             },
             restoreModel: function() {
                 var that = this;
                 $.ajax({
-                    method: 'POST',
+                    method: that.info.actions.create.method,
                     data: obj_to_json(that.model),
-                    url: that.info.url_prefix + options.suffix + location.search,
+                    url: urlParser(that.info.actions.create.url, that.model),
                     success: function(res) {
                         that.model = res;
                         that.deleteMode = false;
@@ -286,37 +308,15 @@ function vueCRUD_init(params = {}) {
                     }
                 });
             },
-            // restoreModel: function() {
-            //     if(confirm("Are you sure?") == true) {
-            //         event_hub.$emit('restoreCreate', this.model);
-            //     }
-            //     else {
-            //
-            //     }
-            // },
             deleteModel: function () {
                 var that = this;
-                that.deleteMode = true;
-                var id = that.model.ID || that.model.id;
                 if(confirm("Are you sure?") == true) {
+                    that.deleteMode = true;
                     $.ajax({
-                        method: 'DELETE',
-                        url: that.info.url_prefix + '/' + id + options.suffix + location.search,
+                        method: that.info.actions.delete.method,
+                        url: urlParser(that.info.actions.delete.url, that.model),
                         success: function(res) {
                             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;
@@ -329,12 +329,13 @@ function vueCRUD_init(params = {}) {
             },
             updateModel: function() {
                 var that = this;
-                var id = that.model.ID || that.model.id;
                 $.ajax({
-                    method: 'PATCH',
+                    method: that.info.actions.update.method,
                     data: obj_to_json(that.model),
-                    url: that.info.url_prefix + '/' + id + options.suffix + location.search,
+                    url: urlParser(that.info.actions.update.url, that.model),
                     beforeSend: function() {
+                        console.log(obj_to_json(that.model));
+
                         event_hub.$emit('dimmerOn');
                         $('.progress-bar').css('width', '0');
                     },
@@ -389,7 +390,7 @@ function vueCRUD_init(params = {}) {
                 success: function(res) {
                     that.info = res;
                     that.model = {};
-                    var default_url = that.info.url_prefix + location.search;
+                    var default_url = that.info.actions.index.url + location.search;
                     default_url = removeParam("p", default_url);
                     default_url = removeParam("q", default_url);
                     default_url = removeParam("mp", default_url);
@@ -397,7 +398,7 @@ function vueCRUD_init(params = {}) {
                     default_url = removeParam("st", default_url);
                     that.default_url = default_url;
                     $.ajax({
-                        url: that.info.url_prefix + options.suffix + location.search,
+                        url: urlParser(that.info.actions.index.url, that.model),
                         success: function(res) {
                             that.models = res;
                         }
@@ -451,9 +452,9 @@ function vueCRUD_init(params = {}) {
                     return String(model[that.selected_attribute]).indexOf(that.searchQuery) !== -1;
                 });
 
-                that.filteredModelCount = result.length
+                that.filteredModelCount = result.length;
                 setTimeout(function () {
-                    that.is_calculating = false
+                    that.is_calculating = false;
                 }, 500)
                 return result.slice(
                     that.pageStart,
@@ -462,21 +463,21 @@ function vueCRUD_init(params = {}) {
             }
         },
         watch: {
-          searchQuery: function () {
-              this.currentPage = 1;
-              updateQueryStringParam('q', this.searchQuery);
-              updateQueryStringParam('p', 1);
-          }
+            searchQuery: function () {
+                this.currentPage = 1;
+                updateQueryStringParam('q', this.searchQuery);
+                updateQueryStringParam('p', 1);
+            }
         },
         methods: {
             addModel: function(action_name) {
-                event_hub.$emit('update_action_name', action_name);
+                event_hub.$emit('openModal');
+                event_hub.$emit('update_model_attributes', this.info.model_attributes);
                 event_hub.$emit('update_model', this.model);
-                event_hub.$emit('toggle_mode', 'new');
-                event_hub.$on('toggleCreate', function() {
+                event_hub.$emit('update_action_name', action_name + this.info.titles.display_name);
+                event_hub.$on('modalSubmit', function() {
                     this.createModel();
                 }.bind(this));
-                event_hub.$emit('openModal');
             },
             setPage: function(idx){
                 if( idx <= 0 || idx > this.totalPage ){
@@ -485,26 +486,12 @@ function vueCRUD_init(params = {}) {
                 this.currentPage = idx;
                 updateQueryStringParam('p', this.currentPage);
             },
-            // restoreModel: function () {
-            //     var that = this;
-            //     $.ajax({
-            //         method: 'POST',
-            //         data: obj_to_json(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({
-                    method: 'POST',
+                    method: that.info.actions.create.method,
                     data: obj_to_json(that.model),
-                    url: that.info.url_prefix + options.suffix + location.search,
+                    url: urlParser(that.info.actions.create.url, that.model),
                     beforeSend: function() {
                         console.log(obj_to_json(that.model));
                         event_hub.$emit('dimmerOn');

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: vue_crud
 version: !ruby/object:Gem::Version
-  version: 0.1.10.8.4
+  version: 0.1.10.8.5
 platform: ruby
 authors:
 - Donald Chiang
 autorequire: 
 bindir: exe
 cert_chain: []
-date: 2016-11-23 00:00:00.000000000 Z
+date: 2016-12-20 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: bundler
@@ -89,6 +89,7 @@ files:
 - lib/generators/vue_crud/templates/assets/fonts/fa/fontawesome-webfont.woff2
 - lib/generators/vue_crud/templates/assets/images/froala_editor/color_picker.png
 - lib/generators/vue_crud/templates/assets/images/semantic-ui/flags.png
+- lib/generators/vue_crud/templates/assets/javascripts/.DS_Store
 - lib/generators/vue_crud/templates/assets/javascripts/codemirror.js
 - lib/generators/vue_crud/templates/assets/javascripts/froala_editor/froala_editor.js
 - lib/generators/vue_crud/templates/assets/javascripts/froala_editor/languages/en_gb.js