Merge pull request #268 from gctools-outilsgc/enh/calendar-date-picker

enh/calendar-date-picker
gctools-outilsgc · Mar 19, 2024 · 13347ef · 13347ef
2 parents da3e727 + 453c613
commit 13347ef
Show file tree

Hide file tree

Showing 9 changed files with 144 additions and 21 deletions.
diff --git a/src/app/features/calendar/calendar.component.html b/src/app/features/calendar/calendar.component.html
@@ -42,10 +42,42 @@
         (click)="navigateCalendar(-1)"
       >
         <i class="fa-solid fa-angle-left fa-lg"></i>
-      </app-button>
+      </app-button> 
+
+      <!-- Month/Year Select -->
+      <div class="date-picker">
+        <mat-form-field>
+          <mat-label>{{ 'Select a Month' | translate }}</mat-label>
+          <mat-select [(ngModel)]="selectedMonth" 
+                     (selectionChange)="dateSelectChange()" 
+                     [disabled]="loading" 
+                     [matTooltip]="'Select a Month' | translate"
+                     [matTooltipPosition]="TooltipDirection.Above"
+                     disableRipple>
+            @for (month of [0,1,2,3,4,5,6,7,8,9,10,11]; track $index) {
+              <mat-option [value]="month">
+                {{ monthIndexToDate(month) | localizedDate: 'MMMM' | titlecase }}
+              </mat-option>
+            }
+          </mat-select>
+        </mat-form-field>
 
-      <!-- Date -->
-      <span>{{ date | localizedDate: 'MMMM YYYY' | titlecase }}</span>
+        <mat-form-field>
+          <mat-label>{{ 'Select a Year' | translate }}</mat-label>
+          <mat-select [(ngModel)]="selectedYear" 
+                      (selectionChange)="dateSelectChange()" 
+                      [disabled]="loading" 
+                      [matTooltip]="'Select a Year' | translate" 
+                      [matTooltipPosition]="TooltipDirection.Above" 
+                      disableRipple>
+            @for (year of years; track $index) {
+              <mat-option [value]="year">
+                {{ year }}
+              </mat-option>
+            }
+          </mat-select>
+        </mat-form-field>
+      </div>
 
       <!-- Nav Next -->
       <app-button
@@ -58,7 +90,7 @@
         (click)="navigateCalendar(1)"
       >
         <i class="fa-solid fa-angle-right fa-lg"></i>
-      </app-button>
+      </app-button> 
     </div>
 
     <!-- Right Actions -->
@@ -106,11 +138,16 @@
 </div>
 
 <!-- Events -->
-<app-calendar-events *ngIf="activeDayIndex > -1 && !loading" [calendarDate]="dates[activeDayIndex]" (eventEdit)="editEvent($event)" (eventDelete)="deleteEvent($event)"> </app-calendar-events>
+<app-calendar-events *ngIf="activeDayIndex > -1 && !loading" 
+                     [calendarDate]="dates[activeDayIndex]" 
+                     (eventEdit)="editEvent($event)" 
+                     (eventDelete)="deleteEvent($event)"
+                     (eventCreate)="toggleEventForm()">
+</app-calendar-events>
 
 <!-- Event Form -->
 <mat-card *ngIf="eventFormActive && !loading" class="event-form">
-  <app-event-form [form]="eventFormGroup" [model]="eventFormData"> </app-event-form>
+  <app-event-form [form]="eventFormGroup" [model]="eventFormData"></app-event-form>
 
   <div class="actions">
     <!-- Save -->

diff --git a/src/app/features/calendar/calendar.component.scss b/src/app/features/calendar/calendar.component.scss
@@ -29,11 +29,39 @@ $cal-gap: 15px;
     justify-content: center;
     white-space: nowrap;
 
