улучшил отображение карточек с пациентами

This commit is contained in:
Андрей Дувакин 2025-02-10 17:56:22 +05:00
parent a2fc3db049
commit 55687c6925
3 changed files with 48 additions and 37 deletions

View File

@ -2,15 +2,18 @@ import { Card } from "antd";
import PropTypes from "prop-types";
const PatientListCard = ({ patient }) => {
const birthday = new Date(patient.birthday)
return (
<Card
hoverable={true}
hoverable
type="inner"
title={`${patient.last_name} ${patient.first_name}`}
style={{ marginBottom: 16, borderRadius: 12 }}
>
<p><strong>📅 Дата рождения:</strong> {patient.birthday}</p>
<p><strong>📅 Дата рождения:</strong> {birthday.toLocaleString('ru-RU', {month: 'long', day: 'numeric', year: 'numeric'})}</p>
{patient.phone && <p><strong>📞 Телефон:</strong> {patient.phone}</p>}
{patient.email && <p><strong> Email:</strong> {patient.email}</p>}
{patient.diagnosis && <p><strong>🩺 Диагноз:</strong> {patient.diagnosis}</p>}
</Card>
);
};

View File

@ -2,12 +2,14 @@ import {useState} from "react";
import {Layout, Menu} from "antd";
import {Outlet, useLocation, useNavigate} from "react-router-dom";
import {
AppstoreOutlined,
HomeOutlined,
CalendarOutlined,
DatabaseOutlined,
FolderViewOutlined,
UserOutlined,
SolutionOutlined,
LogoutOutlined
TeamOutlined,
LogoutOutlined,
MessageOutlined
} from "@ant-design/icons";
import {useAuth} from "../AuthContext.jsx";
@ -22,11 +24,12 @@ const MainLayout = () => {
const {logout} = useAuth();
const menuItems = [
getItem("Главная", "/", <AppstoreOutlined/>),
getItem("Главная", "/", <HomeOutlined/>),
getItem("Приёмы", "/appointments", <CalendarOutlined/>),
getItem("Линзы", "/lenses", <DatabaseOutlined/>),
getItem("Пациенты", "/patients", <SolutionOutlined/>),
getItem("Линзы", "/lenses", <FolderViewOutlined/>),
getItem("Пациенты", "/patients", <TeamOutlined/>),
getItem("Выдачи линз", "/dispensing", <DatabaseOutlined/>),
getItem("Рассылки", "/mailing", <MessageOutlined/>),
{type: "divider"},
getItem("Мой профиль", "profile", <UserOutlined/>, [
getItem("Перейти в профиль", "/profile", <UserOutlined/>),
@ -62,7 +65,7 @@ const MainLayout = () => {
</Sider>
<Layout style={{marginLeft: collapsed ? 80 : 200, transition: "margin-left 0.2s"}}>
<Content style={{margin: "0 16px", padding: 24, minHeight: "100vh", overflow: "auto", background: "#fff", borderRadius: 8}}>
<Content style={{margin: "0 16px", padding: 24, minHeight: "100vh", overflow: "auto", background: "#fff", borderRadius: 8, marginTop: "15px"}}>
<Outlet/>
</Content>
<Footer style={{textAlign: "center"}}>Линза+ © {new Date().getFullYear()}</Footer>

View File

@ -1,12 +1,11 @@
import {useEffect, useState} from "react";
import {Input, Select, List, Card, Button, FloatButton} from "antd";
import {PlusOutlined} from "@ant-design/icons";
import {useAuth} from "../AuthContext.jsx";
import { useEffect, useState } from "react";
import { Input, Select, List, FloatButton, Row, Col } from "antd";
import { PlusOutlined } from "@ant-design/icons";
import { useAuth } from "../AuthContext.jsx";
import getAllPatients from "../api/GetAllPatients.jsx";
import PatientListCard from "../components/PatientListCard.jsx";
const {Search} = Input;
const {Option} = Select;
const { Option } = Select;
const PatientsPage = () => {
const { user } = useAuth();
@ -37,40 +36,46 @@ const PatientsPage = () => {
.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);
return sortOrder === "asc"
? fullNameA.localeCompare(fullNameB)
: fullNameB.localeCompare(fullNameA);
});
return (
<div style={{padding: 20}}>
<div style={{display: "flex", gap: 10, marginBottom: 20}}>
<Search
placeholder="Поиск пациента"
onChange={(e) => setSearchText(e.target.value)}
style={{flex: 1}}
/>
<Select
value={sortOrder}
onChange={(value) => setSortOrder(value)}
style={{width: 150}}
>
<Option value="asc">А-Я</Option>
<Option value="desc">Я-А</Option>
</Select>
</div>
<div style={{ padding: 20 }}>
<Row gutter={[16, 16]} style={{ marginBottom: 20 }}>
<Col xs={24} sm={16}>
<Input
placeholder="Поиск пациента"
onChange={(e) => setSearchText(e.target.value)}
style={{ width: "100%" }}
/>
</Col>
<Col xs={24} sm={8}>
<Select
value={sortOrder}
onChange={(value) => setSortOrder(value)}
style={{ width: "100%" }}
>
<Option value="asc">А-Я</Option>
<Option value="desc">Я-А</Option>
</Select>
</Col>
</Row>
<List
grid={{gutter: 16, column: 1}}
grid={{ gutter: 16, column: 1 }}
dataSource={filteredPatients}
renderItem={(patient) => (
<List.Item>
<PatientListCard patient={patient}/>
<PatientListCard patient={patient} />
</List.Item>
)}
/>
<FloatButton
icon={<PlusOutlined/>}
style={{position: "fixed", bottom: 20, right: 20}}
icon={<PlusOutlined />}
style={{ position: "fixed", bottom: 20, right: 20 }}
onClick={() => console.log("Добавить пациента")}
/>
</div>