улучшил отображение карточек с пациентами
This commit is contained in:
parent
a2fc3db049
commit
55687c6925
@ -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>
|
||||
);
|
||||
};
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user