mirror of
https://github.com/danbulant/Portfolio
synced 2026-07-06 11:30:44 +00:00
feat: CreateCandidateModal input validation
This commit is contained in:
parent
d3ff293224
commit
f8bc1295a0
2 changed files with 84 additions and 6 deletions
|
|
@ -1,16 +1,22 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import type { ApiError } from '$lib/@api';
|
import type { ApiError } from '$lib/@api';
|
||||||
import { apiCreateCandidate } from '$lib/@api/admin';
|
import { apiCreateCandidate } from '$lib/@api/admin';
|
||||||
|
import SelectField from '$lib/components/select/SelectField.svelte';
|
||||||
|
import TextField from '$lib/components/textfield/TextField.svelte';
|
||||||
import type { CreateCandidate, CreateCandidateLogin } from '$lib/stores/candidate';
|
import type { CreateCandidate, CreateCandidateLogin } from '$lib/stores/candidate';
|
||||||
|
import { isPersonalIdNumberValid } from '$lib/utils/personalIdFormat';
|
||||||
import { createEventDispatcher } from 'svelte';
|
import { createEventDispatcher } from 'svelte';
|
||||||
import Modal from '../../Modal.svelte';
|
import Modal from '../../Modal.svelte';
|
||||||
import IdField from '../../textfield/IdField.svelte';
|
import IdField from '../../textfield/IdField.svelte';
|
||||||
import NumberField from '../../textfield/NumberField.svelte';
|
import NumberField from '../../textfield/NumberField.svelte';
|
||||||
|
import { SvelteToast, toast } from '@zerodevx/svelte-toast';
|
||||||
|
|
||||||
let isOpened = true;
|
let isOpened = true;
|
||||||
|
|
||||||
let applicationId: string = '';
|
let applicationId: string = '';
|
||||||
|
let citizenship: string = '';
|
||||||
let personalId: string = '';
|
let personalId: string = '';
|
||||||
|
let field: 'GYM' | 'IT' | 'KB' | 'Ev. č. nezadáno';
|
||||||
|
|
||||||
let login: CreateCandidateLogin;
|
let login: CreateCandidateLogin;
|
||||||
|
|
||||||
|
|
@ -18,13 +24,58 @@
|
||||||
|
|
||||||
const dispatch = createEventDispatcher();
|
const dispatch = createEventDispatcher();
|
||||||
|
|
||||||
|
$: {
|
||||||
|
let prefix = applicationId.slice(0, 3);
|
||||||
|
if (Number(prefix) === 101) {
|
||||||
|
field = 'GYM';
|
||||||
|
} else if (Number(prefix) === 102) {
|
||||||
|
field = 'IT';
|
||||||
|
} else if (Number(prefix) === 103) {
|
||||||
|
field = 'KB';
|
||||||
|
} else {
|
||||||
|
field = 'Ev. č. nezadáno';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
const createCandidate = async () => {
|
const createCandidate = async () => {
|
||||||
|
if (applicationId.length < 6) {
|
||||||
|
toast.push('Ev. číslo musí mít minimálně 6 znaků', {
|
||||||
|
theme: {
|
||||||
|
'--toastColor': 'mintcream',
|
||||||
|
'--toastBackground': '#b91c1c',
|
||||||
|
'--toastBarBackground': '#7f1d1d'
|
||||||
|
}
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (citizenship === 'Česká republika') {
|
||||||
|
if (!isPersonalIdNumberValid(personalId)) {
|
||||||
|
toast.push('Rodné číslo neodpovídá oficiální specifikaci či datumu narození', {
|
||||||
|
theme: {
|
||||||
|
'--toastColor': 'mintcream',
|
||||||
|
'--toastBackground': '#b91c1c',
|
||||||
|
'--toastBarBackground': '#7f1d1d'
|
||||||
|
}
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
}
|
||||||
const data: CreateCandidate = {
|
const data: CreateCandidate = {
|
||||||
applicationId: Number(applicationId),
|
applicationId: Number(applicationId),
|
||||||
personalIdNumber: personalId
|
personalIdNumber: personalId
|
||||||
};
|
};
|
||||||
try {
|
try {
|
||||||
login = await apiCreateCandidate(data);
|
login = await apiCreateCandidate(data);
|
||||||
|
toast.push(
|
||||||
|
`Uživatel ${data.applicationId} s rodným číslem ${data.personalIdNumber} byl vytvořen!`,
|
||||||
|
{
|
||||||
|
theme: {
|
||||||
|
'--toastColor': 'mintcream',
|
||||||
|
'--toastBackground': '#047857',
|
||||||
|
'--toastBarBackground': '#064e3b'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
dispatch('created');
|
dispatch('created');
|
||||||
error = '';
|
error = '';
|
||||||
} catch (e: unknown) {
|
} catch (e: unknown) {
|
||||||
|
|
@ -40,11 +91,18 @@
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
{#if isOpened}
|
{#if isOpened}
|
||||||
|
<SvelteToast />
|
||||||
<Modal on:close={close}>
|
<Modal on:close={close}>
|
||||||
<div class="p-20">
|
<div class="p-20">
|
||||||
{#if login}
|
{#if login}
|
||||||
<h1 class="text-sspsBlue text-3xl font-semibold">{applicationId}</h1>
|
<h1 class="text-sspsBlue text-3xl font-semibold">Ev. č.: {applicationId}</h1>
|
||||||
<h1 class="text-sspsBlue text-3xl font-semibold">{login.password}</h1>
|
<h1 class="text-sspsBlue text-3xl font-semibold">R. č.: {login.personalIdNumber}</h1>
|
||||||
|
<h1 class="text-sspsBlue text-3xl font-semibold">Heslo: {login.password}</h1>
|
||||||
|
{#if login.applications.length > 1}
|
||||||
|
<h1 class="text-sspsBlue text-3xl font-semibold">
|
||||||
|
Slinkovaný s {login.applications.filter((a) => a != applicationId)}
|
||||||
|
</h1>
|
||||||
|
{/if}
|
||||||
{:else}
|
{:else}
|
||||||
<h1 class="text-sspsBlue text-3xl font-semibold">Registrace nového uchazeče</h1>
|
<h1 class="text-sspsBlue text-3xl font-semibold">Registrace nového uchazeče</h1>
|
||||||
{#if error}
|
{#if error}
|
||||||
|
|
@ -55,10 +113,28 @@
|
||||||
<span class="block sm:inline">{error}</span>
|
<span class="block sm:inline">{error}</span>
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
<h3 class="my-4">Evidenčni číslo přihlášky</h3>
|
<div>
|
||||||
<NumberField bind:value={applicationId} />
|
<h3 class="my-4">Evidenční číslo přihlášky (
|
||||||
<h3 class="my-4">Rodné číslo</h3>
|
<span class="font-bold">{`Obor: ${field}`}</span>)
|
||||||
<IdField bind:value={personalId} />
|
</h3>
|
||||||
|
<NumberField bind:value={applicationId} />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 class="my-4">Občanství</h3>
|
||||||
|
<SelectField
|
||||||
|
bind:value={citizenship}
|
||||||
|
placeholder="Občanství"
|
||||||
|
options={['Česká republika', 'Slovenská republika', 'Ukrajina', 'Jiné']}
|
||||||
|
/>
|
||||||
|
<h3 class="my-4">Rodné číslo</h3>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
{#if citizenship === 'Česká republika'}
|
||||||
|
<IdField bind:value={personalId} />
|
||||||
|
{:else}
|
||||||
|
<TextField bind:value={personalId} />
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
<input
|
<input
|
||||||
on:click={createCandidate}
|
on:click={createCandidate}
|
||||||
class="bg-sspsBlue hover:bg-sspsBlueDark mt-6 w-full rounded-lg p-3 text-xl font-semibold text-white transition-colors duration-300"
|
class="bg-sspsBlue hover:bg-sspsBlueDark mt-6 w-full rounded-lg p-3 text-xl font-semibold text-white transition-colors duration-300"
|
||||||
|
|
|
||||||
|
|
@ -61,6 +61,8 @@ export interface BaseCandidate {
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface CreateCandidateLogin extends CreateCandidate {
|
export interface CreateCandidateLogin extends CreateCandidate {
|
||||||
|
applications: [];
|
||||||
|
fieldOfStudy: string;
|
||||||
password: string;
|
password: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue