diff --git a/web/src/features/dialog/InputDialog.tsx b/web/src/features/dialog/InputDialog.tsx index e64d112..5cbbc60 100644 --- a/web/src/features/dialog/InputDialog.tsx +++ b/web/src/features/dialog/InputDialog.tsx @@ -30,10 +30,10 @@ interface Props { // data: { // heading: "Police locker", // rows: [ -// { type: "input", label: "Locker number" }, +// { type: "input", label: "Locker number", placeholder: "420" }, // { type: "checkbox", label: "Some checkbox" }, // { type: "input", label: "Locker PIN", password: true, icon: "lock" }, -// { type: "checkbox", label: "Some other checkbox" }, +// { type: "checkbox", label: "Some other checkbox", checked: true }, // { // type: "select", // label: "Locker type", @@ -43,7 +43,7 @@ interface Props { // { value: "option3", label: "Option 3" }, // ], // }, -// { type: "number", label: "Number counter" }, +// { type: "number", label: "Number counter", default: 12 }, // ], // }, // }, diff --git a/web/src/features/dialog/components/checkbox.tsx b/web/src/features/dialog/components/checkbox.tsx index 7f87ae2..3e08fe3 100644 --- a/web/src/features/dialog/components/checkbox.tsx +++ b/web/src/features/dialog/components/checkbox.tsx @@ -1,4 +1,5 @@ import { Box, Checkbox } from "@chakra-ui/react"; +import { useEffect } from "react"; import { Row } from "../../../interfaces/dialog"; interface Props { @@ -8,11 +9,16 @@ interface Props { } const CheckboxField: React.FC = (props) => { + useEffect(() => { + if(props.row.checked) props.handleChange(props.row.checked, props.index); + }, []); + return ( <> props.handleChange(e.target.checked, props.index)} + defaultChecked={props.row.checked} > {props.row.label} diff --git a/web/src/features/dialog/components/input.tsx b/web/src/features/dialog/components/input.tsx index 7ee7436..23a6667 100644 --- a/web/src/features/dialog/components/input.tsx +++ b/web/src/features/dialog/components/input.tsx @@ -7,6 +7,7 @@ import { Input, } from "@chakra-ui/react"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { useEffect } from "react"; import { Row } from "../../../interfaces/dialog"; interface Props { @@ -18,6 +19,10 @@ interface Props { } const InputField: React.FC = (props) => { + useEffect(() => { + if(props.row.default) props.handleChange(props.row.default, props.index); + }, []); + return ( <> @@ -31,6 +36,8 @@ const InputField: React.FC = (props) => { )} props.handleChange(e.target.value, props.index)} + placeholder={props.row.placeholder} + defaultValue={props.row.default} type={ !props.row.password || props.passwordStates[props.index] ? "text" diff --git a/web/src/features/dialog/components/number.tsx b/web/src/features/dialog/components/number.tsx index e5b138e..61d0eb5 100644 --- a/web/src/features/dialog/components/number.tsx +++ b/web/src/features/dialog/components/number.tsx @@ -7,6 +7,7 @@ import { NumberIncrementStepper, NumberDecrementStepper, } from "@chakra-ui/react"; +import { useEffect } from "react"; import { Row } from "../../../interfaces/dialog"; interface Props { @@ -16,11 +17,15 @@ interface Props { } const InputNumber: React.FC = (props) => { + useEffect(() => { + if(props.row.default) props.handleChange(props.row.default, props.index); + }, []); + return ( {props.row.label} - props.handleChange(+e, props.index)}> - + props.handleChange(+e, props.index)} defaultValue={props.row.default}> + diff --git a/web/src/features/dialog/components/select.tsx b/web/src/features/dialog/components/select.tsx index 769e464..68e372f 100644 --- a/web/src/features/dialog/components/select.tsx +++ b/web/src/features/dialog/components/select.tsx @@ -1,4 +1,5 @@ import { Box, Select } from "@chakra-ui/react"; +import { useEffect } from "react"; import { Row } from "../../../interfaces/dialog"; interface Props { @@ -8,11 +9,22 @@ interface Props { } const SelectField: React.FC = (props) => { + useEffect(() => { + if(props.row.default) { + props.row.options?.map((option) => { + if(props.row.default === option.value) { + props.handleChange(option.value, props.index); + } + }); + } + }, []); + return ( <>