konstitisyon.nu/components/versions/list-versions.js

import {forwardRef, useRef, useState} from 'react'
import PropTypes from 'prop-types'
import Table from '@mui/material/Table'
import TableBody from '@mui/material/TableBody'
import TableCell from '@mui/material/TableCell'
import TableContainer from '@mui/material/TableContainer'
import TableHead from '@mui/material/TableHead'
import TableRow from '@mui/material/TableRow'
import Paper from '@mui/material/Paper'
import Button from '@mui/material/Button'
import ToggleButton from '@mui/material/ToggleButton'
import ToggleButtonGroup from '@mui/material/ToggleButtonGroup'
import ViewListIcon from '@mui/icons-material/ViewList'
import TimelineIcon from '@mui/icons-material/Timeline'
import {TableVirtuoso} from 'react-virtuoso'
import {Box, Typography} from '@mui/material'
import SessionExpired from '../session/session-expired.js'
import VersionDialog from './version-dialog.js'
import VersionTimeline from './version-timeline.js'
import VersionSearch from './version-search.js'
import VersionFilters from './version-filters.js'
import {formatDate} from '@/lib/format.js'
import {compareVersion} from '@/lib/directus.js'
import {filterVersions, getFilterStats} from '@/lib/version-utils.js'

const columns = [
  {
    width: 200,
    label: 'Version',
    dataKey: 'name',
  },
  {
    width: 120,
    label: 'Créée le',
    dataKey: 'date_created',
    numeric: true,
  }
]

const VirtuosoTableComponents = {
  Scroller: forwardRef((props, ref) => (
    <TableContainer component={Paper} {...props} ref={ref} />
  )),
  Table: props => (
    <Table {...props} sx={{borderCollapse: 'separate', tableLayout: 'fixed'}} />
  ),
  TableHead: forwardRef((props, ref) => <TableHead {...props} ref={ref} />),
  TableRow,
  TableBody: forwardRef((props, ref) => <TableBody {...props} ref={ref} />),
}

function fixedHeaderContent() {
  return (
    <TableRow>
      {columns.map(column => (
        <TableCell
          key={column.dataKey}
          variant='head'
          align={column.numeric || false ? 'right' : 'left'}
          style={{width: column.width}}
          sx={{backgroundColor: 'background.paper'}}
        >
          {column.label}
        </TableCell>
      ))}
    </TableRow>
  )
}

function rowContent({
  row,
  accessToken,
  userId,
  countdownRef,
  setError,
  setIsErrorAlertOpen,
  setIsOpenComparison,
  setVersionCompare
}) {
  const handleButtonClick = async versionId => {
    const version = await compareVersion({
      accessToken,
      userId,
      versionId,
      countdownRef,
      setError,
      setIsErrorAlertOpen
    })

    if (version) {
      setVersionCompare({...version, versionId})
      setIsOpenComparison(true)
    }
  }

  return (
    <>
      {columns.map(column => (
        <TableCell
          key={column.dataKey}
          align={column.numeric || false ? 'right' : 'left'}
        >
          {column.dataKey === 'date_created'
            ? formatDate(row[column.dataKey], 'Pp')
            : <Button variant='outlined' color='success' onClick={() => handleButtonClick(row.id)}>{row[column.dataKey]}</Button>}
        </TableCell>
      ))}
    </>
  )
}

export default function ListVersions({
  collection,
  data,
  accessToken,
  userId,
  setError,
  setIsErrorAlertOpen
}) {
  const countdownRef = useRef()
  const [viewMode, setViewMode] = useState('table')
  const [isOpenComparison, setIsOpenComparison] = useState(false)
  const [versionCompare, setVersionCompare] = useState(null)
  const [searchTerm, setSearchTerm] = useState('')
  const [filters, setFilters] = useState({
    author: '',
    dateFrom: '',
    dateTo: '',
    status: ''
  })

  // Filter data based on search and filters
  const filteredData = filterVersions(data, searchTerm, filters)
  const stats = getFilterStats(data, filteredData)

  const versionData = data.find(({id}) => id === versionCompare?.versionId)

  const handleSearchChange = newSearchTerm => {
    setSearchTerm(newSearchTerm)
  }

  const handleFiltersChange = newFilters => {
    setFilters(newFilters)
  }

  const handleViewModeChange = (event, newViewMode) => {
    if (newViewMode !== null) {
      setViewMode(newViewMode)
    }
  }

  return (
    <>
      <Box>
        <Box sx={{
          display: 'flex',
          justifyContent: 'space-between',
          alignItems: 'center',
          mb: 2
        }}
        >
          <Box>
            <Typography variant='button' sx={{fontWeight: 'bold'}}>
              {collection}
            </Typography>
            {stats.hidden > 0 && (
              <Typography variant='caption' color='text.secondary' sx={{ml: 1}}>
                ({stats.filtered}/{stats.total} versions)
              </Typography>
            )}
          </Box>

          <ToggleButtonGroup
            exclusive
            color='primary'
            size='small'
            value={viewMode}
            onChange={handleViewModeChange}
          >
            <ToggleButton value='table' aria-label='vue tableau'>
              <ViewListIcon sx={{mr: 1}} />
              Table
            </ToggleButton>
            <ToggleButton value='timeline' aria-label='vue chronologique'>
              <TimelineIcon sx={{mr: 1}} />
              Timeline
            </ToggleButton>
          </ToggleButtonGroup>
        </Box>

        <VersionSearch onSearchChange={handleSearchChange} />
        <VersionFilters data={data} onFiltersChange={handleFiltersChange} />

        {filteredData.length === 0 ? (
          <Box sx={{textAlign: 'center', py: 4}}>
            <Typography variant='body1' color='text.secondary'>
              {searchTerm || Object.values(filters).some(Boolean)
                ? 'Aucune version ne correspond aux critères de recherche'
                : 'Aucune version disponible'}
            </Typography>
          </Box>
        ) : (
          viewMode === 'table' ? (
            <Paper style={{height: 350, width: '100%', marginBlock: 5}}>
              <TableVirtuoso
                data={filteredData}
                components={VirtuosoTableComponents}
                fixedHeaderContent={fixedHeaderContent}
                itemContent={(index, row) => rowContent({
                  index, row, accessToken, userId, countdownRef, setError, setIsErrorAlertOpen, setIsOpenComparison, setVersionCompare
                })}
              />
            </Paper>
          ) : (
            <VersionTimeline
              collection={collection}
              data={filteredData}
              accessToken={accessToken}
              userId={userId}
              setError={setError}
              setIsErrorAlertOpen={setIsErrorAlertOpen}
            />
          )
        )}
      </Box>

      {isOpenComparison && (
        <VersionDialog versionData={versionData} versionCompare={versionCompare} isOpen={isOpenComparison} setIsOpen={setIsOpenComparison} />
      )}
      <SessionExpired ref={countdownRef} setError={setError} setIsErrorAlertOpen={setIsErrorAlertOpen} />
    </>
  )
}

ListVersions.propTypes = {
  collection: PropTypes.oneOf(['titres', 'articles']).isRequired,
  data: PropTypes.array.isRequired,
  accessToken: PropTypes.string.isRequired,
  userId: PropTypes.string.isRequired,
  setError: PropTypes.func.isRequired,
  setIsErrorAlertOpen: PropTypes.func.isRequired
}