CEC-4523: add bulk archive to /packages (#372)
* CEC-4523: add bulk archive to /packages
This commit is contained in:
Tristan Timblin
@@ -6284,7 +6284,44 @@ exports[`App Route /packages authenticated 1`] = `
|
||||
</div>
|
||||
<div
|
||||
class="MuiGrid-root makeStyles-textRightAlign-0 MuiGrid-item MuiGrid-grid-md-4"
|
||||
/>
|
||||
>
|
||||
<div
|
||||
aria-label="choose action"
|
||||
class="MuiButtonGroup-root MuiButtonGroup-contained css-zqcytf-MuiButtonGroup-root"
|
||||
role="group"
|
||||
>
|
||||
<button
|
||||
class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium Mui-disabled MuiButtonGroup-grouped MuiButtonGroup-groupedHorizontal MuiButtonGroup-groupedContained MuiButtonGroup-groupedContainedHorizontal MuiButtonGroup-groupedContainedPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButtonGroup-grouped MuiButtonGroup-groupedHorizontal MuiButtonGroup-groupedContained MuiButtonGroup-groupedContainedHorizontal MuiButtonGroup-groupedContainedPrimary css-sghohy-MuiButtonBase-root-MuiButton-root"
|
||||
disabled=""
|
||||
tabindex="-1"
|
||||
type="button"
|
||||
>
|
||||
Archive
|
||||
</button>
|
||||
<button
|
||||
aria-haspopup="menu"
|
||||
aria-label="select action"
|
||||
class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButtonGroup-grouped MuiButtonGroup-groupedHorizontal MuiButtonGroup-groupedContained MuiButtonGroup-groupedContainedHorizontal MuiButtonGroup-groupedContainedPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButtonGroup-grouped MuiButtonGroup-groupedHorizontal MuiButtonGroup-groupedContained MuiButtonGroup-groupedContainedHorizontal MuiButtonGroup-groupedContainedPrimary css-11qr2p8-MuiButtonBase-root-MuiButton-root"
|
||||
tabindex="0"
|
||||
type="button"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
|
||||
data-testid="ArrowDropDownIcon"
|
||||
focusable="false"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
d="m7 10 5 5 5-5z"
|
||||
/>
|
||||
</svg>
|
||||
<span
|
||||
class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<table
|
||||
class="MuiTable-root"
|
||||
@@ -6295,6 +6332,40 @@ exports[`App Route /packages authenticated 1`] = `
|
||||
<tr
|
||||
class="MuiTableRow-root MuiTableRow-head"
|
||||
>
|
||||
<th
|
||||
class="MuiTableCell-root MuiTableCell-head MuiTableCell-paddingCheckbox"
|
||||
scope="col"
|
||||
>
|
||||
<span
|
||||
aria-disabled="false"
|
||||
class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiCheckbox-root MuiCheckbox-colorSecondary MuiIconButton-colorSecondary"
|
||||
>
|
||||
<span
|
||||
class="MuiIconButton-label"
|
||||
>
|
||||
<input
|
||||
aria-label="select all desserts"
|
||||
class="PrivateSwitchBase-input-0"
|
||||
data-indeterminate="false"
|
||||
type="checkbox"
|
||||
value=""
|
||||
/>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="MuiSvgIcon-root"
|
||||
focusable="false"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<span
|
||||
class="MuiTouchRipple-root"
|
||||
/>
|
||||
</span>
|
||||
</th>
|
||||
<th
|
||||
aria-sort="ascending"
|
||||
class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
|
||||
@@ -6476,6 +6547,38 @@ exports[`App Route /packages authenticated 1`] = `
|
||||
<tr
|
||||
class="MuiTableRow-root"
|
||||
>
|
||||
<td
|
||||
class="MuiTableCell-root MuiTableCell-body MuiTableCell-paddingCheckbox"
|
||||
>
|
||||
<span
|
||||
aria-disabled="false"
|
||||
class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiCheckbox-root MuiCheckbox-colorSecondary MuiIconButton-colorSecondary"
|
||||
>
|
||||
<span
|
||||
class="MuiIconButton-label"
|
||||
>
|
||||
<input
|
||||
class="PrivateSwitchBase-input-0"
|
||||
data-indeterminate="false"
|
||||
type="checkbox"
|
||||
value=""
|
||||
/>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="MuiSvgIcon-root"
|
||||
focusable="false"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<span
|
||||
class="MuiTouchRipple-root"
|
||||
/>
|
||||
</span>
|
||||
</td>
|
||||
<td
|
||||
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
|
||||
>
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user