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

Merged PR 1780: #4314 Navigation on Product Cover Click

Browse Source 
#4314 Navigation on Product Cover Click
This commit is contained in:
Nino Righi
2024-05-28 15:57:31 +00:00
committed by Lorenz Hilpert
parent df36d0934d
commit 82656d9b27
12 changed files with 62 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
apps/cdn/product-image/src/lib/product-image-navigation.directive.ts Normal file
View File

@@ -0,0 +1,31 @@
import { Directive, HostListener, Input } from '@angular/core';
import { ProductCatalogNavigationService } from '@shared/services';
@Directive({
selector: '[productImageNavigation]',
standalone: true,
})
export class NavigateOnClickDirective {
@Input('productImageNavigation') ean: string;
constructor(private readonly _productCatalogNavigation: ProductCatalogNavigationService) {}
@HostListener('click', ['$event'])
async onClick(event: MouseEvent) {
event.preventDefault();
event.stopPropagation();
if (this.ean) {
await this._navigateToProductSearchDetails();
}
}
private async _navigateToProductSearchDetails() {
await this._productCatalogNavigation
.getArticleDetailsPathByEan({
processId: Date.now(),
ean: this.ean,
extras: { queryParams: { main_qs: this.ean } },
})
.navigate();
}
}

1
apps/cdn/product-image/src/public-api.ts
View File

@@ -5,4 +5,5 @@
export * from './lib/product-image.service';
export * from './lib/product-image.module';
export * from './lib/product-image.pipe';
export * from './lib/product-image-navigation.directive';
export * from './lib/tokens';

1
apps/page/goods-in/src/lib/goods-in-list/goods-in-list-item/goods-in-list-item.component.html
View File

@@ -42,6 +42,7 @@
<img
class="thumbnail"
loading="lazy"
[productImageNavigation]="orderItem?.product?.ean"
*ngIf="orderItem?.product?.ean | productImage; let productImage"
[src]="productImage"
[alt]="orderItem?.product?.name"

4
apps/page/goods-in/src/lib/goods-in-list/goods-in-list-item/goods-in-list-item.module.ts
View File

@@ -1,6 +1,6 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ProductImageModule } from 'apps/cdn/product-image/src/public-api';
import { NavigateOnClickDirective, ProductImageModule } from 'apps/cdn/product-image/src/public-api';
import { UiIconModule } from '@ui/icon';
import { UiInputModule } from '@ui/input';
import { FormsModule } from '@angular/forms';
@@ -8,7 +8,7 @@ import { GoodsInListItemComponent } from './goods-in-list-item.component';
import { PipesModule } from 'apps/shared/components/goods-in-out/src/lib/pipes/pipes.module';
@NgModule({
imports: [CommonModule, PipesModule, UiIconModule, ProductImageModule, FormsModule, UiInputModule],
imports: [CommonModule, PipesModule, UiIconModule, ProductImageModule, FormsModule, UiInputModule, NavigateOnClickDirective],
exports: [GoodsInListItemComponent],
declarations: [GoodsInListItemComponent],
providers: [],

6
apps/page/pickup-shelf/src/lib/shared/pickup-shelf-details-item/pickup-shelf-details-item.component.html
View File

@@ -32,7 +32,11 @@
</div>
<div class="page-pickup-shelf-details-item__item-container">
<div class="page-pickup-shelf-details-item__thumbnail">
<img [src]="orderItem.product?.ean | productImage" [alt]="orderItem.product?.name" />
<img
[productImageNavigation]="orderItem?.product?.ean"
[src]="orderItem.product?.ean | productImage"
[alt]="orderItem.product?.name"
/>
</div>
<div class="page-pickup-shelf-details-item__details">
<div class="flex flex-row justify-between items-start mb-[1.3125rem]">

3
apps/page/pickup-shelf/src/lib/shared/pickup-shelf-details-item/pickup-shelf-details-item.component.ts
View File

@@ -12,7 +12,7 @@ import {
inject,
} from '@angular/core';
import { FormsModule, ReactiveFormsModule, UntypedFormControl } from '@angular/forms';
import { ProductImageModule } from '@cdn/product-image';
import { NavigateOnClickDirective, ProductImageModule } from '@cdn/product-image';
import { DBHOrderItemListItemDTO, OrderDTO, ReceiptDTO } from '@swagger/oms';
import { UiCommonModule } from '@ui/common';
import { UiTooltipModule } from '@ui/tooltip';
@@ -57,6 +57,7 @@ export interface PickUpShelfDetailsItemComponentState {
IconModule,
UiQuantityDropdownModule,
NotificationTypePipe,
NavigateOnClickDirective,
],
})
export class PickUpShelfDetailsItemComponent extends ComponentStore<PickUpShelfDetailsItemComponentState> implements OnInit {

1
apps/page/pickup-shelf/src/lib/shared/pickup-shelf-list-item/pickup-shelf-list-item.component.html
View File

@@ -15,6 +15,7 @@
class="page-pickup-shelf-list-item__item-image w-[3.125rem] max-h-[4.9375rem]"
loading="lazy"
*ngIf="item?.product?.ean | productImage; let productImage"
[productImageNavigation]="item?.product?.ean"
[src]="productImage"
[alt]="item?.product?.name"
/>

3
apps/page/pickup-shelf/src/lib/shared/pickup-shelf-list-item/pickup-shelf-list-item.component.ts
View File

@@ -1,7 +1,7 @@
import { CurrencyPipe, DatePipe, NgFor, NgIf } from '@angular/common';
import { ChangeDetectionStrategy, Component, ElementRef, Input, inject } from '@angular/core';
import { RouterLink, RouterLinkActive } from '@angular/router';
import { ProductImageModule } from '@cdn/product-image';
import { NavigateOnClickDirective, ProductImageModule } from '@cdn/product-image';
import { EnvironmentService } from '@core/environment';
import { IconModule } from '@shared/components/icon';
import { DBHOrderItemListItemDTO } from '@swagger/oms';
@@ -31,6 +31,7 @@ import { CacheService } from '@core/cache';
ProductImageModule,
UiCommonModule,
PickupShelfProcessingStatusPipe,
NavigateOnClickDirective,
],
providers: [PickupShelfProcessingStatusPipe],
})

