andrei/visus-plus
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

для страницы пациентов вынес фнукции связанные с API в отдельный хук, также в UI хук вынес функции и переменные связанные с UI и состояниями

Browse Source
This commit is contained in:
Андрей Дувакин 2025-03-25 11:44:05 +05:00
parent f840a0ab34
commit 793a47a58d
11 changed files with 392 additions and 172 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
web-app/src/components/patients/PatientListCard.jsx
View File

@ -10,7 +10,6 @@ const PatientListCard = ({patient, handleEditPatient, handleDeletePatient}) => {
const birthday = new Date(patient.birthday)
const deletePatient = () => {
handleDeletePatient(patient.id);
};

90
web-app/src/hooks/useLenses.js Normal file
View File

@ -0,0 +1,90 @@
import {useDispatch, useSelector} from "react-redux";
import {
useAddLensMutation,
useDeleteLensMutation,
useGetLensesQuery,
useUpdateLensMutation
} from "../redux/services/lensesApi.js";
import {useEffect} from "react";
import {
closeModal,
setViewMode,
} from "../redux/slices/lensesSlice.js";
import {getCachedInfo} from "../utils/cachedInfoUtils.js";
import {notification} from "antd";
const useLenses = () => {
const dispatch = useDispatch();
const {
selectedLens,
} = useSelector(state => state.lensesUI);
const {data: lenses = [], isLoading, isError} = useGetLensesQuery(undefined, {
pollingInterval: 20000,
});
const [addLens] = useAddLensMutation();
const [updateLens] = useUpdateLensMutation();
const [deleteLens] = useDeleteLensMutation();
useEffect(() => {
document.title = "Линзы";
const cachedViewMode = getCachedInfo("viewModeLenses");
if (cachedViewMode) dispatch(setViewMode(cachedViewMode));
}, [dispatch]);
const handleDeleteLens = async (lensId) => {
try {
await deleteLens(lensId).unwrap();
notification.success({
message: "Линза удалена",
description: "Линза успешно удалена.",
placement: "topRight",
});
} catch (error) {
notification.error({
message: "Ошибка удаления",
description: error.data?.message || "Не удалось удалить линзу",
placement: "topRight",
});
}
};
const handleModalSubmit = async (lensData) => {
try {
if (selectedLens) {
await updateLens({id: selectedLens.id, ...lensData}).unwrap();
notification.success({
message: "Линза обновлена",
description: "Линза успешно обновлена.",
placement: "topRight",
});
} else {
await addLens(lensData).unwrap();
notification.success({
message: "Линза добавлена",
description: "Линза успешно добавлена.",
placement: "topRight",
});
}
dispatch(closeModal());
} catch (error) {
notification.error({
message: "Ошибка",
description: error.data?.message || "Произошла ошибка при сохранении",
placement: "topRight",
});
}
};
return {
lenses,
isLoading,
isError,
handleDeleteLens,
handleModalSubmit,
}
};
export default useLenses;

45
web-app/src/hooks/usePatients.js
View File

@ -1,4 +1,3 @@
import { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { notification } from "antd";
import {
@ -8,25 +7,13 @@ import {
useUpdatePatientMutation
} from "../redux/services/patientsApi";
import {
openModal,
closeModal,
selectPatient,
setSearchText,
setSortOrder,
setViewMode,
setCurrentPage,
setPageSize
} from "../redux/slices/patientsSlice";
import { getCachedInfo } from "../utils/cachedInfoUtils";
const usePatients = () => {
const dispatch = useDispatch();
const {
searchText,
sortOrder,
viewMode,
selectedPatient,
isModalVisible
} = useSelector(state => state.patientsUI);
const { data: patients = [], isLoading, isError } = useGetPatientsQuery(undefined, {
@ -36,22 +23,6 @@ const usePatients = () => {
const [updatePatient] = useUpdatePatientMutation();
const [deletePatient] = useDeletePatientMutation();
useEffect(() => {
document.title = "Пациенты";
const cachedViewMode = getCachedInfo("viewModePatients");
if (cachedViewMode) dispatch(setViewMode(cachedViewMode));
}, [dispatch]);
const handleAddPatient = () => {
dispatch(selectPatient(null));
dispatch(openModal());
};
const handleEditPatient = (patient) => {
dispatch(selectPatient(patient));
dispatch(openModal());
};
const handleDeletePatient = async (patientId) => {
try {
await deletePatient(patientId).unwrap();
@ -69,7 +40,7 @@ const usePatients = () => {
}
};
const handleModalPatientSubmit = async (patientData) => {
const handleModalSubmit = async (patientData) => {
try {
if (selectedPatient) {
await updatePatient({ id: selectedPatient.id, ...patientData }).unwrap();
@ -100,20 +71,8 @@ const usePatients = () => {
patients,
isLoading,
isError,
searchText,
sortOrder,
viewMode,
isModalVisible,
selectedPatient,
handleAddPatient,
handleEditPatient,
handleDeletePatient,
handleModalPatientSubmit,
setSearchText: (text) => dispatch(setSearchText(text)),
setSortOrder: (order) => dispatch(setSortOrder(order)),
setViewMode: (mode) => dispatch(setViewMode(mode)),
setCurrentPage: (page) => dispatch(setCurrentPage(page)),
setPageSize: (size) => dispatch(setPageSize(size)),
handleModalSubmit,
};
};

101
web-app/src/hooks/usePatientsUI.js Normal file
View File

@ -0,0 +1,101 @@
import { useEffect, useMemo } from "react";
import { useDispatch, useSelector } from "react-redux";
import {
openModal,
selectPatient,
setCurrentPage,
setPageSize,
setSearchText,
setSortOrder,
setViewMode
} from "../redux/slices/patientsSlice";
import { closeModal } from "../redux/slices/lensesSlice";
import { getCachedInfo } from "../utils/cachedInfoUtils";
import {BuildOutlined, TableOutlined} from "@ant-design/icons";
const usePatientsUI = (patients) => {
const dispatch = useDispatch();
const {
searchText,
sortOrder,
viewMode,
selectedPatient,
isModalVisible,
currentPage,
pageSize,
} = useSelector(state => state.patientsUI);
useEffect(() => {
document.title = "Пациенты";
const cachedViewMode = getCachedInfo("viewModePatients");
if (cachedViewMode) dispatch(setViewMode(cachedViewMode));
}, [dispatch]);
const containerStyle = { padding: 20 };
const filterBarStyle = { marginBottom: 20 };
const formItemStyle = { width: "100%" };
const handleSetSearchText = (value) => dispatch(setSearchText(value));
const handleSetSortOrder = (value) => dispatch(setSortOrder(value));
const handleSetCurrentPage = (page) => dispatch(setCurrentPage(page));
const handleSetPageSize = (size) => dispatch(setPageSize(size));
const handleSetViewMode = (mode) => dispatch(setViewMode(mode));
const handleCloseModal = () => dispatch(closeModal());
const handlePaginationChange = (page, pageSize) => {
handleSetCurrentPage(page);
handleSetPageSize(pageSize);
};
const handleAddPatient = () => {
dispatch(selectPatient(null));
dispatch(openModal());
};
const handleEditPatient = (patient) => {
dispatch(selectPatient(patient));
dispatch(openModal());
};
const filteredPatients = useMemo(() => {
return patients
.filter(patient =>
Object.values(patient)
.filter(value => typeof value === "string")
.some(value => value.toLowerCase().includes(searchText.toLowerCase()))
)
.sort((a, b) => {
const fullNameA = `${a.last_name} ${a.first_name}`;
const fullNameB = `${b.last_name} ${b.first_name}`;
return sortOrder === "asc" ? fullNameA.localeCompare(fullNameB) : fullNameB.localeCompare(fullNameA);
});
}, [patients, searchText, sortOrder]);
const formatDate = (date) => new Date(date).toLocaleDateString();
return {
searchText,
sortOrder,
viewMode,
selectedPatient,
isModalVisible,
currentPage,
pageSize,
containerStyle,
filterBarStyle,
formItemStyle,
filteredPatients: patients.map(p => ({ ...p, key: p.id })),
handleSetSearchText,
handleSetSortOrder,
handleSetViewMode,
handleCloseModal,
handleAddPatient,
handleEditPatient,
formatDate,
handlePaginationChange,
};
};
export default usePatientsUI;

160
web-app/src/pages/PatientsPage.jsx
View File

@ -1,4 +1,3 @@
import {useEffect, useMemo} from 'react';
import {
Input,
Select,
@ -16,67 +15,23 @@ import {
BuildOutlined,
PlusOutlined,
SortAscendingOutlined,
SortDescendingOutlined,
TableOutlined,
SortDescendingOutlined, TableOutlined,
TeamOutlined
} from "@ant-design/icons";
import {useDispatch, useSelector} from "react-redux";
import {
setSearchText,
setSortOrder,
setViewMode,
closeModal,
setCurrentPage,
setPageSize
} from "../redux/slices/patientsSlice.js";
import PatientListCard from "../components/patients/PatientListCard.jsx";
import PatientFormModal from "../components/patients/PatientFormModal.jsx";
import SelectViewMode from "../components/SelectViewMode.jsx";
import LoadingIndicator from "../components/LoadingIndicator.jsx";
import usePatients from "../hooks/usePatients.js";
import usePatientsUI from "../hooks/usePatientsUI.js";
const {Option} = Select;
const {Title} = Typography;
const PatientsPage = () => {
const dispatch = useDispatch();
const {
patients,
isLoading,
isError,
handleAddPatient,
handleEditPatient,
handleDeletePatient,
handleModalPatientSubmit
} = usePatients();
const patientsData = usePatients();
const {
searchText,
sortOrder,
viewMode,
selectedPatient,
isModalVisible,
currentPage,
pageSize
} = useSelector(state => state.patientsUI);
useEffect(() => {
document.title = "Пациенты";
}, []);
const filteredPatients = useMemo(() => {
return patients
.filter(patient =>
Object.values(patient)
.filter(value => typeof value === "string")
.some(value => value.toLowerCase().includes(searchText.toLowerCase()))
)
.sort((a, b) => {
const fullNameA = `${a.last_name} ${a.first_name}`;
const fullNameB = `${b.last_name} ${b.first_name}`;
return sortOrder === "asc" ? fullNameA.localeCompare(fullNameB) : fullNameB.localeCompare(fullNameA);
});
}, [patients, searchText, sortOrder]);
const patientsUI = usePatientsUI(patientsData.patients);
const columns = [
{
@ -97,41 +52,36 @@ const PatientsPage = () => {
title: "Отчество",
dataIndex: "patronymic",
key: "patronymic",
sorter: (a, b) => a.patronymic.localeCompare(b.patronymic),
sortDirections: ["ascend", "descend"],
},
{
title: "Дата рождения",
dataIndex: "birthday",
key: "birthday",
sorter: (a, b) => new Date(a.birthday).getTime() - new Date(b.birthday).getTime(),
sortDirections: ["ascend", "descend"],
render: (date) => new Date(date).toLocaleDateString()
render: patientsUI.formatDate,
},
{
title: "Телефон",
dataIndex: "phone",
key: "phone",
},
{
title: "Email",
dataIndex: "email",
key: "email",
},
{
title: "Действия",
key: "actions",
fixed: 'right',
render: (_, record) => (
<Row gutter={[8, 8]}>
<Col xs={24} xl={12}>
<Button block onClick={() => handleEditPatient(record)}>Изменить</Button>
<Button block onClick={() => patientsUI.handleEditPatient(record)}>Изменить</Button>
</Col>
<Col xs={24} xl={12}>
<Popconfirm
title="Вы уверены, что хотите удалить пациента?"
onConfirm={() => handleDeletePatient(record.id)}
onConfirm={() => patientsData.handleDeletePatient(record.id)}
okText="Да, удалить"
cancelText="Отмена"
>
@ -156,31 +106,35 @@ const PatientsPage = () => {
}
];
if (isError) return <Result status="error" title="Ошибка" subTitle="Произошла ошибка в работе страницы"/>;
if (patientsData.isError) return (
<Result
status="error"
title="Ошибка"
subTitle="Произошла ошибка в работе страницы"
/>
);
return (
<div style={{padding: 20}}>
<div style={patientsUI.containerStyle}>
<Title level={1}><TeamOutlined/> Пациенты</Title>
<Row gutter={[16, 16]} style={{marginBottom: 20}}>
<Row gutter={[16, 16]} style={patientsUI.filterBarStyle}>
<Col xs={24} md={14} sm={10} xl={18} xxl={19}>
<Input
placeholder="Поиск пациента"
value={searchText}
onChange={(e) => dispatch(setSearchText(e.target.value))}
style={{width: "100%"}}
value={patientsUI.searchText}
onChange={(e) => patientsUI.handleSetSearchText(e.target.value)}
style={patientsUI.formItemStyle}
allowClear
/>
</Col>
{viewMode === "tile" && (
{patientsUI.viewMode === "tile" && (
<Col xs={24} md={5} sm={6} xl={3} xxl={2}>
<Tooltip
title={"Сортировка пациентов"}
>
<Tooltip title={"Сортировка пациентов"}>
<Select
value={sortOrder}
onChange={(value) => dispatch(setSortOrder(value))}
style={{width: "100%"}}
value={patientsUI.sortOrder}
onChange={patientsUI.handleSetSortOrder}
style={patientsUI.formItemStyle}
>
<Option value="asc"><SortAscendingOutlined/> А-Я</Option>
<Option value="desc"><SortDescendingOutlined/> Я-А</Option>
@ -189,18 +143,13 @@ const PatientsPage = () => {
</Col>
)}
<Col xs={24} md={
viewMode === "tile" ? 5 : 10
} sm={
viewMode === "tile" ? 8 : 14
} xl={
viewMode === "tile" ? 3 : 5
} xxl={
viewMode === "tile" ? 3 : 5
}>
<Col xs={24} md={patientsUI.viewMode === "tile" ? 5 : 10}
sm={patientsUI.viewMode === "tile" ? 8 : 14}
xl={patientsUI.viewMode === "tile" ? 3 : 5}
xxl={patientsUI.viewMode === "tile" ? 3 : 5}>
<SelectViewMode
viewMode={viewMode}
setViewMode={value => dispatch(setViewMode(value))}
viewMode={patientsUI.viewMode}
setViewMode={patientsUI.handleSetViewMode}
localStorageKey={"viewModePatients"}
toolTipText={"Формат отображения пациентов"}
viewModes={viewModes}
@ -208,48 +157,61 @@ const PatientsPage = () => {
</Col>
</Row>
{isLoading ? <LoadingIndicator/> : viewMode === "tile" ? (
{patientsData.isLoading ? <LoadingIndicator/> : patientsUI.viewMode === "tile" ? (
<List
grid={{gutter: 16, column: 3}}
dataSource={filteredPatients}
dataSource={patientsUI.filteredPatients}
renderItem={patient => (
<List.Item>
<PatientListCard
patient={patient}
handleEditPatient={handleEditPatient}
handleDeletePatient={handleDeletePatient}
handleEditPatient={patientsUI.handleEditPatient}
handleDeletePatient={patientsData.handleDeletePatient}
/>
</List.Item>
)}
pagination={{
current: currentPage, pageSize, onChange: (p, s) => {
dispatch(setCurrentPage(p));
dispatch(setPageSize(s));
}
currentPage: patientsUI.currentPage,
pageSize: patientsUI.pageSize,
showSizeChanger: true,
pageSizeOptions: ["5", "10", "20", "50"],
onChange: (page, newPageSize) => {
patientsUI.handlePaginationChange(page, newPageSize);
},
}}
/>
) : (
<Table
columns={columns}
dataSource={filteredPatients.map(p => ({...p, key: p.id}))}
dataSource={patientsUI.filteredPatients}
pagination={{
current: currentPage, pageSize, onChange: (p, s) => {
dispatch(setCurrentPage(p));
dispatch(setPageSize(s));
}
currentPage: patientsUI.currentPage,
pageSize: patientsUI.pageSize,
showSizeChanger: true,
pageSizeOptions: ["5", "10", "20", "50"],
onChange: (page, newPageSize) => {
patientsUI.handlePaginationChange(page, newPageSize);
},
}}
/>
)}
<FloatButton icon={<PlusOutlined/>} type="primary" onClick={handleAddPatient} tooltip="Добавить пациента"/>
<FloatButton
icon={<PlusOutlined/>}
type="primary"
onClick={patientsUI.handleAddPatient}
tooltip="Добавить пациента"
/>
<PatientFormModal
visible={isModalVisible}
onCancel={() => dispatch(closeModal())}
onSubmit={handleModalPatientSubmit}
patient={selectedPatient}
visible={patientsUI.isModalVisible}
onCancel={patientsUI.handleCloseModal}
onSubmit={patientsData.handleModalSubmit}
patient={patientsUI.selectedPatient}
/>
</div>
);
};
;
export default PatientsPage;

3
web-app/src/pages/lenses_layout/LensesPage.jsx
View File

@ -34,6 +34,9 @@ import LensFormModal from "../../components/lenses/LensFormModal.jsx";
import SelectViewMode from "../../components/SelectViewMode.jsx";
import LoadingIndicator from "../../components/LoadingIndicator.jsx";
import {getCachedInfo, getCacheTimestamp} from "../../utils/cachedInfoUtils.js";
import {useDispatch} from "react-redux";
import useLenses from "../../hooks/useLenses.js";
import {openModal, selectLens} from "../../redux/slices/lensesSlice.js";
const {Option} = Select;
const {useBreakpoint} = Grid;

53
web-app/src/redux/services/lensesApi.js Normal file
View File

@ -0,0 +1,53 @@
import {createApi, fetchBaseQuery} from "@reduxjs/toolkit/query/react";
import CONFIG from "../../core/сonfig.js";
export const lensesApi = createApi({
reducerPath: 'lensesApi',
baseQuery: fetchBaseQuery({
baseUrl: CONFIG.BASE_URL,
prepareHeaders: (headers) => {
const token = localStorage.getItem('access_token');
if (token) headers.set('Authorization', `Bearer ${token}`);
return headers;
}
}),
tagTypes: ['Lens'],
endpoints: (builder) => ({
getLenses: builder.query({
query: () => '/lenses/',
providesTags: ['Lens'],
refetchOnMountOrArgChange: 5
}),
addLens: builder.mutation({
query: (lens) => ({
url: '/lenses/',
method: 'POST',
body: lens
}),
invalidatesTags: ['Lens']
}),
updateLens: builder.mutation({
query: ({ id, ...lens }) => ({
url: `/lenses/${id}/`,
method: 'PUT',
body: lens
}),
invalidatesTags: ['Lens']
}),
deleteLens: builder.mutation({
query: (id) => ({
url: `/lenses/${id}/`,
method: 'DELETE'
}),
invalidatesTags: ['Lens']
}),
}),
});
export const {
useGetLensesQuery,
useAddLensMutation,
useUpdateLensMutation,
useDeleteLensMutation,
} = lensesApi;

14
web-app/src/redux/services/patientsApi.js
View File

@ -5,10 +5,10 @@ export const patientsApi = createApi({
reducerPath: 'patientsApi',
baseQuery: fetchBaseQuery({
baseUrl: CONFIG.BASE_URL,
prepareHeaders: (headers, { getState }) => {
const token = localStorage.getItem('access_token')
if (token) headers.set('Authorization', `Bearer ${token}`)
return headers
prepareHeaders: (headers) => {
const token = localStorage.getItem('access_token');
if (token) headers.set('Authorization', `Bearer ${token}`);
return headers;
}
}),
tagTypes: ['Patient'],
@ -40,9 +40,9 @@ export const patientsApi = createApi({
method: 'DELETE'
}),
invalidatesTags: ['Patient']
})
})
})
}),
}),
});
export const {
useGetPatientsQuery,

19
web-app/src/redux/slices/appointmentsSlice.js
View File

@ -1,19 +0,0 @@
import {createSlice} from '@reduxjs/toolkit';
const appointmentsSlice = createSlice({
name: 'appointments',
initialState: {
data: [],
status: 'idle',
error: null,
},
reducers: {
setAppointments(state, action) {
state.data = action.payload;
}
}
});
export const {setAppointments} = appointmentsSlice.actions;
export default appointmentsSlice.reducer;

72
web-app/src/redux/slices/lensesSlice.js Normal file
View File

@ -0,0 +1,72 @@
import {createSlice} from '@reduxjs/toolkit'
import {cacheInfo} from "../../utils/cachedInfoUtils.js";
const initialState = {
searchText: '',
viewMode: 'tile',
currentPage: 1,
pageSize: 10,
selectedLens: null,
isModalVisible: false,
showAvancedSearch: false,
searchParams: {
tor: null,
diameter: null,
preset_refraction: null,
periphery_toricity: null,
side: 'all',
issued: false,
trial: null
},
};
const lensesSlice = createSlice({
name: 'lensesUI',
initialState,
reducers: {
setSearchText: (state, action) => {
state.searchText = action.payload;
},
setCurrentPage: (state, action) => {
state.currentPage = action.payload;
},
setPageSize: (state, action) => {
state.pageSize = action.payload;
},
setViewMode: (state, action) => {
state.viewMode = action.payload;
cacheInfo("viewModeLenses", action.payload);
},
openModal: (state) => {
state.isModalVisible = true;
},
closeModal: (state) => {
state.isModalVisible = false;
state.selectedLens = null;
},
selectLens: (state, action) => {
state.selectedLens = action.payload;
},
setSearchParams: (state, action) => {
state.searchParams = action.payload;
},
setShowAdvancedSearch: (state, action) => {
state.showAvancedSearch = action.payload;
},
}
});
export const {
setSearchText,
setCurrentPage,
setPageSize,
setViewMode,
openModal,
closeModal,
selectLens,
setSearchParams,
setShowAdvancedSearch
} = lensesSlice.actions;
export default lensesSlice.reducer;

6
web-app/src/redux/slices/patientsSlice.js
View File

@ -9,7 +9,7 @@ const initialState = {
pageSize: 10,
selectedPatient: null,
isModalVisible: false
}
};
const patientsSlice = createSlice({
name: 'patientsUI',
@ -53,6 +53,6 @@ export const {
openModal,
closeModal,
selectPatient
} = patientsSlice.actions
} = patientsSlice.actions;
export default patientsSlice.reducer
export default patientsSlice.reducer;