From b4e5631cc74de784388c0fca3ac9d6b3b5af17ca Mon Sep 17 00:00:00 2001
From: alexm <alexm@verdnatura.es>
Date: Wed, 16 Mar 2022 14:58:07 +0100
Subject: [PATCH] feat(item_fixed-price): implement smart-table

---
 front/core/components/smart-table/table.scss |   4 +
 modules/item/front/fixed-price/index.html    | 312 +++++++++----------
 modules/item/front/fixed-price/index.js      |  31 +-
 modules/item/front/fixed-price/index.spec.js |  15 +
 modules/item/front/fixed-price/style.scss    |   5 -
 5 files changed, 202 insertions(+), 165 deletions(-)

diff --git a/front/core/components/smart-table/table.scss b/front/core/components/smart-table/table.scss
index c38c149ca3..95d8efb49b 100644
--- a/front/core/components/smart-table/table.scss
+++ b/front/core/components/smart-table/table.scss
@@ -37,6 +37,10 @@ smart-table table {
                 &[centered] {
                     text-align: center;
                 }
+                &[mid] {
+                    width: 150px;
+                    max-width: 150px;
+                }
                 &[shrink] {
                     width: 1px;
                     text-align: center;
diff --git a/modules/item/front/fixed-price/index.html b/modules/item/front/fixed-price/index.html
index 34d63ffe2f..d531774a00 100644
--- a/modules/item/front/fixed-price/index.html
+++ b/modules/item/front/fixed-price/index.html
@@ -3,8 +3,8 @@
     url="FixedPrices/filter"
     limit="20"
     data="prices"
-    auto-load="true"
-    order="itemFk">
+    order="itemFk"
+    auto-load="false">
 </vn-crud-model>
 <vn-crud-model
     auto-load="true"
@@ -18,166 +18,166 @@
         panel="vn-fixed-price-search-panel"
         info="Search prices by item ID or code"
         placeholder="Search fixed prices"
-        filter="{}"
         model="model">
     </vn-searchbar>
 </vn-portal>
 <div class="vn-w-xl">
     <vn-card>
-        <vn-table model="model">
-            <vn-thead>
-                <vn-tr>
-                    <vn-th field="itemFk" shrink>Item ID</vn-th>
-                    <vn-th field="itemFk">Description</vn-th>
-                    <vn-th field="warehouseFk" shrink>Warehouse</vn-th>
-                    <vn-th 
-                        field="rate2"
-                        vn-tooltip="Price By Unit"
-                        center>
-                        P.P.U.
-                    </vn-th>
-                    <vn-th 
-                        field="rate3"
-                        vn-tooltip="Price By Package"
-                        center>
-                        P.P.P.
-                    </vn-th>
-                    <vn-th></vn-th>
-                    <vn-th field="minPrice">Min price</vn-th>
-                    <vn-th field="started" style="width: 90px">Started</vn-th>
-                    <vn-th field="ended" style="width: 90px">Ended</vn-th>
-                    <vn-th shrink></vn-th>
-                </vn-tr>
-            </vn-thead>
-            <vn-tbody>
-                <vn-tr ng-repeat="price in prices">
-                    <vn-td shrink>
-                        <text>{{price.itemFk}}</text>
-                        <vn-autocomplete
-                            class="dense"
-                            ng-if="!price.itemFk"
-                            vn-focus
-                            url="Items/withName"
-                            ng-model="price.itemFk"
-                            show-field="name"
-                            value-field="id"
-                            search-function="$ctrl.itemSearchFunc($search)"
-                            on-change="$ctrl.upsertPrice(price)"
-                            order="id DESC"
-                            tabindex="1">
-                            <tpl-item>
-                                {{::id}} - {{::name}}
-                            </tpl-item>
-                        </vn-autocomplete>
-                    </vn-td>
-                    <vn-td vn-fetched-tags>
-                        <div>
-                            <span
-                                vn-one
-                                ng-if="price.itemFk"
-                                ng-click="itemDescriptor.show($event, price.itemFk)"
-                                class="link">
-                                {{price.name}}
-                            </span>
-                            <vn-one ng-if="price.subName">
-                                <h3 title="{{price.subName}}">{{price.subName}}</h3>
-                            </vn-one>
-                        </div>
-                        <vn-fetched-tags
-                            max-length="6"
-                            item="price"
-                            tabindex="-1">
-                        </vn-fetched-tags>
-                    </vn-td>
-                    <vn-td shrink>
-                        <vn-autocomplete
-                            vn-one
-                            label="Warehouse"
-                            ng-model="price.warehouseFk"
-                            url="Warehouses"
-                            on-change="$ctrl.upsertPrice(price)"
-                            tabindex="2">
-                        </vn-autocomplete>
-                    </vn-td>
-                    <vn-td-editable number>
-                        <text>{{price.rate2 | currency: 'EUR':2}}</text>
-                        <field>
-                            <vn-input-number
-                                class="dense"
-                                vn-focus
-                                ng-model="price.rate2"
-                                on-change="$ctrl.upsertPrice(price)">
-                            </vn-input-number>
-                        </field>
-                    </vn-td-editable>
-                    <vn-td-editable number>
-                        <text>{{price.rate3 | currency: 'EUR':2}}</text>
-                        <field>
-                            <vn-input-number
-                                class="dense"
-                                vn-focus
-                                ng-model="price.rate3"
-                                on-change="$ctrl.upsertPrice(price)">
-                            </vn-input-number>
-                        </field>
-                    </vn-td-editable>
-                    <vn-td shrink>
-                        <vn-check
-                            vn-one
-                            ng-model="price.hasMinPrice">
-                        </vn-check>
-                    </vn-td>
-                    <vn-td-editable number>
-                        <text>{{price.minPrice | currency: 'EUR':2}}</text>
-                        <field>
-                            <vn-input-number
-                                disabled="!price.hasMinPrice"
-                                class="dense"
-                                vn-focus
-                                ng-model="price.minPrice"
-                                on-change="$ctrl.upsertPrice(price)"
-                                step="0.01">
-                            </vn-input-number>
-                        </field>
-                    </vn-td-editable>
-                    <vn-td>
-                        <vn-date-picker
-                            vn-one
-                            label="Started"
-                            ng-model="price.started"
-                            on-change="$ctrl.upsertPrice(price)">
-                        </vn-date-picker>
-                    </vn-td>
-                    <vn-td>
-                        <vn-date-picker
-                            vn-one
-                            label="Ended"
-                            ng-model="price.ended"
-                            on-change="$ctrl.upsertPrice(price)">
-                        </vn-date-picker>
-                    </vn-td>
-                    <vn-td shrink>
-                        <vn-icon-button
-                            icon="delete"
-                            vn-tooltip="Delete"
-                            ng-click="deleteFixedPrice.show({$index})">
-                        </vn-icon-button>
-                    </vn-td>
-                </vn-tr>
-            </vn-tbody>
-        </vn-table>
-        <div class="vn-pa-md">
-            <vn-icon-button
-                vn-tooltip="Add fixed price"
-                icon="add_circle"
-                vn-bind="+"
-                ng-click="model.insert()">
-            </vn-icon-button>
-        </div>
-        <vn-pagination
+        <smart-table 
             model="model"
-            class="vn-pt-md">
-        </vn-pagination>
+            options="$ctrl.smartTableOptions" 
+            expr-builder="$ctrl.exprBuilder(param, value)">
+            <slot-table>
+                <table>
+                    <thead>
+                        <tr>
+                            <th field="itemFk">
+                                <span translate>Item ID</span>
+                            </th>
+                            <th field="itemFk">
+                                <span translate>Description</span>
+                            </th>
+                            <th field="warehouseFk">
+                                <span translate>Warehouse</span>
+                            </th>
+                            <th 
+                                field="rate2"
+                                vn-tooltip="Price By Unit">
+                                <span translate>P.P.U.</span>
+                            </th>
+                            <th 
+                                field="rate3"
+                                vn-tooltip="Price By Package">
+                                <span translate>P.P.P.</span>
+                            </th>
+                            <th field="minPrice">
+                                <span translate>Min price</span>
+                            </th>
+                            <th field="started">
+                                <span translate>Started</span>
+                            </th>
+                            <th field="ended">
+                                <span translate>Ended</span>
+                            </th>
+                            <th shrink></th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr ng-repeat="price in prices">
+                            <td>
+                                <vn-autocomplete
+                                    vn-focus
+                                    class="dense"
+                                    url="Items/withName"
+                                    ng-model="price.itemFk"
+                                    show-field="name"
+                                    value-field="id"
+                                    search-function="$ctrl.itemSearchFunc($search)"
+                                    on-change="$ctrl.upsertPrice(price)"
+                                    order="id DESC"
+                                    tabindex="1">
+                                    <tpl-item>
+                                        {{::id}}
+                                    </tpl-item>
+                                </vn-autocomplete>
+                            </td>
+                            <td vn-fetched-tags>
+                                <div>
+                                    <span
+                                        vn-one
+                                        ng-if="price.itemFk"
+                                        ng-click="itemDescriptor.show($event, price.itemFk)"
+                                        class="link">
+                                        {{price.name}}
+                                    </span>
+                                    <vn-one ng-if="price.subName">
+                                        <h3 title="{{price.subName}}">{{price.subName}}</h3>
+                                    </vn-one>
+                                </div>
+                                <vn-fetched-tags
+                                    max-length="6"
+                                    item="price"
+                                    tabindex="-1">
+                                </vn-fetched-tags>
+                            </td>
+                            <td mid>
+                                <vn-autocomplete
+                                    vn-one
+                                    label="Warehouse"
+                                    ng-model="price.warehouseFk"
+                                    data="warehouses"
+                                    on-change="$ctrl.upsertPrice(price)"
+                                    tabindex="2">
+                                </vn-autocomplete>
+                            </td>
+                            <td mid>
+                                <span>
+                                    <vn-input-number
+                                        ng-model="price.rate2"
+                                        on-change="$ctrl.upsertPrice(price)">
+                                    </vn-input-number>
+                                </span>
+                            </td>
+                            <td mid>
+                                <vn-input-number
+                                    ng-model="price.rate3"
+                                    on-change="$ctrl.upsertPrice(price)">
+                                </vn-input-number>
+                            </td>
+                            <td shrink-date>
+                                <vn-check
+                                    vn-one
+                                    ng-model="price.hasMinPrice">
+                                </vn-check>
+                                <vn-input-number
+                                    disabled="!price.hasMinPrice"
+                                    ng-model="price.minPrice"
+                                    on-change="$ctrl.upsertPrice(price)"
+                                    step="0.01">
+                                </vn-input-number>
+                            </td>
+                            <td  shrink-date>
+                                <vn-date-picker
+                                    vn-one
+                                    label="Started"
+                                    ng-model="price.started"
+                                    on-change="$ctrl.upsertPrice(price)">
+                                </vn-date-picker>
+                            </td>
+                            <td  shrink-date>
+                                <vn-date-picker
+                                    vn-one
+                                    label="Ended"
+                                    ng-model="price.ended"
+                                    on-change="$ctrl.upsertPrice(price)">
+                                </vn-date-picker>
+                            </td>
+                            <td shrink>
+                                <vn-icon-button
+                                    icon="delete"
+                                    vn-tooltip="Delete"
+                                    ng-click="deleteFixedPrice.show({$index})">
+                                </vn-icon-button>
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
+                <div class="vn-pa-md">
+                    <vn-icon-button
+                        vn-tooltip="Add fixed price"
+                        icon="add_circle"
+                        vn-bind="+"
+                        ng-click="$ctrl.add()">
+                    </vn-icon-button>
+                </div>
+                <vn-pagination
+                    model="model"
+                    class="vn-pt-md"
+                    scroll-selector="vn-item-price-fixed vn-table"
+                    scroll-offset="100">
+                </vn-pagination>
+            </slot-table>
+        </smart-table>  
     </vn-card>
 </div>
 <vn-item-descriptor-popover
diff --git a/modules/item/front/fixed-price/index.js b/modules/item/front/fixed-price/index.js
index 4dc1cf4721..39d9652170 100644
--- a/modules/item/front/fixed-price/index.js
+++ b/modules/item/front/fixed-price/index.js
@@ -5,13 +5,36 @@ import './style.scss';
 export default class Controller extends Section {
     constructor($element, $) {
         super($element, $);
+
+        this.smartTableOptions = {
+            activeButtons: {
+                search: true
+            }
+        };
     }
 
-    /**
-     * Inserts a new instance
-     */
     add() {
-        this.$.model.insert({});
+        const lastId = this.$.model.data.length - 1;
+        const lastItem = this.$.model.data[lastId];
+        this.$.model.insert({
+            itemFk: lastItem.itemFk,
+            name: lastItem.name,
+            subName: lastItem.subName,
+            value5: lastItem.value5,
+            value6: lastItem.value6,
+            value7: lastItem.value7,
+            value8: lastItem.value8,
+            value9: lastItem.value9,
+            value10: lastItem.value10,
+            warehouseFk: lastItem.warehouseFk,
+            rate2: lastItem.rate2,
+            rate3: lastItem.rate3,
+            hasMinPrice: lastItem.hasMinPrice,
+            minPrice: lastItem.minPrice,
+            started: lastItem.started,
+            ended: lastItem.ended,
+
+        });
     }
 
     upsertPrice(price) {
diff --git a/modules/item/front/fixed-price/index.spec.js b/modules/item/front/fixed-price/index.spec.js
index faf6b850a9..70bf0b3871 100644
--- a/modules/item/front/fixed-price/index.spec.js
+++ b/modules/item/front/fixed-price/index.spec.js
@@ -14,6 +14,17 @@ describe('fixed price', () => {
             controller = $componentController('vnFixedPrice', {$element, $scope});
         }));
 
+        describe('$onInit()', () => {
+            it('should perform a query to GET warehouses', () => {
+                $httpBackend.expectGET('Warehouses').respond('foo');
+
+                controller.$onInit();
+                $httpBackend.flush();
+
+                expect(controller.warehousesData).toBe('foo');
+            });
+        });
+
         describe('upsertPrice()', () => {
             it('should do nothing if one or more required arguments are missing', () => {
                 jest.spyOn(controller.vnApp, 'showSuccess');
@@ -55,6 +66,10 @@ describe('fixed price', () => {
                 jest.spyOn(controller.vnApp, 'showSuccess');
                 jest.spyOn(controller.$.model, 'remove');
 
+                // $httpBackend.whenRoute('GET', 'Warehouses').respond();
+                // $httpBackend.when('GET', 'Warehouses').respond();
+                $httpBackend.expectGET('Warehouses').respond();
+
                 controller.removePrice($index);
 
                 expect(controller.vnApp.showSuccess).not.toHaveBeenCalled();
diff --git a/modules/item/front/fixed-price/style.scss b/modules/item/front/fixed-price/style.scss
index 74df1800a6..e69de29bb2 100644
--- a/modules/item/front/fixed-price/style.scss
+++ b/modules/item/front/fixed-price/style.scss
@@ -1,5 +0,0 @@
-@import "variables";
-
-vn-table vn-date-picker {
-    max-width: 90px;
-}
\ No newline at end of file