Skip to content

Commit

Permalink
feat: code cleaning and variable typing
Browse files Browse the repository at this point in the history
  • Loading branch information
@heliomarpm
heliomarpm committed Oct 14, 2023
1 parent 6c5fd4e commit 674ce0c
Show file tree
Hide file tree
Showing 6 changed files with 96 additions and 93 deletions.
14 changes: 7 additions & 7 deletions projects/demo/src/app/demos/demo-basic/demo-basic.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,19 +61,19 @@ <h3 style="text-align: center;">IonCalendar Options</h3>
<ion-input label="format" placeholder="date format" [(ngModel)]="format"></ion-input>
</ion-item>
<ion-item>
<ion-checkbox [(ngModel)]="readonly" [checked]="readonly">
<ion-checkbox title="readonly" [(ngModel)]="readonly" [checked]="readonly" >
readonly
</ion-checkbox>
</ion-item>
<ion-item>
<ion-checkbox [(ngModel)]="formatMonthPicker"
(ngModelChange)="onChangemonthsTitle($event)">
<ion-checkbox title="Custom MonthPicker"
[(ngModel)]="formatMonthPicker" (ngModelChange)="onChangemonthsTitle($event)">
Custom MonthPicker
</ion-checkbox>
</ion-item>
<ion-item>
<ion-checkbox [(ngModel)]="formatWeekDays"
(ngModelChange)="onChangeWeekDays($event)">
<ion-checkbox title="Custom WeekDays"
[(ngModel)]="formatWeekDays" (ngModelChange)="onChangeWeekDays($event)">
Custom WeekDays
</ion-checkbox>
</ion-item>
Expand Down Expand Up @@ -125,7 +125,7 @@ <h3 style="text-align: center;">IonCalendar Options</h3>
<ion-select-option value="0">0</ion-select-option>
<ion-select-option value="1">1</ion-select-option>
<ion-select-option value="2">2</ion-select-option>
<ion-select-option value="2">3</ion-select-option>
<ion-select-option value="3">3</ion-select-option>
<ion-select-option value="4">4</ion-select-option>
<ion-select-option value="5">5</ion-select-option>
<ion-select-option value="6">6</ion-select-option>
Expand Down Expand Up @@ -176,7 +176,7 @@ <h3 style="text-align: center;">IonCalendar Options</h3>
<ion-checkbox [(ngModel)]="optModel.showMonthSubtitle"
(ngModelChange)="onChangeShowMonthSubtitle($event)"
[disabled]="optModel.displayMode !== 'week'">
showAdjacentMonthDay
showMonthSubtitle
</ion-checkbox>
</ion-item>
<ion-item>
Expand Down
1 change: 0 additions & 1 deletion projects/ion-calendar/src/lib/components/calendar-month/calendar-month.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -123,7 +123,6 @@ ion-note {
left: 0;
right: 0;
display: block;
// background-color: white;
background-color: $color;
opacity: 0.25;
}
Expand Down
2 changes: 1 addition & 1 deletion projects/ion-calendar/src/lib/components/calendar/calendar.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,11 +26,11 @@
<ion-calendar-week color="transparent" [weekDays]="def.weekdays" [weekStart]="def.weekStart??0">
</ion-calendar-week>

<!-- (swipe)="onSwipe($event)" -->
<ion-calendar-month class="component-mode"
[(ngModel)]="calendarMonthValue"
[month]="monthOpt"
[readonly]="readonly"
(swipe)="onSwipe($event)"
(onChange)="onChanged($event)"
(onSelect)="onSelect.emit($event)"
(onSelectStart)="onSelectStart.emit($event)"
Expand Down
140 changes: 71 additions & 69 deletions projects/ion-calendar/src/lib/components/calendar/calendar.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import { DateTimeHelper } from '../../helpers';

import { IonCalendarService } from '../../ion-calendar.service';
import { ICalendarComponentMonthChange, ICalendarComponentOptions, ICalendarComponentWeekChange, ICalendarDay, ICalendarModalOptions, ICalendarMonth } from '../../models';
import defaultValues, { CalendarComponentPayloadType, CalendarComponentType, ColorType, pickModes } from '../../types';
import defaultValues, { CalendarComponentOnChangeType, CalendarComponentPayloadRangeType, CalendarComponentPayloadType, CalendarComponentType, ColorType, pickModes } from '../../types';

