feat: one-sided timeline on sm

This commit is contained in:
vinceh121
2024-07-30 06:28:00 +02:00
parent 84716708db
commit 21b7c3e001

View File

@@ -10,8 +10,10 @@ import {Timeline} from "antd";
import React from "react"; import React from "react";
import {Domain} from "../../utils/api"; import {Domain} from "../../utils/api";
import {t} from "ttag"; import {t} from "ttag";
import useBreakpoint from "../../hooks/useBreakpoint";
export function EventTimeline({domain}: { domain: Domain }) { export function EventTimeline({domain}: { domain: Domain }) {
const sm = useBreakpoint('sm')
const domainEvent = { const domainEvent = {
registration: t`Registration`, registration: t`Registration`,
@@ -30,7 +32,7 @@ export function EventTimeline({domain}: { domain: Domain }) {
const locale = navigator.language.split('-')[0] const locale = navigator.language.split('-')[0]
return <Timeline return <Timeline
mode="right" mode={sm ? "left" : "right"}
items={domain.events items={domain.events
.sort((e1, e2) => new Date(e2.date).getTime() - new Date(e1.date).getTime()) .sort((e1, e2) => new Date(e2.date).getTime() - new Date(e1.date).getTime())
.map(({action, date}) => { .map(({action, date}) => {
@@ -56,12 +58,21 @@ export function EventTimeline({domain}: { domain: Domain }) {
dot = <ReloadOutlined style={{fontSize: '16px'}}/> dot = <ReloadOutlined style={{fontSize: '16px'}}/>
} }
const eventName = Object.keys(domainEvent).includes(action) ? domainEvent[action as keyof typeof domainEvent] : action
const dateStr = new Date(date).toLocaleString(locale)
const text = sm ? {
children: <>{eventName}&emsp;{dateStr}</>
} : {
label: dateStr,
children: eventName,
}
return { return {
label: new Date(date).toLocaleString(locale),
children: Object.keys(domainEvent).includes(action) ? domainEvent[action as keyof typeof domainEvent] : action,
color, color,
dot, dot,
pending: new Date(date).getTime() > new Date().getTime() pending: new Date(date).getTime() > new Date().getTime(),
...text
} }
} }
) )