goobs-frontend 0.8.7 → 0.8.8

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

@@ -0,0 +1,211 @@
+'use client'
+
+import React from 'react'
+import { Box, Popover, IconButton } from '@mui/material'
+import { useManageColumn } from '../utils/useManageColumn'
+import CustomButton from '../../Button'
+import Searchbar from '../../Searchbar'
+import Checkbox from '../Checkbox'
+import ShowHideEyeIcon from '../../Icons/ShowHideEye'
+import { ColumnDef } from '../Table'
+import Typography from '../../Typography'
+import * as palette from '../../../styles/palette'
+
+interface ManageColumnProps {
+  open?: boolean
+  handleClose?: () => void
+  columns: ColumnDef[]
+}
+
+function ManageColumns({
+  open = false,
+  handleClose = () => {},
+  columns,
+}: ManageColumnProps) {
+  console.log('ManageColumns render:', { open, columns })
+
+  const {
+    handleAllCols,
+    toggleColumnState,
+    visibleColumns,
+    onSaveColumnView,
+    formatColumnName,
+    searchInput,
+    setSearchInput,
+    isAllChecked,
+  } = useManageColumn({
+    columns,
+    handleClose,
+    isPopupOpen: open,
+  })
+
+  const someColumnsVisible = React.useMemo(() => {
+    return (
+      columns.some(column => visibleColumns[column.field] === true) &&
+      !columns.every(column => visibleColumns[column.field] === true)
+    )
+  }, [columns, visibleColumns])
+
+  const handleEyeClick = (columnField: string) => {
+    console.log('Eye icon clicked:', {
+      field: columnField,
+      currentVisibility: visibleColumns[columnField],
+      allVisibility: visibleColumns,
+    })
+    toggleColumnState(columnField)
+  }
+
+  const handleCloseAndUpdate = () => {
+    console.log('handleCloseAndUpdate called')
+    handleClose?.()
+    setSearchInput('')
+  }
+
+  const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    console.log('Search value changed:', e.target.value)
+    setSearchInput(e.target.value)
+  }
+
+  const filteredColumns = columns.filter(column => {
+    const matches = formatColumnName(column.field)
+      .toLowerCase()
+      .includes(searchInput.toLowerCase())
+    console.log('Filtering column:', {
+      field: column.field,
+      searchInput,
+      matches,
+    })
+    return matches
+  })
+
+  console.log('Rendering ManageColumns with:', {
+    filteredColumns,
+    searchInput,
+    visibleColumns,
+  })
+
+  const handleCheckboxChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    console.log('Checkbox clicked in ManageColumns:', {
+      checked: event.target.checked,
+      indeterminate: event.target.indeterminate,
+      eventTarget: event.target,
+    })
+    event.stopPropagation()
+    handleAllCols(event.target.checked)
+  }
+
+  return (
+    <Popover
+      id="manage-columns-popover"
+      open={Boolean(open)}
+      onClose={handleCloseAndUpdate}
+      anchorOrigin={{
+        vertical: 'center',
+        horizontal: 'center',
+      }}
+      transformOrigin={{
+        vertical: 'center',
+        horizontal: 'center',
+      }}
+      sx={{
+        '& .MuiPaper-root': {
+          border: `1px solid ${palette.black.main}`,
+          borderRadius: 2,
+          minWidth: '250px',
+          boxShadow: 24,
+        },
+      }}
+    >
+      <Box
+        sx={{
+          p: 2,
+          bgcolor: palette.white.main,
+          display: 'flex',
+          flexDirection: 'column',
+        }}
+      >
+        <Typography
+          text="Manage Columns"
+          fontvariant="merriparagraph"
+          fontcolor={palette.black.main}
+          align="center"
+          sx={{ mb: 0 }}
+        />
+        <Box sx={{ mt: 1, mb: 0 }}>
+          <Searchbar
+            value={searchInput}
+            onChange={handleSearchChange}
+            placeholder="Search Columns"
+            iconcolor={palette.black.main}
+            outlinecolor={palette.black.main}
+          />
+        </Box>
+        <Box
+          sx={{
+            display: 'flex',
+            alignItems: 'center',
+            mt: 0,
+            mb: 0,
+            justifyContent: 'space-between',
+          }}
+        >
+          <Typography
+            text="All Columns"
+            fontvariant="merriparagraph"
+            fontcolor={palette.black.main}
+            sx={{ fontWeight: 'bold' }}
+          />
+          <Box sx={{ marginRight: '-4px' }}>
+            <Checkbox
+              checked={isAllChecked}
+              indeterminate={someColumnsVisible && !isAllChecked}
+              onChange={handleCheckboxChange}
+            />
+          </Box>
+        </Box>
+        <Box
+          sx={{ maxHeight: '160px', overflowY: 'auto', marginBottom: '10px' }}
+        >
+          {filteredColumns.map((column, index) => {
+            const isVisible = visibleColumns[column.field] === true
+            console.log('Rendering column row:', {
+              field: column.field,
+              visible: isVisible,
+            })
+            return (
+              <Box
+                key={index}
+                sx={{ display: 'flex', alignItems: 'center', mb: 1 }}
+              >
+                <Typography
+                  text={formatColumnName(column.field)}
+                  fontvariant="merriparagraph"
+                  fontcolor={palette.black.main}
+                  sx={{ flexGrow: 1, mr: 1 }}
+                />
+                <IconButton
+                  onClick={() => handleEyeClick(column.field)}
+                  size="small"
+                >
+                  <ShowHideEyeIcon visible={isVisible} />
+                </IconButton>
+              </Box>
+            )
+          })}
+        </Box>
+        <CustomButton
+          text="Save"
+          backgroundcolor={palette.black.main}
+          variant="contained"
+          fontcolor={palette.white.main}
+          fontvariant="merriparagraph"
+          sx={{ mt: 0 }}
+          fullWidth
+          onClick={onSaveColumnView}
+        />
+      </Box>
+    </Popover>
+  )
+}
+
+export default ManageColumns

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

