2017-06-29 12:54:02 -06:00
|
|
|
import * as React from "react";
|
|
|
|
import { connect } from "react-redux";
|
|
|
|
import { PlantInventoryItem } from "./plant_inventory_item";
|
|
|
|
import { Everything } from "../../interfaces";
|
2019-03-05 11:59:22 -07:00
|
|
|
import { Panel, DesignerNavTabs } from "../panel_header";
|
2018-09-13 16:00:14 -06:00
|
|
|
import { getPlants } from "../state_to_props";
|
2018-09-14 14:53:46 -06:00
|
|
|
import { TaggedPlant } from "../map/interfaces";
|
2018-11-28 15:29:46 -07:00
|
|
|
import {
|
|
|
|
EmptyStateWrapper, EmptyStateGraphic
|
|
|
|
} from "../../ui/empty_state_wrapper";
|
|
|
|
import { Content } from "../../constants";
|
2018-11-30 21:59:52 -07:00
|
|
|
import {
|
|
|
|
DesignerPanel, DesignerPanelContent, DesignerPanelTop
|
2019-12-10 13:09:52 -07:00
|
|
|
} from "../designer_panel";
|
2019-04-02 13:59:37 -06:00
|
|
|
import { t } from "../../i18next_wrapper";
|
2017-06-29 12:54:02 -06:00
|
|
|
|
2019-03-05 11:59:22 -07:00
|
|
|
export interface PlantInventoryProps {
|
2018-09-13 16:00:14 -06:00
|
|
|
plants: TaggedPlant[];
|
2017-06-29 12:54:02 -06:00
|
|
|
dispatch: Function;
|
2018-01-29 23:17:54 -07:00
|
|
|
hoveredPlantListItem?: string | undefined;
|
2017-06-29 12:54:02 -06:00
|
|
|
}
|
|
|
|
|
|
|
|
interface State {
|
|
|
|
searchTerm: string;
|
|
|
|
}
|
|
|
|
|
2020-02-07 16:05:16 -07:00
|
|
|
export function mapStateToProps(props: Everything): PlantInventoryProps {
|
2018-01-29 23:17:54 -07:00
|
|
|
const { hoveredPlantListItem } = props.resources.consumers.farm_designer;
|
2017-06-29 12:54:02 -06:00
|
|
|
return {
|
2018-09-13 16:00:14 -06:00
|
|
|
plants: getPlants(props.resources),
|
2018-01-29 23:17:54 -07:00
|
|
|
dispatch: props.dispatch,
|
|
|
|
hoveredPlantListItem,
|
2017-06-29 12:54:02 -06:00
|
|
|
};
|
|
|
|
}
|
|
|
|
|
2019-09-19 13:09:00 -06:00
|
|
|
export class RawPlants extends React.Component<PlantInventoryProps, State> {
|
2017-06-29 12:54:02 -06:00
|
|
|
|
|
|
|
state: State = { searchTerm: "" };
|
|
|
|
|
2019-03-05 11:59:22 -07:00
|
|
|
update = ({ currentTarget }: React.SyntheticEvent<HTMLInputElement>) =>
|
|
|
|
this.setState({ searchTerm: currentTarget.value })
|
2017-06-29 12:54:02 -06:00
|
|
|
|
|
|
|
render() {
|
2019-10-25 09:33:33 -06:00
|
|
|
return <DesignerPanel panelName={"plant-inventory"} panel={Panel.Plants}>
|
2018-04-20 22:50:48 -06:00
|
|
|
<DesignerNavTabs />
|
2019-03-05 11:59:22 -07:00
|
|
|
<DesignerPanelTop
|
|
|
|
panel={Panel.Plants}
|
|
|
|
linkTo={"/app/designer/plants/crop_search"}
|
|
|
|
title={t("Add plant")}>
|
2020-02-28 09:34:28 -07:00
|
|
|
<input type="text" onChange={this.update} name="searchTerm"
|
2018-11-30 21:59:52 -07:00
|
|
|
placeholder={t("Search your plants...")} />
|
|
|
|
</DesignerPanelTop>
|
|
|
|
<DesignerPanelContent panelName={"plant"}>
|
|
|
|
<EmptyStateWrapper
|
|
|
|
notEmpty={this.props.plants.length > 0}
|
|
|
|
graphic={EmptyStateGraphic.plants}
|
|
|
|
title={t("Get growing!")}
|
|
|
|
text={Content.NO_PLANTS}
|
|
|
|
colorScheme={"plants"}>
|
|
|
|
{this.props.plants
|
|
|
|
.filter(p => p.body.name.toLowerCase()
|
|
|
|
.includes(this.state.searchTerm.toLowerCase()))
|
2019-03-05 11:59:22 -07:00
|
|
|
.map(p => <PlantInventoryItem
|
|
|
|
key={p.uuid}
|
2020-02-07 16:05:16 -07:00
|
|
|
plant={p}
|
2019-03-05 11:59:22 -07:00
|
|
|
hovered={this.props.hoveredPlantListItem === p.uuid}
|
|
|
|
dispatch={this.props.dispatch} />)}
|
2018-11-30 21:59:52 -07:00
|
|
|
</EmptyStateWrapper>
|
|
|
|
</DesignerPanelContent>
|
|
|
|
</DesignerPanel>;
|
2017-06-29 12:54:02 -06:00
|
|
|
}
|
2017-08-23 16:26:09 -06:00
|
|
|
}
|
2019-09-19 13:09:00 -06:00
|
|
|
|
|
|
|
export const Plants = connect(mapStateToProps)(RawPlants);
|