dan/Portfolio
1
0
Fork 0
mirror of https://github.com/danbulant/Portfolio synced 2026-05-24 12:35:31 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Squashed commit of the following:

Browse source 
commit ec8ff2c03bd94b1bf5a8055a385bccb14ba48e76
Author: Sebastian Pravda <sebastian.pravda@gmail.com>
Date:   Fri Nov 25 18:44:16 2022 +0100

    fix: remove some ui elements

commit 091c4fa63e1e2c374e449624dd5a384e4ad48532
Author: Sebastian Pravda <sebastian.pravda@gmail.com>
Date:   Fri Nov 25 18:38:50 2022 +0100

    feat: use yup for input validation

commit abd0ba7ddcc938a680d71cc7a41d89f74915b5b9
Author: Sebastian Pravda <sebastian.pravda@gmail.com>
Date:   Fri Nov 25 18:23:48 2022 +0100

    fix: delete input.ts

commit c305b330e5211b1d0a68f0d975e36b930a4ddb52
Author: Sebastian Pravda <sebastian.pravda@gmail.com>
Date:   Fri Nov 25 18:12:16 2022 +0100

    feat: api integration

commit e1fd8c0fc4327020abcb0d8979d2353a8cd1f2af
Author: Sebastian Pravda <sebastian.pravda@gmail.com>
Date:   Fri Nov 25 18:02:27 2022 +0100

    feat: dot navigation

commit 90bd277474493ed7d3e3cea2a7bd359f13374334
Author: Sebastian Pravda <sebastian.pravda@gmail.com>
Date:   Fri Nov 25 17:38:31 2022 +0100

    feat: input formatting

commit 32a7901d6bf059b0b7818a81c577f5508af262ce
Author: Sebastian Pravda <sebastian.pravda@gmail.com>
Date:   Fri Nov 25 17:35:04 2022 +0100

    fix: remove unused validate method

commit 7013a21be86ca8ffb04339a84c567937cf773895
Author: Sebastian Pravda <sebastian.pravda@gmail.com>
Date:   Fri Nov 25 17:31:16 2022 +0100

    refactor: rename format variable

commit e86c997ea73ea67406e87687efa660f1bce9a0ff
Author: Sebastian Pravda <sebastian.pravda@gmail.com>
Date:   Fri Nov 25 15:10:11 2022 +0100

    feat: fill candidate details

commit af28099a6a905d2729aaba12b628e5416d06c3d6
Author: Sebastian Pravda <sebastian.pravda@gmail.com>
Date:   Fri Nov 25 17:15:45 2022 +0100

    feat: use yup for validation
This commit is contained in:
Sebastian Pravda 2022-11-25 18:46:04 +01:00 committed by EETagent
parent 616ad75cbd
commit 2fad0a4203
3 changed files with 99 additions and 58 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
frontend/src/lib/components/textfield/TextField.svelte
View file

@ -1,11 +1,27 @@
<script lang="ts">
export let type: 'text' | 'number' | 'tel' | 'e-mail' | "password" = 'text';
export let format: 'default' | 'email' | 'tel' | 'name' | 'number' | 'birthdate' | 'personalIdNumber' = 'default';
const typeAction = (node: HTMLInputElement) => {
node.type = type;
};
export let placeholder: string = '';
export let value: string = '';
$: {
if (format === 'tel') {
let x = value.replace(/\D/g, '').match(/(\d{0,3})(\d{0,3})(\d{0,3})(\d{0,3})/)!;
value = '+' + x[1] + (x[2] ? ' ' + x[2] : '') + (x[3] ? ' ' + x[3] : '') + (x[4] ? ' ' + x[4] : '');
} else if (format === 'number') {
value = value.replace(/[^0-9]/g, '');
} else if (format === 'birthdate') { // TODO: more intuitive date input
let x = value.replace(/\D/g, '').match(/(\d{0,2})(\d{0,2})(\d{0,4})/)!;
value = x[1] + (x[2] ? '.' + x[2] : '') + (x[3] ? '.' + x[3] : '');
} else if (format === 'personalIdNumber') {
let x = value.replace(/\D/g, '').match(/(\d{0,6})(\d{0,4})/)!;
value = x[1] + (x[2] ? '/' + x[2] : '');
}
}
export let icon: boolean = false;
export let error: string = "";
</script>

29
frontend/src/routes/login/[code=application]/+page.svelte
View file

