refactor(smart-table): style changes and added smart-table to sales monitor

front/core/components/smart-table/index.html

@@ -7,15 +7,12 @@
                 vn-tooltip="Shown columns">
             </vn-button>
             <div ng-transclude="actions"></div> <!-- transcluded actions -->
-            <div class="totalRows" ng-if="$ctrl.model.data"> 
-                < 
-                <span translate>Showing</span>
-                {{model.data.length}} 
-                <span translate>results</span> 
-                >
-            </div>
         </div>
         <div class="actions-right">
+            <div class="totalRows" ng-if="$ctrl.model.data"> 
+                {{model.data.length}} 
+                <span translate>results</span> 
+            </div>
             <vn-button icon="search"
                 ng-if="$ctrl.options.activeButtons.search"
                 ng-click="$ctrl.displaySearch()"
@@ -74,8 +71,21 @@
 </vn-crud-model>
 <vn-popover vn-id="smart-table-columns" message="Fields to show">
     <tpl-body>
-        <div class="smart-table-columns vn-pa-md vn-w-xs">
+        <div class="smart-table-columns vn-pa-md vn-w-sm">
-            <h6 class="vn-mb-sm" translate>Check the columns you want to see</h6>
+            <vn-horizontal>
+                <h6 translate style="margin:0">Shown columns</h6>
+                <vn-icon 
+                    vn-none
+                    icon="info" 
+                    color-marginal
+                    vn-tooltip="Check the columns you want to see"/>
+            </vn-horizontal>
+            <div class="vn-mb-md">
+                <vn-check label="Tick all"
+                    ng-model="$ctrl.checkAll">
+                </vn-check>
+            </div>
+
             <vn-horizontal class="vn-mb-md">
                 <vn-check ng-repeat="column in $ctrl.columns"
                     label="{{column.caption}}"

front/core/components/smart-table/index.js

@@ -97,6 +97,19 @@ export default class SmartTable extends Component {
         return null;
     }
 
