Untitled
unknown
typescript
a year ago
13 kB
1
Indexable
Never
import { stat } from "fs/promises";
import { useContext, useEffect, useState } from "react";
import { useHistory, useLocation } from "react-router-dom";
import AppContext from "../contexts/app-context";
import { CitizenshipType } from "../enums/citizenship-type";
import { ExtraDocument } from "../models/document";
import { Employee } from "../models/employee";
import { Form } from "../models/form";
import { Province } from "../models/province";
import { LocationState } from "../props/location-path";
import { DocumentService } from "../services/document-service";
import { EmployeeService } from "../services/employee-service";
import { FormService } from "../services/form-service";
import { ProvinceService } from "../services/province-service";
import classes from "../styles/applicant-form.module.css";
export default function ApplicantForm(): JSX.Element {
const context = useContext(AppContext);
const history = useHistory();
const location = useLocation<LocationState>();
const [documents, setDocuments] = useState(new Document());
const [formInfo, setForm] = useState(new Form());
const [selectedCitizenship, setSelectedCitizenship] = useState<string>();
const [employeeInfo, setEmployee] = useState(new Employee());
const [extradocuments, setExtraDocuments] = useState(new Array<ExtraDocument>());
const [provinces, setProvinces] = useState(new Array<Province>());
const [province, setProvince2] = useState(new Province());
const [message, setMessage] = useState('');
const [dropdownState1, setDropdownState1] = useState({ open: false });
const [dropdownState2, setDropdownState2] = useState({ open: false });
let original: Form;
const radioHandler = (event: React.ChangeEvent<HTMLInputElement>) => {
setSelectedCitizenship(event.target.value);
setDropdownState1({ open: false });
setDropdownState2({ open: false});
console.log("Option 1 or 2");
};
const radioHandler2 = (event: React.ChangeEvent<HTMLInputElement>) => {
setSelectedCitizenship(event.target.value);
setDropdownState1({ open: true });
setDropdownState2({ open: false});
console.log("Option 3" + dropdownState1.open);
};
const radioHandler3 = (event: React.ChangeEvent<HTMLInputElement>) => {
setSelectedCitizenship(event.target.value);
setDropdownState1({ open: false});
setDropdownState2({ open: true});
console.log("Option 4" + dropdownState2.open);
};
// useEffect(() => {
// FormService.getForm(location.state.id).then(form => {
// setForm(form);
// original = form;
// });
// });
// useEffect(() => {
// if (location.state?.id) {
// FormService.getForm(location.state.id).then(form => {
// setForm(form);
// original = form;
// });
// }
// }, [location]);
useEffect(() => {
ProvinceService.getProvinces().then(provinces => {
console.log("province = " + provinces);
setProvinces(provinces);
});
FormService.getForm(location.state.id).then(form => {
setForm(form);
console.log("id from dash ---> " + location.state.id);
original = form;
});
DocumentService.getExtraDocuments().then(extradocuments => {
console.log("extradocument = " + extradocuments);
setExtraDocuments(extradocuments);
});
console.log("employee first name ---> " + formInfo.firstName);
console.log("from setDefault for 0: " + setDefaultImmigrationStatusId(0));
console.log("from setDefault for 1: " + setDefaultImmigrationStatusId(1));
console.log("from setDefault for 2: " + setDefaultImmigrationStatusId(2));
console.log("from setDefault for 3: " + setDefaultImmigrationStatusId(3));
}, [location]);
function setExtraDocument(code: string) : void {
console.log("extradocument =" + code);
// documents.documentTypeId = parseInt(code);
}
function setProvince(code: string) : void {
console.log("province =" + code);
province.provinceCode = (code);
}
function setDefaultImmigrationStatusId(status: number) : boolean {
console.log("id in fuction ---> " + formInfo.immigrationStatusId);
if (status == formInfo.immigrationStatusId) {
return true;
} else {
return false;
}
}
return(
<div>
<form>
<h1>Form nr {formInfo.formId}: Section 1 </h1>
<h2>Personal Information</h2>
<fieldset className={classes.control}>
<label className={classes.label}>First Name *</label>
<input className={classes.input} type="text" id="firstName" name="firstName" defaultValue={formInfo.firstName} onChange={event => setMessage(event.target.value)}/>
<label className={classes.label}>Last Name *</label>
<input className={classes.input} type="text" id="lastName" name="lastName" defaultValue={formInfo.lastName} onChange={event => setMessage(event.target.value)}/>
<label className={classes.label}>Middle Innitial</label>
<input className={classes.input} type="text" id="middleName" name="middleName" defaultValue={formInfo.middleInitial}/>
<label className={classes.label}>Other Last Names Used</label>
<input className={classes.input} type="text" id="otherLastName" name="otherLastName"/>
<label className={classes.label}>Date of birth *</label>
<input className={classes.input} type="date" id="birthDate" name="birthDate" defaultValue={String(formInfo.birthDate)} onChange={event => setMessage(event.target.value)}/>
<label className={classes.label}>U.S. Social Security Number *</label>
<input className={classes.input} type="text" id="ssn" name="ssn" defaultValue={formInfo.ssn} onChange={event => setMessage(event.target.value)}/>
</fieldset>
<h2>Location Information</h2>
<fieldset className={classes.control}>
<label className={classes.label}>Address *</label>
<input className={classes.input} type="text" id="address" name="address" defaultValue={formInfo.street} onChange={event => setMessage(event.target.value)}/>
<label className={classes.label}>Apt. Number</label>
<input className={classes.input} type="text" id="aptNumber" name="aptNumber" defaultValue={formInfo.aptNumber}/>
<label className={classes.label}>City *</label>
<input className={classes.input} type="text" id="city" name="city" defaultValue={formInfo.city} onChange={event => setMessage(event.target.value)}/>
<label className={classes.label}>State *</label>
<div className={classes.regions}>
<select className={classes.combo} onChange={event => setProvince(event.target.value)} value={province.provinceCode} id="province" name="province" defaultValue={formInfo.provinceCode}>
{provinces.map(province => <option key={province.provinceCode} value={province.provinceCode}>{province.description} </option>)}
</select>
</div>
<label className={classes.label}>ZIP Code *</label>
<input className={classes.input} type="text" id="zipCode" name="zipCode" defaultValue={formInfo.postalCode} onChange={event => setMessage(event.target.value)}/>
</fieldset>
<h2>Contact data</h2>
<fieldset className={classes.control}>
<label className={classes.label}>Personal Email Address *</label>
<input className={classes.input} type="text" id="email" name="email" defaultValue={formInfo.email} onChange={event => setMessage(event.target.value)}/>
<label className={classes.label}>Personal Telephone Number *</label>
<input className={classes.input} type="text" id="phoneNumber" name="phoneNumber" defaultValue={formInfo.phoneNumber} onChange={event => setMessage(event.target.value)}/>
</fieldset>
<h2>Citizenship</h2>
<fieldset>
<legend>Please select your citizenship</legend>
<p/>
<input type="radio" name= "citizenship" defaultValue= "1" id="citizen" onChange={radioHandler} defaultChecked={setDefaultImmigrationStatusId(1)} checked={setDefaultImmigrationStatusId(1)}/>
<label htmlFor="citizen">{CitizenshipType.Citizen}</label>
<p/>
<input type="radio" name="citizenship" defaultValue="2" id="nonCitizen" onChange={radioHandler} defaultChecked={setDefaultImmigrationStatusId(2)} checked={setDefaultImmigrationStatusId(2)}/>
<label htmlFor="nonCitizen">{CitizenshipType.NonCitizen}</label>
<p/>
<input type="radio" name="citizenship" defaultValue="3" id="resident" onChange={radioHandler2}defaultChecked={setDefaultImmigrationStatusId(3)} checked={setDefaultImmigrationStatusId(3)}/>
<label htmlFor="resident"> {CitizenshipType.Resident}</label>
<p/>
<input type="radio" name="citizenship" defaultValue="4" id="other" onChange={radioHandler3} defaultChecked={setDefaultImmigrationStatusId(4)} checked={setDefaultImmigrationStatusId(4)}/>
<label htmlFor="other"> {CitizenshipType.Other}</label>
<p/>
</fieldset>
<div>
{(dropdownState1.open || dropdownState2.open) && (
<h2>Citizenship extra document</h2>
)}
</div>
<fieldset className={classes.control}>
{dropdownState1.open && (
<>
<div>You must enter either USCIS or A-Number</div>
<div className={classes.regions}>
<label className={classes.label}>Document type (if any):</label>
<select className={classes.combo} onChange={event => setExtraDocument(event.target.value)} id="extraDocumentId" name="extraDocumentId">
{extradocuments.map(extradocument => <option key={extradocument.documentTypeId} value={extradocument.documentTypeId}>{extradocument.description}</option>)}
</select>
</div>
<label className={classes.label}>Document Number</label>
<input className={classes.input} type="text" id="documentNumber" name="documentNumber" />
</>
)}
{dropdownState2.open && (
<>
<div>You must enter one of these documents and the expiration date of the work authorization (if any)</div>
<div className={classes.regions}>
<label className={classes.label}>Document type (if any):</label>
<select className={classes.combo} onChange={event => setExtraDocument(event.target.value)} id="extraDocumentId" name="extraDocumentId">
{extradocuments.map(extradocument => <option key={extradocument.documentTypeId} value={extradocument.documentTypeId}>{extradocument.description}</option>)}
</select>
</div>
<label className={classes.label}>Document Number</label>
<input className={classes.input} type="text" id="documentNumber" name="documentNumber" />
</>
)}
</fieldset>
<div>(*) Marked fields are mandatory</div>
<div>
{/* <button className={classes.button} type="button" onClick={formSubmit}>Save</button> */}
<button className={classes.button} type="button">Cancel</button>
</div>
</form>
</div>
);
}