allow editing of hourLogs

redpencilio · Oct 24, 2024 · e123640 · e123640
1 parent 88a2fac
commit e123640
Show file tree

Hide file tree

Showing 10 changed files with 187 additions and 105 deletions.
diff --git a/app/components/full-calendar.hbs b/app/components/full-calendar.hbs
@@ -1,10 +1,21 @@
-{{#if this.clickedDate}}
+{{#if this.clickedDateInfo}}
   <TimeLogPopover
     @anchorElement={{this.clickedDateElement}}
     @projects={{@projects}}
     @favoriteProjects={{@favoriteProjects}}
     @onSave={{this.onEventsAdded}}
-    @onCancel={{this.clearSelectedRange}}
+    @onCancel={{this.onCancel}}
+  />
+{{/if}}
+{{#if this.clickedEventInfo}}
+  <TimeEditPopover
+    @anchorElement={{this.clickedDateElement}}
+    @projects={{@projects}}
+    @favoriteProjects={{@favoriteProjects}}
+    @selectedHourLog={{this.clickedHourLog}}
+    @onSave={{fn this.editHourLog this.clickedHourLog}}
+    @onCancel={{this.onCancel}}
+    @onDelete={{fn this.deleteHourLog this.clickedHourLog}}
   />
 {{/if}}
 <div

diff --git a/app/components/full-calendar.js b/app/components/full-calendar.js
@@ -8,11 +8,13 @@ import { service } from '@ember/service';
 
 export default class FullCalendarComponent extends Component {
   @service dateNavigation;
+  @service mockData;
 
   @tracked calendar = null;
   calendarEl = null;
-  @tracked clickedDate = null;
-  @tracked clickedDateElement = null;
+
+  @tracked clickedEventInfo = null;
+  @tracked clickedDateInfo = null;
 
   @action
   setupCalendar(element) {
@@ -34,11 +36,9 @@ export default class FullCalendarComponent extends Component {
       plugins: [interactionPlugin, dayGridPlugin],
       initialView: 'dayGridMonth', // Sets the default view to month grid
       events: this.args.events || [], // Pass the events from parent as an argument
-      editable: false,
       droppable: false, // Allows for drag and drop of external elements
       dateClick: this.onDateClick.bind(this), // Example of handling date clicks
-      select: this.onDateSelect.bind(this),
-      unselect: this.onDateUnselect.bind(this),
+      eventClick: this.onEventClick.bind(this),
       eventDisplay: 'list-item',
       // selectable: true,
       dayMaxEvents: 6,
@@ -57,6 +57,15 @@ export default class FullCalendarComponent extends Component {
         start: firstDayOfMonth,
         end: lastDayOfMonth,
       },
+
+      // Drag and Drop
+      editable: true, // Allows for drag and drop of internal events
+      eventConstraint: {
+        // Where events can be dragged to
+        start: firstDayOfMonth,
+        end: lastDayOfMonth,
+      },
+      eventDrop: this.onEventDrop.bind(this),
       customButtons: {
         prev: {
           text: 'Previous',
@@ -77,24 +86,35 @@ export default class FullCalendarComponent extends Component {
     this.calendar.render(); // Renders the calendar
   }
 
-  @action
-  onDateClick(info) {
-    if (info.date.getMonth() === this.args.focusDate.getMonth()) {
-      this.clickedDate = info.date;
-      this.clickedDateElement = this.calendarEl.querySelector(
-        `[data-date="${info.dateStr}"]`,
-      );
-    }
+  onEventClick(info) {
+    this.clickedDateInfo = false;
+    this.clickedEventInfo = info;
   }
 
-  @action
-  onDateSelect({ start, end }) {
-    this.selectedRange = [start, end];
+  onEventDrop(info) {
+    const newLog = {
+      ...info.oldEvent.extendedProps.hourLog,
+      date: info.event.startStr,
+    };
+    this.mockData.updateHourLogById(
+      info.oldEvent.extendedProps.hourLog.id,
+      newLog,
+    );
+  }
+
+  get clickedDateElement() {
+    const dateStr = this.clickedEventInfo
+      ? this.clickedEventInfo.event.startStr
+      : this.clickedDateInfo.dateStr;
+    return this.calendarEl.querySelector(`[data-date="${dateStr}"]`);
   }
 
   @action
-  onDateUnselect() {
-    // this.clearSelectedRange();
+  onDateClick(info) {
+    this.clickedEventInfo = null;
+    if (info.date.getMonth() === this.args.focusDate.getMonth()) {
+      this.clickedDateInfo = info;
+    }
   }
 
   @action
@@ -115,9 +135,13 @@ export default class FullCalendarComponent extends Component {
   }
 
   @action
-  clearSelectedRange() {
-    this.selectedRange = null;
-    this.clickedDate = null;
+  onCancel() {
+    this.clearPopovers();
+  }
+
+  clearPopovers() {
+    this.clickedDateInfo = null;
+    this.clickedEventInfo = null;
   }
 
   @action
@@ -128,6 +152,23 @@ export default class FullCalendarComponent extends Component {
     this.calendar.render();
   }
 
+  @action
+  editHourLog(hourLog, { hours, project }) {
+    const newLog = { ...hourLog, hours, project };
+    this.mockData.updateHourLogById(hourLog.id, newLog);
+    this.clearPopovers();
+  }
+
+  @action
+  deleteHourLog(hourLog) {
+    this.mockData.deleteHourLogById(hourLog.id);
+    this.clearPopovers();
+  }
+
+  get clickedHourLog() {
+    return this.clickedEventInfo?.event.extendedProps.hourLog;
+  }
+
   @action
   gotoFocusDate() {
     this.calendar.gotoDate(this.args.focusDate);

diff --git a/app/components/popover.hbs b/app/components/popover.hbs
@@ -0,0 +1,11 @@
+<div
+  class="transform transition-all ease-in-out animate-fly-right animate-fly-left-out absolute z-10 w-80 rounded-md shadow-xl bg-white ring-1 ring-black ring-opacity-5"
+  role="menu"
+  aria-orientation="vertical"
+  aria-labelledby="menu-button"
+  tabindex="-1"
+  {{did-insert this.onInsert}}
+  {{floating-ui-auto-update @anchorElement this.moveToScreenPos}}
+>
+  {{yield}}
+</div>
diff --git a/app/components/popover.js b/app/components/popover.js
@@ -0,0 +1,40 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { computePosition, shift, offset } from '@floating-ui/dom';
+import { tracked } from '@glimmer/tracking';
+import { service } from '@ember/service';
+
+export default class TimeLogPopoverComponent extends Component {
+  @service localStorage;
+
+  elementRef = null;
+
+  @action
+  onInsert(el) {
+    this.elementRef = el;
+  }
+
+  @action
+  onToggle(value) {
+    this.localStorage.useAdvancedLogPopover = value;
+  }
+
+  @action
+  moveToScreenPos() {
+    computePosition(this.args.anchorElement, this.elementRef, {
+      placement: 'right-start',
+      middleware: [
+        offset({
+          mainAxis: 8,
+          crossAxis: -8,
+        }),
+        shift({ padding: 5 }),
+      ],
+    }).then(({ x, y }) => {
+      Object.assign(this.elementRef.style, {
+        left: `${x}px`,
+        top: `${y}px`,
+      });
+    });
+  }
+}
diff --git a/app/components/time-edit-popover.hbs b/app/components/time-edit-popover.hbs
@@ -0,0 +1,13 @@
+<Popover @anchorElement={{@anchorElement}}>
+  <div class="mx-4 mb-3 mt-4">
+    <TimeLogPopover::Simple
+      @selectedHourLog={{@selectedHourLog}}
+      @projects={{@projects}}
+      @favoriteProjects={{@favoriteProjects}}
+      @onSave={{@onSave}}
+      @onCancel={{@onCancel}}
+      @onDelete={{@onDelete}}
+      @allowDelete={{true}}
+    />
+  </div>
+</Popover>
diff --git a/app/components/time-log-popover.hbs b/app/components/time-log-popover.hbs
@@ -1,35 +1,25 @@
-<div
-  class="transform transition-all ease-in-out animate-fly-right animate-fly-left-out absolute z-10 w-80 rounded-md shadow-xl bg-white ring-1 ring-black ring-opacity-5"
-  role="menu"
-  aria-orientation="vertical"
-  aria-labelledby="menu-button"
-  tabindex="-1"
-  {{did-insert this.onInsert}}
-  {{floating-ui-auto-update @anchorElement this.moveToScreenPos}}
->
-  <div class="mx-4 mb-2">
-    <div class="flex justify-end my-4">
+<Popover @anchorElement={{@anchorElement}}>
+  <div class="mx-4 mb-3">
+    <div class="flex justify-end mt-4 mb-2">
       <Toggle::Small
         @checked={{this.localStorage.useAdvancedLogPopover}}
         @onToggle={{this.onToggle}}
       >Advanced</Toggle::Small>
     </div>
     {{#if this.localStorage.useAdvancedLogPopover}}
       <TimeLogPopover::Multi
-        @anchorElement={{@anchorElement}}
         @projects={{@projects}}
         @favoriteProjects={{@favoriteProjects}}
         @onSave={{@onSave}}
         @onCancel={{@onCancel}}
       />
     {{else}}
       <TimeLogPopover::Simple
-        @anchorElement={{@anchorElement}}
         @projects={{@projects}}
         @favoriteProjects={{@favoriteProjects}}
         @onSave={{@onSave}}
         @onCancel={{@onCancel}}
       />
     {{/if}}
   </div>
-</div>
+</Popover>
diff --git a/app/components/time-log-popover.js b/app/components/time-log-popover.js
@@ -22,7 +22,7 @@ export default class TimeLogPopoverComponent extends Component {
   @action
   moveToScreenPos() {
     computePosition(this.args.anchorElement, this.elementRef, {
-      placement: 'right-start',
+      placement: this.args.placement ?? 'right-start',
       middleware: [
         offset({
           mainAxis: 8,

diff --git a/app/components/time-log-popover/simple.hbs b/app/components/time-log-popover/simple.hbs
@@ -1,4 +1,11 @@
 <div role="none">
+  {{#if @allowDelete}}
+    <div class="flex justify-end">
+      <button type="button" {{on "click" @onDelete}}>
+        <TrashIcon class="size-5 stroke-red-500" />
+      </button>
+    </div>
+  {{/if}}
   <form {{on "submit" this.submitLog}}>
     <div>
       <label