Merge pull request '2941 - Monitor changes' (#654) from 2941-salesMonitor_changes into dev

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

front/core/components/contextmenu/index.js

@@ -43,14 +43,14 @@ export default class Contextmenu {
     get row() {
         if (!this.target) return null;
 
-        return this.target.closest('vn-tr, .vn-tr');
+        return this.target.closest('[ng-repeat]');
     }
 
     get rowIndex() {
         if (!this.row) return null;
+
         const table = this.row.closest('vn-table, .vn-table');
-        const tBody = table.querySelector('vn-tbody, .vn-tbody');
+        const rows = table.querySelectorAll('[ng-repeat]');
-        const rows = tBody.querySelectorAll('vn-tr, .vn-tr');
 
         return Array.from(rows).findIndex(
             rowItem => rowItem == this.row

modules/client/front/web-payment/index.html

@@ -25,7 +25,7 @@
             <vn-tr ng-repeat="transaction in transactions">
                 <vn-td shrink>
                     <vn-icon
-                        vn-tooltip="{{$ctrl.getFormattedMessage(transaction)}}"
+                        vn-tooltip="{{::$ctrl.getFormattedMessage(transaction)}}"
                         ng-show="::((transaction.errorMessage || transaction.responseMessage) && !transaction.isConfirmed)" 
                         icon="clear">
                     </vn-icon>

modules/monitor/front/index/clients/index.html

@@ -10,6 +10,11 @@
         Clients on website
     </vn-one>
     <vn-none>
+        <vn-icon class="arrow"
+            icon="keyboard_arrow_up"
+            vn-tooltip="Minimize/Maximize"
+            ng-click="$ctrl.main.toggle()">
+        </vn-icon>
         <vn-icon
             icon="refresh"
             vn-tooltip="Refresh"
@@ -17,7 +22,7 @@
         </vn-icon>
     </vn-none>
 </vn-horizontal>
-<vn-card>
+<vn-card vn-id="card">
     <vn-table model="model" class="scrollable sm">
         <vn-thead>
             <vn-tr>
@@ -52,12 +57,6 @@
             </vn-tr>
         </vn-tbody>
     </vn-table>
-    <div 
-        ng-if="!model.data.length" 
-        class="empty-rows vn-pa-sm" 
-        translate>
-        No results
-    </div>
     <vn-pagination
         model="model"
         class="vn-pt-xs"

modules/monitor/front/index/clients/index.js

@@ -26,5 +26,8 @@ export default class Controller extends Section {
 
 ngModule.vnComponent('vnMonitorSalesClients', {
     template: require('./index.html'),
-    controller: Controller
+    controller: Controller,
+    require: {
+        main: '^vnMonitorIndex'
+    }
 });

modules/monitor/front/index/index.html

@@ -1,11 +1,5 @@
 <vn-horizontal>
-    <vn-three class="vn-mr-sm">
+    <vn-monitor-sales-clients class="vn-mb-sm"></vn-monitor-sales-clients>
-        <vn-monitor-sales-tickets></vn-monitor-sales-tickets>
+    <vn-monitor-sales-orders></vn-monitor-sales-orders>
-    </vn-three>
+</vn-horizontal>
-    <vn-one>
+<vn-monitor-sales-tickets></vn-monitor-sales-tickets>
-        <vn-vertical>
-            <vn-monitor-sales-clients class="vn-mb-sm"></vn-monitor-sales-clients>
-            <vn-monitor-sales-orders></vn-monitor-sales-orders>
-        </vn-vertical>
-    </vn-one>
-</vn-horizontal>

modules/monitor/front/index/index.js

@@ -2,7 +2,22 @@ import ngModule from '../module';
 import Section from 'salix/components/section';
 import './style.scss';
 
+export default class Controller extends Section {
+    toggle() {
+        const monitor = this.element.querySelector('vn-horizontal');
+        const isHidden = monitor.classList.contains('hidden');
+
+        if (!isHidden)
+            monitor.classList.add('hidden');
+        else
+            monitor.classList.remove('hidden');
+    }
+}
+
 ngModule.vnComponent('vnMonitorIndex', {
     template: require('./index.html'),
-    controller: Section
+    controller: Controller,
+    require: {
+        main: '^vnMonitorIndex'
+    }
 });

modules/monitor/front/index/locale/es.yml

@@ -4,4 +4,5 @@ Recent order actions: Acciones recientes en pedidos
 Search tickets: Buscar tickets
 Delete selected elements: Eliminar los elementos seleccionados
 All the selected elements will be deleted. Are you sure you want to continue?: Todos los elementos seleccionados serán eliminados. ¿Seguro que quieres continuar?
-Component lack: Faltan componentes
+Component lack: Faltan componentes
+Minimize/Maximize: Minimizar/Maximizar

modules/monitor/front/index/orders/index.html

@@ -1,4 +1,4 @@
-<vn-crud-model
+<vn-crud-model auto-load="true"
     vn-id="model"
     url="SalesMonitors/ordersFilter"
     limit="6"
@@ -15,6 +15,11 @@
             ng-if="$ctrl.totalChecked > 0"
             ng-click="delete.show()">
         </vn-icon>
+        <vn-icon class="arrow"
+            icon="keyboard_arrow_up"
+            vn-tooltip="Minimize/Maximize"
+            ng-click="$ctrl.main.toggle()">
+        </vn-icon>
         <vn-icon
             icon="refresh"
             vn-tooltip="Refresh"
@@ -31,13 +36,13 @@
                         model="model">
                     </vn-multi-check>
                 </vn-th>
-                <vn-th field="date_make" shrink-datetime default-order="DESC">Date</vn-th>
+                <vn-th field="date_send" shrink-datetime>Date</vn-th>
                 <vn-th field="clientFk">Client</vn-th>
-                <vn-th>Import</vn-th>
+                <vn-th field="salesPersonFk" shrink>SalesPerson</vn-th>
             </vn-tr>
         </vn-thead>
         <a ng-repeat="order in model.data"
-                class="clickable vn-tbody search-result"
+                class="clickable vn-tbody"
                 ui-sref="order.card.summary({id: {{::order.id}}})" target="_blank">
             <vn-tr>
                 <vn-td>
@@ -47,7 +52,7 @@
                     </vn-check>
                 </vn-td>
                 <vn-td>
-                    <span class="chip success">
+                    <span class="chip {{::$ctrl.chipColor(order.date_send)}}">
                         {{::order.date_send | date: 'dd/MM/yyyy'}}
                     </span>
                 </vn-td>
@@ -59,11 +64,18 @@
                         {{::order.clientName}}
                     </span>
                 </vn-td>
-                <vn-td number>{{::order.import | currency: 'EUR':2}}</vn-td>
+                <vn-td>
+                    <span
+                        title="{{::order.salesPerson}}"
+                        vn-click-stop="workerDescriptor.show($event, order.salesPersonFk)"
+                        class="link">
+                        {{::order.salesPerson | dashIfEmpty}}
+                    </span>
+                </vn-td>
             </vn-tr>
             <vn-tr>
                 <vn-td></vn-td>
-                <vn-td shrink-datetime>
+                <vn-td>
                     <span>
                         {{::order.date_make | date: 'dd/MM/yyyy HH:mm'}}
                     </span>
@@ -74,22 +86,11 @@
                     </span>
                 </vn-td>
                 <vn-td>
-                    <span
+                    {{::order.import | currency: 'EUR':2}}
-                        title="{{::order.salesPerson}}"
-                        vn-click-stop="workerDescriptor.show($event, order.salesPersonFk)"
-                        class="link">
-                        {{::order.salesPerson | dashIfEmpty}}
-                    </span>
                 </vn-td>
             </vn-tr>
         </a>
     </vn-table>
-    <div 
-        ng-if="!model.data.length" 
-        class="empty-rows vn-pa-sm" 
-        translate>
-        No results
-    </div>
     <vn-pagination
         model="model"
         class="vn-pt-xs"
@@ -103,6 +104,35 @@
 <vn-client-descriptor-popover
     vn-id="clientDescriptor">
 </vn-client-descriptor-popover>
+<vn-contextmenu vn-id="contextmenu" targets="['vn-monitor-sales-orders vn-table']" model="model"
+    expr-builder="$ctrl.exprBuilder(param, value)">
+    <slot-menu>
+        <vn-item translate
+            ng-if="contextmenu.isFilterAllowed()"
+            ng-click="contextmenu.filterBySelection()">
+            Filter by selection
+        </vn-item>
+        <vn-item translate 
+            ng-if="contextmenu.isFilterAllowed()" 
+            ng-click="contextmenu.excludeSelection()">
+            Exclude selection
+        </vn-item>
+        <vn-item translate 
+            ng-if="contextmenu.isFilterAllowed()" 
+            ng-click="contextmenu.removeFilter()">
+            Remove filter
+        </vn-item>
+        <vn-item translate 
+            ng-click="contextmenu.removeAllFilters()">
+            Remove all filters
+        </vn-item>
+        <vn-item translate 
+            ng-if="contextmenu.isActionAllowed()" 
+            ng-click="contextmenu.copyValue()">
+            Copy value
+        </vn-item>
+    </slot-menu>
+</vn-contextmenu>
 <vn-confirm
     vn-id="delete"
     on-accept="$ctrl.onDelete()"

modules/monitor/front/index/orders/index.js

@@ -24,9 +24,51 @@ export default class Controller extends Section {
         this.$http.post(query, params).then(
             () => this.$.model.refresh());
     }
+
+    chipColor(date) {
+        const today = new Date();
+        today.setHours(0, 0, 0, 0);
+
+        const orderLanded = new Date(date);
+        orderLanded.setHours(0, 0, 0, 0);
+
+        const difference = today - orderLanded;
+
+        if (difference == 0)
+            return 'warning';
+        if (difference < 0)
+            return 'success';
+        if (difference > 0)
+            return 'alert';
+    }
+
+    exprBuilder(param, value) {
+        switch (param) {
+        case 'date_send':
+            return {[`o.date_send`]: {
+                between: this.dateRange(value)}
+            };
+        case 'clientFk':
+            return {[`c.id`]: value};
+        case 'salesPersonFk':
+            return {[`c.${param}`]: value};
+        }
+    }
+
+    dateRange(value) {
+        const minHour = new Date(value);
+        minHour.setHours(0, 0, 0, 0);
+        const maxHour = new Date(value);
+        maxHour.setHours(23, 59, 59, 59);
+
+        return [minHour, maxHour];
+    }
 }
 
 ngModule.vnComponent('vnMonitorSalesOrders', {
     template: require('./index.html'),
-    controller: Controller
+    controller: Controller,
+    require: {
+        main: '^vnMonitorIndex'
+    }
 });

modules/monitor/front/index/orders/style.scss

@@ -2,7 +2,8 @@
 
 vn-monitor-sales-orders {
     vn-table.scrollable {
-        max-height: 350px
+        max-height: 350px;
+        overflow-x: hidden
     }
     
     vn-table a.vn-tbody {

modules/monitor/front/index/search-panel/index.html

@@ -21,36 +21,17 @@
                 ng-model="filter.orderFk">
             </vn-textfield>
         </vn-horizontal>
-        <section class="vn-px-md">
+        <vn-horizontal class="vn-px-lg">
-            <vn-horizontal class="manifold-panel vn-pa-md">
+            <vn-input-number
-                <vn-date-picker
+                vn-one
-                    vn-one
+                min="0"
-                    label="From"
+                step="1"
-                    ng-model="filter.from"
+                label="Days onward"
-                    on-change="$ctrl.from = value">
+                ng-model="filter.scopeDays"
-                </vn-date-picker>
+                on-change="$ctrl.scopeDays = value"
-                <vn-date-picker
+                display-controls="true">
-                    vn-one
+            </vn-input-number>
-                    label="To"
+        </vn-horizontal>
-                    ng-model="filter.to"
-                    on-change="$ctrl.to = value">
-                </vn-date-picker>
-                <vn-none class="or vn-px-md" translate>Or</vn-none>
-                <vn-input-number
-                    vn-one
-                    min="0"
-                    step="1"
-                    label="Days onward"
-                    ng-model="filter.scopeDays"
-                    on-change="$ctrl.scopeDays = value"
-                    display-controls="true">
-                </vn-input-number>
-                <vn-icon color-marginal
-                    icon="info"
-                    vn-tooltip="Cannot choose a range of dates and days onward at the same time">
-                </vn-icon>
-            </vn-horizontal>
-        </section>
         <vn-horizontal class="vn-px-lg">
             <vn-textfield
                 vn-one

modules/monitor/front/index/style.scss

@@ -3,54 +3,83 @@
 
 vn-monitor-index {
     .header {
-        padding: 12px 0;
+        padding: 12px 0 5px 0;
         color: gray;
         font-size: 1.2rem;
+        border-bottom: 2px solid $color-font-secondary;
+        margin-bottom: 10px;
 
         & > vn-none > vn-icon {
             @extend %clickable-light;
             color: $color-button;
             font-size: 1.4rem;
         }
-    }
+
-    .empty-rows {
+        vn-none > .arrow {
-        color: $color-font-secondary;
+            transition: transform 200ms;
-        text-align: center;
+        }
     }
 
-    vn-vertical {
+    vn-monitor-sales-clients {
-        position: fixed;
+        vn-card {
-        width: 400px
+            margin-right: 15px;
+        }
+
+        .header {
+            padding-right: 15px;
+
+            & > vn-none > .arrow {
+                display: none
+            }
+        }
+    }
+
+    vn-table.scrollable {
+        height: 300px
     }
 
     vn-horizontal {
         flex-wrap: wrap
     }
+
+    .hidden {
+        vn-card {
+            display: none
+        }
+        
+        .header > vn-none > .arrow {
+            transform: rotate(180deg);
+        }
+    }
 }
 
-@media (max-width:1500px) {
+@media (max-width:1150px) {
     vn-monitor-index {
         & > vn-horizontal {
-            flex-direction: column-reverse;
+            flex-direction: column;
+
+            vn-monitor-sales-clients,
+            vn-monitor-sales-orders {
+                width: 100%
+            }
+
+            vn-monitor-sales-clients {
+                margin-bottom: 15px
+            }
         }
 
-        & > vn-horizontal > vn-one {
+        vn-monitor-sales-clients {
-            flex: none;
+            vn-card {
-            width: 100%;
+                margin-right: 0
+            }
 
-            & > vn-vertical {
+            .header {
-                position: initial;
+                padding-right: 0;
-                flex-direction: row;
+    
-                width: 100%;
+                & > vn-none > .arrow {
-        
+                    display: inline-block
-                vn-monitor-sales-clients {
-                    margin-right: 15px
-                }
-
-                vn-table.scrollable {
-                    height: 300px
                 }
             }
         }
-    }
+    } 
 }

modules/monitor/front/index/tickets/index.spec.js

@@ -115,6 +115,14 @@ describe('Component vnMonitorSalesTickets', () => {
         });
     });
 
+    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: () => {}};