From a82b91c6eeb07e9d95c2cdbec6ceeae2b167cced Mon Sep 17 00:00:00 2001 From: GCCollab Date: Fri, 15 Mar 2024 19:14:17 +0000 Subject: [PATCH] Code formatting ignore-deploy --- src/app/app.module.ts | 2 +- src/app/core/models/location.model.ts | 2 +- src/app/core/services/resize.service.spec.ts | 32 +- src/app/core/services/resize.service.ts | 7 +- .../features/calendar/calendar.component.html | 233 +++++------ .../features/calendar/calendar.component.scss | 282 ++++++------- .../calendar/calendar.component.spec.ts | 11 +- .../features/calendar/calendar.component.ts | 116 +++--- src/app/features/calendar/calendar.module.ts | 57 +-- .../calendar-day/calendar-day.component.html | 37 +- .../calendar-day/calendar-day.component.scss | 194 ++++----- .../calendar-day.component.spec.ts | 2 +- .../calendar-day/calendar-day.component.ts | 26 +- .../calendar-events.component.html | 158 ++++--- .../calendar-events.component.scss | 227 +++++----- .../calendar-events.component.ts | 82 ++-- .../calendar-search.component.html | 104 +++-- .../calendar-search.component.scss | 283 +++++++------ .../calendar-search.component.ts | 238 +++++------ .../interfaces/calendar-date.interface.ts | 12 +- .../interfaces/calendar-weekday.interface.ts | 8 +- .../event-card/event-card.component.ts | 2 +- .../components/event/event.component.html | 394 +++++++++--------- .../components/event/event.component.scss | 12 +- .../components/event/event.component.ts | 2 +- src/app/features/events/models/event.ts | 192 +++++---- src/app/features/home/home.component.ts | 12 +- src/app/features/home/home.module.ts | 11 +- src/app/features/missions/missions.module.ts | 4 +- .../calendar-button.component.ts | 2 +- .../shared/components/list/list.component.ts | 3 +- .../duration-format/duration-format.pipe.ts | 106 ++--- .../localized-date/localized-date.pipe.ts | 42 +- src/app/shared/shared.module.ts | 5 +- 34 files changed, 1426 insertions(+), 1474 deletions(-) diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 26d2a5ca..a9c38e00 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -39,7 +39,7 @@ registerLocaleData(localeFr); deps: [HttpClient], }, isolate: false, - extend: true + extend: true, }), NgxTranslateRoutesModule.forRoot({ enableRouteTranslate: true, diff --git a/src/app/core/models/location.model.ts b/src/app/core/models/location.model.ts index ff1a98ff..15ea1bd6 100644 --- a/src/app/core/models/location.model.ts +++ b/src/app/core/models/location.model.ts @@ -12,6 +12,6 @@ export class Location { } toString(): string { - return `${this.address}, ${this.city}, ${this.province}` + return `${this.address}, ${this.city}, ${this.province}`; } } diff --git a/src/app/core/services/resize.service.spec.ts b/src/app/core/services/resize.service.spec.ts index 5d77d7ba..069abc53 100644 --- a/src/app/core/services/resize.service.spec.ts +++ b/src/app/core/services/resize.service.spec.ts @@ -1,16 +1,16 @@ -import { TestBed } from '@angular/core/testing'; - -import { ResizeService } from './resize.service'; - -describe('ResizeService', () => { - let service: ResizeService; - - beforeEach(() => { - TestBed.configureTestingModule({}); - service = TestBed.inject(ResizeService); - }); - - it('should be created', () => { - expect(service).toBeTruthy(); - }); -}); \ No newline at end of file +import { TestBed } from '@angular/core/testing'; + +import { ResizeService } from './resize.service'; + +describe('ResizeService', () => { + let service: ResizeService; + + beforeEach(() => { + TestBed.configureTestingModule({}); + service = TestBed.inject(ResizeService); + }); + + it('should be created', () => { + expect(service).toBeTruthy(); + }); +}); diff --git a/src/app/core/services/resize.service.ts b/src/app/core/services/resize.service.ts index b4c950af..be7456f7 100644 --- a/src/app/core/services/resize.service.ts +++ b/src/app/core/services/resize.service.ts @@ -1,10 +1,9 @@ -import { Injectable, EventEmitter } from '@angular/core'; +import { Injectable, EventEmitter } from '@angular/core'; @Injectable({ - providedIn: 'root' + providedIn: 'root', }) export class ResizeService { - resizeEvent: EventEmitter = new EventEmitter(); constructor() { @@ -12,7 +11,7 @@ export class ResizeService { } private setupResizeListener(): void { - window.addEventListener('resize', (event) => { + window.addEventListener('resize', event => { this.resizeEvent.emit(event); }); } diff --git a/src/app/features/calendar/calendar.component.html b/src/app/features/calendar/calendar.component.html index d1830029..d089eecd 100644 --- a/src/app/features/calendar/calendar.component.html +++ b/src/app/features/calendar/calendar.component.html @@ -1,69 +1,70 @@ -
- -
- - -
- - - - - - - - - - - -
- - -
- - - - - - - - {{ date | localizedDate : 'MMMM YYYY' | titlecase }} - - - - - -
+
+
+ +
+ + + + + + + + + +
- -
+ +
+ + + + + + + {{ date | localizedDate: 'MMMM YYYY' | titlecase }} + + + + + +
- - +
+ + -
+
- - - + + -
- -
- @for (weekday of weekdays; track $index) { -
- {{ weekday.title | translate }} -
- } +
+ +
+ @for (weekday of weekdays; track $index) { +
+ {{ weekday.title | translate }}
+ } +
-
- - @for (day of datesPaddingPre; track $index) { - - - } - - @for (day of dates; track $index) { - - - } - - @for (day of datesPaddingPost; track $index) { - - - } -
+
+ + @for (day of datesPaddingPre; track $index) { + + } + + @for (day of dates; track $index) { + + } + + @for (day of datesPaddingPost; track $index) { + + }
+
- - + - - - - -
- - - {{ editEventId ? (translations.forms.save | translate) : (translations.forms.create | translate) }} - - - - - Cancel - -
- \ No newline at end of file + + +
+ + + {{ editEventId ? (translations.forms.save | translate) : (translations.forms.create | translate) }} + + + + Cancel +
+ diff --git a/src/app/features/calendar/calendar.component.scss b/src/app/features/calendar/calendar.component.scss index 1da700ae..fa3cb451 100644 --- a/src/app/features/calendar/calendar.component.scss +++ b/src/app/features/calendar/calendar.component.scss @@ -1,141 +1,141 @@ -@import "../../../assets/scss/partials/colors"; - -$cal-gap: 15px; - -.gcc-calendar-wrapper { - min-width: 350px; -} - -.header { - display: flex; - text-align: center; - padding: $cal-gap $cal-gap; - margin: $cal-gap 0; - border-radius: 16px; - background-color: $neutral-100; - box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); - - div[class*="-actions"] { - display: flex; - flex: 1; - align-items: center; - } - - .left-actions { - justify-content : flex-start; - } - - .middle-actions { - justify-content : center; - white-space: nowrap; - - span { - padding: 0 20px; - pointer-events: none; - font-weight: 700; - font-size: 32px; - } - } - - .right-actions { - justify-content: flex-end; - } - - ::ng-deep { - app-input mat-label, - app-input .mat-mdc-form-field-subscript-wrapper, - .mat-mdc-button-persistent-ripple, - .mat-mdc-button-ripple { - display: none; - } - - .cdk-focused { - color: $primary-1 !important; - } - } -} - -.weekdays { - display: grid; - grid-template-columns: repeat(7, 1fr); - font-weight: bold; - pointer-events: none; - border-top: 3px solid $neutral-200; - margin-bottom: $cal-gap; - box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); - border-radius: 14px; - - .day { - font-weight: 500; - border: none; - } - - .day.today { - font-weight: 700; - } - - .day:first-child { - border-top-left-radius: 10px; - border-bottom-left-radius: 10px; - } - - .day:last-child { - border-top-right-radius: 10px; - border-bottom-right-radius: 10px; - } -} - -.calendar { - display: grid; - grid-template-columns: repeat(7, 1fr); - border-radius: 20px; - background-color: $neutral-100; - box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); - - .day.inactive { - color: #bfbfbf; - } -} - -.day { - text-align: center; - padding: 10px; - background-color: $neutral-200; - border: 1px solid #ccc; - box-sizing: border-box; - - span { - pointer-events: none; - } -} - -.gcc-calendar-wrapper.loading { - .header, - .weekdays { - color: $neutral-500; - } -} - -app-calendar-search { - margin-bottom: $cal-gap; -} - -app-calendar-events { - ::ng-deep { - > mat-card { - margin: $cal-gap 0; - } - } -} - -.event-form { - background-color: $neutral-100; - padding: 16px; - box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); - - .actions { - display: flex; - align-self: flex-end; - gap: 16px; - } -} \ No newline at end of file +@import '../../../assets/scss/partials/colors'; + +$cal-gap: 15px; + +.gcc-calendar-wrapper { + min-width: 350px; +} + +.header { + display: flex; + text-align: center; + padding: $cal-gap $cal-gap; + margin: $cal-gap 0; + border-radius: 16px; + background-color: $neutral-100; + box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); + + div[class*='-actions'] { + display: flex; + flex: 1; + align-items: center; + } + + .left-actions { + justify-content: flex-start; + } + + .middle-actions { + justify-content: center; + white-space: nowrap; + + span { + padding: 0 20px; + pointer-events: none; + font-weight: 700; + font-size: 32px; + } + } + + .right-actions { + justify-content: flex-end; + } + + ::ng-deep { + app-input mat-label, + app-input .mat-mdc-form-field-subscript-wrapper, + .mat-mdc-button-persistent-ripple, + .mat-mdc-button-ripple { + display: none; + } + + .cdk-focused { + color: $primary-1 !important; + } + } +} + +.weekdays { + display: grid; + grid-template-columns: repeat(7, 1fr); + font-weight: bold; + pointer-events: none; + border-top: 3px solid $neutral-200; + margin-bottom: $cal-gap; + box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); + border-radius: 14px; + + .day { + font-weight: 500; + border: none; + } + + .day.today { + font-weight: 700; + } + + .day:first-child { + border-top-left-radius: 10px; + border-bottom-left-radius: 10px; + } + + .day:last-child { + border-top-right-radius: 10px; + border-bottom-right-radius: 10px; + } +} + +.calendar { + display: grid; + grid-template-columns: repeat(7, 1fr); + border-radius: 20px; + background-color: $neutral-100; + box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); + + .day.inactive { + color: #bfbfbf; + } +} + +.day { + text-align: center; + padding: 10px; + background-color: $neutral-200; + border: 1px solid #ccc; + box-sizing: border-box; + + span { + pointer-events: none; + } +} + +.gcc-calendar-wrapper.loading { + .header, + .weekdays { + color: $neutral-500; + } +} + +app-calendar-search { + margin-bottom: $cal-gap; +} + +app-calendar-events { + ::ng-deep { + > mat-card { + margin: $cal-gap 0; + } + } +} + +.event-form { + background-color: $neutral-100; + padding: 16px; + box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); + + .actions { + display: flex; + align-self: flex-end; + gap: 16px; + } +} diff --git a/src/app/features/calendar/calendar.component.spec.ts b/src/app/features/calendar/calendar.component.spec.ts index f86d3652..c832cbaf 100644 --- a/src/app/features/calendar/calendar.component.spec.ts +++ b/src/app/features/calendar/calendar.component.spec.ts @@ -20,16 +20,13 @@ describe('CalendarComponent', () => { loader: { provide: TranslateLoader, useFactory: (http: HttpClient) => new TypescriptLoader(http, 'translations'), - deps: [ HttpClient ] - } + deps: [HttpClient], + }, }), HttpClientModule, - RouterTestingModule + RouterTestingModule, ], - providers: [ - TranslateService, - HttpClient, - ] + providers: [TranslateService, HttpClient], }); fixture = TestBed.createComponent(CalendarComponent); component = fixture.componentInstance; diff --git a/src/app/features/calendar/calendar.component.ts b/src/app/features/calendar/calendar.component.ts index 90385ab4..b3dcfc8c 100644 --- a/src/app/features/calendar/calendar.component.ts +++ b/src/app/features/calendar/calendar.component.ts @@ -1,6 +1,26 @@ /* eslint-disable no-case-declarations */ import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, Input, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core'; -import { endOfDay, subDays, addDays, addMonths, endOfMonth, getDaysInMonth, startOfMonth, differenceInCalendarMonths, isWithinInterval, startOfDay, isMonday, isTuesday, isWednesday, isThursday, isFriday, isSaturday, isSunday, isSameDay, format } from 'date-fns'; +import { + endOfDay, + subDays, + addDays, + addMonths, + endOfMonth, + getDaysInMonth, + startOfMonth, + differenceInCalendarMonths, + isWithinInterval, + startOfDay, + isMonday, + isTuesday, + isWednesday, + isThursday, + isFriday, + isSaturday, + isSunday, + isSameDay, + format, +} from 'date-fns'; import { ICalendarDate } from './interfaces/calendar-date.interface'; import { ICalendarWeekDay } from './interfaces/calendar-weekday.interface'; import { Translations } from 'src/app/core/services/translations.service'; @@ -18,23 +38,22 @@ import { FormGroup } from '@angular/forms'; selector: 'app-calendar', templateUrl: './calendar.component.html', styleUrls: ['./calendar.component.scss'], - changeDetection: ChangeDetectionStrategy.OnPush + changeDetection: ChangeDetectionStrategy.OnPush, }) export class CalendarComponent implements OnInit, OnChanges, OnDestroy { + @Input() date: Date = new Date(); // The current date for our view. + @Input() events: Event[] = []; // All events for the calendar. + @Input() loading: boolean = false; // - @Input() date: Date = new Date(); // The current date for our view. - @Input() events: Event[] = []; // All events for the calendar. - @Input() loading: boolean = false; // - - dates: ICalendarDate[] = []; // The days for the current view. - datesPaddingPre: ICalendarDate[] = []; // Any days before the month that should be rendered. - datesPaddingPost: ICalendarDate[] = []; // Any days after the month that should be rendered. + dates: ICalendarDate[] = []; // The days for the current view. + datesPaddingPre: ICalendarDate[] = []; // Any days before the month that should be rendered. + datesPaddingPost: ICalendarDate[] = []; // Any days after the month that should be rendered. weekdays: ICalendarWeekDay[] = []; searchActive: boolean = false; eventFormActive: boolean = false; - activeDayIndex = -1; // The active day (user selected) + activeDayIndex = -1; // The active day (user selected) editEventId: string | null = null; eventFormGroup: FormGroup = new FormGroup({}); @@ -56,27 +75,26 @@ export class CalendarComponent implements OnInit, OnChanges, OnDestroy { calendarStyle = { 'grid-template-rows': 'repeat(5, 75px)', 'grid-template-columns': 'revert-layer', - 'grid-row-gap': '15px' - } + 'grid-row-gap': '15px', + }; TooltipDirection = TooltipDirection; private resizeSub!: Subscription; private prevWeekdayFormat: WeekdayFormat = WeekdayFormat.Full; - constructor(public translations: Translations, - private changeDetectorRef: ChangeDetectorRef, - private resizeService: ResizeService, - private debounceService: DebounceService, - private elementRef: ElementRef) { - - } + constructor( + public translations: Translations, + private changeDetectorRef: ChangeDetectorRef, + private resizeService: ResizeService, + private debounceService: DebounceService, + private elementRef: ElementRef + ) {} ngOnInit(): void { // Setup resize subscription to track the width of the component this.resizeSub = this.resizeService.resizeEvent.subscribe(() => { this.debounceService.debounce(() => { - // Update the weekday format (short/long) depending on the width const newWeekdayFormat = this.buildWeekDays(); if (this.prevWeekdayFormat !== newWeekdayFormat) { @@ -99,7 +117,6 @@ export class CalendarComponent implements OnInit, OnChanges, OnDestroy { break; } } - } ngOnChanges(changes: SimpleChanges): void { @@ -109,8 +126,7 @@ export class CalendarComponent implements OnInit, OnChanges, OnDestroy { } ngOnDestroy(): void { - if (this.resizeSub) - this.resizeSub.unsubscribe(); + if (this.resizeSub) this.resizeSub.unsubscribe(); } navigateCalendar(interval: number = 1, clickedDay: ICalendarDate | undefined = undefined): void { @@ -159,12 +175,11 @@ export class CalendarComponent implements OnInit, OnChanges, OnDestroy { break; } } - } - else { + } else { const highestId = this.events.reduce((highestId, event) => { const currentId = parseInt(event.id); return currentId > parseInt(highestId) ? event.id : highestId; - }, "-1"); + }, '-1'); const newId = (parseInt(highestId) + 1).toString(); @@ -173,7 +188,7 @@ export class CalendarComponent implements OnInit, OnChanges, OnDestroy { } this.eventFormActive = false; - } + }; eventFormValid(): boolean { let allControlsValid = true; @@ -188,11 +203,11 @@ export class CalendarComponent implements OnInit, OnChanges, OnDestroy { toggleEventForm = () => { this.eventFormActive = !this.eventFormActive; - } + }; toggleSearch = () => { this.searchActive = !this.searchActive; - } + }; private buildWeekDays(): WeekdayFormat { const today = new Date(); @@ -210,27 +225,27 @@ export class CalendarComponent implements OnInit, OnChanges, OnDestroy { } private buildView(clickedDay: ICalendarDate | undefined = undefined): void { - this.datesPaddingPre = []; - this.datesPaddingPost = [] + this.datesPaddingPre = []; + this.datesPaddingPost = []; this.dates = []; this.activeDayIndex = -1; // Create days for each day of the month const daysMonth = getDaysInMonth(this.date); - for (let i = 0 ; i < daysMonth; i++) { - this.dates.push({ date: new Date(this.date.getFullYear() , this.date.getMonth(), i + 1), events: [] }); + for (let i = 0; i < daysMonth; i++) { + this.dates.push({ date: new Date(this.date.getFullYear(), this.date.getMonth(), i + 1), events: [] }); } - + // Create any days for the previous month that are in the first week row const daysBeforeMonth = startOfMonth(this.date).getDay(); - for (let i = 0 ; i < daysBeforeMonth; i++) { + for (let i = 0; i < daysBeforeMonth; i++) { this.datesPaddingPre.push({ date: subDays(startOfMonth(this.date), i + 1), events: [] }); } this.datesPaddingPre.reverse(); - + // Create any days for the next month that are in the final week row const daysAfterMonth = (daysMonth + daysBeforeMonth > 35 ? 42 : 35) - daysMonth - daysBeforeMonth; - for (let i = 0 ; i < daysAfterMonth; i++) { + for (let i = 0; i < daysAfterMonth; i++) { this.datesPaddingPost.push({ date: addDays(addMonths(startOfMonth(this.date), 1), i), events: [] }); } @@ -243,35 +258,38 @@ export class CalendarComponent implements OnInit, OnChanges, OnDestroy { this.calendarStyle = { 'grid-template-rows': 'repeat(' + (daysMonth + daysBeforeMonth + daysAfterMonth) / 7 + ', 75px)', 'grid-template-columns': 'revert-layer', - 'grid-row-gap': '15px' + 'grid-row-gap': '15px', }; this.injectEvents(); - if (clickedDay) - this.setDayActive(clickedDay); + if (clickedDay) this.setDayActive(clickedDay); } private injectEvents(): void { const allDays = this.datesPaddingPre.concat(this.dates, this.datesPaddingPost); - allDays.forEach(day => {day.events = [];}); + allDays.forEach(day => { + day.events = []; + }); let i = this.events.length; while (i--) { allDays.forEach(day => { try { - const eventStartsEndsToday = isWithinInterval(this.events[i].startDate, {start: startOfDay(day.date), end: endOfDay(day.date)}) && - isWithinInterval(this.events[i].endDate, {start: startOfDay(day.date), end: endOfDay(day.date)}); + const eventStartsEndsToday = + isWithinInterval(this.events[i].startDate, { start: startOfDay(day.date), end: endOfDay(day.date) }) && + isWithinInterval(this.events[i].endDate, { start: startOfDay(day.date), end: endOfDay(day.date) }); - const eventSpansDay = isWithinInterval(endOfDay(day.date), {start: this.events[i].startDate, end: this.events[i].endDate}) || - isWithinInterval(startOfDay(day.date), {start: this.events[i].startDate, end: this.events[i].endDate}); + const eventSpansDay = + isWithinInterval(endOfDay(day.date), { start: this.events[i].startDate, end: this.events[i].endDate }) || + isWithinInterval(startOfDay(day.date), { start: this.events[i].startDate, end: this.events[i].endDate }); if (eventStartsEndsToday || eventSpansDay) { day.events.push(this.events[i]); } - } catch(e) { + } catch (e) { // Start/End Date incompatible so don't add it. - } + } }); } @@ -312,5 +330,5 @@ export class CalendarComponent implements OnInit, OnChanges, OnDestroy { enum WeekdayFormat { Full = 'full', - Short = 'short' -} \ No newline at end of file + Short = 'short', +} diff --git a/src/app/features/calendar/calendar.module.ts b/src/app/features/calendar/calendar.module.ts index 9d1eaab3..5d82d885 100644 --- a/src/app/features/calendar/calendar.module.ts +++ b/src/app/features/calendar/calendar.module.ts @@ -1,37 +1,20 @@ -import { NgModule } from '@angular/core'; -import { CommonModule } from '@angular/common'; -import { SharedModule } from 'src/app/shared/shared.module'; -import { CalendarComponent } from './calendar.component'; -import { CalendarDayComponent } from './components/calendar-day/calendar-day.component'; -import { CalendarEventsComponent } from './components/calendar-events/calendar-events.component'; -import { CalendarSearchComponent } from './components/calendar-search/calendar-search.component'; -import { EventsModule } from '../events/events.module'; - -import { MatCardModule } from '@angular/material/card'; -import { MatExpansionModule } from '@angular/material/expansion'; -import { MatSlideToggleModule } from '@angular/material/slide-toggle'; -import { FormsModule, ReactiveFormsModule } from '@angular/forms'; - - -@NgModule({ - declarations: [ - CalendarComponent, - CalendarDayComponent, - CalendarEventsComponent, - CalendarSearchComponent - ], - imports: [ - CommonModule, - SharedModule, - FormsModule, - ReactiveFormsModule, - EventsModule, - MatCardModule, - MatExpansionModule, - MatSlideToggleModule - ], - exports: [ - CalendarComponent, - ], -}) -export class CalendarModule {} \ No newline at end of file +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { SharedModule } from 'src/app/shared/shared.module'; +import { CalendarComponent } from './calendar.component'; +import { CalendarDayComponent } from './components/calendar-day/calendar-day.component'; +import { CalendarEventsComponent } from './components/calendar-events/calendar-events.component'; +import { CalendarSearchComponent } from './components/calendar-search/calendar-search.component'; +import { EventsModule } from '../events/events.module'; + +import { MatCardModule } from '@angular/material/card'; +import { MatExpansionModule } from '@angular/material/expansion'; +import { MatSlideToggleModule } from '@angular/material/slide-toggle'; +import { FormsModule, ReactiveFormsModule } from '@angular/forms'; + +@NgModule({ + declarations: [CalendarComponent, CalendarDayComponent, CalendarEventsComponent, CalendarSearchComponent], + imports: [CommonModule, SharedModule, FormsModule, ReactiveFormsModule, EventsModule, MatCardModule, MatExpansionModule, MatSlideToggleModule], + exports: [CalendarComponent], +}) +export class CalendarModule {} diff --git a/src/app/features/calendar/components/calendar-day/calendar-day.component.html b/src/app/features/calendar/components/calendar-day/calendar-day.component.html index 8d92f89e..4002c521 100644 --- a/src/app/features/calendar/components/calendar-day/calendar-day.component.html +++ b/src/app/features/calendar/components/calendar-day/calendar-day.component.html @@ -1,23 +1,26 @@ -
- -
- -
-
-
- {{ calendarDate.date | date : 'd' }} -
-
-
+
+
+
+
-
+ {{ calendarDate.date | date: 'd' }}
+
+
+ +
+
+
- -
\ No newline at end of file + +
diff --git a/src/app/features/calendar/components/calendar-day/calendar-day.component.scss b/src/app/features/calendar/components/calendar-day/calendar-day.component.scss index 97759c12..0aeeef33 100644 --- a/src/app/features/calendar/components/calendar-day/calendar-day.component.scss +++ b/src/app/features/calendar/components/calendar-day/calendar-day.component.scss @@ -1,97 +1,97 @@ -@import "../../../../../assets/scss/partials/colors"; -$transition-speed: .15s; - -.day-wrapper { - width: 100%; - height: 100%; - display: flex; - flex-direction: column; - outline: none !important; - - .day-number { - display: flex; - flex-direction: column; - align-items: center; - width: 39px; - height: 39px; - margin: auto; - border: 3px solid transparent; - border-radius: 12px; - color: black; - flex: 2; - cursor: default; - } - - .event { - background-color: $neutral-600; - border-radius: 20px; - width: 38px; - height: 5px; - margin: auto; - transition: background-color $transition-speed; - } -} - -.currentDay, -.currentDay.active { - .day-number { - font-weight: 600; - background: $secondary-2-gradient; - color: white; - border: none; - } -} - -.active { - .event { - background-color: $primary-2 !important; - } -} - -.active:not(.currentDay) { - .day-number { - background: white; - border: 3px solid $secondary-2-dark; - } -} - -.outsideOfMonth { - .day-number { - color: $neutral-300; - } - .event { - background-color: $neutral-300 !important; - } -} - -.outsideOfMonth.currentDay { - .day-number { - background: $neutral-200 !important; - } -} - -.day-wrapper:hover:not(.active), -.day-wrapper:focus-visible:not(.active) { - .day-number { - border-color: $neutral-300; - } -} - -.day-wrapper.loading { - ngx-skeleton-loader { - height: 100%; - ::ng-deep { - >div { - height: 100%; - border-radius: 15px; - border: 2px solid white; - } - } - } -} - -.flex-align { - flex: 1; - display: flex; - align-items: center; -} \ No newline at end of file +@import '../../../../../assets/scss/partials/colors'; +$transition-speed: 0.15s; + +.day-wrapper { + width: 100%; + height: 100%; + display: flex; + flex-direction: column; + outline: none !important; + + .day-number { + display: flex; + flex-direction: column; + align-items: center; + width: 39px; + height: 39px; + margin: auto; + border: 3px solid transparent; + border-radius: 12px; + color: black; + flex: 2; + cursor: default; + } + + .event { + background-color: $neutral-600; + border-radius: 20px; + width: 38px; + height: 5px; + margin: auto; + transition: background-color $transition-speed; + } +} + +.currentDay, +.currentDay.active { + .day-number { + font-weight: 600; + background: $secondary-2-gradient; + color: white; + border: none; + } +} + +.active { + .event { + background-color: $primary-2 !important; + } +} + +.active:not(.currentDay) { + .day-number { + background: white; + border: 3px solid $secondary-2-dark; + } +} + +.outsideOfMonth { + .day-number { + color: $neutral-300; + } + .event { + background-color: $neutral-300 !important; + } +} + +.outsideOfMonth.currentDay { + .day-number { + background: $neutral-200 !important; + } +} + +.day-wrapper:hover:not(.active), +.day-wrapper:focus-visible:not(.active) { + .day-number { + border-color: $neutral-300; + } +} + +.day-wrapper.loading { + ngx-skeleton-loader { + height: 100%; + ::ng-deep { + > div { + height: 100%; + border-radius: 15px; + border: 2px solid white; + } + } + } +} + +.flex-align { + flex: 1; + display: flex; + align-items: center; +} diff --git a/src/app/features/calendar/components/calendar-day/calendar-day.component.spec.ts b/src/app/features/calendar/components/calendar-day/calendar-day.component.spec.ts index 62bf4437..af729960 100644 --- a/src/app/features/calendar/components/calendar-day/calendar-day.component.spec.ts +++ b/src/app/features/calendar/components/calendar-day/calendar-day.component.spec.ts @@ -10,7 +10,7 @@ describe('CalendarDayComponent', () => { beforeEach(() => { TestBed.configureTestingModule({ declarations: [CalendarDayComponent], - imports: [DatePipe] + imports: [DatePipe], }); fixture = TestBed.createComponent(CalendarDayComponent); component = fixture.componentInstance; diff --git a/src/app/features/calendar/components/calendar-day/calendar-day.component.ts b/src/app/features/calendar/components/calendar-day/calendar-day.component.ts index 6c59c240..52107914 100644 --- a/src/app/features/calendar/components/calendar-day/calendar-day.component.ts +++ b/src/app/features/calendar/components/calendar-day/calendar-day.component.ts @@ -9,10 +9,10 @@ import { CoreRoutes } from 'src/app/core/constants/routes.constants'; selector: 'app-calendar-day', templateUrl: './calendar-day.component.html', styleUrls: ['./calendar-day.component.scss'], - changeDetection: ChangeDetectionStrategy.OnPush + changeDetection: ChangeDetectionStrategy.OnPush, }) export class CalendarDayComponent implements OnInit, DoCheck, OnChanges { - @Input({required: true}) calendarDate: ICalendarDate = { date: new Date(), events: [] }; + @Input({ required: true }) calendarDate: ICalendarDate = { date: new Date(), events: [] }; @Input() outsideOfMonth: boolean = false; @Input() active: boolean = false; @Input() loading: boolean = false; @@ -23,9 +23,11 @@ export class CalendarDayComponent implements OnInit, DoCheck, OnChanges { private iterableDifferEvents: IterableDiffer; - constructor(private iterableDiffers: IterableDiffers, - private changeDetectorRef: ChangeDetectorRef, - private router: Router) { + constructor( + private iterableDiffers: IterableDiffers, + private changeDetectorRef: ChangeDetectorRef, + private router: Router + ) { this.iterableDifferEvents = iterableDiffers.find(this.calendarDate.events).create(); } @@ -53,7 +55,7 @@ export class CalendarDayComponent implements OnInit, DoCheck, OnChanges { } routeToEvent(eventId: string, event: MouseEvent | KeyboardEvent) { - if (eventId && (event.type === 'click' || (event instanceof KeyboardEvent && (event.code === 'Enter' || event.code === 'NumpadEnter' || event.code === 'Space')))) + if (eventId && (event.type === 'click' || (event instanceof KeyboardEvent && (event.code === 'Enter' || event.code === 'NumpadEnter' || event.code === 'Space')))) this.router.navigateByUrl(CoreRoutes.Events + '/' + eventId); } @@ -61,11 +63,13 @@ export class CalendarDayComponent implements OnInit, DoCheck, OnChanges { // Sort events by the start date this.calendarDate.events.sort((a, b) => a.startDate.getTime() - b.startDate.getTime()); - // Move any events that start and end today to the back of the list + // Move any events that start and end today to the back of the list for (let i = this.calendarDate.events.length - 1; i >= 0; i--) { - if (isWithinInterval(this.calendarDate.events[i].startDate, {start: startOfDay(this.calendarDate.date), end: endOfDay(this.calendarDate.date)}) && - isWithinInterval(this.calendarDate.events[i].endDate, {start: startOfDay(this.calendarDate.date), end: endOfDay(this.calendarDate.date)})) { - this.calendarDate.events.push(this.calendarDate.events.splice(i, 1)[0]); + if ( + isWithinInterval(this.calendarDate.events[i].startDate, { start: startOfDay(this.calendarDate.date), end: endOfDay(this.calendarDate.date) }) && + isWithinInterval(this.calendarDate.events[i].endDate, { start: startOfDay(this.calendarDate.date), end: endOfDay(this.calendarDate.date) }) + ) { + this.calendarDate.events.push(this.calendarDate.events.splice(i, 1)[0]); } } } @@ -75,4 +79,4 @@ export class CalendarDayComponent implements OnInit, DoCheck, OnChanges { this.currentDay = isSameDay(this.calendarDate.date, today); this.changeDetectorRef.markForCheck(); } -} \ No newline at end of file +} diff --git a/src/app/features/calendar/components/calendar-events/calendar-events.component.html b/src/app/features/calendar/components/calendar-events/calendar-events.component.html index 262b09d7..07087b66 100644 --- a/src/app/features/calendar/components/calendar-events/calendar-events.component.html +++ b/src/app/features/calendar/components/calendar-events/calendar-events.component.html @@ -1,82 +1,76 @@ - - - {{ isToday(calendarDate.date) ? 'Today\'s Events' : 'Events on ' + (calendarDate.date | localizedDate) }} - - - - @for (event of calendarDate.events; track $index) { -
-
-
-
- {{ event.startDate | localizedDate: 'MMM d' | titlecase }} -
-
-
- {{ event.startDate | date: 'h:mm' }} -
-
- {{ event.startDate | date: 'a' }} -
-
-
-
- -
-
-
-
- {{ event.endDate | date: 'h:mm' }} -
-
- {{ event.endDate | date: 'a' }} -
-
-
- {{ event.endDate | localizedDate: 'MMM d' | titlecase }} -
-
-
- -
 
- -
-
- {{ event.title }} -
-
- {{ event.eventType }} -
-
- {{ event.location.address }}, {{event.location.city}}, {{event.location.province}} -
-
- -
- - - - - - - - - -
-
- } @empty { -
- There are no events. -
- } - - \ No newline at end of file + + + {{ isToday(calendarDate.date) ? "Today's Events" : 'Events on ' + (calendarDate.date | localizedDate) }} + + + + @for (event of calendarDate.events; track $index) { +
+
+
+
+ {{ event.startDate | localizedDate: 'MMM d' | titlecase }} +
+
+
+ {{ event.startDate | date: 'h:mm' }} +
+
+ {{ event.startDate | date: 'a' }} +
+
+
+
+ +
+
+
+
+ {{ event.endDate | date: 'h:mm' }} +
+
+ {{ event.endDate | date: 'a' }} +
+
+
+ {{ event.endDate | localizedDate: 'MMM d' | titlecase }} +
+
+
+ +
 
+ +
+
+ {{ event.title }} +
+
+ {{ event.eventType }} +
+
{{ event.location.address }}, {{ event.location.city }}, {{ event.location.province }}
+
+ +
+ + + + + + + + + +
+
+ } @empty { +
There are no events.
+ } + + diff --git a/src/app/features/calendar/components/calendar-events/calendar-events.component.scss b/src/app/features/calendar/components/calendar-events/calendar-events.component.scss index 921dc071..eb90342e 100644 --- a/src/app/features/calendar/components/calendar-events/calendar-events.component.scss +++ b/src/app/features/calendar/components/calendar-events/calendar-events.component.scss @@ -1,113 +1,114 @@ -@import "../../../../../assets/scss/partials/colors"; - -mat-card { - background-color: $neutral-100; - box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); -} - -mat-card-header { - font-size: 28px; - font-weight: 600; - padding: 16px -} - -mat-card-content { - display: flex; - flex-direction: column; - - .event { - display: flex; - align-items: center; - flex-direction: row; - border-radius: 10px; - padding: 12px; - font-size: 20px; - box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); - border: 1px solid $neutral-100; - - .date-time-wrapper { - display: flex; - flex-direction: column; - padding: 0 10px; - - .date-time { - display: flex; - align-items: center; - flex-direction: column; - - .date { - display: flex; - font-weight: 600; - } - - .time { - display: flex; - flex-direction: row; - align-items: center; - font-weight: 800; - gap: 2px; - - .hr { - font-size: 26px; - } - - .hr, .min { - display: flex; - flex-direction: row; - } - } - } - - .until { - align-self: center; - } - } - - .seperator { - border-radius: 10px; - background: $secondary-2-gradient; - margin: 0 16px; - align-self: stretch; - } - - .info { - flex: 4; - flex-direction: column; - - div:not(:last-child) { - padding-bottom: 5px; - } - } - - .actions { - display: flex; - flex: .1; - align-items: center; - - ::ng-deep { - app-input mat-label, - app-input .mat-mdc-form-field-subscript-wrapper, - .mat-mdc-button-persistent-ripple, - .mat-mdc-button-ripple { - display: none; - } - - .delete-btn:hover i, - .delete-btn .cdk-focused { - color: $error-red !important; - } - } - } - } - - .event:hover, - .event:focus-visible { - outline: none; - box-shadow: 0px 4px 4px $secondary-2; - border: 1px solid $secondary-2; - } - - .event:not(:last-child) { - margin-bottom: 16px; - } -} \ No newline at end of file +@import '../../../../../assets/scss/partials/colors'; + +mat-card { + background-color: $neutral-100; + box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); +} + +mat-card-header { + font-size: 28px; + font-weight: 600; + padding: 16px; +} + +mat-card-content { + display: flex; + flex-direction: column; + + .event { + display: flex; + align-items: center; + flex-direction: row; + border-radius: 10px; + padding: 12px; + font-size: 20px; + box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); + border: 1px solid $neutral-100; + + .date-time-wrapper { + display: flex; + flex-direction: column; + padding: 0 10px; + + .date-time { + display: flex; + align-items: center; + flex-direction: column; + + .date { + display: flex; + font-weight: 600; + } + + .time { + display: flex; + flex-direction: row; + align-items: center; + font-weight: 800; + gap: 2px; + + .hr { + font-size: 26px; + } + + .hr, + .min { + display: flex; + flex-direction: row; + } + } + } + + .until { + align-self: center; + } + } + + .seperator { + border-radius: 10px; + background: $secondary-2-gradient; + margin: 0 16px; + align-self: stretch; + } + + .info { + flex: 4; + flex-direction: column; + + div:not(:last-child) { + padding-bottom: 5px; + } + } + + .actions { + display: flex; + flex: 0.1; + align-items: center; + + ::ng-deep { + app-input mat-label, + app-input .mat-mdc-form-field-subscript-wrapper, + .mat-mdc-button-persistent-ripple, + .mat-mdc-button-ripple { + display: none; + } + + .delete-btn:hover i, + .delete-btn .cdk-focused { + color: $error-red !important; + } + } + } + } + + .event:hover, + .event:focus-visible { + outline: none; + box-shadow: 0px 4px 4px $secondary-2; + border: 1px solid $secondary-2; + } + + .event:not(:last-child) { + margin-bottom: 16px; + } +} diff --git a/src/app/features/calendar/components/calendar-events/calendar-events.component.ts b/src/app/features/calendar/components/calendar-events/calendar-events.component.ts index 5d831d9d..bf53f5f4 100644 --- a/src/app/features/calendar/components/calendar-events/calendar-events.component.ts +++ b/src/app/features/calendar/components/calendar-events/calendar-events.component.ts @@ -1,40 +1,42 @@ -import { Component, ChangeDetectionStrategy, Input, Output, EventEmitter, IterableDiffers, ChangeDetectorRef, IterableDiffer, DoCheck } from '@angular/core'; -import { ICalendarDate } from '../../interfaces/calendar-date.interface'; -import { Event } from 'src/app/features/events/models/event'; -import { isToday } from 'date-fns'; - -@Component({ - selector: 'app-calendar-events', - templateUrl: './calendar-events.component.html', - styleUrls: ['./calendar-events.component.scss'], - changeDetection: ChangeDetectionStrategy.OnPush -}) -export class CalendarEventsComponent implements DoCheck { - @Input({required: true}) calendarDate: ICalendarDate = { date: new Date(), events: [] }; - - @Output() eventEdit: EventEmitter = new EventEmitter(); - @Output() eventDelete: EventEmitter = new EventEmitter(); - - isToday = isToday; - - private iterableDifferEvents: IterableDiffer; - - constructor(private iterableDiffers: IterableDiffers, - private changeDetectorRef: ChangeDetectorRef) { - this.iterableDifferEvents = iterableDiffers.find(this.calendarDate.events).create(); - } - - ngDoCheck() { - if (this.iterableDifferEvents.diff(this.calendarDate.events)) { - this.changeDetectorRef.markForCheck(); - } - } - - editEvent(event: Event) { - this.eventEdit.emit(event); - } - - deleteEvent(event: Event) { - this.eventDelete.emit(event); - } -} \ No newline at end of file +import { Component, ChangeDetectionStrategy, Input, Output, EventEmitter, IterableDiffers, ChangeDetectorRef, IterableDiffer, DoCheck } from '@angular/core'; +import { ICalendarDate } from '../../interfaces/calendar-date.interface'; +import { Event } from 'src/app/features/events/models/event'; +import { isToday } from 'date-fns'; + +@Component({ + selector: 'app-calendar-events', + templateUrl: './calendar-events.component.html', + styleUrls: ['./calendar-events.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class CalendarEventsComponent implements DoCheck { + @Input({ required: true }) calendarDate: ICalendarDate = { date: new Date(), events: [] }; + + @Output() eventEdit: EventEmitter = new EventEmitter(); + @Output() eventDelete: EventEmitter = new EventEmitter(); + + isToday = isToday; + + private iterableDifferEvents: IterableDiffer; + + constructor( + private iterableDiffers: IterableDiffers, + private changeDetectorRef: ChangeDetectorRef + ) { + this.iterableDifferEvents = iterableDiffers.find(this.calendarDate.events).create(); + } + + ngDoCheck() { + if (this.iterableDifferEvents.diff(this.calendarDate.events)) { + this.changeDetectorRef.markForCheck(); + } + } + + editEvent(event: Event) { + this.eventEdit.emit(event); + } + + deleteEvent(event: Event) { + this.eventDelete.emit(event); + } +} diff --git a/src/app/features/calendar/components/calendar-search/calendar-search.component.html b/src/app/features/calendar/components/calendar-search/calendar-search.component.html index b4ced55d..3ad9185f 100644 --- a/src/app/features/calendar/components/calendar-search/calendar-search.component.html +++ b/src/app/features/calendar/components/calendar-search/calendar-search.component.html @@ -1,54 +1,50 @@ - - - - @for (event of filteredEvents; track $index) { - - - - -
-
- {{ event.title }} -
-
- {{ event.eventType }} -
-
- - - {{ event.startDate | localizedDate: 'MMM d' | titlecase }}, {{ event.startDate | date: 'h:mm a' }} - {{ event.endDate | localizedDate: 'MMM d' | titlecase }}, {{ event.endDate | date: 'h:mm a' }} - - - - - - - - } @empty { -
- @if (search !== "") { - There are {{ showAll ? 'no events' : ('no events in ' + (this.date | localizedDate : 'MMMM YYYY' | titlecase)) }} that match your search. - } @else { - Begin typing to search for events. - } -
- } - - - \ No newline at end of file + + + + @for (event of filteredEvents; track $index) { + + + + +
+
+ {{ event.title }} +
+
+ {{ event.eventType }} +
+
+ + + {{ event.startDate | localizedDate: 'MMM d' | titlecase }}, {{ event.startDate | date: 'h:mm a' }} - {{ event.endDate | localizedDate: 'MMM d' | titlecase }}, + {{ event.endDate | date: 'h:mm a' }} + + + + + + + + } @empty { +
+ @if (search !== '') { + There are {{ showAll ? 'no events' : 'no events in ' + (this.date | localizedDate: 'MMMM YYYY' | titlecase) }} that match your search. + } @else { + Begin typing to search for events. + } +
+ } + + diff --git a/src/app/features/calendar/components/calendar-search/calendar-search.component.scss b/src/app/features/calendar/components/calendar-search/calendar-search.component.scss index a8df3c18..ff9b4e33 100644 --- a/src/app/features/calendar/components/calendar-search/calendar-search.component.scss +++ b/src/app/features/calendar/components/calendar-search/calendar-search.component.scss @@ -1,142 +1,141 @@ -@import "../../../../../assets/scss/partials/colors"; - -:host { - display: block; - - mat-card { - border-radius: 12px; - box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); - background-color: $neutral-100; - - form { - display: flex; - flex-direction: row; - align-items: center; - padding-bottom: 3px; - - app-input { - flex: 1; - - ::ng-deep { - .mat-mdc-form-field-subscript-wrapper { - display: none; - } - } - } - - mat-slide-toggle { - padding: 0 15px; - } - } - - - } - - mat-expansion-panel { - background-color: inherit; - - mat-expansion-panel-header { - height: 100%; - - mat-panel-title { - app-calendar-button { - min-width: 50px; - height: 50px; - padding-right: 24px; - } - - .event-title { - padding: 15px 0; - } - } - } - - app-event{ - ::ng-deep { - #gcc-event-register-jump-btn { - display: none; - } - - app-banner { - width: 100%; - margin-left: 0; - margin-top: 0; - - .banner { - border-radius: 20px; - height: fit-content; - } - } - - app-calendar-button { - margin-left: 35px; - - .event-calendar { - div:last-child { - margin-top: 20px; - } - } - } - - form { - display: none; - } - - .page-container { - .event-info { - i { - margin-top: unset !important; - } - } - } - } - } - } - - mat-expansion-panel:not(:hover), - mat-expansion-panel:not([class*=mat-elevation-z]) { - box-shadow: 0 4px 2px -2px $neutral-200; - } - - mat-expansion-panel.mat-expanded { - padding-top: 15px; - box-shadow: 0 4px 2px -2px $neutral-200; - - mat-expansion-panel-header { - padding-bottom: 15px; - } - } - - mat-expansion-panel:not(.mat-expanded) { - height: fit-content; - - mat-expansion-panel-header:hover { - box-shadow: inset 0px 0px 0px 2px $secondary-2; - cursor: pointer; - } - } - - mat-expansion-panel:first-child { - border-top-left-radius: 10px; - border-top-right-radius: 10px; - } - - mat-expansion-panel:last-child { - border-bottom-left-radius: 10px; - border-bottom-right-radius: 10px; - } - - ::ng-deep { - .mat-expansion-panel:not(.mat-expanded) .mat-expansion-panel-header:hover:not([aria-disabled=true]) { - background: transparent !important; - } - .mat-expansion-panel-header.mat-expanded:focus, .mat-expansion-panel-header.mat-expanded:hover { - background: transparent; - } - } - - .empty { - padding: 15px; - font-size: 14px; - } -} \ No newline at end of file +@import '../../../../../assets/scss/partials/colors'; + +:host { + display: block; + + mat-card { + border-radius: 12px; + box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); + background-color: $neutral-100; + + form { + display: flex; + flex-direction: row; + align-items: center; + padding-bottom: 3px; + + app-input { + flex: 1; + + ::ng-deep { + .mat-mdc-form-field-subscript-wrapper { + display: none; + } + } + } + + mat-slide-toggle { + padding: 0 15px; + } + } + } + + mat-expansion-panel { + background-color: inherit; + + mat-expansion-panel-header { + height: 100%; + + mat-panel-title { + app-calendar-button { + min-width: 50px; + height: 50px; + padding-right: 24px; + } + + .event-title { + padding: 15px 0; + } + } + } + + app-event { + ::ng-deep { + #gcc-event-register-jump-btn { + display: none; + } + + app-banner { + width: 100%; + margin-left: 0; + margin-top: 0; + + .banner { + border-radius: 20px; + height: fit-content; + } + } + + app-calendar-button { + margin-left: 35px; + + .event-calendar { + div:last-child { + margin-top: 20px; + } + } + } + + form { + display: none; + } + + .page-container { + .event-info { + i { + margin-top: unset !important; + } + } + } + } + } + } + + mat-expansion-panel:not(:hover), + mat-expansion-panel:not([class*='mat-elevation-z']) { + box-shadow: 0 4px 2px -2px $neutral-200; + } + + mat-expansion-panel.mat-expanded { + padding-top: 15px; + box-shadow: 0 4px 2px -2px $neutral-200; + + mat-expansion-panel-header { + padding-bottom: 15px; + } + } + + mat-expansion-panel:not(.mat-expanded) { + height: fit-content; + + mat-expansion-panel-header:hover { + box-shadow: inset 0px 0px 0px 2px $secondary-2; + cursor: pointer; + } + } + + mat-expansion-panel:first-child { + border-top-left-radius: 10px; + border-top-right-radius: 10px; + } + + mat-expansion-panel:last-child { + border-bottom-left-radius: 10px; + border-bottom-right-radius: 10px; + } + + ::ng-deep { + .mat-expansion-panel:not(.mat-expanded) .mat-expansion-panel-header:hover:not([aria-disabled='true']) { + background: transparent !important; + } + .mat-expansion-panel-header.mat-expanded:focus, + .mat-expansion-panel-header.mat-expanded:hover { + background: transparent; + } + } + + .empty { + padding: 15px; + font-size: 14px; + } +} diff --git a/src/app/features/calendar/components/calendar-search/calendar-search.component.ts b/src/app/features/calendar/components/calendar-search/calendar-search.component.ts index 7001ae72..58854fd4 100644 --- a/src/app/features/calendar/components/calendar-search/calendar-search.component.ts +++ b/src/app/features/calendar/components/calendar-search/calendar-search.component.ts @@ -1,119 +1,119 @@ -import { Component, ChangeDetectionStrategy, Input, OnInit, OnDestroy, IterableDiffer, DoCheck, ChangeDetectorRef, IterableDiffers, ViewChild } from '@angular/core'; -import { FormControl, FormGroup } from '@angular/forms'; -import { Subscription } from 'rxjs'; -import { Event } from 'src/app/features/events/models/event'; -import { DebounceService } from 'src/app/core/services/debounce.service'; -import { MatSlideToggleChange } from '@angular/material/slide-toggle'; -import { MatAccordion } from '@angular/material/expansion'; -//import { isWithinInterval, startOfMonth, endOfMonth } from 'date-fns'; - -@Component({ - selector: 'app-calendar-search', - templateUrl: './calendar-search.component.html', - styleUrls: ['./calendar-search.component.scss'], - changeDetection: ChangeDetectionStrategy.OnPush -}) -export class CalendarSearchComponent implements OnInit, OnDestroy, DoCheck { - @Input({ required: true }) date: Date = new Date(); - @Input({ required: true }) events: Event[] = []; - @Input() model: ICalendarSearchForm = { - calendarSearch: '' - }; - @ViewChild(MatAccordion) accordion!: MatAccordion; - - search: string = this.model.calendarSearch; - form: FormGroup = new FormGroup({}); - formWatchSub!: Subscription; - - filteredEvents: Event[] = []; - showAll: boolean = false; - - private iterableDifferEvents: IterableDiffer; - - // TODO: Paginate the accordion items. mat-paginator? - constructor(private iterableDiffers: IterableDiffers, - private changeDetectorRef: ChangeDetectorRef, - private debouncerService: DebounceService) { - this.iterableDifferEvents = iterableDiffers.find(this.events).create(); - } - - ngOnInit(): void { - for (const [key, value] of Object.entries(this.model)) { - if (!this.form.controls[key]) { - this.form.addControl(key, new FormControl(value, /*[Validators.required]*/)); - } else { - this.form.controls[key].setValue(value); - } - } - - this.formWatchSub = this.form.valueChanges.subscribe((value) => { - this.debouncerService.debounce(() => { - this.search = value['calendarSearch']; - this.searchEvents(this.search); - }, 300); - }); - - this.onEventsChange(); - } - - ngDoCheck() { - if (this.iterableDifferEvents.diff(this.events)) { - this.changeDetectorRef.markForCheck(); - } - } - - ngOnDestroy(): void { - if (this.formWatchSub) - this.formWatchSub.unsubscribe(); - } - - setShowAll(change: MatSlideToggleChange): void { - this.showAll = change.checked; - - if (this.showAll) { - this.filteredEvents = this.events; - this.filteredEvents.sort(this.sortFn); - } - else { - this.searchEvents(this.search); - } - - this.accordion.closeAll(); - } - - // TODO: If show all off, only search for the selected month's events - private searchEvents(value: string): void { - this.showAll = false - this.filteredEvents = []; - value = value.toLowerCase().trim(); - - if (value !== "") { - for (let i = 0; i < this.events.length; i++) { - - // if (this.showAll === false && !isWithinInterval(startOfMonth(this.date), {start: startOfMonth(this.events[i].startDate), end: endOfMonth(this.events[i].endDate)})) - // continue; - - if (this.events[i].title.toLowerCase().includes(value) || - this.events[i].organizer.toLowerCase().includes(value) || - this.events[i].eventType.toLowerCase().includes(value) || - this.events[i].description.toLowerCase().includes(value) - ) { - this.filteredEvents.push(this.events[i]); - } - } - this.filteredEvents.sort(this.sortFn); - } - - this.changeDetectorRef.markForCheck(); - } - - private onEventsChange() { - // What do we need to do here? - } - - private sortFn = (a: Event, b: Event) => a.startDate.getTime() - b.startDate.getTime(); -} - -interface ICalendarSearchForm { - calendarSearch: string -} \ No newline at end of file +import { Component, ChangeDetectionStrategy, Input, OnInit, OnDestroy, IterableDiffer, DoCheck, ChangeDetectorRef, IterableDiffers, ViewChild } from '@angular/core'; +import { FormControl, FormGroup } from '@angular/forms'; +import { Subscription } from 'rxjs'; +import { Event } from 'src/app/features/events/models/event'; +import { DebounceService } from 'src/app/core/services/debounce.service'; +import { MatSlideToggleChange } from '@angular/material/slide-toggle'; +import { MatAccordion } from '@angular/material/expansion'; +//import { isWithinInterval, startOfMonth, endOfMonth } from 'date-fns'; + +@Component({ + selector: 'app-calendar-search', + templateUrl: './calendar-search.component.html', + styleUrls: ['./calendar-search.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class CalendarSearchComponent implements OnInit, OnDestroy, DoCheck { + @Input({ required: true }) date: Date = new Date(); + @Input({ required: true }) events: Event[] = []; + @Input() model: ICalendarSearchForm = { + calendarSearch: '', + }; + @ViewChild(MatAccordion) accordion!: MatAccordion; + + search: string = this.model.calendarSearch; + form: FormGroup = new FormGroup({}); + formWatchSub!: Subscription; + + filteredEvents: Event[] = []; + showAll: boolean = false; + + private iterableDifferEvents: IterableDiffer; + + // TODO: Paginate the accordion items. mat-paginator? + constructor( + private iterableDiffers: IterableDiffers, + private changeDetectorRef: ChangeDetectorRef, + private debouncerService: DebounceService + ) { + this.iterableDifferEvents = iterableDiffers.find(this.events).create(); + } + + ngOnInit(): void { + for (const [key, value] of Object.entries(this.model)) { + if (!this.form.controls[key]) { + this.form.addControl(key, new FormControl(value /*[Validators.required]*/)); + } else { + this.form.controls[key].setValue(value); + } + } + + this.formWatchSub = this.form.valueChanges.subscribe(value => { + this.debouncerService.debounce(() => { + this.search = value['calendarSearch']; + this.searchEvents(this.search); + }, 300); + }); + + this.onEventsChange(); + } + + ngDoCheck() { + if (this.iterableDifferEvents.diff(this.events)) { + this.changeDetectorRef.markForCheck(); + } + } + + ngOnDestroy(): void { + if (this.formWatchSub) this.formWatchSub.unsubscribe(); + } + + setShowAll(change: MatSlideToggleChange): void { + this.showAll = change.checked; + + if (this.showAll) { + this.filteredEvents = this.events; + this.filteredEvents.sort(this.sortFn); + } else { + this.searchEvents(this.search); + } + + this.accordion.closeAll(); + } + + // TODO: If show all off, only search for the selected month's events + private searchEvents(value: string): void { + this.showAll = false; + this.filteredEvents = []; + value = value.toLowerCase().trim(); + + if (value !== '') { + for (let i = 0; i < this.events.length; i++) { + // if (this.showAll === false && !isWithinInterval(startOfMonth(this.date), {start: startOfMonth(this.events[i].startDate), end: endOfMonth(this.events[i].endDate)})) + // continue; + + if ( + this.events[i].title.toLowerCase().includes(value) || + this.events[i].organizer.toLowerCase().includes(value) || + this.events[i].eventType.toLowerCase().includes(value) || + this.events[i].description.toLowerCase().includes(value) + ) { + this.filteredEvents.push(this.events[i]); + } + } + this.filteredEvents.sort(this.sortFn); + } + + this.changeDetectorRef.markForCheck(); + } + + private onEventsChange() { + // What do we need to do here? + } + + private sortFn = (a: Event, b: Event) => a.startDate.getTime() - b.startDate.getTime(); +} + +interface ICalendarSearchForm { + calendarSearch: string; +} diff --git a/src/app/features/calendar/interfaces/calendar-date.interface.ts b/src/app/features/calendar/interfaces/calendar-date.interface.ts index 5bf465f0..ab7c22b8 100644 --- a/src/app/features/calendar/interfaces/calendar-date.interface.ts +++ b/src/app/features/calendar/interfaces/calendar-date.interface.ts @@ -1,6 +1,6 @@ -import { Event } from "src/app/features/events/models/event"; - -export interface ICalendarDate { - date: Date; - events: Event[]; -} \ No newline at end of file +import { Event } from 'src/app/features/events/models/event'; + +export interface ICalendarDate { + date: Date; + events: Event[]; +} diff --git a/src/app/features/calendar/interfaces/calendar-weekday.interface.ts b/src/app/features/calendar/interfaces/calendar-weekday.interface.ts index a3c1b6cf..59ab307f 100644 --- a/src/app/features/calendar/interfaces/calendar-weekday.interface.ts +++ b/src/app/features/calendar/interfaces/calendar-weekday.interface.ts @@ -1,4 +1,4 @@ -export interface ICalendarWeekDay { - title: string; - isToday: boolean; -} \ No newline at end of file +export interface ICalendarWeekDay { + title: string; + isToday: boolean; +} diff --git a/src/app/features/events/components/event-card/event-card.component.ts b/src/app/features/events/components/event-card/event-card.component.ts index 7cedec6b..4b22fcc9 100644 --- a/src/app/features/events/components/event-card/event-card.component.ts +++ b/src/app/features/events/components/event-card/event-card.component.ts @@ -15,7 +15,7 @@ import { CardSize } from 'src/app/shared/models/card-size'; changeDetection: ChangeDetectionStrategy.OnPush, }) export class EventCardComponent implements ICardComponent { - @Input({required: true}) model!: Event; + @Input({ required: true }) model!: Event; @Input() loading: boolean = false; @Input() cardSize: CardSize | string = CardSize.Small; @Output() confirm = new EventEmitter(); diff --git a/src/app/features/events/components/event/event.component.html b/src/app/features/events/components/event/event.component.html index 65675c37..86691b5c 100644 --- a/src/app/features/events/components/event/event.component.html +++ b/src/app/features/events/components/event/event.component.html @@ -1,209 +1,201 @@ - - - - + + +
+
+

+ {{ model.title }} +

+ + + +
+
+ + + + -
- -

- {{ model.title }} -

- - - -
-
- - - - - - - - - - - -
- -
- - - - {{ translations.event.form.register | translate }} - -
-
-
- -
- - - -
-

- {{ translations.event.date_time | translate }} -

-

- {{ model.startDate | date: 'mediumDate' }} - {{ model.startDate | date: 'h a' }} - {{ model.endDate | date: 'mediumDate' }} - {{ model.endDate | date: 'h a' }} -

-

- {{ translations.event.duration | translate }}: {{ model!.startDate | durationFormat: model!.endDate }} -

- -
- -
- - - -
-

- {{ translations.event.location | translate }} -

-

- {{ model.location.address }} -

-

- {{ model.location.city }}, {{ model.location.province }} -

- -
- -
- - - -
-

- {{ translations.event.host | translate }} -

-

- {{ model.author?.firstName }} {{ model.author?.lastName }} -

- - {{ model.group?.name }} - - -
-
- - -
-

- {{ translations.event.event_description | translate }} -

-

- -
- - -
-

{{ translations.event.event_registration | translate }}

- - - - - - - - - - - - - - - - - - - - {{ translations.event.form.add_calendar | translate }} - - - - - {{ translations.event.form.agree_with | translate }} - - {{ translations.event.form.terms_conditions | translate }} - - - + + + + +
+
- - {{ translations.event.form.register | translate }} + + {{ translations.event.form.register | translate }} - - +
+
+
+ +
+ + +
+

+ {{ translations.event.date_time | translate }} +

+

{{ model.startDate | date: 'mediumDate' }} - {{ model.startDate | date: 'h a' }} - {{ model.endDate | date: 'mediumDate' }} - {{ model.endDate | date: 'h a' }}

+

{{ translations.event.duration | translate }}: {{ model!.startDate | durationFormat: model!.endDate }}

+ +
+ +
+ + + +
+

+ {{ translations.event.location | translate }} +

+

+ {{ model.location.address }} +

+

{{ model.location.city }}, {{ model.location.province }}

+ +
+ +
+ + + +
+

+ {{ translations.event.host | translate }} +

+

{{ model.author?.firstName }} {{ model.author?.lastName }}

+ + {{ model.group?.name }} + + +
+
+ + +
+

+ {{ translations.event.event_description | translate }} +

+

+ +
+ + +
+

{{ translations.event.event_registration | translate }}

+ + + + + + + + + + + + + + + + + + + + {{ translations.event.form.add_calendar | translate }} + + + + + {{ translations.event.form.agree_with | translate }} + + {{ translations.event.form.terms_conditions | translate }} + + + + + + + {{ translations.event.form.register | translate }} + +
diff --git a/src/app/features/events/components/event/event.component.scss b/src/app/features/events/components/event/event.component.scss index 829509d7..3c54dd36 100644 --- a/src/app/features/events/components/event/event.component.scss +++ b/src/app/features/events/components/event/event.component.scss @@ -97,12 +97,12 @@ $calendar-size: 120px; } section { flex-grow: 1; - .section-separator { - height: 60px; - margin-top: 45px; - flex-grow: 0.5; - border-left: 2px solid $neutral-300; - } + .section-separator { + height: 60px; + margin-top: 45px; + flex-grow: 0.5; + border-left: 2px solid $neutral-300; + } h3 { color: $primary-2; diff --git a/src/app/features/events/components/event/event.component.ts b/src/app/features/events/components/event/event.component.ts index 6523c68e..65896d4a 100644 --- a/src/app/features/events/components/event/event.component.ts +++ b/src/app/features/events/components/event/event.component.ts @@ -22,7 +22,7 @@ import { DurationFormatPipe } from 'src/app/shared/pipes/duration-format/duratio //changeDetection: ChangeDetectionStrategy.OnPush }) export class EventComponent implements OnInit { - @Input({required: true}) model!: Event; + @Input({ required: true }) model!: Event; banner: Banner | null = null; loading: boolean = true; diff --git a/src/app/features/events/models/event.ts b/src/app/features/events/models/event.ts index 7da284a0..ff1728c5 100644 --- a/src/app/features/events/models/event.ts +++ b/src/app/features/events/models/event.ts @@ -1,111 +1,109 @@ -import { Person } from "src/app/core/models/person.model"; -import { Location } from "src/app/core/models/location.model"; -import { Group } from "../../groups/models/group"; -import { IEventForm } from "src/app/shared/components/event-form/event-form.component"; +import { Person } from 'src/app/core/models/person.model'; +import { Location } from 'src/app/core/models/location.model'; +import { Group } from '../../groups/models/group'; +import { IEventForm } from 'src/app/shared/components/event-form/event-form.component'; import { format, isSameDay } from 'date-fns'; - export class Event { - id: string = '-1'; - title: string = ''; - eventType: string = 'Hybrid'; - description: string = ''; - location: Location = new Location('', '', ''); - language: string = 'English'; - tags: [string] = ['']; - startDate: Date = new Date(); - endDate: Date = new Date(); - author: Person | undefined; - authoredDate: Date | undefined; - canceled: boolean = false; - image: string | undefined = '../assets/image/group-banner.png'; - group: Group | undefined; - displayPicture: string | undefined; - organizer: string = ''; - onlinePlatform: string = 'Teams'; - duration: string = 'Single'; - - confirmed: boolean = false; - declined: boolean = false; + id: string = '-1'; + title: string = ''; + eventType: string = 'Hybrid'; + description: string = ''; + location: Location = new Location('', '', ''); + language: string = 'English'; + tags: [string] = ['']; + startDate: Date = new Date(); + endDate: Date = new Date(); + author: Person | undefined; + authoredDate: Date | undefined; + canceled: boolean = false; + image: string | undefined = '../assets/image/group-banner.png'; + group: Group | undefined; + displayPicture: string | undefined; + organizer: string = ''; + onlinePlatform: string = 'Teams'; + duration: string = 'Single'; + + confirmed: boolean = false; + declined: boolean = false; + + // TODO: Make these the same properties? Implement the interface? + toEventForm(): IEventForm { + const sameDay = isSameDay(this.startDate, this.endDate); + const eventForm: IEventForm = { + eventType: this.eventType, + eventOrganizerName: this.organizer, + eventName: this.title, + eventLanguage: this.language, + eventDescription: this.description, + eventLocation: this.location.toString(), + eventOnlinePlatform: this.onlinePlatform, + eventDuration: sameDay ? 'Single' : 'Multi', + eventStartDate: format(this.startDate, 'y-MM-dd'), + eventStartTime: format(this.startDate, 'HH:mm'), + eventEndDate: format(this.endDate, 'y-MM-dd'), + eventEndTime: format(this.endDate, 'HH:mm'), + }; + return eventForm; + } - // TODO: Make these the same properties? Implement the interface? - toEventForm(): IEventForm { - const sameDay = isSameDay(this.startDate, this.endDate); - const eventForm: IEventForm = { - eventType: this.eventType, - eventOrganizerName: this.organizer, - eventName: this.title, - eventLanguage: this.language, - eventDescription: this.description, - eventLocation: this.location.toString(), - eventOnlinePlatform: this.onlinePlatform, - eventDuration: sameDay ? 'Single' : 'Multi', - eventStartDate: format(this.startDate, 'y-MM-dd'), - eventStartTime: format(this.startDate, 'HH:mm'), - eventEndDate: format(this.endDate, 'y-MM-dd'), - eventEndTime: format(this.endDate, 'HH:mm'), - }; - return eventForm; - } + fromEventForm(eventForm: IEventForm): Event { + const event = new Event(); - fromEventForm(eventForm: IEventForm): Event { - const event = new Event(); + event.id = this.id; + event.title = eventForm.eventName; + event.eventType = eventForm.eventType; + event.description = eventForm.eventDescription; - event.id = this.id; - event.title = eventForm.eventName; - event.eventType = eventForm.eventType; - event.description = eventForm.eventDescription; + const addCityProv = eventForm.eventLocation.split(','); + event.location = new Location(addCityProv[0].trim(), addCityProv[1].trim(), addCityProv[2].trim()); - const addCityProv = eventForm.eventLocation.split(','); - event.location = new Location(addCityProv[0].trim(), addCityProv[1].trim(), addCityProv[2].trim()); + event.language = eventForm.eventLanguage; + event.tags = this.tags; + event.startDate = new Date([eventForm.eventStartDate, eventForm.eventStartTime].join(' ')); + event.endDate = new Date([eventForm.eventEndDate, eventForm.eventEndTime].join(' ')); + event.author = this.author; + event.authoredDate = this.authoredDate; + event.canceled = this.canceled; + event.image = this.image; + event.group = this.group; + event.displayPicture = this.displayPicture; + event.organizer = eventForm.eventOrganizerName; + event.onlinePlatform = eventForm.eventOnlinePlatform; + event.duration = eventForm.eventDuration; + event.confirmed = this.confirmed; + event.declined = this.declined; - event.language = eventForm.eventLanguage; - event.tags = this.tags; - event.startDate = new Date([eventForm.eventStartDate, eventForm.eventStartTime].join(' ')); - event.endDate = new Date([eventForm.eventEndDate, eventForm.eventEndTime].join(' ')); - event.author = this.author; - event.authoredDate = this.authoredDate; - event.canceled = this.canceled; - event.image = this.image; - event.group = this.group; - event.displayPicture = this.displayPicture; - event.organizer = eventForm.eventOrganizerName; - event.onlinePlatform = eventForm.eventOnlinePlatform; - event.duration = eventForm.eventDuration; - event.confirmed = this.confirmed; - event.declined = this.declined; - - return event; - } + return event; + } - static fromEventForm(id:string, eventForm: IEventForm) { - const event = new Event(); + static fromEventForm(id: string, eventForm: IEventForm) { + const event = new Event(); - event.id = id; - event.title = eventForm.eventName; - event.eventType = eventForm.eventType; - event.description = eventForm.eventDescription; + event.id = id; + event.title = eventForm.eventName; + event.eventType = eventForm.eventType; + event.description = eventForm.eventDescription; - // TODO: Setup location form for use in the event form instead of a string. - event.location = new Location(eventForm.eventLocation, eventForm.eventLocation, eventForm.eventLocation); + // TODO: Setup location form for use in the event form instead of a string. + event.location = new Location(eventForm.eventLocation, eventForm.eventLocation, eventForm.eventLocation); - event.language = eventForm.eventLanguage; - event.tags = ['']; - event.startDate = new Date([eventForm.eventStartDate, eventForm.eventStartTime].join(' ')); - event.endDate = new Date([eventForm.eventEndDate, eventForm.eventEndTime].join(' ')); - event.author = undefined; - event.authoredDate = new Date(); - event.canceled = false; - event.image = '../assets/image/group-banner.png'; - event.group = undefined; - event.displayPicture = ''; - event.organizer = eventForm.eventOrganizerName; - event.onlinePlatform = eventForm.eventOnlinePlatform; - event.duration = eventForm.eventDuration; - event.confirmed = false; - event.declined = false; - - return event; - } + event.language = eventForm.eventLanguage; + event.tags = ['']; + event.startDate = new Date([eventForm.eventStartDate, eventForm.eventStartTime].join(' ')); + event.endDate = new Date([eventForm.eventEndDate, eventForm.eventEndTime].join(' ')); + event.author = undefined; + event.authoredDate = new Date(); + event.canceled = false; + event.image = '../assets/image/group-banner.png'; + event.group = undefined; + event.displayPicture = ''; + event.organizer = eventForm.eventOrganizerName; + event.onlinePlatform = eventForm.eventOnlinePlatform; + event.duration = eventForm.eventDuration; + event.confirmed = false; + event.declined = false; + return event; + } } diff --git a/src/app/features/home/home.component.ts b/src/app/features/home/home.component.ts index 983c0a70..40947d5d 100644 --- a/src/app/features/home/home.component.ts +++ b/src/app/features/home/home.component.ts @@ -44,11 +44,13 @@ export class HomeComponent implements OnInit { calEvents: Event[] = []; loadingCalendar: boolean = true; - constructor(public translations: Translations, - public newsService: NewsService, - public eventService: EventService, - public peopleService: PeopleService, - public groupService: GroupService) {} + constructor( + public translations: Translations, + public newsService: NewsService, + public eventService: EventService, + public peopleService: PeopleService, + public groupService: GroupService + ) {} ngOnInit(): void { this.newsService.getMany(10, 5000).subscribe((newsItems: INewsItem[]) => { diff --git a/src/app/features/home/home.module.ts b/src/app/features/home/home.module.ts index 93d9efad..eab01ae7 100644 --- a/src/app/features/home/home.module.ts +++ b/src/app/features/home/home.module.ts @@ -12,15 +12,6 @@ import { CalendarModule } from '../calendar/calendar.module'; @NgModule({ declarations: [HomeComponent], - imports: [ - CommonModule, - HomeRoutingModule, - SharedModule, - NewsFeedModule, - GroupsModule, - EventsModule, - ProfileModule, - CalendarModule - ], + imports: [CommonModule, HomeRoutingModule, SharedModule, NewsFeedModule, GroupsModule, EventsModule, ProfileModule, CalendarModule], }) export class HomeModule {} diff --git a/src/app/features/missions/missions.module.ts b/src/app/features/missions/missions.module.ts index ced17b87..76a647c8 100644 --- a/src/app/features/missions/missions.module.ts +++ b/src/app/features/missions/missions.module.ts @@ -6,9 +6,7 @@ import { SharedModule } from 'src/app/shared/shared.module'; import { MissionsComponent } from './missions.component'; @NgModule({ - declarations: [ - MissionsComponent - ], + declarations: [MissionsComponent], imports: [CommonModule, MissionsRoutingModule, SharedModule], }) export class MissionsModule {} diff --git a/src/app/shared/components/calendar-button/calendar-button.component.ts b/src/app/shared/components/calendar-button/calendar-button.component.ts index 85839cfe..d770af2d 100644 --- a/src/app/shared/components/calendar-button/calendar-button.component.ts +++ b/src/app/shared/components/calendar-button/calendar-button.component.ts @@ -9,7 +9,7 @@ import { TooltipDirection } from 'src/app/shared/models/tooltip-direction'; changeDetection: ChangeDetectionStrategy.OnPush, }) export class CalendarButtonComponent { - @Input({required: true}) date!: Date; + @Input({ required: true }) date!: Date; @Input() tooltip: string = ''; @Input() aria: string = ''; @Input() tooltipDirection: TooltipDirection = TooltipDirection.Above; diff --git a/src/app/shared/components/list/list.component.ts b/src/app/shared/components/list/list.component.ts index 3f8cd0bd..27955846 100644 --- a/src/app/shared/components/list/list.component.ts +++ b/src/app/shared/components/list/list.component.ts @@ -53,8 +53,7 @@ export class ListComponent implements OnInit { nextPage(): void { this.lastPage = ++this.currentPage; - if (!this.loading && this.pageSize * this.currentPage > this.items.length) - this.loadNext(this.pageSize * this.pagesToLoad); + if (!this.loading && this.pageSize * this.currentPage > this.items.length) this.loadNext(this.pageSize * this.pagesToLoad); } previousPage(): void { diff --git a/src/app/shared/pipes/duration-format/duration-format.pipe.ts b/src/app/shared/pipes/duration-format/duration-format.pipe.ts index 0cace59b..d6a7b758 100644 --- a/src/app/shared/pipes/duration-format/duration-format.pipe.ts +++ b/src/app/shared/pipes/duration-format/duration-format.pipe.ts @@ -1,51 +1,55 @@ -import { Pipe, PipeTransform } from '@angular/core'; -import { Translations } from 'src/app/core/services/translations.service'; -import { TranslateService } from '@ngx-translate/core'; - -@Pipe({ - name: 'durationFormat', - pure: false -}) -export class DurationFormatPipe implements PipeTransform { - - constructor(private translations: Translations, private translate : TranslateService) {} - - transform(startDate: Date, endDate: Date): string { - if (!startDate || !endDate) { - return ''; - } - - const duration = endDate.getTime() - startDate.getTime(); - const millisecondsInMinute = 60 * 1000; - const millisecondsInHour = 60 * millisecondsInMinute; - const millisecondsInDay = 24 * millisecondsInHour; - const millisecondsInWeek = 7 * millisecondsInDay; - const millisecondsInMonth = 30 * millisecondsInDay; - - const months = Math.floor(duration / millisecondsInMonth); - const weeks = Math.floor((duration % millisecondsInMonth) / millisecondsInWeek); - const days = Math.floor((duration % millisecondsInWeek) / millisecondsInDay); - const hours = Math.floor((duration % millisecondsInDay) / millisecondsInHour); - const minutes = Math.floor((duration % millisecondsInHour) / millisecondsInMinute); - - let result = ''; - - if (months > 0) { - result += months > 1 ? `${months} ${this.translate.instant(this.translations.duration.month.plural)}, ` : `${months} ${this.translate.instant(this.translations.duration.month.singular)}, `; - } - if (weeks > 0) { - result += weeks > 1 ? `${weeks} ${this.translate.instant(this.translations.duration.week.plural)}, ` : `${weeks} ${this.translate.instant(this.translations.duration.week.singular)}, `; - } - if (days > 0) { - result += days > 1 ? `${days} ${this.translate.instant(this.translations.duration.day.plural)}, ` : `${days} ${this.translate.instant(this.translations.duration.day.singular)}, `; - } - if (hours > 0) { - result += hours > 1 ? `${hours} ${this.translate.instant(this.translations.duration.hour.plural)}, ` : `${hours} ${this.translate.instant(this.translations.duration.hour.singular)}, `; - } - if (minutes > 0) { - result += minutes > 1 ? `${minutes} ${this.translate.instant(this.translations.duration.minute.plural)}, ` : `${minutes} ${this.translate.instant(this.translations.duration.minute.singular)}, `; - } - - return result.trim().replace(/,([^,]*)$/, '$1'); - } -} \ No newline at end of file +import { Pipe, PipeTransform } from '@angular/core'; +import { Translations } from 'src/app/core/services/translations.service'; +import { TranslateService } from '@ngx-translate/core'; + +@Pipe({ + name: 'durationFormat', + pure: false, +}) +export class DurationFormatPipe implements PipeTransform { + constructor( + private translations: Translations, + private translate: TranslateService + ) {} + + transform(startDate: Date, endDate: Date): string { + if (!startDate || !endDate) { + return ''; + } + + const duration = endDate.getTime() - startDate.getTime(); + const millisecondsInMinute = 60 * 1000; + const millisecondsInHour = 60 * millisecondsInMinute; + const millisecondsInDay = 24 * millisecondsInHour; + const millisecondsInWeek = 7 * millisecondsInDay; + const millisecondsInMonth = 30 * millisecondsInDay; + + const months = Math.floor(duration / millisecondsInMonth); + const weeks = Math.floor((duration % millisecondsInMonth) / millisecondsInWeek); + const days = Math.floor((duration % millisecondsInWeek) / millisecondsInDay); + const hours = Math.floor((duration % millisecondsInDay) / millisecondsInHour); + const minutes = Math.floor((duration % millisecondsInHour) / millisecondsInMinute); + + let result = ''; + + if (months > 0) { + result += + months > 1 ? `${months} ${this.translate.instant(this.translations.duration.month.plural)}, ` : `${months} ${this.translate.instant(this.translations.duration.month.singular)}, `; + } + if (weeks > 0) { + result += weeks > 1 ? `${weeks} ${this.translate.instant(this.translations.duration.week.plural)}, ` : `${weeks} ${this.translate.instant(this.translations.duration.week.singular)}, `; + } + if (days > 0) { + result += days > 1 ? `${days} ${this.translate.instant(this.translations.duration.day.plural)}, ` : `${days} ${this.translate.instant(this.translations.duration.day.singular)}, `; + } + if (hours > 0) { + result += hours > 1 ? `${hours} ${this.translate.instant(this.translations.duration.hour.plural)}, ` : `${hours} ${this.translate.instant(this.translations.duration.hour.singular)}, `; + } + if (minutes > 0) { + result += + minutes > 1 ? `${minutes} ${this.translate.instant(this.translations.duration.minute.plural)}, ` : `${minutes} ${this.translate.instant(this.translations.duration.minute.singular)}, `; + } + + return result.trim().replace(/,([^,]*)$/, '$1'); + } +} diff --git a/src/app/shared/pipes/localized-date/localized-date.pipe.ts b/src/app/shared/pipes/localized-date/localized-date.pipe.ts index 95bb0ee7..aab471d8 100644 --- a/src/app/shared/pipes/localized-date/localized-date.pipe.ts +++ b/src/app/shared/pipes/localized-date/localized-date.pipe.ts @@ -1,21 +1,21 @@ -import { DatePipe } from "@angular/common"; -import { Pipe, PipeTransform } from "@angular/core"; -import { TranslateService } from "@ngx-translate/core"; - -@Pipe({ - name: 'localizedDate', - pure: false -}) -export class LocalizedDatePipe implements PipeTransform { - constructor(private translateService: TranslateService) {} - - transform(value: Date, pattern: string = 'mediumDate'): string | null { - let datePipe: DatePipe | undefined; - - if (this.translateService.currentLang) { - datePipe = new DatePipe(this.translateService.currentLang); - } - - return datePipe != undefined ? datePipe.transform(value, pattern) : ''; - } -} \ No newline at end of file +import { DatePipe } from '@angular/common'; +import { Pipe, PipeTransform } from '@angular/core'; +import { TranslateService } from '@ngx-translate/core'; + +@Pipe({ + name: 'localizedDate', + pure: false, +}) +export class LocalizedDatePipe implements PipeTransform { + constructor(private translateService: TranslateService) {} + + transform(value: Date, pattern: string = 'mediumDate'): string | null { + let datePipe: DatePipe | undefined; + + if (this.translateService.currentLang) { + datePipe = new DatePipe(this.translateService.currentLang); + } + + return datePipe != undefined ? datePipe.transform(value, pattern) : ''; + } +} diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts index 8cf516b1..f1f0594c 100644 --- a/src/app/shared/shared.module.ts +++ b/src/app/shared/shared.module.ts @@ -52,7 +52,6 @@ import { ListComponent } from './components/list/list.component'; import { LocalizedDatePipe } from './pipes/localized-date/localized-date.pipe'; import { DurationFormatPipe } from './pipes/duration-format/duration-format.pipe'; - @NgModule({ declarations: [ LanguageSelectorComponent, @@ -79,7 +78,7 @@ import { DurationFormatPipe } from './pipes/duration-format/duration-format.pipe FileSelectComponent, ListComponent, LocalizedDatePipe, - DurationFormatPipe + DurationFormatPipe, ], imports: [ CommonModule, @@ -108,7 +107,7 @@ import { DurationFormatPipe } from './pipes/duration-format/duration-format.pipe MatAutocompleteModule, MatCardModule, NgxSkeletonLoaderModule, - InfiniteScrollModule + InfiniteScrollModule, ], exports: [ TranslateModule,