Merge pull request #2551 from apuliasoft/fix/kup-activity-timeline-da…

…te-time LS25001009: Fix/kup activity timeline date and time columns
smeup · Mar 3, 2025 · f44a3a4 · f44a3a4
2 parents cebafff + ff4d2df
commit f44a3a4
Show file tree

Hide file tree

Showing 2 changed files with 86 additions and 41 deletions.
diff --git a/packages/ketchup/src/components/kup-activity-timeline/kup-activity-timeline-declarations.ts b/packages/ketchup/src/components/kup-activity-timeline/kup-activity-timeline-declarations.ts
@@ -5,7 +5,7 @@ export enum KupActivityTimelineProps {
     data = 'Dataset containing the activities list',
     dateColumn = 'Column containing dates',
     timeColumn = 'Column containing times',
-    sortOrder = 'Order for sorting',
+    sort = 'Order for sorting',
 }
 
 export interface KupActivityTimelineData {
@@ -16,7 +16,7 @@ export interface KupActivityTimelineData {
 }
 
 export interface KupActivityTimelineActivity {
-    columns: KupActivityTimelineData[];
+    cells: KupActivityTimelineData[];
 }
 
 export interface KupActivityTimelineDatapoint {

diff --git a/packages/ketchup/src/components/kup-activity-timeline/kup-activity-timeline.tsx b/packages/ketchup/src/components/kup-activity-timeline/kup-activity-timeline.tsx
@@ -160,41 +160,86 @@ export class KupActivityTimeline {
 
     #toTimeline(data: KupDataDataset): KupActivityTimelineDatapoint[] {
         const { columns, rows } = data;
-        const dateColumn = columns.find((col) => col.name === this.dateColumn);
-        const timeColumn = columns.find((col) => col.name === this.timeColumn);
-
-        if (!dateColumn || !timeColumn) return [];
-
-        const activitiesByDate = sortRows(rows, this.sort).reduce(
-            (acc, row) => {
-                const date = getCellValueForDisplay(
-                    dateColumn,
-                    row.cells[dateColumn.name]
-                );
-                const time = getCellValueForDisplay(
-                    timeColumn,
-                    row.cells[timeColumn.name]
-                );
-                const key = `${date} ${time}`;
-
-                acc[key] = acc[key] || [];
-                acc[key].push({
-                    columns: columns
-                        .filter((col) => col.visible !== false)
-                        .map((col) => ({
-                            title: col.title,
-                            value: getCellValueForDisplay(
-                                col,
-                                row.cells[col.name]
-                            ),
-                            columnName: col.name,
-                            rowId: row.id,
-                        })),
-                } as KupActivityTimelineActivity);
-
-                return acc;
+
+        if (!rows) {
+            this.#kupManager.debug.logMessage(
+                this,
+                'Empty rows',
+                KupDebugCategory.ERROR
+            );
+            return [];
+        }
+
+        const dateColumn = columns.find(
+            (col) =>
+                this.#kupManager.objects.isDate(col.obj) &&
+                col.name === this.dateColumn
+        );
+        const timeColumn = columns.find(
+            (col) =>
+                this.#kupManager.objects.isTime(col.obj) &&
+                col.name === this.timeColumn
+        );
+
+        if (!dateColumn && !timeColumn) {
+            this.#kupManager.debug.logMessage(
+                this,
+                'At least one of "dateColumn" or "timeColumn" must be set and exist in the dataset',
+                KupDebugCategory.ERROR
+            );
+            return [];
+        }
+
+        const filteredSort = this.sort.filter(({ column }) =>
+            // Filter only the existing columns
+            columns.some((col) => col.name === column)
+        );
+
+        const activitiesByDate = sortRows(rows, filteredSort).reduce<
+            Record<string, KupActivityTimelineActivity[]>
+        >(
+            (activitiesByDate, row) => {
+                const dateValue = dateColumn
+                    ? getCellValueForDisplay(
+                          dateColumn,
+                          row.cells[dateColumn.name]
+                      )
+                    : '';
+                const timeValue = timeColumn
+                    ? getCellValueForDisplay(
+                          timeColumn,
+                          row.cells[timeColumn.name]
+                      )
+                    : '';
+                const key = `${dateValue} ${timeValue}`.trim();
+
+                activitiesByDate[key].push({
+                    cells: columns
+                        .filter((col) => col.visible)
+                        .map(
+                            (col): KupActivityTimelineData => ({
+                                title: col.title,
+                                value: getCellValueForDisplay(
+                                    col,
+                                    row.cells[col.name]
+                                ),
+                                columnName: col.name,
+                                rowId: row.id,
+                            })
+                        ),
+                });
+
+                return activitiesByDate;
             },
-            {}
+            new Proxy(
+                {},
+                {
+                    get: (target, key: string) => {
+                        // Set default value if it doesn't exist yet
+                        return target[key] ?? (target[key] = []);
+                    },
+                }
+            )
         );
 
         return Object.entries(activitiesByDate).map(([date, activities]) => ({
@@ -242,22 +287,22 @@ export class KupActivityTimeline {
     activityItem(activity: KupActivityTimelineActivity) {
         return (
             <div class="atm-row">
-                {activity.columns.map((column: KupActivityTimelineData) => (
+                {activity.cells.map((cell: KupActivityTimelineData) => (
                     <div class="atm-col">
                         <div class="atm-inner-col">
-                            <h3>{column.title}:</h3>
+                            <h3>{cell.title}:</h3>
                         </div>
                         <div
                             class="atm-inner-col"
                             onClick={(e) => {
                                 e.stopPropagation();
-                                this.onActivityClick(e, column);
+                                this.onActivityClick(e, cell);
                             }}
                             onContextMenu={(e) => {
-                                this.onActivityContextMenu(e, column);
+                                this.onActivityContextMenu(e, cell);
                             }}
                         >
-                            <p>{column.value}</p>
+                            <p>{cell.value}</p>
                         </div>
                     </div>
                 ))}