From 848d0787a50a42db31b0ee8a590e38dfe5ad5e4e Mon Sep 17 00:00:00 2001
From: Sam <sam@sam.wf>
Date: Sun, 23 Apr 2023 04:01:02 +0200
Subject: [PATCH] feat(frontend): add move buttons to links (fixes #54)

---
 .../src/routes/edit/member/[id]/+page.svelte  | 23 +++++++++++++++++++
 frontend/src/routes/edit/profile/+page.svelte | 23 +++++++++++++++++++
 2 files changed, 46 insertions(+)

diff --git a/frontend/src/routes/edit/member/[id]/+page.svelte b/frontend/src/routes/edit/member/[id]/+page.svelte
index 8f8dab7..864ad80 100644
--- a/frontend/src/routes/edit/member/[id]/+page.svelte
+++ b/frontend/src/routes/edit/member/[id]/+page.svelte
@@ -200,6 +200,17 @@
     fields[newIndex] = temp;
   };
 
+  const moveLink = (index: number, up: boolean) => {
+    if (up && index == 0) return;
+    if (!up && index == links.length - 1) return;
+
+    const newIndex = up ? index - 1 : index + 1;
+
+    const temp = links[index];
+    links[index] = links[newIndex];
+    links[newIndex] = temp;
+  };
+
   const addName = (event: Event) => {
     event.preventDefault();
 
@@ -534,6 +545,18 @@
     <div class="mt-3">
       {#each links as _, index}
         <div class="input-group m-1">
+          <IconButton
+            icon="chevron-up"
+            color="secondary"
+            tooltip="Move link up"
+            click={() => moveLink(index, true)}
+          />
+          <IconButton
+            icon="chevron-down"
+            color="secondary"
+            tooltip="Move link down"
+            click={() => moveLink(index, false)}
+          />
           <input type="text" class="form-control" bind:value={links[index]} />
           <IconButton
             color="danger"
diff --git a/frontend/src/routes/edit/profile/+page.svelte b/frontend/src/routes/edit/profile/+page.svelte
index 342837d..74c67f3 100644
--- a/frontend/src/routes/edit/profile/+page.svelte
+++ b/frontend/src/routes/edit/profile/+page.svelte
@@ -214,6 +214,17 @@
     fields[newIndex] = temp;
   };
 
+  const moveLink = (index: number, up: boolean) => {
+    if (up && index == 0) return;
+    if (!up && index == links.length - 1) return;
+
+    const newIndex = up ? index - 1 : index + 1;
+
+    const temp = links[index];
+    links[index] = links[newIndex];
+    links[newIndex] = temp;
+  };
+
   const addName = (event: Event) => {
     event.preventDefault();
 
@@ -507,6 +518,18 @@
     <div class="mt-3">
       {#each links as _, index}
         <div class="input-group m-1">
+          <IconButton
+            icon="chevron-up"
+            color="secondary"
+            tooltip="Move link up"
+            click={() => moveLink(index, true)}
+          />
+          <IconButton
+            icon="chevron-down"
+            color="secondary"
+            tooltip="Move link down"
+            click={() => moveLink(index, false)}
+          />
           <input type="text" class="form-control" bind:value={links[index]} />
           <IconButton
             color="danger"