From 99c1e0cb620408ae5fd83220963d3ba317ee8777 Mon Sep 17 00:00:00 2001
From: Adrian Kunz <clashsoft@hotmail.com>
Date: Wed, 8 May 2024 12:06:27 +0200
Subject: [PATCH 1/3] fix(frontend): Better choose-date confirm button

---
 .../app/poll/choose-date/choose-date.component.html | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/apps/frontend/src/app/poll/choose-date/choose-date.component.html b/apps/frontend/src/app/poll/choose-date/choose-date.component.html
index 901f3f5c..f5c9a29c 100644
--- a/apps/frontend/src/app/poll/choose-date/choose-date.component.html
+++ b/apps/frontend/src/app/poll/choose-date/choose-date.component.html
@@ -48,12 +48,13 @@ <h3 class="mb-0">{{ viewDate | calendarDate:('weekViewTitle') }}</h3>
     </mwl-calendar-week-view>
   </div>
   <div class="d-flex justify-content-end">
-    @if (!hasEvents()) {
-      <div class="btn btn-primary" (click)="createEvents()">Create</div>
-    }
-    @if (hasEvents()) {
-      <div class="btn btn-primary" (click)="createEvents()">Update</div>
-    }
+    <button class="btn btn-primary" (click)="createEvents()">
+      @if (hasEvents()) {
+        Update
+      } @else {
+        Create
+      }
+    </button>
   </div>
 </div>
 

From 8a0fca23823353c1243e5dfc2d3fcdca2b817ad8 Mon Sep 17 00:00:00 2001
From: Adrian Kunz <clashsoft@hotmail.com>
Date: Wed, 8 May 2024 12:26:34 +0200
Subject: [PATCH 2/3] feat(frontend): Custom calendar "resolution" / event
 duration

---
 .../choose-date/choose-date.component.html     | 18 +++++++++++++++++-
 .../poll/choose-date/choose-date.component.ts  |  3 ++-
 .../app/poll/services/choose-date.service.ts   |  4 ++--
 3 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/apps/frontend/src/app/poll/choose-date/choose-date.component.html b/apps/frontend/src/app/poll/choose-date/choose-date.component.html
index f5c9a29c..7368e0c6 100644
--- a/apps/frontend/src/app/poll/choose-date/choose-date.component.html
+++ b/apps/frontend/src/app/poll/choose-date/choose-date.component.html
@@ -5,6 +5,21 @@
       <div class="btn btn-primary" mwlCalendarToday [(viewDate)]="viewDate" (click)="scrollToCurrentTime()">Today</div>
       <div class="btn btn-primary" mwlCalendarNextView [view]="'week'" [(viewDate)]="viewDate">Next</div>
     </div>
+    <div ngbDropdown class="d-inline-block me-2">
+      <button type="button" class="btn btn-secondary" id="dropdown-segments" ngbDropdownToggle>
+        Duration: {{ 60 / segments }} min
+      </button>
+      <div ngbDropdownMenu aria-labelledby="dropdown-segments">
+        @for (segment of [12, 6, 4, 3, 2, 1]; track segment) {
+          <button ngbDropdownItem (click)="segments = segment" [class]="segments === segment ? 'active bi-check-circle' : 'bi-circle'">
+            {{ 60 / segment }} min
+          </button>
+        }
+        <div class="dropdown-item-text text-muted">
+          Choose how long each event should be by default.
+        </div>
+      </div>
+    </div>
     <div class="btn-group me-2">
       <button type="button" class="btn btn-primary" routerLink="postpone">Postpone</button>
       <button type="button" class="btn btn-primary" routerLink="autofill">Autofill</button>
@@ -42,7 +57,8 @@ <h3 class="mb-0">{{ viewDate | calendarDate:('weekViewTitle') }}</h3>
       [hourSegmentTemplate]="weekViewHourSegmentTemplate"
       [weekStartsOn]="weekStartsOn"
       (eventTimesChanged)="eventTimesChanged($event)"
-      [hourSegments]="4"
+      [hourSegments]="segments"
+      [eventSnapSize]="60 / segments"
       [eventTemplate]="eventTemplate"
     >
     </mwl-calendar-week-view>
