File
Implements
Methods
|
addBulkOperation
|
addBulkOperation()
|
|
|
|
compareOperations
|
compareOperations(operationA: IOperationBulk, operationB: IOperationBulk)
|
Parameters :
| Name |
Type |
Optional |
| operationA |
IOperationBulk
|
No
|
| operationB |
IOperationBulk
|
No
|
|
|
filter
|
filter(statusFilters, timeFilter)
|
Parameters :
| Name |
Optional |
| statusFilters |
No
|
| timeFilter |
No
|
|
|
filterByType
|
filterByType(bulkOperations: IOperationBulk[], typeFilter)
|
Parameters :
| Name |
Type |
Optional |
| bulkOperations |
IOperationBulk[]
|
No
|
| typeFilter |
|
No
|
|
|
getBulkOperations
|
getBulkOperations(filter?)
|
|
|
|
getTypeFilters
|
getTypeFilters()
|
|
|
|
isFilterApplied
|
isFilterApplied()
|
|
|
|
openFailedOperation
|
openFailedOperation(failedParentId)
|
Parameters :
| Name |
Optional |
| failedParentId |
No
|
|
|
resetFilter
|
resetFilter()
|
|
|
|
bulkOperations$
|
Type : Observable<IResultList<IOperationBulk>>
|
Default value : combineLatest(
this.statusFilter$,
this.timeFilter$,
this.typeFilter$,
this.reload$
).pipe(
tap(() => {
this.refreshLoading = true;
}),
switchMap(([statusFilters, timeFilters]) => this.filter(statusFilters, timeFilters)),
withLatestFrom(this.typeFilter$),
map(([result, typeFilter]: [IResultList<IOperationBulk>, OperationType[]]) => {
this.filterPipe = pipe(map((data: []) => this.filterByType(data, typeFilter)));
return { ...result, data: this.filterByType(result.data, typeFilter) };
}),
tap(() => {
this.refreshLoading = false;
}),
shareReplay(1)
)
|
|
datePicker
|
Type : DatePickerComponent
|
Decorators :
@ViewChild(DatePickerComponent, {static: true})
|
|
refreshLoading
|
Type : boolean
|
Default value : false
|
|
reload$
|
Type : BehaviorSubject<void>
|
Default value : new BehaviorSubject(null)
|
|
selectedTypeFilters
|
Default value : this.getTypeFilters()
|
|
timeFilter$
|
Type : BehaviorSubject<any>
|
Default value : new BehaviorSubject(null)
|
<c8y-title> {{ 'Device control' | translate }}</c8y-title>
<c8y-action-bar-item *ngIf="bulkTypes?.length" itemClass="navbar-form" [placement]="'left'">
<label translate class="hidden-sm">Type</label>
<c8y-select
style="width: 180px"
[items]="bulkTypes"
[selected]="selectedTypeFilters"
[disableApplyOnNoSelection]="true"
(onChange)="selectedTypeFilters = $event; typeFilter$.next(selectedTypeFilters)"
>
</c8y-select>
</c8y-action-bar-item>
<c8y-action-bar-item [placement]="'left'" itemClass="navbar-form">
<c8y-status-filter
#statusFilter
[options]="bulkOperationStatusOptions"
(onFilterChanged)="statusFilter$.next($event)"
></c8y-status-filter>
</c8y-action-bar-item>
<c8y-action-bar-item [placement]="'left'" itemClass="navbar-form">
<c8y-date-picker (onDateSelected)="timeFilter$.next($event)"></c8y-date-picker>
</c8y-action-bar-item>
<c8y-action-bar-item [placement]="'right'">
<c8y-realtime-btn [service]="realtime"></c8y-realtime-btn>
</c8y-action-bar-item>
<c8y-action-bar-item [placement]="'right'">
<button
*ngIf="bulkTypes?.length"
class="btn btn-link d-flex a-i-center"
(click)="addBulkOperation()"
title="{{ 'Add bulk operation' | translate }}"
>
<i c8yIcon="plus-circle" class="m-r-4"></i>
<span class="text-truncate">
{{ 'Add bulk operation' | translate }}
</span>
</button>
</c8y-action-bar-item>
<c8y-action-bar-item [placement]="'right'">
<button
class="btn btn-link d-flex a-i-center"
title="{{ 'Reload' | translate }}"
(click)="reload$.next()"
>
<i c8yIcon="refresh" [ngClass]="{ 'icon-spin': refreshLoading }" class="m-r-4"></i>
<span class="text-truncate">
{{ 'Reload' | translate }}
</span>
</button>
</c8y-action-bar-item>
<!-- Empty state -->
<c8y-ui-empty-state
*ngIf="(bulkOperations$ | async)?.data.length === 0 && !isFilterApplied()"
icon="c8y-energy"
[title]="'No items to display' | translate"
[subtitle]="'Bulk operations will be displayed here' | translate"
>
<button
type="button"
*ngIf="bulkTypes?.length"
title="{{ 'Add bulk operation' | translate }}"
class="btn btn-primary"
(click)="addBulkOperation()"
translate
>
Add bulk operation
</button>
</c8y-ui-empty-state>
<!-- No results empty state -->
<c8y-ui-empty-state
*ngIf="(bulkOperations$ | async)?.data.length === 0 && isFilterApplied()"
icon="search"
[title]="'No results to display.' | translate"
[subtitle]="'Adjust or reset the filter.' | translate"
>
<button
type="button"
title="{{ 'Reset filter' | translate }}"
class="btn btn-primary"
(click)="resetFilter()"
translate
>
Reset filter
</button>
</c8y-ui-empty-state>
<!-- Detailed list of operations + load more button -->
<c8y-list-group
class="m-b-24"
[ngClass]="{ 'dd-low': (bulkOperations$ | async)?.data.length < 10 }"
>
<div
class="page-sticky-header hidden-xs c8y-list__item--double-actions c8y-list__item"
*ngIf="(bulkOperations$ | async)?.data.length"
>
<div class="c8y-list__item__block">
<div class="c8y-list__item__icon">
<i class="p-l-32 p-r-40"></i>
</div>
<div class="c8y-list__item__body">
<div class="content-flex-57">
<div class="col-5">
{{ 'Operation' | translate }}
</div>
<div class="flex-grow">
{{ 'Progress' | translate }}
</div>
<div class="col-4">
{{ 'Status' | translate }}
</div>
</div>
</div>
<div class="c8y-list__item__actions"></div>
</div>
</div>
<div
class="d-contents"
*c8yFor="
let bulkOperation of bulkOperations$ | async;
let i = index;
realtime: realtime;
pipe: filterPipe;
comparator: compareOperations.bind(this);
loadMore: 'auto'
"
>
<c8y-bulk-operation-list-item
[bulkOperation]="bulkOperation"
(reload)="reload$.next()"
(showFailedOperation)="openFailedOperation($event)"
class="d-contents"
>
</c8y-bulk-operation-list-item>
</div>
</c8y-list-group>