Update a Record

Edit Button Interaction

• Include an "Edit" button located in the top right corner 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.

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

EditItemsList() {
   let body = {
     lineItemId: this.itemId.toString(),
     quantity: this.quantity,
   };
   this.dataService.EditItem(body).subscribe({
     next: (result: any) => {
       console.log("Result: ", result);
       if (result.status === "success") {
         this.items = {
           quantity: result.data.quantity,
           itemCode: result.data.itemCode,
           weight: result.data.weight,
           picture: result.data.picture,
           itemName: result.data.itemName,
           itemDescription: result.data.itemDescription,
         };
         this.modalService.dismissAll()
         this.displayAlertMessage('Item Edit successfully!', 'success', 'success');


       } else {
         console.error("API Error: ", result.message);
       }
     },
     error: (error) => {
       console.error("ERROR: ", error);
      
     },
     complete: () => { },
   });
 }

Code Description

This TypeScript function, EditItemsList, appears to be a method for editing an item's details through a data service. Here's a breakdown of its functionality:

Request Body Preparation

• Creates a body object containing lineItemId and quantity based on the values of this.itemId and this.quantity.

API Request

• Calls the EditItem method of this.dataService to edit the item using the provided body.

• Subscribes to the observable returned by the EditItem method.

Response Handling

In the next callback:

• Logs the result to the console using console.log.

• Checks if the response status is "success."

• If successful

  • Updates the local this.items with data from the response.

  • Dismisses any open modals using this.modalService.dismissAll().

  • Displays a success alert message using this.displayAlertMessage.

  • If the response status is not "success," logs an API error message to the console.

Error Handling

In the error callback:

• Logs the error to the console using console.error.