CEC-4523: add bulk archive to /packages (#372)

* CEC-4523: add bulk archive to /packages
This commit is contained in:
Tristan Timblin
2023-06-26 12:35:17 -04:00
committed by GitHub
parent 787bb12260
commit 60c1f414a6
6 changed files with 328 additions and 67 deletions

View File

@@ -6,7 +6,8 @@ import {
TableFooter,
TablePagination,
TableRow,
Tooltip
Tooltip,
Checkbox,
} from "@material-ui/core";
import DeleteIcon from "@material-ui/icons/Delete";
import SendIcon from "@material-ui/icons/Send";
@@ -37,6 +38,8 @@ import DeleteConfirmation from "../../DeleteConfirmation";
import TableHeaderSortable from "../../Table/HeaderSortable";
import { useLocalStorage } from "../../useLocalStorage";
import useStyles from "../../useStyles";
import { useArchiveManifests } from "../../../hooks";
import DropDownButton from "../../Controls/DropDownButton";
const tableColumns = [
{
@@ -92,12 +95,12 @@ const MainForm = () => {
const [order, setOrder] = useState("asc");
const [search, setSearch] = useLocalStorage("DEPLOYMENT_SEARCH", "");
const [active, setActive] = useLocalStorage("DEPLOYMENT_ACTIVE", "true");
const [selected, setSelected] = useState([]);
const [showDeleteModal, setShowDeleteModal] = useState(false);
const [deleteId, setDeleteId] = useState("");
const [deleteRowName, setDeleteRowName] = useState("");
const { getManifests, deleteManifest, manifests, totalManifests } =
const { getManifests, manifests, totalManifests } =
useManifestsContext();
const { setMessage, setTitle, setSitePath } = useStatusContext();
const {
@@ -107,6 +110,7 @@ const MainForm = () => {
groups,
providers,
} = useUserContext();
const { archive } = useArchiveManifests(token);
const sortHandler = (event, property) => {
if (property === orderBy) {
@@ -170,21 +174,45 @@ const MainForm = () => {
}
}
const setDeletePopup = (id, row) => {
setDeleteId(id);
setDeleteRowName(`${row.name} ${row.version}`);
const handleSelectAll = () => {
setSelected((selected) => selected.length ? [] : manifests);
};
const handleSelect = (event, manifest) => {
setSelected((selected) => {
if (event.target.checked && selected.find(({ id }) => id === manifest.id)) {
return selected;
} else if (event.target.checked) {
return [...selected, manifest];
}
return selected.filter(({ id }) => id !== manifest.id);
});
};
const setDeletePopup = (row) => {
handleSelect({ target: { checked: true } }, row);
setShowDeleteModal(true);
};
const onDelete = async (manifest_id) => {
const onDelete = async () => {
try {
await deleteManifest(parseInt(manifest_id), token);
await archive(selected.map((manifest) => manifest.id))
.then(({ summary }) => {
setMessage(summary);
});
} catch (e) {
setMessage(e.message);
logger.warn(e.stack);
}
};
useEffect(() => {
setDeleteRowName(() => selected
.map((manifest) => `${manifest.name} ${manifest.version}`)
.join(", ")
);
}, [selected]);
const Actions = (row) => {
let actions = [];
if (hasRole(groups, Permissions.FiskerMagnaRead, providers)) {
@@ -232,7 +260,7 @@ const MainForm = () => {
return (
<span key={`delete-${action.id}-of-key`}>
<Tooltip key={`delete-${action.id}`} title={action.tip}>
<Link to="#" onClick={() => setDeletePopup(action.id, row)}>
<Link to="#" onClick={() => setDeletePopup(row)}>
{action.icon}
</Link>
</Tooltip>
@@ -264,7 +292,17 @@ const MainForm = () => {
</ToggleButtonGroup>
</RoleWrap>
</Grid>
<Grid item md={4} className={classes.textRightAlign}></Grid>
<Grid item md={4} className={classes.textRightAlign}>
<DropDownButton
actions={[
{
name: "Archive",
trigger: () => setShowDeleteModal(true),
disabled: !selected.length,
}
]}
/>
</Grid>
</Grid>
<Table>
<TableHeaderSortable
@@ -273,38 +311,53 @@ const MainForm = () => {
order={order}
columnData={tableColumns}
onSortRequest={sortHandler}
multiSelect
onSelectAll={handleSelectAll}
selectCount={selected ? selected.length : 0}
rowCount={manifests ? manifests.length : 0}
/>
<TableBody>
{manifests.map((row) => (
<TableRow key={row.id}>
<TableCell align="center">{row.id}</TableCell>
<TableCell align="center">
{row.name}
{row.ecu_list && (
<>
<br />
<ECUList
list={row.ecu_list}
search={search}
searchedOnly={true}
/>
</>
)}
</TableCell>
<TableCell align="center">{row.version}</TableCell>
<TableCell align="center">{row.sums}</TableCell>
<TableCell align="center">
{formatManifestType(row.type)}
</TableCell>
<TableCell align="center">
{LocalDateTimeString(row.created)}
</TableCell>
<TableCell align="center">
{LocalDateTimeString(row.updated)}
</TableCell>
<TableCell align="center">{Actions(row)}</TableCell>
</TableRow>
))}
{manifests.map((row) => {
const isSelected = selected
? !!selected.find(({ id }) => id === row.id)
: false;
return (
<TableRow key={row.id}>
<TableCell padding="checkbox">
<Checkbox
checked={isSelected}
onChange={(event) => handleSelect(event, row)}
/>
</TableCell>
<TableCell align="center">{row.id}</TableCell>
<TableCell align="center">
{row.name}
{row.ecu_list && (
<>
<br />
<ECUList
list={row.ecu_list}
search={search}
searchedOnly={true}
/>
</>
)}
</TableCell>
<TableCell align="center">{row.version}</TableCell>
<TableCell align="center">{row.sums}</TableCell>
<TableCell align="center">
{formatManifestType(row.type)}
</TableCell>
<TableCell align="center">
{LocalDateTimeString(row.created)}
</TableCell>
<TableCell align="center">
{LocalDateTimeString(row.updated)}
</TableCell>
<TableCell align="center">{Actions(row)}</TableCell>
</TableRow>
);
})}
</TableBody>
<TableFooter>
<TableRow>
@@ -328,7 +381,7 @@ const MainForm = () => {
message={deleteRowName}
open={showDeleteModal}
close={() => setShowDeleteModal(false)}
deleteFunction={() => onDelete(deleteId)}
deleteFunction={() => onDelete()}
/>
</div>
);