Skip to content

E
ESYTD
Commit 35b96bc1 authored by Дияр Амангельды's avatar Дияр Амангельды
Browse files
Options

add and edit

parent 983ae71e
Hide whitespace changes
Inline Side-by-side
Showing with 188 additions and 16 deletions
src/App.tsx
View file @ 35b96bc1
......@@ -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
View file @ 35b96bc1
......@@ -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
View file @ 35b96bc1
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 0 → 100644
View file @ 35b96bc1
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
View file @ 35b96bc1
......@@ -16,7 +16,6 @@ interface AddValues {
status: string;
}
const { Item } = Form;
const { Option } = Select;
......
src/pages/(crudPages)/EditPage.tsx
View file @ 35b96bc1
......@@ -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} />
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment