Skip to content

Commit 757447e

Browse files
JavaScriptMan-forJavaScriptMan-for
committed
[концепт] сделал various page
1 parent 4e1fdcd commit 757447e

File tree

17 files changed

+289
-46
lines changed

17 files changed

+289
-46
lines changed

‎client/src/components/Form.tsx‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
import { FC, useEffect, useCallback } from 'react';
2+
import "../sass/various_page.scss"
3+
4+
import { useAppDispatch } from '@slices-my/store';
5+
import { addVariousInfo } from '@slices-my/various_info.slice';
6+
7+
import { useSelector } from 'react-redux';
8+
import { RootState } from '@slices-my/store';
9+
10+
import { useForm, FormProvider } from 'react-hook-form';
11+
import { VariousInfo } from '@types-my/Form.type';
12+
13+
import FIO from '@components/form_parts/FIO';
14+
import Fraction from '@components/form_parts/Fraction';
15+
16+
const Form: FC = () => {
17+
const dispatch = useAppDispatch();
18+
const isClick = useSelector((state: RootState) => state.various_info.isClick);
19+
20+
const methods = useForm<VariousInfo>({ mode: 'onBlur' });
21+
const { handleSubmit, formState: { isValid } } = methods;
22+
23+
const onSubmit = useCallback((data: VariousInfo) => {
24+
console.log(data);
25+
dispatch(addVariousInfo(Array(data)));
26+
}, [dispatch]);
27+
28+
useEffect(() => {
29+
if (isClick > 0) {
30+
alert(1)
31+
handleSubmit((data: VariousInfo) => onSubmit(data))();
32+
}
33+
}, [isClick, handleSubmit, onSubmit]);
34+
return (
35+
<>
36+
<FormProvider {...methods}>
37+
<form >
38+
<h2>Информация о каждом участнике</h2>
39+
<FIO />
40+
<Fraction />
41+
</form>
42+
</FormProvider>
43+
</>
44+
);
45+
};
46+
47+
export default Form;

‎client/src/components/form_parts/Area.tsx‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ import "../../sass/button.scss"
44

55
import { useFormContext } from 'react-hook-form';
66
import { AreaPartType } from "@types-my/Form.type"
7-
import OptionsEd from '@components/OptionsEd';
87

98

109
const Area:FC = () => {
@@ -13,7 +12,7 @@ const { register, watch, setValue, formState: { errors } } = useFormContext<Area
1312
const area_value = watch('area');
1413

1514
useEffect(()=> {
16-
if(area_value && String(area_value).length > 5) {
15+
if(area_value && String(area_value).length > 9) {
1716
const count = Number(area_value.toString().slice(0, -1))
1817
setValue('area', count)
1918
}
@@ -35,10 +34,7 @@ const { register, watch, setValue, formState: { errors } } = useFormContext<Area
3534
}
3635
})}
3736
/>
38-
<label htmlFor="ed">Ед. измерения</label>
39-
<select {...register('unit_of_measurement')} id="ed">
40-
<OptionsEd />
41-
</select>
37+
<p id='unit'>кв. м</p>
4238
</div>
4339
<div className="validate_errors">
4440
<p className="validate_error">{errors.area && errors.area.message}</p>

