2019-08-23 15:18:28 -06:00
|
|
|
import * as React from "react";
|
|
|
|
import { connect } from "react-redux";
|
|
|
|
import { PointInventoryItem } from "./point_inventory_item";
|
|
|
|
import { Everything } from "../../interfaces";
|
|
|
|
import { DesignerNavTabs, Panel } from "../panel_header";
|
|
|
|
import {
|
2020-02-28 09:35:32 -07:00
|
|
|
EmptyStateWrapper, EmptyStateGraphic,
|
2019-08-23 15:18:28 -06:00
|
|
|
} from "../../ui/empty_state_wrapper";
|
|
|
|
import { Content } from "../../constants";
|
|
|
|
import {
|
2020-02-28 09:35:32 -07:00
|
|
|
DesignerPanel, DesignerPanelContent, DesignerPanelTop,
|
2019-12-10 13:09:52 -07:00
|
|
|
} from "../designer_panel";
|
2019-08-23 15:18:28 -06:00
|
|
|
import { selectAllGenericPointers } from "../../resources/selectors";
|
|
|
|
import { TaggedGenericPointer } from "farmbot";
|
|
|
|
import { t } from "../../i18next_wrapper";
|
2020-04-13 19:15:11 -06:00
|
|
|
import { SearchField } from "../../ui/search_field";
|
2019-08-23 15:18:28 -06:00
|
|
|
|
|
|
|
export interface PointsProps {
|
2020-02-07 16:05:16 -07:00
|
|
|
genericPoints: TaggedGenericPointer[];
|
2019-08-23 15:18:28 -06:00
|
|
|
dispatch: Function;
|
2019-11-07 12:17:50 -07:00
|
|
|
hoveredPoint: string | undefined;
|
2019-08-23 15:18:28 -06:00
|
|
|
}
|
|
|
|
|
|
|
|
interface PointsState {
|
|
|
|
searchTerm: string;
|
|
|
|
}
|
|
|
|
|
|
|
|
export function mapStateToProps(props: Everything): PointsProps {
|
2019-11-07 12:17:50 -07:00
|
|
|
const { hoveredPoint } = props.resources.consumers.farm_designer;
|
2019-08-23 15:18:28 -06:00
|
|
|
return {
|
2020-02-07 16:05:16 -07:00
|
|
|
genericPoints: selectAllGenericPointers(props.resources.index)
|
2020-05-08 14:27:15 -06:00
|
|
|
.filter(x => x),
|
2019-08-23 15:18:28 -06:00
|
|
|
dispatch: props.dispatch,
|
2019-11-07 12:17:50 -07:00
|
|
|
hoveredPoint,
|
2019-08-23 15:18:28 -06:00
|
|
|
};
|
|
|
|
}
|
|
|
|
|
2019-09-19 13:09:00 -06:00
|
|
|
export class RawPoints extends React.Component<PointsProps, PointsState> {
|
2019-08-23 15:18:28 -06:00
|
|
|
state: PointsState = { searchTerm: "" };
|
|
|
|
|
|
|
|
render() {
|
2019-10-25 09:33:33 -06:00
|
|
|
return <DesignerPanel panelName={"point-inventory"} panel={Panel.Points}>
|
2019-08-23 15:18:28 -06:00
|
|
|
<DesignerNavTabs />
|
|
|
|
<DesignerPanelTop
|
|
|
|
panel={Panel.Points}
|
|
|
|
linkTo={"/app/designer/points/add"}
|
|
|
|
title={t("Add point")}>
|
2020-04-13 19:15:11 -06:00
|
|
|
<SearchField searchTerm={this.state.searchTerm}
|
|
|
|
placeholder={t("Search your points...")}
|
|
|
|
onChange={searchTerm => this.setState({ searchTerm })} />
|
2019-08-23 15:18:28 -06:00
|
|
|
</DesignerPanelTop>
|
2019-11-07 12:17:50 -07:00
|
|
|
<DesignerPanelContent panelName={"points"}>
|
2019-08-23 15:18:28 -06:00
|
|
|
<EmptyStateWrapper
|
2020-02-07 16:05:16 -07:00
|
|
|
notEmpty={this.props.genericPoints.length > 0}
|
2019-10-23 14:08:38 -06:00
|
|
|
graphic={EmptyStateGraphic.points}
|
2019-08-23 15:18:28 -06:00
|
|
|
title={t("No points yet.")}
|
|
|
|
text={Content.NO_POINTS}
|
|
|
|
colorScheme={"points"}>
|
2020-02-07 16:05:16 -07:00
|
|
|
{this.props.genericPoints
|
2019-08-23 15:18:28 -06:00
|
|
|
.filter(p => p.body.name.toLowerCase()
|
|
|
|
.includes(this.state.searchTerm.toLowerCase()))
|
2019-11-07 12:17:50 -07:00
|
|
|
.map(p => <PointInventoryItem
|
|
|
|
key={p.uuid}
|
|
|
|
tpp={p}
|
|
|
|
hovered={this.props.hoveredPoint === p.uuid}
|
|
|
|
dispatch={this.props.dispatch} />)}
|
2019-08-23 15:18:28 -06:00
|
|
|
</EmptyStateWrapper>
|
|
|
|
</DesignerPanelContent>
|
|
|
|
</DesignerPanel>;
|
|
|
|
}
|
|
|
|
}
|
2019-09-19 13:09:00 -06:00
|
|
|
|
|
|
|
export const Points = connect(mapStateToProps)(RawPoints);
|