73 lines
2.5 KiB
JavaScript
73 lines
2.5 KiB
JavaScript
import {FloatButton, Input, List, Row, Typography} from "antd";
|
|
import {PlusOutlined, SwitcherOutlined} from "@ant-design/icons";
|
|
import SetListCard from "../../components/sets/SetListCard.jsx";
|
|
import SetFormModal from "../../components/sets/SetFormModal.jsx";
|
|
import LoadingIndicator from "../../components/LoadingIndicator.jsx";
|
|
import useSets from "../../hooks/data/useSets.js";
|
|
import useSetsUI from "../../hooks/ui/useSetsUI.js";
|
|
|
|
|
|
const {Title} = Typography;
|
|
|
|
const SetLensesPage = () => {
|
|
const setsData = useSets();
|
|
const setsUI = useSetsUI(setsData.sets);
|
|
|
|
return (
|
|
<div style={setsUI.containerStyle}>
|
|
<Title level={1}><SwitcherOutlined/> Наборы линз</Title>
|
|
<Row style={setsUI.filterBarStyle}>
|
|
<Input
|
|
placeholder="Поиск набора"
|
|
onChange={(e) => setsUI.handleSetSearchText(e.target.value)}
|
|
style={setsUI.formItemStyle}
|
|
allowClear
|
|
/>
|
|
</Row>
|
|
|
|
{setsData.isLoading ? (
|
|
<LoadingIndicator/>
|
|
) : (
|
|
<List
|
|
grid={{
|
|
gutter: 16,
|
|
xs: 1,
|
|
sm: 1,
|
|
md: 2,
|
|
lg: 2,
|
|
xl: 3,
|
|
xxl: 3,
|
|
}}
|
|
dataSource={setsUI.filteredSets}
|
|
renderItem={(set) => (
|
|
<List.Item>
|
|
<SetListCard
|
|
set={set}
|
|
handleEditSet={setsUI.handleEditSet}
|
|
handleDeleteSet={setsData.handleDeleteSet}
|
|
handleAppendSet={setsData.handleAppendSet}
|
|
/>
|
|
</List.Item>
|
|
)}
|
|
pagination={setsUI.pagination}
|
|
/>
|
|
)}
|
|
|
|
<FloatButton
|
|
icon={<PlusOutlined/>}
|
|
type="primary"
|
|
tooltip="Добавить набор"
|
|
onClick={setsUI.handleAddSet}
|
|
/>
|
|
|
|
<SetFormModal
|
|
visible={setsUI.isModalVisible}
|
|
onCancel={setsUI.handleCloseModal}
|
|
onSubmit={setsData.handleModalSetSubmit}
|
|
setData={setsUI.selectedSet}
|
|
/>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default SetLensesPage; |