@c8y/ngx-components/fesm2022/c8y-ngx-components-widgets-implementations-asset-notes.mjs

Angular modules for Cumulocity IoT applications

import * as i2 from '@angular/common';
import { CommonModule as CommonModule$1 } from '@angular/common';
import * as i0 from '@angular/core';
import { inject, input, signal, computed, Component } from '@angular/core';
import * as i3 from '@angular/forms';
import { FormsModule } from '@angular/forms';
import { InventoryService } from '@c8y/client';
import { gettext } from '@c8y/ngx-components/gettext';
import * as i1 from '@c8y/ngx-components';
import { AppStateService, AlertService, DatePipe, CommonModule, CoreModule, FormsModule as FormsModule$1 } from '@c8y/ngx-components';

class AssetNotesWidgetComponent {
    constructor() {
        this.inventory = inject(InventoryService);
        this.appState = inject(AppStateService);
        this.alertService = inject(AlertService);
        this.datePipe = inject(DatePipe);
        this.config = input(...(ngDevMode ? [undefined, { debugName: "config" }] : []));
        this.notes = signal(null, ...(ngDevMode ? [{ debugName: "notes" }] : []));
        this.editable = signal(false, ...(ngDevMode ? [{ debugName: "editable" }] : []));
        this.isLoading = computed(() => this.notes()?.htmlContent === undefined, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
        this.FRAGMENT = 'c8y_ComponentConfig!assetNotes';
        this.ngNonBindableTranslate = computed(() => ({
            lastUpdated: this.datePipe.transform(this.notes()?.lastUpdated),
            user: this.notes()?.user
        }), ...(ngDevMode ? [{ debugName: "ngNonBindableTranslate" }] : []));
    }
    async ngOnInit() {
        await this.loadNotes();
    }
    toggleEdit() {
        this.editable.set(!this.editable());
    }
    async save() {
        try {
            const updatedNotes = {
                ...this.notes(),
                user: this.appState.currentUser.value.id,
                lastUpdated: new Date().toISOString()
            };
            await this.inventory.update({
                id: this.config().device.id,
                [this.FRAGMENT]: updatedNotes
            });
            this.notes.set(updatedNotes);
            this.editable.set(false);
            this.alertService.success(gettext('Notes saved.'));
        }
        catch (error) {
            this.alertService.addServerFailure(error);
        }
    }
    async loadNotes() {
        try {
            const device = await this.inventory.detail(this.config().device.id);
            this.notes.set(device.data[this.FRAGMENT] || { htmlContent: '' });
        }
        catch (error) {
            this.alertService.addServerFailure(error);
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AssetNotesWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: AssetNotesWidgetComponent, isStandalone: true, selector: "c8y-asset-notes", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"fit-h d-flex flex-wrap a-i-stretch\">\n  <i\n    class=\"c8y-icon c8y-icon-duocolor asset-notes-icon\"\n    [c8yIcon]=\"'c8y-notification'\"\n  ></i>\n\n  @if (!editable()) {\n    <div class=\"asset-notes-content\">\n      <c8y-loading *ngIf=\"isLoading()\"></c8y-loading>\n      <div class=\"text-break-word asset-notes-body\">\n        @if (notes()?.htmlContent && !isLoading()) {\n          <span\n            class=\"markdown-content d-inline-block\"\n            [innerHTML]=\"notes()?.htmlContent | markdownToHtml | async\"\n          ></span>\n        } @else if (!notes()?.htmlContent) {\n          <span>\n            {{ 'No notes yet.' | translate }}\n          </span>\n        }\n\n        <button\n          class=\"btn btn-link btn-sm\"\n          title=\"{{ 'Edit' | translate }}\"\n          type=\"button\"\n          (click)=\"toggleEdit()\"\n        >\n          <i c8yIcon=\"pencil\"></i>\n          {{ 'Edit' | translate }}\n        </button>\n      </div>\n    </div>\n    <div class=\"asset-notes-footer m-t-8\">\n      <small class=\"text-muted\">\n        <em\n          *ngIf=\"notes()?.lastUpdated\"\n          ngNonBindable\n          translate\n          [translateParams]=\"ngNonBindableTranslate()\"\n        >\n          {{ lastUpdated }} by {{ user }}\n        </em>\n      </small>\n    </div>\n  } @else {\n    <div class=\"fit-h flex-grow\">\n      <div class=\"d-flex a-i-stretch fit-h\">\n        <textarea\n          class=\"form-control fit-h text-monospace\"\n          [attr.aria-label]=\"'Notes' | translate\"\n          rows=\"5\"\n          [(ngModel)]=\"notes().htmlContent\"\n          c8y-code-editor\n        ></textarea>\n        <div class=\"input-group-btn a-s-center\">\n          <button\n            class=\"btn btn-dot\"\n            title=\"{{ 'Save' | translate }}\"\n            type=\"button\"\n            (click)=\"save()\"\n          >\n            <i c8yIcon=\"check\"></i>\n          </button>\n        </div>\n        <div class=\"input-group-btn a-s-center\">\n          <button\n            class=\"btn btn-dot\"\n            title=\"{{ 'Cancel' | translate }}\"\n            type=\"button\"\n            (click)=\"toggleEdit()\"\n          >\n            <i c8yIcon=\"times\"></i>\n          </button>\n        </div>\n      </div>\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i1.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1.LoadingComponent, selector: "c8y-loading", inputs: ["layout", "progress", "message"] }, { kind: "ngmodule", type: CommonModule$1 }, { kind: "ngmodule", type: CoreModule }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: FormsModule$1 }, { kind: "pipe", type: i1.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.MarkdownToHtmlPipe, name: "markdownToHtml" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AssetNotesWidgetComponent, decorators: [{
            type: Component,
            args: [{ selector: 'c8y-asset-notes', standalone: true, imports: [CommonModule, CommonModule$1, CoreModule, FormsModule, FormsModule$1, DatePipe], template: "<div class=\"fit-h d-flex flex-wrap a-i-stretch\">\n  <i\n    class=\"c8y-icon c8y-icon-duocolor asset-notes-icon\"\n    [c8yIcon]=\"'c8y-notification'\"\n  ></i>\n\n  @if (!editable()) {\n    <div class=\"asset-notes-content\">\n      <c8y-loading *ngIf=\"isLoading()\"></c8y-loading>\n      <div class=\"text-break-word asset-notes-body\">\n        @if (notes()?.htmlContent && !isLoading()) {\n          <span\n            class=\"markdown-content d-inline-block\"\n            [innerHTML]=\"notes()?.htmlContent | markdownToHtml | async\"\n          ></span>\n        } @else if (!notes()?.htmlContent) {\n          <span>\n            {{ 'No notes yet.' | translate }}\n          </span>\n        }\n\n        <button\n          class=\"btn btn-link btn-sm\"\n          title=\"{{ 'Edit' | translate }}\"\n          type=\"button\"\n          (click)=\"toggleEdit()\"\n        >\n          <i c8yIcon=\"pencil\"></i>\n          {{ 'Edit' | translate }}\n        </button>\n      </div>\n    </div>\n    <div class=\"asset-notes-footer m-t-8\">\n      <small class=\"text-muted\">\n        <em\n          *ngIf=\"notes()?.lastUpdated\"\n          ngNonBindable\n          translate\n          [translateParams]=\"ngNonBindableTranslate()\"\n        >\n          {{ lastUpdated }} by {{ user }}\n        </em>\n      </small>\n    </div>\n  } @else {\n    <div class=\"fit-h flex-grow\">\n      <div class=\"d-flex a-i-stretch fit-h\">\n        <textarea\n          class=\"form-control fit-h text-monospace\"\n          [attr.aria-label]=\"'Notes' | translate\"\n          rows=\"5\"\n          [(ngModel)]=\"notes().htmlContent\"\n          c8y-code-editor\n        ></textarea>\n        <div class=\"input-group-btn a-s-center\">\n          <button\n            class=\"btn btn-dot\"\n            title=\"{{ 'Save' | translate }}\"\n            type=\"button\"\n            (click)=\"save()\"\n          >\n            <i c8yIcon=\"check\"></i>\n          </button>\n        </div>\n        <div class=\"input-group-btn a-s-center\">\n          <button\n            class=\"btn btn-dot\"\n            title=\"{{ 'Cancel' | translate }}\"\n            type=\"button\"\n            (click)=\"toggleEdit()\"\n          >\n            <i c8yIcon=\"times\"></i>\n          </button>\n        </div>\n      </div>\n    </div>\n  }\n</div>\n" }]
        }], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }] } });

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

export { AssetNotesWidgetComponent };
//# sourceMappingURL=c8y-ngx-components-widgets-implementations-asset-notes.mjs.map