goobs-frontend 0.8.6 → 0.8.8

package/src/components/DataGrid/index.tsx

@@ -0,0 +1,267 @@
+'use client'
+import React, { useState, useEffect } from 'react'
+import { Box, Alert, CircularProgress } from '@mui/material'
+import { useAtom, useSetAtom } from 'jotai'
+import {
+  columnVisibilityAtom,
+  columnsAtom,
+  columnVisibilityActions,
+} from './Jotai/atom'
+import CustomToolbar from '../Toolbar'
+import Table, { ColumnDef, RowData } from './Table'
+import CustomFooter from './Footer'
+import ManageRow from './ManageRow'
+import type { CustomButtonProps } from '../Button'
+import type { DropdownProps } from '../Dropdown'
+import type { SearchbarProps } from '../Searchbar'
+import { woad } from '../../styles/palette'
+import { useSearchbar } from './utils/useSearchbar'
+
+export interface DatagridProps {
+  columns: ColumnDef[]
+  rows: RowData[]
+  buttons?: CustomButtonProps[]
+  dropdowns?: Omit<DropdownProps, 'onChange'>[]
+  searchbarProps?: Omit<SearchbarProps, 'onChange' | 'value'>
+  onRefresh?: () => void
+  loading?: boolean
+  error?: Error | null
+  onDuplicate?: () => void
+  onDelete?: () => void
+  checkboxSelection?: boolean
+  selectedRows?: string[]
+  onSelectionChange?: (selectedIds: string[]) => void
+}
+
+function DataGrid({
+  columns,
+  rows: providedRows,
+  buttons,
+  dropdowns,
+  searchbarProps,
+  loading = false,
+  error = null,
+  onDuplicate,
+  onDelete,
+}: DatagridProps) {
+  console.log('DataGrid render:', { columns, providedRows })
+
+  const [rows, setRows] = useState<RowData[]>(providedRows || [])
+  const [page, setPage] = useState(0)
+  const [pageSize, setPageSize] = useState(10)
+  const [selectedRows, setSelectedRows] = useState<string[]>([])
+  const [manageRowOpen, setManageRowOpen] = useState(false)
+  const [searchValue, setSearchValue] = useState('')
+  const tableRef = React.useRef(null)
+  const initialized = React.useRef(false)
+
+  // Jotai state setup
+  const setColumns = useSetAtom(columnsAtom)
+  const [columnVisibility] = useAtom(columnVisibilityAtom)
+  const updateVisibility = useSetAtom(columnVisibilityActions)
+
+  const {
+    handleSearchChange,
+    filteredRows,
+    visibleColumns: searchVisibleColumns,
+    tags,
+  } = useSearchbar({
+    columns,
+    rows,
+    searchValue,
+    setSearchValue,
+  })
+
+  // Update Jotai visibility state when search changes columns visibility
+  useEffect(() => {
+    if (tags.length > 0) {
+      const newVisibility: { [key: string]: boolean } = {}
+      columns.forEach(column => {
+        newVisibility[column.field] = searchVisibleColumns.has(column.field)
+      })
+      console.log('Updating column visibility from search:', newVisibility)
+      updateVisibility({
+        type: 'save',
+        newState: newVisibility,
+      })
+    }
+  }, [searchVisibleColumns, columns, updateVisibility, tags])
+
+  useEffect(() => {
+    setRows(providedRows || [])
+  }, [providedRows])
+
+  // Initialize columns and visibility in Jotai
+  useEffect(() => {
+    if (!initialized.current) {
+      console.log('Initializing columns and visibility:', columns)
+      setColumns(columns.map(col => col.field))
+
+      // Initialize visibility for new columns
+      const initialVisibility: { [key: string]: boolean } = {}
+      columns.forEach(column => {
+        if (columnVisibility[column.field] === undefined) {
+          initialVisibility[column.field] = true
+        }
+      })
+
+      if (Object.keys(initialVisibility).length > 0) {
+        console.log(
+          'Setting initial visibility for columns:',
+          initialVisibility
+        )
+        updateVisibility({
+          type: 'save',
+          newState: { ...columnVisibility, ...initialVisibility },
+        })
+      }
+
+      initialized.current = true
+    }
+  }, [columns, setColumns, columnVisibility, updateVisibility])
+
+  const handleRowClick = (row: RowData) => {
+    console.log('Row clicked:', row)
+    const newSelection = selectedRows.includes(row.id)
+      ? selectedRows.filter(id => id !== row.id)
+      : [...selectedRows, row.id]
+
+    setSelectedRows(newSelection)
+    setManageRowOpen(newSelection.length > 0)
+  }
+
+  const handleSelectionChange = (selectedIds: string[]) => {
+    console.log('Selection changed:', selectedIds)
+    setSelectedRows(selectedIds)
+    setManageRowOpen(selectedIds.length > 0)
+  }
+
+  const updatedSearchbarProps = {
+    ...searchbarProps,
+    value: searchValue,
+    onChange: handleSearchChange,
+  }
+
+  // Get visible columns based on both Jotai state and search
+  const visibleColumns = columns.filter(column => {
+    const isVisibleInJotai = columnVisibility[column.field] !== false
+    const isVisibleInSearch =
+      tags.length === 0 || searchVisibleColumns.has(column.field)
+    const isVisible = isVisibleInJotai && isVisibleInSearch
+
+    console.log(`Column ${column.field} visibility:`, {
+      jotai: isVisibleInJotai,
+      search: isVisibleInSearch,
+      final: isVisible,
+    })
+
+    return isVisible
+  })
+
+  // Calculate visible rows based on current page and pageSize
+  const startIndex = page * pageSize
+  const visibleRows = filteredRows.slice(startIndex, startIndex + pageSize)
+
+  console.log('DataGrid rendering with:', {
+    visibleColumns,
+    visibleRows,
+    page,
+    pageSize,
+    selectedRows,
+  })
+
+  if (loading) {
+    return (
+      <Box
+        sx={{
+          position: 'relative',
+          marginTop: '60px',
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          height: 'calc(100vh - 60px)',
+          width: 'calc(100vh)',
+          backgroundColor: woad.main,
+        }}
+      >
+        <CircularProgress />
+      </Box>
+    )
+  }
+
+  return (
+    <>
+      <Box
+        sx={{
+          position: 'relative',
+          marginLeft: '250px',
+          marginTop: '60px',
+          display: 'flex',
+          flexDirection: 'column',
+          height: 'calc(100vh - 60px)',
+          width: 'calc(100%)',
+          overflow: 'hidden',
+          p: 0,
+          m: 0,
+          backgroundColor: woad.main,
+        }}
+      >
+        {error && (
+          <Alert severity="error" sx={{ mb: 2 }}>
+            {error.message}
+          </Alert>
+        )}
+
+        <CustomToolbar
+          buttons={buttons}
+          dropdowns={dropdowns}
+          searchbarProps={updatedSearchbarProps}
+        />
+
+        <Box
+          sx={{
+            flexGrow: 1,
+            overflow: 'auto',
+            width: '100%',
+            display: 'flex',
+            flexDirection: 'column',
+          }}
+        >
+          <Table
+            ref={tableRef}
+            columns={visibleColumns}
+            rows={visibleRows}
+            loading={loading}
+            page={page}
+            pageSize={pageSize}
+            rowCount={filteredRows.length}
+            onPageChange={setPage}
+            onPageSizeChange={setPageSize}
+            onRowClick={handleRowClick}
+            selectedRows={selectedRows}
+            onSelectionChange={handleSelectionChange}
+            checkboxSelection
+          />
+
+          <CustomFooter
+            page={page}
+            pageSize={pageSize}
+            rowCount={filteredRows.length}
+            onPageChange={setPage}
+            onPageSizeChange={setPageSize}
+            columns={columns}
+          />
+        </Box>
+      </Box>
+
+      <ManageRow
+        open={manageRowOpen}
+        handleClose={() => setManageRowOpen(false)}
+        onDuplicate={onDuplicate}
+        onDelete={onDelete}
+      />
+    </>
+  )
+}
+
+export default DataGrid

