Skip to content

Commit

Permalink
feat: adjust people table
Browse files Browse the repository at this point in the history
  • Loading branch information
@r1skz3ro
r1skz3ro committed Jul 31, 2024
1 parent 57a5dfa commit 29d86ba
Show file tree
Hide file tree
Showing 7 changed files with 145 additions and 83 deletions.
4 changes: 3 additions & 1 deletion frontend/src/components/pages/People/Modules/PeopleTable/PeopleTable.interface.ts
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
import { Employee } from '../../People.interface';
import { Option } from '@app/types/common';
import { Employee, PeopleStatus } from '../../People.interface';

export interface PeopleTableProps {
people: Employee[];
currentTab?: Option<keyof typeof PeopleStatus>;
}
198 changes: 129 additions & 69 deletions frontend/src/components/pages/People/Modules/PeopleTable/PeopleTable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,39 +7,74 @@ import Link from 'next/link';
import { employeeMenuOptions } from '../../People.utils';
import { PeopleTableProps } from './PeopleTable.interface';
import { Avatar } from '@app/components/common/Avatar';
import { getInitials } from '@app/utils';
import { generateClassNames, getInitials } from '@app/utils';
import { formatDate } from '@app/utils';
import { PeopleStatus } from '../../People.interface';
import { Button } from '@app/components/common/Button';

