2290 - Client consumption

front/core/styles/font-family.scss

@@ -14,7 +14,7 @@
     font-family: 'Material Icons';
     font-style: normal;
     font-weight: 400;
-    src: url('./icons/Material-Design-Icons.woff2') format('woff2'); 
+    src: url('./icons/MaterialIcons-Regular.woff2') format('woff2'); 
 }
 
 .material-icons {

modules/client/front/consumption/index.html

@@ -0,0 +1,89 @@
+<vn-crud-model
+    vn-id="model"
+    url="Items/getBalance"
+    filter="$ctrl.filter"
+    data="sales"
+    auto-load="false">
+</vn-crud-model>
+<vn-vertical>
+    <vn-card class="vn-pa-lg vn-w-lg">
+    <vn-vertical>
+        <vn-horizontal>
+            <vn-autocomplete
+                vn-focus
+                url="Warehouses"
+                show-field="name"
+                value-field="id"
+                initial-data="$ctrl.warehouseFk"
+                ng-model="$ctrl.warehouseFk"
+                label="Select warehouse">
+            </vn-autocomplete>
+        </vn-horizontal>
+        <vn-table model="model">
+            <vn-thead>
+                <vn-tr>
+                    <vn-th expand>Date</vn-th>
+                    <vn-th number order="DESC">Id</vn-th>
+                    <vn-th>State</vn-th>
+                    <vn-th>Reference</vn-th>
+                    <vn-th>Client</vn-th>
+                    <vn-th number>In</vn-th>
+                    <vn-th number>Out</vn-th>
+                    <vn-th number>Balance</vn-th>
+                </vn-tr>
+            </vn-thead>
+            <vn-tbody>
+                <vn-tr
+                    ng-class="::{
+                        'isIn': sale.in,
+                        'balanceNegative': sale.balance < 0}" 
+                    ng-repeat="sale in sales"
+                    vn-repeat-last
+                    on-last="$ctrl.scrollToLine(sale.lastPreparedLineFk)"
+                    ng-attr-id="vnItemDiary-{{::sale.lineFk}}">
+                    <vn-td expand>
+                        <span class="chip" 
+                            ng-class="::{warning: $ctrl.today == sale.shipped}">
+                            {{::sale.shipped | date:'dd/MM/yyyy' }}
+                        </span>
+                    </vn-td>
+                    <vn-td number>
+                        <span ng-class="::{link: sale.isTicket}"
+                            ng-click="$ctrl.showTicketDescriptor($event, sale)"
+                            name="origin">
+                            {{::sale.origin | dashIfEmpty}}
+                        </span>
+                    </vn-td>
+                    <vn-td>{{::sale.stateName | dashIfEmpty}}</vn-td>
+                    <vn-td>{{::sale.reference | dashIfEmpty}}</vn-td>
+                    <vn-td class="truncate">
+                        <span ng-if="::!sale.isTicket">
+                            {{::sale.name | dashIfEmpty}}
+                        </span>
+                        <span
+                            ng-if="::sale.isTicket"
+                            vn-click-stop="clientDescriptor.show($event, sale.clientFk)"
+                            class="link">
+                            {{::sale.name | dashIfEmpty}}
+                        </span>
+                    </vn-td>
+                    <vn-td number class="in">{{::sale.in | dashIfEmpty}}</vn-td>
+                    <vn-td number>{{::sale.out | dashIfEmpty}}</vn-td>
+                    <vn-td number class="balance">
+                        <span class="chip balanceSpan"
+                        ng-class="::{message: sale.lineFk == sale.lastPreparedLineFk}">
+                            {{::sale.balance | dashIfEmpty}}
+                        </span>
+                    </vn-td>
+                </vn-tr>
+            </vn-tbody>
+        </vn-table>
+    </vn-vertical>
+    </vn-card>
+</vn-vertical>
+<vn-ticket-descriptor-popover 
+    vn-id="ticket-descriptor">
+</vn-ticket-descriptor-popover>
+<vn-client-descriptor-popover 
+    vn-id="clientDescriptor">
+</vn-client-descriptor-popover>

modules/client/front/consumption/index.js

@@ -0,0 +1,25 @@
+import ngModule from '../module';
+import Section from 'salix/components/section';
+import './style.scss';
+
+class Controller extends Section {
+    constructor($element, $) {
+        super($element, $);
+    }
+
+    showTicketDescriptor(event, sale) {
+        if (!sale.isTicket) return;
+
+        this.$.ticketDescriptor.show(event.target, sale.origin);
+    }
+}
+
+Controller.$inject = ['$element', '$scope'];
+
+ngModule.component('vnClientConsumption', {
+    template: require('./index.html'),
+    controller: Controller,
+    bindings: {
+        client: '<'
+    }
+});

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

