Merge branch 'feature/add-orders-data-fetching' into 'main'

Feature/add orders data fetching

See merge request shop-sphere/frontend!8

src/app/components/orders/orders.component.html

-<p>orders works!</p>
+<ng-container *ngIf="errorMessage; else showOrders">
+  <p>
+    {{ errorMessage }}
+  </p>
+</ng-container>
+<ng-template #showOrders>
+  <div *ngFor="let order of ordersList">
+    <strong>order id</strong>: {{ order.id }}<br />
+    <strong>articles</strong>:
+    <ul *ngFor="let article of order.articles">
+      <li><a [routerLink]="['/products', article.id]">detail</a></li>
+      <li><strong>Title</strong>: {{ article.title }}<br /></li>
+      <li><strong>Price</strong>: {{ article.price }}<br /></li>
+      <li><strong>Quantity</strong>: {{ article.quantity }}<br /></li>
+      <li><strong>Photo</strong>: {{ article.photo }}<br /></li>
+    </ul>
+    <strong>IsFinalized</strong>: {{ order.isFinalized }}<br />
+    <strong>Date</strong>: {{ order.date }}<br />
+    <strong>Client</strong>:
+    <ul>
+      <li><strong>Id</strong>: {{ order.client.id }}<br /></li>
+      <li><strong>FirstName</strong>: {{ order.client.firstName }}<br /></li>
+      <li><strong>LastName</strong>: {{ order.client.lastName }}<br /></li>
+      <li><strong>Email</strong>: {{ order.client.email }}<br /></li>
+      <li><strong>Password</strong>: {{ order.client.password }}<br /></li>
+      <li><strong>Address</strong>: {{ order.client.address }}<br /></li>
+    </ul>
+  </div>
+</ng-template>

src/app/components/orders/orders.component.ts

-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
+import { OrderDTO } from 'src/api-client';
+import { OrderService } from 'src/app/services/order.service';
 
 @Component({
   selector: 'app-orders',
   templateUrl: './orders.component.html',
-  styleUrls: ['./orders.component.scss']
+  styleUrls: ['./orders.component.scss'],
 })
-export class OrdersComponent {
+export class OrdersComponent implements OnInit {
+  ordersList!: OrderDTO[];
+  errorMessage!: string;
 
+  constructor(private ordersService: OrderService) {}
+
+  ngOnInit(): void {
+    this.initOrdersList();
+  }
+
+  /* Init the orders list by fetching orders from the database */
+  private initOrdersList(): void {
+    this.ordersService.getOrders().subscribe({
+      next: (data: OrderDTO[]) => {
+        this.ordersList = [...data];
+      },
+      error: () => {
+        this.errorMessage = 'Could not fetch orders from database';
+      },
+    });
+  }
 }

src/app/components/products/products.component.html

-<ng-container *ngIf="errorMessage; else ShowProducts">
+<ng-container *ngIf="errorMessage; else showProducts">
   <p>
     {{ errorMessage }}
   </p>
 </ng-container>
-<ng-template #ShowProducts>
+<ng-template #showProducts>
   <div *ngFor="let product of productsList">
     <p>
       <strong>id</strong>: {{ product.id }}<br />

src/app/components/products/products.component.ts

@@ -17,7 +17,7 @@ export class ProductsComponent implements OnInit {
     this.initProductsList();
   }
 
-  /* Init the products list by fetching products from the databse */
+  /* Init the products list by fetching products from the database */
   private initProductsList(): void {
     this.productsService.getProducts().subscribe({
       next: (data: ProductDTO[]) => {