msb-public
/
tech-interview-handbook
mirror of https://github.com/yangshun/tech-interview-handbook
2
1
Code Issues Projects Releases Wiki Activity

[resume][refactor] tweak resume submission UI

Browse Source
pull/511/head
Yangshun Tay 2 years ago
parent 80fd274662
commit b161df0b70
3 changed files with 217 additions and 213 deletions
Show Stats Download Patch File Download Diff File

29
apps/portal/src/components/resumes/submit-form/ResumeSubmissionGuidelines.tsx
Unescape View File

@ -0,0 +1,29 @@
export default function ResumeSubmissionGuidelines() {
return (
<div className="rounded-lg border border-slate-200 bg-slate-50 p-5">
<div className="prose text-sm">
<h2 className="mt-0 text-xl font-medium">Submission Guidelines</h2>
<p>
Before submitting your resume for review, please review and
acknowledge our{' '}
<span className="font-medium">submission guidelines</span> stated
below.
</p>
<ul>
<li>
Ensure that you do not divulge any of your{' '}
<span className="font-medium">personal particulars</span>.
</li>
<li>
Ensure that you do not divulge any{' '}
<span className="font-medium">
company's proprietary and confidential information
</span>
.
</li>
<li>Proofread your resumes for grammatical/spelling errors.</li>
</ul>
</div>
</div>
);
}

29
apps/portal/src/components/resumes/submit-form/SubmissionGuidelines.tsx
Unescape View File

@ -1,29 +0,0 @@
export default function SubmissionGuidelines() {
return (
<div className="text-left text-sm text-slate-700">
<h2 className="mb-2 text-xl font-medium">Submission Guidelines</h2>
<p>
Before you submit, please review and acknowledge our
<span className="font-bold"> submission guidelines </span>
stated below.
</p>
<p>
<span className="text-lg font-bold">• </span>
Ensure that you do not divulge any of your{' '}
<span className="font-bold">personal particulars</span>.
</p>
<p>
<span className="text-lg font-bold">• </span>
Ensure that you do not divulge any{' '}
<span className="font-bold">
company's proprietary and confidential information
</span>
.
</p>
<p>
<span className="text-lg font-bold">• </span>
Proof-read your resumes to look for grammatical/spelling errors.
</p>
</div>
);
}

372
apps/portal/src/pages/resumes/submit.tsx
Unescape View File

