3595 feat(toggleHidden): itemWaste now can hide panels

modules/item/front/waste/index/index.html

@@ -3,13 +3,21 @@
     url="Items/getWasteByWorker"
     data="details">
 </vn-crud-model>
-
 <vn-data-viewer model="model">
-    <vn-card>
+    <section ng-repeat="detail in details" class="vn-pa-md">
-        <section ng-repeat="detail in details" class="vn-pa-md">
+        <vn-horizontal class="header">
-            <vn-horizontal class="header">
+            <h5><span translate>{{detail.buyer}}</span></h5>
-                <h5><span><span translate>{{detail.buyer}}</span></h5>
+            <vn-none>
-            </vn-horizontal>
+                <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>
@@ -21,7 +29,7 @@
                 </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})" >
+                        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>
@@ -29,6 +37,6 @@
                     </vn-tr>
                 </vn-tbody>
             </vn-table>
-        </section>
+        </vn-card>
-    </vn-card>
+    </section>
-</vn-data-viewer>
+</vn-data-viewer>

modules/item/front/waste/index/index.js

@@ -2,7 +2,34 @@ import ngModule from '../../module';
 import Section from 'salix/components/section';
 import './style.scss';
 
+export default class Controller extends Section {
+    constructor($element, $) {
+        super($element, $);
+
+        this.getWasteConfig();
+    }
+
+    getWasteConfig() {
+        return this.wasteConfig = JSON.parse(localStorage.getItem('wasteConfig')) || {};
+    }
+
+    setWasteConfig() {
+        localStorage.setItem('wasteConfig', JSON.stringify(this.wasteConfig));
+    }
+
+    toggleHidePanel(detail) {
+        if (!this.wasteConfig[detail.buyer]) {
+            this.wasteConfig[detail.buyer] = {
+                hidden: true
+            };
+        } else
+            this.wasteConfig[detail.buyer].hidden = !this.wasteConfig[detail.buyer].hidden;
+
+        this.setWasteConfig();
+    }
+}
+
 ngModule.vnComponent('vnItemWasteIndex', {
     template: require('./index.html'),
-    controller: Section
+    controller: Controller
 });

modules/item/front/waste/index/index.spec.js

@@ -0,0 +1,53 @@
+import './index.js';
+import crudModel from 'core/mocks/crud-model';
+
+fdescribe('Item', () => {
+    describe('Component vnItemWasteIndex', () => {
+        let $scope;
+        let controller;
+
+        beforeEach(ngModule('item'));
+
+        beforeEach(inject(($componentController, $rootScope) => {
+            $scope = $rootScope.$new();
+            $scope.model = crudModel;
+            const $element = angular.element('<vn-item-waste-index></vn-item-waste-index>');
+            controller = $componentController('vnItemWasteIndex', {$element, $scope});
+        }));
+
+        describe('getWasteConfig / setWasteConfig', () => {
+            it('should return the local storage wasteConfig', () => {
+                const result = controller.getWasteConfig();
+
+                expect(result).toEqual({});
+            });
+
+            it('should set and return the local storage wasteConfig', () => {
+                controller.wasteConfig = {salesPerson: {hidden: true}};
+                controller.setWasteConfig();
+
+                const result = controller.getWasteConfig();
+
+                expect(result).toEqual(controller.wasteConfig);
+            });
+        });
+
+        describe('toggleHidePanel()', () => {
+            it('should make details hidden by default', () => {
+                controller.wasteConfig = {};
+
+                controller.toggleHidePanel({buyer: 'salesPerson'});
+
+                expect(controller.wasteConfig.salesPerson.hidden).toEqual(true);
+            });
+
+            it('should toggle hidden false', () => {
+                controller.wasteConfig = {salesPerson: {hidden: true}};
+
+                controller.toggleHidePanel({buyer: 'salesPerson'});
+
+                expect(controller.wasteConfig.salesPerson.hidden).toEqual(false);
+            });
+        });
+    });
+});

modules/item/front/waste/index/style.scss

@@ -1,21 +1,24 @@
 @import "variables";
+@import "effects";
 
 vn-item-waste-index,
 vn-item-waste-detail {
     .header {
-        margin-bottom: 16px;
+        padding: 12px 0 5px 0;
-        text-transform: uppercase;
+        color: gray;
-        font-size: 1.25rem;
+        font-size: 1.2rem;
-        line-height: 1;
+        border-bottom: $border;
-        padding: 7px;
+        margin-bottom: 10px;
-        padding-bottom: 7px;
+
-        padding-bottom: 4px;
+        & > vn-none > vn-icon {
-        font-weight: lighter;
+            @extend %clickable-light;
-        background-color: $color-bg;
+            color: $color-button;
-        border-bottom: 1px solid #f7931e;
+            font-size: 1.4rem;
-        white-space: nowrap;
+        }
-        overflow: hidden;
+
-        text-overflow: ellipsis;
+        vn-none > .arrow {
+            transition: transform 200ms;
+        }
     }
 
     vn-table vn-th.waste-family,
@@ -23,4 +26,12 @@ vn-item-waste-detail {
         max-width: 64px;
         width: 64px
     }
+    .hidden {
+        display: none;
+                
+    }
+    .header > vn-none > .arrow.hidden {
+        display: block;
+        transform: rotate(180deg);
+    }
 }