use global modal for popup messages
All checks were successful
delpoy / build-and-deploy (push) Successful in 51s

This commit is contained in:
2024-12-02 21:02:23 +01:00
parent a1965c62e2
commit e30446598c
14 changed files with 252 additions and 284 deletions

View File

@ -16,9 +16,12 @@
import Search from '$lib/components/Input/Search.svelte';
import { usernameSuggestions } from '$lib/utils';
import PaginationTableBody from '$lib/components/PaginationTable/PaginationTableBody.svelte';
import { getPopupModalShowFn } from '$lib/context';
let { data } = $props();
let showPopupModal = getPopupModalShowFn();
let reports: (typeof Report.prototype.dataValues)[] = $state([]);
let reportsPerRequest = 25;
let reportFilter = $state({ draft: false, status: null, reporter: null, reported: null });
@ -91,7 +94,6 @@
});
}
let saveActiveReportChangesModal: HTMLDialogElement;
let newReportModal: HTMLDialogElement;
</script>
@ -327,49 +329,45 @@
<Input
type="submit"
value="Speichern"
onclick={() => saveActiveReportChangesModal.show()}
onclick={() => {
showPopupModal({
title: 'Änderungen Speichern?',
actions: [
{
text: 'Speichern',
action: async () => {
await updateActiveReport();
if (activeReport.reported?.username) {
if (activeReport.reported?.id === undefined) {
activeReport.reported.id = -1;
}
} else {
activeReport.reported = undefined;
}
reports = [...reports];
if (
activeReport.originalStatus !== 'reviewed' &&
activeReport.status === 'reviewed'
) {
$reportCount -= 1;
} else if (
activeReport.originalStatus === 'reviewed' &&
activeReport.status !== 'reviewed'
) {
$reportCount += 1;
}
}
},
{ text: 'Abbrechen' }
]
});
}}
/>
</div>
</div>
{/if}
</div>
<dialog class="modal" bind:this={saveActiveReportChangesModal}>
<form method="dialog" class="modal-box">
<button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2"></button>
<h3 class="font-roboto text-xl">Änderungen Speichern?</h3>
<div class="flex flex-row space-x-2 mt-6">
<Input
type="submit"
value="Speichern"
onclick={async () => {
await updateActiveReport();
if (activeReport.reported?.username) {
if (activeReport.reported?.id === undefined) {
activeReport.reported.id = -1;
}
} else {
activeReport.reported = undefined;
}
reports = [...reports];
if (activeReport.originalStatus !== 'reviewed' && activeReport.status === 'reviewed') {
$reportCount -= 1;
} else if (
activeReport.originalStatus === 'reviewed' &&
activeReport.status !== 'reviewed'
) {
$reportCount += 1;
}
}}
/>
<Input type="submit" value="Abbrechen" />
</div>
</form>
<form method="dialog" class="modal-backdrop bg-[rgba(0,0,0,.3)]">
<button>close</button>
</form>
</dialog>
<dialog class="modal" bind:this={newReportModal}>
<NewReportModal
onSubmit={(e) => {

View File

@ -5,9 +5,12 @@
import Search from '$lib/components/Input/Search.svelte';
import { usernameSuggestions } from '$lib/utils';
import type { Report } from '$lib/server/database';
import { getPopupModalShowFn } from '$lib/context';
let { onSubmit }: { onSubmit: (data: typeof Report.prototype.dataValues) => void } = $props();
let showPopupModal = getPopupModalShowFn();
let reporter: string | undefined = $state();
let reported: string | undefined = $state();
let reason = $state('');
@ -29,7 +32,6 @@
let globalCloseForm: HTMLFormElement;
let reportForm: HTMLFormElement;
let confirmDialog: HTMLDialogElement;
</script>
<form method="dialog" class="modal-box" bind:this={reportForm}>
@ -79,7 +81,22 @@
onclick={(e) => {
if (reportForm.checkValidity()) {
e.preventDefault();
confirmDialog.show();
showPopupModal({
title: 'Report Erstellen?',
text: body
? 'Dadurch, dass bereits Details über den Report Grund hinzugefügt wurden, ist es nach dem Erstellen nicht mehr möglich, den Report Inhalt zu ändern'
: 'Der Report wird als Entwurf gespeichert und kann nach dem Erstellen über den Report-Link bearbeitet werden',
actions: [
{
text: 'Erstellen',
action: async () => {
await newReport();
globalCloseForm.submit();
}
},
{ text: 'Abbrechen' }
]
});
}
}}
/>
@ -96,35 +113,3 @@
<form method="dialog" class="modal-backdrop bg-[rgba(0,0,0,.3)]" bind:this={globalCloseForm}>
<button>close</button>
</form>
<dialog class="modal" bind:this={confirmDialog}>
<form method="dialog" class="modal-box">
<button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2"></button>
<h3 class="font-roboto text-xl mb-2">Report Erstellen?</h3>
{#if body}
<p>
Dadurch, dass bereits Details über den Report Grund hinzugefügt wurden, ist es nach dem
Erstellen nicht mehr möglich, den Report Inhalt zu ändern
</p>
{:else}
<p>
Der Report wird als Entwurf gespeichert und kann nach dem Erstellen über den Report-Link
bearbeitet werden
</p>
{/if}
<div class="flex flex-row space-x-2 mt-6">
<Input
type="submit"
value="Erstellen"
onclick={async () => {
await newReport();
globalCloseForm.submit();
}}
/>
<Input type="submit" value="Abbrechen" />
</div>
</form>
<form method="dialog" class="modal-backdrop bg-[rgba(0,0,0,.3)]">
<button>close</button>
</form>
</dialog>

View File

@ -64,6 +64,7 @@
let userFilterEffectAlreadyRan = false;
$effect(() => {
// eslint-disable-next-line @typescript-eslint/no-unused-expressions
userFilter;
if (!userFilterEffectAlreadyRan) {

View File

@ -3,6 +3,7 @@
import { env } from '$env/dynamic/public';
import Select from '$lib/components/Input/Select.svelte';
import { errorMessage } from '$lib/stores';
import { getPopupModalShowFn } from '$lib/context';
let {
onSubmit
@ -24,6 +25,8 @@
}) => void;
} = $props();
let showPopupModal = getPopupModalShowFn();
let firstname: string = $state('');
let lastname: string = $state('');
let birthday: string = $state('');
@ -61,7 +64,6 @@
let globalCloseForm: HTMLFormElement;
let reportForm: HTMLFormElement;
let confirmDialog: HTMLDialogElement;
</script>
<form method="dialog" class="modal-box" bind:this={reportForm}>
@ -111,7 +113,10 @@
onclick={(e) => {
if (reportForm.checkValidity()) {
e.preventDefault();
confirmDialog.show();
showPopupModal({
title: 'Spieler hinzufügen?',
actions: [{ text: 'Hinzufügen', action: newUser }, { text: 'Abbrechen' }]
});
}
}}
/>
@ -128,17 +133,3 @@
<form method="dialog" class="modal-backdrop bg-[rgba(0,0,0,.3)]" bind:this={globalCloseForm}>
<button>close</button>
</form>
<dialog class="modal" bind:this={confirmDialog}>
<form method="dialog" class="modal-box">
<button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2"></button>
<h3 class="font-roboto text-xl mb-2">Spieler hinzufügen?</h3>
<div class="flex flex-row space-x-2 mt-6">
<Input type="submit" value="Hinzufügen" onclick={newUser} />
<Input type="submit" value="Abbrechen" />
</div>
</form>
<form method="dialog" class="modal-backdrop bg-[rgba(0,0,0,.3)]">
<button>close</button>
</form>
</dialog>