Merge pull request '3683-feat(monito_clients): smart-table and filter by date' (#904) from 3683-monitor_clients into dev

Reviewed-on: #904
Reviewed-by: Joan Sanchez <joan@verdnatura.es>

modules/monitor/back/methods/sales-monitor/clientsFilter.js

@@ -40,7 +40,8 @@ module.exports = Self => {
                 IFNULL(sc.workerSubstitute, c.salesPersonFk) AS salesPersonFk,
                 c.id AS clientFk,
                 c.name AS clientName,
-                s.lastUpdate AS dated,
+                TIME(v.stamp) AS hour,
+                DATE(v.stamp) AS dated,
                 wtc.workerFk
             FROM hedera.userSession s
                 JOIN hedera.visitUser v ON v.id = s.userVisitFk

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

@@ -2,7 +2,8 @@
     vn-id="model"
     url="SalesMonitors/clientsFilter"
     limit="6"
-    order="dated DESC"
+    filter="$ctrl.filter"
+    order="dated DESC, hour DESC"
     auto-load="true">
 </vn-crud-model>
 <vn-horizontal class="header">
@@ -15,54 +16,81 @@
             vn-tooltip="Minimize/Maximize"
             ng-click="$ctrl.main.toggle()">
         </vn-icon>
-        <vn-icon
-            icon="refresh"
-            vn-tooltip="Refresh"
-            ng-click="model.refresh()">
-        </vn-icon>
     </vn-none>
 </vn-horizontal>
 <vn-card vn-id="card">
-    <vn-table model="model" class="scrollable sm">
+    <smart-table 
-        <vn-thead>
-            <vn-tr>
-                <vn-th field="dated">Hour</vn-th>
-                <vn-th field="salesPersonFk" class="expendable">Salesperson</vn-th>
-                <vn-th field="clientFk">Client</vn-th>
-            </vn-tr>
-        </vn-thead>
-        <vn-tbody>
-            <vn-tr ng-repeat="visit in model.data">
-                <vn-td shrink-date>
-                    <span class="chip">
-                        {{::visit.dated | date: 'HH:mm'}}
-                    </span>
-                </vn-td>
-                <vn-td class="shrink expendable">
-                    <span
-                        title="{{::visit.salesPerson}}"
-                        vn-click-stop="workerDescriptor.show($event, visit.salesPersonFk)"
-                        class="link">
-                        {{::visit.salesPerson | dashIfEmpty}}
-                    </span>
-                </vn-td>
-                <vn-td>
-                    <span
-                        title="{{::visit.clientName}}"
-                        vn-click-stop="clientDescriptor.show($event, visit.clientFk)"
-                        class="link">
-                        {{::visit.clientName}}
-                    </span>
-                </vn-td>
-            </vn-tr>
-        </vn-tbody>
-    </vn-table>
-    <vn-pagination
         model="model" 
-        class="vn-pt-xs"
+        options="$ctrl.smartTableOptions" 
-        scroll-selector="vn-monitor-sales-clients vn-table"
+        expr-builder="$ctrl.exprBuilder(param, value)"
-        scroll-offset="100">
+        class="scrollable sm">
-    </vn-pagination>
+        <slot-actions>
+            <vn-horizontal>
+                <vn-date-picker
+                    class="vn-pa-xs"
+                    label="From" 
+                    ng-model="$ctrl.dateFrom"
+                    on-change="$ctrl.addFilterDate()">
+                </vn-date-picker>
+                <vn-date-picker
+                    class="vn-pa-xs"
+                    label="To" 
+                    ng-model="$ctrl.dateTo"
+                    on-change="$ctrl.addFilterDate()">
+                </vn-date-picker>
+            </vn-horizontal>
+        </slot-actions>
+        <slot-table>
+            <table>
+                <thead>
+                    <tr>
+                        <th field="dated">
+                            <span translate>Date</span>
+                        </th>
+                        <th field="hour">
+                            <span translate>Hour</span>
+                        </th>
+                        <th field="salesPersonFk" class="expendable">
+                            <span translate>Salesperson</span>
+                        </th>
+                        <th field="clientFk">
+                            <span translate>Client</span>
+                        </th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr ng-repeat="visit in model.data">
+                        <td shrink-date>
+                            <span class="chip">
+                                {{::visit.dated | date:'dd/MM/yy'}}
+                            </span>
+                        </td>
+                        <td shrink-date>
+                            <span class="chip">
+                                {{::visit.hour | date: 'HH:mm'}}
+                            </span>
+                        </td>
+                        <td class="shrink expendable">
+                            <span
+                                title="{{::visit.salesPerson}}"
+                                vn-click-stop="workerDescriptor.show($event, visit.salesPersonFk)"
+                                class="link">
+                                {{::visit.salesPerson | dashIfEmpty}}
+                            </span>
+                        </td>
+                        <td>
+                            <span
+                                title="{{::visit.clientName}}"
+                                vn-click-stop="clientDescriptor.show($event, visit.clientFk)"
+                                class="link">
+                                {{::visit.clientName}}
+                            </span>
+                        </td>
+                    </tr>
+                </tbody>
+            <table>
+        <slot-table>
+    </smart-table>
 </vn-card>
 <vn-worker-descriptor-popover 
     vn-id="workerDescriptor">
@@ -70,32 +98,3 @@
 <vn-client-descriptor-popover
     vn-id="clientDescriptor">
 </vn-client-descriptor-popover>
-<vn-contextmenu vn-id="contextmenu" targets="['vn-monitor-sales-clients 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>

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

@@ -2,26 +2,89 @@ import ngModule from '../../module';
 import Section from 'salix/components/section';
 
 export default class Controller extends Section {
+    constructor($element, $) {
+        super($element, $);
+
+        const date = new Date();
+        this.dateFrom = date;
+        this.dateTo = date;
+        this.filter = {
+            where: {
+                'v.stamp': {
+                    between: this.dateRange()
+                }
+            }
+        };
+
+        this.smartTableOptions = {
+            activeButtons: {
+                search: true
+            },
+            columns: [
+                {
+                    field: 'clientFk',
+                    autocomplete: {
+                        url: 'Clients',
+                        showField: 'name',
+                        valueField: 'id'
+                    }
+                },
+                {
+                    field: 'salesPersonFk',
+                    autocomplete: {
+                        url: 'Workers/activeWithInheritedRole',
+                        where: `{role: 'salesPerson'}`,
+                        searchFunction: '{firstName: $search}',
+                        showField: 'nickname',
+                        valueField: 'id',
+                    }
+                },
+                {
+                    field: 'dated',
+                    searchable: false
+                },
+                {
+                    field: 'hour',
+                    searchable: false
+                }
+            ]
+        };
+    }
+
     exprBuilder(param, value) {
         switch (param) {
-        case 'dated':
-            return {'s.lastUpdate': {
-                between: this.dateRange(value)}
-            };
         case 'clientFk':
+            return {[`c.id`]: value};
         case 'salesPersonFk':
             return {[`c.${param}`]: value};
         }
     }
 
-    dateRange(value) {
+    dateRange() {
-        const minHour = new Date(value);
+        let from = this.dateFrom;
+        let to = this.dateTo;
+        if (!from)
+            from = new Date();
+        if (!to)
+            to = new Date();
+        const minHour = new Date(from);
         minHour.setHours(0, 0, 0, 0);
-        const maxHour = new Date(value);
+        const maxHour = new Date(to);
         maxHour.setHours(23, 59, 59, 59);
 
         return [minHour, maxHour];
     }
+
+    addFilterDate() {
+        this.$.model.filter = {
+            where: {
+                'v.stamp': {
+                    between: this.dateRange()
+                }
+            }
+        };
+        this.$.model.refresh();
+    }
 }
 
 ngModule.vnComponent('vnMonitorSalesClients', {