Adding ability to hide deleted events

Frontend/src/app/app.module.ts

@@ -15,8 +15,6 @@ import {EventDetailComponent} from './components/event-detail/event-detail.compo
 import {HttpClientModule} from '@angular/common/http';
 import {FormsModule} from '@angular/forms';
 import {ApiService} from './services/api/api.service';
-import {MatDialogModule} from '@angular/material/dialog';
-import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 
 @NgModule({
     declarations: [

Frontend/src/app/components/datepicker/datepicker.component.css

@@ -3,7 +3,7 @@
 }
 
 .switchWeekButton {
-    background-color: dimgrey; /* Green */
+    background-color: dimgrey;
     border: none;
     color: #E0E5E9;
     padding: .15em .5em;
@@ -13,6 +13,24 @@
     margin: .5em;
 }
 
+.showDeletedBtn {
+    border: none;
+    color: #E0E5E9;
+    padding: .15em .5em;
+    text-align: center;
+    display: inline-block;
+    border-radius: .5em;
+    margin: .5em;
+}
+
+.show {
+    background-color: green;
+}
+
+.hide {
+    background-color: darkred;
+}
+
 .datePickerDropdown {
     background-color: dimgrey;
     border: none;

Frontend/src/app/components/datepicker/datepicker.component.html

@@ -17,5 +17,6 @@
         </option>
     </select>
     <button (click)="switchToToday()" class="switchWeekButton">Today</button>
+    <button (click)="switchShowDeletedEvents()" class="showDeletedBtn {{switchDeletedBtnClass}}">{{showingDeletedBtnText}}</button>
     <button (click)="switchToNextWeek()" class="switchWeekButton">Next week &gt;&gt;</button>
 </div>

Frontend/src/app/components/datepicker/datepicker.component.ts

@@ -16,6 +16,11 @@ export class DatepickerComponent implements OnInit {
 
     itIsWednesday: boolean = false;
 
+    internalShowDeletedEvents: boolean = true;
+    @Output() showDeletedEvents = new EventEmitter<boolean>();
+    switchDeletedBtnClass: string = 'show';
+    showingDeletedBtnText: string = 'Showing deleted events';
+
     @Output() selectedMonday = new EventEmitter<string>();
 
     constructor() {
@@ -190,4 +195,18 @@ export class DatepickerComponent implements OnInit {
         this.selectedDay = currentDate.getDate().toString().padStart(2, '0');
         this.handleDateChange();
     }
+
+    switchShowDeletedEvents() {
+        if(this.internalShowDeletedEvents) {
+            this.internalShowDeletedEvents = false;
+            this.showDeletedEvents.emit(false);
+            this.switchDeletedBtnClass = 'hide';
+            this.showingDeletedBtnText = 'Deleted events hidden';
+        } else {
+            this.internalShowDeletedEvents = true;
+            this.showDeletedEvents.emit(true);
+            this.switchDeletedBtnClass = 'show';
+            this.showingDeletedBtnText = 'Showing deleted events';
+        }
+    }
 }

Frontend/src/app/components/day/day.component.html

@@ -1,4 +1,4 @@
 <h1>{{weekDayName}}</h1>
 <div *ngFor="let event of events">
-    <app-event [event]="event"></app-event>
+    <app-event [event]="event" *ngIf="!(!showDeletedEvents && event.changes[event.changes.length-1].is_deleted)"></app-event>
 </div>

Frontend/src/app/components/day/day.component.ts

@@ -9,6 +9,7 @@ import {Event} from '../../models/event';
 export class DayComponent implements OnInit {
     @Input() events: Event[] = [];
     @Input() dayOfWeek: number = 0;
+    @Input() showDeletedEvents: boolean = true;
 
     weekDayName: string = '';
 

Frontend/src/app/components/week/week.component.html

@@ -1,5 +1,5 @@
 <div id="week" class="container-fluid">
     <div class="row">
-        <app-day *ngFor="let day of eventsPerDay" [events]="day" [dayOfWeek]="eventsPerDay.indexOf(day)" class="col"></app-day>
+        <app-day *ngFor="let day of eventsPerDay" [events]="day" [dayOfWeek]="eventsPerDay.indexOf(day)" [showDeletedEvents]="showDeletedEvents" class="col"></app-day>
     </div>
 </div>

Frontend/src/app/components/week/week.component.ts

@@ -8,6 +8,7 @@ import {Event} from '../../models/event';
 })
 export class WeekComponent implements OnInit {
     @Input() events: Event[] = [];
+    @Input() showDeletedEvents: boolean = true;
     eventsPerDay: Event[][] = [];
 
     constructor() {

Frontend/src/app/pages/landingpage/landingpage.component.html

@@ -1,9 +1,9 @@
 <header>
     <p>TINF19B4 RaPla Changes</p>
-    <app-datepicker (selectedMonday)="dateChangedFromPicker($event)"></app-datepicker>
+    <app-datepicker (selectedMonday)="dateChangedFromPicker($event)" (showDeletedEvents)="showDeletedChangedFromPicker($event)"></app-datepicker>
 </header>
 <div id="content">
-    <app-week [events]="events"></app-week>
+    <app-week [events]="events" [showDeletedEvents]="showDeletedEvents"></app-week>
 </div>
 <footer class="fixed-bottom start-50 translate-middle">
     Copyright &#169; 2021 - Patrick Müller

Frontend/src/app/pages/landingpage/landingpage.component.ts

@@ -12,6 +12,7 @@ export class LandingpageComponent implements OnInit {
     eventCount: number = 0;
 
     selectedDate: string = '';
+    showDeletedEvents: boolean = true;
 
     constructor(
         private apiService: ApiService
@@ -32,4 +33,8 @@ export class LandingpageComponent implements OnInit {
         this.selectedDate = newDate;
         this.getEvents();
     }
+
+    showDeletedChangedFromPicker(newShowDeleted: boolean) {
+        this.showDeletedEvents = newShowDeleted;
+    }
 }