Mercurial > hg > thermostat-ng > web-client
changeset 189:8dfeba19cd14
Convert mcAdd directive to component
Reviewed-by: jkang
Review-thread: http://icedtea.classpath.org/pipermail/thermostat/2017-August/024757.html
Review-thread: http://icedtea.classpath.org/pipermail/thermostat/2017-September/024914.html
author | Andrew Azores <aazores@redhat.com> |
---|---|
date | Fri, 08 Sep 2017 11:22:57 -0400 |
parents | 62fa62ee6512 |
children | ab4bcbd6d893 |
files | src/app/shared/components/multichart-add/multichart-add.component.js src/app/shared/components/multichart-add/multichart-add.controller.js src/app/shared/components/multichart-add/multichart-add.controller.spec.js src/app/shared/components/multichart-add/multichart-add.directive.js src/app/shared/components/multichart-add/multichart-add.directive.spec.js src/app/shared/components/multichart-add/multichart-add.html src/app/shared/components/multichart-add/multichart-add.module.js |
diffstat | 7 files changed, 76 insertions(+), 195 deletions(-) [+] |
line wrap: on
line diff
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/src/app/shared/components/multichart-add/multichart-add.component.js Fri Sep 08 11:22:57 2017 -0400 @@ -0,0 +1,40 @@ +/** + * Copyright 2012-2017 Red Hat, Inc. + * + * Thermostat is distributed under the GNU General Public License, + * version 2 or any later version (with a special exception described + * below, commonly known as the "Classpath Exception"). + * + * A copy of GNU General Public License (GPL) is included in this + * distribution, in the file COPYING. + * + * Linking Thermostat code with other modules is making a combined work + * based on Thermostat. Thus, the terms and conditions of the GPL + * cover the whole combination. + * + * As a special exception, the copyright holders of Thermostat give you + * permission to link this code with independent modules to produce an + * executable, regardless of the license terms of these independent + * modules, and to copy and distribute the resulting executable under + * terms of your choice, provided that you also meet, for each linked + * independent module, the terms and conditions of the license of that + * module. An independent module is a module which is not derived from + * or based on Thermostat code. If you modify Thermostat, you may + * extend this exception to your version of the software, but you are + * not obligated to do so. If you do not wish to do so, delete this + * exception statement from your version. + */ + +import controller from './multichart-add.controller.js'; + +export default angular + .module('multichartAdd.component', [controller]) + .component('mcAdd', { + bindings: { + svcName: '@', + getFn: '&' + }, + controller: 'MultichartAddController', + template: require('./multichart-add.html') + }) + .name;
--- a/src/app/shared/components/multichart-add/multichart-add.controller.js Fri Sep 08 11:22:40 2017 -0400 +++ b/src/app/shared/components/multichart-add/multichart-add.controller.js Fri Sep 08 11:22:57 2017 -0400 @@ -28,25 +28,25 @@ import servicesModule from 'shared/services/services.module.js'; class MultichartAddController { - constructor (multichartService, $scope, $timeout) { + constructor (multichartService, $timeout) { 'ngInject'; - this.svc = multichartService; - this.scope = $scope; - this.scope.multicharts = multichartService.chartNames; + this._svc = multichartService; - this.scope.$watch('multicharts', cur => { - $timeout(() => { - cur.forEach(chart => { - let el = angular.element('#' + chart + '-' + this.scope.svcName); - el.bootstrapSwitch(); - el.on('switchChange.bootstrapSwitch', event => { - this.toggleChart(event.currentTarget.getAttribute('data-chart')); - }); + $timeout(() => { + this.multicharts.forEach(chart => { + let el = angular.element('#' + chart + '-' + this.svcName); + el.bootstrapSwitch(); + el.on('switchChange.bootstrapSwitch', event => { + this.toggleChart(event.currentTarget.getAttribute('data-chart')); }); }); }); } + get multicharts () { + return this._svc.chartNames; + } + toggleChart (chartName) { if (this.isInChart(chartName)) { this.removeFromChart(chartName); @@ -56,19 +56,19 @@ } removeFromChart (chartName) { - this.svc.removeService(chartName, this.scope.svcName); + this._svc.removeService(chartName, this.svcName); } addToChart (chartName) { - this.svc.addService(chartName, this.scope.svcName, this.scope.getFn); + this._svc.addService(chartName, this.svcName, this.getFn); } isInChart (chartName) { - return this.svc.hasServiceForChart(chartName, this.scope.svcName); + return this._svc.hasServiceForChart(chartName, this.svcName); } } export default angular - .module('multichartAddControllerModule', [servicesModule]) + .module('multichartAddController', [servicesModule]) .controller('MultichartAddController', MultichartAddController) .name;
--- a/src/app/shared/components/multichart-add/multichart-add.controller.spec.js Fri Sep 08 11:22:40 2017 -0400 +++ b/src/app/shared/components/multichart-add/multichart-add.controller.spec.js Fri Sep 08 11:22:57 2017 -0400 @@ -29,7 +29,7 @@ describe('MultichartAddController', () => { - let svc, scope, timeout, ctrl; + let svc, timeout, ctrl; beforeEach(() => { angular.mock.module(controllerModule); @@ -43,19 +43,14 @@ hasServiceForChart: sinon.stub().returns(true) }; - scope = { - svcName: 'foo-svc', - getFn: sinon.spy(), - $watch: sinon.spy() - }; - timeout = sinon.spy(); ctrl = $controller('MultichartAddController', { multichartService: svc, - $scope: scope, $timeout: timeout }); + ctrl.svcName = 'foo-svc'; + ctrl.getFn = angular.noop; }); }); @@ -64,7 +59,7 @@ }); it('should assign multichart names from service', () => { - scope.multicharts.should.deepEqual(svc.chartNames); + ctrl.multicharts.should.deepEqual(svc.chartNames); }); describe('bootstrapSwitch', () => { @@ -81,22 +76,14 @@ angular.element.restore(); }); - it('should watch on multicharts', () => { - scope.$watch.should.be.calledWith('multicharts', sinon.match.func); - }); - - it('should use $timeout to wait for $scope $digest to complete', () => { - timeout.should.not.be.called(); - let fn = scope.$watch.firstCall.args[1]; - fn(); + it('should use $timeout to wait for $digest to complete', () => { timeout.should.be.calledOnce(); timeout.should.be.calledWith(sinon.match.func); }); it('should set up bootstrapSwitch functionality for each switch', () => { svc.removeService.should.not.be.called(); - let fn = scope.$watch.firstCall.args[1]; - fn(['foo']); + svc.chartNames = ['foo']; timeout.yield(); angular.element.should.be.calledOnce(); @@ -120,7 +107,7 @@ svc.hasServiceForChart.should.not.be.called(); ctrl.isInChart('foo').should.be.true(); svc.hasServiceForChart.should.be.calledOnce(); - svc.hasServiceForChart.should.be.calledWith('foo', scope.svcName); + svc.hasServiceForChart.should.be.calledWith('foo', ctrl.svcName); }); }); @@ -129,7 +116,7 @@ svc.addService.should.not.be.called(); ctrl.addToChart('foo'); svc.addService.should.be.calledOnce(); - svc.addService.should.be.calledWith('foo', scope.svcName, scope.getFn); + svc.addService.should.be.calledWith('foo', ctrl.svcName, ctrl.getFn); }); }); @@ -138,7 +125,7 @@ svc.removeService.should.not.be.called(); ctrl.removeFromChart('foo'); svc.removeService.should.be.calledOnce(); - svc.removeService.should.be.calledWith('foo', scope.svcName); + svc.removeService.should.be.calledWith('foo', ctrl.svcName); }); }); @@ -149,10 +136,10 @@ svc.removeService.should.not.be.called(); ctrl.toggleChart('foo'); svc.hasServiceForChart.should.be.calledOnce(); - svc.hasServiceForChart.should.be.calledWith('foo', scope.svcName); + svc.hasServiceForChart.should.be.calledWith('foo', ctrl.svcName); svc.addService.should.not.be.called(); svc.removeService.should.be.calledOnce(); - svc.removeService.should.be.calledWith('foo', scope.svcName); + svc.removeService.should.be.calledWith('foo', ctrl.svcName); }); it('should add if not present', () => { @@ -162,9 +149,9 @@ svc.removeService.should.not.be.called(); ctrl.toggleChart('foo'); svc.hasServiceForChart.should.be.calledOnce(); - svc.hasServiceForChart.should.be.calledWith('foo', scope.svcName); + svc.hasServiceForChart.should.be.calledWith('foo', ctrl.svcName); svc.addService.should.be.calledOnce(); - svc.addService.should.be.calledWith('foo', scope.svcName); + svc.addService.should.be.calledWith('foo', ctrl.svcName); svc.removeService.should.not.be.called(); }); });
--- a/src/app/shared/components/multichart-add/multichart-add.directive.js Fri Sep 08 11:22:40 2017 -0400 +++ /dev/null Thu Jan 01 00:00:00 1970 +0000 @@ -1,48 +0,0 @@ -/** - * Copyright 2012-2017 Red Hat, Inc. - * - * Thermostat is distributed under the GNU General Public License, - * version 2 or any later version (with a special exception described - * below, commonly known as the "Classpath Exception"). - * - * A copy of GNU General Public License (GPL) is included in this - * distribution, in the file COPYING. - * - * Linking Thermostat code with other modules is making a combined work - * based on Thermostat. Thus, the terms and conditions of the GPL - * cover the whole combination. - * - * As a special exception, the copyright holders of Thermostat give you - * permission to link this code with independent modules to produce an - * executable, regardless of the license terms of these independent - * modules, and to copy and distribute the resulting executable under - * terms of your choice, provided that you also meet, for each linked - * independent module, the terms and conditions of the license of that - * module. An independent module is a module which is not derived from - * or based on Thermostat code. If you modify Thermostat, you may - * extend this exception to your version of the software, but you are - * not obligated to do so. If you do not wish to do so, delete this - * exception statement from your version. - */ - -import controller from './multichart-add.controller.js'; - -function configFactory () { - return { - restrict: 'EA', - controller: 'MultichartAddController', - controllerAs: 'ctrl', - template: require('./multichart-add.html'), - scope: { - svcName: '@', - getFn: '&' - } - }; -} - -export { configFactory }; - -export default angular - .module('multichartAddDirective', [controller]) - .directive('mcAdd', configFactory) - .name;
--- a/src/app/shared/components/multichart-add/multichart-add.directive.spec.js Fri Sep 08 11:22:40 2017 -0400 +++ /dev/null Thu Jan 01 00:00:00 1970 +0000 @@ -1,62 +0,0 @@ -/** - * Copyright 2012-2017 Red Hat, Inc. - * - * Thermostat is distributed under the GNU General Public License, - * version 2 or any later version (with a special exception described - * below, commonly known as the "Classpath Exception"). - * - * A copy of GNU General Public License (GPL) is included in this - * distribution, in the file COPYING. - * - * Linking Thermostat code with other modules is making a combined work - * based on Thermostat. Thus, the terms and conditions of the GPL - * cover the whole combination. - * - * As a special exception, the copyright holders of Thermostat give you - * permission to link this code with independent modules to produce an - * executable, regardless of the license terms of these independent - * modules, and to copy and distribute the resulting executable under - * terms of your choice, provided that you also meet, for each linked - * independent module, the terms and conditions of the license of that - * module. An independent module is a module which is not derived from - * or based on Thermostat code. If you modify Thermostat, you may - * extend this exception to your version of the software, but you are - * not obligated to do so. If you do not wish to do so, delete this - * exception statement from your version. - */ - -import { configFactory } from './multichart-add.directive.js'; - -describe('MultichartAddDirective', () => { - let cfg; - beforeEach(() => { - cfg = configFactory(); - }); - - it('should be restricted to an element or attribute', () => { - cfg.restrict.should.have.length(2); - cfg.restrict.should.containEql('E'); - cfg.restrict.should.containEql('A'); - }); - - it('should expect a svcName string in scope', () => { - cfg.scope.should.have.ownProperty('svcName'); - cfg.scope.svcName.should.equal('@'); - }); - - it('should expect a getFn expression in scope', () => { - cfg.scope.should.have.ownProperty('getFn'); - cfg.scope.getFn.should.equal('&'); - }); - - it('should use correct template', () => { - cfg.template.should.equal(require('./multichart-add.html')); - }); - - it('should attach multichartAddController', () => { - cfg.should.have.ownProperty('controller'); - cfg.controller.should.equal('MultichartAddController'); - cfg.should.have.ownProperty('controllerAs'); - cfg.controllerAs.should.equal('ctrl'); - }); -});
--- a/src/app/shared/components/multichart-add/multichart-add.html Fri Sep 08 11:22:40 2017 -0400 +++ b/src/app/shared/components/multichart-add/multichart-add.html Fri Sep 08 11:22:57 2017 -0400 @@ -5,15 +5,15 @@ <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="kebab"> <li><a ui-sref="multichart" translate>mcAdd.TITLE</a></li> <li role="separator" class="divider"></li> - <li ng-repeat="chart in multicharts"> + <li ng-repeat="chart in $ctrl.multicharts"> <div class="text-right"> <div class="form-group"> - <label for="switch-{{chart}}-{{svcName}}" class="label label-info pull-left">{{chart}}</label> - <input class="bootstrap-switch pull-right" id="{{chart}}-{{svcName}}" name="switch-{{chart}}-{{svcName}}" data-chart="{{chart}}" - data-size="mini" - type="checkbox" - ng-checked="ctrl.isInChart(chart)" - /> + <label for="switch-{{chart}}-{{$ctrl.svcName}}" class="label label-info pull-left">{{chart}}</label> + <input class="bootstrap-switch pull-right" id="{{chart}}-{{$ctrl.svcName}}" name="switch-{{chart}}-{{$ctrl.svcName}}" data-chart="{{chart}}" + data-size="mini" + type="checkbox" + ng-checked="$ctrl.isInChart(chart)" + /> </div> </div> </li>
--- a/src/app/shared/components/multichart-add/multichart-add.module.js Fri Sep 08 11:22:40 2017 -0400 +++ /dev/null Thu Jan 01 00:00:00 1970 +0000 @@ -1,36 +0,0 @@ -/** - * Copyright 2012-2017 Red Hat, Inc. - * - * Thermostat is distributed under the GNU General Public License, - * version 2 or any later version (with a special exception described - * below, commonly known as the "Classpath Exception"). - * - * A copy of GNU General Public License (GPL) is included in this - * distribution, in the file COPYING. - * - * Linking Thermostat code with other modules is making a combined work - * based on Thermostat. Thus, the terms and conditions of the GPL - * cover the whole combination. - * - * As a special exception, the copyright holders of Thermostat give you - * permission to link this code with independent modules to produce an - * executable, regardless of the license terms of these independent - * modules, and to copy and distribute the resulting executable under - * terms of your choice, provided that you also meet, for each linked - * independent module, the terms and conditions of the license of that - * module. An independent module is a module which is not derived from - * or based on Thermostat code. If you modify Thermostat, you may - * extend this exception to your version of the software, but you are - * not obligated to do so. If you do not wish to do so, delete this - * exception statement from your version. - */ - -import directive from './multichart-add.directive.js'; -import controller from './multichart-add.controller.js'; - -export default angular - .module('multichartAddModule', [ - directive, - controller - ]) - .name;