‎client/src/components/form_parts/CadastralNumber.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,7 @@ useEffect(()=> {
7474
{...register('cadastral_number_3', {
7575
required: "Это поле обязательное",
7676
min: {
77-
value: 1000000,
77+
value: 0,
7878
message: "Некорректное значение третьего поля"
7979
}
8080
})}
@@ -83,7 +83,7 @@ useEffect(()=> {
8383

8484

8585
<input
86-
placeholder='X*Y'
86+
placeholder='X'
8787
id='c_y'
8888
type="number"
8989
{...register('cadastral_number_y', {

‎client/src/components/form_parts/FIO.tsx‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
2+
import { FC } from 'react';
3+
import { useFormContext } from 'react-hook-form';
4+
5+
const FIO:FC = () => {
6+
const { register, formState: { errors } } = useFormContext<{fio: string}>();
7+
8+
9+
return (
10+
<div className='pole' id="fio">
11+
<div className='part'>
12+
<label htmlFor="fio_input">ФИО</label>
13+
<input
14+
15+
type="text"
16+
id="fio_input"
17+
placeholder='Иванов Иван Иванович'
18+
{...register('fio', {
19+
required: "Это поле обязательное",
20+
maxLength: {
21+
value: 60,
22+
message: "Слишком длинное ФИО"
23+
},
24+
minLength: {
25+
value: 2,
26+
message: "Слишком короткое ФИО"
27+
}
28+
})}
29+
/>
30+
</div>
31+
{
32+
errors.fio &&
33+
<div className="validate_errors">
34+
<p className="validate_error">{errors.fio.message}</p>
35+
</div>
36+
}
37+
</div>
38+
)
39+
}
40+
41+
export default FIO;

‎client/src/components/form_parts/Fraction.tsx‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
import { FC } from 'react';
2+
import { useFormContext } from 'react-hook-form';
3+
4+
interface FractionProps {}
5+
6+
const Fraction: FC<FractionProps> = () => {
7+
const { register, formState: { errors } } = useFormContext<{ fraction: "в доле" | 'га', isRepresentative: boolean }>();
8+
9+
return (
10+
<div className='pole' id="fio">
11+
<div className='part'>
12+
<label>Доля в праве:</label>
13+
<label className='label-fraction'>
14+
<input
15+
type="radio"
16+
value="в доле"
17+
{...register("fraction")}
18+
/>
19+
в доле
20+
</label>
21+
22+
<label className='label-fraction'>
23+
<input
24+
type="radio"
25+
value="га"
26+
{...register("fraction")}
27+
/>
28+
га
29+
</label>
30+
<label style={{marginLeft:"40px"}}>Представитель:</label>
31+
<label className='label-fraction'>
32+
<input
33+
34+
type="radio"
35+
value="true"
36+
{...register('isRepresentative')}
37+
/>
38+
есть
39+
</label>
40+
41+
<label className='label-fraction'>
42+
<input
43+
type="radio"
44+
value="false"
45+
{...register('isRepresentative')}
46+
/>
47+
нет
48+
</label>
49+
</div>
50+
{errors.fraction && <p>{errors.fraction.message}</p>} {/* Вывод ошибок (если required) */}
51+
</div>
52+
)
53+
}
54+
55+
export default Fraction;

‎client/src/components/form_parts/NumberQuest.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ const NumberQuest:FC = () => {
1111
return (
1212
<div id='number_quest'>
1313
<div className="part_row_inputs">
14-
<label htmlFor="number_quest">Количество вопросов дня</label>
14+
<label htmlFor="number_quest">Число вопросов повестки дня</label>
1515
<input
1616
id='number_quest'
1717
placeholder='1'
@@ -20,11 +20,11 @@ const NumberQuest:FC = () => {
2020
required: "Это поле обязательное",
2121
min: {
2222
value: 1,
23-
message: "Минимальное количество вопросов для - 1"
23+
message: "Минимальное число вопросов для - 1"
2424
},
2525
max: {
2626
value: 15,
27-
message: "Максимальное количество вопросов дня - 15"
27+
message: "Максимальное число вопросов дня - 15"
2828
}
2929
})}
3030
/>

‎client/src/pages/Main.page.tsx‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -12,10 +12,8 @@ const MainPage:FC = () => {
1212
<main>
1313
<h1>Конструктор бюллетеней</h1>
1414
<BlockComponent width='1500px'>
15-
Конструктор бюллетеней - инструмент для генерации
16-
большого количества бюллетеней, при этом
17-
не затрачивая время на создания их вручную.
18-
Как пользоваться этим инструментом, смотрите ниже.
15+
Конструктор бюллетеней - ваш верный помощник в создании бюллетеней для голосования на общих собраниях. <br />
16+
P.S. Ни в коем случае не пользуйтесь им, если Вы не цените свое время!
1917
</BlockComponent>
2018
<button id='main_button' type='button'>Смотреть ниже</button>
2119
</main>

‎client/src/pages/Redactor.page.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ const RedactorPage: FC = () => {
2828
console.log(data);
2929
const date_izn: string = `${data.day} ${data.mouth} ${data.year} года`
3030
const cadastral_number_izn: string = `${data.cadastral_number_1}:${data.cadastral_number_2}:${data.cadastral_number_3}:${data.cadastral_number_y}`
31-
const area_izn: string = `${data.area} ${data.unit_of_measurement}`
31+
const area_izn: string = `${data.area} кв. м`
3232

3333
const generalInfo: GeneralInfoToServer = {
3434
date: date_izn,
@@ -47,7 +47,7 @@ const RedactorPage: FC = () => {
4747
<h1>Конструктор</h1>
4848
<FormProvider {...methods}>
4949
<form onSubmit={handleSubmit(onSubmit)}>
50-
<h2>Введите общую для всех информацию</h2>
50+
<h2>Информация об общем собрании</h2>
5151
<DateComponent />
5252
<CadastralNumber />
5353
<Area />

‎client/src/pages/Various.page.tsx‎

Lines changed: 16 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,24 @@
11
import { FC } from 'react';
2-
import "../sass/preview_page.scss"
2+
import Form from '@components/Form';
3+
4+
import { useSelector } from 'react-redux';
5+
import { RootState } from '@slices-my/store';
6+
import { useAppDispatch } from '@slices-my/store';
7+
import { setIsClick } from '@slices-my/various_info.slice';
8+
9+
const Various_page:FC = () => {
10+
const dispatch = useAppDispatch()
11+
const general_info = useSelector((state: RootState) => state.general_info.general_info)
312

4-
const VariousPage:FC = () => {
513
return (
614
<>
7-
15+
<Form />
16+
<button type="button" onClick={(e) => {
17+
e.preventDefault();
18+
dispatch(setIsClick());
19+
}}>Кнопка</button>
820
</>
921
)
1022
}
1123

12-
export default VariousPage;
24+
export default Various_page;

‎client/src/sass/preview_page.scss‎

Whitespace-only changes.

0 commit comments

Comments
 (0)