repository/software-device-tab/device-software-changes.component.ts
| selector | c8y-device-software-changes |
| templateUrl | device-software-changes.component.html |
Properties |
Methods |
Inputs |
Outputs |
changes
|
Type : |
changesInProgress
|
Type : |
apply
|
$event Type: EventEmitter<void>
|
clear
|
$event Type: EventEmitter<void>
|
drop
|
$event Type: EventEmitter<DeviceSoftwareChange>
|
| ngOnChanges | ||||||
ngOnChanges(changes: SimpleChanges)
|
||||||
|
Parameters :
Returns :
void
|
| changes$ |
changes$:
|
Default value : new BehaviorSubject<DeviceSoftwareChange[]>([])
|
| installations$ |
installations$:
|
Default value : this.changes$.pipe(
map(changes => {
return changes.filter(change => change.action === 'install');
})
)
|
| removals$ |
removals$:
|
Default value : this.changes$.pipe(
map(changes => {
return changes.filter(change => change.action === 'delete');
})
)
|
<div class="inner-scroll d-flex d-col">
<div class="card-header separator large-padding sticky-top">
<h4 class="card-title" translate>Software changes</h4>
</div>
<div class="flex-grow">
<div class="card-block large-padding"
*ngIf="(changes$ | async).length === 0; else changesList"
>
<div class="c8y-empty-state text-center">
<h1 class="c8y-icon c8y-icon-device-control c8y-icon-duocolor"></h1>
<p>
<strong translate>No software changes.</strong> <br />
<small translate>Selected actions will be displayed here.</small>
</p>
</div>
</div>
<ng-template #changesList>
<fieldset class="card-block p-t-0 p-b-0"
*ngIf="(installations$ | async).length > 0"
[disabled]="changesInProgress"
>
<div class="form-block legend" translate>Installations`software`</div>
<c8y-device-software-list
[softwareList]="installations$ | async"
(remove)="drop.emit($event)"
></c8y-device-software-list>
</fieldset>
<fieldset class="card-block p-t-0 p-b-0"
*ngIf="(removals$ | async).length > 0"
[disabled]="changesInProgress"
>
<div class="form-block legend" translate>Removals`software`</div>
<c8y-device-software-list
[softwareList]="removals$ | async"
(remove)="drop.emit($event)"
></c8y-device-software-list>
</fieldset>
</ng-template>
</div>
<div
class="card-footer separator large-padding sticky-bottom"
*ngIf="(changes$ | async).length > 0"
>
<button
class="btn btn-default"
(click)="clear.emit()"
title="{{ 'Clear changes' | translate }}"
[disabled]="changesInProgress"
translate
>
Clear`changes`
</button>
<button
class="btn btn-primary"
[ngClass]="{ 'btn-pending': changesInProgress }"
[disabled]="changesInProgress"
(click)="apply.emit()"
title="{{ 'Apply changes' | translate }}"
translate
>
Apply changes
</button>
</div>
</div>