feat: fix error type, add errors to school select, translated placeholders

This commit is contained in:
EETagent 2023-01-26 22:41:58 +01:00
parent 60323b9be5
commit 1b2125374d
2 changed files with 30 additions and 16 deletions

View file

@ -1,4 +1,6 @@
<script lang="ts"> <script lang="ts">
import LL from '$i18n/i18n-svelte';
import schoollistString from '$lib/assets/schoollist.txt?raw'; import schoollistString from '$lib/assets/schoollist.txt?raw';
import School from './School.svelte'; import School from './School.svelte';
import type { School as SchoolType } from '$lib/stores/candidate'; import type { School as SchoolType } from '$lib/stores/candidate';
@ -72,6 +74,7 @@
}; };
export let selectedSchool: SchoolType; export let selectedSchool: SchoolType;
export let error: string = '';
$: selectedSchool.name = schoolNameInputValue; $: selectedSchool.name = schoolNameInputValue;
$: selectedSchool.field = schoolFieldInputValue; $: selectedSchool.field = schoolFieldInputValue;
@ -82,13 +85,21 @@
<div class="autocomplete"> <div class="autocomplete">
<div class="flex"> <div class="flex">
<input <input
class:error
class="flex-1" class="flex-1"
type="text" type="text"
bind:this={searchInput} bind:this={searchInput}
bind:value={schoolNameInputValue} bind:value={schoolNameInputValue}
on:input={filterSchools} on:input={filterSchools}
placeholder={$LL.input.schoolName()}
/>
<input
class:error
class="ml-2 w-2/5"
type="text"
bind:value={schoolFieldInputValue}
placeholder={$LL.input.fieldOfStudy()}
/> />
<input class="ml-2 w-2/5" type="text" bind:value={schoolFieldInputValue} />
</div> </div>
{#if filteredSchools.length > 0} {#if filteredSchools.length > 0}
<ul bind:this={optionsList} class="schoolAutocompleteList"> <ul bind:this={optionsList} class="schoolAutocompleteList">
@ -114,12 +125,7 @@
input { input {
@apply hover:border-sspsBlue w-full rounded-lg border border-2 bg-[#f8fafb] p-3 text-xl shadow-lg outline-none transition-colors duration-300; @apply hover:border-sspsBlue w-full rounded-lg border border-2 bg-[#f8fafb] p-3 text-xl shadow-lg outline-none transition-colors duration-300;
} }
div span {
@apply absolute right-0 top-0 bottom-0 my-auto flex bg-transparent p-3;
}
.withIcon {
@apply pr-14;
}
.error { .error {
@apply border-red-700; @apply border-red-700;
} }

View file

@ -23,7 +23,7 @@
import type { CandidateData } from '$lib/stores/candidate'; import type { CandidateData } from '$lib/stores/candidate';
import AccountLinkCheckBox from '$lib/components/checkbox/AccountLinkCheckBox.svelte'; import AccountLinkCheckBox from '$lib/components/checkbox/AccountLinkCheckBox.svelte';
import GradesTable from '$lib/components/grades/GradesTable.svelte'; import GradesTable from '$lib/components/grades/GradesTable.svelte';
import SchoolSelect from '$lib/components/select/SchoolSelect.svelte'; import SchoolSelect from '$lib/components/select/SchoolSelect/SchoolSelect.svelte';
import PersonalIdConfirmCheckBox from '$lib/components/checkbox/PersonalIdConfirmCheckBox.svelte'; import PersonalIdConfirmCheckBox from '$lib/components/checkbox/PersonalIdConfirmCheckBox.svelte';
import { isPersonalIdNumberWithBirthdateValid } from '$lib/utils/personalIdFormat'; import { isPersonalIdNumberWithBirthdateValid } from '$lib/utils/personalIdFormat';
@ -187,7 +187,12 @@
unknown unknown
> >
? { ? {
[K2 in keyof (typeof formInitialValues)[K]]: string; [K2 in keyof (typeof formInitialValues)[K]]: (typeof formInitialValues)[K][K2] extends Record<
string,
unknown
>
? { [K4 in keyof (typeof formInitialValues)[K][K2]]: string }
: string;
} }
: (typeof formInitialValues)[K] extends Array<Record<string, unknown>> : (typeof formInitialValues)[K] extends Array<Record<string, unknown>>
? Array<{ [K3 in keyof (typeof formInitialValues)[K][number]]: string }> ? Array<{ [K3 in keyof (typeof formInitialValues)[K][number]]: string }>
@ -344,14 +349,9 @@
break; break;
case 7: case 7:
if ( if (
// TODO: Fix FormErrorType, make it recursive
// @ts-ignore
$typedErrors['candidate']['firstSchool']['name'] || $typedErrors['candidate']['firstSchool']['name'] ||
// @ts-ignore
$typedErrors['candidate']['firstSchool']['field'] || $typedErrors['candidate']['firstSchool']['field'] ||
// @ts-ignore
$typedErrors['candidate']['secondSchool']['name'] || $typedErrors['candidate']['secondSchool']['name'] ||
// @ts-ignore
$typedErrors['candidate']['secondSchool']['field'] $typedErrors['candidate']['secondSchool']['field']
) { ) {
return true; return true;
@ -694,10 +694,18 @@
<h1 class="title mt-8">Přihlášky na školy</h1> <h1 class="title mt-8">Přihlášky na školy</h1>
<div class="flex h-full flex-col justify-between"> <div class="flex h-full flex-col justify-between">
<span> <span>
<SchoolSelect bind:selectedSchool={$form.candidate.firstSchool} /> <SchoolSelect
error={$typedErrors['candidate']['firstSchool']['name'] ||
$typedErrors['candidate']['firstSchool']['field']}
bind:selectedSchool={$form.candidate.firstSchool}
/>
</span> </span>
<span class="mt-10 w-full"> <span class="mt-10 w-full">
<SchoolSelect bind:selectedSchool={$form.candidate.secondSchool} /> <SchoolSelect
error={$typedErrors['candidate']['secondSchool']['name'] ||
$typedErrors['candidate']['secondSchool']['field']}
bind:selectedSchool={$form.candidate.secondSchool}
/>
</span> </span>
</div> </div>
{:else if pageIndex === 8} {:else if pageIndex === 8}