Merged PR 1962: Reward Shopping Cart

Related work items: #5305, #5356, #5357, #5359

libs/core/tabs/src/index.ts

@@ -1,3 +1,4 @@
+export * from './lib/navigate-back-button.component';
 export * from './lib/tab.injector';
 export * from './lib/tab.resolver-fn';
 export * from './lib/schemas';

libs/core/tabs/src/lib/helpers.ts

@@ -1,5 +1,6 @@
 import z from 'zod';
 import { Tab } from './schemas';
+import { EntityMap } from '@ngrx/signals/entities';
 
 export function getTabHelper(
   tabId: number,
@@ -12,7 +13,7 @@ export function getMetadataHelper<T extends z.ZodTypeAny>(
   tabId: number,
   key: string,
   schema: T,
-  entities: Record<number, Tab>,
+  entities: EntityMap<Tab>,
 ): z.infer<T> | undefined {
   const metadata = getTabHelper(tabId, entities)?.metadata;
 

libs/core/tabs/src/lib/navigate-back-button.component.ts

@@ -0,0 +1,64 @@
+import { Component, inject, computed } from '@angular/core';
+import { Router } from '@angular/router';
+import { NgIcon, provideIcons } from '@ng-icons/core';
+import { isaActionChevronLeft } from '@isa/icons';
+import { TabService } from './tab';
+import { ButtonComponent } from '@isa/ui/buttons';
+
+@Component({
+  selector: 'tabs-navigate-back-button',
+  imports: [NgIcon, ButtonComponent],
+  providers: [provideIcons({ isaActionChevronLeft })],
+  template: `
+    <button
+      uiButton
+      color="tertiary"
+      size="small"
+      class="px-[0.875rem] py-1 min-w-0 bg-white gap-1"
+      [class.cursor-not-allowed]="!canNavigateBack()"
+      data-what="back-button"
+      (click)="back()"
+      [disabled]="!canNavigateBack()"
+    >
+      <ng-icon
+        name="isaActionChevronLeft"
+        size="1.5rem"
+        class="-ml-2"
+      ></ng-icon>
+      <span>zurück</span>
+    </button>
+  `,
+})
+export class NavigateBackButtonComponent {
+  #tabService = inject(TabService);
+  #router = inject(Router);
+
+  canNavigateBack = computed(() => {
+    const tabId = this.#tabService.activatedTabId();
+    if (tabId === null) {
+      return false;
+    }
+
+    const tab = this.#tabService.entityMap()[tabId];
+    if (!tab) {
+      return false;
+    }
+
+    const currentLocation = tab.location;
+    return currentLocation.current > 0;
+  });
+
+  back() {
+    const tabId = this.#tabService.activatedTabId();
+    if (tabId === null) {
+      return;
+    }
+    const location = this.#tabService.navigateBack(tabId);
+
+    if (!location) {
+      return;
+    }
+
+    this.#router.navigateByUrl(location.url);
+  }
+}