refactor(quantity-and-reason-item): improve stock fetching and caching logic

Enhance the fetchAssignedStock method to utilize memory storage for caching
assigned stock data. Update the resource loader to handle cached values and
set new stock data accordingly. Adjust the HTML button for better readability.

libs/remission/data-access/src/lib/services/remission-stock.service.ts

@@ -13,6 +13,7 @@ export class RemissionStockService {
   #memoryStorage = injectStorage(MemoryStorageProvider);
 
   async fetchAssignedStock(abortSignal?: AbortSignal): Promise<Stock> {
+    // TODO: No caching in data-access services. Remove caching.
     const cached = await this.#memoryStorage.get(ASSIGNED_STOCK_STORAGE_KEY);
 
     if (cached) {

libs/remission/shared/search-item-to-remit-dialog/src/lib/quantity-and-reason-item.component.ts

@@ -6,11 +6,16 @@ import {
   linkedSignal,
   model,
   resource,
+  ResourceStreamItem,
+  signal,
 } from '@angular/core';
 import { FormsModule } from '@angular/forms';
+import { injectStorage, MemoryStorageProvider } from '@isa/core/storage';
 import {
+  KeyValueStringAndString,
   RemissionReasonService,
   RemissionStockService,
+  Stock,
 } from '@isa/remission/data-access';
 import {
   DropdownButtonComponent,
@@ -26,6 +31,7 @@ import {
   imports: [DropdownButtonComponent, DropdownOptionComponent, FormsModule],
 })
 export class QuantityAndReasonItemComponent {
+  #memoryStorage = injectStorage(MemoryStorageProvider);
   #reasonService = inject(RemissionReasonService);
   #stockService = inject(RemissionStockService);
 
@@ -42,8 +48,25 @@ export class QuantityAndReasonItemComponent {
   });
 
   assignedStockResource = resource({
-    loader: ({ abortSignal }) =>
-      this.#stockService.fetchAssignedStock(abortSignal),
+    defaultValue: undefined,
+    stream: async ({ abortSignal }) => {
+      const cached = await this.#memoryStorage.get('assigned-stock');
+      const result = signal<ResourceStreamItem<Stock | undefined>>({
+        value: cached as Stock,
+      });
+
+      this.#stockService.fetchAssignedStock(abortSignal).then((stock) => {
+        if (stock) {
+          result.set({ value: stock });
+          this.#memoryStorage.set('assigned-stock', stock);
+        } else {
+          result.set({ value: undefined });
+          this.#memoryStorage.clear('assigned-stock');
+        }
+      });
+
+      return result.asReadonly();
+    },
   });
 
   reasonResource = resource({
@@ -53,12 +76,40 @@ export class QuantityAndReasonItemComponent {
         return [];
       }
 
-      return this.#reasonService.fetchReturnReasons(
-        {
-          stockId: params.id,
-        },
-        abortSignal,
-      );
+      const cached = (await this.#memoryStorage.get({
+        key: 'assigned-stock-reasons',
+        params,
+      })) as KeyValueStringAndString[];
+
+      if (cached && cached.length > 0) {
+        return cached;
+      }
+
+      return this.#reasonService
+        .fetchReturnReasons(
+          {
+            stockId: params.id,
+          },
+          abortSignal,
+        )
+        .then((reasons) => {
+          if (reasons && reasons.length > 0) {
+            this.#memoryStorage.set(
+              {
+                key: 'assigned-stock-reasons',
+                params,
+              },
+              reasons,
+            );
+          } else {
+            this.#memoryStorage.clear({
+              key: 'assigned-stock-reasons',
+              params,
+            });
+          }
+
+          return reasons;
+        });
     },
   });
 }

libs/remission/shared/search-item-to-remit-dialog/src/lib/select-remi-quantity-and-reason.component.html

@@ -17,6 +17,14 @@
 </div>
 <div></div>
 <div class="grid grid-cols-2 items-center gap-2">
-  <button type="button" color="secondary" size="large" uiButton>Zurück</button>
+  <button
+    type="button"
+    color="secondary"
+    size="large"
+    uiButton
+    (click)="host.item.set(undefined)"
+  >
+    Zurück
+  </button>
   <button type="button" color="primary" size="large" uiButton>Speichern</button>
 </div>