Merge pull request '2961 - Show tickets on summary' (#657) from 2961-summary_tickets into dev

Reviewed-on: #657
Reviewed-by: Carlos Jimenez Ruiz <carlosjr@verdnatura.es>

modules/client/front/summary/index.html

@@ -1,3 +1,12 @@
+<vn-crud-model
+    vn-id="ticketsModel"
+    auto-load="true"
+    url="Tickets/filter"
+    link="{'t.clientFk': $ctrl.$params.id}"
+    limit="5"
+    data="tickets"
+    order="shippedDate DESC, shippedHour ASC">
+</vn-crud-model>
 <vn-card class="summary">
     <h5>
         <a ng-if="::$ctrl.summary.id"
@@ -269,14 +278,112 @@
                 ng-class="{alert: $ctrl.summary.defaulters[0].amount}"
                 info="Deviated invoices minus payments">
             </vn-label-value>
-            <vn-vertical ng-if="$ctrl.summary.recovery.started">
-                <vn-label-value label="Recovery since" 
-                    value="{{$ctrl.summary.recovery.started | date:'dd/MM/yyyy'}}">
+            <vn-label-value label="Recovery since" 
+                ng-if="$ctrl.summary.recovery.started"
+                value="{{$ctrl.summary.recovery.started | date:'dd/MM/yyyy'}}">
             </vn-label-value>
-        </vn-vertical>
+        </vn-one>
+    </vn-horizontal>
+    <vn-horizontal>
+        <vn-one>
+            <h4 translate>Latest tickets</h4>
+            <vn-table model="ticketsModel" class="scrollable sm">
+                <vn-thead>
+                    <vn-tr>
+                        <vn-th field="id" number>Id</vn-th>
+                        <vn-th field="nickname" expand>Client</vn-th>
+                        <vn-th field="salesPersonFk">Salesperson</vn-th>
+                        <vn-th field="shipped" shrink-date>Date</vn-th>
+                        <vn-th field="stateFk">State</vn-th>
+                        <vn-th shrink>Total</vn-th>
+                        <vn-th></vn-th>
+                    </vn-tr>
+                </vn-thead>
+                <vn-tbody>
+                    <a ng-repeat="ticket in ticketsModel.data"
+                        class="clickable vn-tr search-result"
+                        ui-sref="ticket.card.summary({id: {{::ticket.id}}})">
+                        <vn-td number>{{::ticket.id}}</vn-td>
+                        <vn-td expand>
+                            <span
+                                title="{{::ticket.nickname}}"
+                                vn-click-stop="clientDescriptor.show($event, ticket.clientFk)"
+                                class="link">
+                                {{::ticket.nickname}}
+                            </span>
+                        </vn-td>
+                        <vn-td>
+                            <span
+                                title="{{::ticket.userName}}"
+                                vn-click-stop="workerDescriptor.show($event, ticket.salesPersonFk)"
+                                class="link">
+                                {{::ticket.userName | dashIfEmpty}}
+                            </span>
+                        </vn-td>
+                        <vn-td shrink-date>
+                            <span class="chip {{::$ctrl.chipColor(ticket.shipped)}}">
+                                {{::ticket.shipped | date: 'dd/MM/yyyy'}}
+                            </span>
+                        </vn-td>
+                        <vn-td>
+                            <span
+                                ng-show="::ticket.refFk"
+                                title="{{::ticket.refFk}}"
+                                vn-click-stop="invoiceOutDescriptor.show($event, ticket.invoiceOutId)"
+                                class="link">
+                                {{::ticket.refFk}}
+                            </span>
+                            <span 
+                                ng-show="::!ticket.refFk"
+                                class="chip {{::$ctrl.stateColor(ticket)}}">
+                                {{::ticket.state}}
+                            </span>
+                        </vn-td>
+                        <vn-td shrink>
+                            <span class="chip {{$ctrl.totalPriceColor(ticket)}}">
+                                {{::(ticket.totalWithVat ? ticket.totalWithVat : 0) | currency: 'EUR': 2}}
+                            </span>
+                        </vn-td>
+                        <vn-td actions>
+                            <vn-icon-button
+                                vn-anchor="::{
+                                    state: 'ticket.card.sale', 
+                                    params: {id: ticket.id}, 
+                                    target: '_blank'
+                                }"
+                                vn-tooltip="Go to lines"
+                                icon="icon-lines">
+                            </vn-icon-button>
+                            <vn-icon-button
+                                vn-click-stop="$ctrl.preview(ticket)"
+                                vn-tooltip="Preview"
+                                icon="preview">
+                            </vn-icon-button>
+                        </vn-td>
+                    </a>
+                </vn-tbody>
+            </vn-table>
+            <vn-pagination
+                model="ticketsModel"
+                class="vn-pt-xs"
+                scroll-selector="vn-table[model='ticketsModel']"
+                scroll-offset="100">
+            </vn-pagination>
         </vn-one>
     </vn-horizontal>
 </vn-card>
+<vn-client-descriptor-popover
+    vn-id="clientDescriptor">
+</vn-client-descriptor-popover>
 <vn-worker-descriptor-popover 
     vn-id="workerDescriptor">
