Getting a Record of Customer Orders

Upon clicking a customer record, smoothly transition the user to a dedicated section or page displaying the order records associated with that customer.

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

Payload:

Customer Orders Payload

Preview:

Customer Orders Preview

Order Record Overview

• Design the order record screen to provide a concise overview. Include key information, such as:

  • Order No

  • Title

  • Description

  • Booking Date

  • Delivery Time

  • Status (Pending, Processing, Shipped, Delivered)

Order Record Overview

Back To Customer Record Button

• Maintain a clear and easily navigable path back to the customer records screen, allowing users to switch between customer and order records effortlessly.

Back To Customer Record Button

Search Order By Title

• Implement search options to help users quickly find specific order records based on their titles.

Search Order By Title

Order Record Code Snippet

getOderLists(start: number, size: number, customerId: string) {
   this.bLoader = true;
   let body = {
     customerId: customerId,
     start: start,
     size: size,
   }
   this.dataService.GetOderList(body).subscribe({
     next: (result: any) => {
       console.log("error")
       if (result.status === "success") {
         this.orders = result.data.orders;
         this.totalSize = result.data.totalData;
         this.bLoader = false;
         this.temp = [...this.orders]
       }
     },
     error: (error) => {
       console.error(" ERROR ==> ", error);
     },
     complete: () => { },
   }
   )
 }

Code Description

This TypeScript function, getOderLists, is designed to retrieve a list of orders for a specific customer from a data service. Here's a breakdown of its functionality:

Loading Indicator

• Sets this.bLoader to true, indicating that data is being loaded.

Request Body Preparation

• Creates a body object containing customerId, start, and size properties based on the provided parameters.

API Request

• Calls the GetOderList method of this.dataService to get a list of orders for the specified customer.

• Subscribes to the observable returned by the GetOderList method.

Response Handling

In the next callback

• Logs "error" to the console (seems to be a debugging statement).

• Checks if the response status is "success".

• If successful, updates the local this.orders with the order data from the response (result.data.orders).

• Sets this.totalSize to the total data size from the response (result.data.totalData).

• Sets this.bLoader to false, indicating the end of the loading process.

• Creates a copy of the order list in this.temp.

Error Handling

In the error callback

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