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

сделал стилизованный скролл-бар для всего приложения, сделал заготовку для создания выдачи линзы, вынес выбор формата отображения в отдельный компанент

Browse Source
This commit is contained in:
Андрей Дувакин 2025-03-07 19:26:05 +05:00
parent b9b5b24847
commit a5eaed6ff0
9 changed files with 359 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
web-app/src/api/lenses/UpdateLens.jsx
View File

@ -3,7 +3,6 @@ import CONFIG from "../../core/Config.jsx";
const updateLens = async (token, lensId, lensData) => {
console.log(lensId, lensData);
try {
const response = await axios.put(`${CONFIG.BASE_URL}/lenses/${lensId}/`, lensData, {
headers: {

40
web-app/src/components/SelectViewMode.jsx Normal file
View File

@ -0,0 +1,40 @@
import {BuildOutlined, TableOutlined} from "@ant-design/icons";
import {Select, Tooltip} from "antd";
import PropTypes from "prop-types";
const {Option} = Select;
const SelectViewMode = ({viewMode, setViewMode, localStorageKey, toolTipText}) => {
return (
<Tooltip
title={toolTipText}
>
<Select
value={viewMode}
onChange={value => {
setViewMode(value);
localStorage.setItem(localStorageKey, value);
}}
style={{width: "100%"}}
>
<Option value={"tile"}>
<BuildOutlined style={{marginRight: 8}} />
Плитка
</Option>
<Option value={"table"}>
<TableOutlined style={{marginRight: 8}}/>
Таблица
</Option>
</Select>
</Tooltip>
)
};
SelectViewMode.propTypes = {
viewMode: PropTypes.string.isRequired,
setViewMode: PropTypes.func.isRequired,
localStorageKey: PropTypes.string.isRequired,
};
export default SelectViewMode;

193
web-app/src/components/lens_issues/LensIssueFormModal.jsx Normal file
View File

@ -0,0 +1,193 @@
import {useEffect, useState} from "react";
import {Modal, Form, Input, Select, Collapse, Button, notification, List} from "antd";
import PropTypes from "prop-types";
import getAllPatients from "../../api/patients/GetAllPatients.jsx";
import getAllLenses from "../../api/lenses/GetAllLenses.jsx";
import {useAuth} from "../../AuthContext.jsx";
const {Option} = Select;
const {Panel} = Collapse;
const LensIssueFormModal = ({visible, onCancel, onSubmit}) => {
const {user} = useAuth();
const [form] = Form.useForm();
const [patients, setPatients] = useState([]);
const [lenses, setLenses] = useState([]);
const [selectedPatient, setSelectedPatient] = useState(null);
const [selectedLens, setSelectedLens] = useState(null);
const [searchPatientString, setSearchPatientString] = useState("");
const [searchLensString, setSearchLensString] = useState("");
useEffect(() => {
if (visible) {
fetchPatients();
fetchLenses();
}
}, [visible]);
const fetchPatients = async () => {
try {
const data = await getAllPatients(user.token);
setPatients(data);
} catch (error) {
console.log(error);
notification.error({
message: "Ошибка загрузки пациентов",
description: "Проверьте подключение к сети.",
});
}
};
const fetchLenses = async () => {
try {
const data = await getAllLenses(user.token);
setLenses(data);
} catch (error) {
console.log(error);
notification.error({
message: "Ошибка загрузки линз",
description: "Проверьте подключение к сети.",
});
}
};
const handleOk = async () => {
try {
const values = await form.validateFields();
onSubmit({...values, patient: selectedPatient, lens: selectedLens});
form.resetFields();
setSelectedPatient(null);
setSelectedLens(null);
} catch (errorInfo) {
console.log("Validation Failed:", errorInfo);
}
};
const flteredPatients = patients
.filter((patient) => {
const searchLower = searchPatientString.toLowerCase();
return Object.values(patient)
.filter(value => typeof value === "string")
.some(value => value.toLowerCase().includes(searchLower));
});
const filteredLenses = lenses
.filter((lens) => {
const searchLower = searchLensString.toLowerCase();
return lens.side.toLowerCase().includes(searchLower);
});
const items = flteredPatients.map((patient) => (
{
key: patient.id,
label: `${patient.last_name} ${patient.first_name} (${new Date(patient.birthday).toLocaleDateString("ru-RU")})`,
children:
<div>
<p><b>Пациент:</b> {patient.last_name} {patient.first_name}</p>
<p><b>Дата рождения:</b> {new Date(patient.birthday).toLocaleDateString("ru-RU")}</p>
<p><b>Диагноз:</b> {patient.diagnosis}</p>
<p><b>Email:</b> {patient.email}</p>
<p><b>Телефон:</b> {patient.phone}</p>
</div>,
}
));
return (
<Modal
title="Выдача линзы пациенту"
open={visible}
onCancel={() => {
form.resetFields();
setSelectedPatient(null);
setSelectedLens(null);
onCancel();
}}
onOk={handleOk}
okText="Сохранить"
cancelText="Отмена"
maskClosable={false}
centered
>
<Form form={form} layout="vertical">
<Form.Item
label="Пациент"
required
rules={[{required: true, message: "Выберите пациента"}]}
>
<Input
placeholder="Поиск пациента"
value={searchPatientString}
onChange={(e) => setSearchPatientString(e.target.value)}
style={{marginBottom: 16}}
allowClear
/>
<div style={{maxHeight: 300, overflowY: "auto", border: "1px solid #d9d9d9", padding: 8}}>
<Collapse
items={items}
/>
</div>
</Form.Item>
<Form.Item name="lens" label="Линза" rules={[{required: true, message: "Выберите линзу"}]}>
<Select placeholder="Выберите линзу"
onChange={(id) => setSelectedLens(lenses.find(l => l.id === id))}>
{lenses.map(lens => (
<Option key={lens.id} value={lens.id}>
{`Диаметр: ${lens.diameter}, Тор: ${lens.tor}, Пресет рефракции: ${lens.preset_refraction}`}
</Option>
))}
</Select>
</Form.Item>
<Form.Item name="issue_date" label="Дата выдачи"
rules={[{required: true, message: "Укажите дату выдачи"}]}>
<Input placeholder="Введите дату выдачи"/>
</Form.Item>
</Form>
</Modal>
);
};
LensIssueFormModal.propTypes = {
visible: PropTypes.bool.isRequired,
onCancel: PropTypes.func.isRequired,
onSubmit: PropTypes.func.isRequired,
lensIssue: PropTypes.shape({
issue_date: PropTypes.string,
patient: PropTypes.shape({
first_name: PropTypes.string,
last_name: PropTypes.string,
patronymic: PropTypes.string,
birthday: PropTypes.string,
address: PropTypes.string,
email: PropTypes.string,
phone: PropTypes.string,
diagnosis: PropTypes.string,
correction: PropTypes.string,
}),
doctor: PropTypes.shape({
last_name: PropTypes.string,
first_name: PropTypes.string,
login: PropTypes.string,
}),
lens: PropTypes.shape({
id: PropTypes.number.isRequired,
tor: PropTypes.number.isRequired,
diameter: PropTypes.number.isRequired,
esa: PropTypes.number.isRequired,
fvc: PropTypes.number.isRequired,
preset_refraction: PropTypes.number.isRequired,
periphery_toricity: PropTypes.number.isRequired,
side: PropTypes.string.isRequired,
issued: PropTypes.bool.isRequired,
trial: PropTypes.number.isRequired,
}),
}),
};
export default LensIssueFormModal;

26
web-app/src/pages/IssuesPage.jsx
View File

@ -1,10 +1,13 @@
import {notification, Spin, Table, Input, Row, Col, DatePicker, Tooltip, Button, FloatButton} from "antd";
import {notification, Spin, Table, Input, Row, Col, DatePicker, Tooltip, Button, FloatButton, Typography} from "antd";
import getAllLensIssues from "../api/lens_issues/GetAllLensIssues.jsx";
import {useEffect, useState} from "react";
import {useAuth} from "../AuthContext.jsx";
import {LoadingOutlined, PlusOutlined} from "@ant-design/icons";
import {DatabaseOutlined, LoadingOutlined, PlusOutlined} from "@ant-design/icons";
import LensIssueViewModal from "../components/lens_issues/LensIssueViewModal.jsx";
import dayjs from "dayjs";
import LensIssueFormModal from "../components/lens_issues/LensIssueFormModal.jsx";
const {Title} = Typography;
const IssuesPage = () => {
const {user} = useAuth();
@ -13,6 +16,7 @@ const IssuesPage = () => {
const [lensIssues, setLensIssues] = useState([]);
const [searchTerm, setSearchTerm] = useState("");
const [selectedIssue, setSelectedIssue] = useState(null);
const [isModalVisible, setIsModalVisible] = useState(false);
const [currentPage, setCurrentPage] = useState(1);
const [pageSize, setPageSize] = useState(10);
@ -22,6 +26,7 @@ const IssuesPage = () => {
useEffect(() => {
fetchLensIssuesWithCache();
document.title = "Выдача линз";
}, []);
useEffect(() => {
@ -43,13 +48,21 @@ const IssuesPage = () => {
const handleAddIssue = () => {
setSelectedIssue(null);
setIsModalVisible(true);
};
const handleCloseViewModal = () => {
setSelectedIssue(null);
};
const handleCloseFormModal = () => {
setIsModalVisible(false);
};
const handleSubmitFormModal = () => {
};
const fetchLensIssues = async () => {
try {
const data = await getAllLensIssues(user.token);
@ -129,6 +142,7 @@ const IssuesPage = () => {
return (
<div style={{padding: 20}}>
<Title level={1}><DatabaseOutlined/> Выдача линз</Title>
<Row gutter={[16, 16]} style={{marginBottom: 20}}>
<Col xs={24} md={12} sm={24} xl={14}>
<Input
@ -213,6 +227,12 @@ const IssuesPage = () => {
tooltip={"Добавить выдачу линзы"}
/>
<LensIssueFormModal
visible={isModalVisible}
onCancel={handleCloseFormModal}
onSubmit={handleSubmitFormModal}
/>
<LensIssueViewModal
visible={selectedIssue !== null}
onCancel={handleCloseViewModal}

38
web-app/src/pages/LensesPage.jsx
View File

@ -10,9 +10,16 @@ import {
Button,
Form,
InputNumber,
Card, Grid, notification, Table, Popconfirm, Tooltip
Card, Grid, notification, Table, Popconfirm, Tooltip, Typography
} from "antd";
import {LoadingOutlined, PlusOutlined, DownOutlined, UpOutlined} from "@ant-design/icons";
import {
LoadingOutlined,
PlusOutlined,
DownOutlined,
UpOutlined,
FolderViewOutlined,
BorderlessTableOutlined, TableOutlined
} from "@ant-design/icons";
import LensCard from "../components/lenses/LensListCard.jsx";
import getAllLenses from "../api/lenses/GetAllLenses.jsx";
import addLens from "../api/lenses/AddLens.jsx";
@ -20,9 +27,11 @@ import updateLens from "../api/lenses/UpdateLens.jsx";
import deleteLens from "../api/lenses/DeleteLens.jsx";
import {useAuth} from "../AuthContext.jsx";
import LensFormModal from "../components/lenses/LensFormModal.jsx";
import SelectViewMode from "../components/SelectViewMode.jsx";
const {Option} = Select;
const {useBreakpoint} = Grid;
const {Title} = Typography;
const LensesPage = () => {
const {user} = useAuth();
@ -53,6 +62,7 @@ const LensesPage = () => {
useEffect(() => {
fetchLensWithCache();
fetchViewModeFromCache();
document.title = "Линзы";
}, []);
useEffect(() => {
@ -98,11 +108,6 @@ const LensesPage = () => {
}
};
const handleChangeViewMode = (mode) => {
setViewMode(mode);
localStorage.setItem("viewModeLenses", mode);
};
const filteredLenses = lenses.filter((lens) => {
const textMatch = Object.values(lens).some((value) =>
value?.toString().toLowerCase().includes(searchText.toLowerCase())
@ -324,6 +329,7 @@ const LensesPage = () => {
return (
<div style={{padding: 20}}>
<Title level={1}><FolderViewOutlined/> Линзы</Title>
<Row gutter={[16, 16]} style={{marginBottom: 20}}>
<Col xs={24} md={14} sm={10} xl={16}>
<Input
@ -343,18 +349,12 @@ const LensesPage = () => {
</Button>
</Col>
<Col xs={24} md={4} sm={4} xl={4}>
<Tooltip
title={"Формат отображения линз"}
>
<Select
value={viewMode}
onChange={handleChangeViewMode}
style={{width: "100%"}}
>
<Option value={"tile"}>Плиткой</Option>
<Option value={"table"}>Таблицей</Option>
</Select>
</Tooltip>
<SelectViewMode
viewMode={viewMode}
setViewMode={setViewMode}
localStorageKey={"viewModeLenses"}
toolTipText={"Формат отображения линз"}
/>
</Col>
</Row>

1
web-app/src/pages/LoginPage.jsx
View File

@ -16,6 +16,7 @@ const LoginPage = () => {
if (user) {
navigate("/");
}
document.title = "Авторизация";
}, [user, navigate]);
const onFinish = async (values) => {

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

@ -1,6 +1,26 @@
import {useEffect, useState} from "react";
import {Input, Select, List, FloatButton, Row, Col, Spin, notification, Tooltip, Table, Button, Popconfirm} from "antd";
import {LoadingOutlined, PlusOutlined} from "@ant-design/icons";
import {
Input,
Select,
List,
FloatButton,
Row,
Col,
Spin,
notification,
Tooltip,
Table,
Button,
Popconfirm,
Typography
} from "antd";
import {
LoadingOutlined,
PlusOutlined,
SortAscendingOutlined,
SortDescendingOutlined,
TeamOutlined
} from "@ant-design/icons";
import {useAuth} from "../AuthContext.jsx";
import getAllPatients from "../api/patients/GetAllPatients.jsx";
import PatientListCard from "../components/patients/PatientListCard.jsx";
@ -8,8 +28,10 @@ import PatientFormModal from "../components/patients/PatientFormModal.jsx";
import updatePatient from "../api/patients/UpdatePatient.jsx";
import addPatient from "../api/patients/AddPatient.jsx";
import deletePatient from "../api/patients/DeletePatient.jsx";
import SelectViewMode from "../components/SelectViewMode.jsx";
const {Option} = Select;
const {Title} = Typography
const PatientsPage = () => {
const {user} = useAuth();
@ -28,6 +50,7 @@ const PatientsPage = () => {
useEffect(() => {
fetchPatientsWithCache();
fetchViewModeFromCache();
document.title = "Пациенты";
}, []);
useEffect(() => {
@ -80,11 +103,6 @@ const PatientsPage = () => {
}
};
const handleChangeViewMode = (mode) => {
setViewMode(mode);
localStorage.setItem("viewModePatients", mode);
};
const filteredPatients = patients
.filter((patient) => {
const searchLower = searchText.toLowerCase();
@ -293,8 +311,9 @@ const PatientsPage = () => {
return (
<div style={{padding: 20}}>
<Title level={1}><TeamOutlined/> Пациенты</Title>
<Row gutter={[16, 16]} style={{marginBottom: 20}}>
<Col xs={24} md={14} sm={10} xl={16}>
<Col xs={24} md={14} sm={10} xl={18} xxl={19}>
<Input
placeholder="Поиск пациента"
onChange={(e) => setSearchText(e.target.value)}
@ -302,37 +321,42 @@ const PatientsPage = () => {
allowClear
/>
</Col>
<Col xs={24} md={5} sm={6} xl={2}>
<Tooltip
title={"Сортировка пациентов"}
>
<Select
value={sortOrder}
onChange={(value) => setSortOrder(value)}
style={{width: "100%"}}
{viewMode === "tile" && (
<Col xs={24} md={5} sm={6} xl={3} xxl={2}>
<Tooltip
title={"Сортировка пациентов"}
>
<Option value="asc">А-Я</Option>
<Option value="desc">Я-А</Option>
</Select>
</Tooltip>
</Col>
<Col xs={24} md={5} sm={8} xl={6}>
<Tooltip
title={"Формат отображения пациентов"}
>
<Select
value={viewMode}
onChange={handleChangeViewMode}
style={{width: "100%"}}
>
<Option value={"tile"}>Плиткой</Option>
<Option value={"table"}>Таблицей</Option>
</Select>
</Tooltip>
<Select
value={sortOrder}
onChange={(value) => setSortOrder(value)}
style={{width: "100%"}}
>
<Option value="asc"><SortAscendingOutlined/> А-Я</Option>
<Option value="desc"><SortDescendingOutlined/> Я-А</Option>
</Select>
</Tooltip>
</Col>
)}
<Col xs={24} md={
viewMode === "tile" ? 5 : 10
} sm={
viewMode === "tile" ? 8 : 14
} xl={
viewMode === "tile" ? 3 : 5
} xxl={
viewMode === "tile" ? 3 : 4
}>
<SelectViewMode
viewMode={viewMode}
setViewMode={setViewMode}
localStorageKey={"viewModePatients"}
toolTipText={"Формат отображения пациентов"}
/>
</Col>
</Row>
{loading ? (
{loading ? (
<div style={{
display: "flex",
justifyContent: "center",

7
web-app/src/pages/SetLensesPage.jsx
View File

@ -1,8 +1,8 @@
import {useAuth} from "../AuthContext.jsx";
import {useEffect, useState} from "react";
import {FloatButton, Input, List, notification, Row, Spin} from "antd";
import {FloatButton, Input, List, notification, Row, Spin, Typography} from "antd";
import getAllSets from "../api/sets/GetAllSets.jsx";
import {LoadingOutlined, PlusOutlined} from "@ant-design/icons";
import {LoadingOutlined, PlusOutlined, SwitcherOutlined} from "@ant-design/icons";
import SetListCard from "../components/sets/SetListCard.jsx";
import SetFormModal from "../components/sets/SetFormModal.jsx";
import updateSet from "../api/sets/UpdateSet.jsx";
@ -13,6 +13,8 @@ import updateSetContent from "../api/set_content/UpdateSetContent.jsx";
import appendLensesFromSet from "../api/sets/AppendLensesFromSet.jsx";
const {Title} = Typography;
const SetLensesPage = () => {
const {user} = useAuth();
@ -201,6 +203,7 @@ const SetLensesPage = () => {
return (
<div style={{padding: 20}}>
<Title level={1}><SwitcherOutlined/> Наборы линз</Title>
<Row style={{marginBottom: 20}}>
<Input
placeholder="Поиск набора"

20
web-app/src/styles/app.css
View File

@ -1,3 +1,21 @@
body {
margin: 0 !important;
}
}
*::-webkit-scrollbar {
width: 6px;
}
*::-webkit-scrollbar-track {
background: #ffffff;
border-radius: 4px;
}
*::-webkit-scrollbar-thumb {
background: #1677ff;
border-radius: 4px;
}
*::-webkit-scrollbar-thumb:hover {
background: #125bb5;
}