fix: no orders user message

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

@@ -3,6 +3,12 @@
   @for (order of orders().slice(firstPage, firstPage + rowsCount); track order.orderId) {
     @let user = ordersService.findUserById(order.userId);
     <app-order [order]="order" [user]="user"></app-order>
+  } @empty {
+    <div class="no-result">
+      <h1 class="description">You don't have any orders yet.<br />Time to choose where you want to go.</h1>
+      <p-button class="to-main-button" label="Choose a trip" routerLink="/" icon="pi pi-globe"></p-button>
+      <img class="image" [src]="imageUrl" alt="No result" />
+    </div>
   }
   <ng-container *ngTemplateOutlet="paginator"></ng-container>
 </div>

src/app/orders/components/orders-list/orders-list.component.scss

@@ -1,6 +1,33 @@
+@import 'variables';
+
 .orders-list {
   display: flex;
   flex-direction: column;
   gap: 1rem;
   width: 100%;
 }
+
+.no-result {
+  display: flex;
+  flex-direction: column;
+  gap: $offset-xs;
+  align-items: center;
+  justify-content: center;
+
+  padding: $offset-m;
+
+  text-align: center;
+}
+
+.description {
+  font-size: $font-size-m;
+  color: $gray-500;
+}
+
+.to-main-button {
+  margin-top: $offset-s;
+}
+
+.image {
+  max-width: 50dvw;
+}

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

@@ -1,6 +1,8 @@
 import { NgTemplateOutlet } from '@angular/common';
 import { ChangeDetectionStrategy, Component, inject, Input, OnDestroy, OnInit, signal } from '@angular/core';
+import { RouterLink } from '@angular/router';
 
+import { ButtonModule } from 'primeng/button';
 import { PaginatorModule, PaginatorState } from 'primeng/paginator';
 
 import { User } from '@/app/api/models/order';
@@ -10,10 +12,11 @@ import { UserOrder } from '@/app/orders/models/userOrder.model';
 import { UserOrderService } from '../../services/userOrder/user-order.service';
 import { OrderComponent } from '../order/order.component';
 
+const imgUrl = '/img/png/no-results.webp';
 @Component({
   selector: 'app-orders-list',
   standalone: true,
-  imports: [OrderComponent, NgTemplateOutlet, PaginatorModule],
+  imports: [OrderComponent, NgTemplateOutlet, PaginatorModule, ButtonModule, RouterLink],
   templateUrl: './orders-list.component.html',
   styleUrl: './orders-list.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -27,6 +30,8 @@ export class OrdersListComponent implements OnInit, OnDestroy {
 
   @Input() public users!: User[];
 
+  public imageUrl = imgUrl;
+
   public ngOnInit(): void {
     this.userOrderService.createUserOrders();
     const orders = this.userOrderService.currentOrders$$();

src/app/orders/pages/orders/orders.component.scss

@@ -5,28 +5,3 @@
   flex-direction: column;
   padding: $offset-l;
 }
-
-.no-result {
-  display: flex;
-  flex-direction: column;
-  gap: $offset-xs;
-  align-items: center;
-  justify-content: center;
-
-  padding: $offset-m;
-
-  text-align: center;
-}
-
-.description {
-  font-size: $font-size-m;
-  color: $gray-500;
-}
-
-.to-main-button {
-  margin-top: $offset-s;
-}
-
-.image {
-  max-width: 50dvw;
-}

src/app/orders/pages/orders/orders.component.ts

@@ -1,7 +1,5 @@
 import { ChangeDetectionStrategy, Component, inject, OnDestroy, OnInit } from '@angular/core';
-import { RouterLink } from '@angular/router';
 
-import { ButtonModule } from 'primeng/button';
 import { Subscription } from 'rxjs';
 
 import { CarriageService } from '@/app/api/carriagesService/carriage.service';
@@ -12,12 +10,10 @@ import { AuthService } from '@/app/auth/services/auth-service/auth.service';
 import { OrdersListComponent } from '../../components/orders-list/orders-list.component';
 import { UserOrderService } from '../../services/userOrder/user-order.service';
 
-const imgUrl = '/img/png/no-results.webp';
-
 @Component({
   selector: 'app-orders',
   standalone: true,
-  imports: [OrdersListComponent, ButtonModule, RouterLink],
+  imports: [OrdersListComponent],
   templateUrl: './orders.component.html',
   styleUrl: './orders.component.scss',
   providers: [],
@@ -33,8 +29,6 @@ export class OrdersComponent implements OnInit, OnDestroy {
   public userOrderService = inject(UserOrderService);
   public authService = inject(AuthService);
 
-  public imageUrl = imgUrl;
-
   public ngOnInit(): void {
     if (this.authService.isAdmin$$()) {
       this.subscription.add(this.ordersService.getAllUsers().subscribe());