From 6b252f7e331eab03daca11591b195a5c13e6a965 Mon Sep 17 00:00:00 2001
From: alexm <alexm@verdnatura.es>
Date: Wed, 14 Sep 2022 10:13:30 +0200
Subject: [PATCH] refactor(item_waste): refactor table and add totals in
 table_head

---
 .../back/methods/item/getWasteByWorker.js     | 23 +++++-
 .../item/specs/getWasteByWorker.spec.js       |  1 +
 modules/item/front/waste/index/index.html     | 79 ++++++++++---------
 modules/item/front/waste/index/style.scss     | 20 ++---
 4 files changed, 71 insertions(+), 52 deletions(-)

diff --git a/modules/item/back/methods/item/getWasteByWorker.js b/modules/item/back/methods/item/getWasteByWorker.js
index 2b0b78974f..4c3c64a919 100644
--- a/modules/item/back/methods/item/getWasteByWorker.js
+++ b/modules/item/back/methods/item/getWasteByWorker.js
@@ -30,11 +30,24 @@ module.exports = Self => {
                         sum(ws.saleWaste) AS dwindle
                     FROM bs.waste ws
                     WHERE year = YEAR(TIMESTAMPADD(WEEK,-1, ?))
-                    AND week = WEEK(TIMESTAMPADD(WEEK,-1, ?), 1)
+                        AND week = WEEK(TIMESTAMPADD(WEEK,-1, ?), 1)
                     GROUP BY buyer, family
                 ) sub
                 ORDER BY percentage DESC`, [date, date], myOptions);
 
+        const wastesTotal = await Self.rawSql(`
+            SELECT *, 100 * dwindle / total AS percentage
+                FROM (
+                    SELECT  buyer,
+                            sum(ws.saleTotal) AS total,
+                            sum(ws.saleWaste) AS dwindle
+                        FROM bs.waste ws
+                        WHERE year = YEAR(TIMESTAMPADD(WEEK,-1, ?))
+                            AND week = WEEK(TIMESTAMPADD(WEEK,-1, ?), 1)
+                        GROUP BY buyer
+                    ) sub
+                    ORDER BY percentage DESC`, [date, date], myOptions);
+
         const details = [];
 
         for (let waste of wastes) {
@@ -55,6 +68,14 @@ module.exports = Self => {
             buyerDetail.lines.push(waste);
         }
 
+        for (let waste of details) {
+            let buyerTotal = wastesTotal.find(totals => {
+                return waste.buyer == totals.buyer;
+            });
+
+            Object.assign(waste, buyerTotal);
+        }
+
         return details;
     };
 };
diff --git a/modules/item/back/methods/item/specs/getWasteByWorker.spec.js b/modules/item/back/methods/item/specs/getWasteByWorker.spec.js
index c8b9d5e156..52f806bd3b 100644
--- a/modules/item/back/methods/item/specs/getWasteByWorker.spec.js
+++ b/modules/item/back/methods/item/specs/getWasteByWorker.spec.js
@@ -12,6 +12,7 @@ describe('Item getWasteByWorker()', () => {
             const anyResult = result[Math.floor(Math.random() * Math.floor(length))];
 
             expect(anyResult.buyer).toMatch(/(CharlesXavier|HankPym|DavidCharlesHaller)/);
+            expect(anyResult.total).toBeGreaterThanOrEqual(1000);
             expect(anyResult.lines.length).toBeGreaterThanOrEqual(3);
 
             await tx.rollback();
diff --git a/modules/item/front/waste/index/index.html b/modules/item/front/waste/index/index.html
index c80733e9e0..5da5acbf12 100644
--- a/modules/item/front/waste/index/index.html
+++ b/modules/item/front/waste/index/index.html
@@ -4,39 +4,46 @@
     data="details">
 </vn-crud-model>
 <vn-data-viewer model="model">
-    <section ng-repeat="detail in details" class="vn-pa-md">
-        <vn-horizontal class="header">
-            <h5><span translate>{{detail.buyer}}</span></h5>
-            <vn-none>
-                <vn-icon
-                    ng-class="{'hidden': !$ctrl.wasteConfig[detail.buyer].hidden}"
-                    class="arrow pointer"
-                    icon="keyboard_arrow_up"
-                    vn-tooltip="Minimize/Maximize"
-                    ng-click="$ctrl.toggleHidePanel(detail)">
-                </vn-icon>
-            </vn-none>
-        </vn-horizontal>
-        <vn-card ng-class="{'hidden': !$ctrl.wasteConfig[detail.buyer].hidden}">
-            <vn-table>
-                <vn-thead>
-                    <vn-tr>
-                        <vn-th class="waste-family">Family</vn-th>
-                        <vn-th number>Percentage</vn-th>
-                        <vn-th number>Dwindle</vn-th>
-                        <vn-th number>Total</vn-th>
-                    </vn-tr>
-                </vn-thead>
-                <vn-tbody>
-                    <a ng-repeat="waste in detail.lines" class="clickable vn-tr"
-                        ui-sref="item.waste.detail({buyer: waste.buyer, family: waste.family})">
-                        <vn-td class="waste-family">{{::waste.family}}</vn-td>
-                        <vn-td number>{{::(waste.percentage / 100) | percentage: 2}}</vn-td>
-                        <vn-td number>{{::waste.dwindle | currency: 'EUR'}}</vn-td>
-                        <vn-td number>{{::waste.total | currency: 'EUR'}}</vn-td>
-                    </vn-tr>
-                </vn-tbody>
-            </vn-table>
-        </vn-card>
-    </section>
-</vn-data-viewer>
\ No newline at end of file
+    <vn-card>
+        <vn-table>
+            <vn-thead>
+                <vn-tr class="header">
+                    <vn-th class="waste-family">Buyer</vn-th>
+                    <vn-th class="waste-family">Family</vn-th>
+                    <vn-th number>Percentage</vn-th>
+                    <vn-th number>Dwindle</vn-th>
+                    <vn-th number>Total</vn-th>
+                    <vn-th shrink></vn-th>
+                </vn-tr>
+            </vn-thead>
+            <vn-tbody ng-repeat="detail in details" class="vn-mb-md">
+                <vn-tr class="header">
+                    <vn-td>{{::detail.buyer}}</vn-td>
+                    <vn-td>{{::detail.family}}</vn-td>
+                    <vn-td number>{{::(detail.percentage / 100) | percentage: 2}}</vn-td>
+                    <vn-td number>{{::detail.dwindle | currency: 'EUR'}}</vn-td>
+                    <vn-td number>{{::detail.total | currency: 'EUR'}}</vn-td>
+                    <vn-td shrink>
+                        <vn-icon-button
+                            ng-class="{'hidden': !$ctrl.wasteConfig[detail.buyer].hidden}"
+                            class="arrow pointer"
+                            icon="keyboard_arrow_up"
+                            vn-tooltip="Minimize/Maximize"
+                            ng-click="$ctrl.toggleHidePanel(detail)">
+                        </vn-icon-button>
+                    </vn-td>
+                </vn-tr>
+                <vn-tr ng-repeat="waste in detail.lines" class="clickable vn-tr"
+                    ui-sref="item.waste.detail({buyer: waste.buyer, family: waste.family})"
+                    ng-class="{'hidden': !$ctrl.wasteConfig[detail.buyer].hidden}">
+                    <vn-td></vn-td>
+                    <vn-td>{{::waste.family}}</vn-td>
+                    <vn-td number>{{::(waste.percentage / 100) | percentage: 2}}</vn-td>
+                    <vn-td number>{{::waste.dwindle | currency: 'EUR'}}</vn-td>
+                    <vn-td number>{{::waste.total | currency: 'EUR'}}</vn-td>
+                    <vn-td shrink></vn-td>
+                </vn-tr>
+            </vn-tbody>
+        </vn-table>
+    </vn-card>
+</vn-data-viewer>
diff --git a/modules/item/front/waste/index/style.scss b/modules/item/front/waste/index/style.scss
index 8b44cb6f17..36fac33114 100644
--- a/modules/item/front/waste/index/style.scss
+++ b/modules/item/front/waste/index/style.scss
@@ -5,20 +5,9 @@ vn-item-waste-index,
 vn-item-waste-detail {
     .header {
         padding: 12px 0 5px 0;
-        color: gray;
+        background-color: $color-bg;
         font-size: 1.2rem;
-        border-bottom: $border;
         margin-bottom: 10px;
-
-        & > vn-none > vn-icon {
-            @extend %clickable-light;
-            color: $color-button;
-            font-size: 1.4rem;
-        }
-
-        vn-none > .arrow {
-            transition: transform 200ms;
-        }
     }
 
     vn-table vn-th.waste-family,
@@ -26,12 +15,13 @@ vn-item-waste-detail {
         max-width: 64px;
         width: 64px
     }
+
     .hidden {
         display: none;
-                
     }
-    .header > vn-none > .arrow.hidden {
+
+    .arrow.hidden {
         display: block;
         transform: rotate(180deg);
     }
-}
\ No newline at end of file
+}
-- 
2.40.1