<vn-crud-model url="AbsenceTypes" data="absenceTypes" auto-load="true"> </vn-crud-model> <div class="vn-w-lg"> <vn-card class="vn-pa-sm calendars"> <vn-icon ng-if="::$ctrl.isSubordinate" icon="info" color-marginal vn-tooltip="To start adding absences, click an absence type from the right menu and then on the day you want to add an absence"> </vn-icon> <vn-calendar ng-repeat="month in $ctrl.months" data="$ctrl.events" default-date="month" format-day="$ctrl.formatDay($day, $element)" display-controls="false" hide-contiguous="true" hide-year="true" on-selection="$ctrl.onSelection($event, $days)"> </vn-calendar> </vn-card> </div> <vn-side-menu side="right"> <div class="vn-pa-md"> <div class="totalBox vn-mb-sm" style="text-align: center;"> <h6>{{'Contract' | translate}} #{{$ctrl.businessId}}</h6> <div> {{'Used' | translate}} {{$ctrl.contractHolidays.holidaysEnjoyed || 0}} {{'of' | translate}} {{$ctrl.contractHolidays.totalHolidays || 0}} {{'days' | translate}} </div> <div> {{'Spent' | translate}} {{$ctrl.contractHolidays.hoursEnjoyed || 0}} {{'of' | translate}} {{$ctrl.contractHolidays.totalHours || 0}} {{'hours' | translate}} </div> <div> {{'Paid holidays' | translate}} {{$ctrl.contractHolidays.payedHolidays || 0}} {{'days' | translate}} </div> </div> <div class="totalBox" style="text-align: center;"> <h6>{{'Year' | translate}} {{$ctrl.year}}</h6> <div> {{'Used' | translate}} {{$ctrl.yearHolidays.holidaysEnjoyed || 0}} {{'of' | translate}} {{$ctrl.yearHolidays.totalHolidays || 0}} {{'days' | translate}} </div> <div> {{'Spent' | translate}} {{$ctrl.yearHolidays.hoursEnjoyed || 0}} {{'of' | translate}} {{$ctrl.yearHolidays.totalHours || 0}} {{'hours' | translate}} </div> </div> <div class="vn-pt-md"> <vn-autocomplete label="Year" data="$ctrl.yearFilter" ng-model="$ctrl.year" show-field="year" value-field="year" order="DESC"> </vn-autocomplete> <vn-autocomplete label="Contract" url="Workers/{{$ctrl.$params.id}}/contracts" fields="['started', 'ended']" ng-model="$ctrl.businessId" search-function="{businessFk: $search}" value-field="businessFk" order="businessFk DESC" limit="5"> <tpl-item> <div>#{{businessFk}}</div> <div class="text-caption text-secondary"> {{started | date: 'dd/MM/yyyy'}} - {{ended ? (ended | date: 'dd/MM/yyyy') : 'Indef.'}} </div> </tpl-item> </vn-autocomplete> </div> <div name="absenceTypes" class="input vn-py-md" style="overflow: hidden;"> <vn-chip ng-repeat="absenceType in absenceTypes" ng-class="::{'selectable': $ctrl.isSubordinate}" ng-click="$ctrl.pick(absenceType)"> <vn-avatar ng-style="{backgroundColor: absenceType.rgb}"> <vn-icon icon="check" ng-if="absenceType.id == $ctrl.absenceType.id"></vn-icon> </vn-avatar> {{absenceType.name}} </vn-chip> </div> <div class="vn-py-md"> <vn-chip> <vn-avatar class="festive"> </vn-avatar> <span translate>Festive</span> </vn-chip> <vn-chip> <vn-avatar class="today"> </vn-avatar> <span translate>Current day</span> </vn-chip> </div> </div> </vn-side-menu> <vn-confirm vn-id="confirm" message="This item will be deleted" question="Are you sure you want to continue?"> </vn-confirm>