Skip to content

Commit

Permalink
Merge pull request #621 from nowcommunity/headers
Browse files Browse the repository at this point in the history 
New headers
  • Loading branch information
@iritmaximus
iritmaximus authored Dec 3, 2024
2 parents 6305f03 + 640b180 commit ce367df
Show file tree
Hide file tree
Showing 3 changed files with 159 additions and 20 deletions.
32 changes: 18 additions & 14 deletions frontend/src/components/DetailView/DetailBrowser.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Box, Button } from '@mui/material'
import { Box, Button, Stack } from '@mui/material'
import ArrowBackIcon from '@mui/icons-material/ArrowBack'
import ArrowForwardIcon from '@mui/icons-material/ArrowForward'
import { useDetailContext } from './Context/DetailContext'
Expand All @@ -9,37 +9,38 @@ export const DetailBrowser = <T extends object>() => {
const { data, mode } = useDetailContext<T>()
const navigate = useNavigate()
const location = useLocation()
const { idList, idFieldName, viewName, createTitle } = usePageContext<T>()
const { idList, idFieldName, viewName, createTitle, createSubtitle } = usePageContext<T>()
const idListExists = idList?.length > 0
const currentIndex = idList.indexOf((data as { [key: string]: string })[idFieldName])
const nextIndex = currentIndex + 1
const previousIndex = currentIndex - 1
const style = {
width: '18em',
width: '50em',
marginLeft: '0em',
overflow: 'hidden',
whiteSpace: 'nowrap',
whiteSpace: 'pre-wrap',
textOverflow: 'ellipsis',
position: 'relative',
textAlign: 'left',
fontSize: '2.3em',
'&::after': {
content: '""',
position: 'absolute',
right: 0,
width: '20%',
height: '100%',
background: 'linear-gradient(to right, transparent, white 50%)',
},
}
const getText = () => {
const getTitleText = () => {
if (mode.read) {
return `${createTitle(data)}`
} else if (mode.new) {
return `Creating new ${viewName}`
}
return `${createTitle(data)}`
}

const getSubtitleText = () => {
if (mode.read) {
return `${createSubtitle(data)}`
} else if (mode.new) {
return ''
}
return `${createSubtitle(data)}`
}
const search = location.search

return (
Expand All @@ -52,7 +53,10 @@ export const DetailBrowser = <T extends object>() => {
gap: '1em',
}}
>
<Box sx={style}>{getText()}</Box>
<Stack sx={{ gap: '0.5em', width: '85%' }}>
<Box sx={style}>{getTitleText()}</Box>
<Box sx={{ ...style, fontSize: '1.2em' }}>{getSubtitleText()}</Box>
</Stack>
{idListExists && mode.read && (
<div>
{previousIndex >= 0 && (
Expand Down
7 changes: 7 additions & 0 deletions frontend/src/components/Page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ export type PageContextType<T> = {
tableUrl: string
setTableUrl: (newUrl: string) => void
createTitle: (data: T) => string
createSubtitle: (data: T) => string
editRights: EditRights
}

Expand All @@ -25,12 +26,14 @@ export const PageContextProvider = <T extends object>({
idFieldName,
viewName,
createTitle,
createSubtitle,
editRights,
}: {
children: ReactNode | ReactNode[]
idFieldName: string
viewName: string
createTitle: (data: T) => string
createSubtitle: (data: T) => string
editRights: EditRights
}) => {
const [idList, setIdList] = useState<string[]>([])
Expand All @@ -47,6 +50,7 @@ export const PageContextProvider = <T extends object>({
tableUrl,
setTableUrl: (newUrl: string) => setTableUrl(newUrl),
createTitle: (data: unknown) => createTitle(data as T),
createSubtitle: (data: unknown) => createSubtitle(data as T),
}}
>
{children}
Expand All @@ -68,6 +72,7 @@ export const Page = <T extends Record<string, unknown>>({
idFieldName,
viewName,
createTitle,
createSubtitle,
allowedRoles,
getEditRights,
}: {
Expand All @@ -76,6 +81,7 @@ export const Page = <T extends Record<string, unknown>>({
idFieldName: keyof T
viewName: string
createTitle: (data: T) => string
createSubtitle?: (data: T) => string
allowedRoles?: Role[]
getEditRights: (user: UserState, id: string | number) => EditRights
}) => {
Expand All @@ -90,6 +96,7 @@ export const Page = <T extends Record<string, unknown>>({
idFieldName={idFieldName as string}
viewName={viewName}
createTitle={createTitle}
createSubtitle={createSubtitle ? createSubtitle : () => ''}
>
{id ? detailView : tableView}
</PageContextProvider>
Expand Down
140 changes: 134 additions & 6 deletions frontend/src/components/pages.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,10 @@ export const localityPage = (
detailView={<LocalityDetails />}
viewName="locality"
idFieldName="lid"
createTitle={(loc: LocalityDetailsType) => `${loc.loc_name}`}
createTitle={(loc: LocalityDetailsType) => `${loc.lid} ${loc.loc_name}, ${loc.country}`}
createSubtitle={(loc: LocalityDetailsType) =>
`${loc.dms_lat}, ${loc.dms_long}\n${loc.max_age} Ma (${loc.bfa_max}) – ${loc.min_age} Ma (${loc.bfa_min})`
}
getEditRights={(user: UserState, id: string | number) => {
if ([Role.Admin, Role.EditUnrestricted].includes(user.role)) return fullRights
if (user.role === Role.EditRestricted && user.localities.includes(id as number)) return limitedRights
Expand All @@ -54,7 +57,10 @@ export const crossSearchPage = (
detailView={<LocalityDetails />}
viewName="crosssearch"
idFieldName="lid"
createTitle={(loc: LocalityDetailsType) => `${loc.loc_name}`}
createTitle={(loc: LocalityDetailsType) => `${loc.lid} ${loc.loc_name}, ${loc.country}`}
createSubtitle={(loc: LocalityDetailsType) =>
`${loc.dms_lat}, ${loc.dms_long}` + `\n${loc.max_age} Ma (${loc.bfa_max}) – ${loc.min_age} Ma (${loc.bfa_min})`
}
getEditRights={(user: UserState, id: string | number) => {
if ([Role.Admin, Role.EditUnrestricted].includes(user.role)) return fullRights
if (user.role === Role.EditRestricted && user.localities.includes(id as number)) return limitedRights
Expand All @@ -69,7 +75,14 @@ export const speciesPage = (
detailView={<SpeciesDetails />}
viewName="species"
idFieldName="species_id"
createTitle={(species: SpeciesDetailsType) => `${species.genus_name + ' ' + species.species_name}`}
createTitle={(species: SpeciesDetailsType) =>
`${species.species_id} ${species.genus_name} ${species.species_name}` + `\n${species.unique_identifier}`
}
createSubtitle={(species: SpeciesDetailsType) =>
`Order ${species.order_name}` +
`\nFamily ${species.family_name}` +
`\nSubfamily or Tribe ${species.subfamily_name}`
}
getEditRights={(user: UserState) => {
if ([Role.Admin, Role.EditUnrestricted].includes(user.role)) return fullRights
if (user.role === Role.EditRestricted) return limitedRights
Expand All @@ -78,13 +91,125 @@ export const speciesPage = (
/>
)

// from UpdateTab
const makeNameList = (names: Array<string | null | undefined>) => {
if (names.length === 3) {
return `${names[0]}, ${names[1]} & ${names[2]}`
} else if (names.length >= 4) {
return `${names[0]} et al.`
} else if (names.length === 2) {
return `${names[0]} & ${names[1]}`
}
return names[0] ?? ''
}

const createReferenceSubtitle = (ref: ReferenceDetailsType) => {
const authorsSurnames = ref.ref_authors.filter(author => author.field_id === 2).map(author => author.author_surname)
const editorsSurnames = ref.ref_authors.filter(author => author.field_id === 12).map(author => author.author_surname)
const authorsPart = `${makeNameList(authorsSurnames)}`
const editorsPart = `${makeNameList(editorsSurnames)} ${editorsSurnames.length > 1 ? '(eds)' : '(ed)'}`

let title = `${authorsPart} (${ref.date_primary}).`

switch (ref.ref_type_id) {
case 1: // Journal
title += ` ${ref.title_primary}. ${ref.ref_journal.journal_title}`
if (ref.volume) {
title += ` ${ref.volume}`
}
if (ref.issue) {
title += ` (${ref.issue})`
}
if (ref.start_page || ref.end_page) {
title += `: `
}
if (ref.start_page) {
title += `${ref.start_page}-`
}
if (ref.end_page) {
title += `${ref.end_page}`
}
if (ref.volume || ref.issue || ref.start_page || ref.end_page) {
title += `.`
}
return title
case 2: // Book
title += ` ${ref.title_primary}.`
if (ref.publisher || ref.pub_place) {
title += ` `
}
if (ref.publisher) {
title += `${ref.publisher}`
}
if (ref.publisher && ref.pub_place) {
title += `, `
}
if (ref.pub_place) {
title += `${ref.pub_place}`
}
if (ref.publisher || ref.pub_place) {
title += `.`
}
return title
case 3: // Book Chapter
title += ` ${ref.title_primary}. IN: ${editorsPart} ${ref.title_secondary}.`

if (ref.start_page || ref.end_page) {
title += ` pp.`
}
if (ref.start_page) {
title += `${ref.start_page}`
}
if (ref.start_page && ref.end_page) {
title += `-`
}
if (ref.end_page) {
title += `${ref.end_page}`
}
if (ref.start_page || ref.end_page) {
title += `.`
}
if (ref.publisher || ref.pub_place) {
title += ` `
}
if (ref.publisher) {
title += `${ref.publisher}`
}
if (ref.publisher && ref.pub_place) {
title += `, `
}
if (ref.pub_place) {
title += `${ref.pub_place}`
}
if (ref.publisher || ref.pub_place) {
title += `.`
}
return title
default:
if (ref.title_primary) {
title += ` ${ref.title_primary}.`
}
if (ref.title_secondary) {
title += ` ${ref.title_secondary}.`
}
if (ref.title_series) {
title += ` ${ref.title_series}.`
}
if (ref.gen_notes) {
title += ` ${ref.gen_notes}.`
}
return title
}
}

export const referencePage = (
<Page
tableView={<ReferenceTable />}
detailView={<ReferenceDetails />}
viewName="reference"
idFieldName="rid"
createTitle={(ref: ReferenceDetailsType) => `${ref.title_primary}`}
createTitle={(ref: ReferenceDetailsType) => `${ref.rid}`}
createSubtitle={createReferenceSubtitle}
getEditRights={(user: UserState) => {
if ([Role.Admin, Role.EditUnrestricted].includes(user.role)) return fullRights
if (user.role === Role.EditRestricted) return { new: true }
Expand All @@ -99,7 +224,10 @@ export const timeUnitPage = (
detailView={<TimeUnitDetails />}
viewName="time-unit"
idFieldName="tu_name"
createTitle={(tu: TimeUnitDetailsType) => `${tu.tu_display_name}`}
createTitle={(tu: TimeUnitDetailsType) => `(${tu.tu_name}) ${tu.tu_display_name} - ${tu.tu_comment}`}
createSubtitle={(tu: TimeUnitDetailsType) =>
`${tu.up_bnd} Ma – ${tu.low_bnd} Ma` + `\n${tu.sequence}` + `\n${tu.rank}`
}
getEditRights={(user: UserState) => {
if ([Role.Admin, Role.EditUnrestricted].includes(user.role)) return fullRights
return noRights
Expand All @@ -114,7 +242,7 @@ export const timeBoundPage = (
detailView={<TimeBoundDetails />}
viewName="time-bound"
idFieldName="bid"
createTitle={(tb: TimeBoundDetailsType) => `${tb.b_name}`}
createTitle={(tb: TimeBoundDetailsType) => `${tb.bid} ${tb.b_name}`}
getEditRights={(user: UserState) => {
if ([Role.Admin, Role.EditUnrestricted].includes(user.role)) return fullRights
return noRights
Expand Down

0 comments on commit ce367df

Please sign in to comment.