сделал просмотр выдачи линзы с подробной информацией

web-app/src/components/lens_issues/LensIssueViewModal.jsx

@@ -0,0 +1,107 @@
+import {Collapse, Modal} from "antd";
+import PropTypes from "prop-types";
+
+
+const LensIssueViewModal = ({visible, onCancel, lensIssue}) => {
+    let items = [];
+
+    if (lensIssue) {
+        items = [
+            {
+                key: '1',
+                label: 'Подробная информация о линзе',
+                children:
+                    <div>
+                        <p><b>id:</b> {lensIssue.lens.id}</p>
+                        <p><b>Линза:</b> {lensIssue.lens.side}</p>
+                        <p><b>Диаметр:</b> {lensIssue.lens.diameter}</p>
+                        <p><b>Тор:</b> {lensIssue.lens.tor}</p>
+                        <p><b>Пресетная рефракция:</b> {lensIssue.lens.preset_refraction}</p>
+                        <p><b>Периферийная торичность:</b> {lensIssue.lens.periphery_toricity}</p>
+                        <p><b>FVC:</b> {lensIssue.lens.fvc}</p>
+                        <p><b>ESP:</b> {lensIssue.lens.esa}</p>
+                    </div>,
+            },
+            {
+                key: '2',
+                label: 'Подробная информация о пациенте',
+                children:
+                    <div>
+                        <p><b>Пациент:</b> {lensIssue.patient.last_name} {lensIssue.patient.first_name}</p>
+                        <p><b>Дата рождения:</b> {new Date(lensIssue.patient.birthday).toLocaleDateString("ru-RU")}</p>
+                        <p><b>Адрес:</b> {lensIssue.patient.address}</p>
+                        <p><b>Email:</b> {lensIssue.patient.email}</p>
+                        <p><b>Телефон:</b> {lensIssue.patient.phone}</p>
+                        <p><b>Диагноз:</b> {lensIssue.patient.diagnosis}</p>
+                        <p><b>Коррекция:</b> {lensIssue.patient.correction}</p>
+                    </div>,
+            },
+            {
+                key: '3',
+                label: 'Подробная информация о выдавшем сотруднике',
+                children:
+                    <div>
+                        <p><b>Сотрудник:</b> {lensIssue.doctor.last_name} {lensIssue.doctor.first_name}</p>
+                        <p><b>Логин:</b> {lensIssue.doctor.login}</p>
+                    </div>,
+            }
+        ]
+    }
+
+    return (
+        <Modal
+            open={visible}
+            title="Детали выдачи линзы"
+            onCancel={onCancel}
+            footer={null}
+        >
+            {lensIssue && (
+                <div>
+                    <p><b>Дата выдачи:</b> {new Date(lensIssue.issue_date).toLocaleDateString("ru-RU")}</p>
+                    <p><b>Пациент:</b> {lensIssue.patient.last_name} {lensIssue.patient.first_name}</p>
+                    <p><b>Выдал:</b> {lensIssue.doctor.last_name} {lensIssue.doctor.first_name}</p>
+
+                    <Collapse items={items}/>
+                </div>
+            )}
+        </Modal>
+    )
+};
+
+LensIssueViewModal.propTypes = {
+    visible: PropTypes.bool,
+    onCancel: PropTypes.func,
+    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 LensIssueViewModal;

web-app/src/components/lenses/LensViewModal.jsx

@@ -4,8 +4,6 @@ import PropTypes from "prop-types";
 const {Text, Title} = Typography;
 
 const LensViewModal = ({visible, onCancel, lens}) => {
-    if (!lens) return null;
-
     return (
         <Modal
             title="Просмотр линзы"

web-app/src/pages/IssuesPage.jsx

@@ -1,8 +1,10 @@
-import {notification, Spin, Table, Input, Modal, Row, Col, DatePicker, Tooltip, Button} from "antd";
+import {notification, Spin, Table, Input, Row, Col, DatePicker, Tooltip, Button, FloatButton} from "antd";
 import getAllLensIssues from "../api/lens_issues/GetAllLensIssues.jsx";
 import {useEffect, useState} from "react";
 import {useAuth} from "../AuthContext.jsx";
-import {LoadingOutlined} from "@ant-design/icons";
+import {LoadingOutlined, PlusOutlined} from "@ant-design/icons";
+import LensIssueViewModal from "../components/lens_issues/LensIssueViewModal.jsx";
+import dayjs from "dayjs";
 
 const IssuesPage = () => {
     const {user} = useAuth();
@@ -39,6 +41,15 @@ const IssuesPage = () => {
         }
     };
 
+    const handleAddIssue = () => {
+        setSelectedIssue(null);
+
+    };
+
+    const handleCloseViewModal = () => {
+        setSelectedIssue(null);
+    };
+
     const fetchLensIssues = async () => {
         try {
             const data = await getAllLensIssues(user.token);
@@ -59,10 +70,26 @@ const IssuesPage = () => {
         setSearchTerm(e.target.value.toLowerCase());
     };
 
-    const filteredIssues = lensIssues.filter(issue =>
+
-        issue.patient.first_name.toLowerCase().includes(searchTerm) ||
+    const filteredIssues = lensIssues.filter(issue => {
-        issue.patient.last_name.toLowerCase().includes(searchTerm) ||
+            let dateFilter = true;
-        new Date(issue.issue_date).toLocaleDateString().includes(searchTerm)
+
+            if (startFilterDate && endFilterDate) {
+                const issueDate = dayjs(issue.issue_date);
+
+                dateFilter = issueDate.isAfter(startFilterDate) && issueDate.isBefore(endFilterDate);
+            }
+
+            return (
+                (
+                    issue.patient.last_name.toLowerCase().includes(searchTerm) ||
+                    issue.patient.first_name.toLowerCase().includes(searchTerm) ||
+                    issue.doctor.last_name.toLowerCase().includes(searchTerm) ||
+                    issue.doctor.first_name.toLowerCase().includes(searchTerm)
+                ) &&
+                dateFilter
+            )
+        }
     );
 
     const columns = [
@@ -71,7 +98,7 @@ const IssuesPage = () => {
             dataIndex: "issue_date",
             key: "issue_date",
             render: (text) => new Date(text).toLocaleDateString(),
-            sorter: (a, b) => new Date(a.issue_date) - new Date(b.issue_date),
+            sorter: (a, b) => new Date(b.issue_date) - new Date(a.issue_date),
         },
         {
             title: "Пациент",
@@ -95,7 +122,7 @@ const IssuesPage = () => {
             title: "Действия",
             key: "actions",
             render: (_, issue) => (
-                <a onClick={() => setSelectedIssue(issue)}>Подробнее</a>
+                <Button type={"link"} onClick={() => setSelectedIssue(issue)}>Подробнее</Button>
             ),
         },
     ];
@@ -178,21 +205,19 @@ const IssuesPage = () => {
                 />
             )}
 
-            <Modal
+            <FloatButton
-                open={selectedIssue}
+                icon={<PlusOutlined/>}
-                title="Детали выдачи линзы"
+                type={"primary"}
-                onCancel={() => setSelectedIssue(null)}
+                style={{position: "fixed", bottom: 40, right: 40}}
-                footer={null}
+                onClick={handleAddIssue}
-            >
+                tooltip={"Добавить выдачу линзы"}
-                {selectedIssue && (
+            />
-                    <div>
+
-                        <p><b>Дата выдачи:</b> {new Date(selectedIssue.issue_date).toLocaleDateString()}</p>
+            <LensIssueViewModal
-                        <p><b>Пациент:</b> {selectedIssue.patient.last_name} {selectedIssue.patient.first_name}</p>
+                visible={selectedIssue !== null}
-                        <p><b>Выдал:</b> {selectedIssue.doctor.last_name} {selectedIssue.doctor.first_name}</p>
+                onCancel={handleCloseViewModal}
-                        <p><b>Линза:</b> {selectedIssue.lens.side}, Диаметр: {selectedIssue.lens.diameter}</p>
+                lensIssue={selectedIssue}
-                    </div>
+            />
-                )}
-            </Modal>
         </div>
     );
 };

web-app/src/pages/LensesPage.jsx

@@ -52,6 +52,7 @@ const LensesPage = () => {
 
     useEffect(() => {
         fetchLensWithCache();
+        fetchViewModeFromCache();
     }, []);
 
     useEffect(() => {
@@ -90,6 +91,18 @@ const LensesPage = () => {
         }
     };
 
+    const fetchViewModeFromCache = () => {
+        const cachedViewMode = localStorage.getItem("viewModeLenses");
+        if (cachedViewMode) {
+            setViewMode(cachedViewMode);
+        }
+    };
+
+    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())
@@ -112,7 +125,6 @@ const LensesPage = () => {
         return a.preset_refraction - b.preset_refraction;
     });
 
-
     const handleAddLens = () => {
         setSelectedLens(null);
         setIsModalVisible(true);
@@ -332,11 +344,11 @@ const LensesPage = () => {
                 </Col>
                 <Col xs={24} md={4} sm={4} xl={4}>
                     <Tooltip
-                        title={"Отображение линз"}
+                        title={"Формат отображения линз"}
                     >
                         <Select
                             value={viewMode}
-                            onChange={(value) => setViewMode(value)}
+                            onChange={handleChangeViewMode}
                             style={{width: "100%"}}
                         >
                             <Option value={"tile"}>Плиткой</Option>

web-app/src/pages/PatientsPage.jsx

@@ -27,6 +27,7 @@ const PatientsPage = () => {
 
     useEffect(() => {
         fetchPatientsWithCache();
+        fetchViewModeFromCache();
     }, []);
 
     useEffect(() => {
@@ -72,6 +73,18 @@ const PatientsPage = () => {
         }
     };
 
+    const fetchViewModeFromCache = () => {
+        const cachedViewMode = localStorage.getItem("viewModePatients");
+        if (cachedViewMode) {
+            setViewMode(cachedViewMode);
+        }
+    };
+
+    const handleChangeViewMode = (mode) => {
+        setViewMode(mode);
+        localStorage.setItem("viewModePatients", mode);
+    };
+
     const filteredPatients = patients
         .filter((patient) => {
             const searchLower = searchText.toLowerCase();
@@ -305,11 +318,11 @@ const PatientsPage = () => {
                 </Col>
                 <Col xs={24} md={5} sm={8} xl={6}>
                     <Tooltip
-                        title={"Отображение пациентов"}
+                        title={"Формат отображения пациентов"}
                     >
                         <Select
                             value={viewMode}
-                            onChange={(value) => setViewMode(value)}
+                            onChange={handleChangeViewMode}
                             style={{width: "100%"}}
                         >
                             <Option value={"tile"}>Плиткой</Option>