From 77ae15a468a5eddaa5191df71002d6d510089311 Mon Sep 17 00:00:00 2001
From: Sam <sam@sam.wf>
Date: Sun, 19 Mar 2023 00:17:19 +0100
Subject: [PATCH] feat: add changing order of fields (closes #28)

---
 frontend/src/routes/edit/EditableField.svelte | 19 +++++++++++++++++--
 .../src/routes/edit/member/[id]/+page.svelte  | 17 ++++++++++++++++-
 frontend/src/routes/edit/profile/+page.svelte | 17 ++++++++++++++++-
 3 files changed, 49 insertions(+), 4 deletions(-)

diff --git a/frontend/src/routes/edit/EditableField.svelte b/frontend/src/routes/edit/EditableField.svelte
index 68b81f1..72b1ad0 100644
--- a/frontend/src/routes/edit/EditableField.svelte
+++ b/frontend/src/routes/edit/EditableField.svelte
@@ -6,6 +6,7 @@
 
   export let field: Field;
   export let deleteField: () => void;
+  export let moveField: (up: boolean) => void;
 
   let newEntry: string = "";
 
@@ -31,12 +32,26 @@
   };
 </script>
 
-<div>
+<div class="p-3">
+  <h5>{field.name}</h5>
   <InputGroup class="m-1">
-    <InputGroupText>Name</InputGroupText>
+    <IconButton
+      color="secondary"
+      icon="chevron-left"
+      tooltip="Move field left"
+      click={() => moveField(true)}
+    />
+    <IconButton
+      color="secondary"
+      icon="chevron-right"
+      tooltip="Move field right"
+      click={() => moveField(false)}
+    />
+    <!-- <InputGroupText>Name</InputGroupText> -->
     <Input bind:value={field.name} />
     <Button color="danger" on:click={() => deleteField()}>Delete field</Button>
   </InputGroup>
+  <hr />
   {#each field.entries as _, index}
     <FieldEntry
       bind:value={field.entries[index].value}
diff --git a/frontend/src/routes/edit/member/[id]/+page.svelte b/frontend/src/routes/edit/member/[id]/+page.svelte
index 47abd82..2cdf312 100644
--- a/frontend/src/routes/edit/member/[id]/+page.svelte
+++ b/frontend/src/routes/edit/member/[id]/+page.svelte
@@ -154,6 +154,17 @@
     pronouns[newIndex] = temp;
   };
 
+  const moveField = (index: number, up: boolean) => {
+    if (up && index == 0) return;
+    if (!up && index == fields.length - 1) return;
+
+    const newIndex = up ? index - 1 : index + 1;
+
+    const temp = fields[index];
+    fields[index] = fields[newIndex];
+    fields[newIndex] = temp;
+  };
+
   const addName = () => {
     names = [...names, { value: newName, status: WordStatus.Okay }];
     newName = "";
@@ -425,7 +436,11 @@
   <div class="grid gap-3">
     <div class="row row-cols-1 row-cols-md-2">
       {#each fields as _, index}
-        <EditableField bind:field={fields[index]} deleteField={() => removeField(index)} />
+        <EditableField
+          bind:field={fields[index]}
+          deleteField={() => removeField(index)}
+          moveField={(up) => moveField(index, up)}
+        />
       {/each}
     </div>
   </div>
diff --git a/frontend/src/routes/edit/profile/+page.svelte b/frontend/src/routes/edit/profile/+page.svelte
index faec515..eae1a32 100644
--- a/frontend/src/routes/edit/profile/+page.svelte
+++ b/frontend/src/routes/edit/profile/+page.svelte
@@ -150,6 +150,17 @@
     pronouns[newIndex] = temp;
   };
 
+  const moveField = (index: number, up: boolean) => {
+    if (up && index == 0) return;
+    if (!up && index == fields.length - 1) return;
+
+    const newIndex = up ? index - 1 : index + 1;
+
+    const temp = fields[index];
+    fields[index] = fields[newIndex];
+    fields[newIndex] = temp;
+  };
+
   const addName = () => {
     names = [...names, { value: newName, status: WordStatus.Okay }];
     newName = "";
@@ -367,7 +378,11 @@
   <div class="grid gap-3">
     <div class="row row-cols-1 row-cols-md-2">
       {#each fields as _, index}
-        <EditableField bind:field={fields[index]} deleteField={() => removeField(index)} />
+        <EditableField
+          bind:field={fields[index]}
+          deleteField={() => removeField(index)}
+          moveField={(up) => moveField(index, up)}
+        />
       {/each}
     </div>
   </div>