jntn/zendegi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

normalize data

Browse Source
This commit is contained in:
Jonatan Granqvist
2026-03-02 11:05:57 +01:00
parent 22067c4904
commit dbfb29703c
7 changed files with 197 additions and 167 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
packages/z-timeline/lib/main.dart
View File

@@ -45,8 +45,8 @@ class _MainAppState extends State<MainApp> {
}
void _applyState(TimelineState state) {
final groups = _convertGroups(state.timeline.groups);
final entries = _convertEntries(state.timeline.groups);
final groups = _convertGroups(state);
final entries = _convertEntries(state);
final domain = _computeDomain(entries);
setState(() {
@@ -63,32 +63,35 @@ class _MainAppState extends State<MainApp> {
_emitContentHeight();
}
List<TimelineGroup> _convertGroups(List<TimelineGroupData> groups) {
return [for (final g in groups) TimelineGroup(id: g.id, title: g.title)];
/// Build an ordered list of [TimelineGroup] using [groupOrder].
List<TimelineGroup> _convertGroups(TimelineState state) {
return [
for (final id in state.groupOrder)
if (state.groups[id] case final g?)
TimelineGroup(id: g.id, title: g.title),
];
}
List<TimelineEntry> _convertEntries(List<TimelineGroupData> groups) {
final entries = <TimelineEntry>[];
for (final group in groups) {
for (final item in group.items) {
final start = DateTime.parse(item.start);
final end = item.end != null
? DateTime.parse(item.end!)
: start.add(const Duration(days: 1));
/// Build a flat list of [TimelineEntry] from the normalized items map.
List<TimelineEntry> _convertEntries(TimelineState state) {
return [
for (final item in state.items.values)
() {
final start = DateTime.parse(item.start);
final end = item.end != null
? DateTime.parse(item.end!)
: start.add(const Duration(days: 1));
entries.add(
TimelineEntry(
return TimelineEntry(
id: item.id,
groupId: group.id,
groupId: item.groupId,
start: start,
end: end,
lane: item.lane,
hasEnd: item.end != null,
),
);
}
}
return entries;
);
}(),
];
}
({DateTime start, DateTime end}) _computeDomain(List<TimelineEntry> entries) {
@@ -156,16 +159,9 @@ class _MainAppState extends State<MainApp> {
emitEvent('content_height', {'height': totalHeight});
}
/// O(1) label lookup from the normalized items map.
String _labelForEntry(TimelineEntry entry) {
final state = _state;
if (state == null) return entry.id;
for (final group in state.timeline.groups) {
for (final item in group.items) {
if (item.id == entry.id) return item.title;
}
}
return entry.id;
return _state?.items[entry.id]?.title ?? entry.id;
}
static const _groupColors = [

44
packages/z-timeline/lib/state.dart
View File

@@ -1,12 +1,40 @@
// Bridge data-transfer types deserialized from JSON pushed by the React host.
//
// The shape is normalized: groups and items are stored as maps keyed by
// ID, with groupOrder preserving display ordering.
//
// Keep in sync with `apps/web/src/lib/flutter-bridge.ts`.
class TimelineState {
final TimelineData timeline;
final Map<String, TimelineGroupData> groups;
final Map<String, TimelineItemData> items;
final List<String> groupOrder;
final String? selectedItemId;
TimelineState({required this.timeline, this.selectedItemId});
TimelineState({
required this.timeline,
required this.groups,
required this.items,
required this.groupOrder,
this.selectedItemId,
});
factory TimelineState.fromJson(Map<String, dynamic> json) {
final rawGroups = json['groups'] as Map<String, dynamic>;
final rawItems = json['items'] as Map<String, dynamic>;
return TimelineState(
timeline: TimelineData.fromJson(json['timeline'] as Map<String, dynamic>),
groups: rawGroups.map(
(k, v) =>
MapEntry(k, TimelineGroupData.fromJson(v as Map<String, dynamic>)),
),
items: rawItems.map(
(k, v) =>
MapEntry(k, TimelineItemData.fromJson(v as Map<String, dynamic>)),
),
groupOrder: (json['groupOrder'] as List<dynamic>).cast<String>(),
selectedItemId: json['selectedItemId'] as String?,
);
}
@@ -15,17 +43,13 @@ class TimelineState {
class TimelineData {
final String id;
final String title;
final List<TimelineGroupData> groups;
TimelineData({required this.id, required this.title, required this.groups});
TimelineData({required this.id, required this.title});
factory TimelineData.fromJson(Map<String, dynamic> json) {
return TimelineData(
id: json['id'] as String,
title: json['title'] as String,
groups: (json['groups'] as List<dynamic>)
.map((g) => TimelineGroupData.fromJson(g as Map<String, dynamic>))
.toList(),
);
}
}
@@ -34,13 +58,11 @@ class TimelineGroupData {
final String id;
final String title;
final int sortOrder;
final List<TimelineItemData> items;
TimelineGroupData({
required this.id,
required this.title,
required this.sortOrder,
required this.items,
});
factory TimelineGroupData.fromJson(Map<String, dynamic> json) {
@@ -48,15 +70,13 @@ class TimelineGroupData {
id: json['id'] as String,
title: json['title'] as String,
sortOrder: json['sortOrder'] as int,
items: (json['items'] as List<dynamic>)
.map((i) => TimelineItemData.fromJson(i as Map<String, dynamic>))
.toList(),
);
}
}
class TimelineItemData {
final String id;
final String groupId;
final String title;
final String? description;
final String start;
@@ -65,6 +85,7 @@ class TimelineItemData {
TimelineItemData({
required this.id,
required this.groupId,
required this.title,
this.description,
required this.start,
@@ -75,6 +96,7 @@ class TimelineItemData {
factory TimelineItemData.fromJson(Map<String, dynamic> json) {
return TimelineItemData(
id: json['id'] as String,
groupId: json['groupId'] as String,
title: json['title'] as String,
description: json['description'] as String?,
start: json['start'] as String,

96
packages/z-timeline/web/index.html
View File

@@ -42,44 +42,26 @@
if (window.__zendegi__) return;
var state = {
timeline: {
id: "tl-1",
title: "My Project",
groups: [
{
id: "g-1",
title: "Design",
sortOrder: 0,
items: [
{ id: "e-1", title: "Brand identity", start: "2026-01-02", end: "2026-01-08", lane: 1 },
{ id: "e-2", title: "UI mockups", start: "2026-01-06", end: "2026-01-14", lane: 2 },
{ id: "e-3", title: "Design review", start: "2026-01-20", end: "2026-01-22", lane: 1 },
{ id: "e-10", title: "Kickoff meeting", start: "2026-01-01", end: null, lane: 3 },
],
},
{
id: "g-2",
title: "Engineering",
sortOrder: 1,
items: [
{ id: "e-4", title: "API scaffolding", start: "2026-01-05", end: "2026-01-12", lane: 1 },
{ id: "e-5", title: "Auth flow", start: "2026-01-10", end: "2026-01-18", lane: 2 },
{ id: "e-6", title: "Dashboard UI", start: "2026-01-15", end: "2026-01-25", lane: 3 },
],
},
{
id: "g-3",
title: "Launch",
sortOrder: 2,
items: [
{ id: "e-7", title: "QA testing", start: "2026-01-19", end: "2026-01-26", lane: 1 },
{ id: "e-8", title: "Beta release", start: "2026-01-24", end: "2026-01-28", lane: 2 },
{ id: "e-9", title: "Marketing prep", start: "2026-01-08", end: "2026-01-15", lane: 1 },
{ id: "e-11", title: "Go-live", start: "2026-01-28", end: null, lane: 3 },
],
},
],
timeline: { id: "tl-1", title: "My Project" },
groups: {
"g-1": { id: "g-1", title: "Design", sortOrder: 0 },
"g-2": { id: "g-2", title: "Engineering", sortOrder: 1 },
"g-3": { id: "g-3", title: "Launch", sortOrder: 2 },
},
items: {
"e-1": { id: "e-1", groupId: "g-1", title: "Brand identity", start: "2026-01-02", end: "2026-01-08", lane: 1 },
"e-2": { id: "e-2", groupId: "g-1", title: "UI mockups", start: "2026-01-06", end: "2026-01-14", lane: 2 },
"e-3": { id: "e-3", groupId: "g-1", title: "Design review", start: "2026-01-20", end: "2026-01-22", lane: 1 },
"e-10": { id: "e-10", groupId: "g-1", title: "Kickoff meeting", start: "2026-01-01", end: null, lane: 3 },
"e-4": { id: "e-4", groupId: "g-2", title: "API scaffolding", start: "2026-01-05", end: "2026-01-12", lane: 1 },
"e-5": { id: "e-5", groupId: "g-2", title: "Auth flow", start: "2026-01-10", end: "2026-01-18", lane: 2 },
"e-6": { id: "e-6", groupId: "g-2", title: "Dashboard UI", start: "2026-01-15", end: "2026-01-25", lane: 3 },
"e-7": { id: "e-7", groupId: "g-3", title: "QA testing", start: "2026-01-19", end: "2026-01-26", lane: 1 },
"e-8": { id: "e-8", groupId: "g-3", title: "Beta release", start: "2026-01-24", end: "2026-01-28", lane: 2 },
"e-9": { id: "e-9", groupId: "g-3", title: "Marketing prep", start: "2026-01-08", end: "2026-01-15", lane: 1 },
"e-11": { id: "e-11", groupId: "g-3", title: "Go-live", start: "2026-01-28", end: null, lane: 3 },
},
groupOrder: ["g-1", "g-2", "g-3"],
selectedItemId: null,
};
@@ -96,39 +78,17 @@
if (event.type === "entry_moved") {
var p = event.payload;
var entry = null;
var sourceGroup = null;
// Find and remove the entry from its current group
for (var i = 0; i < state.timeline.groups.length; i++) {
var g = state.timeline.groups[i];
for (var j = 0; j < g.items.length; j++) {
if (g.items[j].id === p.entryId) {
entry = g.items.splice(j, 1)[0];
sourceGroup = g;
break;
}
}
if (entry) break;
}
if (entry) {
// Update start/end from payload (ISO 8601 → date-only)
entry.start = new Date(p.newStart).toISOString().split("T")[0];
entry.end = p.newEnd
var item = state.items[p.entryId];
if (item) {
// Update in place — normalized makes this trivial
item.start = p.newStart
? new Date(p.newStart).toISOString().split("T")[0]
: item.start;
item.end = p.newEnd
? new Date(p.newEnd).toISOString().split("T")[0]
: null;
// Preserve the lane from the drop target
entry.lane = p.newLane;
// Add to target group
var targetGroup = state.timeline.groups.find(
function (g) { return g.id === p.newGroupId; }
);
if (targetGroup) {
targetGroup.items.push(entry);
}
item.groupId = p.newGroupId;
item.lane = p.newLane;
// Push updated state back to Flutter
if (_updateState) {