verdnatura/salix
verdnatura
/
salix
3
4
Fork 0
Code Issues Pull Requests 67 Releases Wiki Activity

Component shows now the year week numbers #738

Merged
carlosjr merged 4 commits from 2389-calendar_weeks into dev 2021-09-20 08:50:12 +00:00
Conversation 0 Commits 4 Files Changed 9 +198 -41
9 changed files with 198 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 4494522ad1 - Show all commits

14
front/core/components/calendar/index.html
View File

@ -19,6 +19,8 @@
ng-if="$ctrl.displayControls">
</vn-button>
</div>
<div id="days-header" ng-class="{'hide-weeks': $ctrl.hideWeeks}">
<div class="week-numbers" ng-if="!$ctrl.hideWeeks"></div>
<div class="weekdays">
<section
ng-repeat="day in ::$ctrl.weekDays"
@ -27,6 +29,17 @@
<span>{{::day.localeChar}}</span>
</section>
</div>
</div>
<div id="days-container" ng-class="{'hide-weeks': $ctrl.hideWeeks}">
<div class="weeks" ng-if="!$ctrl.hideWeeks">
<section ng-repeat="week in $ctrl.weekNumbers"
class="day">
<div class="day-number">
{{::week}}
</div>
</section>
</div>
<div
class="days"
ng-class="{'hide-contiguous': $ctrl.hideContiguous}">
@ -44,3 +57,4 @@
</section>
</div>
</div>
</div>

65
front/core/components/calendar/index.js
View File

