Merge pull request #164 from Morphclue/feat/custom-calendar-segments

Custom Duration / Calendar Segments
Morphclue · May 9, 2024 · fe55bb2 · fe55bb2
2 parents 22f1632 + 702df47
commit fe55bb2
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 11 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
@@ -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,18 +57,20 @@ <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>
   </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)="saveEvents()">
+      @if (hasEvents()) {
+        Update
+      } @else {
+        Create
+      }
+    </button>
   </div>
 </div>
 

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
@@ -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);
@@ -115,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(),

diff --git 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 =