calendar search

src/app/shared/components/calendar/calendar.component.scss

@@ -116,6 +116,10 @@ $cal-gap: 15px;
     }
 }
 
+app-calendar-search {
+    margin-bottom: $cal-gap;
+}
+
 app-calendar-events {
     ::ng-deep {
         > mat-card {

src/app/shared/components/calendar/components/calendar-search/calendar-search.component.html

@@ -1 +1,40 @@
-Search Component
+<mat-card>
+    <form id="gcc-form-calendar-search" [formGroup]="form">
+        <app-input
+            [value]="model.calendarSearch"
+            [name]="'calendarSearch'"
+            formControlName="calendarSearch"
+            [control]="form.controls['calendarSearch'] | formControl"
+            [label]="''"
+            [placeholder]="'Search My Calendar'"
+            [required]="false"
+        >
+        </app-input>
+    </form>
+    <mat-accordion>
+        @for (event of filteredEvents; track $index) {
+            <mat-expansion-panel>
+                <mat-expansion-panel-header>
+                    <mat-panel-title>
+                        <app-calendar-button [date]="event.startDate"></app-calendar-button>
+                        <div class="event-title">
+                            <div>
+                                {{ event.title }}
+                            </div>
+                            <div>
+                                {{ event.eventType }}
+                            </div>
+                        </div>
+                    </mat-panel-title>
+                    <mat-panel-description>
+                        {{ event.startDate | localizedDate: 'MMM d' | titlecase }}, {{ event.startDate | date: 'h:mm a' }} - {{ event.endDate | localizedDate: 'MMM d' | titlecase }}, {{ event.endDate | date: 'h:mm a' }}
+                    </mat-panel-description>
+                </mat-expansion-panel-header>
+                <div class="event-body">
+
+                </div>
+            </mat-expansion-panel>
+        }
+    </mat-accordion>
+
+</mat-card>

src/app/shared/components/calendar/components/calendar-search/calendar-search.component.scss

@@ -0,0 +1,53 @@
+@import "../../../../../../assets/scss/partials/colors";
+
+:host {
+    display: block;
+
+    mat-card {
+        border-radius: 12px;
+
+        app-input {
+            ::ng-deep {
+                .mat-mdc-form-field-subscript-wrapper {
+                    display: none;
+                }
+            }
+        }
+    }
+
+    mat-expansion-panel {
+        padding: 15px 0;
+
+        mat-expansion-panel-header {
+            mat-panel-title {
+                app-calendar-button {
+                    min-width: 50px;
+                    height: 50px;
+                    padding-right: 24px;
+                }
+            }
+
+            mat-panel-description {
+
+            }
+        }
+
+        .event-body {
+
+        }
+    }
+
+    mat-expansion-panel:hover {
+        box-shadow: inset 0px 0px 0px 2px $secondary-2;
+        cursor: pointer;
+    }
+
+    ::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;
+        }
+    }
+}

src/app/shared/components/calendar/components/calendar-search/calendar-search.component.ts

@@ -1,4 +1,6 @@
-import { Component, ChangeDetectionStrategy, Input } from '@angular/core';
+import { Component, ChangeDetectionStrategy, Input, OnInit, OnDestroy, IterableDiffer, DoCheck, ChangeDetectorRef, IterableDiffers } from '@angular/core';
+import { FormControl, FormGroup } from '@angular/forms';
+import { Subscription } from 'rxjs';
 import { Event } from 'src/app/features/events/models/event';
 
 @Component({
@@ -7,10 +9,77 @@ import { Event } from 'src/app/features/events/models/event';
   styleUrls: ['./calendar-search.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class CalendarSearchComponent {
-  @Input({required: true}) events: Event[] = [];
+export class CalendarSearchComponent implements OnInit, OnDestroy, DoCheck {
+  @Input({ required: true }) events: Event[] = [];
+  @Input() model: ICalendarSearchForm = {
+    calendarSearch: ''
+  };
+
+  form: FormGroup = new FormGroup({});
+  formWatchSub!: Subscription;
+
+  filteredEvents: Event[] = [];
+
+  private iterableDifferEvents: IterableDiffer<Event>;
 
-  constructor() {
+  constructor(private iterableDiffers: IterableDiffers,
+              private changeDetectorRef: ChangeDetectorRef) {
+    this.iterableDifferEvents = iterableDiffers.find(this.events).create();
+  }
+
+  ngOnInit(): void {
+    // Setup form controls
+    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);
+      }
+    }
+
+    // Watch for search string changes
+    this.formWatchSub = this.form.valueChanges.subscribe((value) => {
+      this.search(value['calendarSearch'])
+    });
+
+    this.onEventsChange();
+    this.filteredEvents = this.events;
+    this.filteredEvents.sort((a, b) => a.startDate.getTime() - b.startDate.getTime());
+  }
+
+  ngDoCheck() {
+    if (this.iterableDifferEvents.diff(this.events)) {
+      this.changeDetectorRef.markForCheck();
+    }
+  }
+
+  ngOnDestroy(): void {
+    if (this.formWatchSub) 
+      this.formWatchSub.unsubscribe();
+  }
+
+  private search(value: string): void {
+
+    this.filteredEvents = [];
+    value = value.toLowerCase().trim();
+
+    for ( let i = 0; i < this.events.length; i++) {
+      if (this.events[i].title.toLowerCase().includes(value) ||
+          this.events[i].description.toLowerCase().includes(value) ||
+          this.events[i].eventType.toLowerCase().includes(value)
+         ) {
+        this.filteredEvents.push(this.events[i]);
+      }
+    }
+
+    this.filteredEvents.sort((a, b) => a.startDate.getTime() - b.startDate.getTime());
+  }
+
+  private onEventsChange() {
 
   }
+}
+
+interface ICalendarSearchForm {
+  calendarSearch: string
 }

src/app/shared/shared.module.ts

@@ -39,6 +39,7 @@ import { MAT_RADIO_DEFAULT_OPTIONS, MatRadioModule } from '@angular/material/rad
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import { EditorMenuComponent } from './components/editor/menu/editor-menu/editor-menu.component';
+import { MatExpansionModule } from '@angular/material/expansion';
 import { PostFormComponent } from './components/post-form/post-form.component';
 import { BlogFormComponent } from './components/blog-form/blog-form.component';
 import { EventFormComponent } from './components/event-form/event-form.component';
@@ -114,9 +115,10 @@ import { CalendarSearchComponent } from './components/calendar/components/calend
     MatRadioModule,
     MatDatepickerModule,
     MatAutocompleteModule,
+    MatExpansionModule,
     MatCardModule,
     NgxSkeletonLoaderModule,
-    InfiniteScrollModule,
+    InfiniteScrollModule
   ],
   exports: [
     TranslateModule,