Skip to content

Commit

Permalink
stepper
Browse files Browse the repository at this point in the history
  • Loading branch information
@chelsea-EYDS
chelsea-EYDS committed Feb 27, 2025
1 parent d367395 commit 60d22e3
Show file tree
Hide file tree
Showing 3 changed files with 399 additions and 138 deletions.
8 changes: 4 additions & 4 deletions frontend/src/components/layout/private/Layout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,11 @@ import { Header } from './Header';

export const Layout = ({ children }: { children: ReactElement }) => {
return (
<div className="h-screen overflow-y-hidden">
<div className="h-screen overflow-y-hidden flex flex-col justify-between">
<Header />

<div className="pt-8 md:pt-32 lg:pt-16 w-full h-full bg-white overflow-y-auto">
<div className="h-auto lg:min-h-[1200px] min-h-[1000px]">{children}</div>
{/* h-[calc(100vh-50px)] */}
<div className="w-full h-full pt-24 bg-white overflow-y-auto">
{children}
<Footer />
</div>
</div>
Expand Down
201 changes: 67 additions & 134 deletions frontend/src/pages/intake-form/IntakeForm.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,4 @@
import { Form, Formik } from 'formik';
import { ProgramSelection } from './pages/ProgramSelection';
import { PersonalInfo } from './pages/PersonalInfo';
import { ExperienceRoles } from './pages/ExperienceRoles';
import { Skills } from './pages/Skills';
import { ReviewAndSubmit } from './pages/ReviewAndSubmit';
import { Complete } from './pages/Complete';
import { personalDetailsSchema, programSelectionSchema } from './validation';
import { personalDetails, programFields } from './fields';
import { useKeycloak } from '@react-keycloak/web';
Expand All @@ -13,115 +7,51 @@ import { Tab, TabGroup, TabList, TabPanel, TabPanels } from '@headlessui/react';
import { ButtonTypes } from '@/common';
import { Button } from '@/components/ui';
import clsx from 'clsx';
import { useState } from 'react';
import { formTabs } from './form-tabs';

const IntakeForm = () => {
const { keycloak } = useKeycloak();
const { tokenParsed } = keycloak;

const [selectedTab, setSelectedTab] = useState(0);
if (!tokenParsed) {
return;
}

const formTabs = [
{
label: 'Program Selection & Acknowledgement',
description: (
<>
<p>
As a prospective member of the Coordinated Operation Response in
Emergencies (CORE) Team program, it is crucial that you acknowledge and
understand the commitments involved for the{' '}
<strong>Emergency Management and Climate Readiness (EMCR)</strong> and
the <strong>BC Wildfire Service (BCWS)</strong> CORE Team program
streams.
</p>
<br></br>
<p>
Before proceeding, please carefully read the details of each stream and
their application instructions below, make your stream choice, and then
check off the acknowledgement statements that will appear below.{' '}
</p>
</>
),
const handleSelectTab = (value: any) => {
setSelectedTab(value);
};

value: 'programSelection',
children: <ProgramSelection />,
},
{
label: 'Personal & Employee Information',
description:
'Please provide your most up-to-date personal and employment details.',
value: 'personalInfo',
children: <PersonalInfo />,
},
{
label: 'Experience and Section Interests',
description:
'The EMCR and BCWS CORE Team program streams operate very differently with distinct sections and/or roles. For this step, please carefully review their requirements in the blue banners as you proceed. Your responses will help us match your expertise and skillset to suitable roles.',
value: 'experienceRoles',
children: <ExperienceRoles />,
},
{
label: 'Other Skills & Qualifications',
value: 'skills',
description: 'Please indicate any other skillset that you may have.',
children: <Skills />,
},
{
label: 'Review and Submit',
value: 'reviewAndSubmit',
description:
'Please take a moment to review the information you have provided, then click “Submit” below to finalize your application.',
children: <ReviewAndSubmit />,
},
{
label: 'Complete',
value: 'complete',
description: (
<>
<p>
Thank you for submitting your application to join CORE Team. Our team
will be reviewing your application soon.
</p>
<br></br>
<p>
A CORE Team coordinator may reach out to you in the next 7 to 10 working
days via email to further assess your experience and deployment
readiness. Our response time may vary depending on ongoing operational
tasks such as responding to emergency and wildfire across the province.
</p>
</>
),
children: <Complete />,
},
];
return (
<Formik
initialValues={{
programFields,
personalDetails: {
...personalDetails,
firstName: tokenParsed.given_name,
lastName: tokenParsed.family_name,
},
// ...etc
}}
validationSchema={{
programSelectionSchema,
personalDetailsSchema,
}}
onSubmit={(values, actions) => {
// TODO: Update
setTimeout(() => {
alert(JSON.stringify(values, null, 2));
actions.setSubmitting(false);
}, 1000);
}}
>
<Form>
<div className="h-[calc(100vh-24px)] flex flex-col justify-between">
<div className="h-full flex flex-col justify-between">
<Formik
initialValues={{
programFields,
personalDetails: {
...personalDetails,
firstName: tokenParsed.given_name,
lastName: tokenParsed.family_name,
},
// ...etc
}}
validationSchema={{
programSelectionSchema,
personalDetailsSchema,
}}
onSubmit={(values, actions) => {
// TODO: Update
setTimeout(() => {
alert(JSON.stringify(values, null, 2));
actions.setSubmitting(false);
}, 1000);
}}
>
<Form>
<TabGroup
vertical
manual
selectedIndex={selectedTab}
onChange={setSelectedTab}
className="flex flex-row space-x-24 xl:space-x-32 px-16 lg:px-24 xl:px-32 w-full pt-24"
>
<TabList className="flex flex-col space-y-16 mt-2 border-dashed border-blue-900 border-l">
Expand All @@ -130,6 +60,7 @@ const IntakeForm = () => {
<Tab
key={value}
value={value}
onClick={() => handleSelectTab(value)}
className={'data-[selected]:outline-none'}
>
{({ selected }) => (
Expand Down Expand Up @@ -165,45 +96,47 @@ const IntakeForm = () => {
<div className="h-full flex flex-col xl:pr-24">
<h3>{label}</h3>
<div className="text-sm py-6">{description}</div>

{children}
</div>
</TabPanel>
))}
</TabPanels>
</TabGroup>

<div className="justify-self-end">
<div className="border border-t-grey-200"></div>
<div className="flex flex-row justify-between pt-8 px-32">
<div className="flex flex-row space-x-6">
<Button
text="Cancel"
variant={ButtonTypes.TEXT}
onClick={() => console.log('clicked')}
/>
<Button
text="Save For Later"
variant={ButtonTypes.OUTLINED}
onClick={() => console.log('clicked')}
/>
</div>
<div className="flex flex-row space-x-6">
<Button
text="Previous"
variant={ButtonTypes.OUTLINED}
onClick={() => console.log('clicked')}
/>
<Button
text="Next"
variant={ButtonTypes.SOLID}
onClick={() => console.log('clicked')}
/>
</div>
</div>
</Form>
</Formik>
<div>
<div className="border border-t-grey-200"></div>
<div className="flex flex-row justify-between py-8 px-32">
<div className="flex flex-row space-x-6">
<Button
text="Cancel"
variant={ButtonTypes.TEXT}
onClick={() => console.log('clicked')}
/>
<Button
text="Save For Later"
variant={ButtonTypes.OUTLINED}
onClick={() => console.log('clicked')}
/>
</div>
<div className="flex flex-row space-x-6">
<Button
text="Previous"
disabled={selectedTab === 0}
variant={ButtonTypes.OUTLINED}
onClick={() => setSelectedTab(selectedTab - (1 % formTabs.length))}
/>
<Button
text="Next"
variant={ButtonTypes.SOLID}
disabled={selectedTab === formTabs.length - 1}
onClick={() => setSelectedTab(selectedTab + (1 % formTabs.length))}
/>
</div>
</div>
</Form>
</Formik>
</div>
</div>
);
};

Expand Down
Loading

0 comments on commit 60d22e3

Please sign in to comment.