Merge pull request #1982 from ever-co/develop

Release

apps/web/components/ui/data-table.tsx

@@ -11,7 +11,7 @@ import {
 	getFilteredRowModel,
 	getPaginationRowModel,
 	getSortedRowModel,
-	useReactTable,
+	useReactTable
 } from "@tanstack/react-table"
 
 import {

apps/web/lib/features/team-members-block-view.tsx

@@ -2,7 +2,9 @@ import * as React from 'react';
 import { OT_Member } from '@app/interfaces';
 import { Transition } from '@headlessui/react';
 import { UserTeamBlock } from './team/user-team-block';
-import UserTeamCardSkeletonCard from '@components/shared/skeleton/UserTeamCardSkeleton';
+import { useRecoilValue } from 'recoil';
+import { taskBlockFilterState } from '@app/stores/task-filter';
+import { UserTeamCardSkeleton } from './team/user-team-card';
 
 interface Props {
 	teamMembers: OT_Member[];
@@ -11,7 +13,31 @@ interface Props {
 	teamsFetching: boolean;
 }
 
-const TeamMembersBlockView: React.FC<Props> = ({ teamMembers: members, publicTeam = false, currentUser }) => {
+const TeamMembersBlockView: React.FC<Props> = ({
+	teamMembers: members,
+	publicTeam = false,
+	currentUser,
+	teamsFetching
+}) => {
+	const activeFilter = useRecoilValue(taskBlockFilterState);
+
+	let emptyMessage = '';
+
+	switch (activeFilter) {
+		case 'online':
+			emptyMessage = 'There are no users online.';
+			break;
+		case 'running':
+			emptyMessage = 'No users are currently working.';
+			break;
+		case 'pause':
+			emptyMessage = 'No users are paused work at the moment.';
+			break;
+		case 'idle':
+			emptyMessage = 'No users are idle right now.';
+			break;
+	}
+
 	return (
 		<div className="mt-7">
 			{/* Current authenticated user members */}
@@ -46,25 +72,28 @@ const TeamMembersBlockView: React.FC<Props> = ({ teamMembers: members, publicTea
 					);
 				})}
 			</div>
-			<div>
-				<Transition
-					show={members.length < 1}
-					enter="transition-opacity duration-75"
-					enterFrom="opacity-0"
-					enterTo="opacity-100"
-					leave="transition-opacity duration-150"
-					leaveFrom="opacity-100"
-					leaveTo="opacity-0"
-				>
-					{new Array(3).fill(0).map((_, i) => {
-						return (
-							<div key={i} className="mt-3">
-								<UserTeamCardSkeletonCard />
-							</div>
-						);
-					})}
-				</Transition>
-			</div>
+			<Transition
+				show={teamsFetching}
+				enter="transition-opacity duration-75"
+				enterFrom="opacity-0"
+				enterTo="opacity-100"
+				leave="transition-opacity duration-150"
+				leaveFrom="opacity-100"
+				leaveTo="opacity-0"
+			>
+				{[1, 2].map((_, i) => {
+					return (
+						<li key={i} className="mt-3">
+							<UserTeamCardSkeleton />
+						</li>
+					);
+				})}
+			</Transition>
+			{members.length < 1 && !teamsFetching && (
+				<div className="py-16 flex justify-center items-center">
+					<p className="text-lg">{emptyMessage}</p>
+				</div>
+			)}
 		</div>
 	);
 };

apps/web/lib/features/team-members.tsx

@@ -9,6 +9,7 @@ import { IssuesView } from '@app/constants';
 import TeamMembersBlockView from './team-members-block-view';
 import { useRecoilValue } from 'recoil';
 import { taskBlockFilterState } from '@app/stores/task-filter';
+import { OT_Member } from '@app/interfaces';
 
 type TeamMembersProps = {
 	publicTeam?: boolean;
@@ -21,9 +22,10 @@ export function TeamMembers({ publicTeam = false, kanbanView: view = IssuesView.
 	const { activeTeam } = useOrganizationTeams();
 	const { teamsFetching } = useOrganizationTeams();
 	const members = activeTeam?.members || [];
+	const orderedMembers = [...members].sort((a, b) => (sortByWorkStatus(a, b) ? -1 : 1));
 
 	const blockViewMembers =
-		activeFilter == 'all' ? members : members.filter((m) => m.timerStatus == activeFilter) || [];
+		activeFilter == 'all' ? orderedMembers : orderedMembers.filter((m) => m.timerStatus == activeFilter) || [];
 
 	const currentUser = members.find((m) => m.employee.userId === user?.id);
 	const $members = members.filter((member) => member.id !== currentUser?.id);
@@ -100,3 +102,12 @@ export function TeamMembers({ publicTeam = false, kanbanView: view = IssuesView.
 	}
 	return teamMembersView;
 }
+
+const sortByWorkStatus = (user_a: OT_Member, user_b: OT_Member) => {
+	return user_a.timerStatus == 'running' ||
+		(user_a.timerStatus == 'online' && user_b.timerStatus != 'running') ||
+		(user_a.timerStatus == 'pause' && user_b.timerStatus !== 'running' && user_b.timerStatus !== 'online') ||
+		(user_a.timerStatus == 'idle' && user_b.timerStatus == 'suspended')
+		? true
+		: false;
+};

apps/web/lib/features/team/user-team-table/user-team-table-header.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+
+function UserTeamTableHeader() {
+	return (
+		<div className="flex px-4 text-center items-center pt-4">
+			<p className="w-1/3 ">Name</p>
+			<p className="w-2/5 ">Task</p>
+			<p className="w-1/12 ">Worked on Task</p>
+			<p className="w-1/4 ">Estimate</p>
+			<p className="w-28 ">Action</p>
+		</div>
+	);
+}
+
+export default UserTeamTableHeader;

apps/web/pages/index.tsx

@@ -20,6 +20,7 @@ import { IssuesView } from '@app/constants';
 import { TableCellsIcon, QueueListIcon, Squares2X2Icon } from '@heroicons/react/24/solid';
 import { useNetworkState } from '@uidotdev/usehooks';
 import Offline from '@components/pages/offline';
+import UserTeamTableHeader from 'lib/features/team/user-team-table/user-team-table-header';
 
 function MainPage() {
 	const { t } = useTranslation();
@@ -95,6 +96,8 @@ function MainPage() {
 						<UserTeamCardHeader />
 					) : view === IssuesView.BLOCKS ? (
 						<UserTeamBlockHeader />
+					) : view === IssuesView.TABLE ? (
+						<UserTeamTableHeader />
 					) : null}
 				</Container>