diff --git a/striker-ui/components/Files/FileEditForm.tsx b/striker-ui/components/Files/FileEditForm.tsx index e0b01f87..3d46b320 100644 --- a/striker-ui/components/Files/FileEditForm.tsx +++ b/striker-ui/components/Files/FileEditForm.tsx @@ -195,23 +195,22 @@ const FileEditForm = ( `${API_BASE_URL}/file/${fileOverview.fileUUID}`, ); - fileToEdit.fileLocations = data.map( - ([ - , - , - , - , - , - fileLocationUUID, - fileLocationActive, - anvilUUID, - anvilName, - anvilDescription, - ]) => ({ + fileToEdit.fileLocations = data.map( + ({ + 5: fileLocationUUID, + 6: fileLocationActive, + 7: anvilUUID, + 8: anvilName, + 9: anvilDescription, + 10: hostUUID, + 11: hostName, + }) => ({ anvilDescription, anvilName, anvilUUID, fileLocationUUID, + hostName, + hostUUID, isFileLocationActive: parseInt(fileLocationActive, 10) === 1, }), ); diff --git a/striker-ui/components/Files/FileInfo.tsx b/striker-ui/components/Files/FileInfo.tsx index 354ed99a..398b1f18 100644 --- a/striker-ui/components/Files/FileInfo.tsx +++ b/striker-ui/components/Files/FileInfo.tsx @@ -4,20 +4,24 @@ import { FormControl, FormControlLabel, FormGroup, + Grid, styled, } from '@mui/material'; import { Sync as SyncIcon, SyncDisabled as SyncDisabledIcon, } from '@mui/icons-material'; +import { ReactElement, useMemo } from 'react'; import { v4 as uuidv4 } from 'uuid'; import { BLUE, RED, TEXT } from '../../lib/consts/DEFAULT_THEME'; import { UPLOAD_FILE_TYPES_ARRAY } from '../../lib/consts/UPLOAD_FILE_TYPES'; +import List from '../List'; import MenuItem from '../MenuItem'; import OutlinedInput from '../OutlinedInput'; import OutlinedInputLabel from '../OutlinedInputLabel'; +import { ExpandablePanel, InnerPanelBody } from '../Panels'; import Select from '../Select'; type FileInfoProps = Pick & @@ -56,6 +60,34 @@ const FileInfo = ( const fileTypeElementId = `file-type-${idExtension}`; const fileTypeElementLabel = 'File type'; + const anFileLocations = useMemo( + () => + fileLocations.reduce< + Record< + string, + Pick & { + flocs: FileLocation[]; + } + > + >((previous, fileLocation) => { + const { anvilDescription, anvilName, anvilUUID } = fileLocation; + + if (!previous[anvilUUID]) { + previous[anvilUUID] = { + anvilDescription, + anvilName, + anvilUUID, + flocs: [], + }; + } + + previous[anvilUUID].flocs.push(fileLocation); + + return previous; + }, {}), + [fileLocations], + ); + return ( :not(:first-child)': { marginTop: '1em' } }}> @@ -100,37 +132,68 @@ const FileInfo = ( )} - {fileLocations.map( - ( - { anvilName, anvilDescription, anvilUUID, isFileLocationActive }, - fileLocationIndex, - ) => ( - } - defaultChecked={isFileLocationActive} - disabled={isReadonly} - icon={} - onChange={({ target: { checked } }) => { - onChange?.call( - null, - { - isFileLocationActive: - checked === isFileLocationActive ? undefined : checked, - }, - { fileLocationIndex }, - ); - }} - /> - } - key={anvilUUID} - label={`${anvilName}: ${anvilDescription}`} - sx={{ color: TEXT }} - value={`${anvilUUID}-sync`} - /> - ), - )} + ( + + + + {flocs.map( + ({ + fileLocationUUID: flocUUID, + hostName, + hostUUID, + isFileLocationActive, + }) => ( + + } + defaultChecked={isFileLocationActive} + disabled={isReadonly} + edge="start" + icon={} + onChange={({ target: { checked } }) => { + onChange?.call( + null, + { + isFileLocationActive: + checked === isFileLocationActive + ? undefined + : checked, + }, + { + fileLocationIndex: fileLocations.findIndex( + ({ fileLocationUUID }) => + flocUUID === fileLocationUUID, + ), + }, + ); + }} + /> + } + label={hostName} + sx={{ color: TEXT }} + value={`${hostUUID}-sync`} + /> + + ), + )} + + + + )} + /> ); }; diff --git a/striker-ui/types/FileLocation.d.ts b/striker-ui/types/FileLocation.d.ts index 7274ea64..04b6f7ca 100644 --- a/striker-ui/types/FileLocation.d.ts +++ b/striker-ui/types/FileLocation.d.ts @@ -3,5 +3,7 @@ type FileLocation = { anvilDescription: string; anvilUUID: string; fileLocationUUID: string; + hostName: string; + hostUUID: string; isFileLocationActive: boolean; };