Add improved maintenance column with a dropdown showing tasks

changelog.d/1745.changed.md

@@ -0,0 +1 @@
+Improve maintenance column by adding a dropdown with tasks that affect the incident

src/argus/htmx/static/styles.css

@@ -5616,6 +5616,10 @@ details.collapse summary::-webkit-details-marker {
   width: 13rem;
 }
 
+.w-72 {
+  width: 18rem;
+}
+
 .w-\[1\%\] {
   width: 1%;
 }
@@ -6439,6 +6443,10 @@ details.collapse summary::-webkit-details-marker {
   opacity: 0;
 }
 
+.opacity-60 {
+  opacity: 0.6;
+}
+
 .opacity-70 {
   opacity: 0.7;
 }
@@ -6504,6 +6512,12 @@ details.collapse summary::-webkit-details-marker {
   transition-duration: 150ms;
 }
 
+.transition-colors {
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
 .duration-300 {
   transition-duration: 300ms;
 }
@@ -6549,6 +6563,11 @@ details.collapse summary::-webkit-details-marker {
   background-color: var(--fallback-b2,oklch(var(--b2)/0.4));
 }
 
+.hover\:bg-base-200:hover {
+  --tw-bg-opacity: 1;
+  background-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-bg-opacity, 1)));
+}
+
 .hover\:text-primary:hover {
   --tw-text-opacity: 1;
   color: var(--fallback-p,oklch(var(--p)/var(--tw-text-opacity, 1)));

src/argus/htmx/templates/htmx/incident/cells/_incident_maintenance.html

@@ -1,4 +1,35 @@
 <!-- htmx/templates/htmx/incident/cells/_incident_maintenance.html -->
-{% if incident.planned_maintenance_tasks.exists %}
-  <i class="text-primary text-lg fa-solid fa-person-digging"></i>
-{% endif %}
+{% with tasks=incident.planned_maintenance_tasks.all %}
+  {% if tasks %}
+    <div class="dropdown dropdown-hover dropdown-bottom dropdown-end">
+      <button tabindex="0"
+              class="btn btn-ghost btn-sm cursor-pointer flex items-center gap-1 text-primary">
+        <i class="fa-solid fa-person-digging"></i>
+        <span class="text-xs">{{ tasks|length }} task{{ tasks|length|pluralize }}</span>
+      </button>
+      <div tabindex="0"
+           class="dropdown-content bg-base-100 rounded-box z-20 w-72 p-2 shadow-lg flex flex-col gap-1">
+        {% for task in tasks %}
+          <a href="{% url 'htmx:plannedmaintenance-detail' pk=task.pk %}"
+             class="flex flex-col gap-0.5 p-2 rounded-lg hover:bg-base-200 transition-colors">
+            <span class="font-medium truncate" title="{{ task.description }}">{{ task.description|default:"No description" }}</span>
+            <div class="flex items-center justify-between gap-2 text-xs opacity-60">
+              <span>{{ task.start_time|date:preferences.argus_htmx.date_format }}
+                {% if task.end_time.year >= 9999 %}
+                  - now
+                {% else %}
+                  - {{ task.end_time|date:preferences.argus_htmx.date_format }}
+                {% endif %}
+              </span>
+              {% if task.current %}
+                <span class="badge badge-success badge-sm">Ongoing</span>
+              {% else %}
+                <span class="badge badge-ghost badge-sm">Completed</span>
+              {% endif %}
+            </div>
+          </a>
+        {% endfor %}
+      </div>
+    </div>
+  {% endif %}
+{% endwith %}