@c8y/ngx-components
Version:
Angular modules for Cumulocity IoT applications
118 lines (115 loc) • 13.5 kB
JavaScript
import * as i0 from '@angular/core';
import { Component } from '@angular/core';
import * as i2$1 from '@c8y/ngx-components';
import { gettext, C8yTranslatePipe, CoreModule } from '@c8y/ngx-components';
import * as i2 from '@ngx-translate/core';
import { cloneDeep } from 'lodash-es';
import { ContextDashboardService, DashboardDetailService } from './c8y-ngx-components-context-dashboard.mjs';
import * as i3 from '@angular/common';
class DashboardVersionHistoryComponent {
constructor(translateService, contextDashboardService, dashboardDetailService) {
this.translateService = translateService;
this.contextDashboardService = contextDashboardService;
this.dashboardDetailService = dashboardDetailService;
this.dashboardHistory = [];
this.dashboardHistoryExtended = [];
this.restoredDashboardMessage = gettext('Restored dashboard state from {{ restoredStateCreationDate }}');
this.versionHistoryLimitMessage = gettext('Store up to {{ versionHistoryLimit }} dashboard versions. Any additional versions will replace/delete older ones');
}
ngOnInit() {
this.isReport = this.dashboardDetailService.details.isReport;
this.dashboardHistory = this.dashboardDetailService.details.mo.c8y_DashboardHistory;
this.generateDashboardHistoryDescription();
}
generateDashboardHistoryDescription() {
for (const dashboard of this.dashboardHistory) {
const copiedDashboard = { ...dashboard };
let settingChangesMessage = '';
let assetModelMessage = '';
let widgetChanges = '';
if (dashboard.historyDescription.changeType === 'create') {
copiedDashboard.descriptionText = this.translateService.instant(this.isReport ? gettext('Report created.') : gettext('Dashboard created.'));
this.dashboardHistoryExtended.push(copiedDashboard);
continue;
}
if (dashboard.historyDescription.changeType === 'reset') {
copiedDashboard.descriptionText = this.translateService.instant(gettext('Reset widgets'));
this.dashboardHistoryExtended.push(copiedDashboard);
continue;
}
const isDashboardUpdated = dashboard.historyDescription.dashboardSettingChanges?.length > 0;
if (isDashboardUpdated) {
const translatedValuesChanged = dashboard.historyDescription.dashboardSettingChanges
.map(val => this.translateService.instant(val))
.join(', ');
settingChangesMessage = this.translateService.instant(this.isReport
? gettext('Report updated: {{ values }}.')
: gettext('Dashboard updated: {{ values }}.'), { values: translatedValuesChanged });
}
const isDeviceDashboard = dashboard.historyDescription.deviceType != null && !this.isReport;
if (isDeviceDashboard) {
assetModelMessage = this.translateService.instant(dashboard.historyDescription.deviceType
? gettext('Dashboard asset model has been enabled.')
: gettext('Dashboard asset model has been disabled.'));
}
if (dashboard.historyDescription.widgetChanges) {
for (const change in dashboard.historyDescription.widgetChanges) {
const widgetList = dashboard.historyDescription.widgetChanges[change];
if (!widgetList) {
continue;
}
const translatedWidgetList = dashboard.translateWidgetTitle
? widgetList.map(widget => this.translateService.instant(widget))
: widgetList;
switch (change) {
case 'added':
widgetChanges =
widgetChanges +
this.translateService.instant(gettext('Added widgets: {{ widgetList }}. '), {
widgetList: `"${translatedWidgetList.join('", "')}"`
});
break;
case 'removed':
widgetChanges =
widgetChanges +
this.translateService.instant(gettext('Removed widgets: {{ widgetList }}. '), {
widgetList: `"${translatedWidgetList.join('", "')}"`
});
break;
case 'config':
widgetChanges =
widgetChanges +
this.translateService.instant(gettext('Updated widgets: {{ widgetList }}. '), {
widgetList: `"${translatedWidgetList.join('", "')}"`
});
break;
case 'arrangement':
widgetChanges =
widgetChanges +
this.translateService.instant(gettext('Rearranged widgets: {{ widgetList }}. '), {
widgetList: `"${translatedWidgetList.join('", "')}"`
});
break;
default:
break;
}
}
}
copiedDashboard.descriptionText = `${settingChangesMessage} ${assetModelMessage} ${widgetChanges}`;
this.dashboardHistoryExtended.push(copiedDashboard);
}
}
revertDashboard(dashboard) {
const newDashboard = cloneDeep(dashboard);
newDashboard.historyDescription.restored = dashboard.created;
this.dashboardDetailService.revertToDashboardFn(newDashboard);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DashboardVersionHistoryComponent, deps: [{ token: i2.TranslateService }, { token: ContextDashboardService }, { token: DashboardDetailService }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: DashboardVersionHistoryComponent, isStandalone: true, selector: "c8y-dashboard-version-history", ngImport: i0, template: "<div class=\"bg-component p-t-8 p-b-8 separator-bottom text-center\">\n <i\n class=\"text-info m-r-4\"\n c8yIcon=\"info\"\n ></i>\n {{\n versionHistoryLimitMessage\n | translate: { versionHistoryLimit: contextDashboardService.VERSION_HISTORY_SIZE_LIMIT }\n }}\n</div>\n<c8y-list-group class=\"p-t-24 p-b-24\">\n <c8y-li-timeline\n *ngFor=\"let dashboard of dashboardHistoryExtended; index as i\"\n [ngClass]=\"{ active: i === 0 }\"\n >\n {{ dashboard.created | date: 'mediumDate' }}\n {{ dashboard.created | date: 'shortTime' }}\n <c8y-li data-cy=\"c8y-dashboard-version-history--history-row\">\n <c8y-li-body>\n <div class=\"d-flex a-i-start\">\n <div class=\"flex-grow\">\n <span\n class=\"text-truncate-wrap\"\n title=\"{{ dashboard.descriptionText }}\"\n data-cy=\"c8y-dashboard-version-history--history-title\"\n >\n {{ dashboard.descriptionText }}\n {{\n dashboard.historyDescription.restored\n ? (restoredDashboardMessage\n | translate\n : {\n restoredStateCreationDate: dashboard.historyDescription.restored | c8yDate\n })\n : ''\n }}\n </span>\n <small\n class=\"text-muted\"\n title=\"{{ 'by`user`' | translate }} {{ dashboard.author }}\"\n *ngIf=\"dashboard.author\"\n >\n <div class=\"icon-flex\">\n <i c8yIcon=\"c8y-user\"></i>\n {{ dashboard.author }}\n </div>\n </small>\n </div>\n\n <span\n class=\"label label-primary m-l-auto\"\n title=\"{{ 'The last saved status of the dashboard' | translate }}\"\n *ngIf=\"i === 0\"\n >\n {{ 'Current`dashboard status`' | translate }}\n </span>\n <span\n class=\"m-l-auto showOnHover\"\n *ngIf=\"dashboardHistoryExtended.length > 1 && i > 0\"\n >\n <button\n class=\"btn btn-default btn-sm\"\n title=\"{{ 'Restore the dashboard to this status' | translate }}\"\n type=\"button\"\n (click)=\"revertDashboard(dashboard)\"\n >\n {{ 'Restore' | translate }}\n </button>\n </span>\n </div>\n </c8y-li-body>\n </c8y-li>\n </c8y-li-timeline>\n</c8y-list-group>\n", dependencies: [{ kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "ngmodule", type: CoreModule }, { kind: "directive", type: i2$1.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i3.DatePipe, name: "date" }, { kind: "pipe", type: i2$1.DatePipe, name: "c8yDate" }, { kind: "component", type: i2$1.ListGroupComponent, selector: "c8y-list-group" }, { kind: "component", type: i2$1.ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: i2$1.ListItemBodyComponent, selector: "c8y-list-item-body, c8y-li-body", inputs: ["body"] }, { kind: "component", type: i2$1.ListItemTimelineComponent, selector: "c8y-list-item-timeline, c8y-li-timeline" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DashboardVersionHistoryComponent, decorators: [{
type: Component,
args: [{ selector: 'c8y-dashboard-version-history', standalone: true, imports: [C8yTranslatePipe, CoreModule], template: "<div class=\"bg-component p-t-8 p-b-8 separator-bottom text-center\">\n <i\n class=\"text-info m-r-4\"\n c8yIcon=\"info\"\n ></i>\n {{\n versionHistoryLimitMessage\n | translate: { versionHistoryLimit: contextDashboardService.VERSION_HISTORY_SIZE_LIMIT }\n }}\n</div>\n<c8y-list-group class=\"p-t-24 p-b-24\">\n <c8y-li-timeline\n *ngFor=\"let dashboard of dashboardHistoryExtended; index as i\"\n [ngClass]=\"{ active: i === 0 }\"\n >\n {{ dashboard.created | date: 'mediumDate' }}\n {{ dashboard.created | date: 'shortTime' }}\n <c8y-li data-cy=\"c8y-dashboard-version-history--history-row\">\n <c8y-li-body>\n <div class=\"d-flex a-i-start\">\n <div class=\"flex-grow\">\n <span\n class=\"text-truncate-wrap\"\n title=\"{{ dashboard.descriptionText }}\"\n data-cy=\"c8y-dashboard-version-history--history-title\"\n >\n {{ dashboard.descriptionText }}\n {{\n dashboard.historyDescription.restored\n ? (restoredDashboardMessage\n | translate\n : {\n restoredStateCreationDate: dashboard.historyDescription.restored | c8yDate\n })\n : ''\n }}\n </span>\n <small\n class=\"text-muted\"\n title=\"{{ 'by`user`' | translate }} {{ dashboard.author }}\"\n *ngIf=\"dashboard.author\"\n >\n <div class=\"icon-flex\">\n <i c8yIcon=\"c8y-user\"></i>\n {{ dashboard.author }}\n </div>\n </small>\n </div>\n\n <span\n class=\"label label-primary m-l-auto\"\n title=\"{{ 'The last saved status of the dashboard' | translate }}\"\n *ngIf=\"i === 0\"\n >\n {{ 'Current`dashboard status`' | translate }}\n </span>\n <span\n class=\"m-l-auto showOnHover\"\n *ngIf=\"dashboardHistoryExtended.length > 1 && i > 0\"\n >\n <button\n class=\"btn btn-default btn-sm\"\n title=\"{{ 'Restore the dashboard to this status' | translate }}\"\n type=\"button\"\n (click)=\"revertDashboard(dashboard)\"\n >\n {{ 'Restore' | translate }}\n </button>\n </span>\n </div>\n </c8y-li-body>\n </c8y-li>\n </c8y-li-timeline>\n</c8y-list-group>\n" }]
}], ctorParameters: () => [{ type: i2.TranslateService }, { type: ContextDashboardService }, { type: DashboardDetailService }] });
export { DashboardVersionHistoryComponent };
//# sourceMappingURL=c8y-ngx-components-context-dashboard-dashboard-version-history.component-DmPIJGXO.mjs.map