Added demo components for dev
Change-Id: Ibfe137d4e65154dc8dae2078c3eac794303b5484
diff --git a/dev/index.html b/dev/index.html
index 44fa838..dea5eef 100644
--- a/dev/index.html
+++ b/dev/index.html
@@ -13,9 +13,9 @@
</head>
<body style="padding-top: 50px">
<div ng-app="ngXosLib" class="container">
- <div ng-controller="testCtrl as vm">
- <xos-form ng-model="vm.model" config="vm.config"></xos-form>
- </div>
+ <nav-demo></nav-demo>
+
+ <div ui-view></div>
</div>
<!-- bower:js -->
<script src="../bower_components/angular/angular.js"></script>
@@ -36,8 +36,8 @@
<script src="/ui_components/dumbComponents/validation/validation.component.js"></script>
<script src="/ui_components/dumbComponents/table/table.component.js"></script>
<script src="/ui_components/dumbComponents/pagination/pagination.component.js"></script>
- <script src="/ui_components/dumbComponents/form/form.component.js"></script>
<script src="/ui_components/dumbComponents/field/field.component.js"></script>
+ <script src="/ui_components/dumbComponents/form/form.component.js"></script>
<script src="/ui_components/dumbComponents/alert/alert.component.js"></script>
<script src="/services/helpers/ui/label_formatter.service.js"></script>
<script src="/services/helpers/ui/form.helpers.js"></script>
@@ -74,6 +74,11 @@
<script src="/services/csrfToken.interceptor.js"></script>
<script src="/index.ngdoc.js"></script>
<!-- endinject -->
- <script src="main.js"></script>
+ <script src="js/main.js"></script>
+ <script src="js/form.dev.js"></script>
+ <script src="js/field.dev.js"></script>
+ <script src="js/alert.dev.js"></script>
+ <script src="js/table.dev.js"></script>
+
</body>
</html>
\ No newline at end of file
diff --git a/dev/js/alert.dev.js b/dev/js/alert.dev.js
new file mode 100644
index 0000000..6d5cefc
--- /dev/null
+++ b/dev/js/alert.dev.js
@@ -0,0 +1,32 @@
+'use strict';
+
+angular.module('ngXosLib')
+ .component('alertTest', {
+ restrict: 'E',
+ bindings: {},
+ bindToController: true,
+ controllerAs: 'vm',
+ templateUrl: 'templates/alert.dev.html',
+ controller: function () {
+ this.config1 = {
+ type: 'danger'
+ };
+
+ this.config2 = {
+ type: 'danger',
+ closeBtn: true
+ };
+
+ this.config3 = {
+ type: 'info'
+ };
+
+ this.config4 = {
+ type: 'success'
+ };
+
+ this.config5 = {
+ type: 'warning'
+ };
+ }
+ })
\ No newline at end of file
diff --git a/dev/js/field.dev.js b/dev/js/field.dev.js
new file mode 100644
index 0000000..656aec9
--- /dev/null
+++ b/dev/js/field.dev.js
@@ -0,0 +1,52 @@
+'use strict';
+
+angular.module('ngXosLib')
+ .component('fieldTest', {
+ restrict: 'E',
+ bindings: {},
+ bindToController: true,
+ controllerAs: 'vm',
+ templateUrl: 'templates/field.dev.html',
+ controller: function () {
+ this.field1 = {
+ name: 'number-field',
+ field: {label: 'My Number Value:', type: 'number'},
+ model: 2
+ };
+
+ this.field2 = {
+ name: 'date-field',
+ field: {label: 'My Date Value:', type: 'date'},
+ model: new Date()
+ };
+
+ this.field3 = {
+ name: 'boolean-field',
+ field: {label: 'My Boolean Value:', type: 'boolean'},
+ model: true
+ };
+
+ this.field4 = {
+ name: 'email-field',
+ field: {label: 'My Email Value:', type: 'email'},
+ model: 'sample@domain.us'
+ };
+ this.field5 = {
+ name: 'Empty Object Field',
+ label: 'Empty Object Field',
+ type: 'object',
+ properties: {
+ foo: {
+ label: 'FooLabel:',
+ type: 'string',
+ validators: {
+ required: true
+ }
+ },
+ bar: {
+ type: 'number'
+ }
+ }
+ }
+ }
+ });
\ No newline at end of file
diff --git a/dev/js/form.dev.js b/dev/js/form.dev.js
new file mode 100644
index 0000000..99afda0
--- /dev/null
+++ b/dev/js/form.dev.js
@@ -0,0 +1,62 @@
+'use strict';
+
+angular.module('ngXosLib')
+ .component('formTest', {
+ restrict: 'E',
+ bindings: {},
+ bindToController: true,
+ controllerAs: 'vm',
+ templateUrl: 'templates/form.dev.html',
+ controller: function () {
+ this.model = {
+ first_name: 'Jhon',
+ last_name: 'Doe',
+ },
+ this.config = {
+ exclude: ['password', 'last_login'],
+ formName: 'sampleForm',
+ actions: [
+ {
+ label: 'Save',
+ icon: 'ok', // refers to bootstraps glyphicon
+ cb: (user) => { // receive the model
+ console.log(user);
+ },
+ class: 'success'
+ }
+ ],
+ fields: {
+ first_name: {
+ type: 'string',
+ validators: {
+ required: true
+ }
+ },
+ last_name: {
+ label: 'Surname',
+ type: 'string',
+ validators: {
+ required: true,
+ minlength: 10
+ }
+ },
+ details_field: {
+ label: 'Empty Object Field',
+ type: 'object',
+ properties: {
+ foo: {
+ label: 'FooLabel:',
+ type: 'string',
+ validators: {
+ required: true
+ }
+ },
+ bar: {
+ type: 'number'
+ }
+ }
+ }
+ }
+ }
+ }
+ })
\ No newline at end of file
diff --git a/dev/js/main.js b/dev/js/main.js
new file mode 100644
index 0000000..6026569
--- /dev/null
+++ b/dev/js/main.js
@@ -0,0 +1,74 @@
+/* eslint-disable angular/ng_module_name */
+(function(){
+ 'use strict';
+ console.log('hello!');
+ angular.module('ngXosLib', ['xos.helpers', 'ui.router'])
+ .run(function () {
+ console.info('Dev Environment ready!')
+ })
+ .config(($stateProvider) => {
+ $stateProvider
+ .state('form-test', {
+ url: '/form/',
+ template: '<form-test></form-test>'
+ })
+ .state('table-test', {
+ url: '/table/',
+ template: '<table-test></table-test>'
+ })
+ .state('alert-test', {
+ url: '/alert/',
+ template: '<alert-test></alert-test>'
+ })
+ .state('field-test', {
+ url: '/field/',
+ template: '<field-test></field-test>'
+ })
+ })
+ .component('navDemo', {
+ restrict: 'E',
+ bindings: {},
+ bindToController: true,
+ controllerAs: 'vm',
+ templateUrl: 'templates/nav.dev.html',
+ controller: function ($rootScope) {
+
+ this.active = 'form';
+
+ $rootScope.$on('$stateChangeSuccess', (event, toState, toParams, fromState, fromParams)=> {
+
+ let strSelected = toState.url.split('/').join('');
+ this.active = strSelected.charAt(0).toUpperCase() + strSelected.slice(1);
+ });
+
+ this.config = {
+ actions: [
+ {
+ label: 'Form',
+ class: '',
+ link: '/#/form/'
+ },
+ {
+ label: 'Field',
+ class: '',
+ link: '/#/field/'
+
+ },
+ {
+ label: 'Alert',
+ class: '',
+ link: '/#/alert/'
+
+ },
+ {
+ label: 'Table',
+ class: '',
+ link: '/#/table/'
+
+ }
+ ]
+ }
+ }
+ });
+
+})();
\ No newline at end of file
diff --git a/dev/js/table.dev.js b/dev/js/table.dev.js
new file mode 100644
index 0000000..4ac974d
--- /dev/null
+++ b/dev/js/table.dev.js
@@ -0,0 +1,25 @@
+'use strict';
+
+angular.module('ngXosLib')
+ .component('tableTest', {
+ restrict: 'E',
+ bindings: {},
+ bindToController: true,
+ controllerAs: 'vm',
+ templateUrl: 'templates/table.dev.html',
+ controller: function () {
+ this.config = {
+ columns: [
+ {
+ label: '#',
+ prop: 'id'
+ },
+ {
+ label: 'Name:',
+ prop: 'name'
+ }
+ ]
+ };
+ this.data = [{id: 1, name: 'Jhon'}]
+ }
+ })
\ No newline at end of file
diff --git a/dev/main.js b/dev/main.js
deleted file mode 100644
index f7ab8eb..0000000
--- a/dev/main.js
+++ /dev/null
@@ -1,61 +0,0 @@
-/* eslint-disable angular/ng_module_name */
-(function () {
- 'use strict';
- console.log('hello1!');
- angular.module('ngXosLib', ['xos.helpers'])
- .run(function(){
- console.info('Dev Environment ready!')
- })
- .controller('testCtrl', function(){
- this.model = {
- first_name: 'Jhon',
- last_name: 'Doe',
- }
- this.config = {
- exclude: ['password', 'last_login'],
- formName: 'sampleForm',
- actions: [
- {
- label: 'Save',
- icon: 'ok', // refers to bootstraps glyphicon
- cb: (user) => { // receive the model
- console.log(user);
- },
- class: 'success'
- }
- ],
- fields: {
- first_name: {
- type: 'string',
- validators: {
- required: true
- }
- },
- last_name: {
- label: 'Surname',
- type: 'string',
- validators: {
- required: true,
- minlength: 10
- }
- },
- details_field: {
- label: 'Empty Object Field',
- type: 'object',
- properties: {
- foo: {
- label: 'FooLabel:',
- type: 'string',
- validators: {
- required: true
- }
- },
- bar: {
- type: 'number'
- }
- }
- }
- }
- };
- });
-})();
\ No newline at end of file
diff --git a/dev/templates/alert.dev.html b/dev/templates/alert.dev.html
new file mode 100644
index 0000000..a528e7e
--- /dev/null
+++ b/dev/templates/alert.dev.html
@@ -0,0 +1,16 @@
+
+<xos-alert config="vm.config1">
+ A sample alert message
+</xos-alert>
+<xos-alert config="vm.config2">
+ A sample alert message (with close button)
+</xos-alert>
+<xos-alert config="vm.config3">
+ A sample info message
+</xos-alert>
+<xos-alert config="vm.config4">
+ A sample success message
+</xos-alert>
+<xos-alert config="vm.config5">
+ A sample warning message
+</xos-alert>
\ No newline at end of file
diff --git a/dev/templates/field.dev.html b/dev/templates/field.dev.html
new file mode 100644
index 0000000..2a24150
--- /dev/null
+++ b/dev/templates/field.dev.html
@@ -0,0 +1,5 @@
+<xos-field ng-model="vm.field1.model" name="vm.field1.name" field="vm.field1.field"></xos-field>
+<xos-field ng-model="vm.field2.model" name="vm.field2.name" field="vm.field2.field"></xos-field>
+<xos-field ng-model="vm.field3.model" name="vm.field3.name" field="vm.field3.field"></xos-field>
+<xos-field ng-model="vm.field4.model" name="vm.field4.name" field="vm.field4.field"></xos-field>
+<xos-field ng-model="vm.field5.model" name="vm.field5.name" field="vm.field5"></xos-field>
diff --git a/dev/templates/form.dev.html b/dev/templates/form.dev.html
new file mode 100644
index 0000000..d2f12ff
--- /dev/null
+++ b/dev/templates/form.dev.html
@@ -0,0 +1 @@
+<xos-form ng-model="vm.model" config="vm.config"></xos-form>
diff --git a/dev/templates/nav.dev.html b/dev/templates/nav.dev.html
new file mode 100644
index 0000000..6dfbcae
--- /dev/null
+++ b/dev/templates/nav.dev.html
@@ -0,0 +1,7 @@
+<nav class="navbar navbar-default">
+ <div class="">
+ <ul class="nav navbar-nav">
+ <li ng-repeat="action in vm.config.actions" ng-class="{active:vm.active==action.label}"><a href="{{action.link}}">{{action.label}} </a></li>
+ </ul>
+ </div>
+</nav>
\ No newline at end of file
diff --git a/dev/templates/table.dev.html b/dev/templates/table.dev.html
new file mode 100644
index 0000000..41c10bf
--- /dev/null
+++ b/dev/templates/table.dev.html
@@ -0,0 +1 @@
+<xos-table config="vm.config" data="vm.data"></xos-table>
\ No newline at end of file