nemunaire/reveil
1
0
Fork 0
Code Issues 1 Pull Requests 2 Releases 22 Activity

Add a confirmation before deleting the song

Browse Source
This commit is contained in:
Pierre-Olivier Mercier 2022-10-15 13:36:25 +02:00
parent d966709d42
commit 7dd6fa1f68
2 changed files with 69 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
ui/src/routes/musiks/gongs/[gid]/+page.svelte
View File

@ -3,6 +3,7 @@
import { page } from '$app/stores';
import {
Button,
Container,
Input,
Icon,
@ -20,6 +21,8 @@
goto('musiks/gongs/');
})
}
let confirmDeletion = false;
</script>
{#await getGong($page.params.gid)}
@ -47,15 +50,38 @@
</ListGroup>
<ListGroup class="my-2 text-center">
<ListGroupItem
action
tag="button"
class="text-danger fw-bold"
on:click={() => deleteThis(gong)}
>
<Icon name="trash" />
Supprimer ce gong
</ListGroupItem>
{#if !confirmDeletion}
<ListGroupItem
action
tag="button"
class={gong.enabled?"fw-bold":"text-danger fw-bold"}
disabled={gong.enabled}
on:click={() => confirmDeletion = !confirmDeletion}
>
<Icon name="trash" />
Supprimer ce gong
</ListGroupItem>
{:else}
<ListGroupItem>
<p class="fw-bold">
Êtes-vous sûr&nbsp;?
</p>
<div class="d-flex justify-content-around">
<Button
color="danger"
on:click={() => deleteThis(gong)}
>
<Icon name="heartbreak-fill" /> Oui, supprimer ce gong
</Button>
<Button
color="outline-success"
on:click={() => confirmDeletion = !confirmDeletion}
>
<Icon name="balloon-heart" /> Non, garder le gong
</Button>
</div>
</ListGroupItem>
{/if}
</ListGroup>
</Container>
{/await}

43
ui/src/routes/musiks/tracks/[tid]/+page.svelte
View File

@ -3,6 +3,7 @@
import { page } from '$app/stores';
import {
Button,
Container,
Icon,
Input,
@ -26,6 +27,8 @@
goto('musiks/tracks/');
})
}
let confirmDeletion = false;
</script>
{#await getTrack($page.params.tid)}
@ -60,15 +63,37 @@
</div>
<ListGroup class="my-2 text-center">
<ListGroupItem
action
tag="button"
class="text-danger fw-bold"
on:click={() => deleteThis(track)}
>
<Icon name="trash" />
Supprimer cette piste
</ListGroupItem>
{#if !confirmDeletion}
<ListGroupItem
action
tag="button"
class="text-danger fw-bold"
on:click={() => confirmDeletion = !confirmDeletion}
>
<Icon name="trash" />
Supprimer cette piste
</ListGroupItem>
{:else}
<ListGroupItem>
<p class="fw-bold">
Êtes-vous sûr&nbsp;?
</p>
<div class="d-flex justify-content-around">
<Button
color="danger"
on:click={() => deleteThis(track)}
>
<Icon name="heartbreak-fill" /> Oui, supprimer cette piste
</Button>
<Button
color="outline-success"
on:click={() => confirmDeletion = !confirmDeletion}
>
<Icon name="balloon-heart" /> Non, garder la piste
</Button>
</div>
</ListGroupItem>
{/if}
</ListGroup>
</Container>
{/await}