You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
113 lines
4.5 KiB
113 lines
4.5 KiB
import React,{useRef} from 'react';
|
|
import { useForm, SubmitHandler, FormProvider } from "react-hook-form";
|
|
import { Select, Input, Link_str, SelectNominations } from "./UX";
|
|
|
|
interface IFormInputs {
|
|
name_team_coach: string,
|
|
coach_telefon_number: string,
|
|
nominations: string,
|
|
city_team: string,
|
|
training_institution_team: string,
|
|
team_name: string,
|
|
name_first_participant: string,
|
|
first_partial_class: number,
|
|
name_second_participant: string,
|
|
second_class: number,
|
|
name_third_party: string,
|
|
third_part_class: number,
|
|
body?: string[] | number[]
|
|
}
|
|
|
|
const defaultValues = {
|
|
name_team_coach: '',
|
|
coach_telefon_number: '',
|
|
nominations: '0',
|
|
city_team: '',
|
|
training_institution_team: '',
|
|
team_name: '',
|
|
name_first_participant: '',
|
|
first_partial_class: 0,
|
|
name_second_participant: '',
|
|
second_class: 0,
|
|
name_third_party: 'нет',
|
|
third_part_class: 0,
|
|
};
|
|
|
|
export const UserForm = (props): JSX.Element => {
|
|
const form = useRef(null);
|
|
const methods = useForm({ defaultValues });
|
|
|
|
const onSubmit: SubmitHandler<IFormInputs> = data => {
|
|
fetch('/api/registration', { method: 'POST', body: Object.values(data) as any})
|
|
.then((data) => {
|
|
props.updateData(data);
|
|
})
|
|
methods.reset(defaultValues);
|
|
}
|
|
return (
|
|
<>
|
|
<div className="mt-10 sm:mt-0">
|
|
<p>Личный кабинет</p>
|
|
<div className="tabs">
|
|
<a className="tab tab-bordered tab-active">Команды</a>
|
|
<a className="tab tab-bordered ">Персональные данные</a>
|
|
</div>
|
|
<div className="md:gap-6">
|
|
|
|
<div className="mt-5 md:mt-0 md:col-span-2">
|
|
<FormProvider {...methods} >
|
|
<form ref={form} onSubmit={methods.handleSubmit(onSubmit)}>
|
|
<div className="shadow overflow-hidden sm:rounded-md">
|
|
<div className="px-4 py-5 bg-white sm:p-6">
|
|
<div className="grid grid-cols-6 gap-6">
|
|
|
|
<div className="col-span-6 sm:col-span-3">
|
|
<Input placeholder="Фиксики" name="team_name" text="Название команды" additional={""} />
|
|
</div>
|
|
|
|
<div className="col-span-6 sm:col-span-3">
|
|
<SelectNominations text={'Номинация'} name={'nominations'}/>
|
|
</div>
|
|
|
|
<div className="col-span-6 sm:col-span-3">
|
|
<Input placeholder="Иванов Иван Иванович" name="name_first_participant" text="ФИО первого участника" additional={""} />
|
|
</div>
|
|
|
|
<div className="col-span-6 sm:col-span-3">
|
|
<Select text={'Класс участника'} name={'first_partial_class'}/>
|
|
</div>
|
|
|
|
<div className="col-span-6 sm:col-span-3">
|
|
<Input placeholder="Иванов Петр Иванович" name="name_second_participant" text="ФИО второго участника" additional={""} />
|
|
</div>
|
|
|
|
<div className="col-span-6 sm:col-span-3">
|
|
<Select text={'Класс участника'} name={'second_class'}/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="px-4 py-3 bg-gray-50 text-left sm:px-6">
|
|
<label className="form-check-label inline-block text-gray-800" >
|
|
Нажимая на кнопку "Зарегистрировать команду", настоящим участники (их законные представители) и тренер (руководитель) подтверждают свое согласие на обработку персональных данных МАОУ СОШ № 103
|
|
</label>
|
|
|
|
</div>
|
|
<div className="px-4 py-3 bg-gray-50 text-right sm:px-6">
|
|
<button
|
|
type="submit"
|
|
className="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
|
|
>
|
|
Зарегистрировать команду
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</FormProvider>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default UserForm;
|
|
|