sxhundred/ISA-Frontend
1
0
Fork 0
mirror of https://dev.azure.com/hugendubel/ISA/_git/ISA-Frontend synced 2025-12-28 22:42:11 +01:00
Code Issues Packages Projects Releases Wiki Activity

Ladeanimation beim laden der Bestellungen

Browse Source
This commit is contained in:
Lorenz Hilpert
2023-07-13 22:59:29 +02:00
parent 216d302a86
commit 9ec34b07c4
3 changed files with 53 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
apps/page/customer-rd/src/lib/customer-search/orders-main-view/orders-main-view.component.css
View File

@@ -6,3 +6,7 @@
@apply grid;
grid-template-columns: 4rem 7.5rem 1fr auto auto;
}
.fetching-min-h {
@apply min-h-[9rem];
}

56
apps/page/customer-rd/src/lib/customer-search/orders-main-view/orders-main-view.component.html
View File

@@ -13,30 +13,38 @@
Übersicht aller offenen und <br />
früheren Bestellungen
</p>
<div class="grid grid-flow-row -mx-6 -mb-8 mt-8 overflow-scroll max-h-[calc(100vh-390px)] scroll-bar">
<div *ngFor="let order of orders$ | async" class="order-item gap-6 items-center border-t-2 border-solid border-background px-6 py-3">
<div class="font-bold">
{{ order.orderDate | date: 'dd.MM.yy' }}
</div>
<div class="font-bold text-center">
{{ order.processingStatus | orderProcessingStatus }}
</div>
<div>
{{ order.features?.orderSource }}
<span *ngIf="order.features?.orderSource && (order | orderDestination)">|</span>
{{ order | orderDestination }}
</div>
<div>{{ order.orderValue | currency: order.currency:'code' }} | {{ order.itemsCount }} Artikel</div>
<div class="justify-self-end">
<a
class="grid justify-center items-center font-bold text-brand h-12"
*ngIf="getOrderDetailsRoute(order.id); let orderDetailsRoute"
[routerLink]="orderDetailsRoute.path"
[queryParams]="orderDetailsRoute.urlTree.queryParams"
[queryParamsHandling]="'merge'"
>
Details
</a>
<shared-loader [loading]="fetching$ | async" background="true" spinnerSize="48">
<div
class="grid grid-flow-row -mx-6 -mb-8 mt-8 overflow-scroll max-h-[calc(100vh-390px)] scroll-bar"
[class.fetching-min-h]="fetching$ | async"
>
<div *ngFor="let order of orders$ | async" class="order-item gap-6 items-center border-t-2 border-solid border-background px-6 py-3">
<div class="font-bold">
{{ order.orderDate | date: 'dd.MM.yy' }}
</div>
<div class="font-bold text-center">
{{ order.processingStatus | orderProcessingStatus }}
</div>
<div>
{{ order.features?.orderSource }}
<span *ngIf="order.features?.orderSource && (order | orderDestination)">|</span>
{{ order | orderDestination }}
</div>
<div>{{ order.orderValue | currency: order.currency:'code' }} | {{ order.itemsCount }} Artikel</div>
<div class="justify-self-end">
<a
class="grid justify-center items-center font-bold text-brand h-12"
*ngIf="getOrderDetailsRoute(order.id); let orderDetailsRoute"
[routerLink]="orderDetailsRoute.path"
[queryParams]="orderDetailsRoute.urlTree.queryParams"
[queryParamsHandling]="'merge'"
>
Details
</a>
</div>
</div>
</div>
</shared-loader>
<div *ngIf="noResults$ | async" class="grid items-center justify-center min-h-[10rem]">
<p class="text-xl font-bold">Keine Bestellungen gefunden</p>
</div>

18
apps/page/customer-rd/src/lib/customer-search/orders-main-view/orders-main-view.component.ts
View File

@@ -8,6 +8,7 @@ import { OrderDestinationPipe, OrderProcessingStatusPipe } from '@shared/pipes/o
import { CustomerSearchNavigation } from '../../navigations';
import { RouterLink } from '@angular/router';
import { IconComponent } from '@shared/components/icon';
import { LoaderComponent } from '@shared/components/loader';
@Component({
selector: 'page-customer-orders-main-view',
@@ -16,7 +17,18 @@ import { IconComponent } from '@shared/components/icon';
changeDetection: ChangeDetectionStrategy.OnPush,
host: { class: 'page-customer-orders-main-view' },
standalone: true,
imports: [AsyncPipe, NgFor, NgIf, DatePipe, OrderProcessingStatusPipe, OrderDestinationPipe, CurrencyPipe, RouterLink, IconComponent],
imports: [
AsyncPipe,
NgFor,
NgIf,
DatePipe,
OrderProcessingStatusPipe,
OrderDestinationPipe,
CurrencyPipe,
RouterLink,
IconComponent,
LoaderComponent,
],
})
export class CustomerOrdersMainViewComponent implements OnInit, OnDestroy {
private _onDestroy = new Subject<void>();
@@ -25,6 +37,10 @@ export class CustomerOrdersMainViewComponent implements OnInit, OnDestroy {
fetching$ = this._store.fetchingCustomerOrders$;
noResults$ = combineLatest([this.orders$, this.fetching$]).pipe(
map(([orders, fetching]) => !fetching && (!orders || orders.length === 0))
);
detailsRoute$ = combineLatest([this._store.processId$, this._store.customerId$]).pipe(
map(([processId, customerId]) => this._navigation.detailsRoute({ processId, customerId }))
);