@c8y/ngx-components
Version:
Angular modules for Cumulocity IoT applications
264 lines (257 loc) • 33.2 kB
JavaScript
import * as i0 from '@angular/core';
import { forwardRef, ViewContainerRef, ViewChild, Inject, Component, Injectable, ViewChildren, NgModule } from '@angular/core';
import * as i2 from '@angular/router';
import { RouterModule } from '@angular/router';
import { PopoverModule } from 'ngx-bootstrap/popover';
import { TooltipModule } from 'ngx-bootstrap/tooltip';
import * as i1$1 from '@c8y/ngx-components';
import { DatePickerComponent, OperationBulkRealtimeService, CoreModule } from '@c8y/ngx-components';
import * as i5 from '@c8y/ngx-components/operations/status-filter';
import { StatusFilterModule } from '@c8y/ngx-components/operations/status-filter';
import { BulkOperationSchedulerModule } from '@c8y/ngx-components/operations/bulk-operation-scheduler';
import * as i6 from '@c8y/ngx-components/operations/bulk-operation-list-item';
import { BULK_OPERATION_STATUS_OPTIONS, BulkOperationListItemComponent, BulkOperationListItemModule } from '@c8y/ngx-components/operations/bulk-operation-list-item';
import * as i4 from '@c8y/ngx-components/operations/bulk-operations-service';
import { BULK_OPERATION_EVENT, ACTIONS_OPERATIONS_BULK, BULK_OPERATION_DIALOG_STEPS } from '@c8y/ngx-components/operations/product-experience';
import { flatten } from 'lodash-es';
import { BehaviorSubject, combineLatest, pipe } from 'rxjs';
import { tap, switchMap, withLatestFrom, map, shareReplay } from 'rxjs/operators';
import * as i1 from 'ngx-bootstrap/modal';
import * as i4$1 from '@angular/common';
class BulkOperationsModalComponent {
constructor(bsModalRef, router, gainsightService, bulkOperationsService, bulkOperationModalsService) {
this.bsModalRef = bsModalRef;
this.router = router;
this.gainsightService = gainsightService;
this.bulkOperationsService = bulkOperationsService;
this.bulkOperationModalsService = bulkOperationModalsService;
this.BULK_OPERATION_EVENT = BULK_OPERATION_EVENT;
this.bulkActions = ACTIONS_OPERATIONS_BULK;
this.pxSteps = BULK_OPERATION_DIALOG_STEPS;
this.showComponent = false;
this.bulkList = [];
}
ngOnInit() {
this.bulkList = this.bulkOperationsService.getBulkTypes();
}
cancel() {
this.bsModalRef.hide();
}
createComponent(item) {
if (item && item.component) {
this.showComponent = true;
this.container.createComponent(item.component);
this.gainsightService.triggerEvent(this.BULK_OPERATION_EVENT, {
action: this.bulkActions.SELECT_BULK_OPERTION_TYPE,
bulkOperationType: item.type
});
}
}
handleClick(item) {
if (item.path) {
this.bulkOperationModalsService.hideNewBulkOperationModal();
this.router.navigateByUrl(item.path);
this.gainsightService.triggerEvent(this.BULK_OPERATION_EVENT, {
action: this.bulkActions.SELECT_BULK_OPERTION_TYPE,
bulkOperationType: item.type
});
}
else if (item.component) {
this.createComponent(item);
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: BulkOperationsModalComponent, deps: [{ token: i1.BsModalRef }, { token: i2.Router }, { token: i1$1.GainsightService }, { token: i4.BulkOperationsService }, { token: forwardRef(() => BulkOperationModalsService) }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: BulkOperationsModalComponent, isStandalone: false, selector: "c8y-bulk-operations-modal", viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<div class=\"viewport-modal\">\n <div class=\"modal-header dialog-header\">\n <i c8yIcon=\"c8y-energy\"></i>\n <h4\n id=\"modal-title\"\n translate\n >\n Add bulk operation\n </h4>\n </div>\n <div\n class=\"modal-inner-scroll\"\n id=\"modal-body\"\n >\n <div\n class=\"modal-body p-t-8 p-b-8 sticky-top separator-bottom text-center\"\n [hidden]=\"showComponent\"\n >\n <p\n class=\"text-medium\"\n translate\n >\n Select one of the available options\n </p>\n <p c8y-guide-docs>\n <small\n translate\n ngNonBindable\n >\n Check the\n <a\n c8y-guide-href=\"/docs/device-management-application/monitoring-and-controlling-devices/#to-add-a-bulk-operation-using-the-wizard\"\n >\n user documentation\n </a>\n for more details.\n </small>\n </p>\n </div>\n\n <div class=\"list-group list-group-links\">\n <button\n class=\"list-group-item flex-row\"\n type=\"button\"\n *ngFor=\"let item of bulkList\"\n (click)=\"handleClick(item)\"\n >\n <div\n class=\"list-item-icon\"\n *ngIf=\"item.c8yIcon; else icon\"\n >\n <i [c8yIcon]=\"item.c8yIcon\"></i>\n </div>\n <ng-template #icon>\n <div class=\"list-item-icon\">\n <i c8yIcon=\"cogs\"></i>\n </div>\n </ng-template>\n <div\n class=\"list-item-body text-truncate\"\n title=\"{{ item.name | translate }}\"\n >\n {{ item.name | translate }}\n </div>\n </button>\n </div>\n <template #container></template>\n </div>\n <div\n class=\"modal-footer\"\n [hidden]=\"showComponent\"\n >\n <button\n class=\"btn btn-default\"\n title=\"{{ 'Cancel' | translate }}\"\n type=\"button\"\n (click)=\"cancel()\"\n c8yProductExperience\n [actionName]=\"BULK_OPERATION_EVENT\"\n [actionData]=\"{\n action: bulkActions.CANCEL_ADD_BULK_OPERATION_DIALOG,\n step: pxSteps.SELECT_OPERATION_TYPE\n }\"\n >\n <span translate>Cancel</span>\n </button>\n </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1$1.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i1$1.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.GuideHrefDirective, selector: "[c8y-guide-href]", inputs: ["c8y-guide-href"] }, { kind: "component", type: i1$1.GuideDocsComponent, selector: "[c8y-guide-docs]" }, { kind: "directive", type: i1$1.ProductExperienceDirective, selector: "[c8yProductExperience]", inputs: ["actionName", "actionData", "inherit", "suppressDataOverriding"] }, { kind: "pipe", type: i1$1.C8yTranslatePipe, name: "translate" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: BulkOperationsModalComponent, decorators: [{
type: Component,
args: [{ selector: 'c8y-bulk-operations-modal', standalone: false, template: "<div class=\"viewport-modal\">\n <div class=\"modal-header dialog-header\">\n <i c8yIcon=\"c8y-energy\"></i>\n <h4\n id=\"modal-title\"\n translate\n >\n Add bulk operation\n </h4>\n </div>\n <div\n class=\"modal-inner-scroll\"\n id=\"modal-body\"\n >\n <div\n class=\"modal-body p-t-8 p-b-8 sticky-top separator-bottom text-center\"\n [hidden]=\"showComponent\"\n >\n <p\n class=\"text-medium\"\n translate\n >\n Select one of the available options\n </p>\n <p c8y-guide-docs>\n <small\n translate\n ngNonBindable\n >\n Check the\n <a\n c8y-guide-href=\"/docs/device-management-application/monitoring-and-controlling-devices/#to-add-a-bulk-operation-using-the-wizard\"\n >\n user documentation\n </a>\n for more details.\n </small>\n </p>\n </div>\n\n <div class=\"list-group list-group-links\">\n <button\n class=\"list-group-item flex-row\"\n type=\"button\"\n *ngFor=\"let item of bulkList\"\n (click)=\"handleClick(item)\"\n >\n <div\n class=\"list-item-icon\"\n *ngIf=\"item.c8yIcon; else icon\"\n >\n <i [c8yIcon]=\"item.c8yIcon\"></i>\n </div>\n <ng-template #icon>\n <div class=\"list-item-icon\">\n <i c8yIcon=\"cogs\"></i>\n </div>\n </ng-template>\n <div\n class=\"list-item-body text-truncate\"\n title=\"{{ item.name | translate }}\"\n >\n {{ item.name | translate }}\n </div>\n </button>\n </div>\n <template #container></template>\n </div>\n <div\n class=\"modal-footer\"\n [hidden]=\"showComponent\"\n >\n <button\n class=\"btn btn-default\"\n title=\"{{ 'Cancel' | translate }}\"\n type=\"button\"\n (click)=\"cancel()\"\n c8yProductExperience\n [actionName]=\"BULK_OPERATION_EVENT\"\n [actionData]=\"{\n action: bulkActions.CANCEL_ADD_BULK_OPERATION_DIALOG,\n step: pxSteps.SELECT_OPERATION_TYPE\n }\"\n >\n <span translate>Cancel</span>\n </button>\n </div>\n</div>\n" }]
}], ctorParameters: () => [{ type: i1.BsModalRef }, { type: i2.Router }, { type: i1$1.GainsightService }, { type: i4.BulkOperationsService }, { type: BulkOperationModalsService, decorators: [{
type: Inject,
args: [forwardRef(() => BulkOperationModalsService)]
}] }], propDecorators: { container: [{
type: ViewChild,
args: ['container', { static: false, read: ViewContainerRef }]
}] } });
class BulkOperationModalsService {
constructor(bsModalService) {
this.bsModalService = bsModalService;
}
showNewBulkOperationModal() {
this.bsModalRef = this.bsModalService.show(BulkOperationsModalComponent, {
backdrop: 'static',
class: 'modal-sm',
ariaDescribedby: 'modal-body',
ariaLabelledBy: 'modal-title'
});
}
hideNewBulkOperationModal() {
if (this.bsModalRef) {
this.bsModalRef.hide();
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: BulkOperationModalsService, deps: [{ token: i1.BsModalService }], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: BulkOperationModalsService }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: BulkOperationModalsService, decorators: [{
type: Injectable
}], ctorParameters: () => [{ type: i1.BsModalService }] });
class BulkOperationsListComponent {
constructor(realtime, bulkOperationsService, bulkOperationModalsService) {
this.realtime = realtime;
this.bulkOperationsService = bulkOperationsService;
this.bulkOperationModalsService = bulkOperationModalsService;
this.bulkTypes = [];
this.selectedTypeFilters = this.getTypeFilters();
this.bulkOperationStatusOptions = BULK_OPERATION_STATUS_OPTIONS;
this.BULK_OPERATION_EVENT = BULK_OPERATION_EVENT;
this.bulkActions = ACTIONS_OPERATIONS_BULK;
this.refreshLoading = false;
this.statusFilter$ = new BehaviorSubject(null);
this.typeFilter$ = new BehaviorSubject(null);
this.timeFilter$ = new BehaviorSubject(null);
this.reload$ = new BehaviorSubject(null);
this.bulkOperations$ = combineLatest(this.statusFilter$, this.timeFilter$, this.typeFilter$, this.reload$).pipe(tap(() => {
this.refreshLoading = true;
}), switchMap(([statusFilters, timeFilters]) => this.filter(statusFilters, timeFilters)), withLatestFrom(this.typeFilter$), map(([result, typeFilter]) => {
this.filterPipe = pipe(map(data => this.filterByType(data, typeFilter)));
return { ...result, data: this.filterByType(result.data, typeFilter) };
}), tap(() => {
this.refreshLoading = false;
}), shareReplay(1));
this.allFilterFragments = this.flattenFilterFragments(this.getTypeFilters());
}
ngOnInit() {
this.bulkTypes = this.bulkOperationsService.getBulkTypes();
}
filterByType(bulkOperations, typeFilter) {
const flattenedFragments = this.flattenFilterFragments(typeFilter);
if (
// return data unfiltered if no filters selected...
!flattenedFragments.length ||
// ...or when all filters are selected
this.allFilterFragments.every(fragment => flattenedFragments.includes(fragment))) {
return bulkOperations;
}
const filteredData = bulkOperations.filter(item => {
return Object.keys(item.operationPrototype).some(key => flattenedFragments.includes(key));
});
return filteredData;
}
resetFilter() {
this.statusFilter$.next(null);
this.timeFilter$.next(null);
this.typeFilter$.next(null);
this.datePicker.clearFilter();
this.selectedTypeFilters = this.getTypeFilters();
this.statusFilter.reset();
}
isFilterApplied() {
return (!!this.statusFilter$.getValue()?.length ||
!!this.typeFilter$.getValue()?.length ||
!!this.timeFilter$.getValue());
}
filter(statusFilters, timeFilter) {
const status = statusFilters && statusFilters.length > 0
? {
generalStatus: flatten(statusFilters.map(statusFilter => statusFilter.generalStatuses))
}
: {};
const time = timeFilter
? {
...(timeFilter.dateFrom && {
dateFrom: timeFilter.dateFrom.toISOString()
}),
...(timeFilter.dateTo && {
dateTo: timeFilter.dateTo.toISOString()
})
}
: {};
return this.getBulkOperations({ ...status, ...time });
}
getBulkOperations(filter) {
return this.bulkOperationsService.getBulkOperations(filter);
}
getTypeFilters() {
return this.bulkOperationsService.getBulkTypes();
}
addBulkOperation() {
this.bulkOperationModalsService.showNewBulkOperationModal();
}
openFailedOperation(failedParentId) {
this.listItems.forEach(item => {
if (item.bulkOperation.id === failedParentId) {
item.listItem.collapsed = false;
item.listItem.element.nativeElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
}
});
}
compareOperations(operationA, operationB) {
return new Date(operationA.startDate).getTime() - new Date(operationB.startDate).getTime();
}
flattenFilterFragments(filters) {
return (filters || []).reduce((flattened, current) => flattened.concat(current.fragments), []);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: BulkOperationsListComponent, deps: [{ token: i1$1.OperationBulkRealtimeService }, { token: i4.BulkOperationsService }, { token: BulkOperationModalsService }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: BulkOperationsListComponent, isStandalone: false, selector: "c8y-bulk-operations", providers: [OperationBulkRealtimeService], viewQueries: [{ propertyName: "statusFilter", first: true, predicate: ["statusFilter"], descendants: true, static: true }, { propertyName: "datePicker", first: true, predicate: DatePickerComponent, descendants: true, static: true }, { propertyName: "listItems", predicate: BulkOperationListItemComponent, descendants: true }], ngImport: i0, template: "<c8y-title>{{ 'Bulk operations' | translate }}</c8y-title>\n<c8y-breadcrumb>\n <c8y-breadcrumb-item\n [icon]=\"'c8y-overviews'\"\n [label]=\"'Overviews' | translate\"\n ></c8y-breadcrumb-item>\n <c8y-breadcrumb-item\n [icon]=\"'c8y-device-control'\"\n [label]=\"'Device control' | translate\"\n [path]=\"'devicecontrol/single'\"\n ></c8y-breadcrumb-item>\n <c8y-breadcrumb-item\n [icon]=\"'c8y-energy'\"\n [label]=\"'Bulk operations' | translate\"\n ></c8y-breadcrumb-item>\n</c8y-breadcrumb>\n\n<c8y-action-bar-item\n *ngIf=\"bulkTypes?.length\"\n itemClass=\"navbar-form\"\n [placement]=\"'left'\"\n>\n <label\n class=\"hidden-sm hidden-xs\"\n translate\n >\n Type\n </label>\n <c8y-select-legacy\n style=\"width: 180px\"\n [items]=\"bulkTypes\"\n [selected]=\"selectedTypeFilters\"\n [disableApplyOnNoSelection]=\"true\"\n (onChange)=\"selectedTypeFilters = $event; typeFilter$.next(selectedTypeFilters)\"\n ></c8y-select-legacy>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item\n [placement]=\"'left'\"\n itemClass=\"navbar-form\"\n>\n <c8y-status-filter\n #statusFilter\n [options]=\"bulkOperationStatusOptions\"\n (onFilterChanged)=\"statusFilter$.next($event)\"\n ></c8y-status-filter>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item\n [placement]=\"'left'\"\n itemClass=\"navbar-form\"\n>\n <c8y-date-picker (onDateSelected)=\"timeFilter$.next($event)\"></c8y-date-picker>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item [placement]=\"'right'\">\n <c8y-realtime-btn [service]=\"realtime\"></c8y-realtime-btn>\n</c8y-action-bar-item>\n<c8y-action-bar-item [placement]=\"'right'\">\n <button\n class=\"btn btn-link d-flex a-i-center\"\n title=\"{{ 'Add bulk operation' | translate }}\"\n *ngIf=\"bulkTypes?.length\"\n (click)=\"addBulkOperation()\"\n c8yProductExperience\n [actionName]=\"BULK_OPERATION_EVENT\"\n [actionData]=\"{ action: bulkActions.OPEN_ADD_BULK_OPERATION_DIALOG }\"\n >\n <i\n class=\"m-r-4\"\n c8yIcon=\"plus-circle\"\n ></i>\n <span class=\"text-truncate\">\n {{ 'Add bulk operation' | translate }}\n </span>\n </button>\n</c8y-action-bar-item>\n<c8y-action-bar-item [placement]=\"'right'\">\n <button\n class=\"btn btn-link d-flex a-i-center\"\n title=\"{{ 'Reload' | translate }}\"\n (click)=\"reload$.next()\"\n >\n <i\n class=\"m-r-4\"\n c8yIcon=\"refresh\"\n [ngClass]=\"{ 'icon-spin': refreshLoading }\"\n ></i>\n <span class=\"text-truncate\">\n {{ 'Reload' | translate }}\n </span>\n </button>\n</c8y-action-bar-item>\n\n<c8y-help\n src=\"/docs/device-management-application/monitoring-and-controlling-devices/#to-view-bulk-operations\"\n></c8y-help>\n\n<!-- Empty state -->\n<c8y-ui-empty-state\n icon=\"c8y-energy\"\n [title]=\"'No items to display' | translate\"\n [subtitle]=\"'Bulk operations will be displayed here' | translate\"\n *ngIf=\"(bulkOperations$ | async)?.data.length === 0 && !isFilterApplied()\"\n>\n <button\n class=\"btn btn-primary\"\n title=\"{{ 'Add bulk operation' | translate }}\"\n type=\"button\"\n *ngIf=\"bulkTypes?.length\"\n (click)=\"addBulkOperation()\"\n translate\n >\n Add bulk operation\n </button>\n</c8y-ui-empty-state>\n\n<!-- No results empty state -->\n<c8y-ui-empty-state\n icon=\"search\"\n [title]=\"'No results to display.' | translate\"\n [subtitle]=\"'Adjust or reset the filter.' | translate\"\n *ngIf=\"(bulkOperations$ | async)?.data.length === 0 && isFilterApplied()\"\n>\n <button\n class=\"btn btn-primary\"\n title=\"{{ 'Reset filter' | translate }}\"\n type=\"button\"\n (click)=\"resetFilter()\"\n translate\n >\n Reset filter\n </button>\n</c8y-ui-empty-state>\n\n<!-- Detailed list of operations + load more button -->\n<c8y-list-group class=\"m-b-24\">\n <div\n class=\"page-sticky-header hidden-xs c8y-list__item--double-actions c8y-list__item\"\n *ngIf=\"(bulkOperations$ | async)?.data.length\"\n >\n <div class=\"c8y-list__item__block\">\n <div class=\"c8y-list__item__icon\">\n <i\n class=\"invisible\"\n c8yIcon=\"refresh\"\n ></i>\n </div>\n <div class=\"c8y-list__item__body\">\n <div class=\"content-flex-57\">\n <div class=\"col-5\">\n {{ 'Operation' | translate }}\n </div>\n <div class=\"flex-grow\">\n {{ 'Progress' | translate }}\n </div>\n <div class=\"col-4\">\n {{ 'Status' | translate }}\n </div>\n </div>\n </div>\n <div class=\"c8y-list__item__actions\"></div>\n </div>\n </div>\n <div\n class=\"d-contents\"\n *c8yFor=\"\n let bulkOperation of bulkOperations$ | async;\n let i = index;\n realtime: realtime;\n pipe: filterPipe;\n comparator: compareOperations.bind(this);\n loadMore: 'auto'\n \"\n >\n <c8y-bulk-operation-list-item\n class=\"d-contents\"\n [bulkOperation]=\"bulkOperation\"\n (reload)=\"reload$.next()\"\n (showFailedOperation)=\"openFailedOperation($event)\"\n ></c8y-bulk-operation-list-item>\n </div>\n</c8y-list-group>\n", dependencies: [{ kind: "component", type: i1$1.ActionBarItemComponent, selector: "c8y-action-bar-item", inputs: ["placement", "priority", "itemClass", "injector", "groupId", "inGroupPriority"] }, { kind: "component", type: i1$1.BreadcrumbComponent, selector: "c8y-breadcrumb" }, { kind: "component", type: i1$1.BreadcrumbItemComponent, selector: "c8y-breadcrumb-item", inputs: ["icon", "translate", "label", "path", "injector"] }, { kind: "component", type: i1$1.EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "directive", type: i1$1.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i1$1.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.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$1.TitleComponent, selector: "c8y-title", inputs: ["pageTitleUpdate"] }, { kind: "component", type: i1$1.SelectLegacyComponent, selector: "c8y-select-legacy", inputs: ["placeholder", "selectedLabel", "applyLabel", "items", "selected", "updateItems", "disableApplyOnNoSelection", "addDropdownContainerToBody"], outputs: ["onChange"] }, { kind: "component", type: i1$1.ListGroupComponent, selector: "c8y-list-group" }, { kind: "component", type: i1$1.DatePickerComponent, selector: "c8y-date-picker", inputs: ["placeholder", "dateInputFormat"], outputs: ["onDateSelected"] }, { kind: "directive", type: i1$1.ProductExperienceDirective, selector: "[c8yProductExperience]", inputs: ["actionName", "actionData", "inherit", "suppressDataOverriding"] }, { kind: "component", type: i1$1.HelpComponent, selector: "c8y-help", inputs: ["src", "isCollapsed", "priority", "icon"] }, { kind: "component", type: i1$1.RealtimeButtonComponent, selector: "c8y-realtime-btn", inputs: ["service", "label", "title", "disabled"], outputs: ["onToggle"] }, { kind: "component", type: i5.StatusFilterComponent, selector: "c8y-status-filter", inputs: ["options", "multiple", "small"], outputs: ["onFilterChanged"] }, { kind: "component", type: i6.BulkOperationListItemComponent, selector: "c8y-bulk-operation-list-item", inputs: ["bulkOperation", "detailsCollapsed", "readOnly"], outputs: ["showFailedOperation", "reload"] }, { kind: "pipe", type: i1$1.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i4$1.AsyncPipe, name: "async" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: BulkOperationsListComponent, decorators: [{
type: Component,
args: [{ selector: 'c8y-bulk-operations', providers: [OperationBulkRealtimeService], standalone: false, template: "<c8y-title>{{ 'Bulk operations' | translate }}</c8y-title>\n<c8y-breadcrumb>\n <c8y-breadcrumb-item\n [icon]=\"'c8y-overviews'\"\n [label]=\"'Overviews' | translate\"\n ></c8y-breadcrumb-item>\n <c8y-breadcrumb-item\n [icon]=\"'c8y-device-control'\"\n [label]=\"'Device control' | translate\"\n [path]=\"'devicecontrol/single'\"\n ></c8y-breadcrumb-item>\n <c8y-breadcrumb-item\n [icon]=\"'c8y-energy'\"\n [label]=\"'Bulk operations' | translate\"\n ></c8y-breadcrumb-item>\n</c8y-breadcrumb>\n\n<c8y-action-bar-item\n *ngIf=\"bulkTypes?.length\"\n itemClass=\"navbar-form\"\n [placement]=\"'left'\"\n>\n <label\n class=\"hidden-sm hidden-xs\"\n translate\n >\n Type\n </label>\n <c8y-select-legacy\n style=\"width: 180px\"\n [items]=\"bulkTypes\"\n [selected]=\"selectedTypeFilters\"\n [disableApplyOnNoSelection]=\"true\"\n (onChange)=\"selectedTypeFilters = $event; typeFilter$.next(selectedTypeFilters)\"\n ></c8y-select-legacy>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item\n [placement]=\"'left'\"\n itemClass=\"navbar-form\"\n>\n <c8y-status-filter\n #statusFilter\n [options]=\"bulkOperationStatusOptions\"\n (onFilterChanged)=\"statusFilter$.next($event)\"\n ></c8y-status-filter>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item\n [placement]=\"'left'\"\n itemClass=\"navbar-form\"\n>\n <c8y-date-picker (onDateSelected)=\"timeFilter$.next($event)\"></c8y-date-picker>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item [placement]=\"'right'\">\n <c8y-realtime-btn [service]=\"realtime\"></c8y-realtime-btn>\n</c8y-action-bar-item>\n<c8y-action-bar-item [placement]=\"'right'\">\n <button\n class=\"btn btn-link d-flex a-i-center\"\n title=\"{{ 'Add bulk operation' | translate }}\"\n *ngIf=\"bulkTypes?.length\"\n (click)=\"addBulkOperation()\"\n c8yProductExperience\n [actionName]=\"BULK_OPERATION_EVENT\"\n [actionData]=\"{ action: bulkActions.OPEN_ADD_BULK_OPERATION_DIALOG }\"\n >\n <i\n class=\"m-r-4\"\n c8yIcon=\"plus-circle\"\n ></i>\n <span class=\"text-truncate\">\n {{ 'Add bulk operation' | translate }}\n </span>\n </button>\n</c8y-action-bar-item>\n<c8y-action-bar-item [placement]=\"'right'\">\n <button\n class=\"btn btn-link d-flex a-i-center\"\n title=\"{{ 'Reload' | translate }}\"\n (click)=\"reload$.next()\"\n >\n <i\n class=\"m-r-4\"\n c8yIcon=\"refresh\"\n [ngClass]=\"{ 'icon-spin': refreshLoading }\"\n ></i>\n <span class=\"text-truncate\">\n {{ 'Reload' | translate }}\n </span>\n </button>\n</c8y-action-bar-item>\n\n<c8y-help\n src=\"/docs/device-management-application/monitoring-and-controlling-devices/#to-view-bulk-operations\"\n></c8y-help>\n\n<!-- Empty state -->\n<c8y-ui-empty-state\n icon=\"c8y-energy\"\n [title]=\"'No items to display' | translate\"\n [subtitle]=\"'Bulk operations will be displayed here' | translate\"\n *ngIf=\"(bulkOperations$ | async)?.data.length === 0 && !isFilterApplied()\"\n>\n <button\n class=\"btn btn-primary\"\n title=\"{{ 'Add bulk operation' | translate }}\"\n type=\"button\"\n *ngIf=\"bulkTypes?.length\"\n (click)=\"addBulkOperation()\"\n translate\n >\n Add bulk operation\n </button>\n</c8y-ui-empty-state>\n\n<!-- No results empty state -->\n<c8y-ui-empty-state\n icon=\"search\"\n [title]=\"'No results to display.' | translate\"\n [subtitle]=\"'Adjust or reset the filter.' | translate\"\n *ngIf=\"(bulkOperations$ | async)?.data.length === 0 && isFilterApplied()\"\n>\n <button\n class=\"btn btn-primary\"\n title=\"{{ 'Reset filter' | translate }}\"\n type=\"button\"\n (click)=\"resetFilter()\"\n translate\n >\n Reset filter\n </button>\n</c8y-ui-empty-state>\n\n<!-- Detailed list of operations + load more button -->\n<c8y-list-group class=\"m-b-24\">\n <div\n class=\"page-sticky-header hidden-xs c8y-list__item--double-actions c8y-list__item\"\n *ngIf=\"(bulkOperations$ | async)?.data.length\"\n >\n <div class=\"c8y-list__item__block\">\n <div class=\"c8y-list__item__icon\">\n <i\n class=\"invisible\"\n c8yIcon=\"refresh\"\n ></i>\n </div>\n <div class=\"c8y-list__item__body\">\n <div class=\"content-flex-57\">\n <div class=\"col-5\">\n {{ 'Operation' | translate }}\n </div>\n <div class=\"flex-grow\">\n {{ 'Progress' | translate }}\n </div>\n <div class=\"col-4\">\n {{ 'Status' | translate }}\n </div>\n </div>\n </div>\n <div class=\"c8y-list__item__actions\"></div>\n </div>\n </div>\n <div\n class=\"d-contents\"\n *c8yFor=\"\n let bulkOperation of bulkOperations$ | async;\n let i = index;\n realtime: realtime;\n pipe: filterPipe;\n comparator: compareOperations.bind(this);\n loadMore: 'auto'\n \"\n >\n <c8y-bulk-operation-list-item\n class=\"d-contents\"\n [bulkOperation]=\"bulkOperation\"\n (reload)=\"reload$.next()\"\n (showFailedOperation)=\"openFailedOperation($event)\"\n ></c8y-bulk-operation-list-item>\n </div>\n</c8y-list-group>\n" }]
}], ctorParameters: () => [{ type: i1$1.OperationBulkRealtimeService }, { type: i4.BulkOperationsService }, { type: BulkOperationModalsService }], propDecorators: { listItems: [{
type: ViewChildren,
args: [BulkOperationListItemComponent]
}], statusFilter: [{
type: ViewChild,
args: ['statusFilter', { static: true }]
}], datePicker: [{
type: ViewChild,
args: [DatePickerComponent, { static: true }]
}] } });
const bulkOperationListRoutes = [
{
path: 'devicecontrol/bulk',
component: BulkOperationsListComponent
}
];
/**
* This module allows for displaying the list of bulk operations and their details.
*/
class BulkOperationsListModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: BulkOperationsListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: BulkOperationsListModule, declarations: [BulkOperationsListComponent, BulkOperationsModalComponent], imports: [CoreModule,
PopoverModule,
TooltipModule,
StatusFilterModule,
BulkOperationSchedulerModule,
BulkOperationListItemModule, i2.RouterModule], exports: [BulkOperationsListComponent, BulkOperationsModalComponent] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: BulkOperationsListModule, providers: [BulkOperationModalsService], imports: [CoreModule,
PopoverModule,
TooltipModule,
StatusFilterModule,
BulkOperationSchedulerModule,
BulkOperationListItemModule,
RouterModule.forChild(bulkOperationListRoutes)] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: BulkOperationsListModule, decorators: [{
type: NgModule,
args: [{
imports: [
CoreModule,
PopoverModule,
TooltipModule,
StatusFilterModule,
BulkOperationSchedulerModule,
BulkOperationListItemModule,
RouterModule.forChild(bulkOperationListRoutes)
],
providers: [BulkOperationModalsService],
declarations: [BulkOperationsListComponent, BulkOperationsModalComponent],
exports: [BulkOperationsListComponent, BulkOperationsModalComponent]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { BulkOperationModalsService, BulkOperationsListComponent, BulkOperationsListModule, BulkOperationsModalComponent, bulkOperationListRoutes };
//# sourceMappingURL=c8y-ngx-components-operations-bulk-operations-list.mjs.map