lfk/frontend
2
0
Fork 0
Code Issues 3 Pull Requests Actions Projects Releases Wiki Activity

Updated the track editing switch logic

Browse Source
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
1 changed files with 73 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
src/components/tracks/TracksOverview.svelte
View File

@ -9,6 +9,7 @@
import toast from "svelte-french-toast"; import toast from "svelte-french-toast";
$: trackscache = []; $: trackscache = [];
$: deleteTracks = []; $: deleteTracks = [];
$: editTracks = [];
tracksstore.subscribe((val) => { tracksstore.subscribe((val) => {
trackscache = val; trackscache = val;
}); });
@ -98,9 +99,13 @@
<td class="px-6 py-4 whitespace-nowrap"> <td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center"> <div class="flex items-center">
<div class="ml-4"> <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"> <div class="text-sm font-medium text-gray-900">
{t.name} {t.name}
</div> </div>
{/if}
</div> </div>
</div> </div>
</td> </td>
@ -124,7 +129,6 @@
</td> </td>
<td class="px-6 py-4 whitespace-nowrap"> <td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center"> <div class="flex items-center">
<div class="ml-4">
{#if deleteTracks.includes(t.id)} {#if deleteTracks.includes(t.id)}
<button <button
tabindex="0" tabindex="0"
@ -151,11 +155,31 @@
class="ml-4 text-red-600 hover:text-red-900 cursor-pointer" class="ml-4 text-red-600 hover:text-red-900 cursor-pointer"
>{$_("confirm-delete")}</button >{$_("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} {:else}
<button <button
tabindex="0" tabindex="0"
on:click={() => { on:click={() => {
console.log("TODO:"); editTracks.push(t);
editTracks = editTracks;
}} }}
class="ml-4 text-indigo-600 hover:text-indigo-900 cursor-pointer" class="ml-4 text-indigo-600 hover:text-indigo-900 cursor-pointer"
>{$_("edit")}</button >{$_("edit")}</button
@ -171,7 +195,6 @@
> >
{/if} {/if}
</div> </div>
</div>
</td> </td>
</tr> </tr>
{/each} {/each}