From 4ce45abb4348ace15ccb40ba4e37f25b0514dee9 Mon Sep 17 00:00:00 2001 From: "Heliomar P. Marques" Date: Sat, 14 Oct 2023 22:13:26 -0300 Subject: [PATCH] update demo --- .../demo-basic/demo-basic.component.html | 6 +- .../demos/demo-basic/demo-basic.component.ts | 2 +- .../demo-modal-range-backwards.component.html | 4 +- .../demo-modal-range-backwards.component.ts | 5 +- .../demo-modal-range-end-date.component.html | 3 - ...demo-modal-range-noend-date.component.html | 3 + ...emo-modal-range-noend-date.component.scss} | 0 ...-modal-range-noend-date.component.spec.ts} | 10 +-- .../demo-modal-range-noend-date.component.ts} | 12 +-- .../demo-modal-range.component.html | 2 +- .../demo-modal-range.component.ts | 4 +- projects/demo/src/app/demos/demos.module.ts | 4 +- .../calendar-modal.component.ts | 10 +-- .../calendar-month.component.ts | 89 +++++++++++-------- .../src/lib/ion-calendar.service.ts | 57 +++++++----- 15 files changed, 120 insertions(+), 91 deletions(-) delete mode 100644 projects/demo/src/app/demos/demo-modal-range-end-date/demo-modal-range-end-date.component.html create mode 100644 projects/demo/src/app/demos/demo-modal-range-noend-date/demo-modal-range-noend-date.component.html rename projects/demo/src/app/demos/{demo-modal-range-end-date/demo-modal-range-end-date.component.scss => demo-modal-range-noend-date/demo-modal-range-noend-date.component.scss} (100%) rename projects/demo/src/app/demos/{demo-modal-range-end-date/demo-modal-range-end-date.component.spec.ts => demo-modal-range-noend-date/demo-modal-range-noend-date.component.spec.ts} (58%) rename projects/demo/src/app/demos/{demo-modal-range-end-date/demo-modal-range-end-date.component.ts => demo-modal-range-noend-date/demo-modal-range-noend-date.component.ts} (77%) diff --git a/projects/demo/src/app/demos/demo-basic/demo-basic.component.html b/projects/demo/src/app/demos/demo-basic/demo-basic.component.html index 39d680b..372d6a5 100644 --- a/projects/demo/src/app/demos/demo-basic/demo-basic.component.html +++ b/projects/demo/src/app/demos/demo-basic/demo-basic.component.html @@ -173,10 +173,10 @@

IonCalendar Options

