File
Metadata
| changeDetection |
ChangeDetectionStrategy.OnPush |
| selector |
cx-import-entries-summary |
| templateUrl |
./import-entries-summary.component.html |
Index
Properties
|
|
|
Methods
|
|
|
Inputs
|
|
|
Outputs
|
|
|
Methods
|
close
|
close(reason: string)
|
|
|
Parameters :
| Name |
Type |
Optional |
| reason |
string
|
No
|
|
|
toggleErrorList
|
toggleErrorList()
|
|
|
|
|
|
toggleWarningList
|
toggleWarningList()
|
|
|
|
|
|
closeEvent
|
Default value : new EventEmitter<string>()
|
Decorators :
@Output()
|
|
|
|
errorDetailsOpened
|
Type : boolean
|
Default value : false
|
|
|
|
iconTypes
|
Default value : ICON_TYPE
|
|
|
|
orderEntriesSource
|
Default value : OrderEntriesSource
|
|
|
|
type
|
Type : string
|
Decorators :
@Input()
|
|
|
|
warningDetailsOpened
|
Type : boolean
|
Default value : false
|
|
|
import {
ChangeDetectionStrategy,
Component,
EventEmitter,
Input,
Output,
} from '@angular/core';
import {
OrderEntriesSource,
ICON_TYPE,
ProductImportSummary,
} from '@spartacus/storefront';
@Component({
selector: 'cx-import-entries-summary',
templateUrl: './import-entries-summary.component.html',
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ImportEntriesSummaryComponent {
iconTypes = ICON_TYPE;
orderEntriesSource = OrderEntriesSource;
warningDetailsOpened: boolean = false;
errorDetailsOpened: boolean = false;
@Input()
type: string;
@Input()
summary: ProductImportSummary;
@Output()
closeEvent = new EventEmitter<string>();
close(reason: string): void {
this.closeEvent.emit(reason);
}
toggleWarningList(): void {
this.warningDetailsOpened = !this.warningDetailsOpened;
}
toggleErrorList(): void {
this.errorDetailsOpened = !this.errorDetailsOpened;
}
}
<div class="cx-import-entries-summary-status">
<p *ngIf="!summary.loading; else loading" [ngSwitch]="type">
<ng-container *ngSwitchCase="orderEntriesSource.QUICK_ORDER">
{{ 'importEntriesDialog.summary.loaded' | cxTranslate: summary }}
</ng-container>
<ng-container *ngSwitchDefault>
{{ 'importEntriesDialog.summary.loadedToCart' | cxTranslate: summary }}
</ng-container>
</p>
<ng-template #loading>
<p>
{{ 'importEntriesDialog.summary.loading' | cxTranslate: summary }}
</p>
</ng-template>
</div>
<p
*ngIf="summary.successesCount > 0"
class="cx-import-entries-summary-successes"
>
<cx-icon class="success" [type]="iconTypes.SUCCESS"></cx-icon>
{{ 'importEntriesDialog.summary.successes' | cxTranslate: summary }}
</p>
<div
*ngIf="summary.warningMessages.length > 0"
class="cx-import-entries-summary-warnings"
>
<p>
<cx-icon class="warning" [type]="iconTypes.ERROR"></cx-icon>
{{
'importEntriesDialog.summary.warning'
| cxTranslate: { count: summary.warningMessages.length }
}}
<button class="link cx-action-link" (click)="toggleWarningList()">
{{
(warningDetailsOpened
? 'importEntriesDialog.summary.hide'
: 'importEntriesDialog.summary.show'
) | cxTranslate
}}
</button>
</p>
<ul *ngIf="warningDetailsOpened">
<li *ngFor="let message of summary.warningMessages">
{{
'importEntriesDialog.summary.messages.' + message.statusCode
| cxTranslate: message
}}
</li>
</ul>
</div>
<div
*ngIf="summary.errorMessages.length > 0"
class="cx-import-entries-summary-errors"
>
<p>
<cx-icon class="error" [type]="iconTypes.RESET"></cx-icon>
{{
'importEntriesDialog.summary.error'
| cxTranslate: { count: summary.errorMessages.length }
}}
<button class="link cx-action-link" (click)="toggleErrorList()">
{{
(errorDetailsOpened
? 'importEntriesDialog.summary.hide'
: 'importEntriesDialog.summary.show'
) | cxTranslate
}}
</button>
</p>
<ul *ngIf="errorDetailsOpened">
<li *ngFor="let message of summary.errorMessages">
{{
'importEntriesDialog.summary.messages.' + message.statusCode
| cxTranslate: message
}}
</li>
</ul>
</div>
<div class="cx-import-entries-summary-footer">
<button
*ngIf="!summary.loading; else info"
(click)="close('Close Import Products Dialog')"
class="btn btn-action"
type="button"
>
{{ 'importEntriesDialog.close' | cxTranslate }}
</button>
<ng-template #info>
<p>{{ 'importEntriesDialog.summary.info' | cxTranslate }}</p>
</ng-template>
</div>
Legend
Html element with directive