3595 feat(toggleHidden): itemWaste now can hide panels
This commit is contained in:
parent
b9c83cba1b
commit
ac0e55107a
|
|
@ -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">
|
||||
<vn-horizontal class="header">
|
||||
<h5><span><span translate>{{detail.buyer}}</span></h5>
|
||||
</vn-horizontal>
|
||||
<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>
|
||||
|
|
@ -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-data-viewer>
|
||||
</vn-card>
|
||||
</section>
|
||||
</vn-data-viewer>
|
||||
|
|
@ -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
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
@ -1,21 +1,24 @@
|
|||
@import "variables";
|
||||
@import "effects";
|
||||
|
||||
vn-item-waste-index,
|
||||
vn-item-waste-detail {
|
||||
.header {
|
||||
margin-bottom: 16px;
|
||||
text-transform: uppercase;
|
||||
font-size: 1.25rem;
|
||||
line-height: 1;
|
||||
padding: 7px;
|
||||
padding-bottom: 7px;
|
||||
padding-bottom: 4px;
|
||||
font-weight: lighter;
|
||||
background-color: $color-bg;
|
||||
border-bottom: 1px solid #f7931e;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
padding: 12px 0 5px 0;
|
||||
color: gray;
|
||||
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,
|
||||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue