-
Notifications
You must be signed in to change notification settings - Fork 4
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
v3 - consultants in project #831
Changes from all commits
16f05f9
881748c
18b089c
1a816fc
68289af
165e467
feab346
bf6eb36
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,95 @@ | ||
import Image from "next/image"; | ||
import Link from "next/link"; | ||
|
||
import CustomLink from "src/components/link/CustomLink"; | ||
import Text from "src/components/text/Text"; | ||
import { ChewbaccaEmployee } from "src/types/employees"; | ||
import { aliasFromEmail } from "src/utils/employees"; | ||
import { LinkType } from "studio/lib/interfaces/navigation"; | ||
import { EMPLOYEE_PAGE_SLUG_QUERY } from "studio/lib/queries/siteSettings"; | ||
import { loadStudioQuery } from "studio/lib/store"; | ||
|
||
import styles from "./customerCaseConsulants.module.css"; | ||
|
||
export interface CustomerCaseConsultantsProps { | ||
language: string; | ||
consultants: ChewbaccaEmployee[]; | ||
} | ||
|
||
export default async function CustomerCaseConsultants({ | ||
language, | ||
consultants, | ||
}: CustomerCaseConsultantsProps) { | ||
const employeePageSlugRes = await loadStudioQuery<{ slug: string } | null>( | ||
EMPLOYEE_PAGE_SLUG_QUERY, | ||
{ | ||
language, | ||
}, | ||
); | ||
const employeePageSlug = employeePageSlugRes.data?.slug; | ||
|
||
return ( | ||
<div className={styles.wrapper}> | ||
<Text type={"h3"}>Varianter på prosjektet</Text> | ||
<div className={styles.content}> | ||
{consultants.map((consultant) => { | ||
const title = ( | ||
<p className={styles.consultantName}>{consultant.name}</p> | ||
); | ||
return ( | ||
consultant.imageThumbUrl && | ||
consultant.name && | ||
consultant.email && ( | ||
<div key={consultant.email} className={styles.consultant}> | ||
<div className={styles.consultantImage}> | ||
<Image | ||
src={consultant.imageUrl ?? consultant.imageThumbUrl} | ||
alt={consultant.name} | ||
objectFit="cover" | ||
fill={true} | ||
/> | ||
</div> | ||
<div className={styles.consultantInfo}> | ||
{employeePageSlug !== undefined ? ( | ||
<Link | ||
href={`/${language}/${employeePageSlug}/${aliasFromEmail(consultant.email)}`} | ||
> | ||
{title} | ||
</Link> | ||
) : ( | ||
title | ||
)} | ||
{consultant.officeName && ( | ||
<p className={styles.consultantRole}> | ||
{consultant.officeName} | ||
</p> | ||
)} | ||
{consultant.email && ( | ||
<p className={styles.consultantEmail}>{consultant.email}</p> | ||
)} | ||
{consultant.telephone && ( | ||
<p className={styles.consultantTelephone}> | ||
{consultant.telephone} | ||
</p> | ||
)} | ||
<CustomLink | ||
size={"small"} | ||
link={{ | ||
_key: "go-to-mini-cv", | ||
_type: "link", | ||
linkType: LinkType.Internal, | ||
linkTitle: "Gå til Mini-CV", | ||
internalLink: { | ||
_ref: `${language}/${employeePageSlug}/${aliasFromEmail(consultant.email)}`, | ||
}, | ||
}} | ||
/> | ||
</div> | ||
</div> | ||
) | ||
); | ||
})} | ||
</div> | ||
</div> | ||
); | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,60 @@ | ||
.wrapper { | ||
display: flex; | ||
flex-direction: column; | ||
gap: 2rem; | ||
margin: 4rem 0; | ||
} | ||
|
||
.content { | ||
width: 100%; | ||
text-wrap: wrap; | ||
column-gap: 12px; | ||
row-gap: 52px; | ||
display: grid; | ||
grid-template-columns: repeat(auto-fit, 350px); | ||
justify-content: space-between; | ||
} | ||
|
||
.consultant { | ||
display: flex; | ||
width: 100%; | ||
gap: 1rem; | ||
} | ||
|
||
.consultantImage { | ||
display: flex; | ||
flex-direction: column; | ||
align-items: center; | ||
background-color: var(--primary-black); | ||
border-radius: 12px; | ||
height: 125px; | ||
width: 50%; | ||
padding: 1rem; | ||
position: relative; | ||
} | ||
|
||
.consultantInfo { | ||
display: flex; | ||
flex-direction: column; | ||
width: 50%; | ||
gap: 0.5rem; | ||
} | ||
|
||
.consultantName { | ||
color: var(--primary-black); | ||
font-size: 16px; | ||
font-weight: 600; | ||
} | ||
|
||
.consultantRole { | ||
color: var(--primary-black); | ||
font-size: 16px; | ||
font-weight: 300; | ||
} | ||
|
||
.consultantEmail, | ||
.consultantTelephone { | ||
color: var(--primary-black); | ||
font-size: 14px; | ||
font-weight: 300; | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -68,9 +68,10 @@ export const customerCaseProjectInfo = defineField({ | |
defineField({ | ||
// TODO: We should be able to select the consultants from a list | ||
name: "consultants", | ||
description: "The consultants for the project", | ||
description: | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Do we need to use @variant.no or could we only use "amn"? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. We are not sure enough that they are unique across countries (e.g. [email protected] and [email protected] could be two different people). So going for the safer option now. The user experience may be a little worse, but that could be fixed with a dropdown/search solution (where the internal value does not matter to the user) There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Good point! |
||
"The consultants for the project. Use employee emails (e.g. '[email protected]').", | ||
type: "array", | ||
of: [{ type: "string" }], | ||
of: [{ type: "email" }], | ||
}), | ||
], | ||
}); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
isn't it enough to write consultantsResult?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Are you thinking just
consultantsResult && ...
?This is using the
Result
type, soconsultantsResult
will always be an object. So checking ifconsultantsResult
is truthy would always return true. The proper check withResult
is to check if.ok
is true.