-</vn-worker-descriptor-popover>
+</vn-worker-descriptor-popover>
+<vn-invoice-out-descriptor-popover 
+    vn-id="invoiceOutDescriptor">
+</vn-invoice-out-descriptor-popover>
+<vn-popup vn-id="summary">
+    <vn-ticket-summary
+        ticket="$ctrl.selectedTicket"
+        model="model">
+    </vn-ticket-summary>
+</vn-popup>

modules/client/front/summary/index.js

@@ -39,6 +39,43 @@ class Controller extends Summary {
         if (rate)
             return rate * 100;
     }
+
+    stateColor(ticket) {
+        if (ticket.alertLevelCode === 'OK')
+            return 'success';
+        else if (ticket.alertLevelCode === 'FREE')
+            return 'notice';
+        else if (ticket.alertLevel === 1)
+            return 'warning';
+        else if (ticket.alertLevel === 0)
+            return 'alert';
+    }
+
+    chipColor(date) {
+        const today = new Date();
+        today.setHours(0, 0, 0, 0);
+
+        const ticketShipped = new Date(date);
+        ticketShipped.setHours(0, 0, 0, 0);
+
+        const difference = today - ticketShipped;
+
+        if (difference == 0)
+            return 'warning';
+        if (difference < 0)
+            return 'success';
+    }
+
+    totalPriceColor(ticket) {
+        const total = parseInt(ticket.totalWithVat);
+        if (total > 0 && total < 50)
+            return 'warning';
+    }
+
+    preview(ticket) {
+        this.selectedTicket = ticket;
+        this.$.summary.show();
+    }
 }
 
 ngModule.vnComponent('vnClientSummary', {

modules/client/front/summary/index.spec.js

@@ -4,15 +4,15 @@ describe('Client', () => {
     describe('Component vnClientSummary', () => {
         let controller;
         let $httpBackend;
-        let $scope;
+        let $window;
 
         beforeEach(ngModule('client'));
 
-        beforeEach(inject(($componentController, _$httpBackend_, $rootScope) => {
+        beforeEach(inject(($componentController, _$httpBackend_, _$window_) => {
+            $window = _$window_;
             $httpBackend = _$httpBackend_;
-            $scope = $rootScope.$new();
             const $element = angular.element('<vn-client-summary></vn-client-summary>');
-            controller = $componentController('vnClientSummary', {$element, $scope});
+            controller = $componentController('vnClientSummary', {$element});
             controller.client = {id: 101};
         }));
 
@@ -48,5 +48,82 @@ describe('Client', () => {
                 expect(result).toEqual(300);
             });
         });
+
+        describe('chipColor()', () => {
+            it('should return warning when the date is the present', () => {
+                let today = new Date();
+                let result = controller.chipColor(today);
+
+                expect(result).toEqual('warning');
+            });
+
+            it('should return success when the date is in the future', () => {
+                let futureDate = new Date();
+                futureDate = futureDate.setDate(futureDate.getDate() + 10);
+                let result = controller.chipColor(futureDate);
+
+                expect(result).toEqual('success');
+            });
+
+            it('should return undefined when the date is in the past', () => {
+                let pastDate = new Date();
+                pastDate = pastDate.setDate(pastDate.getDate() - 10);
+                let result = controller.chipColor(pastDate);
+
+                expect(result).toEqual(undefined);
+            });
+        });
+
+        describe('stateColor()', () => {
+            it('should return "success" when the alertLevelCode property is "OK"', () => {
+                const result = controller.stateColor({alertLevelCode: 'OK'});
+
+                expect(result).toEqual('success');
+            });
+
+            it('should return "notice" when the alertLevelCode property is "FREE"', () => {
+                const result = controller.stateColor({alertLevelCode: 'FREE'});
+
+                expect(result).toEqual('notice');
+            });
+
+            it('should return "warning" when the alertLevel property is "1', () => {
+                const result = controller.stateColor({alertLevel: 1});
+
+                expect(result).toEqual('warning');
+            });
+
+            it('should return "alert" when the alertLevel property is "0"', () => {
+                const result = controller.stateColor({alertLevel: 0});
+
+                expect(result).toEqual('alert');
+            });
+        });
+
+        describe('totalPriceColor()', () => {
+            it('should return "warning" when the ticket amount is less than 50€', () => {
+                const result = controller.totalPriceColor({totalWithVat: '8.50'});
+
+                expect(result).toEqual('warning');
+            });
+        });
+
+        describe('preview()', () => {
+            it('should show the dialog summary', () => {
+                controller.$.summary = {show: () => {}};
+                jest.spyOn(controller.$.summary, 'show');
+
+                const ticket = {id: 1, clientFk: 101};
+
+                const event = new MouseEvent('click', {
+                    view: $window,
+                    bubbles: true,
+                    cancelable: true
+                });
+                controller.preview(event, ticket);
+
+                expect(controller.$.summary.show).toHaveBeenCalledWith();
+            });
+        });
     });
 });

modules/client/front/summary/locale/es.yml

@@ -19,3 +19,4 @@ Solunion's maximum risk: Riesgo máximo asumido por Solunion
 Invoices minus payments: Facturas menos recibos
 Deviated invoices minus payments: Facturas fuera de plazo menos recibos
 Go to the client: Ir al cliente
+Latest tickets: Últimos tickets

modules/client/front/summary/style.scss

@@ -1,6 +1,8 @@
 @import "variables";
 
-vn-client-summary {
+vn-client-summary .summary {
+    max-width: $width-lg;
+    
     .alert span {
         color: $color-alert !important
     }