diff --git a/apps/frontend/src/app/poll/choose-date/choose-date.component.ts b/apps/frontend/src/app/poll/choose-date/choose-date.component.ts
index 596a86cb..d463d0da 100644
--- a/apps/frontend/src/app/poll/choose-date/choose-date.component.ts
+++ b/apps/frontend/src/app/poll/choose-date/choose-date.component.ts
@@ -27,6 +27,7 @@ export class ChooseDateComponent implements AfterViewInit {
   note = '';
   noteEvent?: CalendarEvent;
   disabledBefore = Date.now() - 15 * 60 * 1000;
+  segments = 4;
 
   constructor(
     private modalService: NgbModal,
@@ -80,7 +81,7 @@ export class ChooseDateComponent implements AfterViewInit {
         takeUntil(fromEvent(document, 'mouseup')),
       )
       .subscribe((mouseMoveEvent: any) => {
-        const newEnd = this.chooseDateService.calculateNewEnd(segment, segmentElement, mouseMoveEvent);
+        const newEnd = this.chooseDateService.calculateNewEnd(segment, segmentElement, mouseMoveEvent, 60 / this.segments);
         if (newEnd > segment.date && newEnd < endOfView) {
           dragToSelectEvent.end = newEnd;
           this.previousEventDuration = differenceInMinutes(dragToSelectEvent.end, dragToSelectEvent.start);
diff --git a/apps/frontend/src/app/poll/services/choose-date.service.ts b/apps/frontend/src/app/poll/services/choose-date.service.ts
index c1cdfcc5..cf3a0bc6 100644
--- a/apps/frontend/src/app/poll/services/choose-date.service.ts
+++ b/apps/frontend/src/app/poll/services/choose-date.service.ts
@@ -40,11 +40,11 @@ export class ChooseDateService {
     return dragToSelectEvent;
   }
 
-  calculateNewEnd(segment: WeekViewHourSegment, segmentElement: HTMLElement, mouseMoveEvent: any): Date {
+  calculateNewEnd(segment: WeekViewHourSegment, segmentElement: HTMLElement, mouseMoveEvent: any, length: number): Date {
     const segmentPosition = segmentElement.getBoundingClientRect();
     const minutesDifference = this.ceilToNearest(
       (mouseMoveEvent.clientY - segmentPosition.top) / 2,
-      15,
+      length,
     );
 
     const daysDifference =

From 702df479125ad972c3a454e77631ec06591ac1c6 Mon Sep 17 00:00:00 2001
From: Adrian Kunz <clashsoft@hotmail.com>
Date: Thu, 9 May 2024 11:24:30 +0200
Subject: [PATCH 3/3] refactor(frontend): Rename createEvents to saveEvents

---
 .../src/app/poll/choose-date/choose-date.component.html         | 2 +-
 apps/frontend/src/app/poll/choose-date/choose-date.component.ts | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/frontend/src/app/poll/choose-date/choose-date.component.html b/apps/frontend/src/app/poll/choose-date/choose-date.component.html
index 7368e0c6..fbe30185 100644
--- a/apps/frontend/src/app/poll/choose-date/choose-date.component.html
+++ b/apps/frontend/src/app/poll/choose-date/choose-date.component.html
@@ -64,7 +64,7 @@ <h3 class="mb-0">{{ viewDate | calendarDate:('weekViewTitle') }}</h3>
     </mwl-calendar-week-view>
   </div>
   <div class="d-flex justify-content-end">
-    <button class="btn btn-primary" (click)="createEvents()">
+    <button class="btn btn-primary" (click)="saveEvents()">
       @if (hasEvents()) {
         Update
       } @else {
diff --git a/apps/frontend/src/app/poll/choose-date/choose-date.component.ts b/apps/frontend/src/app/poll/choose-date/choose-date.component.ts
index d463d0da..524a1d67 100644
--- a/apps/frontend/src/app/poll/choose-date/choose-date.component.ts
+++ b/apps/frontend/src/app/poll/choose-date/choose-date.component.ts
@@ -116,7 +116,7 @@ export class ChooseDateComponent implements AfterViewInit {
     return this.chooseDateService.events;
   }
 
-  createEvents() {
+  saveEvents() {
     const events: CreatePollEventDto[] = this.chooseDateService.events.map((event: CalendarEvent) => ({
       _id: event.id?.toString(),
       start: event.start.toISOString(),