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

вынес стили из компонентов в ui хуки

Browse Source
This commit is contained in:
Андрей Дувакин 2025-03-29 10:30:26 +05:00
parent 26484676da
commit 1b7ddc6d8a
7 changed files with 61 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
web-app/src/hooks/ui/useIssuesUI.js
View File

@ -39,6 +39,16 @@ const useIssuesUI = (issues) => {
const filterDates = [startFilterDateConverted, endFilterDateConverted]; const filterDates = [startFilterDateConverted, endFilterDateConverted];
const isFilterDates = startFilterDate && endFilterDate; const isFilterDates = startFilterDate && endFilterDate;
const containerStyle = { padding: 20 };
const filterBarStyle = { marginBottom: 20 };
const formItemStyle = { width: "100%" };
const viewModIconStyle = { marginRight: 8 };
const advancedSearchCardStyle = {
marginBottom: 20,
boxShadow: "0 1px 6px rgba(0, 0, 0, 0.15)",
borderRadius: 8
};
const handleSetSearchText = (value) => dispatch(setSearchText(value)); const handleSetSearchText = (value) => dispatch(setSearchText(value));
const handleSetViewMode = (mode) => dispatch(setViewMode(mode)); const handleSetViewMode = (mode) => dispatch(setViewMode(mode));
const handleSetCurrentPage = (page) => dispatch(setCurrentPage(page)); const handleSetCurrentPage = (page) => dispatch(setCurrentPage(page));
@ -114,6 +124,11 @@ const useIssuesUI = (issues) => {
pageSize, pageSize,
filterDates, filterDates,
isFilterDates, isFilterDates,
containerStyle,
filterBarStyle,
formItemStyle,
viewModIconStyle,
advancedSearchCardStyle,
handleAddIssue, handleAddIssue,
handlePaginationChange, handlePaginationChange,
handleSetSearchText, handleSetSearchText,

4
web-app/src/hooks/ui/useLensesUI.js
View File

@ -33,6 +33,8 @@ const useLensesUI = (lenses) => {
const containerStyle = { padding: 20 }; const containerStyle = { padding: 20 };
const filterBarStyle = { marginBottom: 20 }; const filterBarStyle = { marginBottom: 20 };
const formItemStyle = { width: "100%" }; const formItemStyle = { width: "100%" };
const viewModIconStyle = { marginRight: 8 };
const tableActionButtonsStyle = {display: "flex", gap: "8px"};
const handleSetSearchText = (value) => dispatch(setSearchText(value)); const handleSetSearchText = (value) => dispatch(setSearchText(value));
const handleCloseModal = () => dispatch(closeModal()); const handleCloseModal = () => dispatch(closeModal());
@ -108,6 +110,8 @@ const useLensesUI = (lenses) => {
containerStyle, containerStyle,
filterBarStyle, filterBarStyle,
formItemStyle, formItemStyle,
viewModIconStyle,
tableActionButtonsStyle,
filteredLenses: filteredLenses.map(lens => ({...lens, key: lens.id})), filteredLenses: filteredLenses.map(lens => ({...lens, key: lens.id})),
handleSetSearchText, handleSetSearchText,
handleAddLens, handleAddLens,

2
web-app/src/hooks/ui/usePatientsUI.js
View File

@ -33,6 +33,7 @@ const usePatientsUI = (patients) => {
const containerStyle = { padding: 20 }; const containerStyle = { padding: 20 };
const filterBarStyle = { marginBottom: 20 }; const filterBarStyle = { marginBottom: 20 };
const formItemStyle = { width: "100%" }; const formItemStyle = { width: "100%" };
const viewModIconStyle = { marginRight: 8 };
const handleSetSearchText = (value) => dispatch(setSearchText(value)); const handleSetSearchText = (value) => dispatch(setSearchText(value));
const handleSetSortOrder = (value) => dispatch(setSortOrder(value)); const handleSetSortOrder = (value) => dispatch(setSortOrder(value));
@ -93,6 +94,7 @@ const usePatientsUI = (patients) => {
containerStyle, containerStyle,
filterBarStyle, filterBarStyle,
formItemStyle, formItemStyle,
viewModIconStyle,
pagination, pagination,
filteredPatients: filteredPatients.map(p => ({ ...p, key: p.id })), filteredPatients: filteredPatients.map(p => ({ ...p, key: p.id })),
handleSetSearchText, handleSetSearchText,

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

@ -10,7 +10,7 @@ import {
Typography, Typography,
Timeline, Timeline,
Grid, Grid,
Pagination Pagination, Result
} from "antd"; } from "antd";
import {DatabaseOutlined, PlusOutlined, UnorderedListOutlined} from "@ant-design/icons"; import {DatabaseOutlined, PlusOutlined, UnorderedListOutlined} from "@ant-design/icons";
import LensIssueViewModal from "../components/lens_issues/LensIssueViewModal.jsx"; import LensIssueViewModal from "../components/lens_issues/LensIssueViewModal.jsx";
@ -34,12 +34,12 @@ const IssuesPage = () => {
{ {
value: "table", value: "table",
label: "Таблица", label: "Таблица",
icon: <DatabaseOutlined style={{marginRight: 8}}/>, icon: <DatabaseOutlined style={issuesUI.viewModIconStyle}/>,
}, },
{ {
value: "timeline", value: "timeline",
label: "Лента", label: "Лента",
icon: <UnorderedListOutlined style={{marginRight: 8}}/>, icon: <UnorderedListOutlined style={issuesUI.viewModIconStyle}/>,
}, },
]; ];
@ -144,15 +144,23 @@ const IssuesPage = () => {
); );
}; };
if (issuesData.isError) return (
<Result
status="error"
title="Ошибка"
subTitle="Произошла ошибка в работе страницы"
/>
);
return ( return (
<div style={{padding: 20}}> <div style={issuesUI.containerStyle}>
<Title level={1}><DatabaseOutlined/> Выдача линз</Title> <Title level={1}><DatabaseOutlined/> Выдача линз</Title>
<Row gutter={[16, 16]} style={{marginBottom: 20}}> <Row gutter={[16, 16]} style={issuesUI.filterBarStyle}>
<Col xs={24} md={24} sm={24} xl={12}> <Col xs={24} md={24} sm={24} xl={12}>
<Input <Input
placeholder="Поиск по пациенту или врачу" placeholder="Поиск по пациенту или врачу"
onChange={(e) => issuesUI.handleSetSearchText(e.target.value)} onChange={(e) => issuesUI.handleSetSearchText(e.target.value)}
style={{width: "100%"}} style={issuesUI.formItemStyle}
allowClear allowClear
/> />
</Col> </Col>
@ -169,7 +177,7 @@ const IssuesPage = () => {
> >
<DatePicker.RangePicker <DatePicker.RangePicker
allowClear={false} allowClear={false}
style={{width: "100%"}} style={issuesUI.formItemStyle}
placeholder={["Дата начала", "Дата окончания"]} placeholder={["Дата начала", "Дата окончания"]}
format="DD.MM.YYYY" format="DD.MM.YYYY"
value={issuesUI.isFilterDates && issuesUI.filterDates} value={issuesUI.isFilterDates && issuesUI.filterDates}

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

@ -96,12 +96,12 @@ const PatientsPage = () => {
{ {
value: "tile", value: "tile",
label: "Плитка", label: "Плитка",
icon: <BuildOutlined style={{marginRight: 8}}/> icon: <BuildOutlined style={patientsUI.viewModIconStyle}/>
}, },
{ {
value: "table", value: "table",
label: "Таблица", label: "Таблица",
icon: <TableOutlined style={{marginRight: 8}}/> icon: <TableOutlined style={patientsUI.viewModIconStyle}/>
} }
]; ];

33
web-app/src/pages/lenses_layout/LensesPage.jsx
View File

@ -43,12 +43,12 @@ const LensesPage = () => {
{ {
value: "tile", value: "tile",
label: "Плитка", label: "Плитка",
icon: <BuildOutlined style={{marginRight: 8}}/> icon: <BuildOutlined style={lensesUI.viewModIconStyle}/>
}, },
{ {
value: "table", value: "table",
label: "Таблица", label: "Таблица",
icon: <TableOutlined style={{marginRight: 8}}/> icon: <TableOutlined style={lensesUI.viewModIconStyle}/>
} }
]; ];
@ -115,7 +115,7 @@ const LensesPage = () => {
key: "actions", key: "actions",
fixed: 'right', fixed: 'right',
render: (text, record) => ( render: (text, record) => (
<div style={{display: "flex", gap: "8px"}}> <div style={lensesUI.tableActionButtonsStyle}>
<Button onClick={() => lensesUI.handleEditLens(record)}>Изменить</Button> <Button onClick={() => lensesUI.handleEditLens(record)}>Изменить</Button>
<Popconfirm <Popconfirm
@ -140,15 +140,15 @@ const LensesPage = () => {
); );
return ( return (
<div style={{padding: 20}}> <div style={lensesUI.containerStyle}>
<Title level={1}><FolderViewOutlined/> Линзы</Title> <Title level={1}><FolderViewOutlined/> Линзы</Title>
<Row gutter={[16, 16]} style={{marginBottom: 20}}> <Row gutter={[16, 16]} style={lensesUI.filterBarStyle}>
<Col xs={24} md={24} sm={24} xl={15}> <Col xs={24} md={24} sm={24} xl={15}>
<Input <Input
placeholder="Поиск линзы" placeholder="Поиск линзы"
value={lensesUI.searchText} value={lensesUI.searchText}
onChange={(e) => lensesUI.handleSetSearchText(e.target.value)} onChange={(e) => lensesUI.handleSetSearchText(e.target.value)}
style={{width: "100%"}} style={lensesUI.formItemStyle}
allowClear allowClear
/> />
</Col> </Col>
@ -175,11 +175,7 @@ const LensesPage = () => {
{lensesUI.showAdvancedSearch && ( {lensesUI.showAdvancedSearch && (
<Card <Card
title="Расширенный поиск" title="Расширенный поиск"
style={{ style={lensesUI.advancedSearchCardStyle}
marginBottom: 20,
boxShadow: "0 1px 6px rgba(0, 0, 0, 0.15)",
borderRadius: 8
}}
> >
<Row gutter={16}> <Row gutter={16}>
<Col xs={24} sm={12}> <Col xs={24} sm={12}>
@ -188,7 +184,7 @@ const LensesPage = () => {
<InputNumber <InputNumber
value={lensesUI.searchParams.tor || 0} value={lensesUI.searchParams.tor || 0}
onChange={(value) => lensesUI.handleParamChange("tor", value)} onChange={(value) => lensesUI.handleParamChange("tor", value)}
style={{width: "100%"}} style={lensesUI.formItemStyle}
defaultValue={0} defaultValue={0}
step={0.1} step={0.1}
/> />
@ -198,7 +194,7 @@ const LensesPage = () => {
<InputNumber <InputNumber
value={lensesUI.searchParams.diameter || 0} value={lensesUI.searchParams.diameter || 0}
onChange={(value) => lensesUI.handleParamChange("diameter", value)} onChange={(value) => lensesUI.handleParamChange("diameter", value)}
style={{width: "100%"}} style={lensesUI.formItemStyle}
defaultValue={0} defaultValue={0}
step={0.1} step={0.1}
/> />
@ -208,7 +204,7 @@ const LensesPage = () => {
<InputNumber <InputNumber
value={lensesUI.searchParams.preset_refraction || 0} value={lensesUI.searchParams.preset_refraction || 0}
onChange={(value) => lensesUI.handleParamChange("preset_refraction", value)} onChange={(value) => lensesUI.handleParamChange("preset_refraction", value)}
style={{width: "100%"}} style={lensesUI.formItemStyle}
defaultValue={0} defaultValue={0}
step={0.1} step={0.1}
/> />
@ -218,7 +214,7 @@ const LensesPage = () => {
<InputNumber <InputNumber
value={lensesUI.searchParams.periphery_toricity || 0} value={lensesUI.searchParams.periphery_toricity || 0}
onChange={(value) => lensesUI.handleParamChange("periphery_toricity", value)} onChange={(value) => lensesUI.handleParamChange("periphery_toricity", value)}
style={{width: "100%"}} style={lensesUI.formItemStyle}
defaultValue={0} defaultValue={0}
step={0.1} step={0.1}
/> />
@ -232,7 +228,7 @@ const LensesPage = () => {
<Select <Select
value={lensesUI.searchParams.side} value={lensesUI.searchParams.side}
onChange={(value) => lensesUI.handleParamChange("side", value)} onChange={(value) => lensesUI.handleParamChange("side", value)}
style={{width: "100%"}} style={lensesUI.formItemStyle}
> >
<Option value="all">Все</Option> <Option value="all">Все</Option>
<Option value="левая">Левая</Option> <Option value="левая">Левая</Option>
@ -244,7 +240,7 @@ const LensesPage = () => {
<Select <Select
value={lensesUI.searchParams.issued} value={lensesUI.searchParams.issued}
onChange={(value) => lensesUI.handleParamChange("issued", value)} onChange={(value) => lensesUI.handleParamChange("issued", value)}
style={{width: "100%"}} style={lensesUI.formItemStyle}
> >
<Option value="all">Все</Option> <Option value="all">Все</Option>
<Option value={true}>Да</Option> <Option value={true}>Да</Option>
@ -256,7 +252,7 @@ const LensesPage = () => {
<InputNumber <InputNumber
value={lensesUI.searchParams.trial || 0} value={lensesUI.searchParams.trial || 0}
onChange={(value) => lensesUI.handleParamChange("trial", value)} onChange={(value) => lensesUI.handleParamChange("trial", value)}
style={{width: "100%"}} style={lensesUI.formItemStyle}
defaultValue={0} defaultValue={0}
step={0.1} step={0.1}
/> />
@ -322,7 +318,6 @@ const LensesPage = () => {
<FloatButton <FloatButton
icon={<PlusOutlined/>} icon={<PlusOutlined/>}
type="primary" type="primary"
style={{position: "fixed", bottom: 40, right: 40}}
onClick={lensesUI.handleAddLens} onClick={lensesUI.handleAddLens}
tooltip="Добавить линзу" tooltip="Добавить линзу"
/> />

10
web-app/src/pages/lenses_layout/SetLensesPage.jsx
View File

@ -1,4 +1,4 @@
import {FloatButton, Input, List, Row, Typography} from "antd"; import {FloatButton, Input, List, Result, Row, Typography} from "antd";
import {PlusOutlined, SwitcherOutlined} from "@ant-design/icons"; import {PlusOutlined, SwitcherOutlined} from "@ant-design/icons";
import SetListCard from "../../components/sets/SetListCard.jsx"; import SetListCard from "../../components/sets/SetListCard.jsx";
import SetFormModal from "../../components/sets/SetFormModal.jsx"; import SetFormModal from "../../components/sets/SetFormModal.jsx";
@ -13,6 +13,14 @@ const SetLensesPage = () => {
const setsData = useSets(); const setsData = useSets();
const setsUI = useSetsUI(setsData.sets); const setsUI = useSetsUI(setsData.sets);
if (setsData.isError) return (
<Result
status="error"
title="Ошибка"
subTitle="Произошла ошибка в работе страницы"
/>
);
return ( return (
<div style={setsUI.containerStyle}> <div style={setsUI.containerStyle}>
<Title level={1}><SwitcherOutlined/> Наборы линз</Title> <Title level={1}><SwitcherOutlined/> Наборы линз</Title>