Scribd
Upload
21 views

Angular Task

The document outlines the requirements for creating an Angular application with a left menu, table view, and order details page. It specifies the design elements, API endpoints for fetching order counts and statuses, and the need to pass a token for authentication. Additionally, it provides detailed instructions on how to filter the table data and redirect to order details using the order ID.

Uploaded by

fyamgroups
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
21 views

Angular Task

The document outlines the requirements for creating an Angular application with a left menu, table view, and order details page. It specifies the design elements, API endpoints for fetching order counts and statuses, and the need to pass a token for authentication. Additionally, it provides detailed instructions on how to filter the table data and redirect to order details using the order ID.

Uploaded by

fyamgroups
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 6

Angular Task

1. Create the left menu with header(as per design below):-

a> In the design create a static header as per the design…use any static image for profile icon
b> Create a left menu as per the design…but inside the left menu you can see below the Orders
Tab sub tabs with count (count means no of items present in that particular tab) are there soo
you can get the count for all the tabs by firing an Api.

*Api Detail for left menu counts:-

Api Base url - https://test-app.medmate.com.au/api/v1/

End Point:- getOrderCountForMenu

Method:- GET

Header:- pass the token only

Token:- for every api fire you have top pass a token …token is present below
2. Create the Table View(as per design below):-

a> You have to create a table as per the design all the columns data will come from the Api
b> Create the filters buttons (filter buttons filters the table rows as per the Order Status Field)

*Api Detail for Table data:-

Api Base url - https://test-app.medmate.com.au/api/v1/

End Point:- getOrderStatus

Header:- pass the token only

Parameter:-

Total 6 tabs are present inside the Orders tab

Soo you can use the same api to retrieve the table data only you have to use
pass the different status.

1. Pending Approval:- status=” New,Rejected”


2. Price Requests:- status=”Waiting For Review,Awaiting Authorisation”
3. Processing:- status=”Process”
4. Delivery/Pickup:- status=” Awaiting Delivery,In Transit,Awaiting Pickup”
5. Closed:- status=“Completed,Cancelled”
6. All Orders:- status=”All”

example:- https://test-app.medmate.com.au/api/v1/ getOrderStatus ?status=All

Token:- :- for every api fire you have top pass a token …token is present below
3. Create the Order details page(as per design below):-

a> When user will click on any of the order you have to redirect user to another page and pass the
orderid

b> With the help of orderid you have to fire another Api to get the details of individual order and
print the details on the screen

c> Try to create the Order Details UI as similar as the design

*Api Detail for Order Details-

Api Base url - https://test-app.medmate.com.au/api/v1/

End Point:- getOrderDetails

Header:- pass the token only

Parameter:-

orderid=”you will get from getOrderStatus”

example:- https://test-app.medmate.com.au/api/v1/getOrderDetails
?orderid=2312

Token:- :- for every api fire you have top pass a token …token is present below
Token you have to use for Api fire

Bearer
eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJhdWQiOiIxNSIsImp0aSI6ImFiYzAzODc5NGNjMDA4NGU4NGQ
3YTExNDM0OTc5YTFiMTNjNjI5ZGY5MzVkZGE4OGRmZTI2YTY5NTZjZTE1YjhlMTA2MzliMGZkYTcyZTYwIiw
iaWF0IjoxNjI3NDc4MzgxLCJuYmYiOjE2Mjc0NzgzODEsImV4cCI6MTY1OTAxNDM4MSwic3ViIjoiMjYzNyIsIn
Njb3BlcyI6W119.uZoKnPVXD_mz1yrU7yQwEWoXsfaqvRNuQJfgZsnMh6A7Bm-xScMKsUZT_TW29wVg-
IlzKZuMVodZdNtkWLnPXmup6MBSCB8WiTdm6-4cBCNa4_NyD20ZQgiT3FkHH-9OXKpXM__-
CyCetXnVPwX9sgtxfRwNgjyR0V5RtUiJ2QiopjC4AqJKcw1ob3pNkxe73ohoBh6w7BVDWLUQW3O9FvcP7u
RsE3vkGPr7Im6ncjVQ86Hm-5A3x6CC-
3ascmU2r4v10s5MDVoPuPWPZ9nGxw4j0Bvg0EQa1AONkmUjME7V6slMMY3FdxmK9CahY9YSQ5feD56l4
m707cobl1CtHK0Np9cfloI6LoYd6-
otcAmYTZwKah8ENkuXLc8t3sHI321C5QziNADd8OlzykHVIC4pWzhHlwnYp7zR2NWnUtObs91J23TZpplLL
MIJY5ndApM0o7RURyLsx6Qkkl3SC2yQlIesg9L-
e2X2xKbOKzAuYFl_2Kt48qsenqkVGTPlZOqY4aFvCjdJHZJpE_rBZ9DjHEYinAsf7X6h1SjoaHKz8vkhMYXAl4D
_DwMPpHksSg0AxL7bJRwP2QJUDDHeqdHjf8Z5HuaGpirJEjnzmDz7x_PMO9_qjjGMYE31EzczlR-
k3LvRbFi3gpvsOahDLHCEkLDkjayHcNuVEBYTqZs

You might also like