From 5b240ebbe04c73a0b9051e1dfa472a41da52ae12 Mon Sep 17 00:00:00 2001 From: Pierre Perrin Date: Sat, 15 Apr 2023 21:36:08 +0100 Subject: [PATCH] [ADD] filtering feature on the dashboard --- src/features/global/cards/UserCard.tsx | 2 + src/features/global/navigation/NavBar.tsx | 4 +- .../global/navigation/NavigationDrawer.tsx | 19 +++-- .../{fullNavBar => }/NavigationTabs.tsx | 3 +- .../{fullNavBar => }/UserButton.tsx | 2 +- .../CardsTabs/ApprovedCardsEditable.tsx | 4 +- .../CardsTabs/RejectedCardsEditable.tsx | 4 +- .../CardsTabs/WaitingCardsEditable.tsx | 4 +- .../components/Filters.tsx | 4 +- .../home/user/cardTabs/ApprovedCards.tsx | 6 +- .../home/user/cardTabs/RejectedCards.tsx | 4 +- .../home/user/cardTabs/WaitingCards.tsx | 4 +- .../home/user/dashboard/DashboardCards.tsx | 81 +++++++++++++------ .../components/AdminWelcome/Setup.tsx | 3 - .../user/dashboard/components/CardsGrid.tsx | 44 ++++++++++ .../dashboard/components/StatusSelectItem.tsx | 25 ++++++ .../home/user/dashboard/utils/StatusIcon.tsx | 14 ++++ src/pages/home/index.tsx | 3 - 18 files changed, 180 insertions(+), 50 deletions(-) rename src/features/global/navigation/components/{fullNavBar => }/NavigationTabs.tsx (95%) rename src/features/global/navigation/components/{fullNavBar => }/UserButton.tsx (97%) create mode 100644 src/features/home/user/dashboard/components/CardsGrid.tsx create mode 100644 src/features/home/user/dashboard/components/StatusSelectItem.tsx create mode 100644 src/features/home/user/dashboard/utils/StatusIcon.tsx diff --git a/src/features/global/cards/UserCard.tsx b/src/features/global/cards/UserCard.tsx index ae012cd..345b219 100644 --- a/src/features/global/cards/UserCard.tsx +++ b/src/features/global/cards/UserCard.tsx @@ -43,6 +43,8 @@ const UserCard: React.FC = ({ card, refetch, edition, mode }) => { // eslint-disable-next-line react-hooks/exhaustive-deps }, [statusResult]) + console.log(card.status) + return ( diff --git a/src/features/global/navigation/NavBar.tsx b/src/features/global/navigation/NavBar.tsx index d43b848..0371ba3 100644 --- a/src/features/global/navigation/NavBar.tsx +++ b/src/features/global/navigation/NavBar.tsx @@ -6,12 +6,12 @@ import { Navbar, UnstyledButton, ScrollArea, Group } from '@mantine/core'; import { useAppSelector, useAppDispatch } from 'store/hooks/hooks'; import { useGetUserInfos } from 'hooks/api/useGetUserInfos'; -import UserButton from './components/fullNavBar/UserButton'; +import UserButton from './components/UserButton'; import { logoutHandling } from './utils/logoutHandling'; import { SlLogout } from "react-icons/sl"; -import Navigationtabs from './components/fullNavBar/NavigationTabs'; +import Navigationtabs from './components/NavigationTabs'; import { useNavBarStyles } from './styles/useNavBarStyles'; diff --git a/src/features/global/navigation/NavigationDrawer.tsx b/src/features/global/navigation/NavigationDrawer.tsx index 79d7d00..072b4fd 100644 --- a/src/features/global/navigation/NavigationDrawer.tsx +++ b/src/features/global/navigation/NavigationDrawer.tsx @@ -1,13 +1,19 @@ -import { Container, Drawer, Group, Stack, Text, UnstyledButton } from "@mantine/core"; +import { Drawer, Group, Stack, UnstyledButton } from "@mantine/core"; + import { useGetUserInfos } from "hooks/api/useGetUserInfos"; + import { useRouter } from "next/router"; + import { SlLogout } from "react-icons/sl"; + import { useAppDispatch, useAppSelector } from "store/hooks/hooks"; -import Navigationtabs from "./components/fullNavBar/NavigationTabs"; -import UserButton from "./components/fullNavBar/UserButton"; -import { useNavBarStyles } from "./styles/useNavBarStyles"; + +import Navigationtabs from "./components/NavigationTabs"; +import UserButton from "./components/UserButton"; import { logoutHandling } from "./utils/logoutHandling"; +import { useNavBarStyles } from "./styles/useNavBarStyles"; + interface Props { opened: boolean; onClose: () => void; @@ -15,11 +21,14 @@ interface Props { const NavigationDrawer: React.FC = ({ opened, onClose }) => { const { data: user } = useGetUserInfos(); - const { classes } = useNavBarStyles(); const router = useRouter(); + + const { classes } = useNavBarStyles(); const dispatch = useAppDispatch(); const userRole = useAppSelector((state) => state.user.auth.accessToken?.charAt(0)); + const { pathname } = useRouter(); + let page = pathname; if (page === "/home/pld/generator" || page === "/home/pld/images" || page === "/home/pld/changes") diff --git a/src/features/global/navigation/components/fullNavBar/NavigationTabs.tsx b/src/features/global/navigation/components/NavigationTabs.tsx similarity index 95% rename from src/features/global/navigation/components/fullNavBar/NavigationTabs.tsx rename to src/features/global/navigation/components/NavigationTabs.tsx index fe964cb..a2eb909 100644 --- a/src/features/global/navigation/components/fullNavBar/NavigationTabs.tsx +++ b/src/features/global/navigation/components/NavigationTabs.tsx @@ -2,10 +2,9 @@ import Link from "next/link"; import { Divider, Group } from "@mantine/core"; -import { useNavBarStyles } from "../../styles/useNavBarStyles"; +import { useNavBarStyles } from "../styles/useNavBarStyles"; import { userTabs, editorTabs, adminTabs } from "features/global/navigation/utils/links"; -import CustomLoader from "components/loader/CustomLoader"; interface Props { active: string; diff --git a/src/features/global/navigation/components/fullNavBar/UserButton.tsx b/src/features/global/navigation/components/UserButton.tsx similarity index 97% rename from src/features/global/navigation/components/fullNavBar/UserButton.tsx rename to src/features/global/navigation/components/UserButton.tsx index ff1995c..76c5546 100644 --- a/src/features/global/navigation/components/fullNavBar/UserButton.tsx +++ b/src/features/global/navigation/components/UserButton.tsx @@ -1,6 +1,6 @@ import { Group, Text, UnstyledButton, createStyles, useMantineTheme } from '@mantine/core'; -import style from "../../styles/userButton.module.css"; +import style from "../styles/userButton.module.css"; import LittleColorScheme from 'components/littleColorScheme/LittleColorScheme'; import { MdOutlineChevronRight } from 'react-icons/md'; diff --git a/src/features/home/editor/CardsApprovalAndEdition/components/CardsTabs/ApprovedCardsEditable.tsx b/src/features/home/editor/CardsApprovalAndEdition/components/CardsTabs/ApprovedCardsEditable.tsx index bbe3436..8f8c0eb 100644 --- a/src/features/home/editor/CardsApprovalAndEdition/components/CardsTabs/ApprovedCardsEditable.tsx +++ b/src/features/home/editor/CardsApprovalAndEdition/components/CardsTabs/ApprovedCardsEditable.tsx @@ -18,7 +18,9 @@ const ApprovedCardsEditable: React.FC = ({ data, refetch }) => { mt={20} breakpoints={[ { minWidth: 'xs', cols: 1 }, - { minWidth: 900, cols: 2 }, + { minWidth: 650, cols: 2 }, + { minWidth: 800, cols: 1 }, + { minWidth: 910, cols: 2 }, { minWidth: 1200, cols: 3 }, { minWidth: 1700, cols: 4 }, { minWidth: 2200, cols: 5 }, diff --git a/src/features/home/editor/CardsApprovalAndEdition/components/CardsTabs/RejectedCardsEditable.tsx b/src/features/home/editor/CardsApprovalAndEdition/components/CardsTabs/RejectedCardsEditable.tsx index 38addcd..ecfd316 100644 --- a/src/features/home/editor/CardsApprovalAndEdition/components/CardsTabs/RejectedCardsEditable.tsx +++ b/src/features/home/editor/CardsApprovalAndEdition/components/CardsTabs/RejectedCardsEditable.tsx @@ -18,7 +18,9 @@ const RejectedCardsEditable: React.FC = ({ data, refetch }) => { mt={20} breakpoints={[ { minWidth: 'xs', cols: 1 }, - { minWidth: 900, cols: 2 }, + { minWidth: 650, cols: 2 }, + { minWidth: 800, cols: 1 }, + { minWidth: 910, cols: 2 }, { minWidth: 1200, cols: 3 }, { minWidth: 1700, cols: 4 }, { minWidth: 2200, cols: 5 }, diff --git a/src/features/home/editor/CardsApprovalAndEdition/components/CardsTabs/WaitingCardsEditable.tsx b/src/features/home/editor/CardsApprovalAndEdition/components/CardsTabs/WaitingCardsEditable.tsx index 50346eb..fc115f7 100644 --- a/src/features/home/editor/CardsApprovalAndEdition/components/CardsTabs/WaitingCardsEditable.tsx +++ b/src/features/home/editor/CardsApprovalAndEdition/components/CardsTabs/WaitingCardsEditable.tsx @@ -18,7 +18,9 @@ const WaitingCardsEditable: React.FC = ({ data, refetch }) => { mt={20} breakpoints={[ { minWidth: 'xs', cols: 1 }, - { minWidth: 900, cols: 2 }, + { minWidth: 650, cols: 2 }, + { minWidth: 800, cols: 1 }, + { minWidth: 910, cols: 2 }, { minWidth: 1200, cols: 3 }, { minWidth: 1700, cols: 4 }, { minWidth: 2200, cols: 5 }, diff --git a/src/features/home/editor/CardsApprovalAndEdition/components/Filters.tsx b/src/features/home/editor/CardsApprovalAndEdition/components/Filters.tsx index f81d887..3b6b714 100644 --- a/src/features/home/editor/CardsApprovalAndEdition/components/Filters.tsx +++ b/src/features/home/editor/CardsApprovalAndEdition/components/Filters.tsx @@ -17,9 +17,9 @@ const Filters: React.FC = ({parts, partFilter, setPartFilter, search, set return ( - } placeholder="Search..." value={search} onChange={(event) => setSearch(event.currentTarget.value)} /> + } placeholder="Search..." value={search} onChange={(event) => setSearch(event.currentTarget.value)} /> - part.name)} /> ); diff --git a/src/features/home/user/cardTabs/ApprovedCards.tsx b/src/features/home/user/cardTabs/ApprovedCards.tsx index 0090690..85384ee 100644 --- a/src/features/home/user/cardTabs/ApprovedCards.tsx +++ b/src/features/home/user/cardTabs/ApprovedCards.tsx @@ -1,4 +1,4 @@ -import { Tabs, Grid, Center, Title, SimpleGrid } from "@mantine/core"; +import { Tabs, Center, Title, SimpleGrid } from "@mantine/core"; import { Card } from "types/apiTypes"; @@ -20,7 +20,9 @@ const ApprovedCards: React.FC = ({ data, refetch }) => { mt={20} breakpoints={[ { minWidth: 'xs', cols: 1 }, - { minWidth: 900, cols: 2 }, + { minWidth: 650, cols: 2 }, + { minWidth: 800, cols: 1 }, + { minWidth: 910, cols: 2 }, { minWidth: 1200, cols: 3 }, { minWidth: 1700, cols: 4 }, { minWidth: 2200, cols: 5 }, diff --git a/src/features/home/user/cardTabs/RejectedCards.tsx b/src/features/home/user/cardTabs/RejectedCards.tsx index fad23d0..0dfba74 100644 --- a/src/features/home/user/cardTabs/RejectedCards.tsx +++ b/src/features/home/user/cardTabs/RejectedCards.tsx @@ -20,7 +20,9 @@ const RejectedCards: React.FC = ({ data, refetch }) => { mt={20} breakpoints={[ { minWidth: 'xs', cols: 1 }, - { minWidth: 900, cols: 2 }, + { minWidth: 650, cols: 2 }, + { minWidth: 800, cols: 1 }, + { minWidth: 910, cols: 2 }, { minWidth: 1200, cols: 3 }, { minWidth: 1700, cols: 4 }, { minWidth: 2200, cols: 5 }, diff --git a/src/features/home/user/cardTabs/WaitingCards.tsx b/src/features/home/user/cardTabs/WaitingCards.tsx index 0794d30..335e8f5 100644 --- a/src/features/home/user/cardTabs/WaitingCards.tsx +++ b/src/features/home/user/cardTabs/WaitingCards.tsx @@ -20,7 +20,9 @@ const WaitingCards: React.FC = ({ data, refetch }) => { mt={20} breakpoints={[ { minWidth: 'xs', cols: 1 }, - { minWidth: 900, cols: 2 }, + { minWidth: 650, cols: 2 }, + { minWidth: 800, cols: 1 }, + { minWidth: 910, cols: 2 }, { minWidth: 1200, cols: 3 }, { minWidth: 1700, cols: 4 }, { minWidth: 2200, cols: 5 }, diff --git a/src/features/home/user/dashboard/DashboardCards.tsx b/src/features/home/user/dashboard/DashboardCards.tsx index c084e21..95532b0 100644 --- a/src/features/home/user/dashboard/DashboardCards.tsx +++ b/src/features/home/user/dashboard/DashboardCards.tsx @@ -1,11 +1,20 @@ -import React from "react"; +import React, { useEffect, useState } from "react"; -import { Center, Divider, Grid, SimpleGrid, Title } from "@mantine/core"; -import UserCard from "features/global/cards/UserCard"; +import { Center, Divider, Grid, Group, Select, TextInput } from "@mantine/core"; +import { useViewportSize } from "@mantine/hooks"; import { Card, Sprint, UserCards } from "types/apiTypes"; + import JoursAlert from "./components/JoursAlert"; import Stats from "./components/Stats"; +import CardsGrid from "./components/CardsGrid"; + +import { RiSearchLine } from "react-icons/ri"; + +import { TbCircleDotted, TbCircleCheck, TbClock, TbCircleX } from "react-icons/tb"; + +import StatusSelectItem from "./components/StatusSelectItem"; +import { StatusIcon } from "./utils/statusIcon"; interface Props { user: UserCards; @@ -13,11 +22,40 @@ interface Props { refetch: any; } +const data = [ + { value: 'FINISHED', label: 'Finished', icon: TbCircleCheck }, + { value: 'STARTED', label: 'In progress', icon: TbClock }, + { value: 'NOT_STARTED', label: 'Not started', icon: TbCircleX } +] + const DashboardCards: React.FC = ({user, sprint, refetch}) => { + const { width } = useViewportSize(); + const [search, setSearch] = useState(""); + const [status, setStatus] = useState(null); + const cards = user.cards.filter((card: Card) => (card.status !== "REJECTED"&& card.status !== "WAITING_APPROVAL") && card.sprintId === sprint.id ); + const [filteredCards, setFilteredCards] = useState(cards); + + useEffect(() => { + let newCards = user.cards.filter((card: Card) => + (card.status !== "REJECTED"&& card.status !== "WAITING_APPROVAL") && card.sprintId === sprint.id + ); + + if (status !== null) { + newCards = newCards.filter((card: Card) => card.status === status); + } + + if (search !== "") { + newCards = newCards.filter((card: Card) => card.name.toLowerCase().includes(search.toLowerCase())); + } + + setFilteredCards(newCards); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [search, status]); + return (

Welcome back !

@@ -48,28 +86,21 @@ const DashboardCards: React.FC = ({user, sprint, refetch}) => { - {cards.length === 0 - ?
No approved card(s)
- : - - {cards.map((card: Card, index: number) => ( -
- -
- ))} - - - } + +