78 lines
2.4 KiB
TypeScript
78 lines
2.4 KiB
TypeScript
import * as React from "react";
|
|
import { RegimenListItem } from "./regimen_list_item";
|
|
import { AddRegimen } from "./add_button";
|
|
import { Row, Col } from "../../ui/index";
|
|
import { RegimensListProps, RegimensListState } from "../interfaces";
|
|
import { sortResourcesById } from "../../util";
|
|
import { t } from "../../i18next_wrapper";
|
|
import { EmptyStateWrapper, EmptyStateGraphic } from "../../ui/empty_state_wrapper";
|
|
import { Content } from "../../constants";
|
|
import { SearchField } from "../../ui/search_field";
|
|
|
|
interface RegimenListHeaderProps {
|
|
searchTerm: string;
|
|
onChange(searchTerm: string): void;
|
|
regimenCount: number;
|
|
dispatch: Function;
|
|
}
|
|
|
|
const RegimenListHeader = (props: RegimenListHeaderProps) =>
|
|
<div className={"panel-top with-button"}>
|
|
<SearchField
|
|
placeholder={t("Search regimens...")}
|
|
searchTerm={props.searchTerm}
|
|
onChange={props.onChange} />
|
|
<AddRegimen dispatch={props.dispatch} length={props.regimenCount} />
|
|
</div>;
|
|
|
|
export class RegimensList extends
|
|
React.Component<RegimensListProps, RegimensListState> {
|
|
|
|
state: RegimensListState = {
|
|
searchTerm: ""
|
|
};
|
|
|
|
rows = () => {
|
|
const searchTerm = this.state.searchTerm.toLowerCase();
|
|
return <Col xs={12}>
|
|
{sortResourcesById(this.props.regimens)
|
|
.filter(regimen => regimen
|
|
.body
|
|
.name
|
|
.toLowerCase()
|
|
.includes(searchTerm))
|
|
.map((regimen, index) => {
|
|
return <RegimenListItem
|
|
index={index}
|
|
key={index}
|
|
inUse={!!this.props.usageStats[regimen.uuid]}
|
|
regimen={regimen}
|
|
dispatch={this.props.dispatch}
|
|
length={this.props.regimens.length} />;
|
|
})}
|
|
</Col>;
|
|
}
|
|
|
|
render() {
|
|
return <div className={"regimens-list-wrapper"}>
|
|
<RegimenListHeader
|
|
dispatch={this.props.dispatch}
|
|
regimenCount={this.props.regimens.length}
|
|
searchTerm={this.state.searchTerm}
|
|
onChange={searchTerm => this.setState({ searchTerm })} />
|
|
<Row>
|
|
<EmptyStateWrapper
|
|
notEmpty={this.props.regimens.length > 0}
|
|
graphic={EmptyStateGraphic.regimens}
|
|
title={t("No Regimens.")}
|
|
text={Content.NO_REGIMENS}>
|
|
{this.props.regimens.length > 0 &&
|
|
<div className="regimen-list">
|
|
{this.rows()}
|
|
</div>}
|
|
</EmptyStateWrapper>
|
|
</Row>
|
|
</div>;
|
|
}
|
|
}
|