From 10d5395f3142249b660c415b04aeb7b8063cb37c Mon Sep 17 00:00:00 2001
From: doug0102 <shea.wow@hotmail.com>
Date: Mon, 4 Mar 2024 11:16:22 -0500
Subject: [PATCH] delete events from calendar, set active day

---
 .../calendar/calendar.component.html          | 13 ++++++++-
 .../calendar/calendar.component.scss          |  2 +-
 .../components/calendar/calendar.component.ts |  8 ++++++
 .../calendar-day/calendar-day.component.ts    |  6 ++---
 .../calendar-events.component.html            | 12 ++++++++-
 .../calendar-events.component.scss            | 27 +++++++++++++++++++
 .../calendar-events.component.ts              |  9 ++++++-
 7 files changed, 70 insertions(+), 7 deletions(-)

diff --git a/src/app/shared/components/calendar/calendar.component.html b/src/app/shared/components/calendar/calendar.component.html
index b0aded77..78738127 100644
--- a/src/app/shared/components/calendar/calendar.component.html
+++ b/src/app/shared/components/calendar/calendar.component.html
@@ -69,6 +69,15 @@
 
         <!-- Right Actions -->
         <div class="right-actions">
+            <!-- Filter -->
+            <app-button theme="black"
+                        matButtonType="mat-icon-button"
+                        [tooltip]="'TODO' | translate"
+                        [tooltipDirection]="TooltipDirection.Above"
+                        [ariaLabel]="'TODO' | translate"
+                        [disabled]="loading">
+                <i class="fa-solid fa-ellipsis-vertical fa-lg"></i>
+            </app-button>
         </div>
     </div>
 
@@ -111,4 +120,6 @@
     </div>
 </div>
 