+    get checkAll() {
+        return this._checkAll;
+    }
+
+    set checkAll(value) {
+        this._checkAll = value;
+        if (value !== undefined) {
+            const shownColumns = this.viewConfig[0].configuration;
+            for (let param in shownColumns)
+                shownColumns[param] = value;
+        }
+    }
+
     transclude() {
         const slotTable = this.element.querySelector('#table');
         this.$transclude(($clone, $scope) => {

front/core/components/smart-table/locale/es.yml

@@ -5,4 +5,5 @@ Save data: Guardar datos
 Shown columns: Columnas visibles
 Check the columns you want to see: Marca las columnas que quieres ver
 Showing: Mostrando
-results: resultados
+results: resultados
+Tick all: Marcar todas

front/core/components/smart-table/style.scss

@@ -5,6 +5,51 @@ smart-table {
     th[field] {
         overflow: visible;
         cursor: pointer;
+        align-items: center;
+
+        & > * {
+            display: flex
+        }
+    }
+    th[field][number] {
+        & > :before {
+            display: flex;
+            font-family: 'Material Icons';
+            content: 'arrow_downward';
+            color: $color-spacer;
+            margin: 2px 2px 0 0;
+            opacity: 0
+        
+        }
+
+        &.asc > :before, &.desc > :before {
+            color: $color-font;
+            opacity: 1;
+        }
+
+        &.asc > :before {
+            content: 'arrow_upward';
+        }
+
+        &.desc > :before {
+            content: 'arrow_downward';
+        }
+
+        &:hover > :before {
+            opacity: 1;
+        }
+    }
+
+    th[field]:not([number]) {
+        & > :after {
+            display: flex;
+            font-family: 'Material Icons';
+            content: 'arrow_downward';
+            color: $color-spacer;
+            margin: 2px 0 0 2px;
+            opacity: 0
+        
+        }
 
         &.asc > :after, &.desc > :after {
             color: $color-font;
@@ -12,23 +57,13 @@ smart-table {
         }
 
         &.asc > :after {
-            content: 'arrow_drop_up';
+            content: 'arrow_upward';
         }
 
         &.desc > :after {
-            content: 'arrow_drop_down';
+            content: 'arrow_downward';
         }
 
-        & > :after {
-            font-family: 'Material Icons';
-            content: 'arrow_drop_down';
-            position: absolute;
-            color: $color-spacer;
-            font-size: 1.5em;
-            margin-top: -2px;
-            opacity: 0
-        
-        }
         &:hover > :after {
             opacity: 1;
         }
@@ -81,6 +116,7 @@ smart-table {
 
     #table {
         overflow-x: auto;
+        margin-top: 15px
     }
 
     vn-tbody a[ng-repeat].vn-tr:focus {
@@ -108,6 +144,6 @@ smart-table {
 
     vn-check {
         flex: initial;
-        width: 50%
+        width: 33%
     }
 }

front/core/components/smart-table/table.scss

@@ -35,7 +35,7 @@ smart-table table {
                     text-align: right;
                     width: 96px;
                 }
-                &[center] {
+                &[centered] {
                     text-align: center;
                 }
                 &[shrink] {
@@ -54,6 +54,13 @@ smart-table table {
                     max-width: 400px;
                     min-width: 0;
                 }
+                &[actions] {
+                    width: 1px;
+
+                    & > * {
+                        vertical-align: middle;
+                    }
+                }
                 vn-icon.bright, i.bright {
                     color: #f7931e;
                 }

modules/entry/front/latest-buys/index.html

@@ -36,13 +36,13 @@
                         <th field="id">
                             <span translate>Identifier</span>
                         </th>
-                        <th field="packing">
+                        <th field="packing" number>
                             <span translate>Packing</span>
                         </th>
-                        <th field="grouping">
+                        <th field="grouping" number>
                             <span translate>Grouping</span>
                         </th>
-                        <th field="quantity">
+                        <th field="quantity" number>
                             <span translate>Quantity</span>
                         </th>
                         <th field="description">
@@ -75,29 +75,29 @@
                         <th field="entryFk">
                             <span translate>Entry</span>
                         </th>
-                        <th field="buyingValue">
+                        <th field="buyingValue" number>
                             <span translate>Buying value</span>
                         </th>
-                        <th field="freightValue">
+                        <th field="freightValue" number>
                             <span translate>Freight value</span>
                         </th>
-                        <th field="comissionValue">
+                        <th field="comissionValue" number>
                             <span translate>Commission value</span>
                         </th>
-                        <th field="packageValue">
+                        <th field="packageValue" number>
                             <span translate>Package value</span>
                         </th>
                         <th field="isIgnored">
                             <span translate>Is ignored</span>
                         </th>
-                        <th field="price2">
+                        <th field="price2" number>
-                            <span translate>Grouping price</span>
+                            <span translate>Grouping</span>
                         </th>
-                        <th field="price3">
+                        <th field="price3" number>
-                            <span translate>Packing price</span>
+                            <span translate>Packing</span>
                         </th>
-                        <th field="minPrice">
+                        <th field="minPrice" number>
-                            <span translate>Min price</span>
+                            <span translate>Min</span>
                         </th>
                         <th field="ektFk">
                             <span translate>Ekt</span>
@@ -106,10 +106,10 @@
                             <span translate>Weight</span>
                         </th>
                         <th field="packageFk">
-                            <span translate>Package name</span>
+                            <span translate>Package</span>
                         </th>
                         <th field="packingOut">
-                            <span translate>Packing out</span>
+                            <span translate>Package out</span>
                         </th>
                     </tr>
                 </thead>
@@ -139,21 +139,21 @@
                                 {{::buy.itemFk | zeroFill:6}}
                             </span>
                         </td>
-                        <td>
+                        <td number>
                             <vn-chip class="transparent" translate-attr="buy.groupingMode == 2 ? {title: 'Minimun amount'} : {title: 'Packing'}" ng-class="{'message': buy.groupingMode == 2}"> 
                                 <span translate>{{::buy.packing | dashIfEmpty}}</span>
                             </vn-chip>
                         </td>
-                        <td>
+                        <td number>
                             <vn-chip class="transparent" translate-attr="buy.groupingMode == 1 ? {title: 'Minimun amount'} : {title: 'Grouping'}" ng-class="{'message': buy.groupingMode == 1}"> 
                                 <span translate>{{::buy.grouping | dashIfEmpty}}</span>
                             </vn-chip>
                         </td>
-                        <td>{{::buy.quantity}}</td>
+                        <td number>{{::buy.quantity}}</td>
                         <td vn-two title="{{::buy.description}}">
                             {{::buy.description | dashIfEmpty}}
                         </td>
-                        <td>{{::buy.size}}</td>
+                        <td number>{{::buy.size}}</td>
                         <td vn-fetched-tags>
                             <div>
                                 <vn-one title="{{::buy.name}}">{{::buy.name}}</vn-one>
@@ -189,19 +189,19 @@
                                 {{::buy.entryFk}}
                             </span>
                         </td>
-                        <td>{{::buy.buyingValue | currency: 'EUR':2}}</td>
+                        <td number>{{::buy.buyingValue | currency: 'EUR':2}}</td>
-                        <td>{{::buy.freightValue | currency: 'EUR':2}}</td>
+                        <td number>{{::buy.freightValue | currency: 'EUR':2}}</td>
-                        <td>{{::buy.comissionValue | currency: 'EUR':2}}</td>
+                        <td number>{{::buy.comissionValue | currency: 'EUR':2}}</td>
-                        <td>{{::buy.packageValue | currency: 'EUR':2}}</td>
+                        <td number>{{::buy.packageValue | currency: 'EUR':2}}</td>
                         <td>
                             <vn-check
                                 disabled="true"
                                 ng-model="::buy.isIgnored">
                             </vn-check> 
                         </td>
-                        <td>{{::buy.price2 | currency: 'EUR':2}}</td>
+                        <td number>{{::buy.price2 | currency: 'EUR':2}}</td>
-                        <td>{{::buy.price3 | currency: 'EUR':2}}</td>
+                        <td number>{{::buy.price3 | currency: 'EUR':2}}</td>
-                        <td>{{::buy.minPrice | currency: 'EUR':2}}</td>
+                        <td number>{{::buy.minPrice | currency: 'EUR':2}}</td>
                         <td>{{::buy.ektFk | dashIfEmpty}}</td>
                         <td>{{::buy.weight}}</td>
                         <td>{{::buy.packageFk}}</td>

modules/entry/front/latest-buys/locale/es.yml

@@ -14,4 +14,4 @@ Field to edit: Campo a editar
 PackageName: Cubo
 Edit: Editar
 buy(s): compra(s)
-PackingOut: Packing envíos
+Package out: Embalaje envíos

modules/monitor/front/index/tickets/index.html

@@ -34,141 +34,180 @@
     </vn-none>
 </vn-horizontal>
 <vn-card>
-    <vn-table model="model">
+    <smart-table 
-        <vn-thead>
+        model="model" 
-            <vn-tr>
+        view-config-id="ticketsMonitor" 
-                <vn-th field="totalProblems" menu-enabled="false">Problems</vn-th>
+        options="$ctrl.smartTableOptions" 
-                <vn-th field="nickname">Client</vn-th>
+        expr-builder="$ctrl.exprBuilder(param, value)">
-                <vn-th field="salesPersonFk" class="expendable" shrink>Salesperson</vn-th>
+        <slot-table>
-                <vn-th field="shipped" shrink-date>Date</vn-th>
+            <table>
-                <vn-th field="preparationHour" filter-enabled="false">Prep.</vn-th>
+                <thead>
-                <vn-th field="theoreticalHour">Theoretical</vn-th>
+                    <tr>
-                <vn-th field="practicalHour">Practical</vn-th>
+                        <th field="totalProblems" menu-enabled="false">
-                <vn-th field="provinceFk" class="expendable">Province</vn-th>
+                            <span translate>Problems</span>
-                <vn-th field="stateFk">State</vn-th>
+                        </th>
-                <vn-th field="zoneFk">Zone</vn-th>
+                        <th field="id">
-                <vn-th field="totalWithVat" shrink>Total</vn-th>
+                            <span translate>Identifier</span>
-                <vn-th></vn-th>
+                        </th>
-            </vn-tr>
+                        <th field="nickname">
-        </vn-thead>
+                            <span translate>Client</span>
-        <vn-tbody>
+                        </th>
-            <a ng-repeat="ticket in model.data"
+                        <th field="salesPersonFk">
-                class="clickable vn-tr search-result"
+                            <span translate>Salesperson</span>
-                ui-sref="ticket.card.summary({id: {{::ticket.id}}})" target="_blank">
+                        </th>
-                <vn-td expand>
+                        <th field="shipped" shrink-date>
-                    <vn-icon
+                            <span translate>Date</span>
-                        ng-show="::ticket.isTaxDataChecked === 0"
+                        </th>
-                        translate-attr="{title: 'No verified data'}"
+                        <th field="preparationHour" filter-enabled="false">
-                        class="bright"
+                            <span translate>Preparation</span>
-                        icon="icon-no036">
+                        </th>
-                    </vn-icon>
+                        <th field="theoreticalHour">
-                    <vn-icon
+                            <span translate>Theoretical</span>
-                        ng-show="::ticket.hasTicketRequest"
+                        </th>
-                        translate-attr="{title: 'Purchase request'}"
+                        <th field="practicalHour">
-                        class="bright"
+                            <span translate>Practical</span>
-                        icon="icon-100">
+                        </th>
-                    </vn-icon>
+                        <th field="provinceFk">
-                    <vn-icon
+                            <span translate>Province</span>
-                        ng-show="::ticket.isAvailable === 0"
+                        </th>
-                        translate-attr="{title: 'Not available'}"
+                        <th field="stateFk">
-                        class="bright"
+                            <span translate>State</span>
-                        icon="icon-unavailable">
+                        </th>
-                    </vn-icon>
+                        <th field="zoneFk">
-                    <vn-icon
+                            <span translate>Zone</span>
-                        ng-show="::ticket.isFreezed"
+                        </th>
-                        translate-attr="{title: 'Client frozen'}"
+                        <th field="totalWithVat" shrink>
-                        class="bright"
+                            <span translate>Total</span>
-                        icon="icon-frozen">
+                        </th>
-                    </vn-icon>
+                        <th shrink></th>
-                    <vn-icon
+                    </tr>
-                        ng-show="::ticket.risk"
+                </thead>
-                        ng-class="::{'highRisk': ticket.hasHighRisk}"
+                <tbody>
-                        title="{{::$ctrl.$t('Risk')}}: {{ticket.risk}}"
+                    <tr ng-repeat="ticket in model.data"
-                        class="bright"
-                        icon="icon-risk">
-                    </vn-icon>
-                    <vn-icon
-                        ng-show="::ticket.hasComponentLack"
-                        translate-attr="{title: 'Component lack'}"
-                        class="bright"
-                        icon="icon-components">
-                    </vn-icon>
-                </vn-td>
-                <vn-td name="nickname">
-                    <span
-                        title="{{::ticket.nickname}}"
-                        vn-click-stop="clientDescriptor.show($event, ticket.clientFk)"
-                        class="link">
-                        {{::ticket.nickname}}
-                    </span>
-                </vn-td>
-                <vn-td class="expendable" shrink>
-                    <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.compareDate(ticket.shipped)}}">
-                        {{::ticket.shipped | date: 'dd/MM/yyyy'}}
-                    </span>
-                </vn-td>
-                <vn-td shrink>{{::ticket.shipped | date: 'HH:mm'}}</vn-td>
-                <vn-td shrink>{{::ticket.zoneLanding | date: 'HH:mm'}}</vn-td>
-                <vn-td shrink>{{::ticket.practicalHour | date: 'HH:mm'}}</vn-td>
-                <vn-td class="expendable">{{::ticket.province}}</vn-td>
-                <vn-td class="expendable">
-                    <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>
-                    <span
-                        title="{{::ticket.zoneName}}"
-                        vn-click-stop="zoneDescriptor.show($event, ticket.zoneFk)"
-                        class="link">
-                        {{::ticket.zoneName | dashIfEmpty}}
-                    </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', 
+                            state: 'ticket.card.summary', 
-                            params: {id: ticket.id}, 
+                            params: {id: ticket.id},
                             target: '_blank'
-                        }"
+                        }">
-                        vn-tooltip="Go to lines"
+                        <td>
-                        icon="icon-lines">
+                            <vn-icon
-                    </vn-icon-button>
+                                ng-show="::ticket.isTaxDataChecked === 0"
-                    <vn-icon-button
+                                translate-attr="{title: 'No verified data'}"
-                        vn-click-stop="$ctrl.preview(ticket)"
+                                class="bright"
-                        vn-tooltip="Preview"
+                                icon="icon-no036">
-                        icon="preview">
+                            </vn-icon>
-                    </vn-icon-button>
+                            <vn-icon
-                </vn-td>
+                                ng-show="::ticket.hasTicketRequest"
-            </a>
+                                translate-attr="{title: 'Purchase request'}"
-        </vn-tbody>
+                                class="bright"
-    </vn-table>
+                                icon="icon-100">
-    <vn-pagination
+                            </vn-icon>
-        model="model"
+                            <vn-icon
-        class="vn-pt-xs">
+                                ng-show="::ticket.isAvailable === 0"
-    </vn-pagination>
+                                translate-attr="{title: 'Not available'}"
+                                class="bright"
+                                icon="icon-unavailable">
+                            </vn-icon>
+                            <vn-icon
+                                ng-show="::ticket.isFreezed"
+                                translate-attr="{title: 'Client frozen'}"
+                                class="bright"
+                                icon="icon-frozen">
+                            </vn-icon>
+                            <vn-icon
+                                ng-show="::ticket.risk"
+                                ng-class="::{'highRisk': ticket.hasHighRisk}"
+                                title="{{::$ctrl.$t('Risk')}}: {{ticket.risk}}"
+                                class="bright"
+                                icon="icon-risk">
+                            </vn-icon>
+                            <vn-icon
+                                ng-show="::ticket.hasComponentLack"
+                                translate-attr="{title: 'Component lack'}"
+                                class="bright"
+                                icon="icon-components">
+                            </vn-icon>
+                        </td>
+                         <td>
+                            <span
+                                vn-click-stop="ticketDescriptor.show($event, ticket.id)"
+                                class="link">
+                                {{::ticket.id}}
+                            </span>
+                        </td>
+                        <td name="nickname">
+                            <span
+                                title="{{::ticket.nickname}}"
+                                vn-click-stop="clientDescriptor.show($event, ticket.clientFk)"
+                                class="link">
+                                {{::ticket.nickname}}
+                            </span>
+                        </td>
+                        <td>
+                            <span
+                                title="{{::ticket.userName}}"
+                                vn-click-stop="workerDescriptor.show($event, ticket.salesPersonFk)"
+                                class="link">
+                                {{::ticket.userName | dashIfEmpty}}
+                            </span>
+                        </td>
+                        <td>
+                            <span class="chip {{::$ctrl.compareDate(ticket.shipped)}}">
+                                {{::ticket.shipped | date: 'dd/MM/yyyy'}}
+                            </span>
+                        </td>
+                        <td centered>{{::ticket.shipped | date: 'HH:mm'}}</td>
+                        <td centered>{{::ticket.zoneLanding | date: 'HH:mm'}}</td>
+                        <td centered>{{::ticket.practicalHour | date: 'HH:mm'}}</td>
+                        <td>{{::ticket.province}}</td>
+                        <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>
+                        </td>
+                        <td>
+                            <span
+                                title="{{::ticket.zoneName}}"
+                                vn-click-stop="zoneDescriptor.show($event, ticket.zoneFk)"
+                                class="link">
+                                {{::ticket.zoneName | dashIfEmpty}}
+                            </span>
+                        </td>
+                        <td number>
+                            <span class="chip {{::$ctrl.totalPriceColor(ticket)}}">
+                                {{::(ticket.totalWithVat ? ticket.totalWithVat : 0) | currency: 'EUR': 2}}
+                            </span>
+                        </td>
+                        <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>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </slot-table>
+    </smart-table>
 </vn-card>
 <vn-worker-descriptor-popover 
     vn-id="workerDescriptor">
@@ -185,7 +224,7 @@
         model="model">
     </vn-ticket-summary>
 </vn-popup>
-<vn-contextmenu vn-id="contextmenu" targets="['vn-monitor-sales-tickets vn-table']" model="model"
+<vn-contextmenu vn-id="contextmenu" targets="['vn-monitor-sales-tickets smart-tablea']" model="model"
     expr-builder="$ctrl.exprBuilder(param, value)">
     <slot-menu>
         <vn-item translate

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

@@ -7,6 +7,61 @@ export default class Controller extends Section {
         super($element, $);
 
         this.filterParams = this.fetchParams();
+        this.smartTableOptions = {
+            activeButtons: {
+                search: true,
+                shownColumns: true,
+            },
+            columns: [
+                {
+                    field: 'category',
+                    autocomplete: {
+                        url: 'ItemCategories',
+                        valueField: 'name',
+                    }
+                },
+                {
+                    field: 'origin',
+                    autocomplete: {
+                        url: 'Origins',
+                        showField: 'code',
+                        valueField: 'code'
+                    }
+                },
+                {
+                    field: 'typeFk',
+                    autocomplete: {
+                        url: 'ItemTypes',
+                    }
+                },
+                {
+                    field: 'intrastat',
+                    autocomplete: {
+                        url: 'Intrastats',
+                        showField: 'description',
+                        valueField: 'description'
+                    }
+                },
+                {
+                    field: 'buyerFk',
+                    autocomplete: {
+                        url: 'Workers/activeWithRole',
+                        where: `{role: {inq: ['logistic', 'buyer']}}`,
+                        searchFunction: '{firstName: $search}',
+                        showField: 'nickname',
+                        valueField: 'id',
+                    }
+                },
+                {
+                    field: 'active',
+                    searchable: false
+                },
+                {
+                    field: 'landed',
+                    searchable: false
+                },
+            ]
+        };
     }
 
     $onInit() {