-    span {
-      padding: 0 20px;
-      pointer-events: none;
-      font-weight: 700;
-      font-size: 32px;
+    .date-picker {
+      display: flex;
+      gap: 10px;
+
+      mat-select.cdk-focused {
+        ::ng-deep .mat-mdc-select-value-text {
+          color: $primary-1;
+        }
+      }
+
+      ::ng-deep {
+        .mat-mdc-form-field-subscript-wrapper,
+        .mdc-floating-label,
+        .mat-mdc-select-arrow-wrapper {
+          display: none;
+        }
+        .mat-mdc-form-field-infix {
+          width: auto;
+        }
+        .mdc-notched-outline__leading, 
+        .mdc-notched-outline__notch,
+        .mdc-notched-outline__trailing {
+          border: none;
+        }
+        .mat-mdc-select-value-text {
+          font-weight: 700;
+          font-size: 32px;
+          line-height: 1;
+        }
+        .mat-mdc-text-field-wrapper {
+          padding: 0;
+        }
+      }
     }
   }
 
@@ -91,6 +119,7 @@ $cal-gap: 15px;
   border-radius: 20px;
   background-color: $neutral-100;
   box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+  padding: 15px 0;
 
   .day.inactive {
     color: #bfbfbf;
@@ -138,4 +167,4 @@ app-calendar-events {
     align-self: flex-end;
     gap: 16px;
   }
-}
+}
diff --git a/src/app/features/calendar/calendar.component.ts b/src/app/features/calendar/calendar.component.ts
@@ -20,6 +20,8 @@ import {
   isSunday,
   isSameDay,
   format,
+  getMonth,
+  getYear,
 } from 'date-fns';
 import { ICalendarDate } from './interfaces/calendar-date.interface';
 import { ICalendarWeekDay } from './interfaces/calendar-weekday.interface';
@@ -44,12 +46,18 @@ 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() minYear: number = 1900; // The earliest year in the year select drop down
+  @Input() maxYear: number = getYear(new Date()) + 1; // The latest year in the year select drop down
 
   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[] = [];
 
+  selectedMonth: number = getMonth(this.date);
+  selectedYear: number = getYear(this.date);
+  years: number[] = [];
+
   searchActive: boolean = false;
   eventFormActive: boolean = false;
 
