devops/encoach_frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Changed from employment to position for Corporate accounts

Browse Source
This commit is contained in:
Tiago Ribeiro
2023-11-28 08:21:00 +00:00
parent f354a4f4fe
commit c90234cefc
5 changed files with 134 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/pages/(admin)/Lists/UserList.tsx
View File

@@ -242,14 +242,15 @@ export default function UserList({user, filter}: {user: User; filter?: (user: Us
cell: (info) => info.getValue() || "Not available",
enableSorting: true,
}),
columnHelper.accessor("demographicInformation.employment", {
columnHelper.accessor((x) => (x.type === "corporate" ? x.demographicInformation?.position : x.demographicInformation?.employment), {
id: "employment",
header: (
<button className="flex gap-2 items-center" onClick={() => setSorter((prev) => selectSorter(prev, "employment"))}>
<span>Employment</span>
<span>Employment/Position</span>
<SorterArrow name="employment" />
</button>
) as any,
cell: (info) => capitalize(info.getValue()) || "Not available",
cell: (info) => (info.row.original.type === "corporate" ? info.getValue() : capitalize(info.getValue())) || "Not available",
enableSorting: true,
}),
columnHelper.accessor("demographicInformation.gender", {
@@ -419,13 +420,14 @@ export default function UserList({user, filter}: {user: User; filter?: (user: Us
}
if (sorter === "employment" || sorter === reverseString("employment")) {
if (!a.demographicInformation?.employment && b.demographicInformation?.employment) return sorter === "employment" ? -1 : 1;
if (a.demographicInformation?.employment && !b.demographicInformation?.employment) return sorter === "employment" ? 1 : -1;
if (!a.demographicInformation?.employment && !b.demographicInformation?.employment) return 0;
const aSortingItem = a.type === "corporate" ? a.demographicInformation?.position : a.demographicInformation?.employment;
const bSortingItem = b.type === "corporate" ? b.demographicInformation?.position : b.demographicInformation?.employment;
return sorter === "employment"
? a.demographicInformation!.employment.localeCompare(b.demographicInformation!.employment)
: b.demographicInformation!.employment.localeCompare(a.demographicInformation!.employment);
if (!aSortingItem && bSortingItem) return sorter === "employment" ? -1 : 1;
if (aSortingItem && !bSortingItem) return sorter === "employment" ? 1 : -1;
if (!aSortingItem && !bSortingItem) return 0;
return sorter === "employment" ? aSortingItem!.localeCompare(bSortingItem!) : bSortingItem!.localeCompare(aSortingItem!);
}
if (sorter === "gender" || sorter === reverseString("gender")) {

68
src/pages/profile.tsx
View File

@@ -63,6 +63,7 @@ export default function Home() {
const [phone, setPhone] = useState<string>();
const [gender, setGender] = useState<Gender>();
const [employment, setEmployment] = useState<EmploymentStatus>();
const [position, setPosition] = useState<string>();
const profilePictureInput = useRef(null);
@@ -86,7 +87,8 @@ export default function Home() {
setCountry(user.demographicInformation?.country);
setPhone(user.demographicInformation?.phone);
setGender(user.demographicInformation?.gender);
setEmployment(user.demographicInformation?.employment);
setEmployment(user.type === "corporate" ? undefined : user.demographicInformation?.employment);
setPosition(user.type === "corporate" ? user.demographicInformation?.position : undefined);
}
}, [user]);
@@ -135,7 +137,8 @@ export default function Home() {
demographicInformation: {
phone,
country,
employment,
employment: user?.type === "corporate" ? undefined : employment,
position: user?.type === "corporate" ? position : undefined,
gender,
},
});
@@ -247,30 +250,43 @@ export default function Home() {
/>
</div>
<div className="flex flex-col md:flex-row gap-8 w-full">
<div className="relative flex flex-col gap-3 w-full">
<label className="font-normal text-base text-mti-gray-dim">Employment Status *</label>
<RadioGroup
value={employment}
onChange={setEmployment}
className="grid grid-cols-2 items-center gap-4 place-items-center">
{EMPLOYMENT_STATUS.map(({status, label}) => (
<RadioGroup.Option value={status} key={status}>
{({checked}) => (
<span
className={clsx(
"px-6 py-4 w-40 md:w-48 flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
"transition duration-300 ease-in-out",
!checked
? "bg-white border-mti-gray-platinum"
: "bg-mti-purple-light border-mti-purple-dark text-white",
)}>
{label}
</span>
)}
</RadioGroup.Option>
))}
</RadioGroup>
</div>
{user.type === "corporate" && (
<Input
name="position"
onChange={setPosition}
defaultValue={position}
type="text"
label="Position"
placeholder="CEO, Head of Marketing..."
required
/>
)}
{user.type !== "corporate" && (
<div className="relative flex flex-col gap-3 w-full">
<label className="font-normal text-base text-mti-gray-dim">Employment Status *</label>
<RadioGroup
value={employment}
onChange={setEmployment}
className="grid grid-cols-2 items-center gap-4 place-items-center">
{EMPLOYMENT_STATUS.map(({status, label}) => (
<RadioGroup.Option value={status} key={status}>
{({checked}) => (
<span
className={clsx(
"px-6 py-4 w-40 md:w-48 flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
"transition duration-300 ease-in-out",
!checked
? "bg-white border-mti-gray-platinum"
: "bg-mti-purple-light border-mti-purple-dark text-white",
)}>
{label}
</span>
)}
</RadioGroup.Option>
))}
</RadioGroup>
</div>
)}
<div className="flex flex-col gap-8 w-full">
<div className="relative flex flex-col gap-3 w-full">
<label className="font-normal text-base text-mti-gray-dim">Gender *</label>