export const ION_CAL_VALUE_ACCESSOR: Provider = {
provide: NG_VALUE_ACCESSOR,
Expand Down Expand Up @@ -77,12 +77,12 @@ export class CalendarComponent implements ControlValueAccessor, OnInit {
@Input() type: CalendarComponentType = 'string';
@Input() readonly = false;

@Output() onChange: EventEmitter<CalendarComponentPayloadType | any> = new EventEmitter();
@Output() onMonthChange: EventEmitter<ICalendarComponentMonthChange | any> = new EventEmitter();
@Output() onWeekChange: EventEmitter<ICalendarComponentWeekChange | any> = new EventEmitter();
@Output() onSelect: EventEmitter<ICalendarDay | any> = new EventEmitter();
@Output() onSelectStart: EventEmitter<ICalendarDay | any> = new EventEmitter();
@Output() onSelectEnd: EventEmitter<ICalendarDay | any> = new EventEmitter();
@Output() onChange: EventEmitter<CalendarComponentOnChangeType> = new EventEmitter();
@Output() onMonthChange: EventEmitter<ICalendarComponentMonthChange> = new EventEmitter();
@Output() onWeekChange: EventEmitter<ICalendarComponentWeekChange> = new EventEmitter();
@Output() onSelect: EventEmitter<ICalendarDay> = new EventEmitter();
@Output() onSelectStart: EventEmitter<ICalendarDay> = new EventEmitter();
@Output() onSelectEnd: EventEmitter<ICalendarDay> = new EventEmitter();

// private readonly MONTH_DATE_FORMAT = 'MMMM yyyy';
constructor(public calSvc: IonCalendarService) {
Expand Down Expand Up @@ -192,14 +192,11 @@ export class CalendarComponent implements ControlValueAccessor, OnInit {
}

private nextWeek() {
let oldWeek = this.calSvc.multiFormat(this.monthOpt.original.time);
// let nextTime = moment(this.monthOpt.original.time).add(this.def.weeks, 'weeks').valueOf();
let nextTime = DateTime.fromMillis(this.monthOpt.original.time).plus({ weeks: this.def.weeks }).valueOf();
let newWeek = this.calSvc.multiFormat(nextTime);
const oldWeek = this.calSvc.multiFormat(this.monthOpt.original.time);

if (oldWeek.month != newWeek.month && !this.def.continuous) {
// let _start = new Date(nextTime);
// nextTime = new Date(_start.getFullYear(), _start.getMonth(), 1).getTime();
nextTime = DateTime.fromMillis(nextTime).set({ day: 1 }).valueOf();
newWeek = this.calSvc.multiFormat(nextTime);
}
Expand All @@ -215,18 +212,12 @@ export class CalendarComponent implements ControlValueAccessor, OnInit {

canNext(): boolean {
if (!this.def.to || this.view !== 'days') return true;
// if (!this.def.to) return true;

// return this.monthOpt.original.time < moment(this.def.to).valueOf();
// const toMillis = (this.def.to instanceof Date) ? this.def.to.getTime() : this.def.to;
// return this.monthOpt.original.time < DateTime.fromMillis(toMillis).toMillis();

const toDate = DateTimeHelper.parse(this.def.to);
return this.monthOpt.original.lastDay < toDate.toMillis();
}

private backMonth(): void {
// const backTime = moment(this.monthOpt.original.time).subtract(1, 'months').valueOf();
const backTime = DateTime.fromMillis(this.monthOpt.original.time).minus({ months: 1 }).valueOf();
this.onMonthChange.emit({
oldMonth: this.calSvc.multiFormat(this.monthOpt.original.time),
Expand All @@ -236,51 +227,49 @@ export class CalendarComponent implements ControlValueAccessor, OnInit {
}

private backWeek(): void {
// let backTime = moment(this.monthOpt.original.time).subtract(this.def.weeks, 'weeks').valueOf();
let backTime = DateTime.fromMillis(this.monthOpt.original.time).minus({ weeks: this.def.weeks }).valueOf();
let oldWeek = this.calSvc.multiFormat(this.monthOpt.original.time);
let newWeek = this.calSvc.multiFormat(backTime);
const oldWeek = this.calSvc.multiFormat(this.monthOpt.original.time);

if (oldWeek.month != newWeek.month && !this.def.continuous) {
let _start = new Date(this.monthOpt.original.time);
let dayToSubstrac = _start.getDay();
const start = new Date(this.monthOpt.original.time);
let dayToSubstrac = start.getDay();
if (this.options.weekStart === 1) {
dayToSubstrac--;
if (dayToSubstrac < 0) {
dayToSubstrac = 6;
}
}

let firstDayMonth = new Date(_start.getFullYear(), _start.getMonth(), 1).getTime();
// let momentBackTime = moment(firstDayMonth);
const firstDayMonth = new Date(start.getFullYear(), start.getMonth(), 1).getTime();
let momentBackTime = DateTime.fromMillis(firstDayMonth);
if (_start.getDate() - dayToSubstrac <= 1) {
// momentBackTime = momentBackTime.subtract(1, 'd');
if (start.getDate() - dayToSubstrac <= 1) {
momentBackTime = momentBackTime.minus({ days: 1 });
}
backTime = momentBackTime.valueOf();

newWeek = this.calSvc.multiFormat(backTime);
}

this.onWeekChange.emit({ oldWeek: oldWeek, newWeek: newWeek, });

if (oldWeek.month != newWeek.month) {
this.onMonthChange.emit({ oldMonth: oldWeek, newMonth: newWeek, });
}

this.monthOpt = this.createWeek(backTime);
}

canPrev(): boolean {
// if (!this._d.from || this._view !== 'days') { return true; }
if (!this.def.from || this.view !== 'days') return true;
// return this.monthOpt.original.time > moment(this.def.from).valueOf();

const fromDate = DateTimeHelper.parse(this.def.from);
return this.monthOpt.original.time > fromDate.valueOf();
}

onMonthSelect(month: number | any): void {
onMonthSelect(month: number): void {
this.view = 'days';

// const newMonth = moment(this.monthOpt.original.time).month(month).valueOf();
const newMonth = DateTimeHelper.parse(this.monthOpt.original.time).set({ month }).valueOf();
this.onMonthChange.emit({
oldMonth: this.calSvc.multiFormat(this.monthOpt.original.time),
Expand All @@ -289,10 +278,9 @@ export class CalendarComponent implements ControlValueAccessor, OnInit {
this.createWeekOrMonth(newMonth);
}

public onYearSelect(year: number | any): void {
public onYearSelect(year: number): void {
this.view = 'month';

// const newYear = moment(this.monthOpt.original.time).year(year).valueOf();
const newYear = DateTimeHelper.parse(this.monthOpt.original.time).set({ year }).valueOf();
this.onMonthChange.emit({
oldMonth: this.calSvc.multiFormat(this.monthOpt.original.time),
Expand All @@ -301,64 +289,77 @@ export class CalendarComponent implements ControlValueAccessor, OnInit {
this.monthOpt = this.createMonth(newYear);
}

protected onChanged($event: ICalendarDay[] | any): void {
protected onChanged($event: ICalendarDay[]): void {
const eCD: ICalendarDay[] = $event;

this.yearStep = 0;

const emitOnChange = (date: CalendarComponentOnChangeType) => {
this._onChanged(date);
this.onChange.emit(date);
}

switch (this.def.pickMode) {
case pickModes.single:
const date = this._handleType(eCD[0].time);
this.selectedDates = DateTimeHelper.parse(date.valueOf()).toJSDate();
this._onChanged(date);
this.onChange.emit(date);
const time = eCD[0].time;
const date = this._handleType(time);

this.selectedDates = DateTimeHelper.parse(time).toJSDate();
emitOnChange(date);
break;

case pickModes.range:
if (eCD[0] && eCD[1]) {
const rangeDate = {
from: this._handleType(eCD[0].time),
to: this._handleType(eCD[1].time),
const timeFrom = eCD[0].time;
const timeTo = eCD[1].time;

const rangeDate: CalendarComponentPayloadRangeType = {
from: this._handleType(timeFrom),
to: this._handleType(timeTo),
};

this.selectedDates = Array<Date>(
DateTimeHelper.parse(rangeDate.from.valueOf()).toJSDate(),
DateTimeHelper.parse(rangeDate.to.valueOf()).toJSDate()
DateTimeHelper.parse(timeFrom).toJSDate(),
DateTimeHelper.parse(timeTo).toJSDate()
);

this._onChanged(rangeDate);
this.onChange.emit(rangeDate);
emitOnChange(rangeDate);
}
break;

case pickModes.multi:
const dates = [];
this.selectedDates = Array<Date>();

for (let i = 0; i < eCD.length; i++) {
if (eCD[i] && eCD[i].time) {
const payload = this._handleType(eCD[i].time);
dates.push(payload);
this.selectedDates.push(DateTimeHelper.parse(payload.valueOf()).toJSDate());
const emitChangeForMulti = (days: ICalendarDay[]): Array<Date> => {
const dates: Array<Date> = [];

const payloads: Array<CalendarComponentPayloadType> = [];
for (let i = 0; i < days.length; i++) {
if (days[i] && days[i].time) {
const time = days[i].time;
const payload = this._handleType(time);
payloads.push(payload);
dates.push(DateTimeHelper.parse(time).toJSDate());
}
}
}

this._onChanged(dates);
this.onChange.emit(dates);
emitOnChange(payloads);
return dates
}
this.selectedDates = emitChangeForMulti(eCD);
break;

default:
}
}

protected onSwipe($event: any): void {
const isNext = $event.deltaX < 0;
if (isNext && this.canNext()) {
this.nextMonth();
} else if (!isNext && this.canPrev()) {
this.backMonth();
}
}
// onSwipe($event: any): void {
// console.log('onSwipe', $event); // TODO remove debug
// const isNext = $event.deltaX < 0;
// if (isNext && this.canNext()) {
// this.nextMonth();
// } else if (!isNext && this.canPrev()) {
// this.backMonth();
// }
// }

private _onChanged: Function = () => { };
private _onTouched: Function = () => { };
Expand All @@ -379,14 +380,13 @@ export class CalendarComponent implements ControlValueAccessor, OnInit {
return date.valueOf();
}

monthFormat(date: number | any): string {
monthFormat(date: number): string {
if (!this.def.monthFormat) return '';
// return moment(date).format(this.def.monthFormat.replace(/y/g, 'Y'));
return DateTimeHelper.parse(date).toFormat(this.def.monthFormat.replace(/Y/g, 'y'), { locale: this._options.locale?.locale });
}

private initOpt(): void {

this.showToggleButtons = this._options.showToggleButtons ?? true;
this.showMonthPicker = this._options.showMonthPicker ?? true;

Expand Down Expand Up @@ -471,21 +471,23 @@ export class CalendarComponent implements ControlValueAccessor, OnInit {
this._onTouched = fn;
}

private _writeValue(value: any): void {
private _writeValue(value: CalendarComponentOnChangeType): void {
if (!value) {
this.calendarMonthValue = [null, null];
return;
}

this.onChange.emit(value);

switch (this.def.pickMode) {
case 'single':
this.calendarMonthValue[0] = this._createCalendarDay(value);
this.calendarMonthValue[0] = this._createCalendarDay(value as CalendarComponentPayloadType);
break;

case 'range':
this.calendarMonthValue[0] = value.from ? this._createCalendarDay(value.from) : null;
this.calendarMonthValue[1] = value.to ? this._createCalendarDay(value.to) : null;

const { from, to } = value as CalendarComponentPayloadRangeType;
this.calendarMonthValue[0] = from ? this._createCalendarDay(from) : null;
this.calendarMonthValue[1] = to ? this._createCalendarDay(to) : null;
break;

case 'multi':
Expand Down
25 changes: 12 additions & 13 deletions projects/ion-calendar/src/lib/helpers/DateTimeHelper.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,18 +41,18 @@ class DateTimeHelper {
return false;
}

/**
* Calculates the first and last day of the week for a given date.
*
* @param {Date} date - The date for which to calculate the first and last day of the week.
* @return {{firstDay: Date, lastDay: Date}} - An object containing the first and last day of the week.
*
* @example
* const today = new Date();
* const weekRange = getFirstAndLastDayOfWeek(today);
* console.log(weekRange.firstDay.toDateString()); // Output: Sun Oct 08 2023
* console.log(weekRange.lastDay.toDateString()); // Output: Sat Oct 14 2023
*/
/**
* Calculates the first and last day of the week for a given date.
*
* @param {Date} date - The date for which to calculate the first and last day of the week.
* @return {{firstDay: Date, lastDay: Date}} - An object containing the first and last day of the week.
*
* @example
* const today = new Date();
* const weekRange = getFirstAndLastDayOfWeek(today);
* console.log(weekRange.firstDay.toDateString()); // Output: Sun Oct 08 2023
* console.log(weekRange.lastDay.toDateString()); // Output: Sat Oct 14 2023
*/
static getFirstAndLastDayOfWeek(date: Date): { firstDay: Date, lastDay: Date } {
const currentDay = date.getDay(); // Dia da semana (0 - Domingo, 1 - Segunda, ..., 6 - Sábado)
const diff = currentDay - 0; // 0 representa o Domingo
Expand Down Expand Up @@ -80,7 +80,6 @@ class DateTimeHelper {
const firstDay = this.getFirstAndLastDayOfWeek(today.toJSDate()).firstDay.getDay();

if (firstDay < Number(today.startOf('week').toFormat('dd'))) {
// if (s ?? 'sunday' === 'sunday') {
weeksDay.unshift(weeksDay.pop()!);
}
return weeksDay;
Expand Down
Loading

0 comments on commit 674ce0c

Please sign in to comment.