From 108b1f542adeba009cbd6ada0041936a85ea5dcd Mon Sep 17 00:00:00 2001 From: Guillaume Cauchois Date: Wed, 4 Dec 2024 14:45:43 +0100 Subject: [PATCH 1/2] feat(EN-7797): profileCard option noHelp + CardList use grid css + design Directory page --- .../DashboardNetworkDiscoverCard.tsx | 2 +- .../DashboardRecommendationsCard.styles.ts | 4 +- .../DashboardRecommendationsCard.tsx | 7 +- .../Directory.styles.ts} | 7 + .../directory/Directory/Directory.tsx | 134 ++++++++++++++++++ .../backoffice/directory/Directory/index.ts | 1 + .../DirectoryContainer/DirectoryContainer.tsx | 113 --------------- .../directory/DirectoryContainer/index.ts | 1 - .../directory/DirectoryItem/DirectoryItem.tsx | 3 + .../directory/DirectoryList/DirectoryList.tsx | 1 + .../DashboardReferedCandidateList.styles.ts | 4 +- .../DashboardReferedCandidateList.tsx | 3 +- .../HeaderBackoffice.styles.ts | 4 + .../HeaderBackoffice/HeaderBackoffice.tsx | 3 +- .../utils/CardList/CardList.styles.ts | 12 +- src/components/utils/CardList/CardList.tsx | 5 +- .../CardListItem/CardListItem.styles.ts | 3 +- .../Cards/ProfileCard/ProfileCard.styles.ts | 19 +-- .../utils/Cards/ProfileCard/ProfileCard.tsx | 71 ++++++---- src/constants/helps.tsx | 2 +- src/constants/styles.ts | 2 +- src/pages/backoffice/annuaire.tsx | 14 +- 22 files changed, 228 insertions(+), 187 deletions(-) rename src/components/backoffice/directory/{DirectoryContainer/DirectoryContainer.styles.ts => Directory/Directory.styles.ts} (67%) create mode 100644 src/components/backoffice/directory/Directory/Directory.tsx create mode 100644 src/components/backoffice/directory/Directory/index.ts delete mode 100644 src/components/backoffice/directory/DirectoryContainer/DirectoryContainer.tsx delete mode 100644 src/components/backoffice/directory/DirectoryContainer/index.ts diff --git a/src/components/backoffice/dashboard/DashboardNetworkDiscoverCard/DashboardNetworkDiscoverCard.tsx b/src/components/backoffice/dashboard/DashboardNetworkDiscoverCard/DashboardNetworkDiscoverCard.tsx index cdb57bb14..671ebc91c 100644 --- a/src/components/backoffice/dashboard/DashboardNetworkDiscoverCard/DashboardNetworkDiscoverCard.tsx +++ b/src/components/backoffice/dashboard/DashboardNetworkDiscoverCard/DashboardNetworkDiscoverCard.tsx @@ -25,7 +25,7 @@ const cardVariables: { content: "N'hésitez pas à prendre contact avec eux pour les accompagner dans votre recherche", button: 'Découvrez les coachs', - buttonHref: '/backoffice/annuaire?role=coach', + buttonHref: '/backoffice/annuaire?role=Coach', }, [USER_ROLES.COACH]: { title: 'Découvrez les candidats que vous pourriez accompagner', diff --git a/src/components/backoffice/dashboard/DashboardRecommendationsCard/DashboardRecommendationsCard.styles.ts b/src/components/backoffice/dashboard/DashboardRecommendationsCard/DashboardRecommendationsCard.styles.ts index 3e9ce6b38..a23a1261c 100644 --- a/src/components/backoffice/dashboard/DashboardRecommendationsCard/DashboardRecommendationsCard.styles.ts +++ b/src/components/backoffice/dashboard/DashboardRecommendationsCard/DashboardRecommendationsCard.styles.ts @@ -1,7 +1,5 @@ import styled from 'styled-components'; export const StyledDashboardRecommendationsList = styled.div` - ul { - gap: 26px; - } + width: 100%; `; diff --git a/src/components/backoffice/dashboard/DashboardRecommendationsCard/DashboardRecommendationsCard.tsx b/src/components/backoffice/dashboard/DashboardRecommendationsCard/DashboardRecommendationsCard.tsx index 38d35d97e..22e9a71ce 100644 --- a/src/components/backoffice/dashboard/DashboardRecommendationsCard/DashboardRecommendationsCard.tsx +++ b/src/components/backoffice/dashboard/DashboardRecommendationsCard/DashboardRecommendationsCard.tsx @@ -72,6 +72,7 @@ export const DashboardRecommendationsCard = () => { ambitions={profile.searchAmbitions} job={profile.currentJob} isAvailable={profile.isAvailable} + displayHelps={false} /> ); }); @@ -93,7 +94,11 @@ export const DashboardRecommendationsCard = () => { > - + + + + } + /> + + + +
+ + + +
+ + ); +} diff --git a/src/components/backoffice/directory/Directory/index.ts b/src/components/backoffice/directory/Directory/index.ts new file mode 100644 index 000000000..fe9fc26be --- /dev/null +++ b/src/components/backoffice/directory/Directory/index.ts @@ -0,0 +1 @@ +export * from './Directory'; diff --git a/src/components/backoffice/directory/DirectoryContainer/DirectoryContainer.tsx b/src/components/backoffice/directory/DirectoryContainer/DirectoryContainer.tsx deleted file mode 100644 index ae34f3244..000000000 --- a/src/components/backoffice/directory/DirectoryContainer/DirectoryContainer.tsx +++ /dev/null @@ -1,113 +0,0 @@ -import { useRouter } from 'next/router'; -import React, { useMemo } from 'react'; -import { DirectoryList } from '../DirectoryList'; -import { useDirectoryQueryParams } from '../useDirectoryQueryParams'; -import { SearchBar } from 'src/components/filters/SearchBar/SearchBar'; -import { Button, Section } from 'src/components/utils'; -import { BUSINESS_LINES, DirectoryFilters } from 'src/constants'; -import { DEPARTMENTS_FILTERS } from 'src/constants/departements'; -import { ProfileHelps } from 'src/constants/helps'; -import { GA_TAGS } from 'src/constants/tags'; -import { USER_ROLES } from 'src/constants/users'; -import { useFilters } from 'src/hooks'; -import { useIsMobile } from 'src/hooks/utils'; -import { - findConstantFromValue, - isRoleIncluded, - mutateToArray, -} from 'src/utils'; -import { - StyledDirectoryButtonContainer, - StyledDirectoryContainer, -} from './DirectoryContainer.styles'; - -const route = '/backoffice/annuaire'; - -export function DirectoryContainer() { - const { push } = useRouter(); - const isMobile = useIsMobile(); - - const directoryFiltersParams = useDirectoryQueryParams(); - const { role, departments, helps, businessLines, search } = - directoryFiltersParams; - - const { setFilters, setSearch, resetFilters } = useFilters( - DirectoryFilters, - `/backoffice/annuaire`, - [], - GA_TAGS.PAGE_ANNUAIRE_SUPPRIMER_FILTRES_CLIC - ); - - const filters = useMemo(() => { - return { - departments: mutateToArray(departments).map((department) => - findConstantFromValue(department, DEPARTMENTS_FILTERS) - ), - helps: mutateToArray(helps).map((help) => - findConstantFromValue(help, ProfileHelps) - ), - businessLines: mutateToArray(businessLines).map((businessLine) => - findConstantFromValue(businessLine, BUSINESS_LINES) - ), - }; - }, [departments, helps, businessLines]); - - return ( - -
- { - resetFilters(); - }} - search={search} - setSearch={setSearch} - setFilters={setFilters} - placeholder="Rechercher..." - additionalButtons={ - - - - - } - /> -
- - - ); -} diff --git a/src/components/backoffice/directory/DirectoryContainer/index.ts b/src/components/backoffice/directory/DirectoryContainer/index.ts deleted file mode 100644 index 941a3c7e3..000000000 --- a/src/components/backoffice/directory/DirectoryContainer/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './DirectoryContainer'; diff --git a/src/components/backoffice/directory/DirectoryItem/DirectoryItem.tsx b/src/components/backoffice/directory/DirectoryItem/DirectoryItem.tsx index 91b54220e..586383068 100644 --- a/src/components/backoffice/directory/DirectoryItem/DirectoryItem.tsx +++ b/src/components/backoffice/directory/DirectoryItem/DirectoryItem.tsx @@ -25,6 +25,7 @@ interface DirectoryItemProps { department: Department; job?: string; isAvailable: boolean; + displayHelps: boolean; } export function DirectoryItem({ @@ -38,6 +39,7 @@ export function DirectoryItem({ ambitions, job, isAvailable, + displayHelps, }: DirectoryItemProps) { return ( @@ -52,6 +54,7 @@ export function DirectoryItem({ ambitions={ambitions} job={job} isAvailable={isAvailable} + displayHelps={displayHelps} /> ); diff --git a/src/components/backoffice/directory/DirectoryList/DirectoryList.tsx b/src/components/backoffice/directory/DirectoryList/DirectoryList.tsx index 78f00e9e5..18b74014b 100644 --- a/src/components/backoffice/directory/DirectoryList/DirectoryList.tsx +++ b/src/components/backoffice/directory/DirectoryList/DirectoryList.tsx @@ -33,6 +33,7 @@ export function DirectoryList() { ambitions={profile.searchAmbitions} job={profile.currentJob} isAvailable={profile.isAvailable} + displayHelps /> ); }); diff --git a/src/components/backoffice/referer/dashboard/DashboardReferedCandidateList/DashboardReferedCandidateList.styles.ts b/src/components/backoffice/referer/dashboard/DashboardReferedCandidateList/DashboardReferedCandidateList.styles.ts index 8b9b3abec..e7b4f1e28 100644 --- a/src/components/backoffice/referer/dashboard/DashboardReferedCandidateList/DashboardReferedCandidateList.styles.ts +++ b/src/components/backoffice/referer/dashboard/DashboardReferedCandidateList/DashboardReferedCandidateList.styles.ts @@ -1,7 +1,5 @@ import styled from 'styled-components'; export const StyledDashboardReferedCandidateList = styled.div` - ul { - gap: 26px; - } + width: 100%; `; diff --git a/src/components/backoffice/referer/dashboard/DashboardReferedCandidateList/DashboardReferedCandidateList.tsx b/src/components/backoffice/referer/dashboard/DashboardReferedCandidateList/DashboardReferedCandidateList.tsx index 7ffd54283..875e5158e 100644 --- a/src/components/backoffice/referer/dashboard/DashboardReferedCandidateList/DashboardReferedCandidateList.tsx +++ b/src/components/backoffice/referer/dashboard/DashboardReferedCandidateList/DashboardReferedCandidateList.tsx @@ -61,6 +61,7 @@ export const DashboardReferedCandidateList = () => { ambitions={profile.searchAmbitions} job={profile.currentJob} isAvailable={profile.isAvailable} + displayHelps={false} /> ); }); @@ -70,7 +71,7 @@ export const DashboardReferedCandidateList = () => { - + diff --git a/src/components/headers/HeaderBackoffice/HeaderBackoffice.styles.ts b/src/components/headers/HeaderBackoffice/HeaderBackoffice.styles.ts index a2ecfa97d..775bdd0fa 100644 --- a/src/components/headers/HeaderBackoffice/HeaderBackoffice.styles.ts +++ b/src/components/headers/HeaderBackoffice/HeaderBackoffice.styles.ts @@ -25,3 +25,7 @@ export const StyledHeaderBackOffice = styled.div` margin: 30px 0; } `; + +export const StyledBackgroundedHeaderBackoffice = styled.div` + background-color: ${COLORS.lightGray}; +`; diff --git a/src/components/headers/HeaderBackoffice/HeaderBackoffice.tsx b/src/components/headers/HeaderBackoffice/HeaderBackoffice.tsx index c55f7541e..987c3b2ed 100644 --- a/src/components/headers/HeaderBackoffice/HeaderBackoffice.tsx +++ b/src/components/headers/HeaderBackoffice/HeaderBackoffice.tsx @@ -1,6 +1,7 @@ import React from 'react'; import { StyledHeaderBackOffice } from 'src/components/headers/HeaderBackoffice/HeaderBackoffice.styles'; import { Grid } from 'src/components/utils'; +import { H1 } from 'src/components/utils/Headings'; import { Tag } from 'src/components/utils/Tag'; import { usePendingMembers } from './usePendingMembers'; @@ -30,7 +31,7 @@ export const HeaderBackoffice = ({ eachWidths={['expand@m', 'auto@m']} >
-

{title}

+

{description}

{children}
diff --git a/src/components/utils/CardList/CardList.styles.ts b/src/components/utils/CardList/CardList.styles.ts index 279da8fcf..48dee90b8 100644 --- a/src/components/utils/CardList/CardList.styles.ts +++ b/src/components/utils/CardList/CardList.styles.ts @@ -4,14 +4,14 @@ export const StyledCardListContainer = styled.div` display: flex; flex-direction: column; align-items: center; + width: 100%; `; -export const StyledCardList = styled.ul` - list-style-type: none; - display: flex; - flex-wrap: wrap; - gap: 56px; - justify-content: center; +export const StyledCardList = styled.div` + display: grid; + width: 100%; + grid-template-columns: repeat(auto-fill, minmax(272px, 1fr)); + gap: ${({ condensed }) => (condensed ? '20px' : '55px')}; padding: 0; `; diff --git a/src/components/utils/CardList/CardList.tsx b/src/components/utils/CardList/CardList.tsx index f371bc38d..2c09d27bf 100644 --- a/src/components/utils/CardList/CardList.tsx +++ b/src/components/utils/CardList/CardList.tsx @@ -11,18 +11,21 @@ interface CardListProps { list: JSX.Element[]; isLoading?: boolean; dataTestId?: string; + condensed?: boolean; } export function CardList({ list, isLoading = false, + condensed = false, dataTestId, }: CardListProps) { return ( {list.length > 0 && list} {list.length === 0 && !isLoading && ( diff --git a/src/components/utils/CardList/CardListItem/CardListItem.styles.ts b/src/components/utils/CardList/CardListItem/CardListItem.styles.ts index f7023d87b..d0af5ddb4 100644 --- a/src/components/utils/CardList/CardListItem/CardListItem.styles.ts +++ b/src/components/utils/CardList/CardListItem/CardListItem.styles.ts @@ -1,8 +1,7 @@ import styled from 'styled-components'; -export const StyledCardListItem = styled.li` +export const StyledCardListItem = styled.div` display: flex; - > * { flex: 1; display: flex; diff --git a/src/components/utils/Cards/ProfileCard/ProfileCard.styles.ts b/src/components/utils/Cards/ProfileCard/ProfileCard.styles.ts index b83ec070a..15e320789 100644 --- a/src/components/utils/Cards/ProfileCard/ProfileCard.styles.ts +++ b/src/components/utils/Cards/ProfileCard/ProfileCard.styles.ts @@ -3,12 +3,13 @@ import { StyledCardCommon } from '../Cards.styles'; import { COLORS } from 'src/constants/styles'; export const StyledProfileCard = styled(StyledCardCommon)` - width: 270px; + width: 100%; + height: 100%; border-radius: 10px; border: 1px solid ${COLORS.gray}; cursor: pointer; transition: box-shadow 0.2s ease-in-out; - + box-sizing: border-box; &:hover { box-shadow: 0 8px 16px 0 ${COLORS.gray}; } @@ -152,13 +153,8 @@ export const StyledProfileCardHelpContainer = styled.div``; export const StyledProfileCardHelps = styled.div` display: flex; - flex-direction: row; - align-items: center; justify-content: center; - flex-wrap: wrap; - gap: 6px; - margin-right: -8px; - margin-left: -8px; + gap: 8px; `; export const StyledProfileCardHelp = styled.div` @@ -169,7 +165,7 @@ export const StyledProfileCardHelp = styled.div` `; export const StyledProfileCardHelpLabel = styled.div` - font-size: 10px; + font-size: 8px; color: ${COLORS.mediumGray}; `; @@ -194,3 +190,8 @@ export const StyledProfileCardEmptyIcon = styled.div` align-items: center; justify-content: center; `; + +export const StyledCTAContainer = styled.div` + display: flex; + justify-content: flex-start; +`; diff --git a/src/components/utils/Cards/ProfileCard/ProfileCard.tsx b/src/components/utils/Cards/ProfileCard/ProfileCard.tsx index 8f72e0ae9..0a88a451c 100644 --- a/src/components/utils/Cards/ProfileCard/ProfileCard.tsx +++ b/src/components/utils/Cards/ProfileCard/ProfileCard.tsx @@ -3,6 +3,7 @@ import Link from 'next/link'; import React, { useMemo } from 'react'; import HandsIcon from 'assets/icons/illu-coeur-mains-ouvertes.svg'; import CaseIcon from 'assets/icons/illu-malette.svg'; +import { Button } from '../../Button'; import { UserCandidateWithUsers } from 'src/api/types'; import { AvailabilityTag } from 'src/components/utils/AvailabilityTag'; import { H3, H5 } from 'src/components/utils/Headings'; @@ -19,6 +20,7 @@ import { useImageFallback } from 'src/hooks/useImageFallback'; import { gaEvent } from 'src/lib/gtag'; import { findConstantFromValue, sortByOrder } from 'src/utils'; import { + StyledCTAContainer, StyledProfileCard, StyledProfileCardAvailability, StyledProfileCardBusinessLines, @@ -63,6 +65,7 @@ export interface ProfileCardProps { department?: Department; job?: string; isAvailable: boolean; + displayHelps?: boolean; } const getLabelsDependingOnRole = (role: UserRole) => { @@ -100,6 +103,7 @@ export function ProfileCard({ userCandidate, job, isAvailable, + displayHelps, }: ProfileCardProps) { const { urlImg, fallbackToCVImage } = useImageFallback({ userId, @@ -241,37 +245,42 @@ export function ProfileCard({ )} - - - - - {labels.helps} - - - {helps && helps.length > 0 ? ( - helps.map(({ name }) => { - const help = findConstantFromValue(name, ProfileHelps); - return ( - - {help.icon} - - {help.label} - - - ); - }) - ) : ( - - - - - - {EMPTY_INFO} - - - )} - - + + {displayHelps ? ( + + + {labels.helps} + + + {helps && helps.length > 0 ? ( + helps.map(({ name }) => { + const help = findConstantFromValue(name, ProfileHelps); + return ( + + {help.icon} + + {help.label} + + + ); + }) + ) : ( + + + + + + {EMPTY_INFO} + + + )} + + + ) : ( + + + + )} diff --git a/src/constants/helps.tsx b/src/constants/helps.tsx index c58f697f7..34cbf8098 100644 --- a/src/constants/helps.tsx +++ b/src/constants/helps.tsx @@ -6,7 +6,7 @@ import { FilterConstant } from './utils'; export type HelpValue = 'tips' | 'interview' | 'cv' | 'network' | 'event'; -const iconSizeProps = { width: 45, height: 45 }; +const iconSizeProps = { width: 40, height: 40 }; export const ProfileHelps: (FilterConstant & { icon: JSX.Element; diff --git a/src/constants/styles.ts b/src/constants/styles.ts index f56c551b5..053cabf94 100644 --- a/src/constants/styles.ts +++ b/src/constants/styles.ts @@ -11,7 +11,7 @@ export const HEIGHTS = { OFFER_ADMIN_INFO_HEIGHT: 176, OFFER_INFO_HEIGHT: 156, OFFER_CTA_HEIGHT: 55, - DEFAULT_SECTION_PADDING: 40, + DEFAULT_SECTION_PADDING: 50, SECTION_PADDING: 24, SECTION_PADDING_MOBILE: 12, MESSAGING_DESKTOP_BORDER_SIZE: 3, diff --git a/src/pages/backoffice/annuaire.tsx b/src/pages/backoffice/annuaire.tsx index 020dfd0fe..c273cd268 100644 --- a/src/pages/backoffice/annuaire.tsx +++ b/src/pages/backoffice/annuaire.tsx @@ -1,10 +1,8 @@ import React from 'react'; import { LayoutBackOffice } from 'src/components/backoffice/LayoutBackOffice'; import { LoadingScreen } from 'src/components/backoffice/LoadingScreen'; -import { DirectoryContainer } from 'src/components/backoffice/directory/DirectoryContainer/DirectoryContainer'; +import { Directory } from 'src/components/backoffice/directory/Directory/Directory'; import { useDirectoryRoleRedirection } from 'src/components/backoffice/directory/useDirectoryRoleRedirection'; -import { HeaderBackoffice } from 'src/components/headers/HeaderBackoffice'; -import { Section } from 'src/components/utils'; import { useRole } from 'src/hooks/queryParams/useRole'; const Annuaire = () => { @@ -14,15 +12,7 @@ const Annuaire = () => { return ( -
- - {role ? : } -
+ {role ? : } ); }; From 0df1c6b3baa650f4fc30e17a6704f189ab037cf5 Mon Sep 17 00:00:00 2001 From: Guillaume Cauchois Date: Mon, 16 Dec 2024 15:03:27 +0100 Subject: [PATCH 2/2] fix: default role in Directory --- src/components/backoffice/directory/useDirectoryRole.ts | 6 ++---- src/pages/backoffice/annuaire.tsx | 6 +----- 2 files changed, 3 insertions(+), 9 deletions(-) diff --git a/src/components/backoffice/directory/useDirectoryRole.ts b/src/components/backoffice/directory/useDirectoryRole.ts index 798b4e056..16dd9e7e5 100644 --- a/src/components/backoffice/directory/useDirectoryRole.ts +++ b/src/components/backoffice/directory/useDirectoryRole.ts @@ -1,11 +1,9 @@ +import { USER_ROLES } from 'src/constants/users'; import { useRole } from 'src/hooks/queryParams/useRole'; -import { assertIsDefined } from 'src/utils/asserts'; // Failsafe to make sure that the role query param is set export function useDirectoryRole() { const roleFilter = useRole(); - assertIsDefined(roleFilter, 'No default role'); - - return roleFilter; + return roleFilter || [USER_ROLES.COACH]; } diff --git a/src/pages/backoffice/annuaire.tsx b/src/pages/backoffice/annuaire.tsx index c273cd268..bf16e52f6 100644 --- a/src/pages/backoffice/annuaire.tsx +++ b/src/pages/backoffice/annuaire.tsx @@ -1,18 +1,14 @@ import React from 'react'; import { LayoutBackOffice } from 'src/components/backoffice/LayoutBackOffice'; -import { LoadingScreen } from 'src/components/backoffice/LoadingScreen'; import { Directory } from 'src/components/backoffice/directory/Directory/Directory'; import { useDirectoryRoleRedirection } from 'src/components/backoffice/directory/useDirectoryRoleRedirection'; -import { useRole } from 'src/hooks/queryParams/useRole'; const Annuaire = () => { - const role = useRole(); - useDirectoryRoleRedirection(); return ( - {role ? : } + ); };