Skip to content

String Migration #28

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
AccessiT3ch merged 2 commits into from
Oct 31, 2022
Merged

String Migration #28

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
536b3fc
Move container magic and display strings into variables
AccessiT3ch Oct 31, 2022
2301b33
Migrate remaining magic and display strings
AccessiT3ch Oct 31, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion src/components/EditFieldForm/EditFieldDate.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,8 @@ import { Accordion } from "react-bootstrap";
import { TypeOptionSelect } from "./TypeOptionSelect";
import { FormikProps } from "formik";

export const DARTE_FIELD_OPTIONS = "Date Field Options";

export interface EditFieldTextProps
extends FormikProps<{ [key: string]: string }> {}

Expand All @@ -13,7 +15,7 @@ export const EditFieldDate: FC<EditFieldTextProps> = (props): ReactElement => {
<Accordion flush className="form__modal_accordion">
<Accordion.Item eventKey="0">
<Accordion.Header>
<h5>Date Field Options</h5>
<h5>{DARTE_FIELD_OPTIONS}</h5>
</Accordion.Header>
<Accordion.Body>
<TypeOptionSelect {...props} />
Expand Down
114 changes: 76 additions & 38 deletions src/components/EditFieldForm/EditFieldForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,42 @@ import { EditFieldNumber } from "./EditFieldNumber";
import { EditFieldDate } from "./EditFieldDate";
import "./editFieldForm.scss";
import { EditFieldSelect } from "./EditFieldSelect";
import {
ADD,
BOOLEAN,
BOOLEAN_LABEL,
CANCEL,
CREATE_LABEL,
DATE,
DATE_LABEL,
FIELD,
NUMBER,
NUMBER_LABEL,
PRIMARY,
REQUIRED_LABEL,
RESET,
SECONDARY,
SELECT,
SELECT_LABEL,
SUBMIT,
SWITCH,
TEXT,
TEXT_DANGER,
TEXT_LABEL,
TEXT_MUTED,
TYPE,
UPDATE_LABEL,
} from "../../strings";

export const NAME = "name";
export const REQUIRED = "required";

export const FIELD_NAME_LABEL = "Field Name";
export const FIELD_NAME_PLACEHOLDER = "Enter field name";
export const FIELD_NAME_HELP_TEXT = "What is the name of this field?";
export const FIELD_TYPE_LABEL = "Field Type";
export const FIELD_TYPE_HELP_TEXT = "What type of field is this?";
export const FIELD_REQUIRED_HELP_TEXT = "Is this field required?";

export interface HandleFieldsFunction {
(values: { [key: string]: string }, log: Log, field: LogFields): void;
Expand Down Expand Up @@ -70,11 +106,11 @@ export const EditFieldForm: FC<EditFieldFormProps> = ({
...fieldState,
}}
validationSchema={Yup.object({
name: Yup.string().required("Required"),
type: Yup.string().required("Required"),
option: Yup.string().when("type", {
is: "select",
then: Yup.string().required("Required"),
name: Yup.string().required(REQUIRED_LABEL),
type: Yup.string().required(REQUIRED_LABEL),
option: Yup.string().when(TYPE, {
is: SELECT,
then: Yup.string().required(REQUIRED_LABEL),
}),
})}
onSubmit={(values: { [key: string]: string }) => {
Expand All @@ -96,30 +132,30 @@ export const EditFieldForm: FC<EditFieldFormProps> = ({
<Form onSubmit={handleSubmit} className="form__field_edit">
{/* Name, Type, and Required inputs */}
<Form.Group>
<Form.Label>Field Name</Form.Label>
<Form.Label>{FIELD_NAME_LABEL}</Form.Label>
<Form.Control
type="text"
name="name"
placeholder="Enter field name"
type={TEXT}
name={NAME}
placeholder={FIELD_NAME_PLACEHOLDER}
onChange={handleChange}
onBlur={handleBlur}
value={values.name}
/>
{(touched.name && errors.name && (
<Form.Text className="text-danger">{errors.name}</Form.Text>
<Form.Text className={TEXT_DANGER}>{errors.name}</Form.Text>
)) || (
<Form.Text className="text-muted">
This is the name of the field
<Form.Text className={TEXT_MUTED}>
{FIELD_NAME_HELP_TEXT}
</Form.Text>
)}
</Form.Group>
<Form.Group>
<Row>
<Col>
<Form.Label>Field Type</Form.Label>
<Form.Label>{FIELD_TYPE_LABEL}</Form.Label>
<Form.Control
as="select"
name="type"
as={SELECT}
name={TYPE}
onChange={(e) => {
handleChange(e);
const prevValues = { ...values };
Expand All @@ -140,71 +176,73 @@ export const EditFieldForm: FC<EditFieldFormProps> = ({
onBlur={handleBlur}
value={values.type}
>
<option value="text">Text</option>
<option value="number">Number</option>
<option value="date">Date</option>
<option value="select">Selection</option>
<option value={TEXT}>{TEXT_LABEL}</option>
<option value={NUMBER}>{NUMBER_LABEL}</option>
<option value={DATE}>{DATE_LABEL}</option>
<option value={SELECT}>{SELECT_LABEL}</option>
{/* <option value="tags">Tags</option> */}
<option value="boolean">Boolean</option>
<option value={BOOLEAN}>{BOOLEAN_LABEL}</option>
</Form.Control>
{(touched.type && errors.type && (
<Form.Text className="text-danger">{errors.type}</Form.Text>
<Form.Text className={TEXT_DANGER}>{errors.type}</Form.Text>
)) || (
<Form.Text className="text-muted">
This is the type of the field.
<Form.Text className={TEXT_MUTED}>
{FIELD_TYPE_HELP_TEXT}
</Form.Text>
)}
</Col>
<Col>
<Form.Label>Required</Form.Label>
<Form.Label>{REQUIRED_LABEL}</Form.Label>
<Form.Check
type="switch"
name="required"
type={SWITCH}
name={REQUIRED}
className="form__field_edit__required"
onChange={handleChange}
onBlur={handleBlur}
defaultChecked={values.required as unknown as boolean}
/>
{(touched.required && errors.required && (
<Form.Text className="text-danger">
<Form.Text className={TEXT_DANGER}>
{errors.required}
</Form.Text>
)) || (
<Form.Text className="text-muted">
Is this field required?
<Form.Text className={TEXT_MUTED}>
{FIELD_REQUIRED_HELP_TEXT}
</Form.Text>
)}
</Col>
</Row>
</Form.Group>

{values.type === "text" && <EditFieldText {...props} />}
{values.type === TEXT && <EditFieldText {...props} />}

{values.type === "number" && <EditFieldNumber {...props} />}
{values.type === NUMBER && <EditFieldNumber {...props} />}

{values.type === "date" && <EditFieldDate {...props} />}
{values.type === DATE && <EditFieldDate {...props} />}

{values.type === "select" && <EditFieldSelect {...props} />}
{values.type === SELECT && <EditFieldSelect {...props} />}

<hr />
{/* Cancel and Submit Buttons */}
<Form.Group>
<Row className="form__field_edit__submit_row">
<Col>
<Button
variant="secondary"
type="reset"
variant={SECONDARY}
type={RESET}
onClick={(e) => {
e.preventDefault();
resetModal();
}}
>
Cancel
{CANCEL}
</Button>
</Col>
<Col>
<Button variant="primary" type="submit">
{`${modalMode === "add" ? "Create" : "Update"} Field`}
<Button variant={PRIMARY} type={SUBMIT}>
{`${
modalMode === ADD ? CREATE_LABEL : UPDATE_LABEL
} ${FIELD}`}
</Button>
</Col>
</Row>
Expand Down
90 changes: 56 additions & 34 deletions src/components/EditFieldForm/EditFieldNumber.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,28 @@ import React, { FC, ReactElement } from "react";
import { Accordion, Col, Form, Row } from "react-bootstrap";
import { FormikProps } from "formik";
import { TypeOptionSelect } from "./TypeOptionSelect";
import {
DEFAULT,
MAX,
MIN,
NONE_LABEL,
NUMBER,
STEP,
STEPS_LABEL,
TEXT,
TEXT_DANGER,
TEXT_MUTED,
} from "../../strings";

export const NUMBER_FIELD_OPTIONS = "Number Field Options";
export const MIN_VALUE = "Min Value";
export const MAX_VALUE = "Max Value";
export const UNIT = "unit";
export const UNIT_LABEL = "Unit";
export const UNIT_PLACEHOLDER = "Degrees, meters, etc.";
export const DEFAULT_VALUE = "defaultValue";
export const DEFAULT_VALUE_LABEL = "Default Value";
export const DEFAULT_VALUE_TEXT = "This is the default value of the field";

export interface EditFieldTextProps
extends FormikProps<{ [key: string]: string }> {}
Expand All @@ -17,44 +39,44 @@ export const EditFieldNumber: FC<EditFieldTextProps> = (
<Accordion flush className="form__modal_accordion">
<Accordion.Item eventKey="0">
<Accordion.Header>
<h5>Number Field Options</h5>
<h5>{NUMBER_FIELD_OPTIONS}</h5>
</Accordion.Header>
<Accordion.Body>
<TypeOptionSelect {...formikProps} />

<Form.Group>
<Row>
<Col>
<Form.Label>{"Min Value"}</Form.Label>
<Form.Label>{MIN_VALUE}</Form.Label>
<Form.Control
type="number"
name="min"
placeholder="Min"
type={NUMBER}
name={MIN}
onChange={handleChange}
onBlur={handleBlur}
value={values.min}
/>
{(touched.min && errors.min && (
<Form.Text className="text-danger">{errors.min}</Form.Text>
<Form.Text className={TEXT_DANGER}>{errors.min}</Form.Text>
)) || (
<Form.Text className="text-muted">{"Default: 0"}</Form.Text>
<Form.Text
className={TEXT_MUTED}
>{`${DEFAULT}0`}</Form.Text>
)}
</Col>
<Col>
<Form.Label>{"Max Value"}</Form.Label>
<Form.Label>{MAX_VALUE}</Form.Label>
<Form.Control
type="number"
name="max"
placeholder="Max"
type={NUMBER}
name={MAX}
onChange={handleChange}
onBlur={handleBlur}
value={values.max}
/>
{(touched.max && errors.max && (
<Form.Text className="text-danger">{errors.max}</Form.Text>
<Form.Text className={TEXT_DANGER}>{errors.max}</Form.Text>
)) || (
<Form.Text className="text-muted">
{"Default: 100"}
<Form.Text className={TEXT_MUTED}>
{`${DEFAULT}100`}
</Form.Text>
)}
</Col>
Expand All @@ -64,59 +86,59 @@ export const EditFieldNumber: FC<EditFieldTextProps> = (
<Form.Group>
<Row>
<Col>
<Form.Label>{"Steps"}</Form.Label>
<Form.Label>{STEPS_LABEL}</Form.Label>
<Form.Control
type="number"
name="step"
placeholder="Steps"
type={NUMBER}
name={STEP}
onChange={handleChange}
onBlur={handleBlur}
value={values.step}
/>
{(touched.step && errors.step && (
<Form.Text className="text-danger">{errors.step}</Form.Text>
<Form.Text className={TEXT_DANGER}>{errors.step}</Form.Text>
)) || (
<Form.Text className="text-muted">{"Default: 1"}</Form.Text>
<Form.Text
className={TEXT_MUTED}
>{`${DEFAULT}1`}</Form.Text>
)}
</Col>
<Col>
<Form.Label>{"Unit"}</Form.Label>
<Form.Label>{UNIT_LABEL}</Form.Label>
<Form.Control
type="text"
name="unit"
placeholder="Degrees, meters, etc."
type={TEXT}
name={UNIT}
placeholder={UNIT_PLACEHOLDER}
onChange={handleChange}
onBlur={handleBlur}
value={values.unit}
/>
{(touched.unit && errors.unit && (
<Form.Text className="text-danger">{errors.unit}</Form.Text>
<Form.Text className={TEXT_DANGER}>{errors.unit}</Form.Text>
)) || (
<Form.Text className="text-muted">
{"Default: None"}
<Form.Text className={TEXT_MUTED}>
{`${DEFAULT}${NONE_LABEL}`}
</Form.Text>
)}
</Col>
</Row>
</Form.Group>

<Form.Group>
<Form.Label>{"Default Value"}</Form.Label>
<Form.Label>{DEFAULT_VALUE_LABEL}</Form.Label>
<Form.Control
type="number"
name="defaultValue"
placeholder="Enter the default number for this field"
type={NUMBER}
name={DEFAULT_VALUE}
onChange={handleChange}
onBlur={handleBlur}
value={values.defaultValue}
/>
{(touched.defaultValue && errors.defaultValue && (
<Form.Text className="text-danger">
<Form.Text className={TEXT_DANGER}>
{errors.defaultValue}
</Form.Text>
)) || (
<Form.Text className="text-muted">
{"This is the default value of the field"}
<Form.Text className={TEXT_MUTED}>
{DEFAULT_VALUE_TEXT}
</Form.Text>
)}
</Form.Group>
Expand Down
Loading