Merge pull request #1962 from ever-co/fix/blockView

Fix/block view

apps/web/lib/components/separator.tsx

@@ -7,8 +7,8 @@ export const VerticalSeparator = ({ className }: IClassName) => {
 
 export const HorizontalSeparator = ({ className }: IClassName) => {
 	return (
-		<div className="px-4 w-full">
-			<div className={clsxm('h-1 w-full border-t-[0.125rem] dark:border-l-[#FFFFFF14]', className)} />
+		<div className="px-2 w-full">
+			<div className={clsxm('h-1 w-full border-t-[0.125rem] dark:!border-t-[#FFFFFF14]', className)} />
 		</div>
 	);
 };

apps/web/lib/features/task/task-displays.tsx

@@ -9,9 +9,35 @@ type Props = {
 	taskTitleClassName?: string;
 	taskNumberClassName?: string;
 	dash?: boolean;
+	showSize?: boolean;
 };
 
-export function TaskNameInfoDisplay({ task, className, taskTitleClassName, taskNumberClassName, dash = false }: Props) {
+const taskSizeColor = {
+	'x-large': { color: 'text-red-700', short: 'XXL' },
+	large: { color: 'text-orange-700', short: 'XL' },
+	medium: { color: 'text-yellow-500', short: 'M' },
+	small: { color: 'text-blue-700', short: 'S' },
+	tiny: { color: 'text-blue-500', short: 'XS' }
+};
+
+export function TaskNameInfoDisplay({
+	task,
+	className,
+	taskTitleClassName,
+	taskNumberClassName,
+	dash = false,
+	showSize = false
+}: Props) {
+	const size =
+		task && task?.size && ['x-large', 'large', 'medium', 'small', 'tiny'].includes(task?.size.toLowerCase())
+			? task?.size.toLowerCase()
+			: 'medium';
+
+	// @ts-expect-error
+	const color: string = taskSizeColor[size].color;
+	// @ts-expect-error
+	const short: string = taskSizeColor[size].short;
+	console.log(task?.size);
 	return (
 		<Tooltip label={task?.title || ''} placement="top" enabled={(task?.title && task?.title.length > 60) || false}>
 			<span className="flex">
@@ -29,7 +55,8 @@ export function TaskNameInfoDisplay({ task, className, taskTitleClassName, taskN
 					<span className={clsxm('text-gray-500 mr-1 font-normal', taskNumberClassName)}>
 						#{task?.taskNumber} {dash && '-'}
 					</span>
-					<span>{task?.title.slice(0, 90)}</span>
+					{task?.title}
+					{showSize && <span className={clsxm(size && `${color}`)}>{size && '  ' + short}</span>}
 				</span>
 			</span>
 		</Tooltip>

apps/web/lib/features/task/task-times.tsx

@@ -64,7 +64,7 @@ function TimeInfo({
 		<>
 			{showDaily && (
 				<div className="flex items-center space-x-2 text-base font-normal">
-					<span className="text-[#7B8089]">{t('common.TODAY')}:</span>
+					<span className="text-[#7B8089] text-center">{t('common.TODAY')}:</span>
 					<Text>
 						{daily.h}h : {daily.m}m
 					</Text>
@@ -78,7 +78,7 @@ function TimeInfo({
 						// showDaily && ['text-sm']
 					)}
 				>
-					<span className="text-[#7B8089]">{t('common.TOTAL')}:</span>
+					<span className="text-[#7B8089] text-center">{t('common.TOTAL')}:</span>
 					<Text>
 						{total.h}h : {total.m}m
 					</Text>
@@ -101,10 +101,12 @@ function TimeBlockInfo({
 }) {
 	const { t } = useTranslation();
 	return (
-		<div className="flex gap-3">
+		<div className="flex gap-1">
 			{showDaily && (
 				<div className=" text-base font-normal flex flex-col items-center ">
-					<span className="text-[#7B8089]">{t('common.TODAY')}:</span>
+					<span className="text-[#7B8089] text-center text-xs">
+						{t('common.WORKED_ON_TASK')} {t('common.TODAY')}:
+					</span>
 					<Text className="text-lg font-semibold">
 						{daily.h}h : {daily.m}m
 					</Text>
@@ -118,7 +120,9 @@ function TimeBlockInfo({
 						// showDaily && ['text-sm']
 					)}
 				>
-					<span className="text-[#7B8089]">{t('common.TOTAL')}:</span>
+					<span className="text-[#7B8089] text-center text-xs">
+						{t('common.WORKED_ON_TASK')} {t('common.TOTAL')}:
+					</span>
 					<Text className="text-lg font-semibold">
 						{total.h}h : {total.m}m
 					</Text>

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

@@ -2,6 +2,7 @@ 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';
 
 interface Props {
 	teamMembers: OT_Member[];
@@ -25,7 +26,7 @@ const TeamMembersBlockView: React.FC<Props> = ({ teamMembers: members, publicTea
 			>
 				{/* <UserTeamBlock member={currentUser} publicTeam={publicTeam} /> */}
 			</Transition>
-			<div className="flex w-full items-center">
+			<div className="flex w-full flex-wrap items-center">
 				{members.map((member) => {
 					return (
 						<div className="p-1 w-full md:w-1/2  lg:w-1/4" key={member.id}>
@@ -45,6 +46,25 @@ 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>
 		</div>
 	);
 };

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

@@ -55,24 +55,24 @@ const TeamMembersTableView = ({
 		[]
 	);
 
-	const footerRows = React.useMemo<React.ReactNode[]>(() => [<Invite key={0} />], []);
-
 	const sortedTeamMembers: OT_Member[] = [];
 	if (currentUser) {
 		sortedTeamMembers.push(currentUser);
 	}
 	sortedTeamMembers.push(...teamMembers);
 
 	return (
-		<DataTable
-			columns={columns as Column<OT_Member>[]}
-			data={sortedTeamMembers}
-			footerRows={footerRows}
-			noResultsMessage={{
-				heading: 'No team members found',
-				content: 'Try adjusting your search or filter to find what you’re looking for.'
-			}}
-		/>
+		<>
+			<DataTable
+				columns={columns as Column<OT_Member>[]}
+				data={sortedTeamMembers}
+				noResultsMessage={{
+					heading: 'No team members found',
+					content: 'Try adjusting your search or filter to find what you’re looking for.'
+				}}
+			/>
+			<Invite />
+		</>
 	);
 };
 
@@ -81,10 +81,10 @@ function Invite() {
 	const { openModal, isOpen, closeModal } = useModal();
 
 	return (
-		<>
+		<div className="py-2">
 			<InviteUserTeamCard active={user?.isEmailVerified} onClick={openModal} />
 			<InviteFormModal open={isOpen && !!user?.isEmailVerified} closeModal={closeModal} />
-		</>
+		</div>
 	);
 }
 

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

@@ -18,12 +18,13 @@ type TeamMembersProps = {
 export function TeamMembers({ publicTeam = false, kanbanView: view = IssuesView.CARDS }: TeamMembersProps) {
 	const { user } = useAuthenticateUser();
 	const activeFilter = useRecoilValue(taskBlockFilterState);
-	const { activeTeam,  teamsFetching } = useOrganizationTeams();
+	const { activeTeam } = useOrganizationTeams();
+	const { teamsFetching } = useOrganizationTeams();
+	const members = activeTeam?.members || [];
+
+	const blockViewMembers =
+		activeFilter == 'all' ? members : members.filter((m) => m.timerStatus == activeFilter) || [];
 
-	const members =
-		activeFilter == 'all'
-			? activeTeam?.members || []
-			: activeTeam?.members.filter((m) => m.timerStatus == activeFilter) || [];
 	const currentUser = members.find((m) => m.employee.userId === user?.id);
 	const $members = members.filter((member) => member.id !== currentUser?.id);
 	const $teamsFetching = teamsFetching && members.length === 0;
@@ -80,7 +81,7 @@ export function TeamMembers({ publicTeam = false, kanbanView: view = IssuesView.
 		case view == IssuesView.BLOCKS:
 			teamMembersView = (
 				<TeamMembersBlockView
-					teamMembers={members}
+					teamMembers={blockViewMembers}
 					currentUser={currentUser}
 					publicTeam={publicTeam}
 					teamsFetching={$teamsFetching}

apps/web/lib/features/team/invite/user-invite-card.tsx

@@ -217,15 +217,14 @@ export function InviteUserTeamCard({
 				shadow="bigger"
 				className={clsxm(
 					'relative hidden sm:flex items-center py-3 min-h-[7rem] dark:bg-[#1E2025] border-[0.1875rem] border-transparent',
-					'dark:border dark:border-[#FFFFFF14]',
+					'dark:border dark:border-[#FFFFFF14] w-full',
 					className
 				)}
 			>
 				<div className="absolute opacity-40 -left-0">
 					<DraggerIcon className="fill-[#CCCCCC] dark:fill-[#4F5662]" />
 				</div>
 
-
 				{/* Show user name, email and image */}
 				<div className="2xl:w-[20.625rem] w-1/4 px-4 flex space-x-3">
 					<div className="w-10 h-10 rounded-full opacity-40 sm:w-9 sm:h-9 md:w-10 md:h-10 bg-slate-400" />

apps/web/lib/features/team/user-team-block/index.tsx

@@ -57,9 +57,9 @@ export function UserTeamBlock({ className, active, member, publicTeam = false }:
 		);
 
 		totalWork = (
-			<div className={clsxm('flex space-x-2 items-center justify-center w-32 font-normal flex-col mr-4')}>
-				<span className="text-xs text-gray-500">{t('common.TOTAL_TIME')}:</span>
-				<Text className="text-xs">
+			<div className={clsxm('flex space-x-2 items-center justify-center  font-normal flex-col mr-4')}>
+				<span className="text-xs text-gray-500 text-center	">{t('common.TOTAL_WORKED_TODAY')}:</span>
+				<Text className="text-sm">
 					{h}h : {m}m
 				</Text>
 			</div>
@@ -87,20 +87,19 @@ export function UserTeamBlock({ className, active, member, publicTeam = false }:
 			<Card
 				shadow="bigger"
 				className={clsxm(
-					'relative items-center py-3  dark:bg-[#1E2025] min-h-[7rem]',
+					'relative items-center py-3 !px-4 dark:bg-[#1E2025] min-h-[7rem]',
 					['dark:border border-t-[6px] ', cardColorType[timerStatusValue]],
 					className
 				)}
 			>
 				{/* flex */}
 				<div className="flex items-center justify-between py-2 w-full">
-					<div className="flex items-center justify-between py-2 w-full">
-						<UserBoxInfo memberInfo={memberInfo} className="w-3/4" publicTeam={publicTeam} />
-						{/* total time  */}
+					<UserBoxInfo memberInfo={memberInfo} className="w-3/5" publicTeam={publicTeam} />
+					{/* total time  */}
+					<div className="flex items-center justify-end w-2/5 gap-1">
 						{totalWork}
+						<div className="w-2 right-2">{menu}</div>
 					</div>
-					{/* more */}
-					<div className="absolute right-2">{menu}</div>
 				</div>
 
 				<HorizontalSeparator />
@@ -109,7 +108,7 @@ export function UserTeamBlock({ className, active, member, publicTeam = false }:
 				<TaskBlockInfo
 					edition={taskEdition}
 					memberInfo={memberInfo}
-					className=" w-full lg:px-4 px-2 py-2 overflow-hidden"
+					className=" w-full px-1 py-2 overflow-hidden"
 					publicTeam={publicTeam}
 				/>
 
@@ -124,7 +123,7 @@ export function UserTeamBlock({ className, active, member, publicTeam = false }:
 							memberInfo={memberInfo}
 							task={memberInfo.memberTask}
 							isAuthUser={memberInfo.isAuthUser}
-							className="2xl:w-48 3xl:w-[12rem] w-full lg:px-4 px-2 flex flex-col gap-y-[1.125rem] justify-center"
+							className=" w-full  px-2 flex flex-col gap-y-[1.125rem] justify-center"
 							isBlock={true}
 						/>
 						{/* today time */}
@@ -135,7 +134,7 @@ export function UserTeamBlock({ className, active, member, publicTeam = false }:
 						edition={taskEdition}
 						activeAuthTask={true}
 						showTime={false}
-						className="w-1/5 lg:px-3 2xl:w-52 3xl:w-64"
+						className="w-1/5"
 						radial={true}
 					/>
 				</div>

apps/web/lib/features/team/user-team-block/task-info.tsx

@@ -29,17 +29,12 @@ export function TaskInfo({ className, memberInfo, edition, publicTeam }: Props)
 }
 
 export function TaskBlockInfo({ className, memberInfo, edition, publicTeam }: Props) {
-	const task = edition.task;
-
 	return (
 		<div className={clsxm('h-full flex flex-col items-start justify-between gap-[1.0625rem]', className)}>
 			{/* task */}
 			<div className={clsxm('w-full h-12', edition.editMode ? [''] : ['overflow-hidden'])}>
 				{edition.task && (
-					<>
-						<TaskDetailAndEdition memberInfo={memberInfo} edition={edition} publicTeam={publicTeam} />
-						<p className="text-yellow-700">{task?.size}</p>
-					</>
+					<TaskDetailAndEdition memberInfo={memberInfo} edition={edition} publicTeam={publicTeam} />
 				)}
 				{!edition.task && <div className="text-center">--</div>}
 			</div>
@@ -74,6 +69,7 @@ function TaskDetailAndEdition({ edition, publicTeam }: Props) {
 				onClick={publicTeam ? () => null : () => task && router.push(`/task/${task?.id}`)}
 			>
 				<TaskNameInfoDisplay
+					showSize={true}
 					task={task}
 					className={`${
 						task?.issueType === 'Bug' ? '!px-[0.3312rem] py-[0.2875rem]' : '!px-[0.375rem] py-[0.375rem]'