Fix/motorcycle model name int tables

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>

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 {

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";

src/main/ui/src/util/identifyMotorcycleModelObject.js

@@ -0,0 +1,21 @@
+/**
+ * Identifies an object of type motorcycleModel from a collection, based on a given String expression by checking the
+ * expression against the names of the objects.
+ *
+ * Dropdown (<option>) shows "manufacturer.name + motorcycleModel.name" to client, to enhance user experience,
+ * therefore have to find the right motorcycleModel based on motorcycleModel.name only, among existing objects,
+ * to be passed to back-end.
+ *
+ * @param motorcycleModelsCollection set of motorcycleModel objects currently available in DB
+ * @param motorcycleModelNameFromDropdown that was chosen by the client as "manufacturer.name + motorcycleModel.name"
+ * @returns object of type motorcycleModel if there is a match based on motorcycleModel.name, otherwise undefined
+ */
+export function identifyMotorcycleModelObject(motorcycleModelsCollection, motorcycleModelNameFromDropdown) {
+    for (const motorcycleModelObject of motorcycleModelsCollection) {
+        if (motorcycleModelNameFromDropdown.includes(motorcycleModelObject.modelName)) {
+            return motorcycleModelObject;
+        }
+    }
+
+    return undefined;
+}