Bases: Component
A vertical timeline container that renders a list of objects as chronological points.
Source code in components/timeline.py
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88 | class Timeline(Component):
"""A vertical timeline container that renders a list of objects as chronological points."""
def __init__(
self,
title: Optional[str] = None,
filter_component: Optional[Component] = None,
**kwargs,
):
super().__init__(**kwargs)
self.title = title
self.filter_component = filter_component
def get_row_url(self, row: Any) -> Optional[str]:
if hasattr(self.url, "__call__"):
return self.url(row)
return self.url
def render_html(self, **kwargs) -> str:
data = self.get_value(**kwargs)
header_html = ""
if self.title or self.filter_component:
title_html = (
f'<div class="text-xl font-semibold">{self.title}</div>'
if self.title
else ""
)
filter_html = ""
if self.filter_component:
filter_html = self.filter_component.render(**kwargs)
header_html = f"""
<div class="flex justify-between items-center mb-4">
{title_html}
{filter_html}
</div>
"""
cards_html = ""
if not data:
cards_html = '<div class="text-center text-base-content/60 py-8">No items found</div>'
else:
for item in data:
item_kwargs = kwargs.copy()
item_kwargs["object"] = item
children_html = ""
for child in self.children or []:
children_html += child.render(**item_kwargs)
item_url = self.get_row_url(item)
clickable_attrs = ""
clickable_classes = ""
if item_url:
clickable_attrs = f'hx-get="{item_url}" hx-target="#app-layout" hx-push-url="true"'
clickable_classes = "cursor-pointer hover:border-primary hover:shadow-md transition-all"
cards_html += f"""
<div class="timeline-item relative flex items-center gap-4 pb-6 last:pb-0">
<div class="timeline-indicator relative z-10 flex items-center">
<div class="w-3 h-3 rounded-full bg-primary"></div>
<div class="h-0.5 w-4 bg-primary"></div>
</div>
<div class="timeline-card flex-1 p-4 rounded-box border border-base-300 bg-base-100 shadow-sm {clickable_classes}" {clickable_attrs}>
{children_html}
</div>
</div>"""
vertical_line = (
'<div class="absolute left-[5px] top-0 bottom-0 w-0.5 bg-primary/30"></div>'
if data
else ""
)
return f"""<div id="{self.uid}" class="timeline-container {self.classes}">
{header_html}
<div class="timeline-scroll relative">
{vertical_line}
{cards_html}
</div>
</div>"""
|