codelation_ui 1.0.1 → 1.0.57

data/app/assets/javascripts/codelation_ui/forms/interfaces/form.js

@@ -2,57 +2,62 @@
   "use strict";
 
   // Exposes method validateForm(success, fail)
-
+  App.vue.config.form = {
+    disableValidation: false
+  }
+  
   App.vue.interfaces.form = {
     data: function() {
       return {
-        _formValidationWatch: true,
-        _formValidationInputs: 0,
-        _formValidationResponded: 0,
-        _formValidationValid: true,
-        _formValidationValidAction: null,
-        _formValidationInvalidAction: null,
-        _formValidationErrorMessage: null,
-        _formValidationDeveloperMode: false
+        form: {
+          formValidationWatch: true,
+          formValidationInputs: 0,
+          formValidationResponded: 0,
+          formValidationValid: true,
+          formValidationValidAction: null,
+          formValidationInvalidAction: null,
+          formValidationErrorMessage: null,
+          formValidationDeveloperMode: false,
+        }
       }
     },
     ready: function() {
-      if (App.vue.config.disableVueFormValidations == true) {
-        this._formValidationDeveloperMode = true;
+      if (App.vue.config.form.disableValidation == true) {
+        this.form.formValidationDeveloperMode = true;
         console.error("VUE FORMS DEVELOPER MODE: Validations will not fail the form");
       }
     },
     methods: {
       _formValidationRespondToForm: function() {
-        if (this._formValidationWatch && this._formValidationResponded === this._formValidationInputs) {
-          if (this._formValidationValid && typeof this._formValidationValidAction === 'function') {
-            this._formValidationValidAction();
-          }else if (!this._formValidationValid && typeof this._formValidationInvalidAction === 'function') {
-            this._formValidationInvalidAction();
+        if (this.form.formValidationWatch && this.form.formValidationResponded === this.form.formValidationInputs) {
+          if (this.form.formValidationValid && typeof this.form.formValidationValidAction === 'function') {
+            this.form.formValidationValidAction();
+          }else if (!this.form.formValidationValid && typeof this.form.formValidationInvalidAction === 'function') {
+            this.form.formValidationInvalidAction();
           }
         }
       },
       _formValidationValidateCallback: function(valid) {
-        this._formValidationResponded++;
-        if (this._formValidationValid) {
-          this._formValidationValid = valid;
+        this.form.formValidationResponded++;
+        if (this.form.formValidationValid) {
+          this.form.formValidationValid = valid;
         }
         this._formValidationRespondToForm();
       },
       validateForm: function(successCB, failCB) {
-        if (this._formValidationDeveloperMode === true) {
+        if (this.form.formValidationDeveloperMode === true) {
           successCB();
           return;
         }
-        this._formValidationWatch = false;
-        this._formValidationErrorMessage = null;
-        this._formValidationResponded = 0;
-        this._formValidationValid = true;
-        this._formValidationValidAction = successCB || null;
-        this._formValidationInvalidAction = failCB || null;
-        this._formValidationWatch = true;
+        this.form.formValidationWatch = false;
+        this.form.formValidationErrorMessage = null;
+        this.form.formValidationResponded = 0;
+        this.form.formValidationValid = true;
+        this.form.formValidationValidAction = successCB || null;
+        this.form.formValidationInvalidAction = failCB || null;
+        this.form.formValidationWatch = true;
 
-        if (this._formValidationInputs < 1) {
+        if (this.form.formValidationInputs < 1) {
           this._formValidationRespondToForm();
         }else{
           this.$broadcast('_form-validation-validate-inputs', this._formValidationValidateCallback);
@@ -61,10 +66,10 @@
     },
     events: {
       '_form-validation-inputs-check-in': function() {
-        this._formValidationInputs++;
+        this.form.formValidationInputs++;
       },
       '_form-validation-inputs-check-out': function() {
-        this._formValidationInputs--;
+        this.form.formValidationInputs--;
       }
     }
   };

data/app/assets/javascripts/codelation_ui/std.js

@@ -1 +1,3 @@
-//= require_tree ./std
+//= require_tree ./std/interfaces
+//= require_tree ./std/computed_interfaces
+//= require_tree ./std/components

data/app/assets/javascripts/codelation_ui/std/components/info.js

@@ -0,0 +1,22 @@
+(function() {
+  "use strict";
+  
+  var template = '<div class="vue-info" :style="{\'font-size\': size + \'px\'}">\
+                      <i class=\"fa fa-question vue-info-hint\"></i>\
+                      <span class="vue-info-message" :class="[direction]">\
+                        <slot></slot>\
+                      </span>\
+                    </div>';
+
+  App.vue.components.vueInfo = Vue.extend({
+    template: template,
+    props: {
+      'size': {
+        default: '12'
+      },
+      'direction': {
+        default: ''
+      }
+    }
+  });
+})();

data/app/assets/javascripts/codelation_ui/std/components/transition.js

@@ -0,0 +1,26 @@
+(function() {
+  "use strict";
+  
+  var template = '<div v-if="pageTransitionFinished" :transition="transitionName"><slot></slot></div>';
+
+  App.vue.components.vueTransition = Vue.extend({
+    props: {
+      transitionName: {
+        type: String,
+        default: "v-fade-up"
+      }
+    },
+    template: template,
+    data: function() {
+      return {
+        pageTransitionFinished: false
+      }
+    },
+    ready: function() {
+      var self = this;
+      this.$nextTick(function() {
+        self.pageTransitionFinished = true;
+      });
+    }
+  });
+})();

data/app/assets/javascripts/codelation_ui/std/computed_interfaces/mockAPI.js

@@ -0,0 +1,17 @@
+App.vue.computedInterfaces.mockAPI = function(data, objectString, queryData) {
+  return {
+    ready: function() {
+      var self = this;
+      this.$nextTick(function(){
+        self[objectString] = data;
+        self.queryData = queryData || {};
+        self.ready();
+      });
+    },
+    methods: {
+      ready: function() {
+
+      }
+    }
+  }
+}

data/app/assets/javascripts/codelation_ui/std/interfaces/array.js

@@ -0,0 +1,28 @@
+(function(){
+  "use strict";
+
+  App.vue.interfaces.array = {
+    methods: {
+      _uniq: function(arr) {
+        if (arr.constructor === Array) {
+          var seen = {};
+          var out = [];
+          var len = arr.length;
+          var j = 0;
+          for(var i = 0; i < len; i++) {
+               var item = arr[i];
+               if(seen[item] !== 1) {
+                     seen[item] = 1;
+                     out[j++] = item;
+               }
+          }
+          return out;
+        }else{
+          console.warn("_uniq only supports arrays");
+          return -1;
+        }
+      }
+    }
+  }
+
+})();

data/app/assets/javascripts/codelation_ui/std/interfaces/content_formatters.js

@@ -1,26 +1,53 @@
 (function() {
   "use strict";
+  
+  // Config options
+  App.vue.config.contentFormatters = {
+    'empty': '--',
+    'currency': '0,0[.]00',
+    'percent': '0,0[.]00',
+    'number': '0,0[.]00',
+    'date': 'MM/DD/YYYY',
+  };
+  
   App.vue.interfaces.contentFormatters = {
     methods: {
-      _formatToCurrency: function(value, custom_number_format) {
-        return numeral(value).format('$' + (custom_number_format || '0,0[.]00'));
+      _formatToCurrency: function(value, custom_number_format, nullReturn) {
+        if (value === undefined || value === null || isNaN(value)) {
+         return nullReturn || App.vue.config.contentFormatters.empty; 
+        }
+        return App.vue.interfaces.number.methods._numeral(value).format('$' + (custom_number_format || App.vue.config.contentFormatters.currency));
       },
-      _formatToPercent: function(value, custom_number_format) {
-        return numeral(value / 100).format((custom_number_format || '0,0[.]00') + '%');
+      _formatToPercent: function(value, custom_number_format, nullReturn) {
+        if (value === undefined || value === null || isNaN(value)) {
+         return nullReturn || App.vue.config.contentFormatters.empty; 
+        }
+        return App.vue.interfaces.number.methods._numeral(value / 100).format((custom_number_format || App.vue.config.contentFormatters.percent) + '%');
       },
-      _formatToNumber: function(value, custom_number_format) {
-        return numeral(value).format(custom_number_format || '0,0[.]00');
+      _formatToNumber: function(value, custom_number_format, nullReturn) {
+        if (value === undefined || value === null || isNaN(value)) {
+         return nullReturn || App.vue.config.contentFormatters.empty; 
+        }
+        return App.vue.interfaces.number.methods._numeral(value).format(custom_number_format || App.vue.config.contentFormatters.number);
       },
-      _formatToPhoneNumber: function(value) {
-        var r = /(?:(\+?(?:(\d{1,2}))\s?)?(\(?(?:(\d{3}))\)?(\s|-|\.)?)((?:(\d{3}))(\s|-|\.)?)((?:(\d{4}))))/i;
+      _formatToPhoneNumber: function(value, reg, nullReturn) {
+        if (value === undefined || value === null) {
+         return nullReturn || App.vue.config.contentFormatters.empty; 
+        }
+        var r = reg || /(?:(\+?(?:(\d{1,2}))\s?)?(\(?(?:(\d{3}))\)?(\s|-|\.)?)((?:(\d{3}))(\s|-|\.)?)((?:(\d{4}))))/i;
         var match = r.exec(value);
         if (match !== null && match.length === 11) {
           var areaCode = match[2] || 1;
           return '+' + areaCode + ' (' + match[4] + ') ' + match[7] + '-' + match[10];
+        }else{
+          return nullReturn || App.vue.config.contentFormatters.empty; 
         }
       },
-      _formatToDate: function(value) {
-        return moment(date).format('MM/DD/YYYY');
+      _formatToDate: function(value, custom_format, nullReturn) {
+        if (value === undefined || value === null || !this._moment(value).isValid()) {
+         return nullReturn || App.vue.config.contentFormatters.empty; 
+        }
+        return App.vue.interfaces.date.methods._moment(value).format(custom_format || App.vue.config.contentFormatters.date);
       }
     }
   };

data/app/assets/javascripts/codelation_ui/std/interfaces/date.js

@@ -0,0 +1,8 @@
+(function() {
+  App.vue.interfaces.date = {
+    methods: {
+    // Includes the Momentjs Library
+      _moment: moment
+    }
+  };
+})();

data/app/assets/javascripts/codelation_ui/std/interfaces/number.js

@@ -0,0 +1,20 @@
+
+(function(){
+  "use strict";
+
+  App.vue.interfaces.number = {
+    methods: {
+      _numeral: numeral,
+      // checks if the denominator is zero and returns zero
+      _safeDivide: function(num, den) {
+        if (den === 0) {
+          return 0;
+        } else {
+          // Mult by float ensures that decimals are not stripped like dividing two integers can cause
+          return (num * 1.0) / den;
+        }
+      }
+    }
+  }
+
+})();

data/app/assets/javascripts/codelation_ui/std/interfaces/rest_api.js

@@ -0,0 +1,104 @@
+(function(){
+  "use strict";
+
+  // Config options
+  App.vue.config.restApi = {
+    'options': {},
+    'version': null
+  };
+  
+  // Alias for old names
+  App.vue.config.rest_api = App.vue.config.restApi;
+  
+  
+
+  function url() {
+    if (App.vue.config.restApi.version === null) {
+      return '/api';
+    }else{
+      return '/api/v' + App.vue.config.restApi.version;
+    }
+  }
+
+  function toPath(model) {
+    var pluralModel = App.vue.interfaces.string.methods._pluralize(model);
+    var modelPath = App.vue.interfaces.string.methods._dasherize(pluralModel);
+    return url() + '/' + modelPath;
+  }
+
+  function queryStringFromOptions(options_arg, defaultOptions_arg) {
+    var queries = [];
+
+    var options = options_arg || {};
+    var defaultOptions = defaultOptions_arg || {};
+    
+    // Add options to default options (overwrites any default)
+    Object.keys(options).forEach(function(key) {
+      defaultOptions[key] = options[key];
+    });
+
+    Object.keys(defaultOptions).forEach(function(key) {
+      queries.push(App.vue.interfaces.string.methods._underscore(key) + "=" + defaultOptions[key]);
+    });
+
+    if (queries.length > 0) {
+      return '?'+queries.join('&');
+    } else {
+      return '';
+    }
+  }
+
+  App.vue.interfaces.restApi = {
+    methods: {
+      _sendRequest: function(url, method, data) {
+        return $.ajax({
+          url: url,
+          type: method || 'GET',
+          data: data || {}
+        });
+      },
+      _restfulGet: function(model, id, options) {
+        if (App.vue.interfaces.contentValidators.methods._valueIsEmpty(id)) {
+          return App.vue.interfaces.restApi.methods._restfulGetAll(model, options);
+        }else{
+          var url = toPath(model);
+          var path = url + '/' + id;
+        }
+        var requestUrl = path + queryStringFromOptions(options, App.vue.config.restApi.options);
+        return App.vue.interfaces.restApi.methods._sendRequest(requestUrl, 'GET');
+      },
+      _restfulGetAll: function(model, options) {
+        var requestUrl = toPath(model) + queryStringFromOptions(options, App.vue.config.restApi.options);
+        return App.vue.interfaces.restApi.methods._sendRequest(requestUrl, 'GET');
+      },
+      _restfulCreate: function(model, id, data, options) {
+        var url = toPath(model);
+        var path = url;
+        var requestUrl = path + queryStringFromOptions(options, App.vue.config.restApi.options);
+        return App.vue.interfaces.restApi.methods._sendRequest(requestUrl, 'POST', data);
+      },
+      _restfulUpdate: function(model, id, data, options) {
+        var url = toPath(model);
+        if (App.vue.interfaces.contentValidators.methods._valueIsEmpty(id)) {
+          var path = url + '/';
+        }else{
+          var path = url + '/' + id;
+        }
+        var requestUrl = path + queryStringFromOptions(options, App.vue.config.restApi.options);
+        return App.vue.interfaces.restApi.methods._sendRequest(requestUrl, 'PATCH', data);
+      },
+      _restfulDelete: function(model, id, options) {
+        var url = toPath(model);
+        if (App.vue.interfaces.contentValidators.methods._valueIsEmpty(id)) {
+          var path = url + '/';
+        }else{
+          var path = url + '/' + id;
+        }
+        var requestUrl = path + queryStringFromOptions(options, App.vue.config.restApi.options);
+        return App.vue.interfaces.restApi.methods._sendRequest(requestUrl, 'DELETE');
+      }
+    }
+  }
+  
+  App.vue.interfaces.rest_api = App.vue.interfaces.restApi;
+})();

data/app/assets/javascripts/codelation_ui/std/interfaces/string.js

@@ -0,0 +1,29 @@
+(function(){
+  "use strict";
+
+  App.vue.interfaces.string = {
+    methods: {
+      // Replaces spaces and reverts capital letters to lowercase with underscore before them.
+      _underscore: function(string) {
+        return string.replace((/([a-z\d])([A-Z])/g), '$1_$2')
+                     .toLowerCase()
+                     .replace((/[ -]/g), '_');
+      },
+      // Changes the word into the plural form
+      _pluralize: pluralize,
+      // Replaces spaces and reverts capital letters to lowercase with dash before them.
+      _dasherize: function(string) {
+        return string.replace((/([a-z\d])([A-Z])/g), '$1_$2')
+                     .toLowerCase()
+                     .replace((/[ _]/g), '-');
+      },
+      // Changes a character after any break in the string to the capital version
+      _titleize: function(string) {
+        return string.replace((/([a-z\d])([A-Z])/g), '$1_$2').toLowerCase().replace(/(?:^|\s|-|_)\S/g, function(m) {
+          return m.toUpperCase();
+        }).replace((/[ _-]/g), ' ');
+      }
+    }
+  }
+
+})();

data/app/assets/javascripts/codelation_ui/vue.js

@@ -1,13 +1,30 @@
 //= require vue
-//= require ./std
 //= require_self
-
+//= require ./std
 
 App.vue = {
-  interfaces: {},
-  components: {},
-  config: {}
+  _info: 'Contains object references to all functionality that the UI offers as well as the reference to the root vue component',
+  interfaces: {
+    _info: 'Used for containing mixins and methods used for vue'
+  },
+  computedInterfaces: {
+    _info: 'Same as interfaces except accepts arguments to alter the mixin before applying it to the component'
+  },
+  globalComponents: {
+    _info: 'Used to define all global components'
+  },
+  components: {
+    _info: 'Used to hold references to various vue components you may use or are not defined globaly'
+  },
+  config: {
+    _info: 'Used to customize the functionality for some interfaces and components',
+    main: {
+      showInterfaces: true,
+      includedInterfaces: []
+    }
+  },
+  root: null,
+  extend: {
+    _info: 'Used to hold references to per page components and attach to the root component if you did not define one.'
+  }
 }
-
-console.warn("Loaded Vue Interfaces")
-console.warn(App.vue.interfaces);