Documented UI component: table
diff --git a/views/ngXosLib/gulp/ngXosHelpers.js b/views/ngXosLib/gulp/ngXosHelpers.js
index 7424218..c9915e2 100644
--- a/views/ngXosLib/gulp/ngXosHelpers.js
+++ b/views/ngXosLib/gulp/ngXosHelpers.js
@@ -7,6 +7,7 @@
var del = require('del');
var babel = require('gulp-babel');
const sourcemaps = require('gulp-sourcemaps');
+var browserSync = require('browser-sync').create();
module.exports = function(options){
@@ -49,15 +50,18 @@
});
gulp.task('cleanDocs', function(){
- console.log(options);
return del([options.docs + '**/*']);
});
- gulp.task('docs', ['cleanDocs'], function(){
+ gulp.task('makeDocs', ['cleanDocs'], function(){
var ngOptions = {
scripts: [
'http://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js',
- 'http://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-animate.min.js'
+ 'http://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-animate.min.js',
+ `${options.ngXosVendor}ngXosHelpers.js`
+ ],
+ styles: [
+ 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css',
],
html5Mode: true,
title: 'XOS Helpers documentation',
@@ -68,7 +72,8 @@
module: {
glob: [
options.xosHelperSource + '*.js',
- options.xosHelperSource + 'services/*.js'
+ options.xosHelperSource + 'services/*.js',
+ options.xosHelperSource + 'ui_components/**/*.js'
],
title: 'Module Documentation',
},
@@ -82,6 +87,33 @@
}).pipe(gulpDocs.process(ngOptions)).pipe(gulp.dest('./docs'));
});
+ gulp.task('serveDocs', function(){
+ browserSync.init({
+ server: {
+ baseDir: './docs',
+ routes: {
+ '/xos/core/xoslib/static/js/vendor': options.ngXosVendor
+ }
+ }
+ });
+ });
+
+ gulp.task('docs', ['makeDocs', 'serveDocs'], function(){
+
+ var files = [
+ options.xosHelperSource + '*.js',
+ options.xosHelperSource + 'services/*.js',
+ options.xosHelperSource + 'ui_components/**/*.js'
+ ];
+
+ gulp.watch(files, ['makeDocs']);
+
+ gulp.watch(files, function(){
+ console.log('Reload');
+ browserSync.reload();
+ });
+ })
+
gulp.task('dev', function(){
gulp.watch(options.xosHelperSource + '**/*.js', ['helpersDev']);
});
diff --git a/views/ngXosLib/package.json b/views/ngXosLib/package.json
index 6f1060a..9e8906c 100644
--- a/views/ngXosLib/package.json
+++ b/views/ngXosLib/package.json
@@ -7,7 +7,7 @@
"test": "karma start",
"apigen": "node apigen/blueprintToNgResource.js",
"swagger": "node xos-swagger-def.js",
- "doc": "gulp docs; cd ./docs; http-server -o -c-1",
+ "doc": "gulp docs; cd ./docs",
"build": "gulp vendor && gulp helpers",
"dev": "gulp dev"
},
@@ -25,6 +25,7 @@
},
"devDependencies": {
"babel-preset-es2015": "^6.6.0",
+ "browser-sync": "^2.12.3",
"concat": "^2.0.0",
"del": "^2.2.0",
"gulp": "^3.9.0",
@@ -35,7 +36,6 @@
"gulp-ngdocs": "^0.2.13",
"gulp-sourcemaps": "^1.6.0",
"gulp-uglify": "^1.4.2",
- "http-server": "^0.9.0",
"jasmine-core": "^2.4.1",
"karma": "^0.13.19",
"karma-babel-preprocessor": "^6.0.1",
diff --git a/views/ngXosLib/xos/core/xoslib/static/js/vendor/ngXosHelpers.js b/views/ngXosLib/xos/core/xoslib/static/js/vendor/ngXosHelpers.js
new file mode 100644
index 0000000..6aecaf1
--- /dev/null
+++ b/views/ngXosLib/xos/core/xoslib/static/js/vendor/ngXosHelpers.js
@@ -0,0 +1,421 @@
+'use strict';
+
+/**
+ * © OpenCORD
+ *
+ * Visit http://guide.xosproject.org/devguide/addview/ for more information
+ *
+ * Created by teone on 3/24/16.
+ */
+
+(function () {
+ 'use strict';
+
+ /**
+ * @ngdoc overview
+ * @name xos.uiComponents.table
+ * @description A table component
+ **/
+
+ angular.module('xos.uiComponents.table', [])
+
+ /**
+ * @ngdoc directive
+ * @name xos.uiComponents.table.directive:xosTable
+ * @restrict E
+ * @description The xos-table directive
+ * @element ANY
+ * @scope
+ * @example
+ <example module="sampleModule">
+ <file name="index.html">
+ <div ng-controller="SampleCtrl1 as vm">
+ <xos-table data="vm.data" config="vm.config"></xos-table>
+ </xos-table>
+ </div>
+ </file>
+ <file name="script.js">
+ angular.module('sampleModule', ['xos.uiComponents.table'])
+ .controller('SampleCtrl1', function(){
+ this.config = {
+ columns: [
+ {
+ label: 'First Name',
+ prop: 'name'
+ },
+ {
+ label: 'Last Name',
+ prop: 'lastname'
+ }
+ ]
+ };
+ this.data = [
+ {
+ name: 'John',
+ lastname: 'Doe'
+ },
+ {
+ name: 'Gili',
+ lastname: 'Fereydoun'
+ }
+ ]
+ });
+ </file>
+ </example>
+ <example module="sampleModule">
+ <file name="index.html">
+ <div ng-controller="SampleCtrl2 as vm">
+ <xos-table data="vm.data" config="vm.config"></xos-table>
+ </xos-table>
+ </div>
+ </file>
+ <file name="script.js">
+ angular.module('sampleModule', ['xos.uiComponents.table'])
+ .controller('SampleCtrl2', function(){
+ this.config = {
+ columns: [
+ {
+ label: 'First Name',
+ prop: 'name'
+ },
+ {
+ label: 'Last Name',
+ prop: 'lastname'
+ }
+ ],
+ classes: 'table table-striped table-condensed',
+ actions: [
+ {
+ label: 'delete',
+ icon: 'remove',
+ cb: (user) => {
+ console.log(user);
+ },
+ color: 'red'
+ }
+ ]
+ };
+ this.data = [
+ {
+ name: 'John',
+ lastname: 'Doe'
+ },
+ {
+ name: 'Gili',
+ lastname: 'Fereydoun'
+ }
+ ]
+ });
+ </file>
+ </example>
+ **/
+
+ .directive('xosTable', function () {
+ return {
+ restrict: 'E',
+ scope: {
+ data: '=',
+ config: '='
+ },
+ template: '\n <!-- <pre>{{vm.data | json}}</pre> -->\n <table ng-class="vm.classes" ng-show="vm.data.length > 0">\n <thead>\n <tr>\n <th ng-repeat="col in vm.columns">{{col.label}}</th>\n <th ng-if="vm.config.actions">Actions</th>\n </tr>\n </thead>\n <tbody>\n <tr ng-repeat="item in vm.data">\n <td ng-repeat="col in vm.columns">{{item[col.prop]}}</td>\n <td ng-if="vm.config.actions">\n <i\n ng-repeat="action in vm.config.actions"\n ng-click="action.cb(item)"\n class="glyphicon glyphicon-{{action.icon}}"\n style="color: {{action.color}};"></i>\n </td>\n </tr>\n </tbody>\n </table>\n ',
+ bindToController: true,
+ controllerAs: 'vm',
+ controller: function controller() {
+
+ if (!this.config) {
+ throw new Error('[xosTable] Please provide a configuration via the "config" attribute');
+ }
+
+ if (!this.config.columns) {
+ throw new Error('[xosTable] Please provide a columns list in the configuration');
+ }
+
+ this.columns = this.config.columns;
+ this.classes = this.config.classes || 'table table-striped table-bordered';
+
+ if (this.config.actions) {}
+ }
+ };
+ });
+})();
+//# sourceMappingURL=../../maps/ui_components/table/table.component.js.map
+
+'use strict';
+
+(function () {
+ 'use strict';
+
+ config.$inject = ["$httpProvider", "$interpolateProvider", "$resourceProvider"];
+ angular.module('bugSnag', []).factory('$exceptionHandler', function () {
+ return function (exception, cause) {
+ if (window.Bugsnag) {
+ Bugsnag.notifyException(exception, { diagnostics: { cause: cause } });
+ } else {
+ console.error(exception, cause, exception.stack);
+ }
+ };
+ });
+
+ /**
+ * @ngdoc overview
+ * @name xos.helpers
+ * @description this is the module that group all the helpers service and components for XOS
+ **/
+
+ angular.module('xos.helpers', ['ngCookies', 'ngResource', 'bugSnag', 'xos.uiComponents']).config(config);
+
+ function config($httpProvider, $interpolateProvider, $resourceProvider) {
+ $httpProvider.interceptors.push('SetCSRFToken');
+
+ $interpolateProvider.startSymbol('{$');
+ $interpolateProvider.endSymbol('$}');
+
+ // NOTE http://www.masnun.com/2013/09/18/django-rest-framework-angularjs-resource-trailing-slash-problem.html
+ $resourceProvider.defaults.stripTrailingSlashes = false;
+ }
+})();
+//# sourceMappingURL=maps/xosHelpers.module.js.map
+
+'use strict';
+
+(function () {
+ 'use strict';
+
+ angular.module('xos.helpers')
+ /**
+ * @ngdoc service
+ * @name xos.helpers.vSG-Collection
+ * @description Angular resource to fetch /api/service/vsg/
+ **/
+ .service('vSG-Collection', ["$resource", function ($resource) {
+ return $resource('/api/service/vsg/');
+ }]);
+})();
+//# sourceMappingURL=../../maps/services/rest/vSG.js.map
+
+'use strict';
+
+(function () {
+ 'use strict';
+
+ angular.module('xos.helpers')
+ /**
+ * @ngdoc service
+ * @name xos.helpers.vOLT-Collection
+ * @description Angular resource to fetch /api/tenant/cord/volt/:volt_id/
+ **/
+ .service('vOLT-Collection', ["$resource", function ($resource) {
+ return $resource('/api/tenant/cord/volt/:volt_id/', { volt_id: '@id' });
+ }]);
+})();
+//# sourceMappingURL=../../maps/services/rest/vOLT.js.map
+
+'use strict';
+
+(function () {
+ 'use strict';
+
+ angular.module('xos.helpers')
+ /**
+ * @ngdoc service
+ * @name xos.helpers.Users
+ * @description Angular resource to fetch /api/core/users/
+ **/
+ .service('Users', ["$resource", function ($resource) {
+ return $resource('/api/core/users/');
+ }]);
+})();
+//# sourceMappingURL=../../maps/services/rest/Users.js.map
+
+'use strict';
+
+(function () {
+ 'use strict';
+
+ angular.module('xos.helpers')
+ /**
+ * @ngdoc service
+ * @name xos.helpers.Truckroll-Collection
+ * @description Angular resource to fetch /api/tenant/truckroll/:truckroll_id/
+ **/
+ .service('Truckroll-Collection', ["$resource", function ($resource) {
+ return $resource('/api/tenant/truckroll/:truckroll_id/', { truckroll_id: '@id' });
+ }]);
+})();
+//# sourceMappingURL=../../maps/services/rest/Truckroll.js.map
+
+'use strict';
+
+(function () {
+ 'use strict';
+
+ angular.module('xos.helpers')
+ /**
+ * @ngdoc service
+ * @name xos.helpers.Subscribers
+ * @description Angular resource to fetch /api/tenant/cord/subscriber/:subscriber_id/
+ **/
+ .service('Subscribers', ["$resource", function ($resource) {
+ return $resource('/api/tenant/cord/subscriber/:subscriber_id/', { subscriber_id: '@id' });
+ }])
+ /**
+ * @ngdoc service
+ * @name xos.helpers.Subscriber-features
+ * @description Angular resource to fetch /api/tenant/cord/subscriber/:subscriber_id/features/
+ **/
+ .service('Subscriber-features', ["$resource", function ($resource) {
+ return $resource('/api/tenant/cord/subscriber/:subscriber_id/features/', { subscriber_id: '@id' });
+ }])
+ /**
+ * @ngdoc service
+ * @name xos.helpers.Subscriber-features-uplink_speed
+ * @description Angular resource to fetch /api/tenant/cord/subscriber/:subscriber_id/features/uplink_speed/
+ **/
+ .service('Subscriber-features-uplink_speed', ["$resource", function ($resource) {
+ return $resource('/api/tenant/cord/subscriber/:subscriber_id/features/uplink_speed/', { subscriber_id: '@id' });
+ }])
+ /**
+ * @ngdoc service
+ * @name xos.helpers.Subscriber-features-downlink_speed
+ * @description Angular resource to fetch /api/tenant/cord/subscriber/:subscriber_id/features/downlink_speed/
+ **/
+ .service('Subscriber-features-downlink_speed', ["$resource", function ($resource) {
+ return $resource('/api/tenant/cord/subscriber/:subscriber_id/features/downlink_speed/', { subscriber_id: '@id' });
+ }])
+ /**
+ * @ngdoc service
+ * @name xos.helpers.Subscriber-features-cdn
+ * @description Angular resource to fetch /api/tenant/cord/subscriber/:subscriber_id/features/cdn/
+ **/
+ .service('Subscriber-features-cdn', ["$resource", function ($resource) {
+ return $resource('/api/tenant/cord/subscriber/:subscriber_id/features/cdn/', { subscriber_id: '@id' });
+ }])
+ /**
+ * @ngdoc service
+ * @name xos.helpers.Subscriber-features-uverse
+ * @description Angular resource to fetch /api/tenant/cord/subscriber/:subscriber_id/features/uverse/
+ **/
+ .service('Subscriber-features-uverse', ["$resource", function ($resource) {
+ return $resource('/api/tenant/cord/subscriber/:subscriber_id/features/uverse/', { subscriber_id: '@id' });
+ }])
+ /**
+ * @ngdoc service
+ * @name xos.helpers.Subscriber-features-status
+ * @description Angular resource to fetch /api/tenant/cord/subscriber/:subscriber_id/features/status/
+ **/
+ .service('Subscriber-features-status', ["$resource", function ($resource) {
+ return $resource('/api/tenant/cord/subscriber/:subscriber_id/features/status/', { subscriber_id: '@id' });
+ }]);
+})();
+//# sourceMappingURL=../../maps/services/rest/Subscribers.js.map
+
+'use strict';
+
+(function () {
+ 'use strict';
+
+ angular.module('xos.helpers')
+ /**
+ * @ngdoc service
+ * @name xos.helpers.ONOS-Services-Collection
+ * @description Angular resource to fetch /api/service/onos/
+ **/
+ .service('ONOS-Services-Collection', ["$resource", function ($resource) {
+ return $resource('/api/service/onos/');
+ }]);
+})();
+//# sourceMappingURL=../../maps/services/rest/ONOS-Services.js.map
+
+'use strict';
+
+(function () {
+ 'use strict';
+
+ angular.module('xos.helpers')
+ /**
+ * @ngdoc service
+ * @name xos.helpers.ONOS-App-Collection
+ * @description Angular resource to fetch /api/tenant/onos/app/
+ **/
+ .service('ONOS-App-Collection', ["$resource", function ($resource) {
+ return $resource('/api/tenant/onos/app/');
+ }]);
+})();
+//# sourceMappingURL=../../maps/services/rest/ONOS-Apps.js.map
+
+'use strict';
+
+/**
+ * © OpenCORD
+ *
+ * Visit http://guide.xosproject.org/devguide/addview/ for more information
+ *
+ * Created by teone on 3/24/16.
+ */
+
+(function () {
+ 'use strict';
+
+ /**
+ * @ngdoc overview
+ * @name xos.uiComponents
+ * @description A collection of UI components useful for Dashboard development
+ * @requires xos.uiComponents.table
+ **/
+
+ angular.module('xos.uiComponents', ['xos.uiComponents.table']);
+})();
+//# sourceMappingURL=../maps/ui_components/ui-components.module.js.map
+
+'use strict';
+
+(function () {
+ 'use strict';
+
+ /**
+ * @ngdoc service
+ * @name xos.helpers.NoHyperlinks
+ * @description This factory is automatically loaded trough xos.helpers and will add an $http interceptor that will add ?no_hyperlinks=1 to your api request, that is required by django
+ **/
+
+ angular.module('xos.helpers').factory('NoHyperlinks', noHyperlinks);
+
+ function noHyperlinks() {
+ return {
+ request: function request(_request) {
+ if (_request.url.indexOf('.html') === -1) {
+ _request.url += '?no_hyperlinks=1';
+ }
+ return _request;
+ }
+ };
+ }
+})();
+//# sourceMappingURL=../maps/services/noHyperlinks.interceptor.js.map
+
+'use strict';
+
+(function () {
+ 'use strict';
+
+ /**
+ * @ngdoc service
+ * @name xos.helpers.SetCSRFToken
+ * @description This factory is automatically loaded trough xos.helpers and will add an $http interceptor that will the CSRF-Token to your request headers
+ **/
+
+ setCSRFToken.$inject = ["$cookies"];
+ angular.module('xos.helpers').factory('SetCSRFToken', setCSRFToken);
+
+ function setCSRFToken($cookies) {
+ return {
+ request: function request(_request) {
+ if (_request.method !== 'GET') {
+ _request.headers['X-CSRFToken'] = $cookies.get('xoscsrftoken');
+ }
+ return _request;
+ }
+ };
+ }
+})();
+//# sourceMappingURL=../maps/services/csrfToken.interceptor.js.map
diff --git a/views/ngXosLib/xosHelpers/src/ui_components/table/table.component.js b/views/ngXosLib/xosHelpers/src/ui_components/table/table.component.js
index f1b6682..4d117ae 100644
--- a/views/ngXosLib/xosHelpers/src/ui_components/table/table.component.js
+++ b/views/ngXosLib/xosHelpers/src/ui_components/table/table.component.js
@@ -9,8 +9,110 @@
(function () {
'use strict';
+ /**
+ * @ngdoc overview
+ * @name xos.uiComponents.table
+ * @description A table component
+ **/
angular.module('xos.uiComponents.table', [])
+
+ /**
+ * @ngdoc directive
+ * @name xos.uiComponents.table.directive:xosTable
+ * @restrict E
+ * @description The xos-table directive
+ * @element ANY
+ * @scope
+ * @example
+
+ <example module="sampleModule1">
+ <file name="index.html">
+ <div ng-controller="SampleCtrl1 as vm">
+ <xos-table data="vm.data" config="vm.config"></xos-table>
+ </xos-table>
+ </div>
+ </file>
+ <file name="script.js">
+ angular.module('sampleModule1', ['xos.uiComponents.table'])
+ .controller('SampleCtrl1', function(){
+ this.config = {
+ columns: [
+ {
+ label: 'First Name',
+ prop: 'name'
+ },
+ {
+ label: 'Last Name',
+ prop: 'lastname'
+ }
+ ]
+ };
+
+ this.data = [
+ {
+ name: 'John',
+ lastname: 'Doe'
+ },
+ {
+ name: 'Gili',
+ lastname: 'Fereydoun'
+ }
+ ]
+ });
+ </file>
+ </example>
+
+ <example module="sampleModule2">
+ <file name="index.html">
+ <div ng-controller="SampleCtrl2 as vm">
+ <xos-table data="vm.data" config="vm.config"></xos-table>
+ </xos-table>
+ </div>
+ </file>
+ <file name="script.js">
+ angular.module('sampleModule2', ['xos.uiComponents.table'])
+ .controller('SampleCtrl2', function(){
+ this.config = {
+ columns: [
+ {
+ label: 'First Name',
+ prop: 'name'
+ },
+ {
+ label: 'Last Name',
+ prop: 'lastname'
+ }
+ ],
+ classes: 'table table-striped table-condensed',
+ actions: [
+ {
+ label: 'delete',
+ icon: 'remove',
+ cb: (user) => {
+ console.log(user);
+ },
+ color: 'red'
+ }
+ ]
+ };
+
+ this.data = [
+ {
+ name: 'John',
+ lastname: 'Doe'
+ },
+ {
+ name: 'Gili',
+ lastname: 'Fereydoun'
+ }
+ ]
+ });
+ </file>
+ </example>
+
+ **/
+
.directive('xosTable', function(){
return {
restrict: 'E',
diff --git a/views/ngXosLib/xosHelpers/src/ui_components/ui-components.module.js b/views/ngXosLib/xosHelpers/src/ui_components/ui-components.module.js
index 0cbe70e..fd08421 100644
--- a/views/ngXosLib/xosHelpers/src/ui_components/ui-components.module.js
+++ b/views/ngXosLib/xosHelpers/src/ui_components/ui-components.module.js
@@ -9,6 +9,13 @@
(function () {
'use strict';
+ /**
+ * @ngdoc overview
+ * @name xos.uiComponents
+ * @description A collection of UI components useful for Dashboard development
+ * @requires xos.uiComponents.table
+ **/
+
angular.module('xos.uiComponents', [
'xos.uiComponents.table'
])