package/src/components/DataGrid/utils/useManageColumn.tsx

@@ -0,0 +1,138 @@
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { useAtom, useSetAtom } from 'jotai'
+import { columnVisibilityAtom, columnVisibilityActions } from '../Jotai/atom'
+import type { ColumnDef } from '../Table'
+
+type ColumnVisibilityModel = { [key: string]: boolean }
+
+interface UseManageColumnProps {
+  columns: ColumnDef[]
+  handleClose: () => void
+  isPopupOpen: boolean
+  initialSearchInput?: string
+}
+
+export const useManageColumn = ({
+  columns,
+  handleClose,
+  isPopupOpen,
+  initialSearchInput = '',
+}: UseManageColumnProps) => {
+  const [tempVisibleColumns, setTempVisibleColumns] =
+    useState<ColumnVisibilityModel>({})
+  const [columnVisibility] = useAtom(columnVisibilityAtom)
+  const updateVisibility = useSetAtom(columnVisibilityActions)
+  const [searchInput, setSearchInput] = useState(initialSearchInput)
+  const [isAllChecked, setIsAllChecked] = useState(true)
+  const initialized = useRef(false)
+
+  console.log('useManageColumn hook render:', {
+    isPopupOpen,
+    columnVisibility,
+    tempVisibleColumns,
+    searchInput,
+  })
+
+  useEffect(() => {
+    if (isPopupOpen) {
+      const currentVisibility: ColumnVisibilityModel = {}
+      columns.forEach(column => {
+        currentVisibility[column.field] = columnVisibility[column.field] ?? true
+      })
+      console.log('Initializing tempVisibleColumns:', currentVisibility)
+      setTempVisibleColumns(currentVisibility)
+      setIsAllChecked(
+        columns.every(column => currentVisibility[column.field] === true)
+      )
+      initialized.current = true
+    }
+  }, [isPopupOpen, columns, columnVisibility])
+
+  const handleAllCols = useCallback(
+    (checked: boolean) => {
+      console.log('handleAllCols called with checked:', checked)
+      setIsAllChecked(checked)
+
+      setTempVisibleColumns(prev => {
+        const newVisibility: ColumnVisibilityModel = {}
+        columns.forEach(column => {
+          newVisibility[column.field] = checked
+        })
+
+        console.log('handleAllCols:', {
+          before: prev,
+          after: newVisibility,
+          checked,
+        })
+
+        return newVisibility
+      })
+    },
+    [columns]
+  )
+
+  const toggleColumnState = useCallback(
+    (field: string) => {
+      setTempVisibleColumns(prev => {
+        const newState = {
+          ...prev,
+          [field]: !prev[field],
+        }
+
+        // Update isAllChecked based on new state
+        const areAllVisible = columns.every(column =>
+          field === column.field ? newState[field] : prev[column.field]
+        )
+        setIsAllChecked(areAllVisible)
+
+        console.log('toggleColumnState:', {
+          field,
+          before: prev[field],
+          after: newState[field],
+          allState: newState,
+          areAllVisible,
+        })
+        return newState
+      })
+    },
+    [columns]
+  )
+
+  const onSaveColumnView = useCallback(() => {
+    console.log('Saving column visibility state:', tempVisibleColumns)
+    updateVisibility({ type: 'save', newState: tempVisibleColumns })
+    handleClose()
+  }, [tempVisibleColumns, updateVisibility, handleClose])
+
+  const formatColumnName = useCallback((fieldName: string): string => {
+    const formatted = fieldName
+      .replace(/([A-Z])/g, ' $1')
+      .replace(/^./, str => str.toUpperCase())
+      .trim()
+    console.log('Formatting column name:', { fieldName, formatted })
+    return formatted
+  }, [])
+
+  const handlePageUnload = useCallback(() => {
+    console.log('Page unload - closing manage columns')
+    handleClose()
+  }, [handleClose])
+
+  useEffect(() => {
+    window.addEventListener('beforeunload', handlePageUnload)
+    return () => {
+      window.removeEventListener('beforeunload', handlePageUnload)
+    }
+  }, [handlePageUnload])
+
+  return {
+    handleAllCols,
+    toggleColumnState,
+    visibleColumns: tempVisibleColumns,
+    onSaveColumnView,
+    formatColumnName,
+    searchInput,
+    setSearchInput,
+    isAllChecked,
+  }
+}

