add and edit

src/App.tsx

@@ -6,8 +6,7 @@ import Header from './components/Header/Header';
 import AuthPage from './pages/AuthPage/AuthPage';
 import HomePage from './pages/HomePage/HomePage';
 import RequestPage from './pages/RequestPage/RequestPage';
-import AddPage from './pages/(crudPages)/AddPage';
-import EditPage from './pages/(crudPages)/EditPage';
+import AddEditPage from './pages/(crudPages)/AddEditPage';
 import './App.css';
 
 const AuthLayout: React.FC = () => {
@@ -33,8 +32,8 @@ const App: React.FC = () => {
         ) : (
           <Route element={<AuthLayout />}>
             <Route path="/" element={<HomePage />} />
-            <Route path="/add" element={<AddPage />} />
-            <Route path="/edit/:id" element={<EditPage />} />
+            <Route path="/add" element={<AddEditPage />} />
+            <Route path="/edit/:id" element={<AddEditPage />} />
             <Route path="/requests" element={<RequestPage />} />
             <Route path="/*" element={<Navigate to="/" />} />
           </Route>

src/features/api/apiSlice.tsx

@@ -43,16 +43,16 @@ export const apiSlice = createApi({
         }),
         addNewOrganization: builder.mutation<Organization, Partial<Organization>>({
             query: (initialOrg) => ({
-                url: '/save', // Ensure the endpoint is correct
+                url: '/save',
                 method: 'POST',
                 body: initialOrg,
             }),
             invalidatesTags: ["organizations"],
         }),
         editOrganization: builder.mutation<Organization, Partial<Organization>>({
-            query: ({ id, ...rest }) => ({
-                url: `/edit?id=${id}`,
-                method: 'PUT',
+            query: ({ ...rest }) => ({
+                url: `/save`,
+                method: 'POST',
                 body: rest,
             }),
             invalidatesTags: ["organizations"],

src/features/pagination/mainPagination.tsx

 import { createSlice } from "@reduxjs/toolkit";
 
-const initialState = {
+interface InitialState {
+    currentPage: number,
+    totalOrgNumber: number,
+    ORG_NUMBER_PER_PAGE: number,
+}
+
+const initialState: InitialState = {
     currentPage: 1,
     totalOrgNumber: 0,
-    ORG_NUMBER_PER_PAGE: 8
+    ORG_NUMBER_PER_PAGE: 15
 }
 
 const mainPaginationSlice = createSlice({

src/pages/(crudPages)/AddEditPage.tsx

+import React, { useEffect } from 'react';
+import { useNavigate, useParams } from 'react-router';
+import { Form, Input, Button, Select, message } from 'antd';
+import { useAddNewOrganizationMutation, useEditOrganizationMutation, useGetOrganizationQuery } from '../../features/api/apiSlice';
+import { setTotalOrgNumber, setCurrentPage } from '../../features/pagination/mainPagination';
+import { useSelector, useDispatch } from 'react-redux';
+import './style.css';
+
+interface OrganizationValues {
+    id?: number;
+    bin: string;
+    code: string;
+    name: string;
+    host: string;
+    login: string;
+    password: string;
+    status: string;
+}
+
+const { Item } = Form;
+const { Option } = Select;
+
+const AddEditPage: React.FC = () => {
+    const navigate = useNavigate();
+    const dispatch = useDispatch();
+    const { id } = useParams<{ id: string }>();
+    const isEdit = Boolean(id);
+    const { data, isLoading, isError } = useGetOrganizationQuery(id!, { skip: !isEdit });
+    const [addNewOrganization] = useAddNewOrganizationMutation();
+    const [editOrganization] = useEditOrganizationMutation();
+    const [form] = Form.useForm();
+    const totalOrgNumber = useSelector((state: any) => state.mainPagination.totalOrgNumber);
+    const ORG_NUMBER_PER_PAGE = useSelector((state: any) => state.mainPagination.ORG_NUMBER_PER_PAGE);
+
+    useEffect(() => {
+        if (data) {
+            form.setFieldsValue({
+                ...data,
+                status: data.status === 2 ? 'active' : data.status === 1 ? 'blocked' : 'deleted',
+            });
+        }
+    }, [data, form]);
+
+    const onFinish = async (values: OrganizationValues) => {
+        const normalizedValues = {
+            ...values,
+            status: values.status === 'active' ? 2 : values.status === 'blocked' ? 1 : 0,
+            deleted: null,
+        };
+
+        try {
+            if (isEdit) {
+                await editOrganization({ ...normalizedValues }).unwrap();
+                message.success('Организация успешно обновлена!');
+            } else {
+                await addNewOrganization({ ...normalizedValues, created: new Date().toISOString() }).unwrap();
+                message.success('Организация успешно добавлена!');
+                dispatch(setTotalOrgNumber(totalOrgNumber + 1));
+                const newTotalPages = Math.ceil((totalOrgNumber + 1) / ORG_NUMBER_PER_PAGE);
+                dispatch(setCurrentPage(newTotalPages));
+            }
+            navigate('/');
+        } catch (err) {
+            message.error('Произошла ошибка при сохранении организации!');
+        }
+    };
+
+    if (isEdit && isLoading) return <div>Loading...</div>;
+    if (isEdit && isError) return <div>Error loading organization data</div>;
+
+    return (
+        <div className='container'>
+            <Form
+                form={form}
+                layout="vertical"
+                name="organization_form"
+                onFinish={onFinish}
+                initialValues={{ status: 'active' }}
+                className='form'
+            >
+                {isEdit && (
+                    <Item label="ID" name="id">
+                        <Input disabled />
+                    </Item>
+                )}
+                <Item
+                    label="БИН организации"
+                    name="bin"
+                    rules={[
+                        { required: true, message: 'Пожалуйста, введите БИН организации!' },
+                        { pattern: /^\d{12}$/, message: 'БИН должен состоять из 12 цифр!' }
+                    ]}
+                >
+                    <Input maxLength={12} placeholder="12 цифр" />
+                </Item>
+                <Item
+                    label="Код организации"
+                    name="code"
+                    rules={[
+                        { required: true, message: 'Пожалуйста, введите код организации!' },
+                        { pattern: /^[a-zA-Z0-9-_]+$/, message: 'Код организации должен содержать только английские буквы, цифры, символы "-" и "_"' }
+                    ]}
+                >
+                    <Input maxLength={128} />
+                </Item>
+                <Item
+                    label="Наименование организации"
+                    name="name"
+                    rules={[{ required: true, message: 'Пожалуйста, введите наименование организации!' }]}
+                >
+                    <Input maxLength={128} />
+                </Item>
+                <Item
+                    label="Адрес системы/хост"
+                    name="host"
+                    rules={[{ required: true, message: 'Пожалуйста, введите адрес системы/хост!' }]}
+                >
+                    <Input maxLength={128} />
+                </Item>
+                <Item
+                    label="Логин"
+                    name="login"
+                    rules={[
+                        { required: true, message: 'Пожалуйста, введите логин!' },
+                        { pattern: /^[a-zA-Z0-9-_]+$/, message: 'Логин должен содержать только английские буквы, цифры, символы "-" и "_"' }
+                    ]}
+                >
+                    <Input maxLength={128} />
+                </Item>
+                <Item
+                    label="Пароль"
+                    name="password"
+                    rules={[
+                        { required: true, message: 'Пожалуйста, введите пароль!' },
+                        { pattern: /^[a-zA-Z0-9-_]+$/, message: 'Пароль должен содержать только английские буквы, цифры, символы "-" и "_"' }
+                    ]}
+                >
+                    <Input.Password maxLength={128} />
+                </Item>
+                <Item
+                    label="Статус"
+                    name="status"
+                    rules={[{ required: true, message: 'Пожалуйста, выберите статус!' }]}
+                >
+                    <Select placeholder="Выберите статус">
+                        <Option value="active">Активен</Option>
+                        <Option value="blocked">Заблокирован</Option>
+                        <Option value="deleted">Удален</Option>
+                    </Select>
+                </Item>
+                <div className='form-footer'>
+                    <Item className='form-footer-item'>
+                        <Button type="default" style={{ marginRight: '8px' }} onClick={() => navigate("/")}>
+                            Отмена
+                        </Button>
+                        <Button type="primary" htmlType="submit">
+                            Сохранить
+                        </Button>
+                    </Item>
+                </div>
+            </Form>
+        </div>
+    );
+};
+
+export default AddEditPage;

src/pages/(crudPages)/AddPage.tsx

@@ -16,7 +16,6 @@ interface AddValues {
     status: string;
 }
 
-
 const { Item } = Form;
 const { Option } = Select;
 

src/pages/(crudPages)/EditPage.tsx

@@ -4,14 +4,14 @@ import { Form, Input, Button, Select, message } from 'antd';
 import { useGetOrganizationQuery, useEditOrganizationMutation } from '../../features/api/apiSlice';
 import './style.css';
 interface EditValues {
-    id: number; // Change this line
+    id: number; 
     bin: string;
     host: string;
     login: string;
     organization_code: string;
     organization_name: string;
     password: string;
-    status: number; // Change this line
+    status: string; 
 }
 
 const { Item } = Form;
@@ -37,10 +37,12 @@ const EditPage: React.FC = () => {
     const onFinish = async (values: EditValues) => {
         const updatedValues = {
             ...values,
-            status: values.status, // Since it's now a number
+            status:  values.status === 'active' ? 2 : values.status === 'blocked' ? 1 : 0, 
             deleted: null,
         };
 
+        console.log(updatedValues);
+
         try {
             await editOrganization({ ...updatedValues }).unwrap();
             message.success('Организация успешно обновлена!');
@@ -83,7 +85,7 @@ const EditPage: React.FC = () => {
 
                 <Item
                     label="Код организации"
-                    name="organization_code"
+                    name="code"
                     rules={[
                         { required: true, message: 'Пожалуйста, введите код организации!' },
                         { pattern: /^[a-zA-Z0-9-_]+$/, message: 'Код организации должен содержать только английские буквы, цифры, символы "-" и "_"' }
@@ -94,7 +96,7 @@ const EditPage: React.FC = () => {
 
                 <Item
                     label="Наименование организации"
-                    name="organization_name"
+                    name="name"
                     rules={[{ required: true, message: 'Пожалуйста, введите наименование организации!' }]}
                 >
                     <Input maxLength={128} />