Show manufacturer names with motorcycle model names to enhance user e…

…xperience Enhance readability in: - tables - CRUD modals
ibardos · May 21, 2024 · 8671acb · 8671acb
1 parent 4f3bd33
commit 8671acb
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 10 deletions.
diff --git a/src/main/ui/src/components/motorcycleStock/MotorcycleStockAddModal.jsx b/src/main/ui/src/components/motorcycleStock/MotorcycleStockAddModal.jsx
@@ -6,6 +6,7 @@ import Button from "react-bootstrap/Button";
 import CrudModal from "../shared/CrudModal";
 
 import {fetchData} from "../../util/fetchData";
+import {identifyMotorcycleModelObject} from "../../util/identifyMotorcycleModelObject";
 import {getJwtToken} from "../../security/authService";
 
 // Imports related to form validation
@@ -35,8 +36,10 @@ const AddForm = (props) => {
     async function handleSubmit(values) {
         const url = "/service/motorcycle/stock/add";
 
+        const motorcycleModel = identifyMotorcycleModelObject(motorcycleModels, values.motorcycleModel);
+
         const requestBody = {
-            "motorcycleModel": motorcycleModels.find(motorcycleModel => motorcycleModel.modelName === values.motorcycleModel),
+            "motorcycleModel": motorcycleModel,
             "mileage": values.mileage,
             "purchasingPrice": values.purchasingPrice,
             "profitMargin": values.profitMargin,
@@ -107,10 +110,15 @@ const AddForm = (props) => {
                     <Field as="select"
                            name="motorcycleModel"
                     >
-                        <option value={initialMotorcycleModel}>{initialMotorcycleModel}</option>
-                        {motorcycleModels.map(m => (
-                            <option key={m.modelName} value={m.modelName}>{m.modelName}</option>
-                        ))}
+                        <option value={values.motorcycleModel}>{values.motorcycleModel}</option>
+                        {motorcycleModels.map(m => {
+                            if (m.manufacturer.name + " - " + m.modelName !== values.motorcycleModel) {
+                                return <option key={m.manufacturer.name + " - " + m.modelName}
+                                               value={m.manufacturer.name + " - " + m.modelName}>{m.manufacturer.name + " - " + m.modelName}</option>
+                            }
+
+                            return "Click to select Motorcycle model";
+                        })}
                     </Field>
                 </Form.Group>
                 <p className="formErrorText">{incompleteMotorcycleModelAlert ? "Choose a Motorcycle model!" : null}</p>

diff --git a/src/main/ui/src/components/motorcycleStock/MotorcycleStockDeleteModal.jsx b/src/main/ui/src/components/motorcycleStock/MotorcycleStockDeleteModal.jsx
@@ -54,7 +54,7 @@ const DeleteItemInformation = (props) => {
                         return (
                             <div key={key}>
                                 <span key={key}>{camelCaseToSentenceCase(key)}</span>
-                                <h4 key={value.modelName}>{value.modelName}</h4>
+                                <h4 key={value.manufacturer.name + " - " + value.modelName}>{value.manufacturer.name + " - " + value.modelName}</h4>
                             </div>
                         )
                     } else {

diff --git a/src/main/ui/src/components/motorcycleStock/MotorcycleStockUpdateModal.jsx b/src/main/ui/src/components/motorcycleStock/MotorcycleStockUpdateModal.jsx
@@ -6,6 +6,7 @@ import Button from "react-bootstrap/Button";
 import CrudModal from "../shared/CrudModal";
 
 import {fetchData} from "../../util/fetchData";
+import {identifyMotorcycleModelObject} from "../../util/identifyMotorcycleModelObject";
 import {getJwtToken} from "../../security/authService";
 
 // Imports related to form validation
@@ -28,6 +29,7 @@ const UpdateForm = (props) => {
 
     const [currentRecord, setCurrentRecord] = useState({});
     const [currentMotorcycleModel, setCurrentMotorcycleModel] = useState({});
+    const [currentManufacturer, setCurrentManufacturer] = useState({});
 
 
     useEffect(() => {
@@ -38,15 +40,18 @@ const UpdateForm = (props) => {
 
         setCurrentRecord(currentRecord);
         setCurrentMotorcycleModel(currentRecord.motorcycleModel);
+        setCurrentManufacturer(currentRecord.motorcycleModel.manufacturer);
     }, [props.motorcycleStocks, props.recordId])
 
 
     async function handleSubmit(values) {
         const url = "/service/motorcycle/stock/update";
 
+        const motorcycleModel = identifyMotorcycleModelObject(motorcycleModels, values.motorcycleModel);
+
         const requestBody = {
             "id": currentRecord.id,
-            "motorcycleModel": values.motorcycleModel ? motorcycleModels.find(motorcycleModel => motorcycleModel.modelName === values.motorcycleModel) : currentMotorcycleModel,
+            "motorcycleModel": values.motorcycleModel ? motorcycleModel : currentMotorcycleModel,
             "mileage": values.mileage ? values.mileage : currentRecord.mileage,
             "purchasingPrice": values.purchasingPrice ? values.purchasingPrice : currentRecord.purchasingPrice,
             "profitMargin": values.profitMargin ? values.profitMargin : currentRecord.profitMargin,
@@ -79,7 +84,7 @@ const UpdateForm = (props) => {
         <Formik
             enableReinitialize
             initialValues={{
-                motorcycleModel: currentMotorcycleModel.modelName,
+                motorcycleModel: currentManufacturer.name + " - " + currentMotorcycleModel.modelName,
                 mileage: currentRecord.mileage,
                 purchasingPrice: currentRecord.purchasingPrice,
                 profitMargin: currentRecord.profitMargin,
@@ -108,8 +113,9 @@ const UpdateForm = (props) => {
                         >
                             <option value={values.motorcycleModel}>{values.motorcycleModel}</option>
                             {motorcycleModels.map(m => {
-                                if (m.modelName !== values.motorcycleModel) {
-                                    return <option key={m.modelName} value={m.modelName}>{m.modelName}</option>
+                                if (m.manufacturer.name + " - " + m.modelName !== values.motorcycleModel) {
+                                    return <option key={m.manufacturer.name + " - " + m.modelName}
+                                                   value={m.manufacturer.name + " - " + m.modelName}>{m.manufacturer.name + " - " + m.modelName}</option>
                                 }
 
                                 return "Click to select Motorcycle model";