DeleteProjectByIdButton.svelte

<script lang="ts">
    import { Modal, ModalHeader, ModalBody, ModalFooter, Button, Icon } from "@sveltestrap/sveltestrap";
    import { removeProjectById, getProjectNameById } from '../stores/projects';
    import { createEventDispatcher } from 'svelte';

    export let projectId : number;
    const dispatch = createEventDispatcher();
    let isModalOpen = false;

    function openModal() {
        isModalOpen = true;
        dispatch('openModal');
    }

    function closeModal() {
        isModalOpen = false;
        dispatch('closeModal');
    }

    function handleDeleteProject() {
        if (projectId) {
            removeProjectById(projectId);
            closeModal();
        }
    }
</script>

<Button color="danger" outline on:click={openModal}>
    <Icon name="trash" />
</Button>

<Modal isOpen={isModalOpen} toggle={closeModal}>
    <ModalHeader toggle={closeModal}>Remove Project</ModalHeader>
    <ModalBody>
        <p>Are you sure you want to remove the project with the name: <strong>{getProjectNameById(projectId)}</strong>?</p>
    </ModalBody>
    <ModalFooter>
        <Button color="danger" on:click={handleDeleteProject}>Remove Project</Button>
        <Button color="secondary" on:click={closeModal}>Cancel</Button>
    </ModalFooter>
</Modal>