From 04b72dcf06cc79d07d9df690561a4a2ccfdb03ed Mon Sep 17 00:00:00 2001 From: Roland Schlaefli Date: Wed, 25 Oct 2023 14:44:16 +0200 Subject: [PATCH] enhance: update frontend layout of header and proposal cards --- src/components/Header.tsx | 55 +++++++++++------ src/components/NewProposalButton.tsx | 9 ++- src/components/ProposalCard.tsx | 2 +- src/components/StudentProposals.tsx | 82 ++++++++++++-------------- src/components/SupervisorProposals.tsx | 4 +- src/pages/index.tsx | 28 ++++----- 6 files changed, 98 insertions(+), 82 deletions(-) diff --git a/src/components/Header.tsx b/src/components/Header.tsx index 3a3efb1..c7429c8 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -1,27 +1,46 @@ -import { Button, H1 } from '@uzh-bf/design-system' +import { faQuestion } from '@fortawesome/free-solid-svg-icons' +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' +import { Button } from '@uzh-bf/design-system' import { signIn, signOut, useSession } from 'next-auth/react' +import { UserRole } from 'src/lib/constants' +import NewProposalButton from './NewProposalButton' export default function Header() { const { data: session } = useSession() + const isSupervisor = session?.user?.role === UserRole.SUPERVISOR + return ( -
-
-

DBF Thesis Market

-
- {session?.user ? ( - <> -
- Signed in as {session.user.email} ({session.user.role}) -
- - - ) : ( - <> - - - )} -
+
+
+ +
+
+ {session?.user && ( +
+ Signed in as {session.user.email} ({session.user.role}) +
+ )} + + + + {session?.user ? ( + + ) : ( + + )}
) diff --git a/src/components/NewProposalButton.tsx b/src/components/NewProposalButton.tsx index adaeee9..d5c9ef0 100644 --- a/src/components/NewProposalButton.tsx +++ b/src/components/NewProposalButton.tsx @@ -1,3 +1,5 @@ +import { faAdd } from '@fortawesome/free-solid-svg-icons' +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' import { Button } from '@uzh-bf/design-system' import Link from 'next/link' @@ -18,7 +20,12 @@ export default function NewProposalButton({ : (process.env.NEXT_PUBLIC_FORMS_URL_SUBMIT as string) } > - +
) diff --git a/src/components/ProposalCard.tsx b/src/components/ProposalCard.tsx index ead6885..222475c 100644 --- a/src/components/ProposalCard.tsx +++ b/src/components/ProposalCard.tsx @@ -27,7 +27,7 @@ export default function ProposalCard({ key={proposal.id} className={{ root: twMerge( - 'flex flex-col justify-between w-full md:w-64 p-2 text-sm', + 'flex flex-row md:flex-col justify-between w-full md:w-64 p-2 text-right md:text-center text-sm', (proposal.isOwnProposal || proposal.isSupervisedProposal) && 'border-orange-300', hasFeedback && 'bg-slate-100 border-slate-200' diff --git a/src/components/StudentProposals.tsx b/src/components/StudentProposals.tsx index 169d5b3..f98a8c1 100644 --- a/src/components/StudentProposals.tsx +++ b/src/components/StudentProposals.tsx @@ -3,7 +3,6 @@ import { RefObject } from 'react' import ProposalCard from './ProposalCard' interface StudentProposalsProps { - isSupervisor: boolean data: any groupedStudentProposals: any selectedProposal: string | null @@ -13,7 +12,6 @@ interface StudentProposalsProps { } export default function StudentProposals({ - isSupervisor, data, groupedStudentProposals, selectedProposal, @@ -21,49 +19,45 @@ export default function StudentProposals({ setDisplayMode, buttonRef, }: StudentProposalsProps) { - if (isSupervisor) { - return ( -
-

Student Proposals

-
- {data?.filter((proposal: any) => proposal.typeKey === 'STUDENT') - .length === 0 &&
No student proposals available...
} + return ( +
+

Student Proposals

+
+ {data?.filter((proposal: any) => proposal.typeKey === 'STUDENT') + .length === 0 &&
No student proposals available...
} - {[ - 'Banking and Insurance', - 'Corporate Finance', - 'Financial Economics', - 'Quantitative Finance', - 'Sustainable Finance', - ] - .filter( - (topicArea) => groupedStudentProposals?.[topicArea]?.length > 0 - ) - .map((topicArea) => ( -
-

{topicArea}

-
- {groupedStudentProposals?.[topicArea].map((proposal: any) => ( - { - setSelectedProposal(proposal.id), - setDisplayMode('details') - buttonRef?.current?.scrollIntoView({ - behavior: 'smooth', - }) - }} - /> - ))} -
+ {[ + 'Banking and Insurance', + 'Corporate Finance', + 'Financial Economics', + 'Quantitative Finance', + 'Sustainable Finance', + ] + .filter( + (topicArea) => groupedStudentProposals?.[topicArea]?.length > 0 + ) + .map((topicArea) => ( +
+

{topicArea}

+
+ {groupedStudentProposals?.[topicArea].map((proposal: any) => ( + { + setSelectedProposal(proposal.id), + setDisplayMode('details') + buttonRef?.current?.scrollIntoView({ + behavior: 'smooth', + }) + }} + /> + ))}
- ))} -
+
+ ))}
- ) - } else { - return null - } +
+ ) } diff --git a/src/components/SupervisorProposals.tsx b/src/components/SupervisorProposals.tsx index 8b8e70b..690aab5 100644 --- a/src/components/SupervisorProposals.tsx +++ b/src/components/SupervisorProposals.tsx @@ -21,7 +21,9 @@ export default function SupervisorProposals({ }: SupervisorProposalsProps) { return (
- {isSupervisor &&

Supervisor Proposals

} + {isSupervisor && ( +

Supervisor Proposals

+ )}
{data?.filter((proposal: any) => proposal.typeKey === 'SUPERVISOR') .length === 0 &&
No supervisor proposals available...
} diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 72f0aad..609bfc2 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -4,7 +4,6 @@ import { useRouter } from 'next/router' import * as R from 'ramda' import { useMemo, useRef, useState } from 'react' import Header from 'src/components/Header' -import NewProposalButton from 'src/components/NewProposalButton' import ProposalApplication from 'src/components/ProposalApplication' import ProposalFeedback from 'src/components/ProposalFeedback' import ProposalMeta from 'src/components/ProposalMeta' @@ -43,12 +42,6 @@ export default function Index() { }, [data]) const proposalDetails = useMemo(() => { - if ( - (!selectedProposal && displayMode === 'createStudent') || - displayMode === 'createSupervisor' - ) - return null - if (!selectedProposal) return setSelectedProposal(data?.[0]?.id as string) return data?.find((p) => p.id === selectedProposal) @@ -68,16 +61,17 @@ export default function Index() {
- - + {isSupervisor && ( + + )} +