delete events from calendar, set active day

gctools-outilsgc · Mar 4, 2024 · 10d5395 · 10d5395
1 parent 4216635
commit 10d5395
Show file tree

Hide file tree

Showing 7 changed files with 70 additions and 7 deletions.
diff --git 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>
+<app-calendar-events [day]="dates[activeDayIndex]"
+                     (eventDelete)="deleteEvent($event)">
+</app-calendar-events>
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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);
+  }
 }