Skip to content

Commit

Permalink
Merge pull request #168 from djnunez-aot/staff-form-preview
Browse files Browse the repository at this point in the history 
Staff Consultation Form Preview simplify form
  • Loading branch information
@jadmsaadaot
jadmsaadaot authored Nov 18, 2024
2 parents 2d12ada + 8ff3e30 commit 2e871af
Show file tree
Hide file tree
Showing 3 changed files with 156 additions and 284 deletions.
4 changes: 1 addition & 3 deletions submit-web/src/components/Shared/YesNoRadioOptions.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ export const YesNoRadioOptions = ({
}: IYesNoRadioOptionsProps) => {
const sx = [
disabled && {
color: BCDesignTokens.iconsColorDisabled,
color: `${BCDesignTokens.typographyColorPrimary} !important`,
},
error && {
color: BCDesignTokens.surfaceColorPrimaryDangerButtonDefault,
Expand All @@ -25,13 +25,11 @@ export const YesNoRadioOptions = ({
<>
<FormControlLabel
value={YES}
disabled={disabled}
control={<Radio sx={sx} disabled={disabled} />}
label="Yes"
/>
<FormControlLabel
value={NO}
disabled={disabled}
control={<Radio sx={sx} disabled={disabled} />}
label="No"
/>
Expand Down
263 changes: 126 additions & 137 deletions ...onents/SubmissionItem/ConsultationRecord/ConsultationRecordStaffView/FormFieldSection.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,164 +1,153 @@
import ControlledTextField from "@/components/Shared/controlled/ControlledTextField";
import { Divider, Grid, IconButton, Typography } from "@mui/material";
import CloseIcon from "@mui/icons-material/Close";
import {
Divider,
FormControlLabel,
Grid,
RadioGroup,
Switch,
Typography,
} from "@mui/material";
import { BCDesignTokens } from "epic.theme";
import { When } from "react-if";
import ControlledRadioGroup from "@/components/Shared/controlled/ControlledRadioGroup";
import { YesNoRadioOptions } from "@/components/Shared/YesNoRadioOptions";
import { FieldErrors, useFieldArray, UseFormReturn } from "react-hook-form";
import { ConsultationRecordForm } from "../constants";
import { useState } from "react";

const defaultFormData = {
consultedParties: [],
writtenExplanationsProvidedToCommenters: "",
allPartiesConsulted: "",
planWasReviewed: "",
writtenExplanationsProvidedToParties: "",
consultationRecords: [],
};

interface FormFieldSectionProps {
methods: UseFormReturn<ConsultationRecordForm>; // Replace FormValues with your actual form schema interface
errors: FieldErrors<ConsultationRecordForm>; // Replace FormValues with your actual form schema interface
formData: ConsultationRecordForm; // Replace FormValues with your actual form schema interface
}

export default function FormFieldSection({
methods,
errors,
formData = defaultFormData,
}: FormFieldSectionProps) {
const { fields, append, remove } = useFieldArray({
control: methods.control,
name: "consultedParties", // this should match the field name in the schema
});

const handleAddParty = () => {
append({ consultedParty: "" }); // append a new field for consultedParty
};
const [isHidden, setIsHidden] = useState(false);

return (
<>
<Grid item xs={12}>
<Typography
variant="h5"
fontWeight={400}
sx={{ color: BCDesignTokens.typographyColorDisabled }}
<Grid
item
container
xs={12}
justifyContent={"space-between"}
alignItems={"space-between"}
>
Consultation Records Information
</Typography>
<Divider sx={{ mt: BCDesignTokens.layoutMarginXsmall }} />
<Typography
variant="h5"
fontWeight={400}
sx={{ color: BCDesignTokens.typographyColorDisabled }}
>
Consultation Records Information
</Typography>
<FormControlLabel
control={<Switch onChange={() => setIsHidden(!isHidden)} />}
label="Hide form"
/>
</Grid>
<Divider sx={{ width: 1, mt: BCDesignTokens.layoutMarginXsmall }} />
</Grid>
<Grid item xs={12} container>
<Grid item container xs={12} spacing={BCDesignTokens.layoutMarginSmall}>
<Grid item xs={12}>
<Typography
variant="body1"
fontWeight={BCDesignTokens.typographyFontWeightsBold}
>
Names of consulted/engaged parties
<When condition={!isHidden}>
<Grid
item
container
xs={12}
spacing={BCDesignTokens.layoutMarginSmall}
>
<Grid item xs={12}>
<Typography
variant="body1"
fontWeight={BCDesignTokens.typographyFontWeightsBold}
>
Names of consulted/engaged parties
</Typography>
</Grid>
<Grid item xs={12}>
<Typography variant="body1">
These parties have been identified as requiring consultation.
Please include any additional parties that have been consulted
while developing this Management Plan.
</Typography>
</Grid>
</Grid>
<Grid item xs={12} sx={{ mb: BCDesignTokens.layoutMarginMedium }}>
<Typography variant="body1">
<ul
style={{
marginLeft: BCDesignTokens.layoutMarginSmall,
paddingLeft: BCDesignTokens.layoutPaddingSmall,
}}
>
<li>Ho’rem</li>
<li>Nustuk</li>
<li>Langkuem</li>
<li>Miskuuck</li>
<When condition={Boolean(formData?.consultedParties)}>
{formData?.consultedParties?.map((field, index) => (
<li key={index}>{field.consultedParty}</li>
))}
</When>
</ul>
</Typography>
</Grid>
<Grid item xs={12}>
<Grid item xs={12} sx={{ mb: BCDesignTokens.layoutMarginMedium }}>
<Typography variant="body1">
These parties have been identified as requiring consultation.
Please include any additional parties that have been consulted
while developing this Management Plan.
Ensure that comment trackers clearly demonstrate that consulted
parties have had the opportunity to respond to holder responses to
the consulted parties comments.
</Typography>
</Grid>
</Grid>
<Grid item xs={12} sx={{ mb: BCDesignTokens.layoutMarginMedium }}>
<Typography variant="body1">
<ul
style={{
marginLeft: BCDesignTokens.layoutMarginSmall,
paddingLeft: BCDesignTokens.layoutPaddingSmall,
}}
<Grid item xs={12} sx={{ mb: BCDesignTokens.layoutMarginMedium }}>
<Typography variant="body1">
Were all parties listed above consulted/engaged on the development
of this plan?
</Typography>
<RadioGroup defaultValue={formData.allPartiesConsulted}>
<YesNoRadioOptions disabled error={false} />
</RadioGroup>
</Grid>
<Grid item xs={12} sx={{ mb: BCDesignTokens.layoutMarginMedium }}>
<Typography variant="body1">
Was the plan provided to all parties listed above for review and
comment during plan development?
</Typography>
<RadioGroup defaultValue={formData.planWasReviewed}>
<YesNoRadioOptions disabled error={false} />
</RadioGroup>
</Grid>
<Grid item xs={12} sx={{ mb: BCDesignTokens.layoutMarginMedium }}>
<Typography variant="body1">
Have written explanations been provided to each party listed above
on how comments were fully and impartially considered and
addressed in the plan?
</Typography>
<RadioGroup
defaultValue={formData.writtenExplanationsProvidedToParties}
>
<li>Ho’rem</li>
<li>Nustuk</li>
<li>Langkuem</li>
<li>Miskuuck</li>
</ul>
</Typography>
<Grid item container xs={12} spacing={2}>
{fields.map((field, index) => (
<Grid item container xs={12} key={field.id}>
<Grid item xs={6}>
<ControlledTextField
fullWidth
name={`consultedParties.${index}.consultedParty`}
placeholder="Enter the name of other consulted party here"
sx={{
mb: 0,
}}
/>
</Grid>
<When condition={fields.length > 1}>
<IconButton onClick={() => remove(index)}>
<CloseIcon />
</IconButton>
</When>
</Grid>
))}
<YesNoRadioOptions disabled error={false} />
</RadioGroup>
</Grid>
<Typography
variant="body1"
sx={{
color: BCDesignTokens.typographyColorLink,
cursor: "pointer",
}}
onClick={handleAddParty}
>
+ Add a Consulted Party
</Typography>
</Grid>
<Grid item xs={12} sx={{ mb: BCDesignTokens.layoutMarginMedium }}>
<Typography variant="body1">
Ensure that comment trackers clearly demonstrate that consulted
parties have had the opportunity to respond to holder responses to
the consulted parties comments.
</Typography>
</Grid>
<Grid item xs={12} sx={{ mb: BCDesignTokens.layoutMarginMedium }}>
<Typography variant="body1">
Were all parties listed above consulted/engaged on the development
of this plan?
</Typography>
<ControlledRadioGroup name="allPartiesConsulted">
<YesNoRadioOptions
disabled
error={Boolean(errors["allPartiesConsulted"])}
/>
</ControlledRadioGroup>
</Grid>
<Grid item xs={12} sx={{ mb: BCDesignTokens.layoutMarginMedium }}>
<Typography variant="body1">
Was the plan provided to all parties listed above for review and
comment during plan development?
</Typography>
<ControlledRadioGroup name="planWasReviewed">
<YesNoRadioOptions
disabled
error={Boolean(errors["planWasReviewed"])}
/>
</ControlledRadioGroup>
</Grid>
<Grid item xs={12} sx={{ mb: BCDesignTokens.layoutMarginMedium }}>
<Typography variant="body1">
Have written explanations been provided to each party listed above
on how comments were fully and impartially considered and addressed
in the plan?
</Typography>
<ControlledRadioGroup name="writtenExplanationsProvidedToParties">
<YesNoRadioOptions
disabled
error={Boolean(errors["writtenExplanationsProvidedToParties"])}
/>
</ControlledRadioGroup>
</Grid>
<Grid item xs={12} sx={{ mb: BCDesignTokens.layoutMarginMedium }}>
<Typography variant="body1">
For comments not addressed in this plan, have written explanations
been provided to the commenters as to why the comments were not
addressed?
</Typography>
<ControlledRadioGroup name="writtenExplanationsProvidedToCommenters">
<YesNoRadioOptions
disabled
error={Boolean(errors["writtenExplanationsProvidedToCommenters"])}
/>
</ControlledRadioGroup>
</Grid>
<Grid item xs={12} sx={{ mb: BCDesignTokens.layoutMarginMedium }}>
<Typography variant="body1">
For comments not addressed in this plan, have written explanations
been provided to the commenters as to why the comments were not
addressed?
</Typography>
<RadioGroup
defaultValue={formData.writtenExplanationsProvidedToCommenters}
>
<YesNoRadioOptions disabled error={false} />
</RadioGroup>
</Grid>
</When>
</Grid>
</>
);
Expand Down
Loading

0 comments on commit 2e871af

Please sign in to comment.