delete working

src/components/Contexts/VehicleContext.jsx

@@ -304,11 +304,11 @@ export const VehicleProvider = ({ children }) => {
       if (options && options.offset === 0 && result.total) {
         setTotalFlashpacks(result.total);
       }
+
+      return result;
     } finally {
       setBusy(false);
     }
-
-    return result;
   };
 
   const getFlashpackECUMappings = async (model, year, flashpack, options, token) => {
@@ -324,11 +324,33 @@ export const VehicleProvider = ({ children }) => {
       if (options && options.offset === 0 && result.total) {
         setTotalFlashpackECUMappings(result.total);
       }
+
+      return result;
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const deleteFlashpackVersion = async (model, year, flashpack, token) => {
+    let result;
+    try {
+      setBusy(true);
+
+      const data = {
+        "car_model": model,
+        "car_year": year,
+        "flashpack": flashpack,
+      }
+
+      result = await api.deleteFlashpackVersion(data, token);
+      if (result.error)
+        throw new Error(`Delete flashpack ecu mappings error. ${result.message}`);
+
+      return result;
     } finally {
       setBusy(false);
     }
 
-    return result;
   };
 
   return (
@@ -366,6 +388,7 @@ export const VehicleProvider = ({ children }) => {
         totalFlashpackECUMappings,
         flashpackECUMappings,
         getFlashpackECUMappings,
+        deleteFlashpackVersion,
       }}
     >
       {children}

src/components/Flashpack/index.jsx

@@ -1,4 +1,6 @@
 import {
+  Grid,
+  IconButton,
   Table,
   TableBody,
   TableCell,
@@ -6,6 +8,9 @@ import {
   TablePagination,
   TableRow,
 } from "@material-ui/core";
+import AddCircleIcon from "@material-ui/icons/AddCircle";
+import DeleteIcon from "@material-ui/icons/Delete";
+import clsx from "clsx";
 import { Link } from "react-router-dom";
 import { logger } from "../../services/monitoring";
 import React, { useEffect, useState } from "react";
@@ -14,6 +19,8 @@ import { useStatusContext } from "../Contexts/StatusContext";
 import { useUserContext } from "../Contexts/UserContext";
 import TableHeaderSortable from "../Table/HeaderSortable";
 import { useLocalStorage } from "../useLocalStorage";
+import DeleteConfirmation from "../DeleteConfirmation";
+import { RoleWrap } from "../Controls/RoleWrap";
 import useStyles from "../useStyles";
 
 const tableColumns = [
@@ -38,17 +45,20 @@ const MainForm = () => {
   const { setMessage, setTitle, setSitePath } = useStatusContext();
   const [pageSize, setPageSize] = useLocalStorage(PAGE_SIZE, 10);
   const [pageIndex, setPageIndex] = useState(0);
-  const [orderBy, setOrderBy] = useState("flashpack");
-  const [order, setOrder] = useState("desc");
+  const [showDeleteModal, setShowDeleteModal] = useState(false);
+  const [rowToDelete, setRowToDelete] = useState({});
   const {
     getAllFlashpacks,
     flashpacks,
     totalFlashpacks,
+    deleteFlashpackVersion,
   } = useVehicleContext();
   const {
     token: {
       idToken: { jwtToken: token },
     },
+    groups,
+    providers,
   } = useUserContext();
 
   useEffect(() => {
@@ -65,7 +75,7 @@ const MainForm = () => {
   useEffect(() => {
     loadFlashpacks();
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [token, token, pageIndex, pageSize, orderBy, order]);
+  }, [token, token, pageIndex, pageSize]);
 
   const loadFlashpacks = async () => {
     try {
@@ -74,7 +84,6 @@ const MainForm = () => {
         {
           limit: pageSize,
           offset: pageSize * pageIndex,
-          order: `${orderBy} ${order}`,
         },
         token
       );
@@ -93,8 +102,35 @@ const MainForm = () => {
     setPageIndex(0);
   };
 
+  const onDeleteClick = (row) => {
+    setRowToDelete(row);
+    setShowDeleteModal(true);
+  }
+
+  const sendDelete = async () => {
+    if (rowToDelete) {
+      try {
+        const result = await deleteFlashpackVersion(rowToDelete.car_model, rowToDelete.car_year, rowToDelete.flashpack, token);
+        if (!result || result.error) return;
+
+        setMessage(`Deleted ${rowToDelete.car_year} ${rowToDelete.car_model} ${rowToDelete.flashpack}`);
+        loadFlashpacks();
+      } catch (e) {
+        setMessage(e.message);
+        logger.warn(e.stack);
+      }
+    }
+  };
+
   return (
     <div>
+      <Grid container className={classes.root} spacing={2}>
+        <Grid item md={4} className={clsx(classes.textJustifyAlign, classes.actionsBar)}>
+          <Link to={`/tools/flashpack/add`} className={classes.labelInline}>
+            <AddCircleIcon fontSize="large" />
+          </Link>
+        </Grid>
+      </Grid>
       <Table>
         <TableHeaderSortable
           classes={classes}
@@ -114,6 +150,22 @@ const MainForm = () => {
               <TableCell align="center">
                 {row.car_year}
               </TableCell>
+              <TableCell>
+                <RoleWrap
+                  groups={groups}
+                  providers={providers}
+                  rolesPerProvider={Permissions.FiskerDelete}
+                >
+                  <IconButton
+                    onClick={() => onDeleteClick(row)}
+                    aria-label={`Send delete for ${row.car_year} ${row.car_model} ${row.flashpack}`}
+                    size="small"
+                    color="primary"
+                  >
+                    <DeleteIcon aria-label={`Delete ${row.car_year} ${row.car_model} ${row.flashpack}`} />
+                  </IconButton>
+                </RoleWrap>
+              </TableCell>
             </TableRow>
           ))}
         </TableBody>
@@ -138,6 +190,12 @@ const MainForm = () => {
           </TableRow>
         </TableFooter>
       </Table>
+      <DeleteConfirmation
+        message={rowToDelete && rowToDelete.car_year + " " + rowToDelete.car_model + " " + rowToDelete.flashpack}
+        open={showDeleteModal}
+        close={() => setShowDeleteModal(false)}
+        deleteFunction={sendDelete}
+      />
     </div>
   );
 };

src/components/Routes/SiteRoutes.jsx

@@ -42,6 +42,7 @@ const SuppliersList = React.lazy(() => import("../Suppliers/List"));
 const SupplierDetails = React.lazy(() => import("../Suppliers/Details"));
 const Flashpacks = React.lazy(() => import("../Flashpack"));
 const FlashpackDetails = React.lazy(() => import("../Flashpack/Details"));
+const FlashpackAdd = React.lazy(() => import("../Flashpack/Add"))
 const Datascope = React.lazy(() => import("../Dashboard"));
 const SumsRxSwin = React.lazy(() => import("../SUMS"));
 const SumsRxSwinAdd = React.lazy(() => import("../SUMS/Add"));
@@ -300,6 +301,15 @@ const SiteRoutes = () => {
           rolesPerGroup={Permissions.FiskerRead}
           providers={providers}
         />
+        <AuthRoute
+          path="/tools/flashpack/add"
+          render={() => <FlashpackAdd />}
+          type={TYPES.PROTECTED}
+          token={token}
+          groups={groups}
+          rolesPerGroup={Permissions.FiskerCreate}
+          providers={providers}
+        />
         <AuthRoute
           path="/suppliers"
           render={() => <SuppliersList />}