68 lines
2.5 KiB
TypeScript
68 lines
2.5 KiB
TypeScript
import { Row, Col, FBSelect, DropDownItem } from "../../ui/index";
|
|
import { StepParams } from "../interfaces";
|
|
import { StepWrapper, StepHeader, StepContent } from "../step_ui/index";
|
|
import { ToolTips } from "../../constants";
|
|
import * as React from "react";
|
|
import { unpackStep } from "./mark_as/unpack_step";
|
|
import { UpdateResource } from "farmbot";
|
|
import { resourceList } from "./mark_as/resource_list";
|
|
import { actionList } from "./mark_as/action_list";
|
|
import { commitStepChanges } from "./mark_as/commit_step_changes";
|
|
import { t } from "../../i18next_wrapper";
|
|
|
|
interface MarkAsState { nextResource: DropDownItem | undefined }
|
|
const NONE = (): DropDownItem => ({ label: t("Select one"), value: 0 });
|
|
|
|
export class MarkAs extends React.Component<StepParams, MarkAsState> {
|
|
state: MarkAsState = { nextResource: undefined };
|
|
className = "update-resource-step";
|
|
|
|
commitSelection = (nextAction: DropDownItem) => {
|
|
this.props.dispatch(commitStepChanges({
|
|
index: this.props.index,
|
|
nextAction,
|
|
nextResource: this.state.nextResource,
|
|
sequence: this.props.currentSequence,
|
|
step: this.props.currentStep as UpdateResource,
|
|
}));
|
|
this.setState({ nextResource: undefined });
|
|
};
|
|
|
|
render() {
|
|
const step = this.props.currentStep as UpdateResource;
|
|
const { rightSide, leftSide } =
|
|
unpackStep({ step, resourceIndex: this.props.resources });
|
|
return <StepWrapper>
|
|
<StepHeader
|
|
className={this.className}
|
|
helpText={ToolTips.MARK_AS}
|
|
currentSequence={this.props.currentSequence}
|
|
currentStep={this.props.currentStep}
|
|
dispatch={this.props.dispatch}
|
|
index={this.props.index}
|
|
confirmStepDeletion={this.props.confirmStepDeletion} />
|
|
<StepContent className={this.className}>
|
|
<Row>
|
|
<Col xs={6}>
|
|
<label>{t("Mark")}</label>
|
|
<FBSelect
|
|
list={resourceList(this.props.resources)}
|
|
onChange={(nextResource) => this.setState({ nextResource })}
|
|
allowEmpty={false}
|
|
selectedItem={this.state.nextResource || leftSide} />
|
|
</Col>
|
|
<Col xs={6}>
|
|
<label>{t("as")}</label>
|
|
<FBSelect
|
|
list={actionList(this.state.nextResource?.headingId,
|
|
step, this.props.resources)}
|
|
onChange={this.commitSelection}
|
|
key={JSON.stringify(rightSide) + JSON.stringify(this.state)}
|
|
selectedItem={this.state.nextResource ? NONE() : rightSide} />
|
|
</Col>
|
|
</Row>
|
|
</StepContent>
|
|
</StepWrapper>;
|
|
}
|
|
}
|