@ -20,7 +20,8 @@ import {
} from '@tih/ui'; } from '@tih/ui';
import { useGoogleAnalytics } from '~/components/global/GoogleAnalytics'; import { useGoogleAnalytics } from '~/components/global/GoogleAnalytics';
import SubmissionGuidelines from '~/components/resumes/submit-form/SubmissionGuidelines'; import ResumeSubmissionGuidelines from '~/components/resumes/submit-form/ResumeSubmissionGuidelines';
import Container from '~/components/shared/Container';
import loginPageHref from '~/components/shared/loginPageHref'; import loginPageHref from '~/components/shared/loginPageHref';
import { RESUME_STORAGE_KEY } from '~/constants/file-storage-keys'; import { RESUME_STORAGE_KEY } from '~/constants/file-storage-keys';
@ -239,203 +240,206 @@ export default function SubmitResumeForm({
<Head> <Head>
<title>Upload a Resume</title> <title>Upload a Resume</title>
</Head> </Head>
{status === 'loading' && ( <Container variant="xs">
<div className="w-full pt-4"> {status === 'loading' && (
{' '} <div className="w-full pt-4">
<Spinner display="block" size="lg" />{' '} <Spinner display="block" size="lg" />
</div> </div>
)} )}
{status === 'authenticated' && ( {status === 'authenticated' && (
<main className="flex-1"> <main className="flex-1">
<section <section
aria-labelledby="primary-heading" aria-labelledby="primary-heading"
className="flex h-full min-w-0 flex-1 flex-col lg:order-last"> className="flex h-full min-w-0 flex-1 flex-col lg:order-last">
{/* Reset Dialog component */} {/* Reset Dialog component */}
<Dialog <Dialog
isShown={isDialogShown} isShown={isDialogShown}
primaryButton={ primaryButton={
<Button <Button
display="block" display="block"
label="OK" label="OK"
variant="primary" variant="primary"
onClick={onClickResetDialog} onClick={onClickResetDialog}
/> />
}
secondaryButton={
<Button
display="block"
label="Cancel"
variant="tertiary"
onClick={() => setIsDialogShown(false)}
/>
}
title={
isNewForm
? 'Are you sure you want to clear?'
: 'Are you sure you want to leave?'
}
onClose={() => setIsDialogShown(false)}>
Note that your current input will not be saved!
</Dialog>
<form
className="mt-8 w-full max-w-screen-lg space-y-6 self-center rounded-lg bg-white p-10 shadow-lg"
onSubmit={handleSubmit(onSubmit)}>
<h1 className="mb-4 text-center text-2xl font-semibold">
{isNewForm ? 'Upload a resume' : 'Update details'}
</h1>
{/* Title Section */}
<TextInput
{...(register('title', { required: true }), {})}
defaultValue={initFormDetails?.title}
disabled={isLoading}
errorMessage={
errors.title?.message != null
? 'Title cannot be empty'
: undefined
} }
label="Title" secondaryButton={
placeholder={TITLE_PLACEHOLDER} <Button
required={true} display="block"
onChange={(val) => onValueChange('title', val)} label="Cancel"
/> variant="tertiary"
<div className="flex flex-wrap gap-6"> onClick={() => setIsDialogShown(false)}
<Select />
{...register('role', { required: true })} }
defaultValue={undefined} title={
isNewForm
? 'Are you sure you want to clear?'
: 'Are you sure you want to leave?'
}
onClose={() => setIsDialogShown(false)}>
Note that your current input will not be saved!
</Dialog>
<form
className="w-full space-y-6 self-center bg-white p-10 md:my-8 md:rounded-lg md:shadow-lg"
onSubmit={handleSubmit(onSubmit)}>
<h1 className="mb-8 text-2xl font-bold text-slate-900 sm:text-center sm:text-4xl">
{isNewForm ? 'Upload a resume' : 'Update details'}
</h1>
{/* Title Section */}
<TextInput
{...(register('title', { required: true }), {})}
defaultValue={initFormDetails?.title}
disabled={isLoading} disabled={isLoading}
label="Role" errorMessage={
options={ROLES} errors.title?.message != null
placeholder=" " ? 'Title cannot be empty'
: undefined
}
label="Title"
placeholder={TITLE_PLACEHOLDER}
required={true} required={true}
onChange={(val) => onValueChange('role', val)} onChange={(val) => onValueChange('title', val)}
/> />
<div className="flex flex-wrap gap-6">
<Select
{...register('role', { required: true })}
defaultValue={undefined}
disabled={isLoading}
label="Role"
options={ROLES}
placeholder=" "
required={true}
onChange={(val) => onValueChange('role', val)}
/>
<Select
{...register('experience', { required: true })}
disabled={isLoading}
label="Experience Level"
options={EXPERIENCES}
placeholder=" "
required={true}
onChange={(val) => onValueChange('experience', val)}
/>
</div>
<Select <Select
{...register('experience', { required: true })} {...register('location', { required: true })}
disabled={isLoading} disabled={isLoading}
label="Experience Level" label="Location"
options={EXPERIENCES} options={LOCATIONS}
placeholder=" " placeholder=" "
required={true} required={true}
onChange={(val) => onValueChange('experience', val)} onChange={(val) => onValueChange('location', val)}
/> />
</div> {/* Upload resume form */}
<Select {isNewForm && (
{...register('location', { required: true })} <div className="space-y-2">
disabled={isLoading} <p className="text-sm font-medium text-slate-700">
label="Location" Upload resume (PDF format)
options={LOCATIONS} <span aria-hidden="true" className="text-danger-500">
placeholder=" " {' '}
required={true} *
onChange={(val) => onValueChange('location', val)}
/>
{/* Upload resume form */}
{isNewForm && (
<div className="space-y-2">
<p className="text-sm font-medium text-slate-700">
Upload resume (PDF format)
<span aria-hidden="true" className="text-danger-500">
{' '}
*
</span>
</p>
<div
{...getRootProps()}
className={clsx(
fileUploadError
? 'border-danger-600'
: 'border-slate-300',
'cursor-pointer flex-col items-center space-y-1 rounded-md border-2 border-dashed bg-slate-100 py-4 px-4 text-center',
)}>
<input
{...register('file', { required: true })}
{...getInputProps()}
accept="application/pdf"
className="sr-only"
disabled={isLoading}
id="file-upload"
name="file-upload"
type="file"
/>
{resumeFile == null ? (
<ArrowUpCircleIcon className="text-primary-500 m-auto h-10 w-10" />
) : (
<p
className="hover:text-primary-600 cursor-pointer underline underline-offset-1"
onClick={onClickDownload}>
{resumeFile.name}
</p>
)}
<label
className="focus-within:ring-primary-500 cursor-pointer text-sm focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2"
htmlFor="file-upload">
<span className="font-medium">Drop file here</span>
<span className="mr-1 ml-1 font-light">or</span>
<span className="text-primary-600 hover:text-primary-400 font-medium">
{resumeFile == null ? 'Select file' : 'Replace file'}
</span> </span>
</label>
<p className="text-xs text-slate-500">
PDF up to {FILE_SIZE_LIMIT_MB}MB
</p> </p>
<div
{...getRootProps()}
className={clsx(
fileUploadError
? 'border-danger-600'
: 'border-slate-300',
'cursor-pointer flex-col items-center space-y-1 rounded-md border-2 border-dashed bg-slate-50 py-4 px-4 text-center',
)}>
<input
{...register('file', { required: true })}
{...getInputProps()}
accept="application/pdf"
className="sr-only"
disabled={isLoading}
id="file-upload"
name="file-upload"
type="file"
/>
{resumeFile == null ? (
<ArrowUpCircleIcon className="text-primary-500 m-auto h-10 w-10" />
) : (
<p
className="hover:text-primary-600 cursor-pointer underline underline-offset-1"
onClick={onClickDownload}>
{resumeFile.name}
</p>
)}
<label
className="focus-within:ring-primary-500 cursor-pointer text-sm focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2"
htmlFor="file-upload">
<span className="font-medium">Drop file here</span>
<span className="mr-1 ml-1 font-light">or</span>
<span className="text-primary-600 hover:text-primary-400 font-medium">
{resumeFile == null ? 'Select file' : 'Replace file'}
</span>
</label>
<p className="text-xs text-slate-500">
PDF up to {FILE_SIZE_LIMIT_MB}MB
</p>
</div>
{fileUploadError && (
<p className="text-danger-600 text-sm">
{fileUploadError}
</p>
)}
</div> </div>
{fileUploadError && ( )}
<p className="text-danger-600 text-sm">{fileUploadError}</p> {/* Additional Info Section */}
)} <TextArea
</div> {...(register('additionalInfo'),
)} { defaultValue: initFormDetails?.additionalInfo })}
{/* Additional Info Section */}
<TextArea
{...(register('additionalInfo'),
{ defaultValue: initFormDetails?.additionalInfo })}
disabled={isLoading}
label="Additional Information"
placeholder={ADDITIONAL_INFO_PLACEHOLDER}
onChange={(val) => onValueChange('additionalInfo', val)}
/>
{/* Submission Guidelines */}
{isNewForm && (
<>
<SubmissionGuidelines />
<CheckboxInput
{...register('isChecked', { required: true })}
disabled={isLoading}
errorMessage={
!errors.file && errors.isChecked
? 'Please tick the checkbox after reading through the guidelines.'
: undefined
}
label="I have read and will follow the guidelines stated."
onChange={(val) => {
if (val) {
clearErrors('isChecked');
}
setValue('isChecked', val);
}}
/>
</>
)}
{/* Clear and Submit Buttons */}
<div className="flex justify-end gap-4">
<Button
addonPosition="start"
disabled={isLoading}
label={isNewForm ? 'Clear' : 'Cancel'}
variant="tertiary"
onClick={onClickClear}
/>
<Button
addonPosition="start"
disabled={isLoading} disabled={isLoading}
isLoading={isLoading} label="Additional Information"
label="Submit" placeholder={ADDITIONAL_INFO_PLACEHOLDER}
type="submit" onChange={(val) => onValueChange('additionalInfo', val)}
variant="primary"
/> />
</div> {/* Submission Guidelines */}
</form> {isNewForm && (
</section> <div className="space-y-4">
</main> <ResumeSubmissionGuidelines />
)} <CheckboxInput
{...register('isChecked', { required: true })}
disabled={isLoading}
errorMessage={
!errors.file && errors.isChecked
? 'Please tick the checkbox after reading through the guidelines.'
: undefined
}
label="I have read and followed the above guidelines."
onChange={(val) => {
if (val) {
clearErrors('isChecked');
}
setValue('isChecked', val);
}}
/>
</div>
)}
{/* Clear and Submit Buttons */}
<div className="flex justify-end gap-4">
<Button
addonPosition="start"
disabled={isLoading}
label={isNewForm ? 'Clear' : 'Cancel'}
variant="tertiary"
onClick={onClickClear}
/>
<Button
addonPosition="start"
disabled={isLoading}
isLoading={isLoading}
label="Submit"
type="submit"
variant="primary"
/>
</div>
</form>
</section>
</main>
)}
</Container>
</> </>
); );
} }

Write Preview
Loading…
Cancel
Save