7
apps/page/remission/src/lib/remission-list/remission-list-item/remission-list-item.component.html
View File

@@ -21,7 +21,12 @@
</div>
<div class="product-data-grid grid gap-6 items-start">
<div>
<img class="max-w-full max-h-full shadow rounded" src="{{ item.ean | productImage }}" alt="item.dto.product.name" />
<img
[productImageNavigation]="item?.ean"
class="max-w-full max-h-full shadow rounded"
src="{{ item.ean | productImage }}"
alt="item.dto.product.name"
/>
</div>
<div class="grid grid-flow-row gap-1 w-48">

3
apps/page/remission/src/lib/remission-list/remission-list-item/remission-list-item.module.ts
View File

@@ -2,7 +2,7 @@ import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RemissionListItemComponent } from './remission-list-item.component';
import { ProductImageModule } from '@cdn/product-image';
import { NavigateOnClickDirective, ProductImageModule } from '@cdn/product-image';
import { RemissionPipeModule } from '../../pipes';
import { UiTooltipModule } from '@ui/tooltip';
import { UiCommonModule } from '@ui/common';
@@ -20,6 +20,7 @@ import { SharedProductGroupPipe } from '@shared/pipes/product-group';
UiTooltipModule,
AddProductToShippingDocumentModalModule,
SharedProductGroupPipe,
NavigateOnClickDirective,
],
exports: [RemissionListItemComponent],
declarations: [RemissionListItemComponent],

8
apps/shared/components/goods-in-out/src/lib/goods-in-out-order-group/goods-in-out-order-group-item.component.html
View File

@@ -16,7 +16,13 @@
</div>
<div class="goods-in-out-order-group-item-details">
<div class="goods-in-out-order-group-item-details-thumbnail">
<img loading="lazy" *ngIf="item?.product?.ean | productImage; let productImage" [src]="productImage" [alt]="item?.product?.name" />
<img
[productImageNavigation]="item?.product?.ean"
loading="lazy"
*ngIf="item?.product?.ean | productImage; let productImage"
[src]="productImage"
[alt]="item?.product?.name"
/>
</div>
<div data-which="item-details-data" class="goods-in-out-order-group-item-details-data">
<div

3
apps/shared/components/goods-in-out/src/lib/goods-in-out-order-group/goods-in-out-order-group.module.ts
View File

@@ -4,7 +4,7 @@ import { CommonModule } from '@angular/common';
import { GoodsInOutOrderGroupComponent } from './goods-in-out-order-group.component';
import { GoodsInOutOrderGroupItemComponent } from './goods-in-out-order-group-item.component';
import { UiIconModule } from '@ui/icon';
import { ProductImageModule } from '@cdn/product-image';
import { NavigateOnClickDirective, ProductImageModule } from '@cdn/product-image';
import { PipesModule } from '../pipes/pipes.module';
import { UiSelectBulletModule } from '@ui/select-bullet';
import { FormsModule } from '@angular/forms';
@@ -23,6 +23,7 @@ import { SharedProductGroupPipe } from '@shared/pipes/product-group';
UiQuantityDropdownModule,
UiSpinnerModule,
SharedProductGroupPipe,
NavigateOnClickDirective,
],
exports: [GoodsInOutOrderGroupComponent, GoodsInOutOrderGroupItemComponent],
declarations: [GoodsInOutOrderGroupComponent, GoodsInOutOrderGroupItemComponent],