-
Notifications
You must be signed in to change notification settings - Fork 86
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat:insert empty page handling, adapt loading functionality
- Loading branch information
1 parent
d4125b1
commit 7d8e9c0
Showing
5 changed files
with
119 additions
and
110 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
214 changes: 110 additions & 104 deletions
214
...p/pages/account-recurring-orders/recurring-order-list/recurring-order-list.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,112 +1,118 @@ | ||
| <table | ||
| cdk-table | ||
| [dataSource]="recurringOrders" | ||
| class="table table-lg mobile-optimized" | ||
| data-testing-id="recurringOrder-list" | ||
| > | ||
| <!-- Recurring Order Number --> | ||
| <ng-container cdkColumnDef="recurringOrderNo"> | ||
| <th cdk-header-cell *cdkHeaderCellDef data-testing-id="th-recurringOrder-no"> | ||
| {{ 'account.recurring_orders.table.id_of_order' | translate }} | ||
| </th> | ||
| <td | ||
| cdk-cell | ||
| *cdkCellDef="let recurringOrder" | ||
| [attr.data-label]="'account.recurring_orders.table.id_of_order' | translate" | ||
| > | ||
| <a | ||
| [routerLink]="['/account/recurring-orders/', recurringOrder.id]" | ||
| [attr.aria-label]="'account.recurring_orders.table.id_of_order.aria_label' | translate" | ||
| <ng-container *ngIf="recurringOrders?.length > 0; else emptyList"> | ||
| <table | ||
| cdk-table | ||
| [dataSource]="recurringOrders" | ||
| class="table table-lg mobile-optimized" | ||
| data-testing-id="recurringOrder-list" | ||
| > | ||
| <!-- Recurring Order Number --> | ||
| <ng-container cdkColumnDef="recurringOrderNo"> | ||
| <th cdk-header-cell *cdkHeaderCellDef data-testing-id="th-recurringOrder-no"> | ||
| {{ 'account.recurring_orders.table.id_of_order' | translate }} | ||
| </th> | ||
| <td | ||
| cdk-cell | ||
| *cdkCellDef="let recurringOrder" | ||
| [attr.data-label]="'account.recurring_orders.table.id_of_order' | translate" | ||
| > | ||
| {{ recurringOrder.number }} | ||
| </a> | ||
| </td> | ||
| </ng-container> | ||
| <a | ||
| [routerLink]="['/account/recurring-orders/', recurringOrder.id]" | ||
| [attr.aria-label]="'account.recurring_orders.table.id_of_order.aria_label' | translate" | ||
| > | ||
| {{ recurringOrder.number }} | ||
| </a> | ||
| </td> | ||
| </ng-container> | ||
|
|
||
| <!-- Creation Date --> | ||
| <ng-container cdkColumnDef="creationDate"> | ||
| <th cdk-header-cell *cdkHeaderCellDef data-testing-id="th-creation-date"> | ||
| {{ 'account.recurring_orders.table.date_of_order' | translate }} | ||
| </th> | ||
| <td | ||
| cdk-cell | ||
| *cdkCellDef="let recurringOrder" | ||
| [attr.data-label]="'account.recurring_orders.table.date_of_order' | translate" | ||
| > | ||
| {{ recurringOrder.creationDate | ishDate }} | ||
| </td> | ||
| </ng-container> | ||
| <!-- Creation Date --> | ||
| <ng-container cdkColumnDef="creationDate"> | ||
| <th cdk-header-cell *cdkHeaderCellDef data-testing-id="th-creation-date"> | ||
| {{ 'account.recurring_orders.table.date_of_order' | translate }} | ||
| </th> | ||
| <td | ||
| cdk-cell | ||
| *cdkCellDef="let recurringOrder" | ||
| [attr.data-label]="'account.recurring_orders.table.date_of_order' | translate" | ||
| > | ||
| {{ recurringOrder.creationDate | ishDate }} | ||
| </td> | ||
| </ng-container> | ||
|
|
||
| <!-- Frequency --> | ||
| <ng-container cdkColumnDef="frequency"> | ||
| <th cdk-header-cell *cdkHeaderCellDef data-testing-id="th-frequency"> | ||
| {{ 'account.recurring_orders.table.order_frequency' | translate }} | ||
| </th> | ||
| <td | ||
| cdk-cell | ||
| *cdkCellDef="let recurringOrder" | ||
| [attr.data-label]="'account.recurring_orders.table.order_frequency' | translate" | ||
| > | ||
| {{ recurringOrder.recurrence.interval | ishFrequency }} | ||
| </td> | ||
| </ng-container> | ||
|
|
||
| <!-- Frequency --> | ||
| <ng-container cdkColumnDef="frequency"> | ||
| <th cdk-header-cell *cdkHeaderCellDef data-testing-id="th-frequency"> | ||
| {{ 'account.recurring_orders.table.order_frequency' | translate }} | ||
| </th> | ||
| <td | ||
| cdk-cell | ||
| *cdkCellDef="let recurringOrder" | ||
| [attr.data-label]="'account.recurring_orders.table.order_frequency' | translate" | ||
| > | ||
| {{ recurringOrder.recurrence.interval | ishFrequency }} | ||
| </td> | ||
| </ng-container> | ||
| <!-- Last Order Date --> | ||
| <ng-container cdkColumnDef="lastOrderDate"> | ||
| <th cdk-header-cell *cdkHeaderCellDef data-testing-id="th-last-order-date"> | ||
| {{ 'account.recurring_orders.table.last_order_date' | translate }} | ||
| </th> | ||
| <td | ||
| cdk-cell | ||
| *cdkCellDef="let recurringOrder" | ||
| [attr.data-label]="'account.recurring_orders.table.last_order_date' | translate" | ||
| > | ||
| {{ recurringOrder.lastOrderDate ? (recurringOrder.lastOrderDate | ishDate) : '-' }} | ||
| </td> | ||
| </ng-container> | ||
|
|
||
| <!-- Last Order Date --> | ||
| <ng-container cdkColumnDef="lastOrderDate"> | ||
| <th cdk-header-cell *cdkHeaderCellDef data-testing-id="th-last-order-date"> | ||
| {{ 'account.recurring_orders.table.last_order_date' | translate }} | ||
| </th> | ||
| <td | ||
| cdk-cell | ||
| *cdkCellDef="let recurringOrder" | ||
| [attr.data-label]="'account.recurring_orders.table.last_order_date' | translate" | ||
| > | ||
| {{ recurringOrder.lastOrderDate ? (recurringOrder.lastOrderDate | ishDate) : '-' }} | ||
| </td> | ||
| </ng-container> | ||
| <!-- Next Order Date --> | ||
| <ng-container cdkColumnDef="nextOrderDate"> | ||
| <th cdk-header-cell *cdkHeaderCellDef data-testing-id="th-next-order-date"> | ||
| {{ 'account.recurring_orders.table.next_order_date' | translate }} | ||
| </th> | ||
| <td | ||
| cdk-cell | ||
| *cdkCellDef="let recurringOrder" | ||
| [attr.data-label]="'account.recurring_orders.table.next_order_date' | translate" | ||
| > | ||
| {{ recurringOrder.nextOrderDate | ishDate }} | ||
| </td> | ||
| </ng-container> | ||
|
|
||
| <!-- Next Order Date --> | ||
| <ng-container cdkColumnDef="nextOrderDate"> | ||
| <th cdk-header-cell *cdkHeaderCellDef data-testing-id="th-next-order-date"> | ||
| {{ 'account.recurring_orders.table.next_order_date' | translate }} | ||
| </th> | ||
| <td | ||
| cdk-cell | ||
| *cdkCellDef="let recurringOrder" | ||
| [attr.data-label]="'account.recurring_orders.table.next_order_date' | translate" | ||
| > | ||
| {{ recurringOrder.nextOrderDate | ishDate }} | ||
| </td> | ||
| </ng-container> | ||
| <!-- Order Total --> | ||
| <ng-container cdkColumnDef="orderTotal"> | ||
| <th cdk-header-cell *cdkHeaderCellDef data-testing-id="th-order-total" class="text-right"> | ||
| {{ 'account.recurring_orders.table.order_total' | translate }} | ||
| </th> | ||
| <td | ||
| cdk-cell | ||
| *cdkCellDef="let recurringOrder" | ||
| [attr.data-label]="'account.recurring_orders.table.order_total' | translate" | ||
| class="column-price" | ||
| > | ||
| {{ recurringOrder.totals.total | ishPrice : 'gross' }} | ||
| </td> | ||
| </ng-container> | ||
|
|
||
| <!-- Order Total --> | ||
| <ng-container cdkColumnDef="orderTotal"> | ||
| <th cdk-header-cell *cdkHeaderCellDef data-testing-id="th-order-total" class="text-right"> | ||
| {{ 'account.recurring_orders.table.order_total' | translate }} | ||
| </th> | ||
| <td | ||
| cdk-cell | ||
| *cdkCellDef="let recurringOrder" | ||
| [attr.data-label]="'account.recurring_orders.table.order_total' | translate" | ||
| class="column-price" | ||
| > | ||
| {{ recurringOrder.totals.total | ishPrice : 'gross' }} | ||
| </td> | ||
| </ng-container> | ||
| <!-- Actions --> | ||
| <ng-container cdkColumnDef="actions"> | ||
| <th cdk-header-cell *cdkHeaderCellDef data-testing-id="th-order-actions"></th> | ||
| <td cdk-cell *cdkCellDef="let recurringOrder" class="column-price text-nowrap"> | ||
| <ish-switch | ||
| id="{{ recurringOrder.id }}" | ||
| [active]="recurringOrder.active" | ||
| (switchActiveStatus)="switchActiveStatus($event)" | ||
| /> | ||
| </td> | ||
| </ng-container> | ||
|
|
||
| <!-- Actions --> | ||
| <ng-container cdkColumnDef="actions"> | ||
| <th cdk-header-cell *cdkHeaderCellDef data-testing-id="th-order-actions"></th> | ||
| <td cdk-cell *cdkCellDef="let recurringOrder" class="column-price text-nowrap"> | ||
| <ish-switch | ||
| id="{{ recurringOrder.id }}" | ||
| [active]="recurringOrder.active" | ||
| (switchActiveStatus)="switchActiveStatus($event)" | ||
| /> | ||
| </td> | ||
| </ng-container> | ||
| <!-- Header and Row Declarations --> | ||
| <tr cdk-header-row *cdkHeaderRowDef="columnsToDisplay"></tr> | ||
| <tr cdk-row *cdkRowDef="let row; columns: columnsToDisplay"></tr> | ||
| </table> | ||
| </ng-container> | ||
|
|
||
| <!-- Header and Row Declarations --> | ||
| <tr cdk-header-row *cdkHeaderRowDef="columnsToDisplay"></tr> | ||
| <tr cdk-row *cdkRowDef="let row; columns: columnsToDisplay"></tr> | ||
| </table> | ||
| <ng-template #emptyList> | ||
| <p data-testing-id="emptyList">{{ 'account.recurring_orders.no_placed_orders_message' | translate }}</p> | ||
| </ng-template> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters