Added Day, Week, Month View

yoen-velt · yoen-velt · commit a0c805b7527a · 2025-10-25T20:52:16.000-07:00
diff --git a/apps/react/tables/libraries/AgGrid/marketing-spend-demo/components/document/day-view-table-component.tsx b/apps/react/tables/libraries/AgGrid/marketing-spend-demo/components/document/day-view-table-component.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import React, { useEffect, useMemo, useCallback } from 'react';
+import React, { useEffect, useMemo, useCallback, useState } from 'react';
 import { VeltComments, useVeltClient } from '@veltdev/react';
 import { AgGridReact } from 'ag-grid-react';
 import { AllCommunityModule, ModuleRegistry } from 'ag-grid-community';
@@ -11,18 +11,20 @@ ModuleRegistry.registerModules([AllCommunityModule]);
 
 // Import modularized components and utilities
 import { customDarkTheme } from './constants';
-import { dateComparator } from './utils';
+import { dateComparator, generateTableData, generateWeeklyTableData, generateMonthlyTableData } from './utils';
 import { createCustomHeaderComponent } from './grid-components/CustomHeaderComponent';
 import { RowNumberRenderer } from './grid-components/RowNumberRenderer';
 import { createVeltCellRenderer } from './grid-components/VeltCellRenderer';
 import { Breadcrumb } from './ui-components/Breadcrumb';
