feat: Adds update path to equivalent length form / database / view routes.

Sources/ViewController/Views/EffectiveLength/EffectiveLengthsView.swift

@@ -3,32 +3,56 @@ import ElementaryHTMX
 import ManualDCore
 import Styleguide
 
+// TODO: Group into grids of supply / return.
+
 struct EffectiveLengthsView: HTML, Sendable {
 
   let projectID: Project.ID
   let effectiveLengths: [EffectiveLength]
 
+  var supplies: [EffectiveLength] {
+    effectiveLengths.filter({ $0.type == .supply })
+      .sorted { $0.totalEquivalentLength > $1.totalEquivalentLength }
+  }
+
+  var returns: [EffectiveLength] {
+    effectiveLengths.filter({ $0.type == .return })
+      .sorted { $0.totalEquivalentLength > $1.totalEquivalentLength }
+  }
+
   var body: some HTML {
     div(
-      .class("m-4")
+      .class("m-4 space-y-4")
     ) {
       Row {
         h1(.class("text-2xl font-bold")) { "Equivalent Lengths" }
         PlusButton()
-          .attributes(.showModal(id: EffectiveLengthForm.id))
+          .attributes(.showModal(id: EffectiveLengthForm.id(nil)))
       }
       .attributes(.class("pb-6"))
 
-      div(
-        .id("effectiveLengths"),
-        .class("space-y-6")
-      ) {
-        for row in effectiveLengths {
-          EffectiveLengthView(effectiveLength: row)
+      EffectiveLengthForm(projectID: projectID, dismiss: true)
+
+      div {
+        h2(.class("text-xl font-bold pb-4")) { "Supplies" }
+        div(.class("grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4")) {
+          for (n, row) in supplies.enumerated() {
+            EffectiveLengthView(effectiveLength: row)
+              .attributes(.class(n == 0 ? "border-primary" : "border-gray-200"))
+          }
+        }
+      }
+
+      div {
+        h2(.class("text-xl font-bold pb-4")) { "Returns" }
+        div(.class("grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 space-x-4 space-y-4")) {
+          for (n, row) in returns.enumerated() {
+            EffectiveLengthView(effectiveLength: row)
+              .attributes(.class(n == 0 ? "border-secondary" : "border-gray-200"))
+          }
         }
       }
 
-      EffectiveLengthForm(projectID: projectID, dismiss: true)
     }
   }
 
@@ -42,52 +66,84 @@ struct EffectiveLengthsView: HTML, Sendable {
     }
 
     var groupsTotal: Double {
-      effectiveLength.groups.reduce(into: 0) {
-        $0 += ($1.value * Double($1.quantity))
-      }
+      effectiveLength.groups.totalEquivalentLength
+    }
+
+    var id: String {
+      return "effectiveLenghtCard_\(effectiveLength.id.uuidString.replacing("-", with: ""))"
     }
 
     var body: some HTML<HTMLTag.div> {
       div(
-        .class(
-          """
-          border border-gray-200 rounded-lg shadow-lg p-4
-          """
-        )
+        .class("card h-full bg-base-100 shadow-sm border rounded-lg"),
+        .id(id)
       ) {
-        Row {
-          span(.class("text-xl font-bold")) { effectiveLength.name }
-        }
-        Row {
+        div(.class("card-body")) {
+          Row {
+            h2 { effectiveLength.name }
+            div(
+              .class("space-x-4")
+            ) {
+              span(.class("text-sm italic")) {
+                "Total"
+              }
+              .attributes(.class("text-primary"), when: effectiveLength.type == .supply)
+              .attributes(.class("text-secondary"), when: effectiveLength.type == .return)
+
+              Number(self.effectiveLength.totalEquivalentLength, digits: 0)
+                .attributes(.class("badge badge-outline text-lg"))
+                .attributes(
+                  .class("badge-primary"), when: effectiveLength.type == .supply
+                )
+                .attributes(
+                  .class("badge-secondary"), when: effectiveLength.type == .return
+                )
+            }
+          }
+          .attributes(.class("card-title pb-6"))
+
           Label("Straight Lengths")
-        }
-        for length in effectiveLength.straightLengths {
-          Row {
-            div {}
-            Number(length)
-          }
-        }
 
-        Row {
-          Label("Groups")
-          Label("Equivalent Length")
-          Label("Quantity")
-        }
-        .attributes(.class("border-b border-gray-200"))
-
-        for group in effectiveLength.groups {
-          Row {
-            span { "\(group.group)-\(group.letter)" }
-            Number(group.value)
-            Number(group.quantity)
+          for length in effectiveLength.straightLengths {
+            div(.class("flex justify-end")) {
+              Number(length)
+            }
           }
+
+          Row {
+            Label("Groups")
+            Label("Equivalent Length")
+            Label("Quantity")
+          }
+          .attributes(.class("border-b border-gray-200"))
+
+          for group in effectiveLength.groups {
+            Row {
+              span { "\(group.group)-\(group.letter)" }
+              Number(group.value)
+              Number(group.quantity)
+            }
+          }
+
+          div(.class("card-actions justify-end pt-6 space-y-4 mt-auto")) {
+            // TODO: Delete.
+            TrashButton()
+              .attributes(
+                .hx.delete(
+                  route: .project(
+                    .detail(
+                      effectiveLength.projectID, .equivalentLength(.delete(id: effectiveLength.id)))
+                  )),
+                .hx.confirm("Are you sure?"),
+                .hx.target("#\(id)"),
+                .hx.swap(.outerHTML)
+              )
+            EditButton()
+              .attributes(.showModal(id: EffectiveLengthForm.id(effectiveLength)))
+          }
+
+          EffectiveLengthForm(effectiveLength: effectiveLength)
         }
-        Row {
-          Label("Total")
-          Number(Double(straightLengthsTotal) + groupsTotal, digits: 0)
-            .attributes(.class("text-xl font-bold"))
-        }
-        .attributes(.class("border-b border-t border-gray-200"))
       }
     }
   }