visus-plus/web-app/src/Components/Pages/PatientsPage/PatientsPage.jsx

import {
    Input,
    Select,
    List,
    FloatButton,
    Row,
    Col,
    Table,
    Button,
    Popconfirm,
    Typography,
    Result,
    Tooltip
} from "antd";
import {
    BuildOutlined,
    PlusOutlined,
    SortAscendingOutlined,
    SortDescendingOutlined,
    TableOutlined,
    TeamOutlined,
} from "@ant-design/icons";
import PatientListCard from "../../Dummies/PatientListCard.jsx";
import PatientFormModal from "../../Dummies/PatientFormModal/PatientFormModal.jsx";
import SelectViewMode from "../../Widgets/SelectViewMode/SelectViewMode.jsx";
import LoadingIndicator from "../../Widgets/LoadingIndicator/LoadingIndicator.jsx";
import usePatients from "./usePatients.js";

const {Option} = Select;
const {Title} = Typography;

const PatientsPage = () => {
    const patientsData = usePatients();

    const columns = [
        {
            title: "Фамилия",
            dataIndex: "last_name",
            key: "last_name",
            sorter: true,
        },
        {
            title: "Имя",
            dataIndex: "first_name",
            key: "first_name",
            sorter: true,
        },
        {
            title: "Отчество",
            dataIndex: "patronymic",
            key: "patronymic",
            sorter: true,
        },
        {
            title: "Дата рождения",
            dataIndex: "birthday",
            sorter: true,
            render: patientsData.formatDate,
        },
        {
            title: "Телефон",
            dataIndex: "phone",
        },
        {
            title: "Email",
            dataIndex: "email",
        },
        {
            title: "Действия",
            fixed: 'right',
            render: (_, record) => (
                <Row gutter={[8, 8]}>
                    <Col xs={24} xl={12}>
                        <Button block onClick={() => patientsData.handleEditPatient(record)}>Изменить</Button>
                    </Col>
                    <Col xs={24} xl={12}>
                        <Popconfirm
                            title="Вы уверены, что хотите удалить пациента?"
                            onConfirm={() => patientsData.handleDeletePatient(record.id)}
                            okText="Да, удалить"
                            cancelText="Отмена"
                        >
                            <Button danger block>Удалить</Button>
                        </Popconfirm>
                    </Col>
                </Row>
            ),
        },
    ];

    const viewModes = [
        {
            value: "tile",
            label: "Плитка",
            icon: <BuildOutlined style={patientsData.viewModIconStyle}/>
        },
        {
            value: "table",
            label: "Таблица",
            icon: <TableOutlined style={patientsData.viewModIconStyle}/>
        }
    ];

    if (patientsData.isError) return (
        <Result
            status="error"
            title="Ошибка"
            subTitle="Произошла ошибка в работе страницы"
        />
    );

    return (
        <div style={patientsData.containerStyle}>
            <Title level={1}><TeamOutlined/> Пациенты</Title>
            <Row gutter={[16, 16]} style={patientsData.filterBarStyle}>
                <Col xs={24} md={14} sm={10} xl={18} xxl={19}>
                    <Input
                        placeholder="Поиск пациента"
                        value={patientsData.searchText}
                        onChange={(e) => patientsData.handleSetSearchText(e.target.value)}
                        onPressEnter={patientsData.handleSearch}
                        style={patientsData.formItemStyle}
                        allowClear
                        onClear={patientsData.handleClearSearch}
                    />
                </Col>
                {patientsData.viewMode === "tile" && (
                    <Col xs={24} md={5} sm={6} xl={3} xxl={2}>
                        <Tooltip title={"Сортировка пациентов"}>
                            <Select
                                value={patientsData.sortOrder}
                                onChange={patientsData.handleSetSortOrder}
                                style={patientsData.formItemStyle}
                            >
                                <Option value="asc"><SortAscendingOutlined/> А-Я</Option>
                                <Option value="desc"><SortDescendingOutlined/> Я-А</Option>
                            </Select>
                        </Tooltip>
                    </Col>
                )}
                <Col xs={24} md={patientsData.viewMode === "tile" ? 5 : 10}
                     sm={patientsData.viewMode === "tile" ? 8 : 14}
                     xl={patientsData.viewMode === "tile" ? 3 : 5}
                     xxl={patientsData.viewMode === "tile" ? 3 : 5}>
                    <SelectViewMode
                        viewMode={patientsData.viewMode}
                        setViewMode={patientsData.handleSetViewMode}
                        localStorageKey={"viewModePatients"}
                        toolTipText={"Формат отображения пациентов"}
                        viewModes={viewModes}
                    />
                </Col>
            </Row>

            {patientsData.isLoading ? <LoadingIndicator/> : patientsData.viewMode === "tile" ? (
                <List
                    grid={{gutter: 16, column: 3}}
                    dataSource={patientsData.filteredPatients}
                    renderItem={patient => (
                        <List.Item>
                            <PatientListCard
                                patient={patient}
                                handleEditPatient={patientsData.handleEditPatient}
                                handleDeletePatient={patientsData.handleDeletePatient}
                            />
                        </List.Item>
                    )}
                    pagination={patientsData.pagination}
                />
            ) : (
                <Table
                    columns={columns}
                    dataSource={patientsData.filteredPatients}
                    pagination={patientsData.pagination}
                />
            )}

            <FloatButton
                icon={<PlusOutlined/>}
                type="primary"
                onClick={patientsData.handleAddPatient}
                tooltip="Добавить пациента"
            />

            <PatientFormModal/>
        </div>
    );
};

export default PatientsPage;