export const PeopleTable: FC<PeopleTableProps> = ({ people, currentTab }) => {
const draft = currentTab?.id === PeopleStatus.drafts;
const deactivated = currentTab?.id === PeopleStatus.deactivated;
const active = currentTab?.id === PeopleStatus.active;

export const PeopleTable: FC<PeopleTableProps> = ({ people }) => {
return (
<div className="flow-root">
<div className="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
<div className="inline-block w-full py-2 align-middle sm:px-6 lg:px-8">
<table className="min-w-full divide-y divide-navy-200 border-b border-navy-200">
<thead className="text-left uppercase text-navy-500">
<tr>
<th scope="col" className="py-3.5 pl-4 pr-3 text-xs font-medium sm:pl-4">
<th
scope="col"
className={generateClassNames('py-3.5 pl-4 pr-3 text-xs font-medium sm:pl-4', {
'w-[400px]': deactivated,
})}
>
Employee
</th>
<th scope="col" className="px-3 py-5 text-xs font-medium">
<th
scope="col"
className={generateClassNames('px-3 py-5 text-xs font-medium', {
'w-[320px]': deactivated,
})}
>
Ladder
</th>
<th scope="col" className="w-[160px] px-3 py-5 text-right text-xs font-medium">
<th
scope="col"
className={generateClassNames('w-[160px] px-3 py-5 text-right text-xs font-medium', {
'w-[320px]': deactivated,
})}
>
Current Band
</th>
<th scope="col" className="w-[160px] px-3 py-5 text-right text-xs font-medium">
Active Goal
</th>
<th scope="col" className="w-[248px] px-3 py-5 text-center text-xs font-medium">
Goal Progress
</th>
<th scope="col" className="w-[160px] px-3 py-5 text-center text-xs font-medium">
Pending actions
</th>
<th scope="col" className="w-[160px] px-3 py-5 text-center text-xs font-medium">
Last activity date
</th>
<th scope="col" className="relative px-4 py-3.5 sm:pr-0">
{draft && (
<th scope="col" className="w-[160px] py-5 pl-14 pr-3 text-left text-xs font-medium">
Action
</th>
)}
{active && (
<>
<th scope="col" className="w-[160px] px-3 py-5 text-right text-xs font-medium">
Active Goal
</th>
<th scope="col" className="w-[248px] px-3 py-5 text-center text-xs font-medium">
Goal Progress
</th>
<th scope="col" className="w-[160px] px-3 py-5 text-center text-xs font-medium">
Pending actions
</th>
<th scope="col" className="w-[160px] px-3 py-5 text-center text-xs font-medium">
Last activity date
</th>
</>
)}
<th
scope="col"
className={generateClassNames('relative px-4 py-3.5 sm:pr-0', {
'w-[320px]': deactivated,
})}
>
<span className="sr-only">Edit</span>
</th>
</tr>
Expand Down Expand Up @@ -80,61 +115,86 @@ export const PeopleTable: FC<PeopleTableProps> = ({ people }) => {
))}
</div>
</td>
<td className="text-gray-500 whitespace-nowrap px-3 py-5 text-sm">
<div className="flex flex-col items-end gap-y-4">
{person?.laddersDetails?.map((ladder) => (
<div key={ladder.ladderName} className="mr-2 h-4 w-4 text-navy-700">
{ladder?.activeGoal && <CheckMarkIcon className="text-green-600" width={20} height={20} />}
{active && (
<td className="text-gray-500 whitespace-nowrap px-3 py-5 text-sm">
<div className="flex flex-col items-end gap-y-4">
{person?.laddersDetails?.map((ladder) => (
<div key={ladder.ladderName} className="mr-2 h-4 w-4 text-navy-700">
{ladder?.activeGoal && <CheckMarkIcon className="text-green-600" width={20} height={20} />}
</div>
))}
</div>
</td>
)}
{draft && (
<td className="text-gray-500 whitespace-nowrap py-5 pl-14 pr-10 text-sm">
<div className="flex">
<Button variant="border" styleType="natural" className="mr-4">
Resume
</Button>
<Button variant="border" styleType="natural">
Activate employee
</Button>
</div>
</td>
)}
{active && (
<>
<td className="text-gray-500 whitespace-nowrap px-10 py-5 text-sm">
<div className="flex flex-col gap-y-4">
{person?.laddersDetails?.map((ladder) => (
<div key={ladder.ladderName} className="flex h-4 items-center text-navy-700">
{ladder.activeGoal && (
<>
<div className="mr-3 w-full rounded-full bg-navy-300">
<div
className="h-2 rounded-full bg-blue-800"
style={{ width: `${ladder.goalProgress}%` }}
/>
</div>
<Typography variant="body-s/medium" className="text-navy-600">
{ladder.goalProgress}%
</Typography>
</>
)}
</div>
))}
</div>
))}
</div>
</td>
<td className="text-gray-500 whitespace-nowrap px-10 py-5 text-sm">
<div className="flex flex-col gap-y-4">
{person?.laddersDetails?.map((ladder) => (
<div key={ladder.ladderName} className="flex h-4 items-center text-navy-700">
{ladder.activeGoal && (
<>
<div className="mr-3 w-full rounded-full bg-navy-300">
<div
className="h-2 rounded-full bg-blue-800"
style={{ width: `${ladder.goalProgress}%` }}
/>
</td>
<td className="text-gray-500 flex flex-col items-center whitespace-nowrap px-3 py-8 text-sm">
{person?.laddersDetails?.map((details) => (
<div
key={details.ladderName}
className="flex h-8 w-8 items-center justify-center text-navy-700"
>
{details.activeGoal && (
<div className="flex h-7 w-7 items-center justify-center rounded-full bg-blue-800">
<Typography variant="body-s/semibold" className="text-white">
{details.pendingActions}
</Typography>
</div>
<Typography variant="body-s/medium" className="text-navy-600">
{ladder.goalProgress}%
)}
</div>
))}
</td>
<td className="text-gray-500 whitespace-nowrap px-10 py-5 text-sm">
{person?.laddersDetails?.map((details) => (
<div key={details.ladderName} className="flex h-8 w-8 items-center">
{details.lastActivityDate && (
<Typography variant="body-s/regular" className="text-navy-700">
{formatDate(details.lastActivityDate)}
</Typography>
</>
)}
</div>
))}
</div>
</td>
<td className="text-gray-500 flex flex-col items-center whitespace-nowrap px-3 py-8 text-sm">
{person?.laddersDetails?.map((details) => (
<div key={details.ladderName} className="flex h-8 w-8 items-center justify-center text-navy-700">
{details.activeGoal && (
<div className="flex h-7 w-7 items-center justify-center rounded-full bg-blue-800">
<Typography variant="body-s/semibold" className="text-white">
{details.pendingActions}
</Typography>
)}
</div>
)}
</div>
))}
</td>
<td className="text-gray-500 whitespace-nowrap px-10 py-5 text-sm">
{person?.laddersDetails?.map((details) => (
<div key={details.ladderName} className="flex h-8 w-8 items-center">
{details.lastActivityDate && (
<Typography variant="body-s/regular" className="text-navy-700">
{formatDate(details.lastActivityDate)}
</Typography>
)}
</div>
))}
</td>
<td className="relative whitespace-nowrap py-5 text-sm font-medium">
))}
</td>
</>
)}
<td
className={generateClassNames('relative whitespace-nowrap py-5 text-sm', {
'flex justify-end': deactivated,
})}
>
{/* TODO: Create new component Dropdown Menu */}
<Menu as="div" className="relative">
<MenuButton>
Expand Down
10 changes: 5 additions & 5 deletions frontend/src/components/pages/People/People.hook.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,10 +18,10 @@ export const usePeople = () => {
},
});