-import { ViewToggle } from './ui-components/ViewToggle';
+import { ViewToggle, ViewType } from './ui-components/ViewToggle';
 import { Toolbar } from './ui-components/Toolbar';
 import { styles } from './styles';
 import { useTableState } from './hooks/useTableState';
 
 export const TableComponent: React.FC = () => {
   const { client } = useVeltClient();
+  const [activeView, setActiveView] = useState<ViewType>('day');
+
   const {
     selectedCell,
     setSelectedCell,
@@ -39,6 +41,33 @@ export const TableComponent: React.FC = () => {
     setAlignment,
   } = useTableState();
 
+  // Handle view changes
+  const handleViewChange = useCallback((view: ViewType) => {
+    setActiveView(view);
+
+    // Update data based on view
+    if (view === 'day') {
+      setRowData(generateTableData());
+    } else if (view === 'week') {
+      setRowData(generateWeeklyTableData());
+    } else if (view === 'month') {
+      setRowData(generateMonthlyTableData());
+    }
+
+    // Reset selection
+    setSelectedCell(null);
+
+    // Reset sorting to date ascending
+    if (gridApi) {
+      gridApi.applyColumnState({
+        state: [{ colId: 'date', sort: 'asc' }],
+        defaultState: { sort: null },
+      });
+      setSortState({ colId: 'date', sort: 'asc' });
+      setLocalSortState({ colId: 'date', sort: 'asc' });
+    }
+  }, [gridApi, setRowData, setSelectedCell, setSortState, setLocalSortState]);
+
   // Initialize Velt
   useEffect(() => {
     if (client) {
@@ -93,8 +122,8 @@ export const TableComponent: React.FC = () => {
 
   // Cell Renderer with Velt formatting
   const veltCellRenderer = useMemo(() => {
-    return createVeltCellRenderer(cellFormatting);
-  }, [cellFormatting]);
+    return createVeltCellRenderer(cellFormatting, activeView);
+  }, [cellFormatting, activeView]);
 
   // Column Definitions
   const columnDefs = useMemo(() => [
@@ -255,10 +284,11 @@ export const TableComponent: React.FC = () => {
         popoverMode={true}
         shadowDom={false}
         textMode={false}
+        groupMatchedComments={true}
       />
 
       <div style={styles.tableContainer}>
-        <ViewToggle />
+        <ViewToggle activeView={activeView} onViewChange={handleViewChange} />
 
         <Toolbar
           toggleFormatting={toggleFormatting}
diff --git a/apps/react/tables/libraries/AgGrid/marketing-spend-demo/components/document/grid-components/RowNumberRenderer.tsx b/apps/react/tables/libraries/AgGrid/marketing-spend-demo/components/document/grid-components/RowNumberRenderer.tsx
@@ -13,7 +13,7 @@ export const RowNumberRenderer = (props: any) => {
       color: 'rgba(255, 255, 255, 0.5)',
       letterSpacing: '0.12px'
     }}>
-      {props.node.rowIndex + 2}
+      {props.node.rowIndex + 1}
     </div>
   );
 };
diff --git a/apps/react/tables/libraries/AgGrid/marketing-spend-demo/components/document/grid-components/VeltCellRenderer.tsx b/apps/react/tables/libraries/AgGrid/marketing-spend-demo/components/document/grid-components/VeltCellRenderer.tsx
@@ -1,8 +1,13 @@
 import React from 'react';
 import { CellFormatting } from '../types';
-import { getCellFormattingKey } from '../utils';
+import { getCellFormattingKey, getDateContext } from '../utils';
 
-export const createVeltCellRenderer = (cellFormatting: Record<string, CellFormatting>) => (props: any) => {
+type ViewType = 'day' | 'week' | 'month';
+
+export const createVeltCellRenderer = (
+  cellFormatting: Record<string, CellFormatting>,
+  activeView: ViewType = 'day'
+) => (props: any) => {
   const cellId = `cell-${props.data.id}-${props.colDef.field}`;
   const cellKey = getCellFormattingKey(props.data.id, props.colDef.field);
   const formatting = cellFormatting[cellKey] || {};
@@ -16,19 +21,50 @@ export const createVeltCellRenderer = (cellFormatting: Record<string, CellFormat
 
       // Check if comment tool already exists
       let commentTool = props.eGridCell.querySelector('velt-comment-tool');
+
+      // Calculate context based on date and column
+      const context = props.data.date && props.colDef.field !== 'date'
+        ? getDateContext(props.data.date, props.colDef.field, props.data.id, activeView)
+        : null;
+
       if (!commentTool) {
         // Create and append comment tool directly to cell
         commentTool = document.createElement('velt-comment-tool');
         commentTool.setAttribute('target-comment-element-id', cellId);
         commentTool.style.cssText = 'position: absolute; right: 4px; top: 50%; transform: translateY(-50%); z-index: 1;';
 
+        // Add context metadata for aggregation
+        if (context) {
+          commentTool.setAttribute('context', JSON.stringify(context));
+
+          // Enable partial matching for weekly and monthly views
+          if (activeView === 'week' || activeView === 'month') {
+            commentTool.setAttribute('context-options', JSON.stringify({ partialMatch: true }));
+          }
+        }
+
         // Append to cell (outside ag-cell-wrapper)
         props.eGridCell.appendChild(commentTool);
       } else {
-        // Update target-comment-element-id if it changed
+        // Update attributes if they changed
         if (commentTool.getAttribute('target-comment-element-id') !== cellId) {
           commentTool.setAttribute('target-comment-element-id', cellId);
         }
+
+        if (context) {
+          const currentContext = commentTool.getAttribute('context');
+          const newContext = JSON.stringify(context);
+          if (currentContext !== newContext) {
+            commentTool.setAttribute('context', newContext);
+          }
+
+          // Update context-options based on view
+          if (activeView === 'week' || activeView === 'month') {
+            commentTool.setAttribute('context-options', JSON.stringify({ partialMatch: true }));
+          } else {
+            commentTool.removeAttribute('context-options');
+          }
+        }
       }
     }
 
@@ -41,7 +77,7 @@ export const createVeltCellRenderer = (cellFormatting: Record<string, CellFormat
         }
       }
     };
-  }, [cellId, props.eGridCell]);
+  }, [cellId, props.eGridCell, props.data.date, props.data.id, props.colDef.field, activeView]);
 
   const textStyle: React.CSSProperties = {
     fontWeight: formatting.bold ? 'bold' : 'normal',
diff --git a/apps/react/tables/libraries/AgGrid/marketing-spend-demo/components/document/ui-components/ViewToggle.tsx b/apps/react/tables/libraries/AgGrid/marketing-spend-demo/components/document/ui-components/ViewToggle.tsx
@@ -1,6 +1,34 @@
 import React from 'react';
 
-export const ViewToggle: React.FC = () => {
+export type ViewType = 'day' | 'week' | 'month';
+
+interface ViewToggleProps {
+  activeView: ViewType;
+  onViewChange: (view: ViewType) => void;
+}
+
+export const ViewToggle: React.FC<ViewToggleProps> = ({ activeView, onViewChange }) => {
+  const getButtonStyle = (isActive: boolean) => ({
+    backgroundColor: isActive ? 'rgba(255, 255, 255, 0.08)' : 'transparent',
+    border: 'none',
+    borderRadius: '8px',
+    padding: '4px 8px',
+    cursor: 'pointer',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+  });
+
+  const getTextStyle = (isActive: boolean) => ({
+    fontFamily: 'Urbanist, sans-serif',
+    fontSize: '13px',
+    fontWeight: 400,
+    lineHeight: '16px',
+    color: isActive ? '#ffffff' : 'rgba(255, 255, 255, 0.52)',
+    whiteSpace: 'pre' as const,
+    letterSpacing: '0.13px',
+  });
+
   return (
     <div style={{
       position: 'absolute',
@@ -12,65 +40,23 @@ export const ViewToggle: React.FC = () => {
       gap: '4px',
       zIndex: 10,
     }}>
-      <button style={{
-        backgroundColor: 'rgba(255, 255, 255, 0.08)',
-        border: 'none',
-        borderRadius: '8px',
-        padding: '4px 8px',
-        cursor: 'pointer',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-      }}>
-        <span style={{
-          fontFamily: 'Urbanist, sans-serif',
-          fontSize: '13px',
-          fontWeight: 400,
-          lineHeight: '16px',
-          color: '#ffffff',
-          whiteSpace: 'pre',
-          letterSpacing: '0.13px',
-        }}>Day View</span>
+      <button
+        onClick={() => onViewChange('day')}
+        style={getButtonStyle(activeView === 'day')}
+      >
+        <span style={getTextStyle(activeView === 'day')}>Day View</span>
       </button>
-      <button style={{
-        backgroundColor: 'transparent',
-        border: 'none',
-        borderRadius: '8px',
-        padding: '4px 8px',
-        cursor: 'pointer',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-      }}>
-        <span style={{
-          fontFamily: 'Urbanist, sans-serif',
-          fontSize: '13px',
-          fontWeight: 400,
-          lineHeight: '16px',
-          color: 'rgba(255, 255, 255, 0.52)',
-          whiteSpace: 'pre',
-          letterSpacing: '0.13px',
-        }}>Weekly View</span>
+      <button
+        onClick={() => onViewChange('week')}
+        style={getButtonStyle(activeView === 'week')}
+      >
+        <span style={getTextStyle(activeView === 'week')}>Weekly View</span>
       </button>
-      <button style={{
-        backgroundColor: 'transparent',
-        border: 'none',
-        borderRadius: '8px',
-        padding: '4px 8px',
-        cursor: 'pointer',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-      }}>
-        <span style={{
-          fontFamily: 'Urbanist, sans-serif',
-          fontSize: '13px',
-          fontWeight: 400,
-          lineHeight: '16px',
-          color: 'rgba(255, 255, 255, 0.52)',
-          whiteSpace: 'pre',
-          letterSpacing: '0.13px',
-        }}>Monthly View</span>
+      <button
+        onClick={() => onViewChange('month')}
+        style={getButtonStyle(activeView === 'month')}
+      >
+        <span style={getTextStyle(activeView === 'month')}>Monthly View</span>
       </button>
     </div>
   );
diff --git a/apps/react/tables/libraries/AgGrid/marketing-spend-demo/components/document/utils.ts b/apps/react/tables/libraries/AgGrid/marketing-spend-demo/components/document/utils.ts
