Skip to content
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

added required asterix to v2 form questions #988

Merged
merged 4 commits into from
Jan 9, 2024
Merged

added required asterix to v2 form questions #988

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
321b112
added required asterix to v2 form questions
ARADDCC002 Jan 3, 2024
81764b1
updated red error colour to use theme
ARADDCC002 Jan 4, 2024
a49126b
merged main and fixed conflict
ARADDCC002 Jan 9, 2024
11973c6
updated required asterix to use main instead of light theme
ARADDCC002 Jan 9, 2024
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
3 changes: 2 additions & 1 deletion frontend/src/MuiForms/CustomTextInput.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ interface CustomTextInputProps {
}

export default function CustomTextInput(props: CustomTextInputProps) {
const { onChange, value, label, formContext, id } = props
const { onChange, value, label, formContext, id, required } = props

const theme = useTheme()

Expand All @@ -36,6 +36,7 @@ export default function CustomTextInput(props: CustomTextInputProps) {
<Fragment key={label}>
<Typography id={`${id}-label`} fontWeight='bold'>
{label}
{required && <span style={{ color: theme.palette.error.main }}>{' *'}</span>}
</Typography>
<TextField
size='small'
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/MuiForms/DateSelector.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ export default function DateInput(props: CustomTextInputProps) {
return (
<Fragment key={label}>
<Typography fontWeight='bold'>
{label} <span>{required && formContext.editMode ? '*' : ''}</span>
{label} {required && <span style={{ color: theme.palette.error.main }}>{' *'}</span>}
</Typography>
{formContext.editMode && (
<DatePicker
Expand Down
7 changes: 5 additions & 2 deletions frontend/src/MuiForms/Dropdown.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ interface DropdownProps {
options: { enumOptions?: { label: string; value: string }[] }
}

export default function Dropdown({ label, formContext, value, onChange, options }: DropdownProps) {
export default function Dropdown({ label, formContext, value, onChange, options, required }: DropdownProps) {
const theme = useTheme()

const handleChange = (_event: SyntheticEvent<Element, Event>, newValue: string | null) => {
Expand All @@ -35,7 +35,10 @@ export default function Dropdown({ label, formContext, value, onChange, options

return (
<Fragment key={label}>
<Typography fontWeight='bold'>{label}</Typography>
<Typography fontWeight='bold'>
{label}
{required && <span style={{ color: theme.palette.error.main }}>{' *'}</span>}
</Typography>
{formContext.editMode && (
<Autocomplete
size='small'
Expand Down
5 changes: 4 additions & 1 deletion frontend/src/MuiForms/EntitySelectorBeta.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -100,7 +100,10 @@ export default function EntitySelectorBeta(props: EntitySelectorBetaProps) {
)}
{formContext && !formContext.editMode && (
<>
<Typography fontWeight='bold'>{label}</Typography>
<Typography fontWeight='bold'>
{label}
{required && <span style={{ color: theme.palette.error.main }}>{' *'}</span>}
</Typography>
{currentValue.length === 0 && (
<Typography
sx={{
Expand Down
14 changes: 12 additions & 2 deletions frontend/src/MuiForms/MultipleDropdown.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,14 @@ interface MultipleDropdownProps {
options: { enumOptions?: { label: string; value: string }[] }
}

export default function MultipleDropdown({ label, formContext, value, onChange, options }: MultipleDropdownProps) {
export default function MultipleDropdown({
label,
formContext,
value,
onChange,
options,
required,
}: MultipleDropdownProps) {
const theme = useTheme()

const handleChange = (_event: SyntheticEvent<Element, Event>, newValue: string[]) => {
Expand All @@ -35,7 +42,10 @@ export default function MultipleDropdown({ label, formContext, value, onChange,

return (
<Fragment key={label}>
<Typography fontWeight='bold'>{label}</Typography>
<Typography fontWeight='bold'>
{label}
{required && <span style={{ color: theme.palette.error.main }}>{' *'}</span>}
</Typography>
{formContext.editMode && (
<Autocomplete
multiple
Expand Down
8 changes: 6 additions & 2 deletions frontend/src/MuiForms/TagSelectorBeta.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,10 @@ interface TagSelectorProps {
value: string[]
label: string
formContext?: FormContextType
required?: boolean
}

export default function TagSelector({ onChange, value, label, formContext }: TagSelectorProps) {
export default function TagSelector({ onChange, value, label, formContext, required }: TagSelectorProps) {
const handleChange = (_event: React.SyntheticEvent<Element, Event>, newValues: string[]) => {
onChange([...newValues])
}
Expand All @@ -20,7 +21,10 @@ export default function TagSelector({ onChange, value, label, formContext }: Tag
<>
{formContext && formContext.editMode && (
<>
<Typography fontWeight='bold'>{label}</Typography>
<Typography fontWeight='bold'>
{label}
{required && <span style={{ color: theme.palette.error.main }}>{' *'}</span>}
</Typography>
<Autocomplete
multiple
isOptionEqualToValue={(option: string, optionValue: string) => option === optionValue}
Expand Down