feat: gray out old expiration events no longer relevant

This commit is contained in:
Maël Gangloff
2024-08-18 18:13:23 +02:00
parent 9063a05c8b
commit 7c2ec789f7
2 changed files with 38 additions and 38 deletions

View File

@@ -24,7 +24,7 @@ export function actionToColor(a: EventAction) {
export const domainEvent = () => ({
registration: t`Registration`,
reregistration: t`Reregistration`,
'last changed': t`Last changed`,
'last changed': t`Changed`,
expiration: t`Expiration`,
deletion: t`Deletion`,
reinstantiation: t`Reinstantiation`,
@@ -38,48 +38,48 @@ export const domainEvent = () => ({
export function EventTimeline({domain}: { domain: Domain }) {
const sm = useBreakpoint('sm')
const locale = navigator.language.split('-')[0]
const domainEventTranslated = domainEvent()
const domainEvents = domain.events.sort((e1, e2) => new Date(e2.date).getTime() - new Date(e1.date).getTime())
const expirationEvents = domainEvents.filter(e => e.action === 'expiration')
return <Timeline
mode={sm ? "left" : "right"}
items={domain.events
.sort((e1, e2) => new Date(e2.date).getTime() - new Date(e1.date).getTime())
.map(({action, date}) => {
let dot
if (action === 'registration') {
dot = <SignatureOutlined style={{fontSize: '16px'}}/>
} else if (action === 'expiration') {
dot = <ClockCircleOutlined style={{fontSize: '16px'}}/>
} else if (action === 'transfer') {
dot = <ShareAltOutlined style={{fontSize: '16px'}}/>
} else if (action === 'last changed') {
dot = <SyncOutlined style={{fontSize: '16px'}}/>
} else if (action === 'deletion') {
dot = <DeleteOutlined style={{fontSize: '16px'}}/>
} else if (action === 'reregistration') {
dot = <ReloadOutlined style={{fontSize: '16px'}}/>
}
const eventName = Object.keys(domainEventTranslated).includes(action) ? domainEventTranslated[action as keyof typeof domainEventTranslated] : action
const dateStr = new Date(date).toLocaleString(locale)
const text = sm ? {
children: <>{eventName}&emsp;{dateStr}</>
} : {
label: dateStr,
children: eventName,
}
return {
color: actionToColor(action),
dot,
pending: new Date(date).getTime() > new Date().getTime(),
...text
}
items={domainEvents.map(({action, date}) => {
let dot
if (action === 'registration') {
dot = <SignatureOutlined style={{fontSize: '16px'}}/>
} else if (action === 'expiration') {
dot = <ClockCircleOutlined style={{fontSize: '16px'}}/>
} else if (action === 'transfer') {
dot = <ShareAltOutlined style={{fontSize: '16px'}}/>
} else if (action === 'last changed') {
dot = <SyncOutlined style={{fontSize: '16px'}}/>
} else if (action === 'deletion') {
dot = <DeleteOutlined style={{fontSize: '16px'}}/>
} else if (action === 'reregistration') {
dot = <ReloadOutlined style={{fontSize: '16px'}}/>
}
)
const eventName = Object.keys(domainEventTranslated).includes(action) ? domainEventTranslated[action as keyof typeof domainEventTranslated] : action
const dateStr = new Date(date).toLocaleString(locale)
const text = sm ? {
children: <>{eventName}&emsp;{dateStr}</>
} : {
label: dateStr,
children: eventName,
}
return {
color: (action === 'expiration' ? (expirationEvents.length > 0 && domainEvents[0].date === date) : true) ? actionToColor(action) : 'grey',
dot,
pending: new Date(date).getTime() > new Date().getTime(),
...text
}
}
)
}
/>
}

View File

@@ -49,7 +49,7 @@ msgid "Reregistration"
msgstr ""
#: assets/components/search/EventTimeline.tsx:27
msgid "Last changed"
msgid "Changed"
msgstr ""
#: assets/components/search/EventTimeline.tsx:28