From 88d285bef7c63321b188cb02be16e8847daeb4cc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20B=C3=B6ckelmann?= <uqpko@student.kit.edu>
Date: Sun, 17 Mar 2024 12:28:07 +0100
Subject: [PATCH] Calendar Header for upcoming deadlines

---
 frontend/src/app/app.module.ts                  |  3 +--
 .../upcoming-deadlines-overview.component.css   | 17 +++++++++++++++++
 .../upcoming-deadlines-overview.component.html  | 15 ++++++++++++---
 .../upcoming-deadlines-overview.component.ts    |  4 ++++
 4 files changed, 34 insertions(+), 5 deletions(-)

diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts
index 1530f36..ca3c8e4 100644
--- a/frontend/src/app/app.module.ts
+++ b/frontend/src/app/app.module.ts
@@ -189,8 +189,7 @@ import {CommonModule} from "@angular/common";
     NgApexchartsModule,
     MatButtonToggleModule,
     MatGridListModule,
-    MatStepperModule,
-    CommonModule
+    MatStepperModule
   ],
   providers: [
     HttpClientModule,
diff --git a/frontend/src/app/upcoming-deadlines-overview/upcoming-deadlines-overview.component.css b/frontend/src/app/upcoming-deadlines-overview/upcoming-deadlines-overview.component.css
index 06d0baa..6b0ea97 100644
--- a/frontend/src/app/upcoming-deadlines-overview/upcoming-deadlines-overview.component.css
+++ b/frontend/src/app/upcoming-deadlines-overview/upcoming-deadlines-overview.component.css
@@ -24,3 +24,20 @@
 .undecorated-link:hover {
   color: #3498db;
 }
+
+.calendar-header {
+  display: flex;
+  align-items: center;
+}
+
+.calendar-control {
+  display: flex;
+}
+
+.calendar-header-title {
+  align-content: center;
+  flex-grow: 1;
+  flex-shrink: 0;
+  text-align: center;
+  margin-right: auto;
+}
diff --git a/frontend/src/app/upcoming-deadlines-overview/upcoming-deadlines-overview.component.html b/frontend/src/app/upcoming-deadlines-overview/upcoming-deadlines-overview.component.html
index 6483b0a..96bb4e9 100644
--- a/frontend/src/app/upcoming-deadlines-overview/upcoming-deadlines-overview.component.html
+++ b/frontend/src/app/upcoming-deadlines-overview/upcoming-deadlines-overview.component.html
@@ -1,8 +1,17 @@
 <div class="container">
   <app-navigation-link-list [navigationLinks]="defaultNavigationLinkPath"></app-navigation-link-list>
 
-
-  <mwl-calendar-month-view [viewDate]="viewDate" [events]="events" [refresh]="refresh" (dayClicked)="dayClicked($event.day)" [activeDayIsOpen]="activeDayIsOpen"
-  ></mwl-calendar-month-view>
+  <div class="calendar-header">
+    <div class="calendar-control">
+      <button mat-flat-button color="primary" mwlCalendarPreviousView [view]="'month'" [(viewDate)]="viewDate"
+              (viewDateChange)="closeOpenMonthViewDay()">Previous</button>
+      <button mat-flat-button mwlCalendarToday [(viewDate)]="viewDate">Today</button>
+      <button mat-flat-button color="primary" mwlCalendarNextView [view]="'month'" [(viewDate)]="viewDate"
+              (viewDateChange)="closeOpenMonthViewDay()">Next</button>
+    </div>
+    <h1 class="calendar-header-title">{{ viewDate | calendarDate:('month' + 'ViewTitle'):'en' }}</h1>
+  </div>
+  <mwl-calendar-month-view [viewDate]="viewDate" [events]="events" [refresh]="refresh" (dayClicked)="dayClicked($event.day)"
+                           [activeDayIsOpen]="activeDayIsOpen"></mwl-calendar-month-view>
 
 </div>
diff --git a/frontend/src/app/upcoming-deadlines-overview/upcoming-deadlines-overview.component.ts b/frontend/src/app/upcoming-deadlines-overview/upcoming-deadlines-overview.component.ts
index 8fbcc89..82382cf 100644
--- a/frontend/src/app/upcoming-deadlines-overview/upcoming-deadlines-overview.component.ts
+++ b/frontend/src/app/upcoming-deadlines-overview/upcoming-deadlines-overview.component.ts
@@ -80,4 +80,8 @@ export class UpcomingDeadlinesOverviewComponent implements OnInit{
       this.viewDate = date;
     }
   }
+
+  closeOpenMonthViewDay() {
+    this.activeDayIsOpen = false;
+  }
 }