CraftAttack/website
4
0
Fork 0
Code Issues 3 Pull Requests Actions Wiki Activity

add custom invalid message on admin report create popup user input and fix search component validity check
All checks were successful
delpoy / build-and-deploy (push) Successful in 37s
Details

Browse Source
This commit is contained in:
bytedream 2023-09-30 17:41:29 +02:00
parent 74e56d0ec8
commit 8a80b0a9e0
2 changed files with 13 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/lib/components/Input/Search.svelte
View File

@ -5,6 +5,7 @@
export let searchSuggestionFunc: ( export let searchSuggestionFunc: (
input: string input: string
) => Promise<{ name: string; value: string }[]> = () => Promise.resolve([]); ) => Promise<{ name: string; value: string }[]> = () => Promise.resolve([]);
export let invalidMessage: string | null = null;
export let size: 'xs' | 'sm' | 'md' | 'lg' = 'md'; export let size: 'xs' | 'sm' | 'md' | 'lg' = 'md';
export let label: string | null = null; export let label: string | null = null;
export let required = false; export let required = false;
@ -32,21 +33,26 @@
class:input-xs={size === 'xs'} class:input-xs={size === 'xs'}
class:input-sm={size === 'sm'} class:input-sm={size === 'sm'}
class:input-md={size === 'md'} class:input-md={size === 'md'}
class:input-lg={size === 'md'} class:input-lg={size === 'lg'}
{id} {id}
{required} {required}
bind:value={inputValue} bind:value={inputValue}
on:input={() => { on:input={(e) => {
value = ''; value = '';
searchSuggestionFunc(inputValue).then((v) => { searchSuggestionFunc(inputValue).then((v) => {
searchSuggestions = v; searchSuggestions = v;
let searchSuggestionValue = v.find((v) => v.name === inputValue); const searchSuggestion = v.find((v) => v.name === inputValue);
if (searchSuggestionValue !== undefined) { if (searchSuggestion !== undefined) {
value = searchSuggestionValue.value; inputValue = searchSuggestion.name;
value = searchSuggestion.value;
searchSuggestions = []; searchSuggestions = [];
e.target?.setCustomValidity('');
} }
}); });
}} }}
on:invalid={(e) => {
if (invalidMessage != null) e.target?.setCustomValidity(invalidMessage);
}}
pattern={suggestionRequired ? `${value ? inputValue : 'a^'}` : null} pattern={suggestionRequired ? `${value ? inputValue : 'a^'}` : null}
/> />
</div> </div>

2
src/routes/admin/reports/NewReportModal.svelte
View File

@ -58,6 +58,7 @@
size="sm" size="sm"
suggestionRequired={true} suggestionRequired={true}
searchSuggestionFunc={usernameSuggestions} searchSuggestionFunc={usernameSuggestions}
invalidMessage="Es können nur registrierte Spieler Report Autoren sein"
label="Reporter" label="Reporter"
required={true} required={true}
bind:value={reporter} bind:value={reporter}
@ -66,6 +67,7 @@
size="sm" size="sm"
suggestionRequired={true} suggestionRequired={true}
searchSuggestionFunc={usernameSuggestions} searchSuggestionFunc={usernameSuggestions}
invalidMessage="Es können nur registrierte Spieler reportet werden"
label="Reporteter User" label="Reporteter User"
required={true} required={true}
bind:value={reported} bind:value={reported}