components.process.ProcessTableView.tsx Maven / Gradle / Ivy

Go to download

Show more of this group Show more artifacts with this name
Show all versions of gears-frontend Show documentation

GEARS Frontend

There is a newer version: 0.80.3

import _ from 'lodash';
import Elevate from 'components/common/Elevate';
import { toProcessRef } from 'components/process/utils/process';
import BasicTable from 'components/view/ViewTable';
import { useResponsiveColumns } from 'hooks/columns';
import useStartProcess from 'hooks/process';
import { useProcessRenderContext, useTiles } from 'hooks/render';
import { useTranslation } from 'react-i18next';

import { Box } from '@mui/material';

import { CreateGearsIcon } from './GearsIcon';
import { TileInputProps } from './Tile';

const ProcessTableView = () => {
  const tiles   = useTiles()
  const columns = useColumns()
  const rows    = useTableProcessRows(tiles)

  return (
    
      
        {/* @ts-ignore */}
        
      
    
  )
}  

function useTableProcessRows(tiles: TileInputProps[]) {
  const startProcess = useStartProcess()
  const { setPath }  = useProcessRenderContext()

  const onClick = (tile: TileInputProps) => (e: any) => {
    switch (tile.type) {
      case 'directory': setPath(tile.path); break
      case 'process':   startProcess(e, tile.process!, "PROCESS_OPEN"); break
    }
  }

  return tiles.map(tile => ({
    id: tile.path,
    onClick: onClick(tile), 
    cells: {
      'icon': ,
      'name': tile.label || tile.process?.title,
      'key':  tile.process?.key
    }
  }))
}

const useColumns = () => {
  const { t } = useTranslation()

  const icon = {
    headerName: "",
    field: "icon",
    cellProps: {
      sx: {
        maxWidth: "60px",
        width: "1px",
        align: "left",
      }
    }
  }

  const processName = {
    headerName: t('process_name'),
    field: "name",
    cellProps: {
      sx: {
        flexGrow: 1,
        align: "left",
        paddingLeft: 0
      }
    }
  }
/*
  const processKey = {
    headerName: t('process_key'),
    field: "key",
    cellProps: {
      sx: {
        flexGrow: 1,
        align: "left",
        paddingLeft: 0
      }
    }
  }
*/
  const columns = {
    xxs: [icon, processName],
  }

  return useResponsiveColumns(columns, true)
}


export default ProcessTableView