- - showMonthSubtitle + showMonthAdjacentDays diff --git a/projects/demo/src/app/demos/demo-basic/demo-basic.component.ts b/projects/demo/src/app/demos/demo-basic/demo-basic.component.ts index 3aaff95..697d1ef 100644 --- a/projects/demo/src/app/demos/demo-basic/demo-basic.component.ts +++ b/projects/demo/src/app/demos/demo-basic/demo-basic.component.ts @@ -223,7 +223,7 @@ export class DemoBasicComponent { onChangeShowYearPicker(showYearPicker: boolean) { this.options = { ...this.options, - showYearPicker, + showYearPicker }; } diff --git a/projects/demo/src/app/demos/demo-modal-range-backwards/demo-modal-range-backwards.component.html b/projects/demo/src/app/demos/demo-modal-range-backwards/demo-modal-range-backwards.component.html index fb5e9ee..d3391a4 100644 --- a/projects/demo/src/app/demos/demo-modal-range-backwards/demo-modal-range-backwards.component.html +++ b/projects/demo/src/app/demos/demo-modal-range-backwards/demo-modal-range-backwards.component.html @@ -1,3 +1,3 @@ - - Range can backwards + + Range - can backwards diff --git a/projects/demo/src/app/demos/demo-modal-range-backwards/demo-modal-range-backwards.component.ts b/projects/demo/src/app/demos/demo-modal-range-backwards/demo-modal-range-backwards.component.ts index 47b8480..203c358 100644 --- a/projects/demo/src/app/demos/demo-modal-range-backwards/demo-modal-range-backwards.component.ts +++ b/projects/demo/src/app/demos/demo-modal-range-backwards/demo-modal-range-backwards.component.ts @@ -15,7 +15,7 @@ export class DemoModalRangeBackwardsComponent { to: Date; } = { from: new Date(), - to: new Date(Date.now() + 24 * 60 * 60 * 1000 * 5), + to: new Date(Date.now() + 24 * 60 * 60 * 1000 * 5), //+ 5 dias no futuro }; constructor(public modalCtrl: ModalController) {} @@ -25,8 +25,9 @@ export class DemoModalRangeBackwardsComponent { pickMode: 'range', title: 'RANGE - BACKWARDS', defaultDateRange: this.dateRange, + clearLabel: 'CLEAR', canBackwardsSelected: true, - color: "medium", + color: "secondary", }; const myCalendar = await this.modalCtrl.create({ diff --git a/projects/demo/src/app/demos/demo-modal-range-end-date/demo-modal-range-end-date.component.html b/projects/demo/src/app/demos/demo-modal-range-end-date/demo-modal-range-end-date.component.html deleted file mode 100644 index 7e5e9d6..0000000 --- a/projects/demo/src/app/demos/demo-modal-range-end-date/demo-modal-range-end-date.component.html +++ /dev/null @@ -1,3 +0,0 @@ - - Range - EndDate - diff --git a/projects/demo/src/app/demos/demo-modal-range-noend-date/demo-modal-range-noend-date.component.html b/projects/demo/src/app/demos/demo-modal-range-noend-date/demo-modal-range-noend-date.component.html new file mode 100644 index 0000000..8dddde3 --- /dev/null +++ b/projects/demo/src/app/demos/demo-modal-range-noend-date/demo-modal-range-noend-date.component.html @@ -0,0 +1,3 @@ + + Range - no defined end date + diff --git a/projects/demo/src/app/demos/demo-modal-range-end-date/demo-modal-range-end-date.component.scss b/projects/demo/src/app/demos/demo-modal-range-noend-date/demo-modal-range-noend-date.component.scss similarity index 100% rename from projects/demo/src/app/demos/demo-modal-range-end-date/demo-modal-range-end-date.component.scss rename to projects/demo/src/app/demos/demo-modal-range-noend-date/demo-modal-range-noend-date.component.scss diff --git a/projects/demo/src/app/demos/demo-modal-range-end-date/demo-modal-range-end-date.component.spec.ts b/projects/demo/src/app/demos/demo-modal-range-noend-date/demo-modal-range-noend-date.component.spec.ts similarity index 58% rename from projects/demo/src/app/demos/demo-modal-range-end-date/demo-modal-range-end-date.component.spec.ts rename to projects/demo/src/app/demos/demo-modal-range-noend-date/demo-modal-range-noend-date.component.spec.ts index 5270f8a..3e848a9 100644 --- a/projects/demo/src/app/demos/demo-modal-range-end-date/demo-modal-range-end-date.component.spec.ts +++ b/projects/demo/src/app/demos/demo-modal-range-noend-date/demo-modal-range-noend-date.component.spec.ts @@ -1,19 +1,19 @@ import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing'; import { IonicModule } from '@ionic/angular'; -import { DemoModalRangeEndDateComponent } from './demo-modal-range-end-date.component'; +import { DemoModalRangeNoEndDateComponent } from './demo-modal-range-noend-date.component'; describe('DemoModalRangeEndDateComponent', () => { - let component: DemoModalRangeEndDateComponent; - let fixture: ComponentFixture; + let component: DemoModalRangeNoEndDateComponent; + let fixture: ComponentFixture; beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ - declarations: [ DemoModalRangeEndDateComponent ], + declarations: [ DemoModalRangeNoEndDateComponent ], imports: [IonicModule.forRoot()] }).compileComponents(); - fixture = TestBed.createComponent(DemoModalRangeEndDateComponent); + fixture = TestBed.createComponent(DemoModalRangeNoEndDateComponent); component = fixture.componentInstance; fixture.detectChanges(); })); diff --git a/projects/demo/src/app/demos/demo-modal-range-end-date/demo-modal-range-end-date.component.ts b/projects/demo/src/app/demos/demo-modal-range-noend-date/demo-modal-range-noend-date.component.ts similarity index 77% rename from projects/demo/src/app/demos/demo-modal-range-end-date/demo-modal-range-end-date.component.ts rename to projects/demo/src/app/demos/demo-modal-range-noend-date/demo-modal-range-noend-date.component.ts index 939fc9b..08c305c 100644 --- a/projects/demo/src/app/demos/demo-modal-range-end-date/demo-modal-range-end-date.component.ts +++ b/projects/demo/src/app/demos/demo-modal-range-noend-date/demo-modal-range-noend-date.component.ts @@ -4,11 +4,11 @@ import { ModalController } from '@ionic/angular'; import { CalendarModalComponent, ICalendarModalOptions } from '@heliomarpm/ion-calendar'; @Component({ - selector: 'app-demo-modal-range-end-date', - templateUrl: './demo-modal-range-end-date.component.html', - styleUrls: ['./demo-modal-range-end-date.component.scss'], + selector: 'app-demo-modal-range-noend-date', + templateUrl: './demo-modal-range-noend-date.component.html', + styleUrls: ['./demo-modal-range-noend-date.component.scss'], }) -export class DemoModalRangeEndDateComponent { +export class DemoModalRangeNoEndDateComponent { dateRange: { from: Date; } = { @@ -20,9 +20,9 @@ export class DemoModalRangeEndDateComponent { async openCalendar() { const options: ICalendarModalOptions = { pickMode: 'range', - title: 'RANGE - END DATE', + title: 'RANGE - NO DEFINED END DATE', defaultDateRange: this.dateRange, - color: "secondary" + color: "medium" }; const myCalendar = await this.modalCtrl.create({ diff --git a/projects/demo/src/app/demos/demo-modal-range/demo-modal-range.component.html b/projects/demo/src/app/demos/demo-modal-range/demo-modal-range.component.html index 0ebcfed..c131cc7 100644 --- a/projects/demo/src/app/demos/demo-modal-range/demo-modal-range.component.html +++ b/projects/demo/src/app/demos/demo-modal-range/demo-modal-range.component.html @@ -1,3 +1,3 @@ - Range + Range - defined end date diff --git a/projects/demo/src/app/demos/demo-modal-range/demo-modal-range.component.ts b/projects/demo/src/app/demos/demo-modal-range/demo-modal-range.component.ts index fdfbde5..8cc8d8f 100644 --- a/projects/demo/src/app/demos/demo-modal-range/demo-modal-range.component.ts +++ b/projects/demo/src/app/demos/demo-modal-range/demo-modal-range.component.ts @@ -14,7 +14,7 @@ export class DemoModalRangeComponent { to: Date; } = { from: new Date(), - to: new Date(Date.now() + 24 * 60 * 60 * 1000 * 5), + to: new Date(Date.now() + 24 * 60 * 60 * 1000 * 5), //+ 5 dias no futuro }; constructor(public modalCtrl: ModalController) { } @@ -22,7 +22,7 @@ export class DemoModalRangeComponent { async openCalendar() { const options: ICalendarModalOptions = { pickMode: 'range', - title: 'RANGE', + title: 'RANGE - DEFINED END DATE', defaultDateRange: this.dateRange, clearLabel: 'CLEAR', color: 'dark' diff --git a/projects/demo/src/app/demos/demos.module.ts b/projects/demo/src/app/demos/demos.module.ts index bf3d670..3357d29 100644 --- a/projects/demo/src/app/demos/demos.module.ts +++ b/projects/demo/src/app/demos/demos.module.ts @@ -16,7 +16,7 @@ import { DemoModalLocaleComponent } from './demo-modal-locale/demo-modal-locale. import { DemoModalMultiComponent } from './demo-modal-multi/demo-modal-multi.component'; import { DemoModalRangeComponent } from './demo-modal-range/demo-modal-range.component'; import { DemoModalRangeBackwardsComponent } from './demo-modal-range-backwards/demo-modal-range-backwards.component'; -import { DemoModalRangeEndDateComponent } from './demo-modal-range-end-date/demo-modal-range-end-date.component'; +import { DemoModalRangeNoEndDateComponent } from './demo-modal-range-noend-date/demo-modal-range-noend-date.component'; import { PipesModule } from '../pipes/pipes.module'; @@ -33,7 +33,7 @@ const COMPONENTS = [ DemoModalMultiComponent, DemoModalRangeComponent, DemoModalRangeBackwardsComponent, - DemoModalRangeEndDateComponent, + DemoModalRangeNoEndDateComponent, ]; diff --git a/projects/ion-calendar/src/lib/components/calendar-modal/calendar-modal.component.ts b/projects/ion-calendar/src/lib/components/calendar-modal/calendar-modal.component.ts index 528166d..13a08fd 100644 --- a/projects/ion-calendar/src/lib/components/calendar-modal/calendar-modal.component.ts +++ b/projects/ion-calendar/src/lib/components/calendar-modal/calendar-modal.component.ts @@ -17,7 +17,7 @@ const NUM_OF_MONTHS_TO_CREATE = 3; }) export class CalendarModalComponent implements OnInit, AfterViewInit { def!: ICalendarModalOptions; - datesTemp: Array = [null, null]; + datesTemp: Array = [null]; calendarMonths!: Array; // private step!: number; private showYearPicker!: boolean; @@ -120,7 +120,7 @@ export class CalendarModalComponent implements OnInit, AfterViewInit { } } - protected onChange(data: any): void { + protected onChange(data: ICalendarDay[]): void { const { pickMode, autoDone } = this.def; this.datesTemp = data; @@ -151,11 +151,11 @@ export class CalendarModalComponent implements OnInit, AfterViewInit { switch (pickMode) { case pickModes.single: - return !!(this.datesTemp[0] && this.datesTemp[0].time); + return !!this.datesTemp[0]?.time; case pickModes.range: - return !!(this.datesTemp[0] && this.datesTemp[1]) && !!(this.datesTemp[0].time && this.datesTemp[1].time); + return !!(this.datesTemp[0]?.time && this.datesTemp[1]?.time); case pickModes.multi: - return this.datesTemp.length > 0 && this.datesTemp.every(e => !!e && !!e.time); + return this.datesTemp.length > 0 && this.datesTemp.every(e => !!e?.time); default: return false; } diff --git a/projects/ion-calendar/src/lib/components/calendar-month/calendar-month.component.ts b/projects/ion-calendar/src/lib/components/calendar-month/calendar-month.component.ts index 257fcf2..4e2d2c7 100644 --- a/projects/ion-calendar/src/lib/components/calendar-month/calendar-month.component.ts +++ b/projects/ion-calendar/src/lib/components/calendar-month/calendar-month.component.ts @@ -75,7 +75,7 @@ export class CalendarMonthComponent implements ControlValueAccessor, AfterViewIn isEndSelection(day: ICalendarDay): boolean { if (!day) { return false; } - if (this.pickMode !== pickModes.range || !this._isInit || this._date[1] === null) { + if (this.pickMode !== pickModes.range || !this._isInit || !this._date[1]) { return false; } @@ -93,7 +93,7 @@ export class CalendarMonthComponent implements ControlValueAccessor, AfterViewIn return false; } - if (this._date[0] === null || this._date[1] === null) { + if (!this._date[0] || !this._date[1]) { return false; } @@ -105,11 +105,11 @@ export class CalendarMonthComponent implements ControlValueAccessor, AfterViewIn isStartSelection(day: ICalendarDay): boolean { if (!day) { return false; } - if (this.pickMode !== pickModes.range || !this._isInit || this._date[0] === null) { + if (this.pickMode !== pickModes.range || !this._isInit || !this._date[0]) { return false; } - return this._date[0].time === day.time && this._date[1] !== null; + return this._date[0].time === day.time && !!this._date[1]; } isSelected(time: number): boolean { @@ -135,51 +135,64 @@ export class CalendarMonthComponent implements ControlValueAccessor, AfterViewIn item.selected = true; this.onSelect.emit(item); - if (this.pickMode === pickModes.single) { - this._date[0] = item; - this.onChange.emit(this._date as ICalendarDay[]); - return; + switch (this.pickMode) { + case pickModes.range: + this.handleSelectedRangeMode(item); + break; + case pickModes.multi: + this.handleSelectedMultiMode(item); + break; + case pickModes.single: + default: + this.handleSelectedSingleMode(item); + break; } - if (this.pickMode === pickModes.range) { - if (this._date[0] === null) { - this._date[0] = item; - this.onSelectStart.emit(item); - } else if (this._date[1] === null) { - if (this._date[0].time < item.time) { - this._date[1] = item; - this.onSelectEnd.emit(item); - } else { - this._date[1] = this._date[0]; - this.onSelectEnd.emit(this._date[0]); - this._date[0] = item; - this.onSelectStart.emit(item); - } - } else if (this._date[0].time > item.time) { - this._date[0] = item; - this.onSelectStart.emit(item); - } else if (this._date[1].time < item.time) { + } + + private handleSelectedSingleMode(item: ICalendarDay): void { + this._date[0] = item; + this.onChange.emit(this._date as ICalendarDay[]); + } + + private handleSelectedRangeMode(item: ICalendarDay): void { + if (!this._date[0]) { + this._date[0] = item; + this.onSelectStart.emit(item); + } else if (!this._date[1]) { + if (this._date[0].time < item.time) { this._date[1] = item; this.onSelectEnd.emit(item); } else { + this._date[1] = this._date[0]; + this.onSelectEnd.emit(this._date[0]); this._date[0] = item; this.onSelectStart.emit(item); - this._date[1] = null; } - - this.onChange.emit(this._date as ICalendarDay[]); - return; + } else if (this._date[0].time > item.time) { + this._date[0] = item; + this.onSelectStart.emit(item); + } else if (this._date[1].time < item.time) { + this._date[1] = item; + this.onSelectEnd.emit(item); + } else { + this._date[0] = item; + this.onSelectStart.emit(item); + this._date[1] = null; } - if (this.pickMode === pickModes.multi) { - const index = this._date.findIndex(e => e !== null && e.time === item.time); + this.onChange.emit(this._date as ICalendarDay[]); + } - if (index === -1) { - this._date.push(item); - } else { - this._date.splice(index, 1); - } - this.onChange.emit(this._date.filter(e => e !== null) as ICalendarDay[]); + private handleSelectedMultiMode(item: ICalendarDay): void { + const index = this._date.findIndex(e => !!e && e.time === item.time); + + if (index === -1) { + this._date.push(item); + } else { + this._date.splice(index, 1); } + + this.onChange.emit(this._date.filter(e => !!e) as ICalendarDay[]); } } diff --git a/projects/ion-calendar/src/lib/ion-calendar.service.ts b/projects/ion-calendar/src/lib/ion-calendar.service.ts index 39b78c5..7debe9f 100644 --- a/projects/ion-calendar/src/lib/ion-calendar.service.ts +++ b/projects/ion-calendar/src/lib/ion-calendar.service.ts @@ -144,10 +144,39 @@ export class IonCalendarService { const isToday = DateTimeHelper.now().hasSame(date, 'day') const dayConfig = this.findDayConfig(date, options); + var { title, subTitle, disable } = this.getCalendarDayAttributes(date, dayConfig, options); + + return { + time, + isToday, + selected: false, + marked: dayConfig?.marked ?? false, + isLastMonth: month ? date.month < month : false, + isNextMonth: month ? date.month > month : false, + isFirst: date.day === 1, + isLast: date.day === date.daysInMonth, + cssClass: dayConfig?.cssClass ?? '', + title, + subTitle, + disable, + }; + } + + /** + * Gets the attributes of a calendar day based on the given date, day configuration, and options. + * + * @param {DateTime} date - The date of the calendar day. + * @param {IDayConfig | null} dayConfig - The configuration for the day (optional). + * @param {ICalendarModalOptions} options - The options for the calendar modal. + * @return {{ disable: boolean; title: string; subTitle: string; }} The attributes of the calendar day. + */ + private getCalendarDayAttributes(date: DateTime, dayConfig: IDayConfig | null, options: ICalendarModalOptions) + : { disable: boolean; title: string; subTitle: string; } { + let disable = false; // Check if there is a specific disable configuration for the day - if (dayConfig && dayConfig.disable !== undefined) { + if (dayConfig?.disable !== undefined) { disable = dayConfig.disable!; } else { @@ -173,23 +202,9 @@ export class IonCalendarService { } // Determine the title and subtitle for the calendar day - const title = dayConfig?.title || options.defaultTitle || new Date(time).getDate().toString(); + const title = dayConfig?.title || options.defaultTitle || date.day.toString(); const subTitle = dayConfig?.subTitle || options.defaultSubtitle || ''; - - return { - time, - isToday, - title, - subTitle, - selected: false, - isLastMonth: month ? date.month < month : false, - isNextMonth: month ? date.month > month : false, - marked: dayConfig?.marked ?? false, - cssClass: dayConfig?.cssClass ?? '', - disable, - isFirst: date.day === 1, //date.date() === 1, - isLast: date.day === date.daysInMonth//date.date() === date.daysInMonth(), - }; + return { title, subTitle, disable }; } /** @@ -220,7 +235,7 @@ export class IonCalendarService { const optClone: ICalendarModalOptions = JSON.parse(JSON.stringify(options)); const dayConfig: IDayConfig | null = this.findDayConfig(dateTime, optClone); - if (dayConfig === null) { + if (!dayConfig) { if (!optClone.daysConfig) optClone.daysConfig = []; optClone.daysConfig.push({ date: dateTime.toJSDate(), subTitle: dateTime.monthShort! }); } @@ -233,7 +248,7 @@ export class IonCalendarService { const startDay = calculateStartDay(date); - let startIndex = 0; + const startIndex = 0; for (let i = startIndex; i < 7 * weeks; i++) { const itemTime = new Date(year, month, startDay + (i - startIndex)).getTime(); @@ -272,7 +287,7 @@ export class IonCalendarService { } if (opt.weekStart == 1) { - if (days[0] === null) { + if (!days[0]) { days.shift(); } else { days.unshift(...new Array(6).fill(null)); @@ -320,7 +335,7 @@ export class IonCalendarService { * @return {Array} The array of CalendarMonth objects. */ createWeeksByPeriod(startTime: number, opt: ICalendarModalOptions): Array { - let result: Array = []; + const result: Array = []; const time = DateTimeHelper.parse(startTime).valueOf(); const originalCalendar = this.createOriginalCalendar(time, true);