Update Inventory Information (Step 1)

Updating is a Two-Step Process

An update requires two steps: 1) Once it is determined an update is occurring, the information to be changed has to be requested from the database and made available to be edited; 2) When the edit is completed, the data must then be stored back into the database and the user informed of the success or failure of the change. This document covers step 1: getting the data from the database and displaying it for the change to occur.

Video Demonstration

The video provides a general overview of the activity, but does not contain the detail needed to complete each process. Watch the video to obtain a general idea, but follow the written steps to complete the activity. This is the Transcript of the video.

Request Data to be Changed

In the "Select Inventory" activity the make, model and id of each vehicle from inventory was queried from the database and used to build a table where the vehicle make and model were displayed and links to begin the modify (update) and delete processes were provided. When the "Modify" link is clicked, the URL is directed to the inventory route, and then passed to the controller. Within the route is sent the inventory_id of the item to be modified. Let's get started:

The Inventory Route

If you look closely at the route associated with the "Modify" item in the table which has been injected into the inventory management view, you will see something like this:

localhost:5500/inv/edit/#

Remember that "#" in the example, represents the "inventory id" value of the vehicle.

Find and open the "inventory route" file.
Add a new route that matches the path shown above, and add a parameter to the end of the route to represent the inventory_id value that will be passed in through the URL.
Add a controller-based function to handle the incoming "get" request. [Notice that you are picking your own name for this function. Make sure the name represents that this is going to present a view to allow editing of the item's information.]
Don't forget to add the error handler to the route.
Be sure to have a proper comment for the route.
Look for and fix any warnings or errors.
Save the file.

The Inventory Controller

As with previous interaction processes in the controller we will start by adding an appropriate function to handle the request.

Open the inventory controller.
Scroll down and add space for the new function, at the bottom of the file, between the last function and the module.exports statement.
We will speed up the process, by borrowing some existing code. Find and copy the comment and function used to build the "Add new inventory view", which should already exist in the controller.
Paste the function into the empty space you created at the bottom of the controller.
Modify the comment and function name to indicate that this will build the "edit inventory" view. Make sure the function name matches the name you used in the route!
Collect and store the incoming inventory_id as an integer (use the parseInt function in the collection and storage process) in a local variable.
Change the file name in the "render" function to be something like "edit-inventory", instead of "add-inventory".
Between the call to the nav building function and the build classification select list function create a new empty line.
In the empty line, call the model-based function to get all the inventory item data, based on the inventory_id. This function should already exist in the model. Pass the collected inventory_id into the function as a parameter.
From the returned data, create a "name" variable to hold the Make and Model of the inventory item and append it into the "title" property of the data object. This should appear in the title and h1 elements of the view when rendered in the browser.
Add variables holding the item's information to the data object to be sent to the view.

When done, the function could look something like this:

/* ***************************
 *  Build edit inventory view
 * ************************** */
invCont.editInventoryView = async function (req, res, next) {
  const inv_id = parseInt(req.params.inv_id)
  let nav = await utilities.getNav()
  const itemData = await invModel.getInventoryById(inv_id)
  const classificationSelect = await utilities.buildClassificationList(itemData.classification_id)
  const itemName = `${itemData.inv_make} ${itemData.inv_model}`
  res.render("./inventory/edit-inventory", {
    title: "Edit " + itemName,
    nav,
    classificationSelect: classificationSelect,
    errors: null,
    inv_id: itemData.inv_id,
    inv_make: itemData.inv_make,
    inv_model: itemData.inv_model,
    inv_year: itemData.inv_year,
    inv_description: itemData.inv_description,
    inv_image: itemData.inv_image,
    inv_thumbnail: itemData.inv_thumbnail,
    inv_price: itemData.inv_price,
    inv_miles: itemData.inv_miles,
    inv_color: itemData.inv_color,
    classification_id: itemData.classification_id
  })
}

Ensure that no warnings or errors exist.
Save the file.

Inventory Update View

This view has to do double duty, 1) display the data from the database to allow it to be modified prior to storing it back into the database, and 2) be able to handle errors upon submission just as we did when inserting the data for the new inventory item. Because some of that work is already done in the add inventory view, we will capitalize by duplicating that view and then making some changes.

Find and open the add inventory view.
Do a "Save As..." and save the view into the "views > inventory" folder, but change the name to match the name used in the render function of the controller handler.
Look for any text indicating that you are "adding" a new item. Delete all references to "adding" and replace them with "modifying" or "editing".
Scroll down into the opening form element and change the value to reflect that a "post" request is being made to update the inventory data. When done it could look something like this:
```
<form action="/inv/update" method="post">
```
Find the "submit" input and change its value to reflect that an update is happening. When done it could look like one of these two examples:
```
<input type="submit" name="submit" value="Update Vehicle">
```
OR
```
<button type="submit">Update Vehicle</button>
```
Rather than doing extensive remodeling of the existing code, we will reuse it. This means that when the values are brought in from the database to populate the form fields, as well as when we detect errors, we will use local params to do so. That is why each of the individual values were declared in the controller function as part of the render data object.
Ensure that no errors are displayed in the page. If so, fix them.
Save all files.

Test, Test, Test

Start the development server and go the local site in the browser.
Navigate to the inventory management view by altering the URL.
Select a classification type from the drop-down list.
Click the "Modify" link for an inventory item (any will do for now). We just want to make sure the data is being retrieved and displayed in our view.
The Update Inventory view should appear and the data for the item should be displayed in the form, including the classification select drop-down.
Check the view for compliance with the frontend checklist.
If everything works, you have completed this activity and can move on to the second step in the update process.
If the data does not appear, an error is displayed, or their are compliance issues, then troubleshoot it, get help from members of your learning team, use the discussion channel, contact the TA or the professor. But in any case, it needs to be operational in order to move on.
Be sure to close down the server in the terminal when done testing.