@ -12,11 +12,12 @@ import './style.scss';
* @event move Emitted when month changes
*/
export default class Calendar extends FormInput {
constructor($element, $scope, vnWeekDays) {
constructor($element, $scope, vnWeekDays, moment) {
super($element, $scope);
this.weekDays = vnWeekDays.locales;
this.defaultDate = new Date();
this.displayControls = true;
this.moment = moment;
}
/**
@ -54,15 +55,23 @@ export default class Calendar extends FormInput {
);
}
lastDay() {
return new Date(
this.defaultDate.getFullYear(),
this.defaultDate.getMonth() + 1,
0
).getDate();
}
/**
* Repaints the calendar.
*/
repaint() {
const firstWeekday = this.firstDay(this.defaultDate).getDay() - 1;
let weekdayOffset = firstWeekday >= 0 ? firstWeekday : 6;
this.weekdayOffset = firstWeekday >= 0 ? firstWeekday : 6;
let dayIndex = new Date(this.defaultDate.getTime());
dayIndex.setDate(1 - weekdayOffset);
dayIndex.setDate(1 - this.weekdayOffset);
this.days = [];
@ -70,27 +79,60 @@ export default class Calendar extends FormInput {
this.days.push(new Date(dayIndex.getTime()));
dayIndex.setDate(dayIndex.getDate() + 1);
}
this.getWeekdays();
}
getWeekdays() {
// A partir de la fecha "default", ir al primer mes del año
// y dividir el numero de días del mes entre 7 para obtener el numero de semanas
// e ir sumando hasta llegar al mes actual
// a partir de ese numero incrementar segun el numero de semanas del mes
if (!this.moment) return;
const totalSlots = this.lastDay() + this.weekdayOffset;
const weeks = Math.ceil(totalSlots / 7);
// console.log(this.lastDay());
const m = this.moment(this.defaultDate);
const firstWeekNumber = m.set('date', 1).isoWeek();
const weekNumbers = [];
for (let w = 0; w < weeks; w++) {
let weekNumber = firstWeekNumber;
if (m.get('month') == 0 && firstWeekNumber > 1 && w > 0)
weekNumber = 0;
weekNumbers.push(weekNumber + w);
}
this.weekNumbers = weekNumbers;
}
/**
* Gets CSS classes to apply to the specified day.
*
* @param {Date} day The day
* @param {Date} date The date
* @return {Object} The CSS classes to apply
*/
getDayClasses(day) {
let wday = day.getDay();
let month = day.getMonth();
getDayClasses(date) {
let day = date.getDate();
let wday = date.getDay();
let month = date.getMonth();
const currentDay = new Date().getDate();
const currentMonth = new Date().getMonth();
let classes = {
today: day === currentDay && month === currentMonth,
weekend: wday === 6 || wday === 0,
previous: month < this.month,
current: month == this.month,
next: month > this.month,
event: this.hasEvents({$day: day})
event: this.hasEvents({$day: date})
};
let userClass = this.getClass({$day: day});
let userClass = this.getClass({$day: date});
if (userClass) classes[userClass] = true;
return classes;
@ -181,7 +223,7 @@ export default class Calendar extends FormInput {
}
}
}
Calendar.$inject = ['$element', '$scope', 'vnWeekDays'];
Calendar.$inject = ['$element', '$scope', 'vnWeekDays', 'moment'];
ngModule.vnComponent('vnCalendar', {
template: require('./index.html'),
@ -193,6 +235,7 @@ ngModule.vnComponent('vnCalendar', {
formatDay: '&?',
displayControls: '<?',
hideYear: '<?',
hideContiguous: '<?'
hideContiguous: '<?',
hideWeeks: '<?'
}
});

54
front/core/components/calendar/style.scss
View File

@ -19,7 +19,14 @@
color: inherit;
}
}
& > .weekdays {
& #days-header {
flex-direction: row;
display: flex
}
& #days-header > .week-numbers {
width: 10%
}
& #days-header > .weekdays {
display: flex;
color: $color-font-secondary;
margin-bottom: 8px;
@ -27,17 +34,49 @@
font-weight: bold;
font-size: .8rem;
text-align: center;
width: 90%;
& > section {
width: 14.28%;
cursor: pointer;
}
}
& > .days {
& #days-header.hide-weeks {
& > .weekdays {
width: 100%
}
}
& > #days-container {
flex-direction: row;
display: flex
}
& > #days-container > .weeks {
display: flex;
flex-direction: column;
color: $color-font-secondary;
font-weight: bold;
font-size: .8rem;
width: 10%;
& > .day {
height: 40px;
display: flex;
justify-content: center;
align-items: center;
}
}
& #days-container.hide-weeks {
& > .days {
width: 100%
}
}
#days-container > .days {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
flex-wrap: wrap;
width: 90%;
& > .day {
width: 14.28%;
@ -46,6 +85,17 @@
justify-content: center;
align-items: center;
&.today {
color: $color-font-bg;
& > .day-number {
border: 2px solid $color-font-link;
&:hover {
background-color: lighten($color-font-link, 20%);
opacity: .8
}
}
}
&.weekend {
color: $color-font-secondary;
}

4
front/core/vendor.js
View File

@ -9,13 +9,15 @@ import 'angular-translate-loader-partial';
import '@uirouter/angularjs';
import 'mg-crud';
import 'oclazyload';
import 'angular-moment';
export const ngDeps = [
'ngAnimate',
'pascalprecht.translate',
'ui.router',
'mgCrud',
'oc.lazyLoad'
'oc.lazyLoad',
'angularMoment'
];
import * as validator from 'validator';

33
front/package-lock.json generated
View File

@ -12,6 +12,7 @@
"@uirouter/angularjs": "^1.0.20",
"angular": "^1.7.5",
"angular-animate": "^1.7.8",
"angular-moment": "^1.3.0",
"angular-translate": "^2.18.1",
"angular-translate-loader-partial": "^2.18.1",
"croppie": "^2.6.5",
@ -51,6 +52,17 @@
"resolved": "https://registry.npmjs.org/angular-animate/-/angular-animate-1.8.2.tgz",
"integrity": "sha512-Jbr9+grNMs9Kj57xuBU3Ju3NOPAjS1+g2UAwwDv7su1lt0/PLDy+9zEwDiu8C8xJceoTbmBNKiWGPJGBdCQLlA=="
},
"node_modules/angular-moment": {
"version": "1.3.0",
"resolved": "https://registry.npmjs.org/angular-moment/-/angular-moment-1.3.0.tgz",
"integrity": "sha512-KG8rvO9MoaBLwtGnxTeUveSyNtrL+RNgGl1zqWN36+HDCCVGk2DGWOzqKWB6o+eTTbO3Opn4hupWKIElc8XETA==",
"dependencies": {
"moment": ">=2.8.0 <3.0.0"
},
"engines": {
"node": ">=0.10.0"
}
},
"node_modules/angular-translate": {
"version": "2.18.4",
"resolved": "https://registry.npmjs.org/angular-translate/-/angular-translate-2.18.4.tgz",
@ -115,6 +127,14 @@
"angular": "^1.6.1"
}
},
"node_modules/moment": {
"version": "2.29.1",
"resolved": "https://registry.npmjs.org/moment/-/moment-2.29.1.tgz",
"integrity": "sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ==",
"engines": {
"node": "*"
}
},
"node_modules/oclazyload": {
"version": "0.6.3",
"resolved": "https://registry.npmjs.org/oclazyload/-/oclazyload-0.6.3.tgz",
@ -182,6 +202,14 @@
"resolved": "https://registry.npmjs.org/angular-animate/-/angular-animate-1.8.2.tgz",
"integrity": "sha512-Jbr9+grNMs9Kj57xuBU3Ju3NOPAjS1+g2UAwwDv7su1lt0/PLDy+9zEwDiu8C8xJceoTbmBNKiWGPJGBdCQLlA=="
},
"angular-moment": {
"version": "1.3.0",
"resolved": "https://registry.npmjs.org/angular-moment/-/angular-moment-1.3.0.tgz",
"integrity": "sha512-KG8rvO9MoaBLwtGnxTeUveSyNtrL+RNgGl1zqWN36+HDCCVGk2DGWOzqKWB6o+eTTbO3Opn4hupWKIElc8XETA==",
"requires": {
"moment": ">=2.8.0 <3.0.0"
}
},
"angular-translate": {
"version": "2.18.4",
"resolved": "https://registry.npmjs.org/angular-translate/-/angular-translate-2.18.4.tgz",
@ -233,6 +261,11 @@
"angular": "^1.6.1"
}
},
"moment": {
"version": "2.29.1",
"resolved": "https://registry.npmjs.org/moment/-/moment-2.29.1.tgz",
"integrity": "sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ=="
},
"oclazyload": {
"version": "0.6.3",
"resolved": "https://registry.npmjs.org/oclazyload/-/oclazyload-0.6.3.tgz",

1
front/package.json
View File

@ -12,6 +12,7 @@
"@uirouter/angularjs": "^1.0.20",
"angular": "^1.7.5",
"angular-animate": "^1.7.8",
"angular-moment": "^1.3.0",
"angular-translate": "^2.18.1",
"angular-translate-loader-partial": "^2.18.1",
"croppie": "^2.6.5",

5
modules/worker/front/calendar/index.html
View File

@ -78,6 +78,11 @@
</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>

1
modules/worker/front/calendar/locale/es.yml
View File

@ -8,3 +8,4 @@ days: días
Choose an absence type from the right menu: Elige un tipo de ausencia desde el menú de la derecha
To start adding absences, click an absence type from the right menu and then on the day you want to add an absence: Para empezar a añadir ausencias, haz clic en un tipo de ausencia desde el menu de la derecha y después en el día que quieres añadir la ausencia
You can just add absences within the current year: Solo puedes añadir ausencias dentro del año actual
Current day: Día actual

14
modules/worker/front/calendar/style.scss
View File

@ -42,11 +42,19 @@ vn-worker-calendar {
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
}
.festive {
background-color:white;
border: 2px solid $color-alert;
vn-avatar.festive,
vn-avatar.today {
background-color: $color-font-dark;
width: 24px;
min-width: 24px;
height: 24px
}
vn-avatar.festive {
border: 2px solid $color-alert
}
vn-avatar.today {
border: 2px solid $color-font-link
}
}