goobs-frontend 0.8.7 → 0.8.9

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

@@ -0,0 +1,169 @@
+'use client'
+
+import React, { useState } from 'react'
+import { Box } from '@mui/material'
+import { useAtomValue } from 'jotai'
+import { columnVisibilityAtom } from '../Jotai/atom'
+import { VerticalDivider } from '../VerticalDivider'
+import TablePagination from '@mui/material/TablePagination'
+import ManageColumn from '../ManageColumn'
+import { ColumnDef } from '../Table'
+import CustomButton from '../../Button'
+import ShowHideEyeIcon from '@/components/Icons/ShowHideEye'
+
+export interface CustomFooterProps {
+  page: number
+  pageSize: number
+  rowCount: number
+  onPageChange: (newPage: number) => void
+  onPageSizeChange: (newPageSize: number) => void
+  columns: ColumnDef[]
+}
+
+function CustomFooter({
+  page,
+  pageSize,
+  rowCount,
+  onPageChange,
+  onPageSizeChange,
+  columns,
+}: CustomFooterProps) {
+  const [isOpen, setIsOpen] = useState(false)
+  const [checkboxWidth] = useState(45)
+  const columnVisibility = useAtomValue(columnVisibilityAtom)
+
+  const handleOpen = () => {
+    console.log('Footer handleOpen')
+    setIsOpen(true)
+  }
+
+  const handleClose = () => {
+    console.log('Footer handleClose')
+    setIsOpen(false)
+  }
+
+  // Calculate total width based on visible columns only
+  const totalWidth = columns.reduce((sum, col) => {
+    if (columnVisibility[col.field] !== false) {
+      return sum + (col.width || 150)
+    }
+    return sum
+  }, 0)
+
+  const totalPages = Math.ceil(rowCount / pageSize)
+
+  return (
+    <Box
+      className="custom-footer-container"
+      sx={{
+        width: `${totalWidth}px`,
+        minWidth: '100%',
+        height: '56px',
+        position: 'sticky',
+        left: 0,
+        marginLeft: `${checkboxWidth}px`,
+      }}
+    >
+      <Box
+        sx={{
+          display: 'flex',
+          justifyContent: 'space-between',
+          alignItems: 'center',
+          flexWrap: 'nowrap',
+          width: '100%',
+          height: '100%',
+          px: 2,
+        }}
+      >
+        <Box
+          sx={{
+            display: 'flex',
+            alignItems: 'center',
+          }}
+          className="left-box"
+        >
+          <Box sx={{ display: 'flex', alignItems: 'center', mr: '10px' }}>
+            <VerticalDivider />
+          </Box>
+          <Box
+            sx={{
+              display: 'flex',
+              alignItems: 'center',
+              gap: '8px',
+              pr: '8px',
+            }}
+          >
+            <CustomButton
+              onClick={handleOpen}
+              text="Manage Columns"
+              fontvariant="merriparagraph"
+              fontcolor="black"
+              icon={<ShowHideEyeIcon visible={true} />}
+              iconcolor="black"
+              iconlocation="left"
+              disableButton="false"
+              sx={{
+                minWidth: 'unset',
+                padding: '8px',
+                '& .MuiTypography-root': {
+                  marginLeft: '16px',
+                },
+              }}
+            />
+          </Box>
+          <Box
+            sx={{
+              display: 'flex',
+              alignItems: 'center',
+              ml: '10px',
+              mr: '10px',
+            }}
+          >
+            <VerticalDivider />
+          </Box>
+        </Box>
+        <Box
+          sx={{
+            display: 'flex',
+            alignItems: 'center',
+            ml: 'auto',
+          }}
+          className="right-box"
+        >
+          <TablePagination
+            component="div"
+            count={rowCount}
+            page={page}
+            onPageChange={(_, newPage) => {
+              onPageChange(newPage)
+            }}
+            rowsPerPage={pageSize}
+            onRowsPerPageChange={event => {
+              const newPageSize = parseInt(event.target.value, 10)
+              onPageSizeChange(newPageSize)
+            }}
+            rowsPerPageOptions={[10, 25, 50, 100]}
+            slotProps={{
+              actions: {
+                previousButton: {
+                  disabled: page === 0,
+                },
+                nextButton: {
+                  disabled: page >= totalPages - 1,
+                },
+              },
+            }}
+            showFirstButton
+            showLastButton
+            labelDisplayedRows={({ from, to, count }) =>
+              `${from}-${to} of ${count !== -1 ? count : `more than ${to}`}`
+            }
+          />
+        </Box>
+      </Box>
+      <ManageColumn open={isOpen} handleClose={handleClose} columns={columns} />
+    </Box>
+  )
+}
+
+export default CustomFooter

package/src/components/DataGrid/Jotai/atom.ts

@@ -0,0 +1,91 @@
+import { atom } from 'jotai'
+import { atomWithStorage } from 'jotai/utils'
+
+interface ColumnVisibility {
+  [key: string]: boolean
+}
+
+// Create a persistent atom that saves to localStorage
+export const columnVisibilityAtom = atomWithStorage<ColumnVisibility>(
+  'columnVisibility',
+  {}
+)
+
+// Atom for managing initial column setup
+export const columnsAtom = atom<string[]>([])
+
+// Actions atom for updating visibility
+export const columnVisibilityActions = atom(
+  null,
+  (
+    get,
+    set,
+    update: {
+      type: 'toggle' | 'setAll' | 'reset' | 'save'
+      field?: string
+      value?: boolean
+      newState?: ColumnVisibility
+    }
+  ) => {
+    const currentVisibility = get(columnVisibilityAtom)
+    const columns = get(columnsAtom)
+    let newVisibility: ColumnVisibility = {}
+
+    console.log('columnVisibilityActions - before:', {
+      type: update.type,
+      currentVisibility,
+    })
+
+    switch (update.type) {
+      case 'toggle': {
+        if (update.field) {
+          newVisibility = {
+            ...currentVisibility,
+            [update.field]: !currentVisibility[update.field],
+          }
+          console.log('columnVisibilityActions - toggle:', {
+            field: update.field,
+            before: currentVisibility[update.field],
+            after: newVisibility[update.field],
+          })
+          set(columnVisibilityAtom, newVisibility)
+        }
+        break
+      }
+
+      case 'setAll': {
+        columns.forEach(column => {
+          newVisibility[column] = !!update.value
+        })
+        console.log('columnVisibilityActions - setAll:', {
+          value: update.value,
+          newState: newVisibility,
+        })
+        set(columnVisibilityAtom, newVisibility)
+        break
+      }
+
+      case 'save': {
+        if (update.newState) {
+          console.log('columnVisibilityActions - save:', {
+            before: currentVisibility,
+            after: update.newState,
+          })
+          set(columnVisibilityAtom, update.newState)
+        }
+        break
+      }
+
+      case 'reset': {
+        columns.forEach(column => {
+          newVisibility[column] = true
+        })
+        console.log('columnVisibilityActions - reset:', newVisibility)
+        set(columnVisibilityAtom, newVisibility)
+        break
+      }
+    }
+
+    console.log('columnVisibilityActions - after:', get(columnVisibilityAtom))
+  }
+)

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