@@ -0,0 +1,182 @@
+'use client'
+import React, { useState, useRef, useEffect } from 'react'
+import { Popover, Stack, Paper, Box, IconButton } 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'
+
+type ModalType = 'duplicate' | 'delete' | 'export'
+
+interface ManageRowProps {
+  open?: boolean
+  handleClose?: () => void
+  selectedRows?: string[]
+  rows?: Array<{ [key: string]: unknown }>
+  onDuplicate?: () => void
+  onDelete?: () => void
+}
+
+function ManageRow({
+  open = false,
+  handleClose = () => {},
+  selectedRows = [],
+  rows = [],
+  onDuplicate,
+  onDelete,
+}: 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 />,
+  }
+
+  const handleActionSelection = (type: ModalType) => {
+    setActionType(type)
+    switch (type) {
+      case 'duplicate':
+        onDuplicate?.()
+        break
+      case 'delete':
+        onDelete?.()
+        break
+      case 'export':
+        handleExport()
+        break
+    }
+    handleClose()
+  }
+
+  const handleExport = () => {
+    const selectedData = rows.filter(row =>
+      selectedRows.includes(row.id as string)
+    )
+    const csvContent = selectedData
+      .map(row => Object.values(row).join(','))
+      .join('\n')
+
+    const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' })
+    const link = document.createElement('a')
+    if (link.download !== undefined) {
+      const url = URL.createObjectURL(blob)
+      link.setAttribute('href', url)
+      link.setAttribute('download', 'exported_data.csv')
+      link.style.visibility = 'hidden'
+      document.body.appendChild(link)
+      link.click()
+      document.body.removeChild(link)
+    }
+  }
+
+  const actionButtons = (
+    <Stack component="div" spacing={0} direction="row" justifyContent="center">
+      {(['duplicate', 'delete', 'export'] as ModalType[]).map(type => (
+        <Box
+          key={type}
+          display="flex"
+          flexDirection="column"
+          alignItems="center"
+        >
+          <IconButton
+            size="small"
+            onClick={() => handleActionSelection(type)}
+            sx={{ color: 'black' }}
+          >
+            {iconMap[type]}
+          </IconButton>
+          <Typography
+            fontvariant="merriparagraph"
+            text={type.charAt(0).toUpperCase() + type.slice(1)}
+          />
+        </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])
+
+  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',
+          },
+        },
+      }}
+    >
+      <Box
+        flexGrow={1}
+        display="flex"
+        alignItems="center"
+        paddingLeft="16px"
+        paddingRight="16px"
+      >
+        <Typography
+          fontvariant="merriparagraph"
+          text={`${selectedRows.length} items selected`}
+        />
+      </Box>
+      {!actionType && actionButtons}
+    </Popover>
+  )
+}
+
+export default ManageRow

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

