@c8y/ngx-components
Version:
Angular modules for Cumulocity IoT applications
161 lines (155 loc) • 21.6 kB
JavaScript
import * as i0 from '@angular/core';
import { Component, Input, ViewChild, EventEmitter, Output, NgModule } from '@angular/core';
import * as i5 from '@angular/router';
import { RouterModule } from '@angular/router';
import * as i4 from 'ngx-bootstrap/popover';
import { PopoverModule } from 'ngx-bootstrap/popover';
import * as i6 from 'ngx-bootstrap/tooltip';
import { TooltipModule } from 'ngx-bootstrap/tooltip';
import * as i1 from '@c8y/ngx-components';
import { gettext, CoreModule } from '@c8y/ngx-components';
import * as i4$1 from '@c8y/ngx-components/operations/status-filter';
import { StatusFilterComponent, StatusFilterModule } from '@c8y/ngx-components/operations/status-filter';
import * as i2 from '@c8y/client';
import { OperationStatus } from '@c8y/client';
import { BULK_OPERATION_EVENT, ACTIONS_OPERATIONS, COMPONENTS } from '@c8y/ngx-components/operations/product-experience';
import { OPERATION_STATUS_LABELS, OPERATION_STATUS_OPTIONS_MAP } from '@c8y/ngx-components/operations/shared';
import { omit } from 'lodash-es';
import * as i3 from '@angular/common';
import * as i1$1 from '@c8y/ngx-components/operations/bulk-operations-service';
class SingleOperationItemComponent {
constructor(alertService, inventoryService, operationService) {
this.alertService = alertService;
this.inventoryService = inventoryService;
this.operationService = operationService;
this.BULK_OPERATION_EVENT = BULK_OPERATION_EVENT;
this.ACTIONS = ACTIONS_OPERATIONS;
this.COMPONENTS = COMPONENTS;
this.device = {};
this.OPERATION_STATUS_LABELS = OPERATION_STATUS_LABELS;
this.OPERATION_STATUS_OPTIONS_MAP = OPERATION_STATUS_OPTIONS_MAP;
this.readOnly = false;
}
async ngOnInit() {
this.device = (await this.inventoryService.detail(this.operation.deviceId))?.data;
}
async retrySingleOperation(singleOperation) {
const operationToCreate = omit(singleOperation, [
'id',
'self',
'status',
'failureReason',
'creationTime',
'delivery'
]);
try {
await this.operationService.create(operationToCreate);
this.alertService.success(gettext('Operation created.'));
}
catch (er) {
this.alertService.addServerFailure(er);
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SingleOperationItemComponent, deps: [{ token: i1.AlertService }, { token: i2.InventoryService }, { token: i2.OperationService }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SingleOperationItemComponent, selector: "c8y-single-operation-item", inputs: { operation: "operation", readOnly: "readOnly" }, viewQueries: [{ propertyName: "failureReasonRef", first: true, predicate: ["failureReason"], descendants: true, static: true }], ngImport: i0, template: "<c8y-li class=\"c8y-list__item--double-actions\">\n <c8y-li-icon>\n <i\n [c8yIcon]=\"OPERATION_STATUS_OPTIONS_MAP[operation.status].icon\"\n [tooltip]=\"operation.status.toString() | translate\"\n [ngClass]=\"OPERATION_STATUS_OPTIONS_MAP[operation.status].styleClass\"\n ></i>\n </c8y-li-icon>\n <div [ngClass]=\"{ 'content-flex-80': !readOnly, 'content-flex-50': readOnly }\">\n <div class=\"col-4\">\n <span class=\"m-r-4\">\n <device-status [mo]=\"device\"></device-status>\n </span>\n <a\n [routerLink]=\"['/device', operation.deviceId, 'device-info']\"\n routerLinkActive=\"active\"\n >\n {{ operation.deviceName }}\n </a>\n </div>\n <div class=\"col-3\">\n <small class=\"icon-flex text-muted\">\n <i\n class=\"m-r-4\"\n c8yIcon=\"calendar\"\n ></i>\n {{ operation.creationTime | c8yDate }}\n </small>\n </div>\n <div class=\"col-5\">\n <div class=\"d-flex a-i-center\">\n <span\n class=\"text-truncate\"\n #failureReason\n >\n {{ operation.failureReason | translate }}\n </span>\n <button\n class=\"btn-help btn-help--sm\"\n [attr.aria-label]=\"'Help' | translate\"\n popover=\"{{ operation.failureReason | translate }}\"\n placement=\"left\"\n triggers=\"focus\"\n type=\"button\"\n *ngIf=\"failureReason.offsetWidth < failureReason.scrollWidth\"\n >\n <i [c8yIcon]=\"'info-circle'\"></i>\n </button>\n <div\n class=\"showOnHover p-l-8 p-r-8 fit-h-20 m-l-auto\"\n *ngIf=\"\n !readOnly &&\n operation.status.toString() == OPERATION_STATUS_OPTIONS_MAP.FAILED.status.toString()\n \"\n >\n <button\n class=\"btn btn-default btn-xs\"\n title=\"{{ 'Retry operation' | translate }}\"\n type=\"button\"\n (click)=\"retrySingleOperation(operation)\"\n c8yProductExperience\n [actionName]=\"BULK_OPERATION_EVENT\"\n [actionData]=\"{ action: ACTIONS.RETRY, component: COMPONENTS.SINGLE_OPERATION_ITEM }\"\n >\n <i [c8yIcon]=\"'repeat m-r-4'\"></i>\n {{ 'Retry operation' | translate }}\n </button>\n </div>\n </div>\n </div>\n </div>\n</c8y-li>\n", dependencies: [{ kind: "directive", type: i1.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1.DeviceStatusComponent, selector: "device-status, c8y-device-status", inputs: ["mo", "size"] }, { kind: "component", type: i1.ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: i1.ListItemIconComponent, selector: "c8y-list-item-icon, c8y-li-icon", inputs: ["icon", "status"] }, { kind: "directive", type: i1.ProductExperienceDirective, selector: "[c8yProductExperience]", inputs: ["actionName", "actionData", "inherit", "suppressDataOverriding"] }, { kind: "directive", type: i4.PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "directive", type: i5.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i5.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: i6.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "pipe", type: i1.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i1.DatePipe, name: "c8yDate" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SingleOperationItemComponent, decorators: [{
type: Component,
args: [{ selector: 'c8y-single-operation-item', template: "<c8y-li class=\"c8y-list__item--double-actions\">\n <c8y-li-icon>\n <i\n [c8yIcon]=\"OPERATION_STATUS_OPTIONS_MAP[operation.status].icon\"\n [tooltip]=\"operation.status.toString() | translate\"\n [ngClass]=\"OPERATION_STATUS_OPTIONS_MAP[operation.status].styleClass\"\n ></i>\n </c8y-li-icon>\n <div [ngClass]=\"{ 'content-flex-80': !readOnly, 'content-flex-50': readOnly }\">\n <div class=\"col-4\">\n <span class=\"m-r-4\">\n <device-status [mo]=\"device\"></device-status>\n </span>\n <a\n [routerLink]=\"['/device', operation.deviceId, 'device-info']\"\n routerLinkActive=\"active\"\n >\n {{ operation.deviceName }}\n </a>\n </div>\n <div class=\"col-3\">\n <small class=\"icon-flex text-muted\">\n <i\n class=\"m-r-4\"\n c8yIcon=\"calendar\"\n ></i>\n {{ operation.creationTime | c8yDate }}\n </small>\n </div>\n <div class=\"col-5\">\n <div class=\"d-flex a-i-center\">\n <span\n class=\"text-truncate\"\n #failureReason\n >\n {{ operation.failureReason | translate }}\n </span>\n <button\n class=\"btn-help btn-help--sm\"\n [attr.aria-label]=\"'Help' | translate\"\n popover=\"{{ operation.failureReason | translate }}\"\n placement=\"left\"\n triggers=\"focus\"\n type=\"button\"\n *ngIf=\"failureReason.offsetWidth < failureReason.scrollWidth\"\n >\n <i [c8yIcon]=\"'info-circle'\"></i>\n </button>\n <div\n class=\"showOnHover p-l-8 p-r-8 fit-h-20 m-l-auto\"\n *ngIf=\"\n !readOnly &&\n operation.status.toString() == OPERATION_STATUS_OPTIONS_MAP.FAILED.status.toString()\n \"\n >\n <button\n class=\"btn btn-default btn-xs\"\n title=\"{{ 'Retry operation' | translate }}\"\n type=\"button\"\n (click)=\"retrySingleOperation(operation)\"\n c8yProductExperience\n [actionName]=\"BULK_OPERATION_EVENT\"\n [actionData]=\"{ action: ACTIONS.RETRY, component: COMPONENTS.SINGLE_OPERATION_ITEM }\"\n >\n <i [c8yIcon]=\"'repeat m-r-4'\"></i>\n {{ 'Retry operation' | translate }}\n </button>\n </div>\n </div>\n </div>\n </div>\n</c8y-li>\n" }]
}], ctorParameters: () => [{ type: i1.AlertService }, { type: i2.InventoryService }, { type: i2.OperationService }], propDecorators: { operation: [{
type: Input
}], readOnly: [{
type: Input
}], failureReasonRef: [{
type: ViewChild,
args: ['failureReason', { static: true }]
}] } });
class SingleOperationsListComponent {
constructor(bulkOperationsService) {
this.bulkOperationsService = bulkOperationsService;
this.readOnly = false;
this.onRetryFailedOperations = new EventEmitter();
this.OPERATION_STATUS = { ...OperationStatus, ALL: gettext('ALL') };
this.OPERATION_STATUS_LABELS = OPERATION_STATUS_LABELS;
this.OPERATION_STATUS_OPTIONS_MAP = OPERATION_STATUS_OPTIONS_MAP;
}
async ngAfterViewInit() {
if (this.statusFilter) {
this.filterOperationsByType();
}
}
ngOnChanges(changes) {
if (changes.bulkOperation && !changes.bulkOperation.firstChange) {
this.filterOperationsByType();
}
}
filterOperationsByType() {
if (this.statusFilter) {
const typeFilter = this.getFilterTypeOfSingleOperations();
this.statusFilter.preset(typeFilter === this.OPERATION_STATUS.ALL
? []
: [{ label: this.OPERATION_STATUS_LABELS[typeFilter] }]);
}
else {
setTimeout(this.filterOperationsByType.bind(this));
}
}
getFilterTypeOfSingleOperations() {
const progress = this.bulkOperation.progress;
if (progress.failed > 0) {
return this.OPERATION_STATUS.FAILED;
}
else if (progress.failed === 0 && progress.successful === 0 && progress.pending === 0) {
return this.OPERATION_STATUS.EXECUTING;
}
else if (progress.failed === 0 && progress.successful === 0 && progress.executing === 0) {
return this.OPERATION_STATUS.PENDING;
}
else if (progress.failed === 0 && progress.pending === 0 && progress.executing === 0) {
return this.OPERATION_STATUS.SUCCESSFUL;
}
return this.OPERATION_STATUS.ALL;
}
async getOperationsByStatus(filter) {
this.singleOperations = await this.bulkOperationsService.getSingleOperationsByStatus(filter[0] && filter[0].label, this.bulkOperation.id);
}
retryBulkOperation() {
this.onRetryFailedOperations.emit(this.bulkOperation);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SingleOperationsListComponent, deps: [{ token: i1$1.BulkOperationsService }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SingleOperationsListComponent, selector: "c8y-single-operations-list", inputs: { bulkOperation: "bulkOperation", readOnly: "readOnly" }, outputs: { onRetryFailedOperations: "onRetryFailedOperations" }, viewQueries: [{ propertyName: "statusFilter", first: true, predicate: StatusFilterComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container\n *ngIf=\"\n bulkOperation.progress.failed ||\n bulkOperation.progress.executing ||\n bulkOperation.progress.pending ||\n bulkOperation.progress.successful\n \"\n>\n <div class=\"legend form-block p-t-16 m-b-0\" translate>Operations</div>\n <div class=\"d-flex a-i-center\">\n <div class=\"d-flex a-i-center p-b-8\">\n <span class=\"m-r-4 text-medium\" translate>Filter by status</span>\n <c8y-status-filter\n small\n [options]=\"OPERATION_STATUS_OPTIONS_MAP\"\n (onFilterChanged)=\"getOperationsByStatus($event)\"\n ></c8y-status-filter>\n </div>\n <div class=\"m-l-auto p-b-8\" *ngIf=\"!readOnly && bulkOperation.progress.failed > 0\">\n <button\n class=\"btn btn-navbar\"\n (click)=\"retryBulkOperation()\"\n title=\"{{ 'Retry failed operations' | translate }}\"\n >\n <i c8yIcon=\"repeat\" class=\"m-r-4\"></i> <span translate>Retry failed operations</span>\n </button>\n </div>\n </div>\n <div class=\"inner-scroll\">\n <c8y-list-group>\n <div class=\"d-contents\" *c8yFor=\"let operation of singleOperations; loadMore: 'auto'\">\n <c8y-single-operation-item [operation]=\"operation\" [readOnly]=\"readOnly\" class=\"d-contents\">\n </c8y-single-operation-item>\n </div>\n\n <c8y-li *ngIf=\"singleOperations && singleOperations.data.length === 0\">\n <c8y-li-body>\n <div class=\"c8y-empty-state text-center\">\n <h2 class=\"c8y-icon c8y-icon-energy c8y-icon-duocolor m-b-16\"></h2>\n <div>\n <h3 translate>No single operations of the selected status to display.</h3>\n <p class=\"m-b-16\" translate>Single operations will be displayed here</p>\n </div>\n </div>\n </c8y-li-body>\n </c8y-li>\n </c8y-list-group>\n </div>\n</ng-container>\n", dependencies: [{ kind: "directive", type: i1.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i1.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.ForOfDirective, selector: "[c8yFor]", inputs: ["c8yForOf", "c8yForLoadMore", "c8yForPipe", "c8yForNotFound", "c8yForMaxIterations", "c8yForLoadingTemplate", "c8yForLoadNextLabel", "c8yForLoadingLabel", "c8yForRealtime", "c8yForRealtimeOptions", "c8yForComparator", "c8yForEnableVirtualScroll", "c8yForVirtualScrollElementSize", "c8yForVirtualScrollStrategy", "c8yForVirtualScrollContainerHeight"], outputs: ["c8yForCount", "c8yForChange", "c8yForLoadMoreComponent"] }, { kind: "component", type: i1.ListGroupComponent, selector: "c8y-list-group" }, { kind: "component", type: i1.ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: i1.ListItemBodyComponent, selector: "c8y-list-item-body, c8y-li-body", inputs: ["body"] }, { kind: "component", type: i4$1.StatusFilterComponent, selector: "c8y-status-filter", inputs: ["options", "multiple", "small"], outputs: ["onFilterChanged"] }, { kind: "component", type: SingleOperationItemComponent, selector: "c8y-single-operation-item", inputs: ["operation", "readOnly"] }, { kind: "pipe", type: i1.C8yTranslatePipe, name: "translate" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SingleOperationsListComponent, decorators: [{
type: Component,
args: [{ selector: 'c8y-single-operations-list', template: "<ng-container\n *ngIf=\"\n bulkOperation.progress.failed ||\n bulkOperation.progress.executing ||\n bulkOperation.progress.pending ||\n bulkOperation.progress.successful\n \"\n>\n <div class=\"legend form-block p-t-16 m-b-0\" translate>Operations</div>\n <div class=\"d-flex a-i-center\">\n <div class=\"d-flex a-i-center p-b-8\">\n <span class=\"m-r-4 text-medium\" translate>Filter by status</span>\n <c8y-status-filter\n small\n [options]=\"OPERATION_STATUS_OPTIONS_MAP\"\n (onFilterChanged)=\"getOperationsByStatus($event)\"\n ></c8y-status-filter>\n </div>\n <div class=\"m-l-auto p-b-8\" *ngIf=\"!readOnly && bulkOperation.progress.failed > 0\">\n <button\n class=\"btn btn-navbar\"\n (click)=\"retryBulkOperation()\"\n title=\"{{ 'Retry failed operations' | translate }}\"\n >\n <i c8yIcon=\"repeat\" class=\"m-r-4\"></i> <span translate>Retry failed operations</span>\n </button>\n </div>\n </div>\n <div class=\"inner-scroll\">\n <c8y-list-group>\n <div class=\"d-contents\" *c8yFor=\"let operation of singleOperations; loadMore: 'auto'\">\n <c8y-single-operation-item [operation]=\"operation\" [readOnly]=\"readOnly\" class=\"d-contents\">\n </c8y-single-operation-item>\n </div>\n\n <c8y-li *ngIf=\"singleOperations && singleOperations.data.length === 0\">\n <c8y-li-body>\n <div class=\"c8y-empty-state text-center\">\n <h2 class=\"c8y-icon c8y-icon-energy c8y-icon-duocolor m-b-16\"></h2>\n <div>\n <h3 translate>No single operations of the selected status to display.</h3>\n <p class=\"m-b-16\" translate>Single operations will be displayed here</p>\n </div>\n </div>\n </c8y-li-body>\n </c8y-li>\n </c8y-list-group>\n </div>\n</ng-container>\n" }]
}], ctorParameters: () => [{ type: i1$1.BulkOperationsService }], propDecorators: { bulkOperation: [{
type: Input
}], readOnly: [{
type: Input
}], onRetryFailedOperations: [{
type: Output
}], statusFilter: [{
type: ViewChild,
args: [StatusFilterComponent, { static: false }]
}] } });
/**
* This module allows for displaying the list of single operations in a bulk operations details.
*/
class BulkSingleOperationsListModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BulkSingleOperationsListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: BulkSingleOperationsListModule, declarations: [SingleOperationsListComponent, SingleOperationItemComponent], imports: [CoreModule, PopoverModule, RouterModule, TooltipModule, StatusFilterModule], exports: [SingleOperationsListComponent, SingleOperationItemComponent] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BulkSingleOperationsListModule, imports: [CoreModule, PopoverModule, RouterModule, TooltipModule, StatusFilterModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BulkSingleOperationsListModule, decorators: [{
type: NgModule,
args: [{
imports: [CoreModule, PopoverModule, RouterModule, TooltipModule, StatusFilterModule],
declarations: [SingleOperationsListComponent, SingleOperationItemComponent],
exports: [SingleOperationsListComponent, SingleOperationItemComponent]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { BulkSingleOperationsListModule, SingleOperationItemComponent, SingleOperationsListComponent };
//# sourceMappingURL=c8y-ngx-components-operations-bulk-single-operations-list.mjs.map