@c8y/ngx-components/fesm2022/c8y-ngx-components-datapoint-library-list.mjs

Angular modules for Cumulocity IoT applications

import * as i0 from '@angular/core';
import { Component } from '@angular/core';
import * as i2 from '@angular/router';
import { RouterModule } from '@angular/router';
import * as i1 from '@c8y/client';
import * as i3 from '@c8y/ngx-components';
import { gettext, CoreModule } from '@c8y/ngx-components';
import * as i4 from '@ngx-translate/core';
import { BehaviorSubject, pipe } from 'rxjs';
import { tap, switchMap, shareReplay, map } from 'rxjs/operators';
import { pathToDatapointLibrary } from '@c8y/ngx-components/datapoint-library/model';
import * as i6 from '@angular/cdk/a11y';
import { A11yModule } from '@angular/cdk/a11y';
import * as i8 from 'ngx-bootstrap/dropdown';
import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
import * as i5 from '@c8y/ngx-components/datapoint-library/services';
import * as i7 from '@angular/common';

class DatapointLibraryListComponent {
    constructor(inventory, router, modalService, translateService, alertService, parser) {
        this.inventory = inventory;
        this.router = router;
        this.modalService = modalService;
        this.translateService = translateService;
        this.alertService = alertService;
        this.parser = parser;
        this.title = gettext('Data point library');
        this.listClass = '';
        this.isLoading = true;
        this.reload$ = new BehaviorSubject(null);
        this.datapoints$ = this.reload$.pipe(tap(() => {
            this.isLoading = true;
        }), switchMap(() => this.getDatapoints()), tap(() => {
            this.isLoading = false;
        }), shareReplay());
        this.parsePipe = pipe(map((data) => this.parser.parseDatapoints(data)));
    }
    getDatapoints() {
        return this.inventory.list({ pageSize: 20, fragmentType: 'c8y_Kpi', withTotalPages: true });
    }
    addDatapointEntry() {
        this.router.navigate([pathToDatapointLibrary, 'new']);
    }
    editDatapointEntry(entry) {
        this.router.navigate([pathToDatapointLibrary, entry.id]);
    }
    async removeDatapointEntry(entry) {
        try {
            await this.modalService.confirm(gettext('Delete data point'), this.translateService.instant(gettext('You are about to delete data point "{{ dpLabel }}". Do you want to proceed?'), { dpLabel: entry.c8y_Kpi.label }), 'danger');
        }
        catch (e) {
            return;
        }
        try {
            await this.inventory.delete(entry.id);
            this.reload$.next();
        }
        catch (e) {
            this.alertService.addServerFailure(e);
        }
    }
    reload() {
        this.reload$.next();
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DatapointLibraryListComponent, deps: [{ token: i1.InventoryService }, { token: i2.Router }, { token: i3.ModalService }, { token: i4.TranslateService }, { token: i3.AlertService }, { token: i5.DatapointParserService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DatapointLibraryListComponent, isStandalone: true, selector: "c8y-datapoint-library-list", ngImport: i0, template: "<c8y-title>{{ title | translate }}</c8y-title>\n<c8y-breadcrumb>\n  <c8y-breadcrumb-item\n    [icon]=\"'c8y-tools'\"\n    [label]=\"'Configuration' | translate\"\n  ></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item\n    [icon]=\"'c8y-tools'\"\n    [label]=\"title | translate\"\n  ></c8y-breadcrumb-item>\n</c8y-breadcrumb>\n<c8y-action-bar-item\n  [placement]=\"'right'\"\n  *c8yIfAllowed=\"['ROLE_INVENTORY_ADMIN']\"\n  [priority]=\"1\"\n>\n  <button\n    class=\"btn btn-link\"\n    [title]=\"'Add data point' | translate\"\n    type=\"button\"\n    (click)=\"addDatapointEntry()\"\n    data-cy=\"c8y-datapoint-library-list--add-data-point\"\n  >\n    <i c8yIcon=\"plus-circle\"></i>\n    {{ 'Add data point' | translate }}\n  </button>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item\n  [placement]=\"'right'\"\n  [priority]=\"0\"\n>\n  <button\n    class=\"btn btn-link\"\n    [title]=\"'Reload' | translate\"\n    type=\"button\"\n    [disabled]=\"isLoading\"\n    (click)=\"reload()\"\n  >\n    <i\n      c8yIcon=\"refresh\"\n      [ngClass]=\"{ 'icon-spin': isLoading }\"\n    ></i>\n    {{ 'Reload' | translate }}\n  </button>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item\n  [placement]=\"'left'\"\n  itemClass=\"navbar-form hidden-xs\"\n>\n  <c8y-list-display-switch\n    (onListClassChange)=\"listClass = $event\"\n    [listLength]=\"(datapoints$ | async)?.data?.length\"\n  ></c8y-list-display-switch>\n</c8y-action-bar-item>\n\n<c8y-help src=\"/docs/cockpit/data-point-library/#data-point-library\"></c8y-help>\n\n<!-- empty state\n-->\n<c8y-ui-empty-state\n  [icon]=\"'c8y-data-points'\"\n  [title]=\"'No data points to display.' | translate\"\n  [subtitle]=\"'Add a data point using the button below.' | translate\"\n  *ngIf=\"(datapoints$ | async)?.data?.length === 0\"\n>\n  <p>\n    <button\n      class=\"btn btn-primary\"\n      [title]=\"'Add data point' | translate\"\n      type=\"button\"\n      (click)=\"addDatapointEntry()\"\n    >\n      <i c8yIcon=\"plus-circle\"></i>\n      {{ 'Add data point' | translate }}\n    </button>\n  </p>\n</c8y-ui-empty-state>\n\n<!-- loading indicator -->\n<div\n  class=\"d-flex j-c-center\"\n  *ngIf=\"isLoading\"\n>\n  <c8y-loading></c8y-loading>\n</div>\n\n<div\n  class=\"card-group\"\n  [ngClass]=\"listClass\"\n  *ngIf=\"!isLoading && (datapoints$ | async) as datapoints\"\n>\n  <div\n    class=\"page-sticky-header hidden-xs\"\n    *ngIf=\"datapoints.data.length\"\n  >\n    <div class=\"d-flex\">\n      <div class=\"card-header\">\n        <div class=\"card-icon\"></div>\n        <p translate>Label</p>\n      </div>\n      <div class=\"card-actions\"></div>\n      <div class=\"card-block p-l-0\">\n        <div class=\"col-sm-3 p-l-16\">\n          <p translate>Fragment</p>\n        </div>\n        <div class=\"col-sm-2\">\n          <p translate>Series</p>\n        </div>\n        <div class=\"col-sm-1\">\n          <span translate>Unit</span>\n        </div>\n        <div class=\"col-sm-2\">\n          <span translate>Target</span>\n        </div>\n        <div class=\"col-sm-4\">\n          <span translate>Range</span>\n        </div>\n      </div>\n    </div>\n  </div>\n  <div\n    class=\"col-sm-6 col-md-4 col-lg-3 col-xs-12\"\n    *c8yFor=\"let datapoint of datapoints; loadMore: 'hidden'; pipe: parsePipe\"\n  >\n    <div\n      class=\"card pointer\"\n      (click)=\"editDatapointEntry(datapoint)\"\n    >\n      <div\n        class=\"card-actions\"\n        (click)=\"$event.stopPropagation()\"\n      >\n        <div\n          class=\"dropdown settings pull-right\"\n          dropdown\n          #datapointOptionsDropdown=\"bs-dropdown\"\n          [cdkTrapFocus]=\"datapointOptionsDropdown.isOpen\"\n        >\n          <button\n            class=\"dropdown-toggle c8y-dropdown\"\n            [title]=\"'Actions' | translate\"\n            type=\"button\"\n            dropdownToggle\n          >\n            <i c8yIcon=\"ellipsis-v\"></i>\n          </button>\n          <ul\n            class=\"dropdown-menu\"\n            *dropdownMenu\n          >\n            <li>\n              <button\n                [title]=\"'Edit' | translate\"\n                type=\"button\"\n                (click)=\"editDatapointEntry(datapoint)\"\n              >\n                <i c8yIcon=\"pencil\"></i>\n                {{ 'Edit' | translate }}\n              </button>\n            </li>\n            <li>\n              <button\n                [title]=\"'Remove' | translate\"\n                type=\"button\"\n                (click)=\"removeDatapointEntry(datapoint)\"\n              >\n                <i c8yIcon=\"delete\"></i>\n                {{ 'Remove' | translate }}\n              </button>\n            </li>\n          </ul>\n        </div>\n      </div>\n\n      <div class=\"card-header separator\">\n        <div class=\"card-icon\">\n          <i\n            c8yIcon=\"circle\"\n            [style.color]=\"datapoint.c8y_Kpi?.color\"\n          ></i>\n        </div>\n        <div\n          class=\"card-title text-truncate\"\n          [title]=\"datapoint.c8y_Kpi?.label\"\n        >\n          {{ datapoint.c8y_Kpi?.label }}\n        </div>\n      </div>\n      <div class=\"card-block bg-level-1 p-b-24 card-hidden-list\">\n        <div class=\"col-sm-3 col-md-2\">\n          <c8y-range-display\n            [config]=\"datapoint.c8y_Kpi\"\n            [display]=\"'compact'\"\n          ></c8y-range-display>\n        </div>\n      </div>\n      <div class=\"card-block\">\n        <div class=\"col-sm-3 text-truncate\">\n          <span>\n            <label\n              class=\"text-label-small m-r-4\"\n              translate\n            >\n              Fragment\n            </label>\n            <span [title]=\"datapoint.c8y_Kpi?.fragment\">\n              {{ datapoint.c8y_Kpi?.fragment }}\n            </span>\n          </span>\n        </div>\n        <div class=\"col-sm-2 text-truncate\">\n          <label\n            class=\"text-label-small m-r-4\"\n            translate\n          >\n            Series\n          </label>\n          <span [title]=\"datapoint.c8y_Kpi?.series\">\n            {{ datapoint.c8y_Kpi?.series }}\n          </span>\n        </div>\n        <div class=\"col-sm-1 text-truncate card-hidden-grid\">\n          <span *ngIf=\"datapoint.c8y_Kpi?.unit\">\n            <label\n              class=\"text-label-small m-r-4\"\n              translate\n            >\n              Unit\n            </label>\n            <span [title]=\"datapoint.c8y_Kpi?.unit\">\n              {{ datapoint.c8y_Kpi?.unit }}\n            </span>\n          </span>\n        </div>\n        <div class=\"col-sm-2 text-truncate\">\n          <span *ngIf=\"datapoint.c8y_Kpi?.target\">\n            <label\n              class=\"text-label-small m-r-4\"\n              translate\n            >\n              Target\n            </label>\n            <span [title]=\"datapoint.c8y_Kpi?.target\">\n              {{ datapoint.c8y_Kpi?.target }}\n            </span>\n          </span>\n        </div>\n        <div class=\"col-sm-4 card-hidden-grid\">\n          <c8y-range-display\n            [config]=\"datapoint.c8y_Kpi\"\n            [display]=\"'inline'\"\n          ></c8y-range-display>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i6.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "ngmodule", type: CoreModule }, { kind: "component", type: i3.ActionBarItemComponent, selector: "c8y-action-bar-item", inputs: ["placement", "priority", "itemClass", "injector", "groupId", "inGroupPriority"] }, { kind: "component", type: i3.BreadcrumbComponent, selector: "c8y-breadcrumb" }, { kind: "component", type: i3.BreadcrumbItemComponent, selector: "c8y-breadcrumb-item", inputs: ["icon", "translate", "label", "path", "injector"] }, { kind: "component", type: i3.EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "directive", type: i3.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "pipe", type: i3.C8yTranslatePipe, name: "translate" }, { kind: "directive", type: i3.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i7.AsyncPipe, name: "async" }, { kind: "directive", type: i3.IfAllowedDirective, selector: "[c8yIfAllowed]", inputs: ["c8yIfAllowed", "c8yIfAllowedAllowAny"] }, { kind: "directive", type: i3.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: i3.LoadingComponent, selector: "c8y-loading", inputs: ["layout", "progress", "message"] }, { kind: "component", type: i3.TitleComponent, selector: "c8y-title", inputs: ["pageTitleUpdate"] }, { kind: "component", type: i3.HelpComponent, selector: "c8y-help", inputs: ["src", "isCollapsed", "priority", "icon"] }, { kind: "component", type: i3.RangeDisplayComponent, selector: "c8y-range-display", inputs: ["config", "display"] }, { kind: "component", type: i3.ListDisplaySwitchComponent, selector: "c8y-list-display-switch", inputs: ["listKey", "listLength", "filterPipe"], outputs: ["onListClassChange"] }, { kind: "ngmodule", type: BsDropdownModule }, { kind: "directive", type: i8.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i8.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i8.BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "ngmodule", type: RouterModule }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DatapointLibraryListComponent, decorators: [{
            type: Component,
            args: [{ selector: 'c8y-datapoint-library-list', standalone: true, imports: [A11yModule, CoreModule, BsDropdownModule, RouterModule], template: "<c8y-title>{{ title | translate }}</c8y-title>\n<c8y-breadcrumb>\n  <c8y-breadcrumb-item\n    [icon]=\"'c8y-tools'\"\n    [label]=\"'Configuration' | translate\"\n  ></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item\n    [icon]=\"'c8y-tools'\"\n    [label]=\"title | translate\"\n  ></c8y-breadcrumb-item>\n</c8y-breadcrumb>\n<c8y-action-bar-item\n  [placement]=\"'right'\"\n  *c8yIfAllowed=\"['ROLE_INVENTORY_ADMIN']\"\n  [priority]=\"1\"\n>\n  <button\n    class=\"btn btn-link\"\n    [title]=\"'Add data point' | translate\"\n    type=\"button\"\n    (click)=\"addDatapointEntry()\"\n    data-cy=\"c8y-datapoint-library-list--add-data-point\"\n  >\n    <i c8yIcon=\"plus-circle\"></i>\n    {{ 'Add data point' | translate }}\n  </button>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item\n  [placement]=\"'right'\"\n  [priority]=\"0\"\n>\n  <button\n    class=\"btn btn-link\"\n    [title]=\"'Reload' | translate\"\n    type=\"button\"\n    [disabled]=\"isLoading\"\n    (click)=\"reload()\"\n  >\n    <i\n      c8yIcon=\"refresh\"\n      [ngClass]=\"{ 'icon-spin': isLoading }\"\n    ></i>\n    {{ 'Reload' | translate }}\n  </button>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item\n  [placement]=\"'left'\"\n  itemClass=\"navbar-form hidden-xs\"\n>\n  <c8y-list-display-switch\n    (onListClassChange)=\"listClass = $event\"\n    [listLength]=\"(datapoints$ | async)?.data?.length\"\n  ></c8y-list-display-switch>\n</c8y-action-bar-item>\n\n<c8y-help src=\"/docs/cockpit/data-point-library/#data-point-library\"></c8y-help>\n\n<!-- empty state\n-->\n<c8y-ui-empty-state\n  [icon]=\"'c8y-data-points'\"\n  [title]=\"'No data points to display.' | translate\"\n  [subtitle]=\"'Add a data point using the button below.' | translate\"\n  *ngIf=\"(datapoints$ | async)?.data?.length === 0\"\n>\n  <p>\n    <button\n      class=\"btn btn-primary\"\n      [title]=\"'Add data point' | translate\"\n      type=\"button\"\n      (click)=\"addDatapointEntry()\"\n    >\n      <i c8yIcon=\"plus-circle\"></i>\n      {{ 'Add data point' | translate }}\n    </button>\n  </p>\n</c8y-ui-empty-state>\n\n<!-- loading indicator -->\n<div\n  class=\"d-flex j-c-center\"\n  *ngIf=\"isLoading\"\n>\n  <c8y-loading></c8y-loading>\n</div>\n\n<div\n  class=\"card-group\"\n  [ngClass]=\"listClass\"\n  *ngIf=\"!isLoading && (datapoints$ | async) as datapoints\"\n>\n  <div\n    class=\"page-sticky-header hidden-xs\"\n    *ngIf=\"datapoints.data.length\"\n  >\n    <div class=\"d-flex\">\n      <div class=\"card-header\">\n        <div class=\"card-icon\"></div>\n        <p translate>Label</p>\n      </div>\n      <div class=\"card-actions\"></div>\n      <div class=\"card-block p-l-0\">\n        <div class=\"col-sm-3 p-l-16\">\n          <p translate>Fragment</p>\n        </div>\n        <div class=\"col-sm-2\">\n          <p translate>Series</p>\n        </div>\n        <div class=\"col-sm-1\">\n          <span translate>Unit</span>\n        </div>\n        <div class=\"col-sm-2\">\n          <span translate>Target</span>\n        </div>\n        <div class=\"col-sm-4\">\n          <span translate>Range</span>\n        </div>\n      </div>\n    </div>\n  </div>\n  <div\n    class=\"col-sm-6 col-md-4 col-lg-3 col-xs-12\"\n    *c8yFor=\"let datapoint of datapoints; loadMore: 'hidden'; pipe: parsePipe\"\n  >\n    <div\n      class=\"card pointer\"\n      (click)=\"editDatapointEntry(datapoint)\"\n    >\n      <div\n        class=\"card-actions\"\n        (click)=\"$event.stopPropagation()\"\n      >\n        <div\n          class=\"dropdown settings pull-right\"\n          dropdown\n          #datapointOptionsDropdown=\"bs-dropdown\"\n          [cdkTrapFocus]=\"datapointOptionsDropdown.isOpen\"\n        >\n          <button\n            class=\"dropdown-toggle c8y-dropdown\"\n            [title]=\"'Actions' | translate\"\n            type=\"button\"\n            dropdownToggle\n          >\n            <i c8yIcon=\"ellipsis-v\"></i>\n          </button>\n          <ul\n            class=\"dropdown-menu\"\n            *dropdownMenu\n          >\n            <li>\n              <button\n                [title]=\"'Edit' | translate\"\n                type=\"button\"\n                (click)=\"editDatapointEntry(datapoint)\"\n              >\n                <i c8yIcon=\"pencil\"></i>\n                {{ 'Edit' | translate }}\n              </button>\n            </li>\n            <li>\n              <button\n                [title]=\"'Remove' | translate\"\n                type=\"button\"\n                (click)=\"removeDatapointEntry(datapoint)\"\n              >\n                <i c8yIcon=\"delete\"></i>\n                {{ 'Remove' | translate }}\n              </button>\n            </li>\n          </ul>\n        </div>\n      </div>\n\n      <div class=\"card-header separator\">\n        <div class=\"card-icon\">\n          <i\n            c8yIcon=\"circle\"\n            [style.color]=\"datapoint.c8y_Kpi?.color\"\n          ></i>\n        </div>\n        <div\n          class=\"card-title text-truncate\"\n          [title]=\"datapoint.c8y_Kpi?.label\"\n        >\n          {{ datapoint.c8y_Kpi?.label }}\n        </div>\n      </div>\n      <div class=\"card-block bg-level-1 p-b-24 card-hidden-list\">\n        <div class=\"col-sm-3 col-md-2\">\n          <c8y-range-display\n            [config]=\"datapoint.c8y_Kpi\"\n            [display]=\"'compact'\"\n          ></c8y-range-display>\n        </div>\n      </div>\n      <div class=\"card-block\">\n        <div class=\"col-sm-3 text-truncate\">\n          <span>\n            <label\n              class=\"text-label-small m-r-4\"\n              translate\n            >\n              Fragment\n            </label>\n            <span [title]=\"datapoint.c8y_Kpi?.fragment\">\n              {{ datapoint.c8y_Kpi?.fragment }}\n            </span>\n          </span>\n        </div>\n        <div class=\"col-sm-2 text-truncate\">\n          <label\n            class=\"text-label-small m-r-4\"\n            translate\n          >\n            Series\n          </label>\n          <span [title]=\"datapoint.c8y_Kpi?.series\">\n            {{ datapoint.c8y_Kpi?.series }}\n          </span>\n        </div>\n        <div class=\"col-sm-1 text-truncate card-hidden-grid\">\n          <span *ngIf=\"datapoint.c8y_Kpi?.unit\">\n            <label\n              class=\"text-label-small m-r-4\"\n              translate\n            >\n              Unit\n            </label>\n            <span [title]=\"datapoint.c8y_Kpi?.unit\">\n              {{ datapoint.c8y_Kpi?.unit }}\n            </span>\n          </span>\n        </div>\n        <div class=\"col-sm-2 text-truncate\">\n          <span *ngIf=\"datapoint.c8y_Kpi?.target\">\n            <label\n              class=\"text-label-small m-r-4\"\n              translate\n            >\n              Target\n            </label>\n            <span [title]=\"datapoint.c8y_Kpi?.target\">\n              {{ datapoint.c8y_Kpi?.target }}\n            </span>\n          </span>\n        </div>\n        <div class=\"col-sm-4 card-hidden-grid\">\n          <c8y-range-display\n            [config]=\"datapoint.c8y_Kpi\"\n            [display]=\"'inline'\"\n          ></c8y-range-display>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n" }]
        }], ctorParameters: () => [{ type: i1.InventoryService }, { type: i2.Router }, { type: i3.ModalService }, { type: i4.TranslateService }, { type: i3.AlertService }, { type: i5.DatapointParserService }] });

/**
 * Generated bundle index. Do not edit.
 */

export { DatapointLibraryListComponent };
//# sourceMappingURL=c8y-ngx-components-datapoint-library-list.mjs.map