diff --git a/striker-ui/pages/init/index.tsx b/striker-ui/pages/init/index.tsx index 7cc715d4..beb5cd75 100644 --- a/striker-ui/pages/init/index.tsx +++ b/striker-ui/pages/init/index.tsx @@ -1,8 +1,10 @@ -import { FC } from 'react'; +import { FC, useState } from 'react'; import { Box as MUIBox, + BoxProps as MUIBoxProps, iconButtonClasses as muiIconButtonClasses, } from '@mui/material'; +import { DragHandle as MUIDragHandleIcon } from '@mui/icons-material'; import { DataGrid as MUIDataGrid, DataGridProps as MUIDataGridProps, @@ -10,7 +12,7 @@ import { } from '@mui/x-data-grid'; import API_BASE_URL from '../../lib/consts/API_BASE_URL'; -import { TEXT } from '../../lib/consts/DEFAULT_THEME'; +import { GREY, TEXT } from '../../lib/consts/DEFAULT_THEME'; import Decorator from '../../components/Decorator'; import { Panel, PanelHeader } from '../../components/Panels'; @@ -65,7 +67,34 @@ const DataGridCellText: FC = ({ /> ); -const NETWORK_INTERFACE_COLUMNS: MUIDataGridProps['columns'] = [ +const createNetworkInterfaceTableColumns = ( + onMouseDownDragHandle: ( + row: NetworkInterfaceOverviewMetadata, + ...eventArgs: Parameters> + ) => void, +): MUIDataGridProps['columns'] => [ + { + align: 'center', + field: '', + renderCell: ({ row }) => ( + { + onMouseDownDragHandle(row, ...eventArgs); + }} + sx={{ + alignItems: 'center', + display: 'flex', + flexDirection: 'row', + + '&:hover': { cursor: 'grab' }, + }} + > + + + ), + sortable: false, + width: 1, + }, { field: 'networkInterfaceName', flex: 1, @@ -122,6 +151,10 @@ const NETWORK_INTERFACE_COLUMNS: MUIDataGridProps['columns'] = [ ]; const NetworkInterfaceList: FC = () => { + const [networkInterfaceHeld, setNetworkInterfaceHeld] = useState< + NetworkInterfaceOverviewMetadata | undefined + >(); + const { data: networkInterfaces = MOCK_NICS, isLoading } = periodicFetch< NetworkInterfaceOverviewMetadata[] >(`${API_BASE_URL}/network-interface`, { @@ -136,33 +169,68 @@ const NetworkInterfaceList: FC = () => { {isLoading ? ( ) : ( - networkInterfaceUUID} - hideFooter - rows={networkInterfaces} + :not(:first-child)': { + marginTop: '1em', }, }} - /> + > + { + setNetworkInterfaceHeld(row); + })} + disableColumnMenu + disableSelectionOnClick + getRowId={({ networkInterfaceUUID }) => networkInterfaceUUID} + hideFooter + rows={networkInterfaces} + sx={{ + color: GREY, + + [`& .${muiIconButtonClasses.root}`]: { + color: 'inherit', + }, + + [`& .${muiGridClasses.cell}:focus`]: { + outline: 'none', + }, + }} + /> + + { + setNetworkInterfaceHeld(undefined); + }} + sx={{ + borderColor: TEXT, + borderStyle: 'dashed', + borderWidth: '4px', + height: '100px', + width: '100px', + }} + /> + )} ); }; const Init: FC = () => ( - + );