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

Added delete runner modal

Browse Source
This commit is contained in:
Nicolai Ort 2023-04-12 19:04:15 +02:00
parent d31fe2363b
commit fd5db7d68a
Signed by: niggl
GPG Key ID: 13AFA55AF62F269F
4 changed files with 137 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

119
src/components/runners/DeleteRunnerModal.svelte Normal file
View File

@ -0,0 +1,119 @@
<script>
import { _ } from "svelte-i18n";
import { clickOutside } from "../base/outsideclick";
import { RunnerService } from "@odit/lfk-client-js";
import Toastify from "toastify-js";
export let modal_open;
export let delete_runner = {
id: 0,
firstname: "",
lastname: "",
};
function focus(el) {
el.focus();
}
(() => {
document.onkeydown = (e) => {
e = e || window.event;
if (e.key === "Escape") {
modal_open = false;
}
if (e.keyCode === 13) {
if (createbtnenabled === true) {
createbtnenabled = false;
submit();
}
}
};
})();
function submit() {
RunnerService.runnerControllerRemove(delete_runner.id, true);
}
</script>
{#if modal_open}
<div
class="fixed z-10 inset-0 overflow-y-auto"
use:clickOutside
on:click_outside={() => {
modal_open = false;
}}
>
<div
class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"
>
<div class="fixed inset-0 transition-opacity" aria-hidden="true">
<div
class="absolute inset-0 bg-gray-500 opacity-75"
data-id="modal_backdrop"
/>
</div>
<span
class="hidden sm:inline-block sm:align-middle sm:h-screen"
aria-hidden="true">&#8203;</span
>
<div
class="inline-block align-bottom bg-white rounded-lg text-left shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
role="dialog"
aria-modal="true"
aria-labelledby="modal-headline"
>
<div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
<div class="sm:flex sm:items-start">
<div
class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
class="h-6 w-6 text-blue-600"
fill="currentColor"
width="24"
height="24"
><path fill="none" d="M0 0h24v24H0z" />
<path
d="M9.83 8.79L8 9.456V13H6V8.05h.015l5.268-1.918c.244-.093.51-.14.782-.131a2.616 2.616 0 0 1 2.427 1.82c.186.583.356.977.51 1.182A4.992 4.992 0 0 0 19 11v2a6.986 6.986 0 0 1-5.402-2.547l-.581 3.297L15 15.67V23h-2v-5.986l-2.05-1.987-.947 4.298-6.894-1.215.348-1.97 4.924.868L9.83 8.79zM13.5 5.5a2 2 0 1 1 0-4 2 2 0 0 1 0 4z"
/></svg
>
</div>
<div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
<h3 class="text-lg leading-6 font-medium text-gray-900">
{$_("confirm-delete")}
</h3>
<div class="mt-2 mb-6">
<p class="text-sm text-gray-500">
{$_("please-confirm-the-deletion-of-runner")}
</p>
</div>
<div class="grid grid-cols-6 gap-6">
<span class="inline-block"
>{delete_runner.firstname} {delete_runner.lastname}</span
>
</div>
</div>
</div>
</div>
<div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
<button
on:click={submit}
type="button"
class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm"
>
{$_("delete")}
</button>
<button
on:click={() => {
modal_open = false;
}}
type="button"
class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
>
{$_("cancel")}
</button>
</div>
</div>
</div>
</div>
{/if}

17
src/components/runners/RunnersOverview.svelte
View File

@ -24,6 +24,7 @@
import InputElement from "../shared/InputElement.svelte";
import { groupFilter } from "../shared/tablefilters";
import TableActions from "../shared/TableActions.svelte";
import DeleteRunnerModal from "./DeleteRunnerModal.svelte";
$: selectedRunners =
$table?.getSelectedRowModel().rows.map((row) => row.original) || [];
@ -76,9 +77,15 @@
return renderComponent(TableActions, {
detailsLink: `./${info.getValue()}`,
deleteAction: () => {
console.log(info.getValue());
active_delete =
current_runners[
current_runners.findIndex((r) => r.id == info.getValue())
];
},
deleteEnabled: store.state.jwtinfo.userdetails.permissions.includes("RUNNER:DELETE"),
deleteEnabled:
store.state.jwtinfo.userdetails.permissions.includes(
"RUNNER:DELETE"
),
});
},
enableColumnFilter: false,
@ -87,7 +94,7 @@
//
$: active_deletes = [];
$: active_delete = undefined;
let dataLoaded = false;
export let current_runners = [];
$: sponsoring_contracts_show = selected.length > 0;
@ -142,6 +149,10 @@
});
</script>
<DeleteRunnerModal
delete_runner={active_delete}
modal_open={active_delete != undefined}
/>
{#if store.state.jwtinfo.userdetails.permissions.includes("RUNNER:GET")}
{#if !dataLoaded}
<div

3
src/locales/de.json
View File

@ -475,5 +475,6 @@
"you-must-create-at-least-one-card-or-cancel": "Du musst mindestens eine Blankokarte erstellen (oder abbrechen).",
"zip-postal-code": "Postleitzahl",
"delete-cards": "Karten löschen",
"cards-deleted": "Karten gelöscht"
"cards-deleted": "Karten gelöscht",
"please-confirm-the-deletion-of-runner": "Bitte bestätige die Löschung der Läufer:in"
}

3
src/locales/en.json
View File

@ -475,5 +475,6 @@
"you-must-create-at-least-one-card-or-cancel": "You must create at least one card (or cancel).",
"zip-postal-code": "ZIP/ postal code",
"delete-cards": "Delete cards",
"cards-deleted": "Cards deleted"
"cards-deleted": "Cards deleted",
"please-confirm-the-deletion-of-runner": "Please confirm the deletion of this runner"
}