Update a Record

Edit Button Interaction

• Include an "Edit" button within the item details screen, giving users a clear and distinct call-to-action to initiate the editing process.

Edit Button Interaction

Editable Fields:

• Clearly indicate which fields are editable. Typically, the Quantity field is editable.

Editable Fields

Save Changes Button

• Include a "Save" button to allow users to confirm their edits.

• Upon clicking "Save" trigger an API(EditLineItem) request to update the item details on the server.

Request URL: https://api.eng-dev-1.trilloapps.com/ds/function/shared/EditLineItem

Payload:

Save Button Payload

Preview:

Save Button Preview

Update Record Code Snippet

// Function to handle save button click
function saveItem() {
   const data = {
       lineItemId: itemDetail.id.toString(), // Replace with the actual itemId
       quantity: document.getElementById('itemQuantity1').value
   };


   var quantityInput = document.getElementById('itemQuantity1');
   var quantityError = document.getElementById('quantityError');


   if (!quantityInput.value || isNaN(quantityInput.value) || parseFloat(quantityInput.value) === 0) {
       // Show a validation message for an empty or invalid quantity
       quantityError.textContent = 'Quantity is required and must be a valid number.';
       quantityError.classList.add('text-danger');
       return; // Stop execution if the quantity is not valid
   }


   // Send itemId and updatedQuantity to your backend or perform other actions
   apiService.editLineItem(data)
       .then(response => {
           if (response.status == 'failed') {
               console.log(response.message);
               showToast(response.message, 'danger');
           } else {
               // Update the UI with the new item details
               itemDetail = response.data;
               document.getElementById('itemName').textContent = itemDetail.itemName;
               document.getElementById('description').textContent = itemDetail.itemDescription;
               document.getElementById('itemCode').textContent = itemDetail.itemCode;
               document.getElementById('itemWeight').textContent = itemDetail.weight;
               document.getElementById('itemQuantity').textContent = itemDetail.quantity;
               document.getElementById('itemPic').src = itemDetail.picture;
               showToast(response.message, 'success');
               closeModal();
           }
       })
       .catch(error => {
           showToast(error.message, 'danger');
       });
}

Code Description

The saveItem is a function that typically handles the process of saving or updating information related to a specific item within a system or application. This function involves storing the item's details in a database, updating records, or performing necessary actions to persist the changes made to the item's information.

Construct Data Object

It constructs a data object containing the lineItemId (converted to a string) and the quantity retrieved from the 'itemQuantity1' input field.

Validate Quantity Input

• Validates the quantity input:

  • Checks if the quantity is not empty.

  • Verifies if the quantity is a valid number.

  • Ensures that the quantity is not equal to zero.

  • If the quantity input is not valid, it displays a validation message and stops further execution.

API Request

If the quantity input is valid, it proceeds to call the apiService.editLineItem function, passing the data object.

Handling API Response

Upon receiving the response from the API call:

• If the status is 'failed', it logs the error message and displays a danger toast.

• If the status is successful, it updates the UI with the new item details:

  • Sets various elements such as 'itemName', 'description', 'itemCode', 'itemWeight', 'itemQuantity', and 'itemPic' based on the updated details.

  • Shows a success toast.

  • Closes the modal.

Error Handling

If there's an error during the API call, it displays an error toast.