diff --git a/src/app/orders/components/orders-list/orders-list.component.html b/src/app/orders/components/orders-list/orders-list.component.html index 62adaf2..3225764 100644 --- a/src/app/orders/components/orders-list/orders-list.component.html +++ b/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); + } @empty { +
+

You don't have any orders yet.
Time to choose where you want to go.

+ + No result +
} diff --git a/src/app/orders/components/orders-list/orders-list.component.scss b/src/app/orders/components/orders-list/orders-list.component.scss index 3b4a162..766bbde 100644 --- a/src/app/orders/components/orders-list/orders-list.component.scss +++ b/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; +} diff --git a/src/app/orders/components/orders-list/orders-list.component.ts b/src/app/orders/components/orders-list/orders-list.component.ts index 6c94373..586f266 100644 --- a/src/app/orders/components/orders-list/orders-list.component.ts +++ b/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$$(); diff --git a/src/app/orders/pages/orders/orders.component.scss b/src/app/orders/pages/orders/orders.component.scss index 9d54144..6d804fc 100644 --- a/src/app/orders/pages/orders/orders.component.scss +++ b/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; -} diff --git a/src/app/orders/pages/orders/orders.component.ts b/src/app/orders/pages/orders/orders.component.ts index 3ba1065..0ed56aa 100644 --- a/src/app/orders/pages/orders/orders.component.ts +++ b/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());