full

Author: JavaScriptMan-for

.vscode/settings.json

@@ -2,6 +2,7 @@
     "cSpell.words": [
         "officedocument",
         "openxmlformats",
+        "Respresent",
         "wordprocessingml"
     ]
 }

client/enums/Links.enum.ts

@@ -2,6 +2,6 @@ export enum Links {
     MAIN_PAGE = "/",
     REDACT = '/redact',
     VARIOUS = '/various',
-    SETTINGS = '/settings'
+    RESULT = '/result'
 }
 

client/public/img/delete.png

@@ -3,7 +3,7 @@ import { Routes, Route, useLocation } from 'react-router-dom'
 import Layout from './Layout'
 
 import MainPage from '@pages/Main.page'
-import SettingsPage from '@pages/Settings.page'
+import ResultPage from '@pages/Result.page'
 import RedactorPage from '@pages/Redactor.page'
 import VariousPage from '@pages/Various.page'
 
@@ -25,7 +25,7 @@ const App:FC = () => {
         <Routes>
            <Route path='/' element={<Layout />}>
               <Route index path='/' element={<MainPage />}/>
-              <Route path='settings' element={<SettingsPage />}/>
+              <Route path='result' element={<ResultPage />}/>
               <Route path='redact' element={<RedactorPage />}/>
               <Route path='various' element={<VariousPage />} />
            </Route>

client/src/App.tsx

@@ -2,42 +2,66 @@ import { FC, useEffect, useCallback } from 'react';
 import "../sass/various_page.scss"
 
 import { useAppDispatch } from '@slices-my/store';
-import { addVariousInfo } from '@slices-my/various_info.slice';
+import { addVariousInfo, addIsValid } from '@slices-my/various_info.slice';
 
 import { useSelector } from 'react-redux';
 import { RootState } from '@slices-my/store';
 
+import { useNavigate } from 'react-router-dom';
+
 import { useForm, FormProvider } from 'react-hook-form';
 import { VariousInfo } from '@types-my/Form.type';
+import { Links } from '@enums/Links.enum';
 
 import FIO from '@components/form_parts/FIO';
-import Fraction from '@components/form_parts/Fraction';
+import deleteIcon from '/img/delete.png'
+
+
+interface Props {
+    id: number,
+    onDelete: (id: number) => void,
+    num: number
+}
+
+const Form: FC<Props> = ({ id, onDelete, num }) => {
 
-const Form: FC = () => {
+    const navigate = useNavigate()
+
+    const general_info = useSelector((state: RootState) => state.general_info.general_info)
     const dispatch = useAppDispatch();
     const isClick = useSelector((state: RootState) => state.various_info.isClick);
 
     const methods = useForm<VariousInfo>({ mode: 'onBlur' });
     const { handleSubmit, formState: { isValid } } = methods;
 
     const onSubmit = useCallback((data: VariousInfo) => {
-        console.log(data);
         dispatch(addVariousInfo(Array(data)));
-    }, [dispatch]); 
+        navigate(Links.RESULT)
+    }, [dispatch]);
+
+
 
     useEffect(() => {
         if (isClick > 0) {
-            alert(1)
-            handleSubmit((data: VariousInfo) => onSubmit(data))(); 
+            dispatch(addIsValid(isValid))
+            handleSubmit((data: VariousInfo) => onSubmit(data))();
         }
-    }, [isClick, handleSubmit, onSubmit]); 
+    }, [isClick, handleSubmit, onSubmit]);
+
+
+
+
+
+
     return (
         <>
+            <span className='number_form'>
+                #{num}
+                <img onClick={() => onDelete(id)} id='delete_icon' width={36} src={deleteIcon} alt="Удалить участника" />
+            </span>
             <FormProvider {...methods}>
-                <form > 
-                    <h2>Информация о каждом участнике</h2>
+                <form className='various'>
                     <FIO />
-                    <Fraction />
                 </form>
             </FormProvider>
         </>

client/src/components/Form.tsx

@@ -1,23 +1,38 @@
-import { FC } from 'react';
+import React, { FC } from 'react';
 
 
-const OptionsMouthComponent:FC = () => {
+const OptionsMouthComponent: FC = () => {
+  const defaultValue = localStorage.getItem('mouth') || ''
+
+
+  const options = [
+    { value: "января", label: "Январь" },
+    { value: "февраля", label: "Февраль" },
+    { value: "марта", label: "Март" },
+    { value: "апреля", label: "Апрель" },
+    { value: "мая", label: "Май" },
+    { value: "июня", label: "Июнь" },
+    { value: "июля", label: "Июль" },
+    { value: "августа", label: "Август" },
+    { value: "сентября", label: "Сентябрь" },
+    { value: "октября", label: "Октябрь" },
+    { value: "ноября", label: "Ноябрь" },
+    { value: "декабря", label: "Декабрь" },
+  ];
+
   return (
     <>
-       <option value="января">Январь</option>
-       <option value="февраля">Февраль</option>
-       <option value="марта">Март</option>
-       <option value="апреля">Апрель</option>
-       <option value="мая">Май</option>
-       <option value="июня">Июнь</option>
-       <option value="июля">Июль</option>
-       <option value="августа">Август</option>
-       <option value="сентября">Сентябрь</option>
-       <option value="октября">Октябрь</option>
-       <option value="ноября">Ноябрь</option>
-       <option value="декабря">Декабрь</option>
+      {options.map((option, index) => (
+        <option
+          key={index}
+          value={option.value}
+          selected={option.value === defaultValue}
+        >
+          {option.label}
+        </option>
+      ))}
     </>
-  )
-}
+  );
+};
 
 export default OptionsMouthComponent;

