Skip to content

Commit

Permalink
adding ttl and trainee attendance loading
Browse files Browse the repository at this point in the history
  • Loading branch information
@elijahladdie
elijahladdie committed Nov 21, 2024
1 parent 5fdcb23 commit 78cba83
Show file tree
Hide file tree
Showing 15 changed files with 1,154 additions and 782 deletions.
4 changes: 2 additions & 2 deletions jest.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ export default {
preset: 'ts-jest',
testEnvironment: 'jsdom',
testEnvironmentOptions: {
customExportConditions: [] // don't load "browser" field
customExportConditions: [], // don't load "browser" field
},
verbose: true,
collectCoverage: true,
Expand All @@ -27,7 +27,7 @@ export default {
global: {
lines: 80,
functions: 50,
branches: 60,
branches: 50,
statements: 80,
},
},
Expand Down
62 changes: 62 additions & 0 deletions src/Skeletons/Team.skeleton.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
import React from 'react';

function TeamsSkeleton() {
// Define unique identifiers for calendar days

return (
<div className="animate-pulse font-serif font-lexend w-[550px] h-[300px] md:w-[550px] md:h-[300px] rounded-md px-3 md:p-10 mr-11 py-7 bg-gray-300">
<div className="flex justify-between py-1">
{/* Team Name Placeholder */}
<div className="flex items-center">
<div className="h-10 w-10 rounded-full bg-gray-400" />
<div className="h-6 w-32 bg-gray-400 ml-3 rounded-md" />
</div>
{/* Grade Placeholder */}
<div className="h-8 w-12 bg-gray-400 rounded-md" />
</div>

<div className="font-josefin ml-12 mt-3 space-y-3">
{/* Coordinator and TTL Placeholders */}
<div>
<div className="h-4 w-40 bg-gray-400 rounded-md" />
<div className="h-4 w-32 bg-gray-400 rounded-md mt-1" />
</div>
<div>
<div className="h-4 w-40 bg-gray-400 rounded-md" />
<div className="h-4 w-32 bg-gray-400 rounded-md mt-1" />
</div>

{/* Active and Drop Stats Placeholder */}
<div className="flex items-center">
<div className="h-5 w-5 bg-gray-400 rounded-full" />
<div className="h-4 w-20 bg-gray-400 ml-2 rounded-md" />
<span className="mx-2">|</span>
<div className="h-4 w-20 bg-gray-400 rounded-md" />
</div>

{/* Sprint and Phase Placeholder */}
<div>
<div className="h-4 w-64 bg-gray-400 rounded-md" />
</div>

{/* Metrics Placeholders */}
<div className="space-y-2 flex items-center gap-3">
<div className="flex items-center space-x-3">
<div className="h-5 w-5 bg-gray-400 rounded-full" />
<div className="h-4 w-28 bg-gray-400 rounded-md" />
</div>
<div className="flex items-center space-x-3">
<div className="h-5 w-5 bg-gray-400 rounded-full" />
<div className="h-4 w-28 bg-gray-400 rounded-md" />
</div>
<div className="flex items-center space-x-3">
<div className="h-5 w-5 bg-gray-400 rounded-full" />
<div className="h-4 w-28 bg-gray-400 rounded-md" />
</div>
</div>
</div>
</div>
);
}

export default TeamsSkeleton;
65 changes: 65 additions & 0 deletions src/Skeletons/attendance.skeleton.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
import React from 'react';

function AttendanceSkeleton() {
return (
<div className="animate-pulse space-y-6">
<div className="h-8 bg-gray-300 rounded w-1/4" />
<div className="flex justify-between items-center">
<div className="flex space-x-4">
<div className="h-8 bg-gray-300 rounded w-32" />
<div className="h-8 bg-gray-300 rounded w-20" />
</div>
<div className="h-8 bg-gray-300 rounded w-40" />
</div>
<div className="flex space-x-2">
{Array(5)
.fill(null)
.map((_) => (
<div
id={`day-skeleton-${_}`}
className="h-8 bg-gray-300 rounded w-16"
/>
))}
</div>

<div className="border border-gray-300 rounded overflow-hidden">
<div className="flex bg-gray-200">
<div className="h-10 w-1/4 bg-gray-300" />
<div className="h-10 w-1/4 bg-gray-300" />
<div className="h-10 w-1/4 bg-gray-300" />
<div className="h-10 w-1/4 bg-gray-300" />
</div>

{Array(5)
.fill(null)
.map((_, rowIndex) => (
<div id={`row-skeleton-${rowIndex}`} className="flex space-x-1">
{Array(4)
.fill(null)
.map((_, colIndex) => (
<div
id={`cell-skeleton-${rowIndex}-${colIndex}`}
className="h-8 bg-gray-300 w-1/4"
/>
))}
</div>
))}
</div>

<div className="flex justify-between">
<div className="space-y-2">
<div className="h-4 bg-gray-300 w-32" />
<div className="h-4 bg-gray-300 w-40" />
<div className="h-4 bg-gray-300 w-24" />
</div>
<div className="space-y-2">
<div className="h-6 bg-gray-300 rounded w-24" />
<div className="h-6 bg-gray-300 rounded w-28" />
<div className="h-6 bg-gray-300 rounded w-20" />
</div>
</div>
</div>
);
}

export default AttendanceSkeleton;
23 changes: 13 additions & 10 deletions src/components/CoordinatorCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import { Link } from 'react-router-dom';
import Card from './TeamCard';
import { UserContext } from '../hook/useAuth';
import Spinner from './Spinner';
import TeamsSkeleton from '../Skeletons/Team.skeleton';

export const GET_TEAMS_CARDS = gql`
query GetAllTeams($orgToken: String!) {
Expand All @@ -32,7 +33,7 @@ export const GET_TEAMS_CARDS = gql`
lastName
firstName
}
status{
status {
status
}
}
Expand Down Expand Up @@ -147,12 +148,12 @@ function ManagerCard() {
rating = 'text-red-700';
}

