Updated the track editing switch logic

This commit is contained in:
Nicolai Ort 2023-05-01 14:13:40 +02:00
parent 175d86745f
commit a953349c14
Signed by: niggl
GPG Key ID: 13AFA55AF62F269F

View File

@ -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">
{#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,7 +129,6 @@
</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"
@ -151,11 +155,31 @@
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={() => {
console.log("TODO:");
editTracks.push(t);
editTracks = editTracks;
}}
class="ml-4 text-indigo-600 hover:text-indigo-900 cursor-pointer"
>{$_("edit")}</button
@ -171,7 +195,6 @@
>
{/if}
</div>
</div>
</td>
</tr>
{/each}