diff --git a/UnicadoGUI/Frontend/src/lib/DeleteProjectByNameButton.svelte b/UnicadoGUI/Frontend/src/lib/DeleteProjectByNameButton.svelte index 1ce1018aaea3ceefcc8bcdeb7ad5dc73675f7e2e..b40085867692f07160f1a6e1435ee8d5ecb2738a 100644 --- a/UnicadoGUI/Frontend/src/lib/DeleteProjectByNameButton.svelte +++ b/UnicadoGUI/Frontend/src/lib/DeleteProjectByNameButton.svelte @@ -1,35 +1,51 @@ <script lang="ts"> - import { Modal, ModalHeader, ModalBody, ModalFooter, Button, Icon } from "@sveltestrap/sveltestrap"; - import { removeProject } from '../stores/projects'; - import { createEventDispatcher } from 'svelte'; + import { + Modal, + ModalHeader, + ModalBody, + ModalFooter, + Button, + Icon, + } from "@sveltestrap/sveltestrap"; + import { userProjects, removeProject } from "../stores/projects"; + import { onDestroy, createEventDispatcher } from "svelte"; + let projects: any = []; + export let projectToRemove = ""; + + const unsubscribe = userProjects.subscribe((value) => { + projects = value; + }); - export let projectToRemove = ''; // Der Name des zu löschenden Projekts const dispatch = createEventDispatcher(); let isModalOpen = false; function openModal() { isModalOpen = true; - dispatch('openModal'); // Optional: Benachrichtige Hauptkomponente + dispatch("openModal"); } function closeModal() { isModalOpen = false; - dispatch('closeModal'); // Optional: Benachrichtige Hauptkomponente + dispatch("closeModal"); } function handleDeleteProject() { - if (projectToRemove.trim() !== '') { - removeProject(projectToRemove); - projectToRemove = ''; // Eingabefeld leeren - closeModal(); // Modal schließen nach dem Löschen + if (projectToRemove.trim() !== "") { + if ( + confirm( + `Are you sure you want to delete the project "${projectToRemove}"?`, + ) + ) { + removeProject(projectToRemove); + projectToRemove = ""; + closeModal(); + } } } - function handleKeyDown(event: KeyboardEvent) { - if (event.key === 'Enter') { - handleDeleteProject(); - } - } + onDestroy(() => { + unsubscribe(); + }); </script> <!-- Button zum Öffnen des Modals --> @@ -41,16 +57,17 @@ <Modal isOpen={isModalOpen} toggle={closeModal}> <ModalHeader toggle={closeModal}>Remove Project</ModalHeader> <ModalBody> - <input - type="text" - bind:value={projectToRemove} - placeholder="Enter project name to remove..." - class="form-control" - on:keydown={handleKeyDown} - /> + <select bind:value={projectToRemove} class="form-control"> + <option value="" disabled>Select a project to remove...</option> + {#each projects as project} + <option value={project.name}>{project.name}</option> + {/each} + </select> </ModalBody> <ModalFooter> - <Button color="danger" on:click={handleDeleteProject}>Remove Project</Button> + <Button color="danger" on:click={handleDeleteProject} + >Remove Project</Button + > <Button color="secondary" on:click={closeModal}>Cancel</Button> </ModalFooter> </Modal>