created basic tree layout

webui/src/components/OperationTree.tsx

@@ -8,30 +8,78 @@ import { formatDate, formatTime } from "../lib/formatting";
 export const OperationTree = ({
   operations,
 }: React.PropsWithoutRef<{ operations: EOperation[] }>) => {
-  operations.sort((a, b) => b.parsedTime - a.parsedTime);
-  return <Tree treeData={buildTree(operations)}></Tree>;
+  operations = [...operations].reverse(); // reverse such that newest operations are at index 0.
+
+  const treeData = buildTreeYear(operations);
+  const keys = buildDefaultExpandedKeys(treeData);
+
+  return <Tree treeData={treeData} defaultExpandedKeys={keys}></Tree>;
 };
 
-// TODO: more work on this view
-const buildTree = (operations: EOperation[]): DataNode[] => {
+const buildDefaultExpandedKeys = (tree?: DataNode[]) => {
+  const keys: string[] = [];
+  while (tree && tree.length > 0) {
+    const node = tree[0];
+    keys.push(node.key as string);
+    tree = node.children!;
+  }
+  return keys;
+};
+
+const buildTreeYear = (operations: EOperation[]): DataNode[] => {
   const grouped = _.groupBy(operations, (op) => {
-    return new Date(op.parsedTime).toLocaleDateString("default", {
-      month: "long",
-      year: "numeric",
-      day: "numeric",
-    });
+    return op.parsedDate.getFullYear();
   });
 
-  return _.keys(grouped).map((key) => {
+  const entries: DataNode[] = _.map(grouped, (value, key) => {
     return {
-      key: key,
-      title: key,
-      children: grouped[key].map((op) => {
-        return {
-          key: op.id!,
-          title: <span>{formatTime(op.parsedTime)} - AN OPERATION</span>,
-        };
+      key: "y" + key,
+      title: "" + key,
+      children: buildTreeMonth(value),
+    };
+  });
+  return entries;
+};
+
+const buildTreeMonth = (operations: EOperation[]): DataNode[] => {
+  const grouped = _.groupBy(operations, (op) => {
+    return op.parsedDate.getMonth();
+  });
+  const entries: DataNode[] = _.map(grouped, (value, key) => {
+    return {
+      key: "m" + key,
+      title: value[0].parsedDate.toLocaleString("default", {
+        month: "long",
+        year: "numeric",
       }),
+      children: buildTreeDay(value),
+    };
+  });
+  return entries;
+};
+
+const buildTreeDay = (operations: EOperation[]): DataNode[] => {
+  const grouped = _.groupBy(operations, (op) => {
+    console.log("Operation date: " + formatDate(op.parsedTime));
+    return formatDate(op.parsedTime);
+  });
+
+  const entries = _.map(grouped, (value, key) => {
+    return {
+      key: "d" + key,
+      title: formatDate(value[0].parsedTime),
+      children: buildTreeLeaf(value),
+    };
+  });
+  return entries;
+};
+
+const buildTreeLeaf = (operations: EOperation[]): DataNode[] => {
+  return _.map(operations, (op) => {
+    return {
+      key: op.id!,
+      title: formatTime(op.parsedDate) + " - ",
+      isLeaf: true,
     };
   });
 };