package/src/components/DataGrid/utils/useSearchbar.tsx

@@ -0,0 +1,122 @@
+import React, { useCallback, useMemo, useState, useEffect } from 'react'
+import type { ColumnDef, RowData } from '../Table'
+
+interface UseSearchbarProps {
+  columns: ColumnDef[]
+  rows: RowData[]
+  searchValue: string
+  setSearchValue: (value: string) => void
+}
+
+export const useSearchbar = ({
+  columns,
+  rows,
+  searchValue,
+  setSearchValue,
+}: UseSearchbarProps) => {
+  const [tags, setTags] = useState<string[]>([])
+
+  useEffect(() => {
+    console.log('Search value changed:', searchValue)
+    setTags(searchValue.trim() ? searchValue.toLowerCase().split(' ') : [])
+  }, [searchValue])
+
+  const handleSearchChange = useCallback(
+    (event: React.ChangeEvent<HTMLInputElement>) => {
+      const newValue = event.target.value
+      console.log('Search input changed:', {
+        oldValue: searchValue,
+        newValue,
+      })
+      setSearchValue(newValue)
+    },
+    [searchValue, setSearchValue]
+  )
+
+  const filteredRows = useMemo(() => {
+    if (!searchValue.trim()) {
+      return rows
+    }
+
+    const searchTerms = searchValue.toLowerCase().trim().split(' ')
+
+    return rows.filter(row => {
+      return searchTerms.some(term => {
+        return columns.some(column => {
+          // Check column header name
+          const headerMatch = column.headerName?.toLowerCase().includes(term)
+
+          // Check column field name
+          const fieldMatch = column.field.toLowerCase().includes(term)
+
+          // Check cell value
+          const cellValue = row[column.field]
+          const valueMatch =
+            cellValue != null && String(cellValue).toLowerCase().includes(term)
+
+          console.log('Searching:', {
+            field: column.field,
+            header: column.headerName,
+            value: cellValue,
+            searchTerm: term,
+            headerMatch,
+            fieldMatch,
+            valueMatch,
+          })
+
+          return headerMatch || fieldMatch || valueMatch
+        })
+      })
+    })
+  }, [rows, searchValue, columns])
+
+  const visibleColumns = useMemo(() => {
+    if (!searchValue.trim()) {
+      return new Set(columns.map(col => col.field))
+    }
+
+    const searchTerms = searchValue.toLowerCase().trim().split(' ')
+
+    return new Set(
+      columns
+        .filter(col => {
+          return searchTerms.some(term => {
+            // Check column header name
+            const headerMatch = col.headerName?.toLowerCase().includes(term)
+
+            // Check column field name
+            const fieldMatch = col.field.toLowerCase().includes(term)
+
+            // Check if any row has matching data in this column
+            const hasMatchingData = filteredRows.some(row => {
+              const cellValue = row[col.field]
+              return (
+                cellValue != null &&
+                String(cellValue).toLowerCase().includes(term)
+              )
+            })
+
+            console.log('Column visibility check:', {
+              field: col.field,
+              header: col.headerName,
+              searchTerm: term,
+              headerMatch,
+              fieldMatch,
+              hasMatchingData,
+            })
+
+            return headerMatch || fieldMatch || hasMatchingData
+          })
+        })
+        .map(col => col.field)
+    )
+  }, [columns, searchValue, filteredRows])
+
+  return {
+    searchValue,
+    handleSearchChange,
+    filteredRows,
+    visibleColumns,
+    tags,
+  }
+}

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