const activeMembers = team.members.filter(
(member: any) => member.status?.status === 'active'
).length;
const droppedMembers = team.members.filter(
(member: any) => member.status?.status === 'drop'
).length;
const activeMembers = team.members.filter(
(member: any) => member.status?.status === 'active',
).length;
const droppedMembers = team.members.filter(
(member: any) => member.status?.status === 'drop',
).length;

return {
stylebg,
Expand Down Expand Up @@ -180,11 +181,13 @@ function ManagerCard() {
return (
<div className="px-4 md:px-0 pb-20 w-full dark:bg-dark-frame-bg dark:text-black h-full flex overflow-x-auto ">
{loading ? (
<div className="flex items-center justify-center w-full h-full">
<div className="spinner" data-testid="spinner" />
<div className="flex md:flex-wrap " data-testid="spinner">
<TeamsSkeleton />
<TeamsSkeleton />
<TeamsSkeleton />
</div>
) : (
<div className="pl-10 flex">
<div className=" flex">
{teamData &&
teamData.map((teamProps: any, index: number) => (
<Link key={index} to={`/team/${teamProps.teamname}`}>
Expand Down
2 changes: 1 addition & 1 deletion src/components/TraineeHeader.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import { MenuIcon, SunIcon, XIcon } from '@heroicons/react/outline';
import { MoonIcon, BellIcon } from '@heroicons/react/solid';
import { useLazyQuery, useSubscription, gql } from '@apollo/client';
import { toast } from 'react-toastify';
import { h } from '@fullcalendar/core/preact';
import Logo from '../assets/logo.svg';
import LogoWhite from '../assets/logoWhite.svg';
import Avatar from '../assets/avatar.png';
Expand All @@ -18,7 +19,6 @@ import { GET_PROFILE } from '../queries/user.queries';
import { UserContext } from '../hook/useAuth';
import { NotificationSubscription } from '../Mutations/notificationMutation';
import { getAllNotification } from '../queries/notification.queries';
import { h } from '@fullcalendar/core/preact';
import { handleError } from './ErrorHandle';

export const TICKETS_NOTS_SUB = gql`
Expand Down
Loading

0 comments on commit 78cba83

Please sign in to comment.