widgets/implementations/asset-notes/asset-notes-widget.component.ts
OnInit
selector | c8y-asset-notes |
standalone | true |
imports |
CommonModule
NgCommonModule
CoreModule
NgFormsModule
FormsModule
DatePipe
|
templateUrl | ./asset-notes-widget.component.html |
Properties |
Methods |
|
Inputs |
config |
Type : InputSignal<literal type>
|
Async ngOnInit |
ngOnInit()
|
Returns :
any
|
Async save |
save()
|
Returns :
any
|
toggleEdit |
toggleEdit()
|
Returns :
void
|
config |
Type : InputSignal<literal type>
|
editable |
Default value : signal(false)
|
isLoading |
Default value : computed(() => this.notes()?.htmlContent === undefined)
|
ngNonBindableTranslate |
Default value : computed(() => ({
lastUpdated: this.datePipe.transform(this.notes()?.lastUpdated),
user: this.notes()?.user
}))
|
notes |
Default value : signal<AssetNotes | null>(null)
|
<div class="fit-h d-flex flex-wrap a-i-stretch">
<i
class="c8y-icon c8y-icon-duocolor asset-notes-icon"
[c8yIcon]="'c8y-notification'"
></i>
@if (!editable()) {
<div class="asset-notes-content">
<c8y-loading *ngIf="isLoading()"></c8y-loading>
<div class="text-break-word asset-notes-body">
@if (notes()?.htmlContent && !isLoading()) {
<span
class="markdown-content d-inline-block"
[innerHTML]="notes()?.htmlContent | markdownToHtml | async"
></span>
} @else if (!notes()?.htmlContent) {
<span>
{{ 'No notes yet.' | translate }}
</span>
}
<button
class="btn btn-link btn-sm"
title="{{ 'Edit' | translate }}"
type="button"
(click)="toggleEdit()"
>
<i c8yIcon="pencil"></i>
{{ 'Edit' | translate }}
</button>
</div>
</div>
<div class="asset-notes-footer m-t-8">
<small class="text-muted">
<em
*ngIf="notes()?.lastUpdated"
ngNonBindable
translate
[translateParams]="ngNonBindableTranslate()"
>
{{ lastUpdated }} by {{ user }}
</em>
</small>
</div>
} @else {
<div class="fit-h flex-grow">
<div class="d-flex a-i-stretch fit-h">
<textarea
class="form-control fit-h text-monospace"
[attr.aria-label]="'Notes' | translate"
rows="5"
[(ngModel)]="notes().htmlContent"
c8y-code-editor
></textarea>
<div class="input-group-btn a-s-center">
<button
class="btn btn-dot"
title="{{ 'Save' | translate }}"
type="button"
(click)="save()"
>
<i c8yIcon="check"></i>
</button>
</div>
<div class="input-group-btn a-s-center">
<button
class="btn btn-dot"
title="{{ 'Cancel' | translate }}"
type="button"
(click)="toggleEdit()"
>
<i c8yIcon="times"></i>
</button>
</div>
</div>
</div>
}
</div>