2018-09-07 13:30:31 -06:00
|
|
|
import { Row, Col, FBSelect, DropDownItem } from "../../ui/index";
|
2018-08-24 10:43:07 -06:00
|
|
|
import { StepParams } from "../interfaces";
|
|
|
|
import { StepWrapper, StepHeader, StepContent } from "../step_ui/index";
|
2018-09-06 13:43:43 -06:00
|
|
|
import { ToolTips } from "../../constants";
|
|
|
|
import * as React from "react";
|
2018-09-07 10:15:31 -06:00
|
|
|
import { unpackStep } from "./mark_as/unpack_step";
|
2020-04-21 15:37:08 -06:00
|
|
|
import { UpdateResource } from "farmbot";
|
2018-09-07 13:30:31 -06:00
|
|
|
import { resourceList } from "./mark_as/resource_list";
|
|
|
|
import { actionList } from "./mark_as/action_list";
|
2018-09-11 14:35:02 -06:00
|
|
|
import { commitStepChanges } from "./mark_as/commit_step_changes";
|
2019-04-02 13:59:37 -06:00
|
|
|
import { t } from "../../i18next_wrapper";
|
2018-08-24 10:43:07 -06:00
|
|
|
|
2018-09-07 13:30:31 -06:00
|
|
|
interface MarkAsState { nextResource: DropDownItem | undefined }
|
2020-04-02 10:53:55 -06:00
|
|
|
const NONE = (): DropDownItem => ({ label: t("Select one"), value: 0 });
|
2018-09-07 13:30:31 -06:00
|
|
|
|
|
|
|
export class MarkAs extends React.Component<StepParams, MarkAsState> {
|
|
|
|
state: MarkAsState = { nextResource: undefined };
|
2020-04-21 15:37:08 -06:00
|
|
|
className = "update-resource-step";
|
2018-09-07 13:59:10 -06:00
|
|
|
|
|
|
|
commitSelection = (nextAction: DropDownItem) => {
|
2018-09-11 13:41:04 -06:00
|
|
|
this.props.dispatch(commitStepChanges({
|
2018-09-07 13:59:10 -06:00
|
|
|
index: this.props.index,
|
2018-09-11 13:41:04 -06:00
|
|
|
nextAction,
|
|
|
|
nextResource: this.state.nextResource,
|
|
|
|
sequence: this.props.currentSequence,
|
2020-04-21 15:37:08 -06:00
|
|
|
step: this.props.currentStep as UpdateResource,
|
2018-09-07 13:59:10 -06:00
|
|
|
}));
|
2018-09-10 13:23:52 -06:00
|
|
|
this.setState({ nextResource: undefined });
|
2018-09-07 13:59:10 -06:00
|
|
|
};
|
|
|
|
|
2018-08-27 14:04:51 -06:00
|
|
|
render() {
|
2020-04-21 15:37:08 -06:00
|
|
|
const step = this.props.currentStep as UpdateResource;
|
2018-09-11 15:53:27 -06:00
|
|
|
const { rightSide, leftSide } =
|
2018-09-07 10:15:31 -06:00
|
|
|
unpackStep({ step, resourceIndex: this.props.resources });
|
2018-08-27 14:04:51 -06:00
|
|
|
return <StepWrapper>
|
|
|
|
<StepHeader
|
2018-08-28 13:42:44 -06:00
|
|
|
className={this.className}
|
2018-09-14 12:32:31 -06:00
|
|
|
helpText={ToolTips.MARK_AS}
|
2018-08-28 13:42:44 -06:00
|
|
|
currentSequence={this.props.currentSequence}
|
|
|
|
currentStep={this.props.currentStep}
|
|
|
|
dispatch={this.props.dispatch}
|
2018-09-06 08:53:48 -06:00
|
|
|
index={this.props.index}
|
|
|
|
confirmStepDeletion={this.props.confirmStepDeletion} />
|
2018-08-28 13:42:44 -06:00
|
|
|
<StepContent className={this.className}>
|
2018-08-27 14:04:51 -06:00
|
|
|
<Row>
|
2018-09-07 13:59:10 -06:00
|
|
|
<Col xs={6}>
|
2018-08-27 14:04:51 -06:00
|
|
|
<label>{t("Mark")}</label>
|
|
|
|
<FBSelect
|
2018-09-07 13:30:31 -06:00
|
|
|
list={resourceList(this.props.resources)}
|
|
|
|
onChange={(nextResource) => this.setState({ nextResource })}
|
2018-08-28 08:38:55 -06:00
|
|
|
allowEmpty={false}
|
2018-09-11 15:53:27 -06:00
|
|
|
selectedItem={this.state.nextResource || leftSide} />
|
2018-08-27 14:04:51 -06:00
|
|
|
</Col>
|
2018-09-07 13:59:10 -06:00
|
|
|
<Col xs={6}>
|
2018-09-06 13:43:43 -06:00
|
|
|
<label>{t("as")}</label>
|
|
|
|
<FBSelect
|
2020-04-21 15:37:08 -06:00
|
|
|
list={actionList(this.state.nextResource?.headingId,
|
|
|
|
step, this.props.resources)}
|
2018-09-07 13:59:10 -06:00
|
|
|
onChange={this.commitSelection}
|
2018-09-11 15:53:27 -06:00
|
|
|
key={JSON.stringify(rightSide) + JSON.stringify(this.state)}
|
2020-04-02 10:53:55 -06:00
|
|
|
selectedItem={this.state.nextResource ? NONE() : rightSide} />
|
2018-09-06 13:43:43 -06:00
|
|
|
</Col>
|
2018-08-27 14:04:51 -06:00
|
|
|
</Row>
|
|
|
|
</StepContent>
|
|
|
|
</StepWrapper>;
|
|
|
|
}
|
2018-08-24 10:43:07 -06:00
|
|
|
}
|