From a953349c1478b912e08f88c1fb70c74af0bc9bbb Mon Sep 17 00:00:00 2001
From: Nicolai Ort <info@nicolai-ort.com>
Date: Mon, 1 May 2023 14:13:40 +0200
Subject: [PATCH] Updated the track editing switch logic

---
 src/components/tracks/TracksOverview.svelte | 123 ++++++++++++--------
 1 file changed, 73 insertions(+), 50 deletions(-)

diff --git a/src/components/tracks/TracksOverview.svelte b/src/components/tracks/TracksOverview.svelte
index a5a5afc2..0566b9fb 100644
--- a/src/components/tracks/TracksOverview.svelte
+++ b/src/components/tracks/TracksOverview.svelte
@@ -9,6 +9,7 @@
   import toast from "svelte-french-toast";
   $: trackscache = [];
   $: deleteTracks = [];
+  $: editTracks = [];
   tracksstore.subscribe((val) => {
     trackscache = val;
   });
@@ -98,9 +99,13 @@
                 <td class="px-6 py-4 whitespace-nowrap">
                   <div class="flex items-center">
                     <div class="ml-4">
-                      <div class="text-sm font-medium text-gray-900">
-                        {t.name}
-                      </div>
+                      {#if editTracks.includes(t.id)}
+                        <input class="shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-0.5" type="text" value={t.name} />
+                      {:else}
+                        <div class="text-sm font-medium text-gray-900">
+                          {t.name}
+                        </div>
+                      {/if}
                     </div>
                   </div>
                 </td>
@@ -124,53 +129,71 @@
                 </td>
                 <td class="px-6 py-4 whitespace-nowrap">
                   <div class="flex items-center">
-                    <div class="ml-4">
-                      {#if deleteTracks.includes(t.id)}
-                        <button
-                          tabindex="0"
-                          on:click={() => {
-                            deleteTracks = deleteTracks.filter((tr) => {
-                              tr.id !== t.id;
-                            });
-                          }}
-                          class="ml-4 text-gray-600 hover:text-gray-900 cursor-pointer"
-                          >{$_("cancel")}</button
-                        >
-                        <button
-                          tabindex="0"
-                          on:click={async () => {
-                            TrackService.trackControllerRemove(t.id);
-                            deleteTracks = deleteTracks.filter((tr) => {
-                              tr.id !== t.id;
-                            });
-                            tracksstore.set(
-                              $tracksstore.filter((tr) => tr.id !== t.id)
-                            );
-                            toast($_("runner-deleted"));
-                          }}
-                          class="ml-4 text-red-600 hover:text-red-900 cursor-pointer"
-                          >{$_("confirm-delete")}</button
-                        >
-                      {:else}
-                        <button
-                          tabindex="0"
-                          on:click={() => {
-                            console.log("TODO:");
-                          }}
-                          class="ml-4 text-indigo-600 hover:text-indigo-900 cursor-pointer"
-                          >{$_("edit")}</button
-                        >
-                        <button
-                          tabindex="0"
-                          on:click={() => {
-                            deleteTracks.push(t.id);
-                            deleteTracks = deleteTracks;
-                          }}
-                          class="ml-4 text-red-600 hover:text-red-900 cursor-pointer"
-                          >{$_("delete")}</button
-                        >
-                      {/if}
-                    </div>
+                    {#if deleteTracks.includes(t.id)}
+                      <button
+                        tabindex="0"
+                        on:click={() => {
+                          deleteTracks = deleteTracks.filter((tr) => {
+                            tr.id !== t.id;
+                          });
+                        }}
+                        class="ml-4 text-gray-600 hover:text-gray-900 cursor-pointer"
+                        >{$_("cancel")}</button
+                      >
+                      <button
+                        tabindex="0"
+                        on:click={async () => {
+                          TrackService.trackControllerRemove(t.id);
+                          deleteTracks = deleteTracks.filter((tr) => {
+                            tr.id !== t.id;
+                          });
+                          tracksstore.set(
+                            $tracksstore.filter((tr) => tr.id !== t.id)
+                          );
+                          toast($_("runner-deleted"));
+                        }}
+                        class="ml-4 text-red-600 hover:text-red-900 cursor-pointer"
+                        >{$_("confirm-delete")}</button
+                      >
+                    {:else if editTracks.findIndex((tr)=>tr.id === t.id) !== -1}
+                      <button
+                        tabindex="0"
+                        on:click={() => {
+                          editTracks = editTracks.filter((tr) => {
+                            tr.id !== t.id;
+                          });
+                        }}
+                        class="ml-4 text-gray-600 hover:text-gray-900 cursor-pointer"
+                        >{$_("cancel")}</button
+                      >
+                      <button
+                        tabindex="0"
+                        on:click={async () => {
+                          console.log("TODO:");
+                        }}
+                        class="ml-4 text-green-600 hover:text-green-900 cursor-pointer"
+                        >{$_("save")}</button
+                      >
+                    {:else}
+                      <button
+                        tabindex="0"
+                        on:click={() => {
+                          editTracks.push(t);
+                          editTracks = editTracks;
+                        }}
+                        class="ml-4 text-indigo-600 hover:text-indigo-900 cursor-pointer"
+                        >{$_("edit")}</button
+                      >
+                      <button
+                        tabindex="0"
+                        on:click={() => {
+                          deleteTracks.push(t.id);
+                          deleteTracks = deleteTracks;
+                        }}
+                        class="ml-4 text-red-600 hover:text-red-900 cursor-pointer"
+                        >{$_("delete")}</button
+                      >
+                    {/if}
                   </div>
                 </td>
               </tr>