-<app-calendar-events [day]="dates[activeDayIndex]"></app-calendar-events>
\ No newline at end of file
+<app-calendar-events [day]="dates[activeDayIndex]"
+                     (eventDelete)="deleteEvent($event)">
+</app-calendar-events>
\ No newline at end of file
diff --git a/src/app/shared/components/calendar/calendar.component.scss b/src/app/shared/components/calendar/calendar.component.scss
index f99b2716..949b4862 100644
--- a/src/app/shared/components/calendar/calendar.component.scss
+++ b/src/app/shared/components/calendar/calendar.component.scss
@@ -9,7 +9,7 @@ $cal-gap: 15px;
 .header {
     display: flex;
     text-align: center;
-    padding: $cal-gap 0;
+    padding: $cal-gap $cal-gap;
     margin: $cal-gap 0;
     border-radius: 16px;
     background-color: $neutral-100;
diff --git a/src/app/shared/components/calendar/calendar.component.ts b/src/app/shared/components/calendar/calendar.component.ts
index d5fd9bc5..db049447 100644
--- a/src/app/shared/components/calendar/calendar.component.ts
+++ b/src/app/shared/components/calendar/calendar.component.ts
@@ -82,6 +82,14 @@ export class CalendarComponent implements OnInit, OnChanges {
     this.setDayActive(day);
   }
 
+  deleteEvent(event: ICalendarEvent) {
+    const index = this.events.indexOf(event);
+    if (index > -1) {
+      this.events.splice(index, 1);
+      this.injectEvents();
+    }
+  }
+
   private buildWeekDays() {
     const today = new Date();
     const titleLength = 'full'; // TODO: full or short depending on mobile layout
diff --git a/src/app/shared/components/calendar/components/calendar-day/calendar-day.component.ts b/src/app/shared/components/calendar/components/calendar-day/calendar-day.component.ts
index c0a2f344..be6cf88c 100644
--- a/src/app/shared/components/calendar/components/calendar-day/calendar-day.component.ts
+++ b/src/app/shared/components/calendar/components/calendar-day/calendar-day.component.ts
@@ -36,11 +36,12 @@ export class CalendarDayComponent implements OnInit, DoCheck, OnChanges {
   ngDoCheck() {
     if (this.iterableDifferEvents.diff(this.calendarDate.events)) {
       this.sortEvents();
+      this.changeDetectorRef.markForCheck();
     }
   }
 
   ngOnChanges(changes: SimpleChanges): void {
-    if (changes['view']) {
+    if (changes['calendarDate']) {
       this.setCurrentDate();
     }
   }
@@ -56,12 +57,11 @@ export class CalendarDayComponent implements OnInit, DoCheck, OnChanges {
       this.router.navigateByUrl(CoreRoutes.Events + '/' + eventId);
   }
 
-  // TODO: Do we need this anymore?
   private sortEvents(): void {
     // 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 (so events spanning days line up)
+    // 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)})) {
diff --git a/src/app/shared/components/calendar/components/calendar-events/calendar-events.component.html b/src/app/shared/components/calendar/components/calendar-events/calendar-events.component.html
index fc478017..c08d0edd 100644
--- a/src/app/shared/components/calendar/components/calendar-events/calendar-events.component.html
+++ b/src/app/shared/components/calendar/components/calendar-events/calendar-events.component.html
@@ -5,7 +5,7 @@
 
     <mat-card-content>
         @for (event of day.events; track $index) {
-            <div class="event">
+            <div class="event" tabindex="0">
                 <div class="time">
                     <div class="start">
                         {{ event.startDate | localizedDate }} - {{ event.startDate | date: 'h a' }}
@@ -25,6 +25,16 @@
                     <div>{{ event.eventType }}</div>
                     <div>{{ event.location.address }} {{event.location.city}}, {{event.location.province}}</div>
                 </div>
+
+                <div class="actions">
+                    <app-button theme="black"
+                                matButtonType="mat-icon-button"
+                                [tooltip]="'TODO' | translate"
+                                [ariaLabel]="'TODO' | translate"
+                                (click)="deleteEvent(event)">
+                        <i class="fa-solid fa-trash-can"></i>
+                    </app-button>
+                </div>
             </div>
         } @empty {
             <div class="empty">
diff --git a/src/app/shared/components/calendar/components/calendar-events/calendar-events.component.scss b/src/app/shared/components/calendar/components/calendar-events/calendar-events.component.scss
index 02338cbd..60e7045f 100644
--- a/src/app/shared/components/calendar/components/calendar-events/calendar-events.component.scss
+++ b/src/app/shared/components/calendar/components/calendar-events/calendar-events.component.scss
@@ -16,6 +16,7 @@ mat-card-content {
 
     .event {
         display: flex;
+        align-items: center;
         flex-direction: row;
         border-radius: 10px;
         padding: 12px;
@@ -36,6 +37,7 @@ mat-card-content {
             border-radius: 10px;
             background: $secondary-2-gradient;
             margin: 0 16px;
+            align-self: stretch;
         }
 
         .info {
@@ -46,6 +48,31 @@ mat-card-content {
                 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;
+                }
+        
+                .cdk-focused {
+                    color: $error-red !important;
+                }
+            }
+        }
+    }
+
+    .event:hover,
+    .event:focus-visible {
+        outline: none;
+        box-shadow: 0px 4px 4px $secondary-2;
     }
 
     .event:not(:last-child) {
diff --git a/src/app/shared/components/calendar/components/calendar-events/calendar-events.component.ts b/src/app/shared/components/calendar/components/calendar-events/calendar-events.component.ts
index b8f5dbf2..b3f69088 100644
--- a/src/app/shared/components/calendar/components/calendar-events/calendar-events.component.ts
+++ b/src/app/shared/components/calendar/components/calendar-events/calendar-events.component.ts
@@ -1,5 +1,6 @@
-import { Component, ChangeDetectionStrategy, OnInit, Input} from '@angular/core';
+import { Component, ChangeDetectionStrategy, OnInit, Input, Output, EventEmitter} from '@angular/core';
 import { ICalendarDate } from '../../interfaces/calendar-date.interface';
+import { ICalendarEvent } from '../../interfaces/calendar-event.interface';
 
 @Component({
   selector: 'app-calendar-events',
@@ -9,6 +10,8 @@ import { ICalendarDate } from '../../interfaces/calendar-date.interface';
 })
 export class CalendarEventsComponent implements OnInit {
   @Input({required: true}) day!: ICalendarDate;
+
+  @Output() eventDelete: EventEmitter<ICalendarEvent> = new EventEmitter<ICalendarEvent>();
   
   constructor() {
     
@@ -17,4 +20,8 @@ export class CalendarEventsComponent implements OnInit {
   ngOnInit() {
     console.log(this.day)
   }
+
+  deleteEvent(event: ICalendarEvent) {
+    this.eventDelete.emit(event);
+  }
 }
\ No newline at end of file