CEC-5752 - Define trim as well as model for Flashpack mappings

src/components/Contexts/VehicleContext.jsx

@@ -311,11 +311,11 @@ export const VehicleProvider = ({ children }) => {
     }
   };
 
-  const getFlashpackECUMappings = async (model, year, flashpack, options, token) => {
+  const getFlashpackECUMappings = async (model, trim, year, flashpack, options, token) => {
     try {
       setBusy(true);
 
-      const result = await api.getFlashpackECUMappings(model, year, flashpack, options, token);
+      const result = await api.getFlashpackECUMappings(model, trim, year, flashpack, options, token);
       if (result.error) {
         throw new Error(`Get flashpack ecu mappings error. ${result.message}`);
       }
@@ -331,12 +331,13 @@ export const VehicleProvider = ({ children }) => {
     }
   };
 
-  const addFlashpackVersion = async (model, year, flashpack, carFlashpackVersions, token) => {
+  const addFlashpackVersion = async (model, trim, year, flashpack, carFlashpackVersions, token) => {
     try {
       setBusy(true);
 
       const data = {
         "car_model": model,
+        "car_trim": trim,
         "car_year": year,
         "flashpack": flashpack,
         "ecu_versions": carFlashpackVersions,
@@ -353,12 +354,13 @@ export const VehicleProvider = ({ children }) => {
     }
   }
 
-  const deleteFlashpackVersion = async (model, year, flashpack, token) => {
+  const deleteFlashpackVersion = async (model, trim, year, flashpack, token) => {
     try {
       setBusy(true);
 
       const data = {
         "car_model": model,
+        "car_trim": trim,
         "car_year": year,
         "flashpack": flashpack,
       }

src/components/Flashpack/Add/__snapshots__/index.test.jsx.snap

@@ -69,6 +69,52 @@ exports[`FlashpackAdd Render 1`] = `
                     </fieldset>
                   </div>
                 </div>
+                <div
+                  class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal MuiFormControl-fullWidth"
+                >
+                  <label
+                    class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined Mui-required Mui-required"
+                    data-shrink="false"
+                    for="carTrim"
+                    id="carTrim-label"
+                  >
+                    Trim
+                    <span
+                      aria-hidden="true"
+                      class="MuiFormLabel-asterisk MuiInputLabel-asterisk"
+                    >
+                       
+                      *
+                    </span>
+                  </label>
+                  <div
+                    class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl"
+                  >
+                    <input
+                      aria-invalid="false"
+                      class="MuiInputBase-input MuiOutlinedInput-input"
+                      id="carTrim"
+                      maxlength="255"
+                      name="carTrim"
+                      required=""
+                      type="text"
+                      value=""
+                    />
+                    <fieldset
+                      aria-hidden="true"
+                      class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
+                    >
+                      <legend
+                        class="PrivateNotchedOutline-legendLabelled-0"
+                      >
+                        <span>
+                          Trim
+                           *
+                        </span>
+                      </legend>
+                    </fieldset>
+                  </div>
+                </div>
                 <div
                   class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal MuiFormControl-fullWidth"
                 >

src/components/Flashpack/Add/index.jsx

@@ -23,6 +23,7 @@ const MainForm = () => {
   const [redirect, setRedirect] = useState(null);
   const { setMessage, setTitle, setSitePath } = useStatusContext();
   const [carModel, setCarModel] = useState("");
+  const [carTrim, setCarTrim] = useState("");
   const [carYear, setCarYear] = useState();
   const [flashpack, setFlashpack] = useState();
   const [mappingInputs, setMappingInputs] = useState([{ ecuName: "", ecuVersion: "" }]);
@@ -53,6 +54,10 @@ const MainForm = () => {
     setCarModel(event.target.value);
   }
 
+  const onCarTrimChange = (event) => {
+    setCarTrim(event.target.value);
+  }
+
   const onCarYearChange = (event) => {
     setCarYear(event.target.value);
   }
@@ -74,11 +79,11 @@ const MainForm = () => {
           })
       }
 
-      const result = await addFlashpackVersion(carModel, parseInt(carYear), flashpack, carFlashpackVersions, token);
+      const result = await addFlashpackVersion(carModel, carTrim, parseInt(carYear), flashpack, carFlashpackVersions, token);
       if (!result || result.error) return;
 
-      setMessage(`Added ${carYear} ${carModel} ${flashpack}`);
+      setMessage(`Added ${carYear} ${carModel} ${carTrim} ${flashpack}`);
-      setRedirect(`/tools/flashpack/${carModel}/${carYear}/${flashpack}`);
+      setRedirect(`/tools/flashpack/${carModel}/${carTrim}/${carYear}/${flashpack}`);
     } catch (e) {
       setMessage(e.message);
       logger.warn(e.stack);
@@ -128,6 +133,21 @@ const MainForm = () => {
             onChange={onCarModelChange}
             type="text"
           />
+          <TextField
+            id="carTrim"
+            name="carTrim"
+            label="Trim"
+            variant="outlined"
+            margin="normal"
+            inputProps={{
+              maxLength: "255",
+            }}
+            required
+            fullWidth
+            value={carTrim}
+            onChange={onCarTrimChange}
+            type="text"
+          />
           <TextField
             id="carYear"
             name="carYear"

src/components/Flashpack/Details/index.jsx

@@ -30,7 +30,7 @@ const tableColumns = [
 const PAGE_SIZE = "FLASHPACK_MAPPINGS_TABLE_PAGE_SIZE";
 
 const MainForm = () => {
-  const { model, year, flashpack } = useParams();
+  const { model, trim, year, flashpack } = useParams();
   const classes = useStyles();
   const { setMessage, setTitle, setSitePath } = useStatusContext();
   const [pageSize, setPageSize] = useLocalStorage(PAGE_SIZE, 10);
@@ -49,7 +49,7 @@ const MainForm = () => {
   } = useUserContext();
 
   useEffect(() => {
-    setTitle(`${year} ${model} Flashpack Version ${flashpack}`);
+    setTitle(`${year} ${model} ${trim} Flashpack Version ${flashpack}`);
     setSitePath([
       {
         label: "Tools",
@@ -76,6 +76,7 @@ const MainForm = () => {
       if (!token) return;
       await getFlashpackECUMappings(
         model,
+        trim,
         year,
         flashpack,
         {

src/components/Flashpack/__snapshots__/index.test.jsx.snap

@@ -99,6 +99,29 @@ exports[`Flashpack Render 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"
+                    >
+                      Trim
+                      <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"

src/components/Flashpack/index.jsx

@@ -32,6 +32,10 @@ const tableColumns = [
     id: "car_model",
     label: "Model",
   },
+  {
+    id: "car_trim",
+    label: "Trim",
+  },
   {
     id: "car_year",
     label: "Year",
@@ -117,10 +121,10 @@ const MainForm = () => {
   const sendDelete = async () => {
     if (rowToDelete) {
       try {
-        const result = await deleteFlashpackVersion(rowToDelete.car_model, rowToDelete.car_year, rowToDelete.flashpack, token);
+        const result = await deleteFlashpackVersion(rowToDelete.car_model, rowToDelete.car_trim, rowToDelete.car_year, rowToDelete.flashpack, token);
         if (!result || result.error) return;
 
-        setMessage(`Deleted ${rowToDelete.car_year} ${rowToDelete.car_model} ${rowToDelete.flashpack}`);
+        setMessage(`Deleted ${rowToDelete.car_year} ${rowToDelete.car_model} ${rowToDelete.car_trim} ${rowToDelete.flashpack}`);
         loadFlashpacks();
       } catch (e) {
         setMessage(e.message);
@@ -150,13 +154,16 @@ const MainForm = () => {
           {flashpacks && flashpacks.map((row, index) => (
             <TableRow key={row.flashpack + row.car_model}>
               <TableCell align="center">
-                <Link to={`/tools/flashpack/${row.car_model}/${row.car_year}/${row.flashpack}`}>
+                <Link to={`/tools/flashpack/${row.car_model}/${row.car_trim}/${row.car_year}/${row.flashpack}`}>
                   {row.flashpack}
                 </Link>
               </TableCell>
               <TableCell align="center">
                 {row.car_model}
               </TableCell>
+              <TableCell align="center">
+                {row.car_trim}
+              </TableCell>
               <TableCell align="center">
                 {row.car_year}
               </TableCell>
@@ -168,11 +175,11 @@ const MainForm = () => {
                 >
                   <IconButton
                     onClick={() => onDeleteClick(row)}
-                    aria-label={`Send delete for ${row.car_year} ${row.car_model} ${row.flashpack}`}
+                    aria-label={`Send delete for ${row.car_year} ${row.car_model} ${row.car_trim} ${row.flashpack}`}
                     size="small"
                     color="primary"
                   >
-                    <DeleteIcon aria-label={`Delete ${row.car_year} ${row.car_model} ${row.flashpack}`} />
+                    <DeleteIcon aria-label={`Delete ${row.car_year} ${row.car_model} ${row.car_trim} ${row.flashpack}`} />
                   </IconButton>
                 </RoleWrap>
               </TableCell>
@@ -186,7 +193,7 @@ const MainForm = () => {
             ) : (
               <TablePagination
                 rowsPerPageOptions={[5, 10, 25, 100]}
-                colSpan={4}
+                colSpan={5}
                 count={totalFlashpacks}
                 rowsPerPage={pageSize}
                 page={pageIndex}
@@ -201,7 +208,7 @@ const MainForm = () => {
         </TableFooter>
       </Table>
       <DeleteConfirmation
-        message={rowToDelete && rowToDelete.car_year + " " + rowToDelete.car_model + " " + rowToDelete.flashpack}
+        message={rowToDelete && rowToDelete.car_year + " " + rowToDelete.car_model + " " + rowToDelete.car_trim + " " + rowToDelete.flashpack}
         open={showDeleteModal}
         close={() => setShowDeleteModal(false)}
         deleteFunction={sendDelete}

src/components/Routes/SiteRoutes.jsx

@@ -289,7 +289,7 @@ const SiteRoutes = () => {
           providers={providers}
         />
         <AuthRoute
-          path="/tools/flashpack/:model/:year/:flashpack"
+          path="/tools/flashpack/:model/:trim/:year/:flashpack"
           render={() => <FlashpackDetails />}
           type={TYPES.PROTECTED}
           token={token}

src/services/vehiclesAPI.js

@@ -272,8 +272,8 @@ const vehiclesAPI = {
       .catch(errorHandler)
   },
 
-  getFlashpackECUMappings: async (model, year, flashpack, options, token) => {
+  getFlashpackECUMappings: async (model, trim, year, flashpack, options, token) => {
-    return fetch(addQueryParams(`${API_ENDPOINT}/flashpack_version_ecu_mappings/${model}/${year}/${flashpack}`, options), {
+    return fetch(addQueryParams(`${API_ENDPOINT}/flashpack_version_ecu_mappings/${model}/${trim}/${year}/${flashpack}`, options), {
       method: "GET",
       headers: Object.assign(
         { "Content-Type": "application/json" },