Skip to content

Commit

Permalink
EES-5544 add reorder fnality
Browse files Browse the repository at this point in the history
  • Loading branch information
@bennettstuart
bennettstuart committed Dec 12, 2024
1 parent e0136c9 commit c1cb095
Show file tree
Hide file tree
Showing 2 changed files with 215 additions and 172 deletions.
348 changes: 184 additions & 164 deletions src/explore-education-statistics-admin/src/pages/release/data/components/DataFilesTable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,200 +19,220 @@ import {
import ButtonGroup from '@common/components/ButtonGroup';
import ButtonText from '@common/components/ButtonText';
import Modal from '@common/components/Modal';
import ReorderableList from '@common/components/ReorderableList';
import reorder from '@common/utils/reorder';
import React, { useEffect, useState } from 'react';
import { generatePath } from 'react-router';
import React from 'react';
import styles from './DataFilesTable.module.scss';

interface Props {
dataFiles: DataFile[];
publicationId: string;
releaseId: string;
canUpdateRelease?: boolean;
handleDeleteFile: (dataFile: DataFile) => Promise<void>;
handleStatusChange: (
isReordering: boolean;
onCancelReordering: () => void;
onConfirmReordering: (nextSeries: DataFile[]) => void;
onDeleteFile: (dataFile: DataFile) => Promise<void>;
onStatusChange: (
dataFile: DataFile,
{ totalRows, status }: DataFileImportStatus,
) => Promise<void>;
}

const DataFilesTable = ({
dataFiles,
dataFiles: initialDataFiles,
publicationId,
releaseId,
canUpdateRelease,
handleDeleteFile,
handleStatusChange,
isReordering,
onCancelReordering,
onConfirmReordering,
onDeleteFile,
onStatusChange,
}: Props) => {
const [dataFiles, setDataFiles] = useState(initialDataFiles);

useEffect(() => {
setDataFiles(initialDataFiles);
}, [initialDataFiles]);

if (isReordering) {
return (
<ReorderableList
heading="Reorder data files"
id="dataFiles"
list={dataFiles.map(({ id, title }) => ({
id,
label: title,
}))}
onCancel={() => {
setDataFiles(initialDataFiles);
onCancelReordering();
}}
onConfirm={() => onConfirmReordering(dataFiles)}
onMoveItem={({ prevIndex, nextIndex }) => {
const reordered = reorder(dataFiles, prevIndex, nextIndex);
setDataFiles(reordered);
}}
onReverse={() => {
setDataFiles(dataFiles.toReversed());
}}
/>
);
}

return (
<>
<h2 className="govuk-heading-l">Uploaded data files</h2>
<table className={styles.table}>
<thead>
<tr>
<th scope="col">Subject title</th>
<th scope="col">Size</th>
{/* <th scope="col">Rows</th> */}
<th scope="col">Status</th>
{/* <th scope="col">Uploaded by</th> */}
{/*
<th scope="col">Date uploaded</th> */}
<th scope="col">Actions</th>
</tr>
</thead>
<table className={styles.table}>
<thead>
<tr>
<th scope="col">Subject title</th>
<th scope="col">Size</th>
<th scope="col">Status</th>
<th scope="col">Actions</th>
</tr>
</thead>

<tbody>
{dataFiles.map(dataFile => (
<tr key={dataFile.title}>
<td>{dataFile.title}</td>
<td className={styles.fileSize}>
{dataFile.fileSize.size.toLocaleString()}{' '}
{dataFile.fileSize.unit}
</td>
{/* <td>{dataFile.rows}</td> */}
<td>
<ImporterStatus
className={styles.fileStatus}
releaseId={releaseId}
dataFile={dataFile}
onStatusChange={handleStatusChange}
/>
</td>
{/* <td>
<a href={`mailto:${dataFile.userName}`}>{dataFile.userName}</a>
</td> */}
{/* <td>
{!dataFile.created ? undefined : (
<FormattedDate format="d MMMM yyyy HH:mm">
{dataFile.created}
</FormattedDate>
)}
</td> */}
<td>
<ButtonGroup className={styles.actions}>
<Modal
showClose
title="Data file details"
triggerButton={<ButtonText>View details</ButtonText>}
>
<DataFileDetailsTable
dataFile={dataFile}
releaseId={releaseId}
onStatusChange={handleStatusChange}
/>
</Modal>
{canUpdateRelease &&
terminalImportStatuses.includes(dataFile.status) && (
<>
{dataFile.status === 'COMPLETE' && (
<>
<tbody>
{dataFiles.map(dataFile => (
<tr key={dataFile.title}>
<td>{dataFile.title}</td>
<td className={styles.fileSize}>
{dataFile.fileSize.size.toLocaleString()} {dataFile.fileSize.unit}
</td>
<td>
<ImporterStatus
className={styles.fileStatus}
releaseId={releaseId}
dataFile={dataFile}
onStatusChange={onStatusChange}
/>
</td>
<td>
<ButtonGroup className={styles.actions}>
<Modal
showClose
title="Data file details"
triggerButton={<ButtonText>View details</ButtonText>}
>
<DataFileDetailsTable
dataFile={dataFile}
releaseId={releaseId}
onStatusChange={onStatusChange}
/>
</Modal>
{canUpdateRelease &&
terminalImportStatuses.includes(dataFile.status) && (
<>
{dataFile.status === 'COMPLETE' && (
<>
<Link
to={generatePath<ReleaseDataFileRouteParams>(
releaseDataFileRoute.path,
{
publicationId,
releaseId,
fileId: dataFile.id,
},
)}
>
Edit title
</Link>
{dataFile.publicApiDataSetId ? (
<Modal
showClose
title="Cannot replace data"
triggerButton={
<ButtonText>Replace data</ButtonText>
}
>
<p>
This data file has an API data set linked to it.
Please remove the API data set before replacing
the data.
</p>
<p>
<Link
to={generatePath<ReleaseDataSetRouteParams>(
releaseApiDataSetDetailsRoute.path,
{
publicationId,
releaseId,
dataSetId: dataFile.publicApiDataSetId,
},
)}
>
Go to API data set
</Link>
</p>
</Modal>
) : (
<Link
to={generatePath<ReleaseDataFileRouteParams>(
releaseDataFileRoute.path,
to={generatePath<ReleaseDataFileReplaceRouteParams>(
releaseDataFileReplaceRoute.path,
{
publicationId,
releaseId,
fileId: dataFile.id,
},
)}
>
Edit title
Replace data
</Link>
{dataFile.publicApiDataSetId ? (
<Modal
showClose
title="Cannot replace data"
triggerButton={
<ButtonText>Replace data</ButtonText>
}
>
<p>
This data file has an API data set linked to
it. Please remove the API data set before
replacing the data.
</p>
<p>
<Link
to={generatePath<ReleaseDataSetRouteParams>(
releaseApiDataSetDetailsRoute.path,
{
publicationId,
releaseId,
dataSetId: dataFile.publicApiDataSetId,
},
)}
>
Go to API data set
</Link>
</p>
</Modal>
) : (
<Link
to={generatePath<ReleaseDataFileReplaceRouteParams>(
releaseDataFileReplaceRoute.path,
{
publicationId,
releaseId,
fileId: dataFile.id,
},
)}
>
Replace data
</Link>
)}
</>
)}
{dataFile.publicApiDataSetId ? (
<Modal
showClose
title="Cannot delete files"
triggerButton={
<ButtonText className="govuk-!-margin-left-3">
Delete files
</ButtonText>
}
>
<p>
This data file has an API data set linked to it.
Please remove the API data set before deleting.
</p>
<p>
<Link
to={generatePath<ReleaseDataSetRouteParams>(
releaseApiDataSetDetailsRoute.path,
{
publicationId,
releaseId,
dataSetId: dataFile.publicApiDataSetId,
},
)}
>
Go to API data set
</Link>
</p>
</Modal>
) : (
<ButtonText
onClick={() => handleDeleteFile(dataFile)}
variant="warning"
>
Delete files
</ButtonText>
)}
</>
)}
{dataFile.permissions.canCancelImport && (
<DataUploadCancelButton
releaseId={releaseId}
fileId={dataFile.id}
/>
)}
</>
)}
{dataFile.publicApiDataSetId ? (
<Modal
showClose
title="Cannot delete files"
triggerButton={
<ButtonText className="govuk-!-margin-left-3">
Delete files
</ButtonText>
}
>
<p>
This data file has an API data set linked to it.
Please remove the API data set before deleting.
</p>
<p>
<Link
to={generatePath<ReleaseDataSetRouteParams>(
releaseApiDataSetDetailsRoute.path,
{
publicationId,
releaseId,
dataSetId: dataFile.publicApiDataSetId,
},
)}
>
Go to API data set
</Link>
</p>
</Modal>
) : (
<ButtonText
onClick={() => onDeleteFile(dataFile)}
variant="warning"
>
Delete files
</ButtonText>
)}
</>
)}
</ButtonGroup>
</td>
</tr>
))}
</tbody>
</table>
</>
{dataFile.permissions.canCancelImport && (
<DataUploadCancelButton
releaseId={releaseId}
fileId={dataFile.id}
/>
)}
</ButtonGroup>
</td>
</tr>
))}
</tbody>
</table>
);
};

Expand Down
Loading

0 comments on commit c1cb095

Please sign in to comment.