Merged PR 1152: #2755 OLA Nachbestellen Grund

#2755 OLA Nachbestellen Grund

Related work items: #2755

apps/domain/oms/src/lib/action-handlers/order-at-supplier.action-handler.ts

@@ -19,10 +19,10 @@ export class OrderAtSupplierActionHandler extends ActionHandler<OrderItemsContex
     const updatedItems: OrderItemListItemDTO[] = [];
     for (const orderItem of data.items) {
       const result = await this._uiModal
-        .open<ReorderResult, OrderItemListItemDTO>({
+        .open<ReorderResult, { item: OrderItemListItemDTO; showReasons: boolean }>({
           content: ReorderModalComponent,
           title: 'Artikel bestellen',
-          data: orderItem,
+          data: { item: orderItem, showReasons: false },
         })
         .afterClosed$.toPromise();
 

apps/domain/oms/src/lib/action-handlers/re-order.action-handler.ts

@@ -16,15 +16,18 @@ export class ReOrderActionHandler extends ActionHandler<OrderItemsContext> {
     const updatedItems: OrderItemListItemDTO[] = [];
     for (const orderItem of data.items) {
       const result = await this._uiModal
-        .open<ReorderResult, OrderItemListItemDTO>({
+        .open<ReorderResult, { item: OrderItemListItemDTO; showReasons: boolean }>({
           content: ReorderModalComponent,
           title: 'Artikel nachbestellen',
-          data: orderItem,
+          data: {
+            item: orderItem,
+            showReasons: true,
+          },
         })
         .afterClosed$.toPromise();
       if (result.data) {
         if (result.data.action === 'REORDER') {
-          const reorderResult = await this.reorder(result.data.item, result.data.availability);
+          const reorderResult = await this.reorder(result.data.item, result.data.availability, result.data.comment);
           const resItem = reorderResult.item1;
 
           updatedItems.push({
@@ -54,10 +57,11 @@ export class ReOrderActionHandler extends ActionHandler<OrderItemsContext> {
     return { ...data, items: updatedItems };
   }
 
-  async reorder(orderItem: OrderItemListItemDTO, availability: AvailabilityDTO2) {
+  async reorder(orderItem: OrderItemListItemDTO, availability: AvailabilityDTO2, comment: string) {
     return await this._domainCheckoutService
       .reorder(orderItem.orderId, orderItem.orderItemId, orderItem.orderItemSubsetId, {
         quantity: orderItem.quantity,
+        comment,
         availability: {
           availabilityType: availability.status,
           ssc: availability.ssc,

apps/domain/oms/src/lib/oms.service.ts

@@ -56,6 +56,10 @@ export class DomainOmsService {
       .pipe(map((response) => response.result));
   }
 
+  getReorderReasons() {
+    return this._orderCheckoutService.OrderCheckoutGetReorderReasons().pipe(map((response) => response.result));
+  }
+
   @memorize()
   getVATs() {
     return this.orderService.OrderGetVATs({}).pipe(map((response) => response.result));

apps/modal/reorder/src/lib/reorder.component.html

@@ -71,6 +71,20 @@
       <hr />
     </ng-container>
 
+    <div class="reason" *ngIf="showReasons$ | async">
+      <button class="reason-dropdown" [uiOverlayTrigger]="statusDropdown" #dropdown="uiOverlayTrigger">
+        {{ selectedReason || 'Warum wird nachbestellt?' }}
+        <ui-icon [rotate]="dropdown.opened ? '270deg' : '90deg'" icon="arrow_head"></ui-icon>
+      </button>
+      <ui-dropdown #statusDropdown yPosition="above" xPosition="after" [xOffset]="8">
+        <button uiDropdownItem *ngFor="let reason of reorderReasons$ | async" (click)="selectedReason = reason.value">
+          {{ reason.value }}
+        </button>
+      </ui-dropdown>
+
+      <span *ngIf="showReasonError$ | async" class="error">Bitte wählen Sie einen Grund für das nachbestellen</span>
+    </div>
+
     <div class="actions">
       <button class="cta-not-available cta-action-secondary" [disabled]="ctaDisabled$ | async" (click)="notAvailable()">
         <ui-spinner [show]="ctaDisabled$ | async">

apps/modal/reorder/src/lib/reorder.component.scss

@@ -68,8 +68,28 @@ hr {
   }
 }
 
+.reason {
+  @apply flex flex-col justify-center items-center my-10 text-xl;
+
+  .reason-dropdown {
+    @apply flex flex-row items-center font-bold;
+
+    ui-icon {
+      @apply ml-2;
+    }
+  }
+
+  ui-dropdown {
+    min-width: 320px;
+  }
+
+  .error {
+    @apply text-brand font-bold text-lg;
+  }
+}
+
 .availability-error {
-  @apply py-5 font-bold text-brand;
+  @apply py-5 font-bold text-dark-goldenrod;
 }
 
 .load-spinner {

apps/modal/reorder/src/lib/reorder.component.ts

@@ -1,9 +1,10 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { DomainAvailabilityService } from '@domain/availability';
+import { DomainOmsService } from '@domain/oms';
 import { ComponentStore } from '@ngrx/component-store';
 import { AvailabilityDTO2, OrderItemListItemDTO } from '@swagger/oms';
 import { UiModalRef } from '@ui/modal';
-import { combineLatest } from 'rxjs';
+import { BehaviorSubject, combineLatest } from 'rxjs';
 import { catchError, map, shareReplay, switchMap, tap } from 'rxjs/operators';
 import { ReorderResult } from './reorder.result';
 
@@ -13,6 +14,7 @@ interface GoodsInListReorderModalState {
   takeAwayAvailabilityError: boolean;
   storeAvailabilityError: boolean;
   ctaDisabled: boolean;
+  showReasons: boolean;
 }
 
 @Component({
@@ -49,6 +51,8 @@ export class ReorderModalComponent extends ComponentStore<GoodsInListReorderModa
   }
   readonly ctaDisabled$ = this.select((s) => s.ctaDisabled);
 
+  readonly reorderReasons$ = this._omsService.getReorderReasons();
+
   readonly storeAvailabilityError$ = this.select((s) => s.storeAvailabilityError).pipe(shareReplay());
   readonly takeAwayAvailabilityError$ = this.select((s) => s.takeAwayAvailabilityError).pipe(shareReplay());
 
@@ -120,21 +124,32 @@ export class ReorderModalComponent extends ComponentStore<GoodsInListReorderModa
     map(([storeAvailabilities, takeAwayAvailability]) => [...(storeAvailabilities ?? []), takeAwayAvailability])
   );
 
+  showReasons$ = this.select((s) => s.showReasons);
+
+  get showReasons() {
+    return this.get((s) => s.showReasons);
+  }
+
+  showReasonError$ = new BehaviorSubject<boolean>(false);
+
   isChecked: boolean;
   checkedSupplier: string;
   storeAvailabilityError: boolean;
   takeAwayAvailabilityError: boolean;
+  selectedReason: string;
 
   constructor(
-    public modalRef: UiModalRef<ReorderResult, OrderItemListItemDTO>,
-    private domainAvailabilityService: DomainAvailabilityService
+    public modalRef: UiModalRef<ReorderResult, { item: OrderItemListItemDTO; showReasons: boolean }>,
+    private domainAvailabilityService: DomainAvailabilityService,
+    private _omsService: DomainOmsService
   ) {
     super({
-      orderItem: modalRef.data,
+      orderItem: modalRef.data?.item,
       checkedAvailability: undefined,
       storeAvailabilityError: false,
       takeAwayAvailabilityError: false,
       ctaDisabled: false,
+      showReasons: modalRef.data?.showReasons,
     });
   }
 
@@ -143,10 +158,16 @@ export class ReorderModalComponent extends ComponentStore<GoodsInListReorderModa
   }
 
   reorder() {
+    if (this.showReasons && !this.selectedReason) {
+      this.showReasonError$.next(true);
+      return;
+    }
+
     if (this.checkedAvailability) {
       this.ctaDisabled = true;
       this.modalRef.close({
         item: this.orderItem,
+        comment: this.selectedReason,
         availability: this.checkedAvailability,
         action: 'REORDER',
       });

apps/modal/reorder/src/lib/reorder.module.ts

@@ -3,6 +3,8 @@ import { NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { ProductImageModule } from '@cdn/product-image';
 import { UiCheckboxModule } from '@ui/checkbox';
+import { UiCommonModule } from '@ui/common';
+import { UiDropdownModule } from '@ui/dropdown';
 import { UiIconModule } from '@ui/icon';
 import { UiQuantityDropdownModule } from '@ui/quantity-dropdown';
 import { UiSelectBulletModule } from '@ui/select-bullet';
@@ -21,6 +23,8 @@ import { SupplierNamePipe } from './supplier-name.pipe';
     UiSpinnerModule,
     UiQuantityDropdownModule,
     UiCheckboxModule,
+    UiDropdownModule,
+    UiCommonModule,
   ],
   exports: [ReorderModalComponent, SupplierNamePipe],
   declarations: [ReorderModalComponent, SupplierNamePipe],

apps/modal/reorder/src/lib/reorder.result.ts

@@ -2,6 +2,7 @@ import { AvailabilityDTO2, OrderItemListItemDTO } from '@swagger/oms';
 
 export interface ReorderResult {
   item: OrderItemListItemDTO;
+  comment?: string;
   availability?: AvailabilityDTO2;
   action: 'REORDER' | 'NOTAVAILABLE';
 }

apps/swagger/oms/src/lib/models.ts

@@ -196,6 +196,7 @@ export { ImageDTO } from './models/image-dto';
 export { UrlDTO } from './models/url-dto';
 export { ShippingDTO } from './models/shipping-dto';
 export { ReadOnlyEntityDTOOfShopItemDTOAndIShopItem } from './models/read-only-entity-dtoof-shop-item-dtoand-ishop-item';
+export { ResponseArgsOfIEnumerableOfKeyValueDTOOfStringAndString } from './models/response-args-of-ienumerable-of-key-value-dtoof-string-and-string';
 export { ResponseArgsOfSupplierOrderResult } from './models/response-args-of-supplier-order-result';
 export { SupplierOrderResult } from './models/supplier-order-result';
 export { AvailabilityDTO2 } from './models/availability-dto2';

apps/swagger/oms/src/lib/models/reorder-values.ts

@@ -11,6 +11,11 @@ export interface ReorderValues {
    */
   availability?: AvailabilityDTO;
 
+  /**
+   * Anmerkung
+   */
+  comment?: string;
+
   /**
    * Menge
    */

apps/swagger/oms/src/lib/models/response-args-of-ienumerable-of-key-value-dtoof-string-and-string.ts

@@ -0,0 +1,6 @@
+/* tslint:disable */
+import { ResponseArgs } from './response-args';
+import { KeyValueDTOOfStringAndString } from './key-value-dtoof-string-and-string';
+export interface ResponseArgsOfIEnumerableOfKeyValueDTOOfStringAndString extends ResponseArgs{
+  result?: Array<KeyValueDTOOfStringAndString>;
+}

apps/swagger/oms/src/lib/services/order-checkout.service.ts

@@ -10,6 +10,7 @@ import { map as __map, filter as __filter } from 'rxjs/operators';
 import { ResponseArgsOfIEnumerableOfDisplayOrderDTO } from '../models/response-args-of-ienumerable-of-display-order-dto';
 import { ResponseArgsOfValueTupleOfOrderItemSubsetDTOAndOrderItemSubsetDTO } from '../models/response-args-of-value-tuple-of-order-item-subset-dtoand-order-item-subset-dto';
 import { ReorderValues } from '../models/reorder-values';
+import { ResponseArgsOfIEnumerableOfKeyValueDTOOfStringAndString } from '../models/response-args-of-ienumerable-of-key-value-dtoof-string-and-string';
 import { ResponseArgsOfSupplierOrderResult } from '../models/response-args-of-supplier-order-result';
 @Injectable({
   providedIn: 'root',
@@ -18,6 +19,7 @@ class OrderCheckoutService extends __BaseService {
   static readonly OrderCheckoutCreateOrderPath = '/order/checkout/{checkoutId}';
   static readonly OrderCheckoutCreateOrder2Path = '/order/checkout/{checkoutId}';
   static readonly OrderCheckoutReorderPath = '/order/{orderId}/orderitem/{orderItemId}/orderitemsubset/{orderItemSubsetId}/reorder';
+  static readonly OrderCheckoutGetReorderReasonsPath = '/order/reorder/reasons';
   static readonly OrderCheckoutOrderAtSupplierPath = '/order/{orderId}';
   static readonly OrderCheckoutOrderSubsetItemAtSupplierPath = '/order/{orderId}/orderitem/{orderItemId}/orderitemsubset/{orderItemSubsetId}';
 
@@ -45,7 +47,7 @@ class OrderCheckoutService extends __BaseService {
     if (params.locale != null) __params = __params.set('locale', params.locale.toString());
     let req = new HttpRequest<any>(
       'POST',
-      this.rootUrl + `/order/checkout/${encodeURIComponent(String(params.checkoutId))}`,
+      this.rootUrl + `/order/checkout/${encodeURIComponent(params.checkoutId)}`,
       __body,
       {
         headers: __headers,
@@ -92,7 +94,7 @@ class OrderCheckoutService extends __BaseService {
     if (params.locale != null) __params = __params.set('locale', params.locale.toString());
     let req = new HttpRequest<any>(
       'PUT',
-      this.rootUrl + `/order/checkout/${encodeURIComponent(String(params.checkoutId))}`,
+      this.rootUrl + `/order/checkout/${encodeURIComponent(params.checkoutId)}`,
       __body,
       {
         headers: __headers,
@@ -145,7 +147,7 @@ class OrderCheckoutService extends __BaseService {
     __body = params.data;
     let req = new HttpRequest<any>(
       'POST',
-      this.rootUrl + `/order/${encodeURIComponent(String(params.orderId))}/orderitem/${encodeURIComponent(String(params.orderItemId))}/orderitemsubset/${encodeURIComponent(String(params.orderItemSubsetId))}/reorder`,
+      this.rootUrl + `/order/${encodeURIComponent(params.orderId)}/orderitem/${encodeURIComponent(params.orderItemId)}/orderitemsubset/${encodeURIComponent(params.orderItemSubsetId)}/reorder`,
       __body,
       {
         headers: __headers,
@@ -179,6 +181,42 @@ class OrderCheckoutService extends __BaseService {
     );
   }
 
+  /**
+   * Nachbestellgründe
+   * @param locale Lokalisierung
+   */
+  OrderCheckoutGetReorderReasonsResponse(locale?: null | string): __Observable<__StrictHttpResponse<ResponseArgsOfIEnumerableOfKeyValueDTOOfStringAndString>> {
+    let __params = this.newParams();
+    let __headers = new HttpHeaders();
+    let __body: any = null;
+    if (locale != null) __params = __params.set('locale', locale.toString());
+    let req = new HttpRequest<any>(
+      'GET',
+      this.rootUrl + `/order/reorder/reasons`,
+      __body,
+      {
+        headers: __headers,
+        params: __params,
+        responseType: 'json'
+      });
+
+    return this.http.request<any>(req).pipe(
+      __filter(_r => _r instanceof HttpResponse),
+      __map((_r) => {
+        return _r as __StrictHttpResponse<ResponseArgsOfIEnumerableOfKeyValueDTOOfStringAndString>;
+      })
+    );
+  }
+  /**
+   * Nachbestellgründe
+   * @param locale Lokalisierung
+   */
+  OrderCheckoutGetReorderReasons(locale?: null | string): __Observable<ResponseArgsOfIEnumerableOfKeyValueDTOOfStringAndString> {
+    return this.OrderCheckoutGetReorderReasonsResponse(locale).pipe(
+      __map(_r => _r.body as ResponseArgsOfIEnumerableOfKeyValueDTOOfStringAndString)
+    );
+  }
+
   /**
    * Für alle noch nicht beim Lieferanten bestellen Posten der Bestellung wird einer Lieferantenbestellung erzeugt
    * @param orderId Bestellung PK
@@ -191,7 +229,7 @@ class OrderCheckoutService extends __BaseService {
 
     let req = new HttpRequest<any>(
       'POST',
-      this.rootUrl + `/order/${encodeURIComponent(String(orderId))}`,
+      this.rootUrl + `/order/${encodeURIComponent(orderId)}`,
       __body,
       {
         headers: __headers,
@@ -238,7 +276,7 @@ class OrderCheckoutService extends __BaseService {
 
     let req = new HttpRequest<any>(
       'POST',
-      this.rootUrl + `/order/${encodeURIComponent(String(params.orderId))}/orderitem/${encodeURIComponent(String(params.orderItemId))}/orderitemsubset/${encodeURIComponent(String(params.orderItemSubsetId))}`,
+      this.rootUrl + `/order/${encodeURIComponent(params.orderId)}/orderitem/${encodeURIComponent(params.orderItemId)}/orderitemsubset/${encodeURIComponent(params.orderItemSubsetId)}`,
       __body,
       {
         headers: __headers,

apps/swagger/oms/src/lib/services/order.service.ts

@@ -96,7 +96,7 @@ class OrderService extends __BaseService {
 
     let req = new HttpRequest<any>(
       'GET',
-      this.rootUrl + `/order/${encodeURIComponent(String(orderId))}`,
+      this.rootUrl + `/order/${encodeURIComponent(orderId)}`,
       __body,
       {
         headers: __headers,
@@ -135,7 +135,7 @@ class OrderService extends __BaseService {
     __body = params.order;
     let req = new HttpRequest<any>(
       'PUT',
-      this.rootUrl + `/order/${encodeURIComponent(String(params.orderId))}`,
+      this.rootUrl + `/order/${encodeURIComponent(params.orderId)}`,
       __body,
       {
         headers: __headers,
@@ -181,7 +181,7 @@ class OrderService extends __BaseService {
     if (params.eagerLoading != null) __params = __params.set('eagerLoading', params.eagerLoading.toString());
     let req = new HttpRequest<any>(
       'PATCH',
-      this.rootUrl + `/order/${encodeURIComponent(String(params.orderId))}`,
+      this.rootUrl + `/order/${encodeURIComponent(params.orderId)}`,
       __body,
       {
         headers: __headers,
@@ -226,7 +226,7 @@ class OrderService extends __BaseService {
     if (params.deletionComment != null) __params = __params.set('deletionComment', params.deletionComment.toString());
     let req = new HttpRequest<any>(
       'DELETE',
-      this.rootUrl + `/order/${encodeURIComponent(String(params.orderId))}`,
+      this.rootUrl + `/order/${encodeURIComponent(params.orderId)}`,
       __body,
       {
         headers: __headers,
@@ -275,7 +275,7 @@ class OrderService extends __BaseService {
 
     let req = new HttpRequest<any>(
       'PUT',
-      this.rootUrl + `/order/${encodeURIComponent(String(params.orderId))}/orderitem/${encodeURIComponent(String(params.orderItemId))}/orderitemsubset/${encodeURIComponent(String(params.orderItemSubsetId))}`,
+      this.rootUrl + `/order/${encodeURIComponent(params.orderId)}/orderitem/${encodeURIComponent(params.orderItemId)}/orderitemsubset/${encodeURIComponent(params.orderItemSubsetId)}`,
       __body,
       {
         headers: __headers,
@@ -328,7 +328,7 @@ class OrderService extends __BaseService {
 
     let req = new HttpRequest<any>(
       'PATCH',
-      this.rootUrl + `/order/${encodeURIComponent(String(params.orderId))}/orderitem/${encodeURIComponent(String(params.orderItemId))}/orderitemsubset/${encodeURIComponent(String(params.orderItemSubsetId))}`,
+      this.rootUrl + `/order/${encodeURIComponent(params.orderId)}/orderitem/${encodeURIComponent(params.orderItemId)}/orderitemsubset/${encodeURIComponent(params.orderItemSubsetId)}`,
       __body,
       {
         headers: __headers,
@@ -520,7 +520,7 @@ class OrderService extends __BaseService {
 
     let req = new HttpRequest<any>(
       'GET',
-      this.rootUrl + `/order/orderitem/${encodeURIComponent(String(orderItemId))}`,
+      this.rootUrl + `/order/orderitem/${encodeURIComponent(orderItemId)}`,
       __body,
       {
         headers: __headers,
@@ -596,7 +596,7 @@ class OrderService extends __BaseService {
 
     let req = new HttpRequest<any>(
       'PUT',
-      this.rootUrl + `/order/${encodeURIComponent(String(params.orderId))}/orderitem/${encodeURIComponent(String(params.orderItemId))}`,
+      this.rootUrl + `/order/${encodeURIComponent(params.orderId)}/orderitem/${encodeURIComponent(params.orderItemId)}`,
       __body,
       {
         headers: __headers,
@@ -644,7 +644,7 @@ class OrderService extends __BaseService {
 
     let req = new HttpRequest<any>(
       'PATCH',
-      this.rootUrl + `/order/${encodeURIComponent(String(params.orderId))}/orderitem/${encodeURIComponent(String(params.orderItemId))}`,
+      this.rootUrl + `/order/${encodeURIComponent(params.orderId)}/orderitem/${encodeURIComponent(params.orderItemId)}`,
       __body,
       {
         headers: __headers,
@@ -689,7 +689,7 @@ class OrderService extends __BaseService {
     if (params.locale != null) __params = __params.set('locale', params.locale.toString());
     let req = new HttpRequest<any>(
       'GET',
-      this.rootUrl + `/order/orderitem/${encodeURIComponent(String(params.orderItemId))}/history`,
+      this.rootUrl + `/order/orderitem/${encodeURIComponent(params.orderItemId)}/history`,
       __body,
       {
         headers: __headers,
@@ -727,7 +727,7 @@ class OrderService extends __BaseService {
 
     let req = new HttpRequest<any>(
       'GET',
-      this.rootUrl + `/order/orderitem/orderitemsubset/${encodeURIComponent(String(orderItemSubsetId))}`,
+      this.rootUrl + `/order/orderitem/orderitemsubset/${encodeURIComponent(orderItemSubsetId)}`,
       __body,
       {
         headers: __headers,
@@ -766,7 +766,7 @@ class OrderService extends __BaseService {
     if (params.locale != null) __params = __params.set('locale', params.locale.toString());
     let req = new HttpRequest<any>(
       'GET',
-      this.rootUrl + `/order/orderitem/orderitemsubset/${encodeURIComponent(String(params.orderItemSubsetId))}/history`,
+      this.rootUrl + `/order/orderitem/orderitemsubset/${encodeURIComponent(params.orderItemSubsetId)}/history`,
       __body,
       {
         headers: __headers,
@@ -815,7 +815,7 @@ class OrderService extends __BaseService {
     __body = params.data;
     let req = new HttpRequest<any>(
       'PATCH',
-      this.rootUrl + `/order/${encodeURIComponent(String(params.orderId))}/orderitem/${encodeURIComponent(String(params.orderItemId))}/orderitemsubset/${encodeURIComponent(String(params.orderItemSubsetId))}/changestatus`,
+      this.rootUrl + `/order/${encodeURIComponent(params.orderId)}/orderitem/${encodeURIComponent(params.orderItemId)}/orderitemsubset/${encodeURIComponent(params.orderItemSubsetId)}/changestatus`,
       __body,
       {
         headers: __headers,
@@ -985,7 +985,7 @@ class OrderService extends __BaseService {
     if (params.completed != null) __params = __params.set('completed', params.completed.toString());
     let req = new HttpRequest<any>(
       'GET',
-      this.rootUrl + `/order/${encodeURIComponent(String(params.orderId))}/item/${encodeURIComponent(String(params.orderItemId))}/subset/${encodeURIComponent(String(params.orderItemSubsetId))}/task`,
+      this.rootUrl + `/order/${encodeURIComponent(params.orderId)}/item/${encodeURIComponent(params.orderItemId)}/subset/${encodeURIComponent(params.orderItemSubsetId)}/task`,
       __body,
       {
         headers: __headers,
@@ -1036,7 +1036,7 @@ class OrderService extends __BaseService {
     __body = params.taskTypes;
     let req = new HttpRequest<any>(
       'POST',
-      this.rootUrl + `/order/${encodeURIComponent(String(params.orderId))}/orderItem/orderItemSubset/task/regenerate`,
+      this.rootUrl + `/order/${encodeURIComponent(params.orderId)}/orderItem/orderItemSubset/task/regenerate`,
       __body,
       {
         headers: __headers,
@@ -1074,7 +1074,7 @@ class OrderService extends __BaseService {
 
     let req = new HttpRequest<any>(
       'GET',
-      this.rootUrl + `/order/payer/${encodeURIComponent(String(payerId))}`,
+      this.rootUrl + `/order/payer/${encodeURIComponent(payerId)}`,
       __body,
       {
         headers: __headers,
@@ -1116,7 +1116,7 @@ class OrderService extends __BaseService {
 
     let req = new HttpRequest<any>(
       'PUT',
-      this.rootUrl + `/order/${encodeURIComponent(String(params.orderId))}/payer/${encodeURIComponent(String(params.payerId))}`,
+      this.rootUrl + `/order/${encodeURIComponent(params.orderId)}/payer/${encodeURIComponent(params.payerId)}`,
       __body,
       {
         headers: __headers,
@@ -1156,7 +1156,7 @@ class OrderService extends __BaseService {
 
     let req = new HttpRequest<any>(
       'GET',
-      this.rootUrl + `/order/shippingaddress/${encodeURIComponent(String(shippingAddressId))}`,
+      this.rootUrl + `/order/shippingaddress/${encodeURIComponent(shippingAddressId)}`,
       __body,
       {
         headers: __headers,
@@ -1198,7 +1198,7 @@ class OrderService extends __BaseService {
 
     let req = new HttpRequest<any>(
       'PUT',
-      this.rootUrl + `/order/${encodeURIComponent(String(params.orderId))}/shippingaddress/${encodeURIComponent(String(params.shippingAddressId))}`,
+      this.rootUrl + `/order/${encodeURIComponent(params.orderId)}/shippingaddress/${encodeURIComponent(params.shippingAddressId)}`,
       __body,
       {
         headers: __headers,
@@ -1299,7 +1299,7 @@ class OrderService extends __BaseService {
     if (params.code != null) __params = __params.set('code', params.code.toString());
     let req = new HttpRequest<any>(
       'GET',
-      this.rootUrl + `/order/ssc/${encodeURIComponent(String(params.supplierId))}`,
+      this.rootUrl + `/order/ssc/${encodeURIComponent(params.supplierId)}`,
       __body,
       {
         headers: __headers,
@@ -1382,7 +1382,7 @@ class OrderService extends __BaseService {
 
     let req = new HttpRequest<any>(
       'GET',
-      this.rootUrl + `/order/supplier/${encodeURIComponent(String(supplierId))}`,
+      this.rootUrl + `/order/supplier/${encodeURIComponent(supplierId)}`,
       __body,
       {
         headers: __headers,
@@ -1459,7 +1459,7 @@ class OrderService extends __BaseService {
 
     let req = new HttpRequest<any>(
       'GET',
-      this.rootUrl + `/order/vat/${encodeURIComponent(String(vatId))}`,
+      this.rootUrl + `/order/vat/${encodeURIComponent(vatId)}`,
       __body,
       {
         headers: __headers,
@@ -1536,7 +1536,7 @@ class OrderService extends __BaseService {
 
     let req = new HttpRequest<any>(
       'GET',
-      this.rootUrl + `/order/logistician/${encodeURIComponent(String(logisticianId))}`,
+      this.rootUrl + `/order/logistician/${encodeURIComponent(logisticianId)}`,
       __body,
       {
         headers: __headers,

apps/swagger/oms/src/lib/services/receipt.service.ts

@@ -46,7 +46,7 @@ class ReceiptService extends __BaseService {
     if (params.receiptType != null) __params = __params.set('receiptType', params.receiptType.toString());
     let req = new HttpRequest<any>(
       'GET',
-      this.rootUrl + `/receipt/order/${encodeURIComponent(String(params.orderId))}`,
+      this.rootUrl + `/receipt/order/${encodeURIComponent(params.orderId)}`,
       __body,
       {
         headers: __headers,

apps/ui/dropdown/src/lib/dropdown-item.directive.ts

@@ -1,4 +1,4 @@
-import { Directive, Host, HostBinding, HostListener, Input } from '@angular/core';
+import { Directive, ElementRef, Host, HostBinding, HostListener, Input } from '@angular/core';
 import { UiDropdownComponent } from './dropdown.component';
 
 @Directive({ selector: '[uiDropdownItem]' })
@@ -6,11 +6,28 @@ export class UiDropdownItemDirective {
   @Input()
   @HostBinding('disabled')
   disabled: boolean;
+  focused: boolean;
 
-  constructor(@Host() private dropdown: UiDropdownComponent) {}
+  constructor(@Host() private dropdown: UiDropdownComponent, private elementRef: ElementRef) {}
+
+  @HostListener('focus')
+  onFocus() {
+    this.focused = true;
+  }
+
+  @HostListener('blur')
+  onBlur() {
+    this.focused = false;
+  }
 
   @HostListener('click')
   close() {
     this.dropdown.close();
   }
+
+  focus() {
+    setTimeout(() => {
+      this.elementRef.nativeElement.focus();
+    }, 1);
+  }
 }

apps/ui/dropdown/src/lib/dropdown.component.ts

@@ -1,5 +1,17 @@
-import { Component, ElementRef, Input, OnInit, TemplateRef, ViewChild, ViewEncapsulation } from '@angular/core';
+import {
+  Component,
+  ContentChildren,
+  ElementRef,
+  HostListener,
+  Input,
+  OnInit,
+  QueryList,
+  TemplateRef,
+  ViewChild,
+  ViewEncapsulation,
+} from '@angular/core';
 import { UiOverlayTrigger } from '@ui/common';
+import { UiDropdownItemDirective } from './dropdown-item.directive';
 import { DropdownPositionX, DropdownPositionY } from './dropdown-positions';
 
 @Component({
@@ -12,6 +24,9 @@ import { DropdownPositionX, DropdownPositionY } from './dropdown-positions';
 export class UiDropdownComponent implements UiOverlayTrigger, OnInit {
   @ViewChild(TemplateRef) templateRef: TemplateRef<any>;
 
+  @ContentChildren(UiDropdownItemDirective)
+  items: QueryList<UiDropdownItemDirective>;
+
   content: ElementRef<any>;
 
   @Input()
@@ -35,4 +50,29 @@ export class UiDropdownComponent implements UiOverlayTrigger, OnInit {
   constructor() {}
 
   ngOnInit(): void {}
+
+  @HostListener('window:keydown', ['$event'])
+  keyup(event: KeyboardEvent) {
+    let optionIndex = this.items?.toArray()?.findIndex((o) => o.focused);
+
+    if (event.key === 'ArrowUp') {
+      event.preventDefault();
+
+      optionIndex--;
+      if (optionIndex < 0) {
+        optionIndex = 0;
+      }
+    } else if (event.key === 'ArrowDown') {
+      event.preventDefault();
+
+      optionIndex++;
+      if (this.items.length - 1 < optionIndex) {
+        return;
+      }
+    } else {
+      return;
+    }
+
+    this.items?.toArray()[optionIndex]?.focus();
+  }
 }

apps/ui/dropdown/src/lib/dropdown.scss

@@ -19,13 +19,15 @@
     @apply rounded-b-card;
   }
 
-  [uiDropdownItem]:hover {
+  [uiDropdownItem]:hover,
+  [uiDropdownItem]:focus {
     @apply bg-disabled-customer;
   }
 }
 
 .branch .ui-dropdown-panel {
-  [uiDropdownItem]:hover {
+  [uiDropdownItem]:hover,
+  [uiDropdownItem]:focus {
     @apply bg-disabled-branch;
   }
 }
@@ -79,3 +81,12 @@
     }
   }
 }
+
+::ng-deep ui-dropdown .ui-dropdown-wrapper button {
+  @apply text-brand;
+
+  &:hover,
+  &:focus {
+    @apply bg-glitter;
+  }
+}