Make rotation title clickable and editable (#296)

resolves #279

Author: sukhwinder33445

library/Notifications/Widget/Timeline.php

@@ -22,6 +22,7 @@
 use ipl\Web\Style;
 use ipl\Web\Url;
 use ipl\Web\Widget\Icon;
+use ipl\Web\Widget\Link;
 use SplObjectStorage;
 use Traversable;
 
@@ -281,7 +282,10 @@ protected function assembleSidebarEntry(Rotation $rotation): BaseHtmlElement
         $entry->addHtml(
             $form,
             new Icon('bars', ['data-drag-initiator' => true]),
-            new HtmlElement('span', null, Text::create($rotation->getName()))
+            (new Link(
+                [new HtmlElement('span', null, Text::create($rotation->getName())), new Icon('cog')],
+                Links::rotationSettings($rotation->getId(), $rotation->getScheduleId())
+            ))->openInModal()
         );
 
         return $entry;

library/Notifications/Widget/Timeline/Rotation.php

@@ -39,6 +39,16 @@ public function getId(): int
         return $this->model->id;
     }
 
+    /**
+     * Get the schedule ID of the rotation
+     *
+     * @return int
+     */
+    public function getScheduleId(): int
+    {
+        return $this->model->schedule_id;
+    }
+
     /**
      * Get the name of the rotation
      *
@@ -137,7 +147,7 @@ public function fetchTimeperiodEntries(DateTime $after, DateTime $until): Genera
                         ->setMember($member)
                         ->setStart($recurrence)
                         ->setEnd($recurrenceEnd)
-                        ->setUrl(Links::rotationSettings($this->model->id, $this->model->schedule_id));
+                        ->setUrl(Links::rotationSettings($this->getId(), $this->getScheduleId()));
 
                     yield $occurrence;
                 }
@@ -146,7 +156,7 @@ public function fetchTimeperiodEntries(DateTime $after, DateTime $until): Genera
                     ->setMember($member)
                     ->setStart($timeperiodEntry->start_time)
                     ->setEnd($timeperiodEntry->end_time)
-                    ->setUrl(Links::rotationSettings($this->model->id, $this->model->schedule_id));
+                    ->setUrl(Links::rotationSettings($this->getId(), $this->getScheduleId()));
 
                 yield $entry;
             }

public/css/timeline.less

@@ -28,6 +28,20 @@
         margin-left: .5em;
         .text-ellipsis();
       }
+
+      > a {
+        display: flex;
+        width: 100%;
+        align-items: baseline;
+        margin-left: .5em;
+
+        span {
+          width: 0;
+          flex: 1 0 auto;
+          margin-right: 0.25em;
+          .text-ellipsis();
+        }
+      }
     }
 
     .overlay .entry {
@@ -80,13 +94,14 @@
   .rotation-name {
     font-size: 1.25em;
     font-weight: bold;
-    cursor: grab;
 
     [data-drag-initiator] {
       color: @gray-light;
-    }
-    &:hover [data-drag-initiator] {
-      color: @text-color;
+
+      &:hover {
+        cursor: grab;
+        color: @list-item-title-hover-color;
+      }
     }
 
     // :not(:empty) is only necessary to increase specificity
@@ -97,6 +112,22 @@
     &.sortable-ghost {
       opacity: .5;
     }
+
+    > a {
+      text-decoration: none;
+
+      i {
+        display: none;
+      }
+
+      &:hover {
+        color: @list-item-title-hover-color;
+
+        i {
+          display: inline-block;
+        }
+      }
+    }
   }
 
   .entry .icon {

public/js/schedule.js

@@ -41,7 +41,8 @@
             Sortable.create(sideBar, {
                 scroll: true,
                 direction: 'vertical',
-                draggable: '.rotation-name'
+                draggable: '.rotation-name',
+                handle: '.rotation-name > i[data-drag-initiator]'
             });
         }