stick header and filter bar to top
All checks were successful
delpoy / build-and-deploy (push) Successful in 48s
All checks were successful
delpoy / build-and-deploy (push) Successful in 48s
This commit is contained in:
parent
6e7c2eafca
commit
5935b0d561
@ -133,7 +133,7 @@
|
|||||||
<div class="grid">
|
<div class="grid">
|
||||||
{#key $page.url.pathname}
|
{#key $page.url.pathname}
|
||||||
<div
|
<div
|
||||||
class="col-[1] row-[1] h-full w-full overflow-y-scroll overflow-x-hidden"
|
class="col-[1] row-[1] h-[calc(100vh-3rem)] w-full overflow-y-scroll overflow-x-hidden"
|
||||||
in:fly={{ x: transitionPrefix * window.innerWidth, duration: !transitionPrefix ? 0 : 100 }}
|
in:fly={{ x: transitionPrefix * window.innerWidth, duration: !transitionPrefix ? 0 : 100 }}
|
||||||
out:fly={{
|
out:fly={{
|
||||||
x: transitionPrefix * -window.innerWidth,
|
x: transitionPrefix * -window.innerWidth,
|
||||||
@ -145,7 +145,7 @@
|
|||||||
{/key}
|
{/key}
|
||||||
</div>
|
</div>
|
||||||
{:else}
|
{:else}
|
||||||
<div class="h-full w-full">
|
<div class="h-[calc(100vh-3rem)] w-full">
|
||||||
{@render children()}
|
{@render children()}
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
|
|||||||
@ -66,65 +66,67 @@
|
|||||||
onUpdate={() => fetchFeedback({ from: 0 }).then((r) => (feedbacks = r))}
|
onUpdate={() => fetchFeedback({ from: 0 }).then((r) => (feedbacks = r))}
|
||||||
/>
|
/>
|
||||||
<hr class="divider my-1 mx-8 border-none" />
|
<hr class="divider my-1 mx-8 border-none" />
|
||||||
<table class="table table-fixed h-fit">
|
<div class="h-full overflow-scroll">
|
||||||
<thead>
|
<table class="table table-fixed h-fit">
|
||||||
<tr>
|
<thead>
|
||||||
<th>Event</th>
|
<tr>
|
||||||
<th>Titel</th>
|
<th>Event</th>
|
||||||
<th>Nutzer</th>
|
<th>Titel</th>
|
||||||
<th>Datum</th>
|
<th>Nutzer</th>
|
||||||
<th>Inhalt</th>
|
<th>Datum</th>
|
||||||
</tr>
|
<th>Inhalt</th>
|
||||||
</thead>
|
|
||||||
<PaginationTableBody
|
|
||||||
onUpdate={async () =>
|
|
||||||
await fetchFeedback().then((feedback) => (feedbacks = [...feedbacks, ...feedback]))}
|
|
||||||
>
|
|
||||||
{#each feedbacks as feedback}
|
|
||||||
<tr
|
|
||||||
class="hover [&>*]:text-sm cursor-pointer"
|
|
||||||
class:bg-base-200={activeFeedback?.url_hash === feedback.url_hash}
|
|
||||||
onclick={async () => {
|
|
||||||
await goto(`${window.location.href.split('#')[0]}#${feedback.url_hash}`, {
|
|
||||||
replaceState: true
|
|
||||||
});
|
|
||||||
await openHashReport();
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<td title={feedback.event}>{feedback.event}</td>
|
|
||||||
<td class="overflow-hidden overflow-ellipsis">{feedback.title}</td>
|
|
||||||
<td class="flex">
|
|
||||||
{feedback.user?.username || ''}
|
|
||||||
{#if feedback.user}
|
|
||||||
<button
|
|
||||||
class="pl-1"
|
|
||||||
title="Nach Ersteller filtern"
|
|
||||||
onclick={(e) => {
|
|
||||||
e.stopPropagation();
|
|
||||||
feedbackFilter.username = feedback.user.username;
|
|
||||||
fetchFeedback({ from: 0 }).then((r) => (feedbacks = r));
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<MagnifyingGlass size="14" />
|
|
||||||
</button>
|
|
||||||
{/if}
|
|
||||||
</td>
|
|
||||||
<td
|
|
||||||
>{new Intl.DateTimeFormat('de-DE', {
|
|
||||||
year: 'numeric',
|
|
||||||
month: '2-digit',
|
|
||||||
day: '2-digit',
|
|
||||||
hour: '2-digit',
|
|
||||||
minute: '2-digit'
|
|
||||||
}).format(new Date(feedback.updatedAt))} Uhr</td
|
|
||||||
>
|
|
||||||
<td class="overflow-hidden overflow-ellipsis"
|
|
||||||
>{feedback.content}{feedback.content_stripped ? '...' : ''}</td
|
|
||||||
>
|
|
||||||
</tr>
|
</tr>
|
||||||
{/each}
|
</thead>
|
||||||
</PaginationTableBody>
|
<PaginationTableBody
|
||||||
</table>
|
onUpdate={async () =>
|
||||||
|
await fetchFeedback().then((feedback) => (feedbacks = [...feedbacks, ...feedback]))}
|
||||||
|
>
|
||||||
|
{#each feedbacks as feedback}
|
||||||
|
<tr
|
||||||
|
class="hover [&>*]:text-sm cursor-pointer"
|
||||||
|
class:bg-base-200={activeFeedback?.url_hash === feedback.url_hash}
|
||||||
|
onclick={async () => {
|
||||||
|
await goto(`${window.location.href.split('#')[0]}#${feedback.url_hash}`, {
|
||||||
|
replaceState: true
|
||||||
|
});
|
||||||
|
await openHashReport();
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<td title={feedback.event}>{feedback.event}</td>
|
||||||
|
<td class="overflow-hidden overflow-ellipsis">{feedback.title}</td>
|
||||||
|
<td class="flex">
|
||||||
|
{feedback.user?.username || ''}
|
||||||
|
{#if feedback.user}
|
||||||
|
<button
|
||||||
|
class="pl-1"
|
||||||
|
title="Nach Ersteller filtern"
|
||||||
|
onclick={(e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
feedbackFilter.username = feedback.user.username;
|
||||||
|
fetchFeedback({ from: 0 }).then((r) => (feedbacks = r));
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<MagnifyingGlass size="14" />
|
||||||
|
</button>
|
||||||
|
{/if}
|
||||||
|
</td>
|
||||||
|
<td
|
||||||
|
>{new Intl.DateTimeFormat('de-DE', {
|
||||||
|
year: 'numeric',
|
||||||
|
month: '2-digit',
|
||||||
|
day: '2-digit',
|
||||||
|
hour: '2-digit',
|
||||||
|
minute: '2-digit'
|
||||||
|
}).format(new Date(feedback.updatedAt))} Uhr</td
|
||||||
|
>
|
||||||
|
<td class="overflow-hidden overflow-ellipsis"
|
||||||
|
>{feedback.content}{feedback.content_stripped ? '...' : ''}</td
|
||||||
|
>
|
||||||
|
</tr>
|
||||||
|
{/each}
|
||||||
|
</PaginationTableBody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{#if activeFeedback}
|
{#if activeFeedback}
|
||||||
<div
|
<div
|
||||||
|
|||||||
@ -115,95 +115,97 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<hr class="divider my-1 mx-8 border-none" />
|
<hr class="divider my-1 mx-8 border-none" />
|
||||||
<table class="table table-fixed h-fit">
|
<div class="h-full overflow-scroll">
|
||||||
<colgroup>
|
<table class="table table-fixed h-fit">
|
||||||
<col style="width: 20%" />
|
<colgroup>
|
||||||
<col style="width: 15%" />
|
<col style="width: 20%" />
|
||||||
<col style="width: 15%" />
|
<col style="width: 15%" />
|
||||||
<col style="width: 20%" />
|
<col style="width: 15%" />
|
||||||
<col style="width: 15%" />
|
<col style="width: 20%" />
|
||||||
<col style="width: 15%" />
|
<col style="width: 15%" />
|
||||||
</colgroup>
|
<col style="width: 15%" />
|
||||||
<thead>
|
</colgroup>
|
||||||
<tr>
|
<thead>
|
||||||
<th>Grund</th>
|
<tr>
|
||||||
<th>Ersteller</th>
|
<th>Grund</th>
|
||||||
<th>Reporteter User</th>
|
<th>Ersteller</th>
|
||||||
<th>Datum</th>
|
<th>Reporteter User</th>
|
||||||
<th>Bearbeitungsstatus</th>
|
<th>Datum</th>
|
||||||
<th>Reportstatus</th>
|
<th>Bearbeitungsstatus</th>
|
||||||
</tr>
|
<th>Reportstatus</th>
|
||||||
</thead>
|
</tr>
|
||||||
<PaginationTableBody
|
</thead>
|
||||||
onUpdate={async () =>
|
<PaginationTableBody
|
||||||
await fetchReports().then((res) => (reports = [...reports, ...res.reports]))}
|
onUpdate={async () =>
|
||||||
>
|
await fetchReports().then((res) => (reports = [...reports, ...res.reports]))}
|
||||||
{#each reports as report}
|
>
|
||||||
<tr
|
{#each reports as report}
|
||||||
class="hover [&>*]:text-sm cursor-pointer"
|
<tr
|
||||||
class:bg-base-200={activeReport?.url_hash === report.url_hash}
|
class="hover [&>*]:text-sm cursor-pointer"
|
||||||
onclick={() => {
|
class:bg-base-200={activeReport?.url_hash === report.url_hash}
|
||||||
goto(`${window.location.href.split('#')[0]}#${report.url_hash}`, {
|
onclick={() => {
|
||||||
replaceState: true
|
goto(`${window.location.href.split('#')[0]}#${report.url_hash}`, {
|
||||||
});
|
replaceState: true
|
||||||
activeReport = $state.snapshot(report);
|
});
|
||||||
activeReport.originalStatus = report.status;
|
activeReport = $state.snapshot(report);
|
||||||
}}
|
activeReport.originalStatus = report.status;
|
||||||
>
|
}}
|
||||||
<td title={report.subject}><div class="overflow-scroll">{report.subject}</div></td>
|
>
|
||||||
<td class="flex">
|
<td title={report.subject}><div class="overflow-scroll">{report.subject}</div></td>
|
||||||
{report.reporter.username}
|
<td class="flex">
|
||||||
<button
|
{report.reporter.username}
|
||||||
class="pl-1"
|
|
||||||
title="Nach Ersteller filtern"
|
|
||||||
onclick={(e) => {
|
|
||||||
e.stopPropagation();
|
|
||||||
reportFilter.reporter = report.reporter.username;
|
|
||||||
fetchReports({ from: 0 }).then((r) => (reports = r.reports));
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<MagnifyingGlass size="14" />
|
|
||||||
</button>
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
{report.reported?.username || ''}
|
|
||||||
{#if report.reported?.id}
|
|
||||||
<button
|
<button
|
||||||
class="pl-1"
|
class="pl-1"
|
||||||
title="Nach Reportetem Spieler filtern"
|
title="Nach Ersteller filtern"
|
||||||
onclick={(e) => {
|
onclick={(e) => {
|
||||||
e.stopPropagation();
|
e.stopPropagation();
|
||||||
reportFilter.reported = report.reported.username;
|
reportFilter.reporter = report.reporter.username;
|
||||||
fetchReports({ from: 0 }).then((r) => (reports = r.reports));
|
fetchReports({ from: 0 }).then((r) => (reports = r.reports));
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<MagnifyingGlass size="14" />
|
<MagnifyingGlass size="14" />
|
||||||
</button>
|
</button>
|
||||||
{/if}
|
</td>
|
||||||
</td>
|
<td>
|
||||||
<td
|
{report.reported?.username || ''}
|
||||||
>{new Intl.DateTimeFormat('de-DE', {
|
{#if report.reported?.id}
|
||||||
year: 'numeric',
|
<button
|
||||||
month: '2-digit',
|
class="pl-1"
|
||||||
day: '2-digit',
|
title="Nach Reportetem Spieler filtern"
|
||||||
hour: '2-digit',
|
onclick={(e) => {
|
||||||
minute: '2-digit'
|
e.stopPropagation();
|
||||||
}).format(new Date(report.createdAt))} Uhr</td
|
reportFilter.reported = report.reported.username;
|
||||||
>
|
fetchReports({ from: 0 }).then((r) => (reports = r.reports));
|
||||||
<td>
|
}}
|
||||||
{report.status === 'none'
|
>
|
||||||
? 'Unbearbeitet'
|
<MagnifyingGlass size="14" />
|
||||||
: report.status === 'review'
|
</button>
|
||||||
? 'In Bearbeitung'
|
{/if}
|
||||||
: report.status === 'reviewed'
|
</td>
|
||||||
? 'Bearbeitet'
|
<td
|
||||||
: ''}
|
>{new Intl.DateTimeFormat('de-DE', {
|
||||||
</td>
|
year: 'numeric',
|
||||||
<td>{report.draft ? 'Entwurf' : 'Erstellt'}</td>
|
month: '2-digit',
|
||||||
</tr>
|
day: '2-digit',
|
||||||
{/each}
|
hour: '2-digit',
|
||||||
</PaginationTableBody>
|
minute: '2-digit'
|
||||||
</table>
|
}).format(new Date(report.createdAt))} Uhr</td
|
||||||
|
>
|
||||||
|
<td>
|
||||||
|
{report.status === 'none'
|
||||||
|
? 'Unbearbeitet'
|
||||||
|
: report.status === 'review'
|
||||||
|
? 'In Bearbeitung'
|
||||||
|
: report.status === 'reviewed'
|
||||||
|
? 'Bearbeitet'
|
||||||
|
: ''}
|
||||||
|
</td>
|
||||||
|
<td>{report.draft ? 'Entwurf' : 'Erstellt'}</td>
|
||||||
|
</tr>
|
||||||
|
{/each}
|
||||||
|
</PaginationTableBody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{#if activeReport}
|
{#if activeReport}
|
||||||
<div
|
<div
|
||||||
|
|||||||
@ -96,7 +96,7 @@
|
|||||||
<table class="table table-auto">
|
<table class="table table-auto">
|
||||||
<thead>
|
<thead>
|
||||||
<!-- prettier-ignore -->
|
<!-- prettier-ignore -->
|
||||||
<SortableTr class="[&>th]:bg-base-100 [&>th]:z-[1] [&>th]:sticky [&>th]:top-0">
|
<SortableTr>
|
||||||
<th></th>
|
<th></th>
|
||||||
<SortableTh onSort={(e) => userFilter = {...userFilter, sort: {key: 'firstname', asc: e.asc}}}>Vorname</SortableTh>
|
<SortableTh onSort={(e) => userFilter = {...userFilter, sort: {key: 'firstname', asc: e.asc}}}>Vorname</SortableTh>
|
||||||
<SortableTh onSort={(e) => userFilter = {...userFilter, sort: {key: 'lastname', asc: e.asc}}}>Nachname</SortableTh>
|
<SortableTh onSort={(e) => userFilter = {...userFilter, sort: {key: 'lastname', asc: e.asc}}}>Nachname</SortableTh>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user