Merge pull request #2 from can-keklik/feature/vue-breaking

Feature/vue breaking

Author: can-keklik

frontend/express/public/javascripts/countly/vue/components/datatable.js

@@ -588,7 +588,7 @@
                                     '<div>{{ i18n("common.table.no-data") }}</div>\n' +
                                 '</template>\n' +
                                 '<template v-slot:loadingContent>\n' +
-                                    '<div></div>\n'+
+                                    '<div></div>\n' +
                                 '</template>\n' +
                         '</vue-good-table>\n' +
                     '</div>'

frontend/express/public/javascripts/countly/vue/components/drawer.js

@@ -24,6 +24,7 @@
                 title: {type: String, required: true},
                 saveButtonLabel: {type: String, required: true, default: ""},
                 beforeCopyFn: {type: Function},
+                closeFn: {type: Function}
             },
             data: function() {
                 return {
@@ -118,8 +119,11 @@
                 this.isMounted = true;
             },
             methods: {
-                tryClosing: function() {
+                doClose: function() {
                     this.$emit("close", this.name);
+                    if (this.closeFn) {
+                        this.closeFn();
+                    }
                 },
                 copyOfEdited: function() {
                     var copied = JSON.parse(JSON.stringify(this.initialEditedObject));
@@ -152,7 +156,7 @@
                     this.beforeLeavingStep();
                     if (this.isSubmissionAllowed) {
                         this.$emit("submit", JSON.parse(JSON.stringify(this.editedObject)));
-                        this.tryClosing();
+                        this.doClose();
                     }
                 },
                 beforeLeavingStep: function() {
@@ -171,7 +175,7 @@
                             'v-bind:class="{mounted: isMounted, open: isOpened, \'has-sidecars\': hasSidecars}">\n' +
                             '<div class="title">\n' +
                                 '<span>{{title}}</span>\n' +
-                                '<span class="close" v-on:click="tryClosing">\n' +
+                                '<span class="close" v-on:click="doClose">\n' +
                                     '<i class="ion-ios-close-empty"></i>\n' +
                                 '</span>\n' +
                             '</div>\n' +
@@ -226,8 +230,13 @@
                         acc[val] = {
                             name: val,
                             isOpened: false,
-                            initialEditedObject: {}
+                            initialEditedObject: {},
+                        };
+
+                        acc[val].closeFn = function() {
+                            acc[val].isOpened = false;
                         };
+
                         return acc;
                     }, {})
                 };

frontend/express/public/javascripts/countly/vue/components/input.js

@@ -9,6 +9,20 @@
     Vue.component('validation-provider', VeeValidate.ValidationProvider);
     Vue.component('validation-observer', VeeValidate.ValidationObserver);
 
+    VeeValidate.extend('arrmin', {
+        validate: function(value, args) {
+            return value.length >= args.length;
+        },
+        params: ['length']
+    });
+
+    VeeValidate.extend('arrmax', {
+        validate: function(value, args) {
+            return value.length <= args.length;
+        },
+        params: ['length']
+    });
+
     var objectWithoutProperties = function(obj, excluded) {
         if (!obj || !excluded || excluded.length === 0) {
             return obj;

plugins/vue-example/frontend/public/javascripts/countly.views.js

@@ -226,7 +226,7 @@
     });
 
     var ExampleDrawer = countlyVue.views.BaseView.extend({
-        template:'#drawer-template',
+        template: '#drawer-template',
         data: function() {
             return {
                 title: '',
@@ -253,7 +253,7 @@
             onSubmit: function(doc) {
                 this.$store.dispatch("countlyVueExample/myRecords/save", doc);
             },
-            onClose: function($event){
+            onClose: function($event) {
                 this.$emit("close", $event);
             },
             onCopy: function(newState) {

plugins/vue-example/frontend/public/templates/drawer.html

@@ -71,7 +71,7 @@
                     <div class="panel">
                         <div class="panel-heading">Allowed Props</div>
                         <div class="panel-body">
-                            <validation-provider name="selectedProps" rules="min:2" v-slot="v">
+                            <validation-provider name="selectedProps" rules="required|arrmin:2" v-slot="v">
                                 <cly-check-list v-model="drawerScope.editedObject.selectedProps" :items="constants.availableProps"></cly-check-list>
                                 <div class="validation-error" v-if="v.errors.length > 0">
                                     You must select at least 2 props.