client/src/components/OptionsMouth.tsx

@@ -8,12 +8,15 @@ import { AddressPartType } from "@types-my/Form.type"
 
 const Address:FC = () => {
     const { register, formState: { errors } } = useFormContext<AddressPartType>();
+
+    const ls = localStorage.getItem('address') || ''
   return (
     <div id='address'>
        <div className="part_row_inputs">
         <label htmlFor="address">Адрес</label>
         <textarea
-        placeholder='Белгородская область город Белгород проспект Славы 31/2'
+        defaultValue={ls}
+        placeholder='Белгородская область, город Белгород, проспект Славы 31/2'
         id='address'
         {...register("address", {
             required: "Это поле обязательное",

client/src/components/form_parts/Address.tsx

@@ -8,7 +8,7 @@ import { AreaPartType } from "@types-my/Form.type"
 
 const Area:FC = () => {
 const { register, watch, setValue, formState: { errors } } = useFormContext<AreaPartType>();
-
+const ls = localStorage.getItem('area') || ''
     const area_value = watch('area');
 
     useEffect(()=> {
@@ -23,6 +23,7 @@ const { register, watch, setValue, formState: { errors } } = useFormContext<Area
        <div className="part_row_inputs">
         <label htmlFor="area_input">Площадь</label>
         <input
+        defaultValue={ls}
         id='area_input'
         placeholder='10000'
         type="number"

client/src/components/form_parts/Area.tsx

@@ -9,6 +9,13 @@ import { CadastralNumberPartType } from "@types-my/Form.type"
 const CadastralNumber:FC = () => {
  const { register, watch, setValue, formState: { errors } } = useFormContext<CadastralNumberPartType>();
 
+
+  const ls_1 = localStorage.getItem('c_1') || ''
+  const ls_2 = localStorage.getItem('c_2') || ''
+  const ls_3 = localStorage.getItem('c_3') || ''
+  const ls_4 = localStorage.getItem('c_y') || ''
+
+
 const c_1 = watch('cadastral_number_1');
 const c_2 = watch('cadastral_number_2');
 const c_3 = watch('cadastral_number_3');
@@ -38,6 +45,7 @@ useEffect(()=> {
        <div className="part_row_inputs">
         <label>Кадастровый номер</label>
             <input
+            defaultValue={ls_1}
             placeholder='XX'
             id='c_1'
             type="number"
@@ -53,6 +61,7 @@ useEffect(()=> {
 
 
             <input
+            defaultValue={ls_2}
             id='c_2'
             placeholder='XX'
             type="number" 
@@ -68,6 +77,7 @@ useEffect(()=> {
 
 
             <input
+            defaultValue={ls_3}
             placeholder='XXXXXXX'
             id="c_3"
             type="number"
@@ -83,6 +93,7 @@ useEffect(()=> {
 
 
             <input
+            defaultValue={ls_4}
             placeholder='X'
             id='c_y'
             type="number"

client/src/components/form_parts/CadastralNumber.tsx

@@ -11,6 +11,8 @@ const Date:FC = () => {
 
   const { register, watch, setValue, formState: { errors } } = useFormContext<DatePartType>();
 
+  const ls_1 = localStorage.getItem('day') || ''
+  const ls_2 = localStorage.getItem('year') || ''
 
   const day_value = watch('day');
   const year_value = watch('year');
@@ -39,6 +41,7 @@ const Date:FC = () => {
         placeholder='1'
         id='day_input'
         type="number"
+        defaultValue={ls_1}
         {...register('day', {
          required: "Это поле обязательное",
           max: {
@@ -59,6 +62,7 @@ const Date:FC = () => {
        </select>
        <label htmlFor="year_input">Год</label>  
        <input
+       defaultValue={ls_2}
        placeholder='2020'
        id='year_input'
        type="number"