@ -3,21 +3,20 @@
import woman from '$lib/assets/woman.png';
import { onMount } from 'svelte';
import { page } from '$app/stores';
let applicationId = Number($page.params.code);
let codeValueMobile: string = '';
let codeValueArray: Array<string> = [];
let codeElementArray: Array<HTMLInputElement> = [];
const inputMobileOnKeyUp = (event: KeyboardEvent) => {
let input = event.target as HTMLInputElement;
if (input.value.length > 8) {
input.value = input.value.slice(0, 8);
}
let splittedInput = input.value.split('');
codeValueArray = splittedInput;
};
$: {
codeValueMobile = codeValueMobile.toUpperCase();
codeValueArray = codeValueMobile.split('');
console.log(codeValueArray);
}
const inputDesktopOnKeyDown = (index: number, e: KeyboardEvent) => {
if (e.key === 'Backspace') {
@ -29,12 +28,16 @@
if (e.key.length > 1) {
return;
}
codeValueArray[index] = e.key;
codeValueArray[index] = e.key.toUpperCase();
if (codeElementArray[index + 1]) {
codeElementArray[index + 1].focus();
}
}
codeValueMobile = codeValueArray.join('');
codeValueMobile = codeValueArray.join('')
};
$: if (codeValueArray.length === 8) {
alert('ApplicationId: ' + applicationId + '; Password: ' + codeValueMobile);
};
onMount(() => {
@ -50,7 +53,7 @@
bind:value={codeValueMobile}
type="text"
class="codeInputMobile"
on:keyup={inputMobileOnKeyUp}
/>
{#each [1, 2, 3, 4] as value}
<input

112
frontend/src/routes/register/+page.svelte
View file

@ -13,15 +13,9 @@
let applicationValue = '';
const redirectToCode = () => {
// TODO: Validation
if (applicationValue) {
goto(`/login/${applicationValue}`);
}
};
const pageCount = 3;
let pageIndex = 0;
let pagesFilled = 0;
const formInitialValues = {
name: '',
@ -31,7 +25,7 @@
birthPlace: '',
birthDate: '',
sex: '',
home: '',
address: '',
parentEmail: '',
parentTelephone: '',
citizenship: '',
@ -45,12 +39,12 @@
validationSchema: yup.object().shape({
name: yup.string().required(),
email: yup.string().email().required(),
telephone: yup.string().required(),
telephone: yup.string().required().matches(/^\+\d{1,3} \d{3} \d{3} \d{3}$/),
birthSurname: yup.string().required(),
birthPlace: yup.string().required(),
birthDate: yup.string().required(),
sex: yup.string().required(),
home: yup.string().required(),
address: yup.string().required(),
parentEmail: yup.string().email().required(),
parentTelephone: yup.string().required(),
citizenship: yup.string().required(),
@ -62,6 +56,40 @@
alert(JSON.stringify(values));
}
});
const isPageInvalid = (): boolean => {
switch (pageIndex) {
case 0:
if ($errors.name || $errors.email || $errors.telephone) {
return true;
}
break;
case 1:
if ($errors.birthSurname || $errors.birthPlace || $errors.birthDate || $errors.sex) {
return true;
}
break;
case 2:
if ($errors.address || $errors.parentEmail || $errors.parentTelephone) {
return true;
}
break;
case 3:
if (
$errors.citizenship ||
$errors.personalId ||
$errors.study ||
$errors.applicationId
) {
return true;
}
break;
default:
return false;
}
return false;
}
</script>
<SplitLayout>
@ -109,6 +137,7 @@
on:change={handleChange}
bind:value={$form.telephone}
type="tel"
format="tel"
placeholder="Telefon"
icon
>
@ -156,6 +185,7 @@
on:change={handleChange}
bind:value={$form.birthDate}
type="text"
format="birthdate"
placeholder="Datum narození"
/>
<TextField
@ -175,9 +205,9 @@
<div class="flex flex-col w-full md:w-3/5">
<span class="w-full mt-8">
<TextField
error={$errors.home}
error={$errors.address}
on:change={handleChange}
bind:value={$form.home}
bind:value={$form.address}
type="text"
placeholder="Adresa trvalého bydliště"
/>
@ -224,6 +254,7 @@
on:change={handleChange}
bind:value={$form.personalId}
type="text"
format="personalIdNumber"
placeholder="Rodné číslo"
/>
<TextField
@ -247,48 +278,34 @@
<input
on:click={async (e) => {
await handleSubmit(e);
switch (pageIndex) {
case 0:
if ($errors.name || $errors.email || $errors.telephone) {
return;
}
break;
case 1:
if ($errors.birthSurname || $errors.birthPlace || $errors.birthDate || $errors.sex) {
return;
}
break;
case 2:
if ($errors.home || $errors.parentEmail || $errors.parentTelephone) {
return;
}
break;
case 3:
if (
$errors.citizenship ||
$errors.personalId ||
$errors.study ||
$errors.applicationId
) {
return;
}
break;
default:
break;
if (isPageInvalid()) return;
if (pageIndex === pageCount) {
alert('should submit');
} else {
pagesFilled++;
pageIndex++;
}
pageIndex++;
errors.set(formInitialValues);
}}
class="w-full mt-8 md:w-3/5 p-3 rounded-lg font-semibold text-xl transition-colors duration-300 bg-sspsBlue hover:bg-sspsBlueDark text-white"
class="w-full mt-8 md:w-3/5 p-3 rounded-lg font-semibold text-xl transition-colors duration-300 bg-sspsBlue hover:bg-sspsBlueDark text-white hover:cursor-pointer"
type="submit"
value={pageIndex === pageCount ? 'Odeslat' : 'Pokračovat'}
/>
<div class="mt-8 flex flex-row justify-center">
{#each Array(pageCount + 1) as _, i}
<span class:dotActive={i === pageIndex} class="ml-2 w-3 h-3 rounded-full bg-sspsGray" />
<button class:dotActive={i === pageIndex} on:click={async (e) => {
if (i <= pagesFilled) { // never skip unfilled or invalid pages
pageIndex = i;
} else if (i == pagesFilled + 1) { // if next page is clicked, validate current page
await handleSubmit(e);
if (isPageInvalid()) return;
pagesFilled++;
pageIndex++;
errors.set(formInitialValues);
}
}
} class="dot" />
{/each}
</div>
</div>
@ -305,6 +322,11 @@
@apply w-full;
@apply items-center justify-center;
}
.dot {
@apply ml-2 w-4 h-4
@apply hover:cursor-pointer hover:bg-sspsBlue
@apply rounded-full bg-sspsGray;
}
.dotActive {
@apply bg-sspsBlue;
}