CEC-4543 - Add Aftersales filter to Deployments (#378)

* CEC-4543 - Add location to digital twin map * CEC-4565 - Add Aftersales filter to Deployments * Comments --------- Co-authored-by: jwu-fisker <jwu@fiskerinc.com>
2023-06-30 14:40:56 -04:00
parent df760fa73f
commit ab42480e31
3 changed files with 147 additions and 28 deletions
--- a/src/components/App/snapshots/App.test.js.snap
+++ b/src/components/App/snapshots/App.test.js.snap
@@ -6261,9 +6261,9 @@ exports[`App Route /packages authenticated 1`] = `
                      class="MuiButtonBase-root MuiToggleButton-root Mui-selected MuiToggleButton-sizeMedium MuiToggleButton-standard MuiToggleButtonGroup-grouped MuiToggleButtonGroup-groupedHorizontal css-ueukts-MuiButtonBase-root-MuiToggleButton-root"
                      tabindex="0"
                      type="button"
-                      value="true"
+                      value="software"
                    >
-                      Active
+                      Software
                      <span
                        class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
                      />
@@ -6273,13 +6273,25 @@ exports[`App Route /packages authenticated 1`] = `
                      class="MuiButtonBase-root MuiToggleButton-root MuiToggleButton-sizeMedium MuiToggleButton-standard MuiToggleButtonGroup-grouped MuiToggleButtonGroup-groupedHorizontal css-ueukts-MuiButtonBase-root-MuiToggleButton-root"
                      tabindex="0"
                      type="button"
-                      value="false"
+                      value="archived"
                    >
                      Archived
                      <span
                        class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
                      />
                    </button>
+                    <button
+                      aria-pressed="false"
+                      class="MuiButtonBase-root MuiToggleButton-root MuiToggleButton-sizeMedium MuiToggleButton-standard MuiToggleButtonGroup-grouped MuiToggleButtonGroup-groupedHorizontal css-ueukts-MuiButtonBase-root-MuiToggleButton-root"
+                      tabindex="0"
+                      type="button"
+                      value="all"
+                    >
+                      All
+                      <span
+                        class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+                      />
+                    </button>
                  </div>
                </div>
                <div
@@ -6441,6 +6453,29 @@ exports[`App Route /packages authenticated 1`] = `
                        </svg>
                      </span>
                    </th>
+                    <th
+                      class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
+                      scope="col"
+                    >
+                      <span
+                        aria-disabled="false"
+                        class="MuiButtonBase-root MuiTableSortLabel-root"
+                        role="button"
+                        tabindex="0"
+                      >
+                        Type
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc"
+                          focusable="false"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
+                          />
+                        </svg>
+                      </span>
+                    </th>
                    <th
                      class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
                      scope="col"
@@ -6474,7 +6509,7 @@ exports[`App Route /packages authenticated 1`] = `
                        role="button"
                        tabindex="0"
                      >
-                        Type
+                        Update
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc"
@@ -6597,6 +6632,9 @@ exports[`App Route /packages authenticated 1`] = `
                    <td
                      class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
                    />
+                    <td
+                      class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                    />
                    <td
                      class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
                    >
@@ -6662,7 +6700,7 @@ exports[`App Route /packages authenticated 1`] = `
                  >
                    <td
                      class="MuiTableCell-root MuiTableCell-footer MuiTablePagination-root"
-                      colspan="8"
+                      colspan="10"
                    >
                      <div
                        class="MuiToolbar-root MuiToolbar-regular MuiTablePagination-toolbar MuiToolbar-gutters"
--- a/src/components/Manifest/List/index.jsx
+++ b/src/components/Manifest/List/index.jsx
@@ -1,4 +1,5 @@
 import {
+  Checkbox,
  Grid,
  Table,
  TableBody,
@@ -7,7 +8,6 @@ import {
  TablePagination,
  TableRow,
  Tooltip,
-  Checkbox,
 } from "@material-ui/core";
 import DeleteIcon from "@material-ui/icons/Delete";
 import SendIcon from "@material-ui/icons/Send";
@@ -21,16 +21,18 @@ import React, { useEffect, useState } from "react";
 import { Link } from "react-router-dom";

 import EditIcon from "@material-ui/icons/Edit";
+import { useArchiveManifests } from "../../../hooks";
 import { logger } from "../../../services/monitoring";
 import { LocalDateTimeString } from "../../../utils/dates";
-import { TYPE_MANIFEST_SOFTWARE } from "../../../utils/manifest_types";
-import { hasRole, Permissions } from "../../../utils/roles";
+import { TYPE_MANIFEST_AFTERSALES, TYPE_MANIFEST_CONFIG, TYPE_MANIFEST_SOFTWARE } from "../../../utils/manifest_types";
+import { Permissions, hasRole } from "../../../utils/roles";
 import {
  ManifestsProvider,
  useManifestsContext
 } from "../../Contexts/ManifestsContext";
 import { useStatusContext } from "../../Contexts/StatusContext";
 import { useUserContext } from "../../Contexts/UserContext";
+import DropDownButton from "../../Controls/DropDownButton";
 import ECUList from "../../Controls/ECUList";
 import { RoleWrap } from "../../Controls/RoleWrap";
 import SearchField from "../../Controls/SearchField";
@@ -38,8 +40,6 @@ 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 = [
  {
@@ -54,13 +54,17 @@ const tableColumns = [
    id: "version",
    label: "Version",
  },
+  {
+    id: "manifest_type",
+    label: "Type",
+  },
  {
    id: "sums",
    label: "SUMS",
  },
  {
    id: "type",
-    label: "Type",
+    label: "Update",
  },
  {
    id: "created_at",
@@ -76,7 +80,7 @@ const tableColumns = [
  },
 ];

-const formatManifestType = (type) => {
+const formatType = (type) => {
  switch (type) {
    case "forced":
      return "Forced";
@@ -85,6 +89,21 @@ const formatManifestType = (type) => {
  }
 };

+const formatManifestType = (manifestType) => {
+  switch (manifestType) {
+    case 1:
+      return "Software";
+    case 2:
+      return "Config";
+    case 3:
+      return "Magna";
+    case 4:
+      return "Aftersales";
+    default:
+      return manifestType;
+  }
+}
+
 const PAGE_SIZE = "MANIFEST_LIST_PAGE_SIZE";

 const MainForm = () => {
@@ -94,7 +113,7 @@ const MainForm = () => {
  const [orderBy, setOrderBy] = useState("id");
  const [order, setOrder] = useState("asc");
  const [search, setSearch] = useLocalStorage("DEPLOYMENT_SEARCH", "");
-  const [active, setActive] = useLocalStorage("DEPLOYMENT_ACTIVE", "true");
+  const [active, setActive] = useLocalStorage("DEPLOYMENT_ACTIVE", "software");
  const [selected, setSelected] = useState([]);

  const [showDeleteModal, setShowDeleteModal] = useState(false);
@@ -135,17 +154,73 @@ const MainForm = () => {
    (async () => {
      try {
        handleActiveChange(null, active);
-        await getManifests(
-          {
-            limit: pageSize,
-            offset: pageSize * pageIndex,
-            order: `${orderBy} ${order}`,
-            manifest_type: TYPE_MANIFEST_SOFTWARE,
-            search,
-            active,
-          },
-          token
-        );
+        switch (active) {
+          case "all":
+            await getManifests(
+              {
+                limit: pageSize,
+                offset: pageSize * pageIndex,
+                order: `${orderBy} ${order}`,
+                search,
+              },
+              token
+            );
+            break;
+          case "aftersales":
+            await getManifests(
+              {
+                limit: pageSize,
+                offset: pageSize * pageIndex,
+                order: `${orderBy} ${order}`,
+                manifest_type: TYPE_MANIFEST_AFTERSALES,
+                search,
+                active: "true",
+              },
+              token
+            );
+            break;
+          case "config":
+            await getManifests(
+              {
+                limit: pageSize,
+                offset: pageSize * pageIndex,
+                order: `${orderBy} ${order}`,
+                manifest_type: TYPE_MANIFEST_CONFIG,
+                search,
+                active: "true",
+              },
+              token
+            );
+            break;
+          case "software":
+            await getManifests(
+              {
+                limit: pageSize,
+                offset: pageSize * pageIndex,
+                order: `${orderBy} ${order}`,
+                manifest_type: TYPE_MANIFEST_SOFTWARE,
+                search,
+                active: "true",
+              },
+              token
+            );
+            break;
+          case "archived":
+            await getManifests(
+              {
+                limit: pageSize,
+                offset: pageSize * pageIndex,
+                order: `${orderBy} ${order}`,
+                manifest_type: TYPE_MANIFEST_SOFTWARE,
+                search,
+                active: "false",
+              },
+              token
+            );
+            break;
+          default:
+            break;
+        }
      } catch (e) {
        setMessage(e.message);
        logger.warn(e.stack);
@@ -287,8 +362,9 @@ const MainForm = () => {
              aria-label="Active"
              onChange={handleActiveChange}
            >
-              <ToggleButton value={"true"}>Active</ToggleButton>
-              <ToggleButton value={"false"}>Archived</ToggleButton>
+              <ToggleButton value={"software"}>Software</ToggleButton>
+              <ToggleButton value={"archived"}>Archived</ToggleButton>
+              <ToggleButton value={"all"}>All</ToggleButton>
            </ToggleButtonGroup>
          </RoleWrap>
        </Grid>
@@ -344,9 +420,12 @@ const MainForm = () => {
                  )}
                </TableCell>
                <TableCell align="center">{row.version}</TableCell>
+                <TableCell align="center">
+                  {formatManifestType(row.manifest_type)}
+                </TableCell>
                <TableCell align="center">{row.sums}</TableCell>
                <TableCell align="center">
-                  {formatManifestType(row.type)}
+                  {formatType(row.type)}
                </TableCell>
                <TableCell align="center">
                  {LocalDateTimeString(row.created)}
@@ -363,7 +442,7 @@ const MainForm = () => {
          <TableRow>
            <TablePagination
              rowsPerPageOptions={[5, 10, 25, 100]}
-              colSpan={8}
+              colSpan={tableColumns.length + 1}
              count={totalManifests}
              rowsPerPage={pageSize}
              page={pageIndex}