#633 El descriptor-popover + test

client/client/src/descriptor-popover/index.html

@@ -1,5 +1,11 @@
 <vn-popover vn-id="popover">
+    <vn-spinner
+        ng-if="$ctrl.client == null"
+        style="padding: 1em;"
+        enable="true">
+    </vn-spinner>
     <vn-client-descriptor 
+        ng-if="$ctrl.client"
         client="$ctrl.client" 
         quicklinks="$ctrl.quicklinks">
     </vn-client-descriptor>

client/client/src/descriptor-popover/index.js

@@ -3,17 +3,29 @@ import Component from 'core/src/lib/component';
 import './style.scss';
 
 class Controller extends Component {
-    constructor($element, $scope, $http, $timeout) {
+    constructor($element, $scope, $http, $timeout, $q) {
         super($element, $scope);
-        this.$http = $http;
         this.$timeout = $timeout;
-        this.isTooltip = true;
+        this.$http = $http;
+        this.$q = $q;
+        this.client = null;
     }
 
-    set clientFk(value) {
+    set clientFk(id) {
-        if (value) {
+        if (id == this._clientFk) return;
-            this.getCard(value);
+
-        }
+        this._clientFk = id;
+        this.client = null;
+        this.getCard();
+    }
+
+    set client(value) {
+        this._client = value;
+        this.$timeout(() => this.$.popover.relocate());
+    }
+
+    get client() {
+        return this._client;
     }
 
     set quicklinks(value = {}) {
@@ -24,27 +36,27 @@ class Controller extends Component {
         return this._quicklinks;
     }
 
-    clear() {
-        this.client = {};
-        this.clientFk = null;
-    }
-
-    getCard(clientFk) {
-        this.$http.get(`/client/api/Clients/${clientFk}/getCard`)
-        .then(response => {
-            this.client = response.data;
-        });
-    }
-
     show() {
         this.$.popover.parent = this.parent;
-        setTimeout(() => {
+        this.$.popover.show();
-            this.$.popover.show();
-        }, 150);
     }
 
+    getCard() {
+        if (this.canceler)
+            this.canceler.resolve();
+
+        this.canceler = this.$q.defer();
+
+        let options = {timeout: this.canceler.promise};
+        this.$http.get(`/client/api/Clients/${this._clientFk}/getCard`, options).then(
+            response => {
+                this.client = response.data;
+                this.canceler = null;
+            }
+        );
+    }
 }
-Controller.$inject = ['$element', '$scope', '$http', '$timeout'];
+Controller.$inject = ['$element', '$scope', '$http', '$timeout', '$q'];
 
 ngModule.component('vnClientDescriptorPopover', {
     template: require('./index.html'),

client/client/src/descriptor-popover/index.spec.js

@@ -7,27 +7,75 @@ describe('Client', () => {
         let $scope;
         let controller;
         let $element;
+        let $timeout;
 
         beforeEach(() => {
             angular.mock.module('client');
         });
 
-        beforeEach(angular.mock.inject((_$componentController_, $rootScope, _$httpBackend_) => {
+        beforeEach(angular.mock.inject((_$componentController_, $rootScope, _$httpBackend_, _$timeout_) => {
             $componentController = _$componentController_;
             $httpBackend = _$httpBackend_;
+            $timeout = _$timeout_;
             $httpBackend.when('GET', /\/locale\/\w+\/[a-z]{2}\.json/).respond({});
             $element = angular.element(`<div></div>`);
             $scope = $rootScope.$new();
+            $scope.popover = {relocate: () => {}, show: () => {}};
             controller = $componentController('vnClientDescriptorPopover', {$scope: $scope, $element: $element});
         }));
 
+        describe('clientFk()', () => {
+            it(`should not apply any changes if the received id is the same stored in _clientFk`, () => {
+                controller.client = 'I exist!';
+                controller._clientFk = 1;
+                spyOn(controller, 'getCard');
+                controller.clientFk = 1;
+
+                expect(controller.client).toEqual('I exist!');
+                expect(controller._clientFk).toEqual(1);
+                expect(controller.getCard).not.toHaveBeenCalled();
+            });
+
+            it(`should set the received id into _clientFk, set the client to null and then call getCard()`, () => {
+                controller.client = `Please don't`;
+                controller._clientFk = 1;
+                spyOn(controller, 'getCard');
+                controller.clientFk = 999;
+
+                expect(controller.client).toBeNull();
+                expect(controller._clientFk).toEqual(999);
+                expect(controller.getCard).toHaveBeenCalledWith();
+            });
+        });
+
+        describe('client()', () => {
+            it(`should save the client into _client and then call relocate()`, () => {
+                spyOn(controller.$.popover, 'relocate');
+                controller.client = `i'm the client!`;
+                $timeout.flush();
+
+                expect(controller._client).toEqual(`i'm the client!`);
+                expect(controller.$.popover.relocate).toHaveBeenCalledWith();
+            });
+        });
+
+        describe('show()', () => {
+            it(`should call the show()`, () => {
+                spyOn(controller.$.popover, 'show');
+                controller.show();
+
+                expect(controller.$.popover.show).toHaveBeenCalledWith();
+            });
+        });
+
         describe('getCard()', () => {
             it(`should perform a get query to store the client data into the controller`, () => {
-                let clientFk = 1;
+                controller.clientFk = 1;
-                let response = {id: 1, name: 'name', debt: 1000};
+                controller.canceler = null;
-                $httpBackend.when('GET', `/client/api/Clients/${clientFk}/getCard`).respond(response);
+                let response = {};
-                $httpBackend.expect('GET', `/client/api/Clients/${clientFk}/getCard`);
+                $httpBackend.when('GET', `/client/api/Clients/${controller._clientFk}/getCard`).respond(response);
-                controller.getCard(clientFk);
+                $httpBackend.expect('GET', `/client/api/Clients/${controller._clientFk}/getCard`);
+                controller.getCard();
                 $httpBackend.flush();
 
                 expect(controller.client).toEqual(response);

client/client/src/descriptor-popover/style.scss

@@ -1,10 +1,8 @@
 vn-client-descriptor-popover {
-    div.popover{
-        width: 16em!important;
-    }
     vn-client-descriptor {
         display: block;
-        &>vn-card{
+        width: 16em;
+        & > vn-card{
             margin: 0!important;
         }
         .header > a:first-child {

client/item/src/descriptor-popover/index.html

@@ -1,8 +1,12 @@
 <vn-popover vn-id="popover">
+    <vn-spinner
+        ng-if="$ctrl.item == null"
+        style="padding: 1em;"
+        enable="true">
+    </vn-spinner>
     <vn-item-descriptor
+        ng-if="$ctrl.item"
         item="$ctrl.item"
-        item-tags="$ctrl.itemTags"
-        tags="$ctrl.tags"
         quicklinks="$ctrl.quicklinks">
     </vn-item-descriptor>
 </vn-popover>

client/item/src/descriptor-popover/index.js

@@ -3,20 +3,29 @@ import Component from 'core/src/lib/component';
 import './style.scss';
 
 class Controller extends Component {
-    constructor($element, $scope, $http) {
+    constructor($element, $scope, $http, $timeout, $q) {
         super($element, $scope);
+        this.$timeout = $timeout;
         this.$http = $http;
-        this.isTooltip = true;
+        this.$q = $q;
-        this.clear();
+        this.item = null;
     }
 
     set itemFk(id) {
-        this._itemFk = id;
+        if (id == this._itemFk) return;
 
-        if (id) {
+        this._itemFk = id;
-            this.getCard();
+        this.item = null;
-        } else
+        this.getCard();
-            this.clear();
+    }
+
+    set item(value) {
+        this._item = value;
+        this.$timeout(() => this.$.popover.relocate());
+    }
+
+    get item() {
+        return this._item;
     }
 
     set quicklinks(value = {}) {
@@ -27,30 +36,33 @@ class Controller extends Component {
         return this._quicklinks;
     }
 
-    clear() {
-        this.item = null;
-        this.tags = {};
-        this.itemTags = null;
-    }
-
     show() {
         this.$.popover.parent = this.parent;
         this.$.popover.show();
     }
 
     getCard() {
-        this.$http.get(`/item/api/Items/${this._itemFk}/getCard`).then(response => {
+        if (this.canceler)
-            this.item = response.data;
+            this.canceler.resolve();
-        });
+
+        this.canceler = this.$q.defer();
+
+        let options = {timeout: this.canceler.promise};
+        this.$http.get(`/item/api/Items/${this._itemFk}/getCard`, options).then(
+            response => {
+                this.item = response.data;
+                this.canceler = null;
+            }
+        );
     }
 }
-Controller.$inject = ['$element', '$scope', '$http'];
+Controller.$inject = ['$element', '$scope', '$http', '$timeout', '$q'];
 
 ngModule.component('vnItemDescriptorPopover', {
     template: require('./index.html'),
+    controller: Controller,
     bindings: {
         itemFk: '<',
         quicklinks: '<'
-    },
+    }
-    controller: Controller
 });

client/item/src/descriptor-popover/index.spec.js

@@ -3,85 +3,82 @@ import './index.js';
 describe('Item', () => {
     describe('Component vnItemDescriptorPopover', () => {
         let $componentController;
+        let $httpBackend;
         let $scope;
         let controller;
-        let $httpBackend;
         let $element;
+        let $timeout;
 
         beforeEach(() => {
             angular.mock.module('item');
         });
 
-        beforeEach(angular.mock.inject((_$componentController_, $rootScope, _$httpBackend_) => {
+        beforeEach(angular.mock.inject((_$componentController_, $rootScope, _$httpBackend_, _$timeout_) => {
             $componentController = _$componentController_;
-            $element = angular.element('<vn-item-descriptor-popover></vn-item-descriptor-popover>');
             $httpBackend = _$httpBackend_;
+            $timeout = _$timeout_;
             $httpBackend.when('GET', /\/locale\/\w+\/[a-z]{2}\.json/).respond({});
+            $element = angular.element(`<div></div>`);
             $scope = $rootScope.$new();
-            controller = $componentController('vnItemDescriptorPopover', {$scope, $element, $httpBackend});
+            $scope.popover = {relocate: () => {}, show: () => {}};
-            controller.itemFk = 1;
+            controller = $componentController('vnItemDescriptorPopover', {$scope: $scope, $element: $element});
-            controller.parent = 'mariano';
-            controller.$.popover = {show: () => {}};
         }));
 
-        describe('itemFk setter', () => {
+        describe('itemFk()', () => {
-            it(`should set _itemFk to a given value and call getCard if the given value is not null`, () => {
+            it(`should not apply any changes if the received id is the same stored in _itemFk`, () => {
+                controller.item = 'I exist!';
+                controller._itemFk = 1;
                 spyOn(controller, 'getCard');
-                controller.itemFk = 5;
+                controller.itemFk = 1;
 
+                expect(controller.item).toEqual('I exist!');
+                expect(controller._itemFk).toEqual(1);
+                expect(controller.getCard).not.toHaveBeenCalled();
+            });
+
+            it(`should set the received id into _itemFk, set the item to null and then call getCard()`, () => {
+                controller.item = `Please don't`;
+                controller._itemFk = 1;
+                spyOn(controller, 'getCard');
+                controller.itemFk = 999;
+
+                expect(controller.item).toBeNull();
+                expect(controller._itemFk).toEqual(999);
                 expect(controller.getCard).toHaveBeenCalledWith();
-                expect(controller._itemFk).toEqual(5);
-            });
-
-            it(`shoud call clear if the given values is null`, () => {
-                spyOn(controller, 'clear');
-                controller.itemFk = null;
-
-                expect(controller.clear).toHaveBeenCalledWith();
-                expect(controller._itemFk).toEqual(null);
             });
         });
 
-        describe('quicklinks setter', () => {
+        describe('item()', () => {
-            it(`shoud set _quicklinks to a given value`, () => {
+            it(`should save the item into _item and then call relocate()`, () => {
-                controller.quicklinks = 3;
+                spyOn(controller.$.popover, 'relocate');
+                controller.item = `i'm the item!`;
+                $timeout.flush();
 
-                expect(controller._quicklinks).toEqual(3);
+                expect(controller._item).toEqual(`i'm the item!`);
-            });
+                expect(controller.$.popover.relocate).toHaveBeenCalledWith();
-        });
-
-        describe('clear()', () => {
-            it(`should set item and itemTags null, and tags {}`, () => {
-                controller.item = '1';
-                controller.itemTags = '1';
-                controller.tags = '1';
-
-                controller.clear();
-
-                expect(controller.item).toEqual(null);
-                expect(controller.itemTags).toEqual(null);
-                expect(controller.tags).toEqual({});
             });
         });
 
         describe('show()', () => {
-            it(`should set $.popover.parent and call $.popover.show`, () => {
+            it(`should call the show()`, () => {
                 spyOn(controller.$.popover, 'show');
                 controller.show();
 
                 expect(controller.$.popover.show).toHaveBeenCalledWith();
-                expect(controller.$.popover.parent).toEqual('mariano');
             });
         });
 
         describe('getCard()', () => {
-            it(`should make a query and set this.item`, () => {
+            it(`should perform a get query to store the item data into the controller`, () => {
-                $httpBackend.whenGET(`/item/api/Items/1/getCard`).respond(true);
+                controller.itemFk = 1;
-                $httpBackend.expectGET(`/item/api/Items/1/getCard`);
+                controller.canceler = null;
+                let response = {};
+                $httpBackend.when('GET', `/item/api/Items/${controller._itemFk}/getCard`).respond(response);
+                $httpBackend.expect('GET', `/item/api/Items/${controller._itemFk}/getCard`);
                 controller.getCard();
                 $httpBackend.flush();
 
-                expect(controller.item).toEqual(true);
+                expect(controller.item).toEqual(response);
             });
         });
     });

client/item/src/descriptor/index.js

@@ -22,8 +22,6 @@ ngModule.component('vnItemDescriptor', {
     controller: Controller,
     bindings: {
         item: '<',
-        itemTags: '<',
-        tags: '<',
         quicklinks: '<'
     }
 });

client/item/src/ticket-descriptor-popover/index.html

@@ -1,5 +1,11 @@
 <vn-popover vn-id="popover">
+    <vn-spinner
+        ng-if="$ctrl.ticket == null"
+        style="padding: 1em;"
+        enable="true">
+    </vn-spinner>
     <vn-ticket-descriptor 
+        ng-if="$ctrl.ticket"
         ticket="$ctrl.ticket" 
         quicklinks="$ctrl.quicklinks">
     </vn-ticket-descriptor>

client/item/src/ticket-descriptor-popover/index.js

@@ -3,76 +3,95 @@ import Component from 'core/src/lib/component';
 import './style.scss';
 
 class Controller extends Component {
-    constructor($element, $scope, $http) {
+    constructor($element, $scope, $http, $timeout, $q) {
         super($element, $scope);
+        this.$timeout = $timeout;
         this.$http = $http;
-        this.isTooltip = true;
+        this.$q = $q;
-        this.clear();
+        this.ticket = null;
     }
 
-    set ticketFk(value) {
+    set ticketFk(id) {
-        if (value) {
+        if (id == this._ticketFk) return;
-            let filter = {
-                include: [
-                    {relation: 'warehouse', scope: {fields: ['name']}},
-                    {relation: 'agencyMode', scope: {fields: ['name']}},
-                    {
-                        relation: 'client',
-                        scope: {
-                            fields: ['salesPersonFk', 'name', 'isActive', 'isFreezed', 'isTaxDataChecked'],
-                            include: {
-                                relation: 'salesPerson',
-                                fields: ['firstName', 'name']
-                            }
-                        }
-                    },
-                    {
-                        relation: 'tracking',
-                        scope: {
-                            fields: ['stateFk'],
-                            include: {
-                                relation: 'state',
-                                fields: ['name']
-                            }
-                        }
-                    }
-                ]
-            };
 
-            let json = encodeURIComponent(JSON.stringify(filter));
+        this._ticketFk = id;
-            let query = `/ticket/api/Tickets/${value}?filter=${json}`;
+        this.ticket = null;
-            this.$http.get(query).then(res => {
+        this.getCard();
-                if (res.data)
-                    this.ticket = res.data;
-            });
-        } else
-            this.clear();
     }
 
-    get quicklinks() {
+    set ticket(value) {
-        return this._quicklinks;
+        this._ticket = value;
+        this.$timeout(() => this.$.popover.relocate());
+    }
+
+    get ticket() {
+        return this._ticket;
     }
 
     set quicklinks(value = {}) {
         this._quicklinks = Object.assign(value, this._quicklinks);
     }
 
-    clear() {
+    get quicklinks() {
-        this.ticket = null;
+        return this._quicklinks;
     }
 
     show() {
         this.$.popover.parent = this.parent;
         this.$.popover.show();
     }
+
+    getCard() {
+        if (this.canceler)
+            this.canceler.resolve();
+
+        this.canceler = this.$q.defer();
+
+        let options = {timeout: this.canceler.promise};
+
+        let filter = {
+            include: [
+                {relation: 'warehouse', scope: {fields: ['name']}},
+                {relation: 'agencyMode', scope: {fields: ['name']}},
+                {
+                    relation: 'client',
+                    scope: {
+                        fields: ['salesPersonFk', 'name', 'isActive', 'isFreezed', 'isTaxDataChecked'],
+                        include: {
+                            relation: 'salesPerson',
+                            fields: ['firstName', 'name']
+                        }
+                    }
+                },
+                {
+                    relation: 'tracking',
+                    scope: {
+                        fields: ['stateFk'],
+                        include: {
+                            relation: 'state',
+                            fields: ['name']
+                        }
+                    }
+                }
+            ]
+        };
+        let json = encodeURIComponent(JSON.stringify(filter));
+        let query = `/ticket/api/Tickets/${this._ticketFk}?filter=${json}`;
+        this.$http.get(query, options).then(
+            response => {
+                this.ticket = response.data;
+                this.canceler = null;
+            }
+        );
+    }
 }
-Controller.$inject = ['$element', '$scope', '$http'];
+Controller.$inject = ['$element', '$scope', '$http', '$timeout', '$q'];
 
 ngModule.component('vnTicketDescriptorPopover', {
     template: require('./index.html'),
+    controller: Controller,
     bindings: {
         ticketFk: '<',
         quicklinks: '<'
-    },
+    }
-    controller: Controller
 });

client/item/src/ticket-descriptor-popover/index.spec.js

@@ -3,61 +3,110 @@ import './index.js';
 describe('Item', () => {
     describe('Component vnTicketDescriptorPopover', () => {
         let $componentController;
+        let $httpBackend;
         let $scope;
         let controller;
-        let $httpBackend;
         let $element;
+        let $timeout;
 
         beforeEach(() => {
             angular.mock.module('item');
         });
 
-        beforeEach(angular.mock.inject((_$componentController_, $rootScope, _$httpBackend_) => {
+        beforeEach(angular.mock.inject((_$componentController_, $rootScope, _$httpBackend_, _$timeout_) => {
             $componentController = _$componentController_;
-            $element = angular.element('<vn-ticket-descriptor-popover></vn-ticket-descriptor-popover>');
             $httpBackend = _$httpBackend_;
+            $timeout = _$timeout_;
             $httpBackend.when('GET', /\/locale\/\w+\/[a-z]{2}\.json/).respond({});
+            $element = angular.element(`<div></div>`);
             $scope = $rootScope.$new();
-            controller = $componentController('vnTicketDescriptorPopover', {$scope, $element, $httpBackend});
+            $scope.popover = {relocate: () => {}, show: () => {}};
-            controller.parent = 'mariano';
+            controller = $componentController('vnTicketDescriptorPopover', {$scope: $scope, $element: $element});
-            controller.$.popover = {show: () => {}};
         }));
 
-        describe('ticketFk setter', () => {
+        describe('ticketFk()', () => {
-            it(`shoud call clear if the given values is null`, () => {
+            it(`should not apply any changes if the received id is the same stored in _ticketFk`, () => {
-                spyOn(controller, 'clear');
+                controller.ticket = 'I exist!';
-                controller.ticketFk = null;
+                controller._ticketFk = 1;
+                spyOn(controller, 'getCard');
+                controller.ticketFk = 1;
 
-                expect(controller.clear).toHaveBeenCalledWith();
+                expect(controller.ticket).toEqual('I exist!');
-                expect(controller.ticket).toEqual(null);
+                expect(controller._ticketFk).toEqual(1);
+                expect(controller.getCard).not.toHaveBeenCalled();
+            });
+
+            it(`should set the received id into _ticketFk, set the ticket to null and then call getCard()`, () => {
+                controller.ticket = `Please don't`;
+                controller._ticketFk = 1;
+                spyOn(controller, 'getCard');
+                controller.ticketFk = 999;
+
+                expect(controller.ticket).toBeNull();
+                expect(controller._ticketFk).toEqual(999);
+                expect(controller.getCard).toHaveBeenCalledWith();
             });
         });
 
-        describe('quicklinks setter', () => {
+        describe('ticket()', () => {
-            it(`shoud set _quicklinks to a given value`, () => {
+            it(`should save the ticket into _ticket and then call relocate()`, () => {
-                controller.quicklinks = 3;
+                spyOn(controller.$.popover, 'relocate');
+                controller.ticket = `i'm the ticket!`;
+                $timeout.flush();
 
-                expect(controller._quicklinks).toEqual(3);
+                expect(controller._ticket).toEqual(`i'm the ticket!`);
-            });
+                expect(controller.$.popover.relocate).toHaveBeenCalledWith();
-        });
-
-        describe('clear()', () => {
-            it(`should set ticket to null`, () => {
-                controller.ticket = '1';
-
-                controller.clear();
-
-                expect(controller.ticket).toEqual(null);
             });
         });
 
         describe('show()', () => {
-            it(`should set $.popover.parent and call $.popover.show`, () => {
+            it(`should call the show()`, () => {
                 spyOn(controller.$.popover, 'show');
                 controller.show();
 
                 expect(controller.$.popover.show).toHaveBeenCalledWith();
-                expect(controller.$.popover.parent).toEqual('mariano');
+            });
+        });
+
+        describe('getCard()', () => {
+            it(`should perform a get query to store the ticket data into the controller`, () => {
+                controller.ticketFk = 1;
+                controller.canceler = null;
+                let response = {};
+
+                let filter = {
+                    include: [
+                        {relation: 'warehouse', scope: {fields: ['name']}},
+                        {relation: 'agencyMode', scope: {fields: ['name']}},
+                        {
+                            relation: 'client',
+                            scope: {
+                                fields: ['salesPersonFk', 'name', 'isActive', 'isFreezed', 'isTaxDataChecked'],
+                                include: {
+                                    relation: 'salesPerson',
+                                    fields: ['firstName', 'name']
+                                }
+                            }
+                        },
+                        {
+                            relation: 'tracking',
+                            scope: {
+                                fields: ['stateFk'],
+                                include: {
+                                    relation: 'state',
+                                    fields: ['name']
+                                }
+                            }
+                        }
+                    ]
+                };
+                let json = encodeURIComponent(JSON.stringify(filter));
+                $httpBackend.when('GET', `/ticket/api/Tickets/${controller._ticketFk}?filter=${json}`).respond(response);
+                $httpBackend.expect('GET', `/ticket/api/Tickets/${controller._ticketFk}?filter=${json}`);
+                controller.getCard();
+                $httpBackend.flush();
+
+                expect(controller.ticket).toEqual(response);
             });
         });
     });

client/ticket/src/data/step-three/index.spec.js

@@ -2,6 +2,7 @@ import './index.js';
 
 describe('ticket', () => {
     describe('Component vnTicketDataStepThree', () => {
+        let now = Date.now();
         let $componentController;
         let $state;
         let controller;
@@ -41,8 +42,8 @@ describe('ticket', () => {
                     agencyModeFk: 1,
                     addressFk: 121,
                     warehouseFk: 1,
-                    shipped: Date.now(),
+                    shipped: now,
-                    landed: Date.now(),
+                    landed: now,
                     option: 1
                 };
 
@@ -50,8 +51,8 @@ describe('ticket', () => {
                     agencyModeFk: 1,
                     addressFk: 121,
                     warehouseFk: 1,
-                    shipped: Date.now(),
+                    shipped: now,
-                    landed: Date.now(),
+                    landed: now,
                     option: 1
                 };