@@ -0,0 +1,65 @@
+import './index.js';
+import crudModel from 'core/mocks/crud-model';
+
+describe('Item', () => {
+    describe('Component vnItemDiary', () => {
+        let $scope;
+        let controller;
+
+        beforeEach(ngModule('item'));
+
+        beforeEach(angular.mock.inject(($componentController, $rootScope) => {
+            $scope = $rootScope.$new();
+            const $element = angular.element('<vn-item-diary></vn-item-diary>');
+            controller = $componentController('vnItemDiary', {$element, $scope});
+            controller.$.model = crudModel;
+            controller.$params = {id: 1};
+        }));
+
+        describe('set item()', () => {
+            it('should set warehouseFk property based on itemType warehouseFk', () => {
+                jest.spyOn(controller.$, '$applyAsync');
+                controller.item = {id: 1, itemType: {warehouseFk: 1}};
+
+                expect(controller.$.$applyAsync).toHaveBeenCalledWith(jasmine.any(Function));
+                $scope.$apply();
+
+                expect(controller.warehouseFk).toEqual(1);
+                expect(controller.item.id).toEqual(1);
+            });
+
+            it(`should set warehouseFk property based on url query warehouseFk`, () => {
+                jest.spyOn(controller.$, '$applyAsync');
+                controller.$params.warehouseFk = 4;
+                controller.item = {id: 1, itemType: {warehouseFk: 1}};
+
+                expect(controller.$.$applyAsync).toHaveBeenCalledWith(jasmine.any(Function));
+                $scope.$apply();
+
+                expect(controller.warehouseFk).toEqual(4);
+                expect(controller.item.id).toEqual(1);
+            });
+        });
+
+        describe('scrollToLine ()', () => {
+            it('should assign $location then call anchorScroll using controller value', () => {
+                jest.spyOn(controller, '$anchorScroll');
+                controller.lineFk = 1;
+                controller.scrollToLine('invalidValue');
+
+                expect(controller.$location.hash()).toEqual(`vnItemDiary-${1}`);
+                expect(controller.$anchorScroll).toHaveBeenCalledWith();
+            });
+
+            it('should assign $location then call anchorScroll using received value', () => {
+                jest.spyOn(controller, '$anchorScroll');
+                controller.lineFk = undefined;
+                controller.scrollToLine(1);
+
+                expect(controller.$location.hash()).toEqual(`vnItemDiary-${1}`);
+                expect(controller.$anchorScroll).toHaveBeenCalledWith();
+            });
+        });
+    });
+});
+

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

@@ -0,0 +1,4 @@
+In: Entrada
+Out: Salida
+Visible quantity: Cantidad visible
+Ticket/Entry: Ticket/Entrada

modules/client/front/consumption/style.scss

@@ -0,0 +1,30 @@
+@import "variables";
+
+vn-item-diary {
+    & > vn-vertical {
+        display: block;
+    }
+    vn-horizontal {
+        justify-content: center;
+    }
+    vn-autocomplete > div {
+        width: 400px;
+    }
+    .balanceNegative .balance {
+        color: $color-alert;
+    }
+    .isIn .in {
+        color: $color-success;
+        font-weight: bold;
+    }
+    .isToday .date {
+        color: white;
+        background-color: $color-main;
+    }
+    .truncate {
+        max-width: 250px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+}

modules/client/front/index.js

@@ -40,3 +40,4 @@ import './postcode';
 import './dms/index';
 import './dms/create';
 import './dms/edit';
+import './consumption';

modules/client/front/routes.json

@@ -18,6 +18,7 @@
             {"state": "client.card.greuge.index", "icon": "work"},
             {"state": "client.card.balance.index", "icon": "icon-invoices"},
             {"state": "client.card.recovery.index", "icon": "icon-recovery"}, 
+            {"state": "client.card.consumption", "icon": "show_chart"},
             {"state": "client.card.log", "icon": "history"},
             {
                 "description": "Others",
@@ -350,6 +351,15 @@
             "params": {
                 "client": "$ctrl.client"
             }
+        },
+        {
+            "url": "/consumption",
+            "state": "client.card.consumption",
+            "component": "vn-client-consumption",
+            "description": "Consumption",
+            "params": {
+                "client": "$ctrl.client"
+            }
         }
     ]
 }