Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 | 4x 4x 4x 4x 4x 4x 4x 29x 29x 1x 29x 29x 1x 29x 15x 20x 29x 42x 2x | /*---------------------------------------------------------------------------------------------
* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
* See LICENSE.md in the project root for license terms and full copyright notice.
*--------------------------------------------------------------------------------------------*/
import React, { useCallback, useMemo } from "react";
import { RequiredFieldsNotice } from "./RequiredFieldsNotice";
import { Button, LabeledInput, LabeledSelect } from "@itwin/itwinui-react";
import type { Configuration, Report } from "../ec3-widget-react";
import { EC3Widget } from "../EC3Widget";
import "./TemplateModificationStepOne.scss";
import { useApiContext } from "./context/APIContext";
export interface TemplateModificationStepOneProps {
currentStep: number;
updateCurrentStep: (currentStep: number) => void;
childTemplate: Configuration;
updateChildTemplate: (childTemplate: Configuration) => void;
onCancelClick: () => void;
fetchedReports?: Report[];
isLoading: boolean;
}
export const TemplateModificationStepOne = (props: TemplateModificationStepOneProps) => {
const {
config: { defaultReport },
} = useApiContext();
const onTemplateNameChange = useCallback(
(event) => {
props.updateChildTemplate({ ...props.childTemplate, displayName: event.target.value });
},
[props],
);
const onTemplateDescriptionChange = useCallback(
(event) => {
props.updateChildTemplate({ ...props.childTemplate, description: event.target.value });
},
[props],
);
const onTemplateReportChange = useCallback(
(selectedReport) => {
props.updateChildTemplate({ ...props.childTemplate, reportId: selectedReport });
},
[props],
);
const reportSelectionOptions = useMemo(() => {
return (
props.fetchedReports?.map((x) => {
return {
label: x.displayName,
value: x.id,
};
}) ?? []
);
}, [props.fetchedReports]);
return (
<>
<div className="ec3w-template-creation-step-one">
<RequiredFieldsNotice />
<LabeledInput
id="reportName"
label={EC3Widget.translate("templateName")}
className="ec3w-input-form"
data-testid="ec3-template-name-input"
name="displayName"
value={props.childTemplate.displayName}
required
onChange={onTemplateNameChange}
/>
<LabeledInput
id="reportDescription"
name="description"
className="ec3w-input-form"
label={EC3Widget.translate("templateDescription")}
value={props.childTemplate.description}
onChange={onTemplateDescriptionChange}
/>
{!defaultReport && (
<LabeledSelect
label={EC3Widget.translate("reportSelection")}
className="ec3w-input-form"
data-testid="ec3-report-selection"
options={reportSelectionOptions}
value={props.fetchedReports?.find((rp) => rp.id === props.childTemplate.reportId)?.id}
onChange={onTemplateReportChange}
placeholder={props.isLoading ? EC3Widget.translate("reportSelectionPlaceholderLoading") : EC3Widget.translate("reportSelectionPlaceholderSelect")}
disabled={props.isLoading || props.childTemplate.reportId !== undefined}
/>
)}
</div>
<div className="ec3w-stepper-footer">
<Button
data-testid="ec3-step-one-next-button"
className="ec3w-footer-button"
styleType="high-visibility"
onClick={() => props.updateCurrentStep(1)}
disabled={props.childTemplate.displayName === "" || props.childTemplate.displayName === undefined || props.childTemplate.reportId === undefined}
>
{EC3Widget.translate("nextButton")}
</Button>
<Button onClick={props.onCancelClick}>{EC3Widget.translate("cancelButton")}</Button>
</div>
</>
);
};
|