const [tab, setTab] = useState<Option | undefined>();
const [tab, setTab] = useState<Option<keyof typeof PeopleStatus> | undefined>();
const [fetchedPeople, setFetchedPeople] = useState<PeopleDetails>();
const [filteredPeople, setFilteredPeople] = useState<Employee[]>([]);
const [tabsData, setTabsData] = useState<Option[]>([]);
const [tabsData, setTabsData] = useState<Option<keyof typeof PeopleStatus>[]>([]);
const { setParams } = useQueryParams();
const values = form.watch();

Expand All @@ -36,9 +36,9 @@ export const usePeople = () => {
// INFO: set all available tabs
useEffect(() => {
if (fetchedPeople) {
const tabs: Option[] = [
const tabs: Option<keyof typeof PeopleStatus>[] = [
{ name: `${PeopleStatus.active} (${fetchedPeople.active})`, id: PeopleStatus.active },
{ name: `${PeopleStatus.draft} (${fetchedPeople.draft})`, id: PeopleStatus.draft },
{ name: `${PeopleStatus.drafts} (${fetchedPeople.draft})`, id: PeopleStatus.drafts },
{ name: `${PeopleStatus.deactivated} (${fetchedPeople.deactivated})`, id: PeopleStatus.deactivated },
];
setTabsData(tabs);
Expand All @@ -60,7 +60,7 @@ export const usePeople = () => {
// INFO: set people based on filters
useEffect(() => {
const filteredPeople = fetchedPeople?.results.filter(
(person) => person.status.toLocaleLowerCase() === tab?.id.toLocaleLowerCase(),
(person) => person?.status?.toLocaleLowerCase() === tab?.id.toLocaleLowerCase(),
);

if (filteredPeople) {
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/pages/People/People.interface.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ export interface PeopleTableForm {

export const PeopleStatus = {
active: 'active',
draft: 'draft',
drafts: 'drafts',
deactivated: 'deactivated',
} as const;

Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/pages/People/People.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ export const People = () => {
/>
</div>
</div>
<PeopleTable people={filteredPeople} />
<PeopleTable currentTab={tab} people={filteredPeople} />
</div>
</div>
</FormProvider>
Expand Down
8 changes: 4 additions & 4 deletions frontend/src/components/pages/People/People.utils.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -141,7 +141,7 @@ export const PEOPLE_DETAILS = {
pendingActions: 2,
},
],
status: PeopleStatus.draft,
status: PeopleStatus.drafts,
},
{
id: 33,
Expand All @@ -156,7 +156,7 @@ export const PEOPLE_DETAILS = {
pendingActions: 4,
},
],
status: PeopleStatus.draft,
status: PeopleStatus.drafts,
},
{
id: 433,
Expand All @@ -171,7 +171,7 @@ export const PEOPLE_DETAILS = {
pendingActions: 2,
},
],
status: PeopleStatus.draft,
status: PeopleStatus.drafts,
},
{
id: 42243,
Expand All @@ -186,7 +186,7 @@ export const PEOPLE_DETAILS = {
pendingActions: 2,
},
],
status: PeopleStatus.draft,
status: PeopleStatus.drafts,
},
],
active: 11,
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/types/common.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ export interface Point {
y: number;
}

export interface Option {
id: string;
export interface Option<T extends string = string> {
id: T;
name: string;
}

0 comments on commit 29d86ba

Please sign in to comment.