@@ -0,0 +1,227 @@
+'use client'
+
+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'
+
+export interface ColumnDef {
+  field: string
+  headerName: string
+  width?: number
+  flex?: number
+  renderCell?: (params: CellParams) => React.ReactNode
+  renderHeader?: (params: HeaderParams) => React.ReactNode
+  computedWidth?: number
+  headerText?: string
+  index?: number
+}
+
+export interface CellParams<T = unknown> {
+  row: RowData
+  value: T
+  field: string
+  rowIndex: number
+  columnIndex: number
+}
+
+export interface HeaderParams {
+  column: ColumnDef
+  columnIndex: number
+}
+
+export interface RowData {
+  id: string
+  [key: string]: unknown
+}
+
+export interface TableProps {
+  columns: ColumnDef[]
+  rows: RowData[]
+  loading?: boolean
+  page: number
+  pageSize: number
+  rowCount: number
+  onPageChange: (newPage: number) => void
+  onPageSizeChange: (newPageSize: number) => void
+  rowHeight?: number
+  headerHeight?: number
+  onRowClick?: (row: RowData) => void
+  selectedRows?: string[]
+  checkboxSelection?: boolean
+  onSelectionChange?: (selectedIds: string[]) => void
+  getCellText?: (params: CellParams) => string
+  getHeaderText?: (params: HeaderParams) => string
+}
+
+interface TableRef {
+  getAllColumns: () => ColumnDef[]
+  getSelectedRows: () => Map<string, RowData>
+  forceUpdate: () => void
+  setPage: (page: number) => void
+  setPageSize: (pageSize: number) => void
+  getRowIndex: (id: string) => number
+  isRowSelected: (id: string) => boolean
+}
+
+const DEFAULT_ROW_HEIGHT = 40
+
+const Table = React.forwardRef<TableRef, TableProps>(
+  (
+    {
+      columns,
+      rows,
+      loading = false,
+      rowHeight = DEFAULT_ROW_HEIGHT,
+      onRowClick,
+      selectedRows = [],
+    },
+    ref
+  ) => {
+    const columnVisibility = useAtomValue(columnVisibilityAtom)
+
+    console.log('Table render:', {
+      columns,
+      rows,
+      columnVisibility,
+      selectedRows,
+    })
+
+    // Filter visible columns
+    const visibleColumns = columns.filter(column => {
+      const isVisible = columnVisibility[column.field] !== false
+      console.log(`Column ${column.field} visibility:`, isVisible)
+      return isVisible
+    })
+
+    React.useImperativeHandle(ref, () => ({
+      getAllColumns: () => visibleColumns,
+      getSelectedRows: () =>
+        new Map(
+          rows
+            .filter(row => selectedRows.includes(row.id))
+            .map(row => [row.id, row])
+        ),
+      forceUpdate: () => {},
+      setPage: () => {},
+      setPageSize: () => {},
+      getRowIndex: (id: string) => rows.findIndex(row => row.id === id),
+      isRowSelected: (id: string) => selectedRows.includes(id),
+    }))
+
+    if (loading) {
+      return (
+        <ContentSection
+          grids={[
+            {
+              grid: {
+                gridconfig: {
+                  gridwidth: '100%',
+                  gridname: 'loading-container',
+                  alignment: 'left',
+                },
+              },
+              typography: {
+                columnconfig: {
+                  row: 1,
+                  column: 1,
+                },
+                component: CircularProgress as React.ElementType,
+              },
+            },
+          ]}
+        />
+      )
+    }
+
+    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',
+              },
+            },
+          ]}
+        />
+      )
+    }
+
+    console.log('Table config - visibleColumns:', visibleColumns)
+
+    const tableConfig: ContentSectionProps = {
+      grids: [
+        {
+          grid: {
+            gridconfig: {
+              gridwidth: '100%',
+              gridname: 'data-table',
+              alignment: 'left',
+            },
+          },
+          typography: [
+            // Header row
+            ...visibleColumns.map((column, columnIndex) => ({
+              columnconfig: {
+                row: 1,
+                column: 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%',
+              },
+            })),
+            // 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,
+                },
+              }))
+            ),
+          ],
+        },
+      ],
+    }
+
+    return <ContentSection {...tableConfig} />
+  }
+)
+
+Table.displayName = 'Table'
+
+export default Table

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

@@ -0,0 +1,6 @@
+import { Box, styled } from '@mui/material'
+
+export const VerticalDivider = styled(Box)({
+  borderLeft: '2px solid black',
+  height: '20px',
+})