@@ -106,6 +114,7 @@ export class CalendarComponent implements OnInit, OnChanges, OnDestroy {
 
     // Build out the calendar
     this.prevWeekdayFormat = this.buildWeekDays();
+    this.buildYearSelectOptions();
     this.buildView();
 
     // Set today as the active day in the calendar
@@ -126,7 +135,8 @@ 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 {
@@ -209,6 +219,15 @@ export class CalendarComponent implements OnInit, OnChanges, OnDestroy {
     this.searchActive = !this.searchActive;
   };
 
+  dateSelectChange(): void {
+    this.date = new Date(this.selectedYear, this.selectedMonth);
+    this.buildView();
+  }
+
+  monthIndexToDate(month: number): Date {
+    return new Date(0, month);
+  }
+
   private buildWeekDays(): WeekdayFormat {
     const today = new Date();
     const format = this.elementRef.nativeElement.offsetWidth < 600 ? WeekdayFormat.Short : WeekdayFormat.Full;
@@ -230,6 +249,9 @@ export class CalendarComponent implements OnInit, OnChanges, OnDestroy {
     this.dates = [];
     this.activeDayIndex = -1;
 
+    this.selectedMonth = getMonth(this.date);
+    this.selectedYear = getYear(this.date);
+
     // Create days for each day of the month
     const daysMonth = getDaysInMonth(this.date);
     for (let i = 0; i < daysMonth; i++) {
@@ -326,6 +348,13 @@ export class CalendarComponent implements OnInit, OnChanges, OnDestroy {
       this.eventFormData.eventEndDate = this.eventFormData.eventStartDate;
     }
   }
+
+  private buildYearSelectOptions(): void {
+    this.years = [];
+    for (let i = this.minYear; i <= this.maxYear; i++) {
+      this.years.push(i);
+    }
+  }
 }
 
 enum WeekdayFormat {

diff --git a/src/app/features/calendar/calendar.module.ts b/src/app/features/calendar/calendar.module.ts
@@ -10,11 +10,12 @@ 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 { MatSelectModule } from '@angular/material/select';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 
 @NgModule({
   declarations: [CalendarComponent, CalendarDayComponent, CalendarEventsComponent, CalendarSearchComponent],
-  imports: [CommonModule, SharedModule, FormsModule, ReactiveFormsModule, EventsModule, MatCardModule, MatExpansionModule, MatSlideToggleModule],
+  imports: [CommonModule, SharedModule, FormsModule, ReactiveFormsModule, EventsModule, MatCardModule, MatExpansionModule, MatSlideToggleModule, MatSelectModule],
   exports: [CalendarComponent],
 })
 export class CalendarModule {}
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
@@ -1,6 +1,17 @@
 <mat-card>
   <mat-card-header>
-    {{ isToday(calendarDate.date) ? "Today's Events" : 'Events on ' + (calendarDate.date | localizedDate) }}
+    <span>{{ isToday(calendarDate.date) ? "Today's Events" : 'Events on ' + (calendarDate.date | localizedDate) }}</span>
+
+      <!-- Add Event -->
+      <app-button
+      theme="black"
+      matButtonType="mat-icon-button"
+      [tooltip]="'Add Event' | translate"
+      [ariaLabel]="'Add Event'"
+      (click)="createEvent()"
+      >
+        <i class="fa-solid fa-calendar-plus fa-lg"></i>
+      </app-button>
   </mat-card-header>
 
   <mat-card-content>
@@ -47,7 +58,9 @@
           <div>
             {{ event.eventType }}
           </div>
-          <div>{{ event.location.address }}, {{ event.location.city }}, {{ event.location.province }}</div>
+          <div>
+            {{ event.location.address }}, {{ event.location.city }}, {{ event.location.province }}
+          </div>
         </div>
 
         <div class="actions">

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
@@ -6,9 +6,14 @@ mat-card {
 }
 
 mat-card-header {
-  font-size: 28px;
-  font-weight: 600;
   padding: 16px;
+  align-items: center;
+
+  >span {
+    flex: 1;
+    font-size: 28px;
+    font-weight: 600;
+  }
 }
 
 mat-card-content {

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
@@ -14,6 +14,7 @@ export class CalendarEventsComponent implements DoCheck {
 
   @Output() eventEdit: EventEmitter<Event> = new EventEmitter<Event>();
   @Output() eventDelete: EventEmitter<Event> = new EventEmitter<Event>();
+  @Output() eventCreate: EventEmitter<void> = new EventEmitter<void>();
 
   isToday = isToday;
 
@@ -39,4 +40,8 @@ export class CalendarEventsComponent implements DoCheck {
   deleteEvent(event: Event) {
     this.eventDelete.emit(event);
   }
+
+  createEvent() {
+    this.eventCreate.emit();
+  }
 }
diff --git a/src/app/features/home/home.component.html b/src/app/features/home/home.component.html
@@ -19,13 +19,13 @@
     <div infinite-scroll [infiniteScrollDistance]="2" [infiniteScrollThrottle]="1000" (scrolled)="onNewsScroll()">
       <app-post [profile]="people[0]" [loading]="loadingPeople"></app-post>
 
-      <app-list [service]="eventService" [cardSize]="'large'" orientation="horizontal" [pageSize]="3" [paging]="true"></app-list>
+      <!-- <app-list [service]="eventService" [cardSize]="'large'" orientation="horizontal" [pageSize]="3" [paging]="true"></app-list> -->
 
       <app-calendar [events]="calEvents" [loading]="loadingCalendar"></app-calendar>
     </div>
   </div>
 
-  <div class="side-content">
+  <aside class="side-content">
     <!-- Events -->
     <section>
       <app-event-list [model]="events" [isLoading]="loadingEvents" (confirm)="confirmEvent($event)" (decline)="declineEvent($event)"> </app-event-list>
@@ -57,5 +57,5 @@
         </a>
       </div>
     </section>
-  </div>
+  </aside>
 </div>
diff --git a/src/styles.scss b/src/styles.scss
@@ -101,3 +101,7 @@ app-banner {
     background: $primary-1;
   }
 }
+
+.cdk-overlay-pane {
+  width: fit-content !important;
+}