refs #4962 autoload added and second header

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

@@ -147,7 +147,7 @@ export default class SmartTable extends Component {
         for (const column of this.columns) {
             if (viewConfig.configuration[column.field] == false) {
                 const baseSelector = `smart-table[view-config-id="${this.viewConfigId}"] table`;
-                selectors.push(`${baseSelector} thead > tr > th:nth-child(${column.index + 1})`);
+                selectors.push(`${baseSelector} thead > tr:not([second-header]) > th:nth-child(${column.index + 1})`);
                 selectors.push(`${baseSelector} tbody > tr > td:nth-child(${column.index + 1})`);
             }
         }
@@ -235,7 +235,7 @@ export default class SmartTable extends Component {
     }
 
     registerColumns() {
-        const header = this.element.querySelector('thead > tr');
+        const header = this.element.querySelector('thead > tr:not([second-header])');
         if (!header) return;
         const columns = header.querySelectorAll('th');
 
@@ -254,7 +254,7 @@ export default class SmartTable extends Component {
     }
 
     emptyDataRows() {
-        const header = this.element.querySelector('thead > tr');
+        const header = this.element.querySelector('thead > tr:not([second-header])');
         const columns = header.querySelectorAll('th');
         const tbody = this.element.querySelector('tbody');
         if (tbody) {
@@ -333,7 +333,7 @@ export default class SmartTable extends Component {
     }
 
     displaySearch() {
-        const header = this.element.querySelector('thead > tr');
+        const header = this.element.querySelector('thead > tr:not([second-header])');
         if (!header) return;
 
         const tbody = this.element.querySelector('tbody');

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

@@ -8,6 +8,16 @@ smart-table table {
     & > thead {
         border-bottom: $border;
 
+        & > tr[second-header] {
+            & > th
+            {
+                text-align: center;
+                border-bottom-style: groove;
+                font-weight: bold;
+                text-transform: uppercase;
+            }
+        }
+
         & > * > th {
             font-weight: normal;
         }
@@ -60,6 +70,9 @@ smart-table table {
                         vertical-align: middle;
                     }
                 }
+                &[separator]{
+                    border-left-style: groove;
+                }
                 vn-icon.bright, i.bright {
                     color: #f7931e;
                 }

modules/ticket/front/future-search-panel/index.html

@@ -17,13 +17,13 @@
         <vn-horizontal class="vn-px-lg">
             <vn-textfield
                 vn-one
-                label="Max Lines"
+                label="Max Liters"
-                ng-model="filter.lines">
+                ng-model="filter.liters">
             </vn-textfield>
             <vn-textfield
                 vn-one
-                label="Max Liters"
+                label="Max Lines"
-                ng-model="filter.liters">
+                ng-model="filter.lines">
             </vn-textfield>
         </vn-horizontal>
         <vn-horizontal class="vn-px-lg">

modules/ticket/front/future/index.html

@@ -1,7 +1,9 @@
 <vn-crud-model
     vn-id="model"
     url="Tickets/getTicketsFuture"
-    limit="20">
+    limit="20"
+    auto-load="true"
+    params="model.data">
 </vn-crud-model>
 <vn-portal slot="topbar">
     <vn-searchbar
@@ -30,6 +32,11 @@
         <slot-table>
             <table>
                 <thead>
+                    <tr second-header>
+                        <td></td>
+                        <th colspan="7" translate>Origin</th>
+                        <th colspan="4" translate>Destination</th>
+                    </tr>
                     <tr>
                         <th shrink>
                             <vn-multi-check
@@ -42,35 +49,35 @@
                             <span translate>Problems</span>
                         </th>
                         <th field="id">
-                            <span translate>Origin ID</span>
+                            <span translate>ID</span>
                         </th>
                         <th field="shipped">
-                            <span translate>Origin Date</span>
+                            <span translate>Date</span>
-                        </th>
-                        <th field="state">
-                            <span translate>Origin State</span>
                         </th>
                         <th field="ipt" title="Item Packing Type">
                             <span>IPT</span>
                         </th>
+                        <th field="state">
+                            <span translate>State</span>
+                        </th>
                         <th field="liters">
                             <span translate>Liters</span>
                         </th>
-                        <th field="lines">
+                        <th shrink field="lines">
                             <span translate>Available Lines</span>
                         </th>
-                        <th field="ticketFuture">
+                        <th field="ticketFuture" separator>
-                            <span translate>Destination ID</span>
+                            <span translate>ID</span>
                         </th>
                         <th field="tfShipped">
-                            <span translate>Destination Date</span>
+                            <span translate>Date</span>
-                        </th>
-                        <th field="tfState">
-                            <span translate>Destination State</span>
                         </th>
                         <th field="tfIpt" title="Item Packing Type">
                             <span>IPT</span>
                         </th>
+                        <th shrink field="tfState">
+                            <span translate>State</span>
+                        </th>
                     </tr>
                 </thead>
                 <tbody>
@@ -129,13 +136,13 @@
                                 {{::ticket.shipped | date: 'dd/MM/yyyy'}}
                             </span>
                         </td>
+                        <td>{{::ticket.ipt}}</td>
                         <td>
                             <span
                             class="chip {{$ctrl.stateColor(ticket.state)}}">
                                 {{::ticket.state}}
                             </span>
                         </td>
-                        <td>{{::ticket.ipt}}</td>
                         <td>{{::ticket.liters}}</td>
                         <td>{{::ticket.lines}}</td>
                         <td>
@@ -150,13 +157,13 @@
                                 {{::ticket.tfShipped | date: 'dd/MM/yyyy'}}
                             </span>
                         </td>
+                        <td>{{::ticket.tfIpt}}</td>
                         <td>
                             <span
                             class="chip {{$ctrl.stateColor(ticket.tfState)}}">
                                 {{::ticket.tfState}}
                             </span>
                         </td>
-                        <td>{{::ticket.tfIpt}}</td>
                     </tr>
                 </tbody>
             </table>

modules/ticket/front/future/index.js

@@ -35,7 +35,7 @@ export default class Controller extends Section {
                 autocomplete: {
                     url: 'ItemPackingTypes',
                     showField: 'description',
-                    valueField: 'description'
+                    valueField: 'code'
                 }
             },
             {
@@ -43,7 +43,7 @@ export default class Controller extends Section {
                 autocomplete: {
                     url: 'ItemPackingTypes',
                     showField: 'description',
-                    valueField: 'description'
+                    valueField: 'code'
                 }
             },
             ]
@@ -59,6 +59,9 @@ export default class Controller extends Section {
             futureDated: today,
             warehouseFk: this.vnConfig.warehouseFk
         };
+        this.$.model = {
+            data: this.filterParams
+        };
     }
 
     compareDate(date) {