[resumes][feat] enable edit resume form

pull/506/head
Keane Chan 3 years ago
parent 2e15db7255
commit 9f021dd57a
No known key found for this signature in database
GPG Key ID: 32718398E1E9F87C

@ -36,6 +36,8 @@ import {
import { trpc } from '~/utils/trpc'; import { trpc } from '~/utils/trpc';
import SubmitResumeForm from './submit'; import SubmitResumeForm from './submit';
import type { JobTitleType } from '../../components/shared/JobTitles';
import { getLabelForJobTitleType } from '../../components/shared/JobTitles';
export default function ResumeReviewPage() { export default function ResumeReviewPage() {
const ErrorPage = ( const ErrorPage = (
@ -200,9 +202,19 @@ export default function ResumeReviewPage() {
initFormDetails={{ initFormDetails={{
additionalInfo: detailsQuery.data.additionalInfo ?? '', additionalInfo: detailsQuery.data.additionalInfo ?? '',
experience: detailsQuery.data.experience, experience: detailsQuery.data.experience,
location: detailsQuery.data.locationId, location: {
id: detailsQuery.data.locationId,
label: detailsQuery.data.location.name,
value: detailsQuery.data.locationId,
},
resumeId: resumeId as string, resumeId: resumeId as string,
role: detailsQuery.data.role, role: {
id: detailsQuery.data.role,
label: getLabelForJobTitleType(
detailsQuery.data.role as JobTitleType,
),
value: detailsQuery.data.role,
},
title: detailsQuery.data.title, title: detailsQuery.data.title,
url: detailsQuery.data.url, url: detailsQuery.data.url,
}} }}

@ -9,6 +9,7 @@ import { useDropzone } from 'react-dropzone';
import type { SubmitHandler } from 'react-hook-form'; import type { SubmitHandler } from 'react-hook-form';
import { Controller, useForm } from 'react-hook-form'; import { Controller, useForm } from 'react-hook-form';
import { ArrowUpCircleIcon } from '@heroicons/react/24/outline'; import { ArrowUpCircleIcon } from '@heroicons/react/24/outline';
import type { TypeaheadOption } from '@tih/ui';
import { import {
Button, Button,
CheckboxInput, CheckboxInput,
@ -43,19 +44,20 @@ type IFormInput = {
experience: string; experience: string;
file: File; file: File;
isChecked: boolean; isChecked: boolean;
locationId: string; location: TypeaheadOption;
role: string; role: TypeaheadOption;
title: string; title: string;
}; };
type InputKeys = keyof IFormInput; type InputKeys = keyof IFormInput;
type TypeAheadKeys = keyof Pick<IFormInput, 'location' | 'role'>;
type InitFormDetails = { type InitFormDetails = {
additionalInfo?: string; additionalInfo?: string;
experience: string; experience: string;
location: string; location: TypeaheadOption;
resumeId: string; resumeId: string;
role: string; role: TypeaheadOption;
title: string; title: string;
url: string; url: string;
}; };
@ -97,8 +99,6 @@ export default function SubmitResumeForm({
additionalInfo: '', additionalInfo: '',
experience: '', experience: '',
isChecked: false, isChecked: false,
locationId: '',
role: '',
title: '', title: '',
...initFormDetails, ...initFormDetails,
}, },
@ -139,6 +139,11 @@ export default function SubmitResumeForm({
}, [router, status]); }, [router, status]);
const onSubmit: SubmitHandler<IFormInput> = async (data) => { const onSubmit: SubmitHandler<IFormInput> = async (data) => {
if (!isDirty) {
onClose();
return;
}
setIsLoading(true); setIsLoading(true);
let fileUrl = initFormDetails?.url ?? ''; let fileUrl = initFormDetails?.url ?? '';
@ -161,8 +166,8 @@ export default function SubmitResumeForm({
additionalInfo: data.additionalInfo, additionalInfo: data.additionalInfo,
experience: data.experience, experience: data.experience,
id: initFormDetails?.resumeId, id: initFormDetails?.resumeId,
locationId: data.locationId, locationId: data.location.value,
role: data.role, role: data.role.value,
title: data.title, title: data.title,
url: fileUrl, url: fileUrl,
}, },
@ -238,6 +243,13 @@ export default function SubmitResumeForm({
setValue(section, value.trim(), { shouldDirty: true }); setValue(section, value.trim(), { shouldDirty: true });
}; };
const onSelect = (section: TypeAheadKeys, option: TypeaheadOption | null) => {
if (option == null) {
return;
}
setValue(section, option, { shouldDirty: true });
};
return ( return (
<> <>
<Head> <Head>
@ -302,51 +314,43 @@ export default function SubmitResumeForm({
required={true} required={true}
onChange={(val) => onValueChange('title', val)} onChange={(val) => onValueChange('title', val)}
/> />
<div className="flex flex-wrap gap-6">
<Controller
control={control}
name="role"
render={() => (
<ResumeRoleTypeahead
disabled={isLoading}
required={true}
onSelect={(option) => {
if (option == null) {
return;
}
onValueChange('role', option.value);
}}
/>
)}
rules={{ required: true }}
/>
<Select
{...register('experience', { required: true })}
disabled={isLoading}
label="Experience Level"
options={EXPERIENCES}
placeholder=" "
required={true}
onChange={(val) => onValueChange('experience', val)}
/>
</div>
<Controller <Controller
control={control} control={control}
name="locationId" name="location"
render={() => ( render={({ field: { value } }) => (
<ResumeLocationTypeahead <ResumeLocationTypeahead
disabled={isLoading} disabled={isLoading}
placeholder="Select a location"
required={true} required={true}
onSelect={(option) => { value={value}
if (option == null) { onSelect={(option) => onSelect('location', option)}
return;
}
onValueChange('locationId', option.value);
}}
/> />
)} )}
rules={{ required: true }} rules={{ required: true }}
/> />
<Controller
control={control}
name="role"
render={({ field: { value } }) => (
<ResumeRoleTypeahead
disabled={isLoading}
placeholder="Select a role"
required={true}
value={value}
onSelect={(option) => onSelect('role', option)}
/>
)}
rules={{ required: true }}
/>
<Select
{...register('experience', { required: true })}
disabled={isLoading}
label="Experience Level"
options={EXPERIENCES}
placeholder=" "
required={true}
onChange={(val) => onValueChange('experience', val)}
/>
{/* Upload resume form */} {/* Upload resume form */}
{isNewForm && ( {isNewForm && (
<div className="space-y-2"> <div className="space-y-2">

Loading…
Cancel
Save