From eff53745d91ded60a2cefbe2b859ecbba96dc03f Mon Sep 17 00:00:00 2001
From: Dustin Carlino <dabreegster@gmail.com>
Date: Mon, 26 Feb 2024 14:56:12 +0000
Subject: [PATCH] Reorder lanes (without bringing in a drag-and-drop library
 yet)

---
 .../proposed/CrossSection.svelte              | 23 ++++++++++++++++++-
 .../cross_section/proposed/LaneCard.svelte    | 16 +++++++++++--
 2 files changed, 36 insertions(+), 3 deletions(-)

diff --git a/src/routes/cross_section/proposed/CrossSection.svelte b/src/routes/cross_section/proposed/CrossSection.svelte
index 3a2f1dd637..532b7aa6d8 100644
--- a/src/routes/cross_section/proposed/CrossSection.svelte
+++ b/src/routes/cross_section/proposed/CrossSection.svelte
@@ -12,12 +12,33 @@
     lanesLeftToRight.splice(i, 1);
     lanesLeftToRight = lanesLeftToRight;
   }
+
+  function moveLeft(i: number) {
+    [lanesLeftToRight[i - 1], lanesLeftToRight[i]] = [
+      lanesLeftToRight[i],
+      lanesLeftToRight[i - 1],
+    ];
+  }
+
+  function moveRight(i: number) {
+    [lanesLeftToRight[i + 1], lanesLeftToRight[i]] = [
+      lanesLeftToRight[i],
+      lanesLeftToRight[i + 1],
+    ];
+  }
 </script>
 
 <SecondaryButton on:click={addNewLane}>Add</SecondaryButton>
 
 <div style="display: flex; flex-direction: row">
   {#each lanesLeftToRight as lane, i (i)}
-    <LaneCard bind:value={lane} on:delete={() => deleteLane(i)} />
+    <LaneCard
+      bind:value={lane}
+      on:delete={() => deleteLane(i)}
+      on:moveLeft={() => moveLeft(i)}
+      on:moveRight={() => moveRight(i)}
+      isFirst={i == 0}
+      isLast={i == lanesLeftToRight.length - 1}
+    />
   {/each}
 </div>
diff --git a/src/routes/cross_section/proposed/LaneCard.svelte b/src/routes/cross_section/proposed/LaneCard.svelte
index f98bcbfcda..77a22196db 100644
--- a/src/routes/cross_section/proposed/LaneCard.svelte
+++ b/src/routes/cross_section/proposed/LaneCard.svelte
@@ -1,12 +1,16 @@
 <script lang="ts">
   import { createEventDispatcher } from "svelte";
-  import { WarningButton, Select } from "govuk-svelte";
+  import { SecondaryButton, WarningButton, Select } from "govuk-svelte";
   import { laneTypes } from "../data";
 
   export let value: string;
+  export let isFirst: boolean;
+  export let isLast: boolean;
 
   let dispatch = createEventDispatcher<{
     delete: void;
+    moveLeft: void;
+    moveRight: void;
   }>();
 
   function pairs(list: string[]): [string, string][] {
@@ -16,7 +20,15 @@
 
 <div>
   <Select label="Lane type" emptyOption choices={pairs(laneTypes)} bind:value />
-  <WarningButton on:click={() => dispatch("delete")}>Delete</WarningButton>
+  <div style="display: flex; justify-content: space-between">
+    <SecondaryButton disabled={isFirst} on:click={() => dispatch("moveLeft")}>
+      &larr;
+    </SecondaryButton>
+    <WarningButton on:click={() => dispatch("delete")}>Delete</WarningButton>
+    <SecondaryButton disabled={isLast} on:click={() => dispatch("moveRight")}>
+      &rarr;
+    </SecondaryButton>
+  </div>
 </div>
 
 <style>