@@ -0,0 +1,63 @@
+'use client'
+import React from 'react'
+import { Box } from '@mui/material'
+import type { DatagridProps } from '../../DataGrid'
+import DataGrid from '../../DataGrid'
+
+export interface FormDataGridProps {
+  title: string
+  description: string
+  datagrid: DatagridProps
+}
+
+function FormDataGrid({ title, description, datagrid }: FormDataGridProps) {
+  return (
+    <Box
+      sx={{
+        width: '100%',
+        height: 'auto',
+        overflow: 'hidden',
+        '& *': {
+          overflow: 'hidden !important',
+        },
+      }}
+    >
+      <Box
+        sx={{
+          marginTop: 1,
+          marginBottom: 1,
+          width: '100%',
+        }}
+      >
+        <Box
+          sx={{
+            marginBottom: 0.5,
+            width: '100%',
+            textAlign: 'left',
+            fontFamily: 'Merriweather',
+            fontSize: '1.5rem',
+            fontWeight: 400,
+            color: 'black',
+          }}
+        >
+          {title}
+        </Box>
+        <Box
+          sx={{
+            width: '100%',
+            textAlign: 'left',
+            fontFamily: 'Merriweather',
+            fontSize: '1.25rem',
+            fontWeight: 400,
+            color: 'black',
+          }}
+        >
+          {description}
+        </Box>
+      </Box>
+      <DataGrid {...datagrid} />
+    </Box>
+  )
+}
+
+export default FormDataGrid