Add a confirmation before deleting the song
This commit is contained in:
parent
2bcac6edd1
commit
14b95876c5
@ -3,6 +3,7 @@
|
|||||||
import { page } from '$app/stores';
|
import { page } from '$app/stores';
|
||||||
|
|
||||||
import {
|
import {
|
||||||
|
Button,
|
||||||
Container,
|
Container,
|
||||||
Input,
|
Input,
|
||||||
Icon,
|
Icon,
|
||||||
@ -20,6 +21,8 @@
|
|||||||
goto('musiks/gongs/');
|
goto('musiks/gongs/');
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
let confirmDeletion = false;
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
{#await getGong($page.params.gid)}
|
{#await getGong($page.params.gid)}
|
||||||
@ -47,15 +50,38 @@
|
|||||||
</ListGroup>
|
</ListGroup>
|
||||||
|
|
||||||
<ListGroup class="my-2 text-center">
|
<ListGroup class="my-2 text-center">
|
||||||
<ListGroupItem
|
{#if !confirmDeletion}
|
||||||
action
|
<ListGroupItem
|
||||||
tag="button"
|
action
|
||||||
class="text-danger fw-bold"
|
tag="button"
|
||||||
on:click={() => deleteThis(gong)}
|
class={gong.enabled?"fw-bold":"text-danger fw-bold"}
|
||||||
>
|
disabled={gong.enabled}
|
||||||
<Icon name="trash" />
|
on:click={() => confirmDeletion = !confirmDeletion}
|
||||||
Supprimer ce gong
|
>
|
||||||
</ListGroupItem>
|
<Icon name="trash" />
|
||||||
|
Supprimer ce gong
|
||||||
|
</ListGroupItem>
|
||||||
|
{:else}
|
||||||
|
<ListGroupItem>
|
||||||
|
<p class="fw-bold">
|
||||||
|
Êtes-vous sûr ?
|
||||||
|
</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>
|
</ListGroup>
|
||||||
</Container>
|
</Container>
|
||||||
{/await}
|
{/await}
|
||||||
|
@ -3,6 +3,7 @@
|
|||||||
import { page } from '$app/stores';
|
import { page } from '$app/stores';
|
||||||
|
|
||||||
import {
|
import {
|
||||||
|
Button,
|
||||||
Container,
|
Container,
|
||||||
Icon,
|
Icon,
|
||||||
Input,
|
Input,
|
||||||
@ -26,6 +27,8 @@
|
|||||||
goto('musiks/tracks/');
|
goto('musiks/tracks/');
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
let confirmDeletion = false;
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
{#await getTrack($page.params.tid)}
|
{#await getTrack($page.params.tid)}
|
||||||
@ -60,15 +63,37 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<ListGroup class="my-2 text-center">
|
<ListGroup class="my-2 text-center">
|
||||||
<ListGroupItem
|
{#if !confirmDeletion}
|
||||||
action
|
<ListGroupItem
|
||||||
tag="button"
|
action
|
||||||
class="text-danger fw-bold"
|
tag="button"
|
||||||
on:click={() => deleteThis(track)}
|
class="text-danger fw-bold"
|
||||||
>
|
on:click={() => confirmDeletion = !confirmDeletion}
|
||||||
<Icon name="trash" />
|
>
|
||||||
Supprimer cette piste
|
<Icon name="trash" />
|
||||||
</ListGroupItem>
|
Supprimer cette piste
|
||||||
|
</ListGroupItem>
|
||||||
|
{:else}
|
||||||
|
<ListGroupItem>
|
||||||
|
<p class="fw-bold">
|
||||||
|
Êtes-vous sûr ?
|
||||||
|
</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>
|
</ListGroup>
|
||||||
</Container>
|
</Container>
|
||||||
{/await}
|
{/await}
|
||||||
|
Loading…
Reference in New Issue
Block a user