#1415 implementar color legend en worker.calendar
gitea/salix/dev This commit has test failures Details

This commit is contained in:
Carlos Jimenez Ruiz 2019-05-10 13:16:37 +02:00
parent e6d6e63255
commit da04d409a3
4 changed files with 71 additions and 17 deletions

View File

@ -1,8 +1,7 @@
<span
ng-class="{'pointer': $ctrl.$attrs['onClick']}"
class="mdl-chip mdl-chip--contact"
ng-repeat="legend in $ctrl.data"
vn-tooltip="{{legend.description}}"
ng-repeat="legend in $ctrl.data track by $index"
ng-click="$ctrl.onClick(legend)">
<span class="mdl-chip__contact" ng-style="{backgroundColor: legend.color}"></span>
<span class="mdl-chip__text">{{legend.name}}</span>

View File

@ -1,14 +1,9 @@
<vn-card pad-medium>
<vn-vertical>
<vn-horizontal class="header">
<vn-vertical class="totalBox">
<h6 translate>Holidays</h6>
<vn-auto>
{{'Used' | translate}} {{$ctrl.calendar.holidaysEnjoyed}}
{{'of' | translate}} {{$ctrl.calendar.totalHolidays}} {{'days' | translate}}
</vn-auto>
</vn-vertical>
</vn-horizontal>
<vn-crud-model
url="/api/AbsenceTypes"
data="$ctrl.absenceTypes" auto-load="true">
</vn-crud-model>
<div class="main-with-right-menu">
<vn-card compact pad-large>
<vn-horizontal class="calendar-list">
<section class="calendar" ng-repeat="month in $ctrl.months">
<vn-calendar
@ -18,5 +13,17 @@
</vn-calendar>
</section>
</vn-horizontal>
</vn-vertical>
</vn-card>
</vn-card>
<vn-side-menu side="right">
<vn-vertical pad-small>
<vn-vertical class="totalBox">
<h6 translate>Holidays</h6>
<vn-auto>
{{'Used' | translate}} {{$ctrl.calendar.holidaysEnjoyed}}
{{'of' | translate}} {{$ctrl.calendar.totalHolidays}} {{'days' | translate}}
</vn-auto>
</vn-vertical>
<vn-color-legend data="$ctrl.legends"></vn-color-legend>
</vn-vertical>
</vn-side-menu>
</div>

View File

@ -106,6 +106,24 @@ class Controller {
return months;
}
get absenceTypes() {
return this._absenceTypes;
}
set absenceTypes(value) {
if (value) {
this._absenceTypes = value;
this.legends = [];
this._absenceTypes.forEach(absenceType => {
let legend = {};
legend.id = absenceType.id;
legend.color = absenceType.rgb;
legend.name = absenceType.name;
this.legends.push(legend);
});
}
}
}
Controller.$inject = ['$scope', '$http'];

View File

@ -85,7 +85,7 @@ describe('Worker', () => {
});
describe('setHolidays()', () => {
it(`should `, () => {
it(`should set holidays`, () => {
const data = {holidays: [
{dated: new Date(), detail: {description: 'New year'}},
{dated: new Date(), detail: {description: 'Easter'}}
@ -99,7 +99,7 @@ describe('Worker', () => {
});
describe('setWorkerCalendar()', () => {
it(`should `, () => {
it(`should set absences of differente types`, () => {
const data = {absences: [
{dated: new Date(), absenceType: {name: 'Holiday', rgb: '#000'}},
{dated: new Date(), absenceType: {name: 'Leave', rgb: '#000'}}
@ -113,5 +113,35 @@ describe('Worker', () => {
expect(controller.events[1].style).toBeDefined();
});
});
describe('absenceTypes() setter', () => {
it(`should set the absence types in the controller`, () => {
const absenceTypes = [
{id: 1, name: 'Holiday', rgb: '#000'},
{id: 2, name: 'Leave', rgb: '#000'}
];
expect(controller._absenceTypes).not.toBeDefined();
controller.absenceTypes = absenceTypes;
expect(controller._absenceTypes.length).toEqual(2);
});
it(`should set the absence types in the controller as formated legends`, () => {
const absenceTypes = [
{id: 1, name: 'Holiday', rgb: '#000'},
{id: 2, name: 'Leave', rgb: '#000'}
];
expect(controller.legends).not.toBeDefined();
controller.absenceTypes = absenceTypes;
expect(controller.legends.length).toEqual(2);
expect(controller.legends[0].color).toBeDefined();
expect(controller.legends[1].color).toBeDefined();
});
});
});
});