CEC-4523: add bulk archive to /packages (#372)
* CEC-4523: add bulk archive to /packages
This commit is contained in:
@@ -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