Merged PR 1783: #4750 Code improvements, Check if Icon gets loaded

#4750 Code improvements, Check if Icon gets loaded
This commit is contained in:
Nino Righi
2024-06-04 16:02:53 +00:00
committed by Lorenz Hilpert
parent 43d8d220c9
commit 1041d92486
2 changed files with 15 additions and 18 deletions

View File

@@ -30,9 +30,15 @@
</div>
<div class="grid grid-flow-row gap-1 w-48">
<div class="overflow-hidden overflow-ellipsis whitespace-nowrap" *ngIf="checkFormatAvailable()">
<img *ngIf="iconExists()" class="inline" [src]="formatIconUrl" [alt]="item.formatDetail" />
<span class="ml-1 font-bold format-detail">{{ item.formatDetail }}</span>
<div class="overflow-hidden overflow-ellipsis whitespace-nowrap" *ngIf="formatAvailable">
<img
*ngIf="formatIconAvailable"
class="inline mr-1"
[src]="formatIconUrl"
[alt]="item.formatDetail"
(error)="formatIconAvailable = false"
/>
<span class="font-bold format-detail">{{ item.formatDetail }}</span>
</div>
<div class="font-bold ean">
{{ item.ean }}

View File

@@ -15,7 +15,6 @@ import { first, takeUntil } from 'rxjs/operators';
import { AddProductToShippingDocumentModalComponent } from '../../modals/add-product-to-shipping-document-modal/add-product-to-shipping-document-modal.component';
import { RemissionListComponentStore } from '../remission-list.component-store';
import { RemissionListComponent } from '../remission-list.component';
import { HttpClient } from '@angular/common/http';
@Component({
selector: 'page-remission-list-item',
@@ -60,11 +59,16 @@ export class RemissionListItemComponent implements OnDestroy {
return `/assets/images/Icon_${this.item.dto.product.format}.svg`;
}
get formatAvailable() {
return !!this.item.format && !!this.item.formatDetail && this.item.format !== 'UNKNOWN';
}
formatIconAvailable: boolean = true;
constructor(
private _modal: UiModalService,
private _remissionService: DomainRemissionService,
private _store: RemissionListComponentStore,
private readonly _http: HttpClient,
@Host() private _listComponent: RemissionListComponent
) {}
@@ -73,19 +77,6 @@ export class RemissionListItemComponent implements OnDestroy {
this._onDestroy$.complete();
}
checkFormatAvailable() {
return !!this.item.format && !!this.item.formatDetail && this.item.format !== 'UNKNOWN';
}
async iconExists(): Promise<boolean> {
try {
const response = await this._http.head(this.formatIconUrl, { observe: 'response' }).pipe(first()).toPromise();
return response?.status === 200;
} catch {
return false;
}
}
addProductToShippingDocument() {
const modal = this._modal.open({
content: AddProductToShippingDocumentModalComponent,