Merge pull request #520 from Fisker-Inc/CEC-5982

CEC-5982 - Allow selecting all VINs in a fleet for bulk Flashpack upd…
2024-04-19 15:18:03 -04:00
parent fcf9971fbe eb3047372f
commit a59a3df85e
6 changed files with 137 additions and 16 deletions
--- a/src/components/BulkActions/actions/UpdateFlashpackNumbers.jsx
+++ b/src/components/BulkActions/actions/UpdateFlashpackNumbers.jsx
@@ -6,6 +6,8 @@ import vehiclesAPI from "../../../services/vehiclesAPI";
 export default forwardRef(({
  ids,
  idCSV,
+  fleet,
+  selectAll,
 }, ref) => {
  const { setMessage } = useStatusContext();
  const { token: { idToken: { jwtToken: token } } } = useUserContext();
@@ -13,10 +15,12 @@ export default forwardRef(({
  useImperativeHandle(ref, () => ({
    async submit() {
      return vehiclesAPI
-        .flashpackVersionBulkUpdate(ids, token)
+        .flashpackVersionBulkUpdate(selectAll, fleet, ids, token)
        .then((data) => {
          if (data.error) {
            setMessage(`${data.error}: ${data.message}`);
+          } else if (selectAll) {
+            setMessage(`Updating flashpack number all VINs in ${fleet}`);
          } else if (ids.length === 1) {
            setMessage(`Updating flashpack number for ${ids[0]}`);
          } else {
@@ -26,11 +30,21 @@ export default forwardRef(({
    },
  }));

-  return (
-    <div>
-      <p>
-        You are updating flashpack numbers for the following VINs: {idCSV}.
-      </p>
-    </div>
-  );
+  if (selectAll) {
+    return (
+      <div>
+        <p>
+          You are updating flashpack numbers for all VINs in the following fleet: {fleet}.
+        </p>
+      </div>
+    )
+  } else {
+    return (
+      < div >
+        <p>
+          You are updating flashpack numbers for the following VINs: {idCSV}.
+        </p>
+      </div>
+    )
+  }
 });
--- a/src/components/BulkActions/index.jsx
+++ b/src/components/BulkActions/index.jsx
@@ -21,6 +21,7 @@ export default function BulkActions({
  ids = [],
  actions = [],
  fleet = undefined,
+  selectAll = false,
  callback = (active, ids, context) => { }, // context is raised from the action itself
 }) {
  const [open, setOpen] = useState(false);
@@ -92,6 +93,7 @@ export default function BulkActions({
    ids,
    idCSV: (ids && ids.length > 0) ? truncateCSV(ids, 10) : "N/A",
    fleet,
+    selectAll,
    ref: activeRef
  };

@@ -112,7 +114,7 @@ export default function BulkActions({
    setEmbedded(action?.embedded);
  }, [active, filteredActions]);

-  if (!ids || ids.length === 0) return <></>;
+  if (!selectAll && (!ids || ids.length === 0)) return <></>;

  return (
    <>
--- a/src/components/Fleets/Status/Vehicles/Table/snapshots/index.test.jsx.snap
+++ b/src/components/Fleets/Status/Vehicles/Table/snapshots/index.test.jsx.snap
@@ -38,12 +38,53 @@ exports[`FleetVehiclesTable Render 1`] = `
                  </svg>
                </a>
              </div>
+              <div
+                class="MuiGrid-root makeStyles-textJustifyAlign-0 MuiGrid-item MuiGrid-grid-md-2"
+              >
+                <label
+                  class="MuiFormControlLabel-root"
+                >
+                  <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>
+                  <span
+                    class="MuiTypography-root MuiFormControlLabel-label MuiTypography-body1"
+                  >
+                    Select All Vehicles
+                  </span>
+                </label>
+              </div>
              <div
                class="MuiGrid-root MuiGrid-item MuiGrid-grid-md-4"
              />
              <div
                align="right"
-                class="MuiGrid-root makeStyles-textCenterAlign-0 MuiGrid-item MuiGrid-grid-md-7"
+                class="MuiGrid-root makeStyles-textCenterAlign-0 MuiGrid-item MuiGrid-grid-md-5"
              >
                <div
                  class="MuiFormControl-root makeStyles-margin-0 makeStyles-fullWidth-0"
--- a/src/components/Fleets/Status/Vehicles/Table/index.jsx
+++ b/src/components/Fleets/Status/Vehicles/Table/index.jsx
@@ -1,5 +1,6 @@
 import {
  Checkbox,
+  FormControlLabel,
  Grid,
  LinearProgress,
  Table,
@@ -70,6 +71,7 @@ const MainForm = ({ name }) => {
  const [order, setOrder] = useState("desc");
  const [search, setSearch] = useState("");
  const [selected, setSelected] = useState([]);
+  const [selectAllSelected, setSelectAllSelected] = useState(false);
  const componentMounted = useRef(true);
  const classes = useStyles();
  const { setMessage } = useStatusContext();
@@ -174,15 +176,28 @@ const MainForm = ({ name }) => {
            <AddCircleIcon fontSize="large" />
          </Link>
        </Grid>
+        <Grid item md={2} className={classes.textJustifyAlign}>
+          <FormControlLabel control={
+            <Checkbox
+              checked={selectAllSelected}
+              onChange={() => setSelectAllSelected(selectAllSelected => !selectAllSelected)}
+            />
+          } label="Select All Vehicles" />
+        </Grid>
        <Grid item md={4}>
          <BulkActions
-            actions={["updateFleetVehicles", "addTags", "sms", "updateConfig", "remoteCommand", "diagnostic", "updateFlashpackNumbers"]}
+            actions={
+              selectAllSelected ?
+                ["updateFlashpackNumbers"] :
+                ["updateFleetVehicles", "addTags", "sms", "updateConfig", "remoteCommand", "diagnostic", "updateFlashpackNumbers"]
+            }
            ids={selected}
            fleet={name}
+            selectAll={selectAllSelected}
            callback={bulkActionCallback}
          />
        </Grid>
-        <Grid item md={7} align="right" className={classes.textCenterAlign}>
+        <Grid item md={5} align="right" className={classes.textCenterAlign}>
          <SearchField classes={classes} onSearch={handleSearch} />
        </Grid>
      </Grid>
--- a/src/components/Fleets/Status/snapshots/VehiclesTab.test.jsx.snap
+++ b/src/components/Fleets/Status/snapshots/VehiclesTab.test.jsx.snap
@@ -37,12 +37,53 @@ exports[`VehiclesTab Render 1`] = `
              </svg>
            </a>
          </div>
+          <div
+            class="MuiGrid-root makeStyles-textJustifyAlign-0 MuiGrid-item MuiGrid-grid-md-2"
+          >
+            <label
+              class="MuiFormControlLabel-root"
+            >
+              <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>
+              <span
+                class="MuiTypography-root MuiFormControlLabel-label MuiTypography-body1"
+              >
+                Select All Vehicles
+              </span>
+            </label>
+          </div>
          <div
            class="MuiGrid-root MuiGrid-item MuiGrid-grid-md-4"
          />
          <div
            align="right"
-            class="MuiGrid-root makeStyles-textCenterAlign-0 MuiGrid-item MuiGrid-grid-md-7"
+            class="MuiGrid-root makeStyles-textCenterAlign-0 MuiGrid-item MuiGrid-grid-md-5"
          >
            <div
              class="MuiFormControl-root makeStyles-margin-0 makeStyles-fullWidth-0"
--- a/src/services/vehiclesAPI.js
+++ b/src/services/vehiclesAPI.js
@@ -341,8 +341,16 @@ const vehiclesAPI = {
      .catch(errorHandler)
  },

-  flashpackVersionBulkUpdate: async (vins, token) => {
-    return fetch(`${API_ENDPOINT}/flashpack_version_bulk_update`, {
+  flashpackVersionBulkUpdate: async (selectAll, fleet, vins, token) => {
+    var url = `${API_ENDPOINT}/flashpack_version_bulk_update`
+    const queryParams = {
+      fleet,
+    };
+    if (selectAll) {
+      url = addQueryParams(url, queryParams);
+    }
+
+    return fetch(url, {
      method: "PUT",
      headers: Object.assign(
        { "Content-Type": "application/json" },