goobs-frontend 0.8.8 → 0.8.9

package/src/components/DataGrid/ManageRow/index.tsx

@@ -1,57 +1,88 @@
 'use client'
-import React, { useState, useRef, useEffect } from 'react'
-import { Popover, Stack, Paper, Box, IconButton } from '@mui/material'
+import React from 'react'
+import { Paper, Stack, Box } from '@mui/material'
 import Typography from '../../Typography'
 import DuplicateIcon from '@mui/icons-material/FileCopy'
 import DeleteIcon from '@mui/icons-material/Delete'
 import ExportIcon from '@mui/icons-material/Download'
+import EditIcon from '@mui/icons-material/Edit'
+import VisibilityIcon from '@mui/icons-material/Visibility'
 
-type ModalType = 'duplicate' | 'delete' | 'export'
+type ModalType = 'duplicate' | 'delete' | 'export' | 'manage' | 'show'
 
 interface ManageRowProps {
-  open?: boolean
   handleClose?: () => void
   selectedRows?: string[]
   rows?: Array<{ [key: string]: unknown }>
   onDuplicate?: () => void
   onDelete?: () => void
+  onManage?: () => void
+  onShow?: () => void
+  onExport?: () => void
 }
 
 function ManageRow({
-  open = false,
   handleClose = () => {},
   selectedRows = [],
   rows = [],
   onDuplicate,
   onDelete,
+  onManage,
+  onShow,
+  onExport,
 }: ManageRowProps) {
-  const [actionType, setActionType] = useState<ModalType | null>(null)
-  const [position, setPosition] = useState({ x: 0, y: 0 })
-  const popoverRef = useRef<HTMLDivElement>(null)
-
-  const iconMap: { [key in ModalType]: React.ReactElement } = {
-    duplicate: <DuplicateIcon />,
-    delete: <DeleteIcon />,
-    export: <ExportIcon />,
-  }
+  console.log('ManageRow rendered with props:', {
+    selectedRowsCount: selectedRows.length,
+    selectedRows,
+    hasManageHandler: !!onManage,
+  })
 
   const handleActionSelection = (type: ModalType) => {
-    setActionType(type)
+    console.log('Action selected:', type, {
+      selectedRows,
+      hasManageHandler: !!onManage,
+      timestamp: new Date().toISOString(),
+    })
+
     switch (type) {
       case 'duplicate':
         onDuplicate?.()
+        handleClose()
         break
       case 'delete':
         onDelete?.()
+        handleClose()
         break
       case 'export':
-        handleExport()
+        if (onExport) {
+          onExport()
+        } else {
+          handleExport()
+        }
+        handleClose()
+        break
+      case 'manage':
+        if (selectedRows.length === 1 && onManage) {
+          console.log('Triggering manage with selection:', selectedRows[0])
+          onManage()
+          // Don't call handleClose for manage
+          return
+        } else {
+          console.warn('Invalid manage state:', {
+            selectedRows,
+            hasManageHandler: !!onManage,
+          })
+        }
+        break
+      case 'show':
+        onShow?.()
+        handleClose()
         break
     }
-    handleClose()
   }
 
   const handleExport = () => {
+    console.log('Exporting data for rows:', selectedRows)
     const selectedData = rows.filter(row =>
       selectedRows.includes(row.id as string)
     )
@@ -73,109 +104,244 @@ function ManageRow({
   }
 
   const actionButtons = (
-    <Stack component="div" spacing={0} direction="row" justifyContent="center">
-      {(['duplicate', 'delete', 'export'] as ModalType[]).map(type => (
+    <Stack
+      component="div"
+      spacing={0}
+      direction="row"
+      justifyContent="center"
+      sx={{ '& > div:not(:last-child)': { marginRight: '2px' } }}
+    >
+      {/* First group: Manage, Show */}
+      {(onManage || onShow) && selectedRows.length === 1 && (
         <Box
-          key={type}
           display="flex"
-          flexDirection="column"
+          flexDirection="row"
           alignItems="center"
+          sx={{
+            borderRight: '1px solid #e0e0e0',
+            paddingRight: '8px',
+            marginRight: '8px',
+          }}
         >
-          <IconButton
-            size="small"
-            onClick={() => handleActionSelection(type)}
-            sx={{ color: 'black' }}
-          >
-            {iconMap[type]}
-          </IconButton>
-          <Typography
-            fontvariant="merriparagraph"
-            text={type.charAt(0).toUpperCase() + type.slice(1)}
-          />
+          {onManage && (
+            <Box
+              onClick={e => {
+                e.stopPropagation()
+                handleActionSelection('manage')
+              }}
+              display="flex"
+              flexDirection="column"
+              alignItems="center"
+              sx={{
+                padding: '8px',
+                cursor: 'pointer',
+                '&:hover': {
+                  backgroundColor: 'rgba(0, 0, 0, 0.04)',
+                },
+                borderRadius: '4px',
+                transition: 'background-color 0.2s',
+                userSelect: 'none',
+              }}
+            >
+              <Box
+                sx={{
+                  display: 'flex',
+                  flexDirection: 'column',
+                  alignItems: 'center',
+                  color: 'black',
+                }}
+              >
+                <EditIcon />
+                <Typography fontvariant="merriparagraph" text="Manage" />
+              </Box>
+            </Box>
+          )}
+          {onShow && (
+            <Box
+              onClick={e => {
+                e.stopPropagation()
+                handleActionSelection('show')
+              }}
+              display="flex"
+              flexDirection="column"
+              alignItems="center"
+              sx={{
+                padding: '8px',
+                cursor: 'pointer',
+                '&:hover': {
+                  backgroundColor: 'rgba(0, 0, 0, 0.04)',
+                },
+                borderRadius: '4px',
+                transition: 'background-color 0.2s',
+                userSelect: 'none',
+              }}
+            >
+              <Box
+                sx={{
+                  display: 'flex',
+                  flexDirection: 'column',
+                  alignItems: 'center',
+                  color: 'black',
+                }}
+              >
+                <VisibilityIcon />
+                <Typography fontvariant="merriparagraph" text="Show" />
+              </Box>
+            </Box>
+          )}
+        </Box>
+      )}
+
+      {/* Second group: Duplicate, Delete, Export */}
+      {selectedRows.length > 0 && (
+        <Box display="flex" flexDirection="row" alignItems="center">
+          {onDuplicate && (
+            <Box
+              onClick={e => {
+                e.stopPropagation()
+                handleActionSelection('duplicate')
+              }}
+              display="flex"
+              flexDirection="column"
+              alignItems="center"
+              sx={{
+                padding: '8px',
+                cursor: 'pointer',
+                '&:hover': {
+                  backgroundColor: 'rgba(0, 0, 0, 0.04)',
+                },
+                borderRadius: '4px',
+                transition: 'background-color 0.2s',
+                userSelect: 'none',
+              }}
+            >
+              <Box
+                sx={{
+                  display: 'flex',
+                  flexDirection: 'column',
+                  alignItems: 'center',
+                  color: 'black',
+                }}
+              >
+                <DuplicateIcon />
+                <Typography fontvariant="merriparagraph" text="Duplicate" />
+              </Box>
+            </Box>
+          )}
+          {onDelete && (
+            <Box
+              onClick={e => {
+                e.stopPropagation()
+                handleActionSelection('delete')
+              }}
+              display="flex"
+              flexDirection="column"
+              alignItems="center"
+              sx={{
+                padding: '8px',
+                cursor: 'pointer',
+                '&:hover': {
+                  backgroundColor: 'rgba(0, 0, 0, 0.04)',
+                },
+                borderRadius: '4px',
+                transition: 'background-color 0.2s',
+                userSelect: 'none',
+              }}
+            >
+              <Box
+                sx={{
+                  display: 'flex',
+                  flexDirection: 'column',
+                  alignItems: 'center',
+                  color: 'black',
+                }}
+              >
+                <DeleteIcon />
+                <Typography fontvariant="merriparagraph" text="Delete" />
+              </Box>
+            </Box>
+          )}
+          {(onExport || rows.length > 0) && (
+            <Box
+              onClick={e => {
+                e.stopPropagation()
+                handleActionSelection('export')
+              }}
+              display="flex"
+              flexDirection="column"
+              alignItems="center"
+              sx={{
+                padding: '8px',
+                cursor: 'pointer',
+                '&:hover': {
+                  backgroundColor: 'rgba(0, 0, 0, 0.04)',
+                },
+                borderRadius: '4px',
+                transition: 'background-color 0.2s',
+                userSelect: 'none',
+              }}
+            >
+              <Box
+                sx={{
+                  display: 'flex',
+                  flexDirection: 'column',
+                  alignItems: 'center',
+                  color: 'black',
+                }}
+              >
+                <ExportIcon />
+                <Typography fontvariant="merriparagraph" text="Export" />
+              </Box>
+            </Box>
+          )}
         </Box>
-      ))}
+      )}
     </Stack>
   )
 
-  useEffect(() => {
-    const popover = popoverRef.current
-    if (!popover) return
-
-    let isDragging = false
-    let startX: number, startY: number
-
-    const handleMouseDown = (e: MouseEvent) => {
-      isDragging = true
-      startX = e.clientX - position.x
-      startY = e.clientY - position.y
-      document.addEventListener('mousemove', handleMouseMove)
-      document.addEventListener('mouseup', handleMouseUp)
-    }
-
-    const handleMouseMove = (e: MouseEvent) => {
-      if (!isDragging) return
-      const newX = e.clientX - startX
-      const newY = e.clientY - startY
-      setPosition({ x: newX, y: newY })
-    }
-
-    const handleMouseUp = () => {
-      isDragging = false
-      document.removeEventListener('mousemove', handleMouseMove)
-      document.removeEventListener('mouseup', handleMouseUp)
-    }
-
-    popover.addEventListener('mousedown', handleMouseDown)
-
-    return () => {
-      popover.removeEventListener('mousedown', handleMouseDown)
-      document.removeEventListener('mousemove', handleMouseMove)
-      document.removeEventListener('mouseup', handleMouseUp)
-    }
-  }, [position])
+  if (selectedRows.length === 0) return null
 
   return (
-    <Popover
-      open={open}
-      onClose={handleClose}
-      anchorReference="anchorPosition"
-      anchorPosition={{ top: position.y, left: position.x }}
-      transformOrigin={{
-        vertical: 'top',
-        horizontal: 'left',
-      }}
-      slotProps={{
-        paper: {
-          ref: popoverRef,
-          component: Paper,
-          style: {
-            zIndex: 1300,
-            overflow: 'hidden',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'space-between',
-            height: '60px',
-            minWidth: '560px',
-            padding: '0 10px',
-            cursor: 'move',
-          },
-        },
+    <Paper
+      elevation={3}
+      sx={{
+        zIndex: 1300,
+        overflow: 'hidden',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        height: '60px',
+        minWidth: '560px',
+        padding: '0 10px',
+        userSelect: 'none',
+        boxShadow: '0px 4px 10px rgba(0, 0, 0, 0.1)',
       }}
     >
       <Box
-        flexGrow={1}
         display="flex"
         alignItems="center"
-        paddingLeft="16px"
-        paddingRight="16px"
+        gap={1}
+        sx={{
+          width: '100%',
+        }}
       >
-        <Typography
-          fontvariant="merriparagraph"
-          text={`${selectedRows.length} items selected`}
-        />
+        <Box
+          flexGrow={1}
+          display="flex"
+          alignItems="center"
+          paddingLeft="16px"
+          paddingRight="16px"
+        >
+          <Typography
+            fontvariant="merriparagraph"
+            text={`${selectedRows.length} ${
+              selectedRows.length === 1 ? 'item' : 'items'
+            } selected`}
+          />
+        </Box>
+        {actionButtons}
       </Box>
-      {!actionType && actionButtons}
-    </Popover>
+    </Paper>
   )
 }
 

package/src/components/DataGrid/Table/index.tsx

@@ -4,9 +4,9 @@ import React from 'react'
 import { CircularProgress } from '@mui/material'
 import ContentSection from '../../Content'
 import type { ContentSectionProps } from '../../Content'
-import type { BorderProp } from '../../Grid'
 import { useAtomValue } from 'jotai'
 import { columnVisibilityAtom } from '../Jotai/atom'
+import * as palette from '../../../styles/palette'
 
 export interface ColumnDef {
   field: string
@@ -34,7 +34,7 @@ export interface HeaderParams {
 }
 
 export interface RowData {
-  id: string
+  _id: string
   [key: string]: unknown
 }
 
@@ -78,6 +78,8 @@ const Table = React.forwardRef<TableRef, TableProps>(
       rowHeight = DEFAULT_ROW_HEIGHT,
       onRowClick,
       selectedRows = [],
+      onSelectionChange,
+      checkboxSelection = false,
     },
     ref
   ) => {
@@ -90,7 +92,6 @@ const Table = React.forwardRef<TableRef, TableProps>(
       selectedRows,
     })
 
-    // Filter visible columns
     const visibleColumns = columns.filter(column => {
       const isVisible = columnVisibility[column.field] !== false
       console.log(`Column ${column.field} visibility:`, isVisible)
@@ -102,13 +103,13 @@ const Table = React.forwardRef<TableRef, TableProps>(
       getSelectedRows: () =>
         new Map(
           rows
-            .filter(row => selectedRows.includes(row.id))
-            .map(row => [row.id, row])
+            .filter(row => selectedRows.includes(row._id))
+            .map(row => [row._id, row])
         ),
       forceUpdate: () => {},
       setPage: () => {},
       setPageSize: () => {},
-      getRowIndex: (id: string) => rows.findIndex(row => row.id === id),
+      getRowIndex: (id: string) => rows.findIndex(row => row._id === id),
       isRowSelected: (id: string) => selectedRows.includes(id),
     }))
 
@@ -137,32 +138,30 @@ const Table = React.forwardRef<TableRef, TableProps>(
       )
     }
 
-    if (rows.length === 0) {
-      return (
-        <ContentSection
-          grids={[
-            {
-              grid: {
-                gridconfig: {
-                  gridwidth: '100%',
-                  gridname: 'empty-table',
-                  alignment: 'left',
-                },
-              },
-              typography: {
-                columnconfig: {
-                  row: 1,
-                  column: 1,
-                },
-                text: 'No data available',
-              },
-            },
-          ]}
-        />
-      )
+    const allRowsSelected =
+      rows.length > 0 && rows.every(row => selectedRows.includes(row._id))
+    const someRowsSelected =
+      rows.length > 0 && rows.some(row => selectedRows.includes(row._id))
+
+    const handleHeaderCheckboxChange = () => {
+      if (onSelectionChange) {
+        if (allRowsSelected) {
+          onSelectionChange([])
+        } else {
+          onSelectionChange(rows.map(row => row._id))
+        }
+      }
     }
 
-    console.log('Table config - visibleColumns:', visibleColumns)
+    const handleRowCheckboxChange = (rowId: string) => {
+      if (onSelectionChange) {
+        if (selectedRows.includes(rowId)) {
+          onSelectionChange(selectedRows.filter(id => id !== rowId))
+        } else {
+          onSelectionChange([...selectedRows, rowId])
+        }
+      }
+    }
 
     const tableConfig: ContentSectionProps = {
       grids: [
@@ -174,45 +173,94 @@ const Table = React.forwardRef<TableRef, TableProps>(
               alignment: 'left',
             },
           },
+          checkbox: checkboxSelection
+            ? [
+                // Header checkbox
+                {
+                  columnconfig: {
+                    row: 1,
+                    column: 1,
+                  },
+                  checked: allRowsSelected,
+                  indeterminate: !allRowsSelected && someRowsSelected,
+                  onChange: () => handleHeaderCheckboxChange(),
+                  cellconfig: {
+                    minHeight: `${rowHeight}px`,
+                    width: '60px',
+                  },
+                },
+                // Row checkboxes
+                ...rows.map((row, rowIndex) => ({
+                  columnconfig: {
+                    row: rowIndex + 2,
+                    column: 1,
+                  },
+                  checked: selectedRows.includes(row._id),
+                  onChange: () => handleRowCheckboxChange(row._id),
+                  cellconfig: {
+                    minHeight: `${rowHeight}px`,
+                    width: '60px',
+                  },
+                })),
+              ]
+            : [],
           typography: [
             // Header row
             ...visibleColumns.map((column, columnIndex) => ({
               columnconfig: {
                 row: 1,
-                column: columnIndex + 1,
+                column: checkboxSelection ? columnIndex + 2 : columnIndex + 1,
               },
               text: column.headerName,
               cellconfig: {
-                border: 'solid' as BorderProp,
                 minHeight: `${rowHeight}px`,
                 width: column.width ? `${column.width}px` : '200px',
                 mobilewidth: '100%',
                 tabletwidth: '100%',
                 computerwidth: '100%',
+                wrap: 'nowrap' as const,
               },
             })),
             // Data rows
-            ...rows.flatMap((row, rowIndex) =>
-              visibleColumns.map((column, columnIndex) => ({
-                columnconfig: {
-                  row: rowIndex + 2,
-                  column: columnIndex + 1,
-                },
-                text: String(row[column.field] || ''),
-                cellconfig: {
-                  border: 'solid' as BorderProp,
-                  minHeight: `${rowHeight}px`,
-                  width: column.width ? `${column.width}px` : '200px',
-                  mobilewidth: '100%',
-                  tabletwidth: '100%',
-                  computerwidth: '100%',
-                  onClick: onRowClick ? () => onRowClick(row) : undefined,
-                  backgroundColor: selectedRows.includes(row.id)
-                    ? 'rgba(0, 0, 0, 0.04)'
-                    : undefined,
-                },
-              }))
-            ),
+            ...(rows.length === 0
+              ? visibleColumns.map((_, columnIndex) => ({
+                  columnconfig: {
+                    row: 2,
+                    column: checkboxSelection
+                      ? columnIndex + 2
+                      : columnIndex + 1,
+                  },
+                  text: columnIndex === 0 ? 'No data available' : '',
+                  cellconfig: {
+                    minHeight: `${rowHeight}px`,
+                    width: '200px',
+                    mobilewidth: '100%',
+                    tabletwidth: '100%',
+                    computerwidth: '100%',
+                  },
+                }))
+              : rows.flatMap((row, rowIndex) =>
+                  visibleColumns.map((column, columnIndex) => ({
+                    columnconfig: {
+                      row: rowIndex + 2,
+                      column: checkboxSelection
+                        ? columnIndex + 2
+                        : columnIndex + 1,
+                    },
+                    text: String(row[column.field] || ''),
+                    cellconfig: {
+                      minHeight: `${rowHeight}px`,
+                      width: column.width ? `${column.width}px` : '200px',
+                      mobilewidth: '100%',
+                      tabletwidth: '100%',
+                      computerwidth: '100%',
+                      onClick: onRowClick ? () => onRowClick(row) : undefined,
+                      backgroundColor: selectedRows.includes(row._id)
+                        ? palette.marine.light
+                        : undefined,
+                    },
+                  }))
+                )),
           ],
         },
       ],