Web SDK documentation
  1. Components
  2. BulkOperationsListComponent

File

operations/bulk-operations-list/bulk-operations-list.component.ts

Implements

OnInit

Metadata

providers OperationBulkRealtimeService
selector c8y-bulk-operations
templateUrl ./bulk-operations-list.component.html

Index

Properties
Methods

Constructor

constructor(realtime: OperationBulkRealtimeService, bulkOperationsService: BulkOperationsService, bulkOperationModalsService: BulkOperationModalsService)
Parameters :
Name Type Optional
realtime OperationBulkRealtimeService No
bulkOperationsService BulkOperationsService No
bulkOperationModalsService BulkOperationModalsService No

Methods

addBulkOperation
addBulkOperation()
Returns : void
compareOperations
compareOperations(operationA: IOperationBulk, operationB: IOperationBulk)
Parameters :
Name Type Optional
operationA IOperationBulk No
operationB IOperationBulk No
Returns : number
filter
filter(statusFilters, timeFilter)
Parameters :
Name Optional
statusFilters No
timeFilter No
Returns : any
filterByType
filterByType(bulkOperations: IOperationBulk[], typeFilter)
Parameters :
Name Type Optional
bulkOperations IOperationBulk[] No
typeFilter No
Returns : any
getBulkOperations
getBulkOperations(filter?)
Parameters :
Name Optional
filter Yes
Returns : any
getTypeFilters
getTypeFilters()
Returns : any
isFilterApplied
isFilterApplied()
Returns : boolean
ngOnInit
ngOnInit()
Returns : void
openFailedOperation
openFailedOperation(failedParentId)
Parameters :
Name Optional
failedParentId No
Returns : void
resetFilter
resetFilter()
Returns : void

Properties

BULK_OPERATION_EVENT
Default value : BULK_OPERATION_EVENT
bulkActions
Default value : ACTIONS_OPERATIONS_BULK
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) )
bulkOperationStatusOptions
Type : OperationStatusOptionsMap
Default value : BULK_OPERATION_STATUS_OPTIONS
bulkTypes
Type : OperationType[]
Default value : []
datePicker
Type : DatePickerComponent
Decorators :
@ViewChild(DatePickerComponent, {static: true})
filterPipe
Type : ForOfFilterPipe<IOperationBulk>
listItems
Type : QueryList<BulkOperationListItemComponent>
Decorators :
@ViewChildren(BulkOperationListItemComponent)
Public realtime
Type : OperationBulkRealtimeService
refreshLoading
Default value : false
reload$
Type : BehaviorSubject<void>
Default value : new BehaviorSubject(null)
selectedTypeFilters
Default value : this.getTypeFilters()
statusFilter
Type : StatusFilterComponent
Decorators :
@ViewChild('statusFilter', {static: true})
statusFilter$
Type : BehaviorSubject<OperationStatusOption[]>
Default value : new BehaviorSubject(null)
timeFilter$
Type : BehaviorSubject<any>
Default value : new BehaviorSubject(null)
typeFilter$
Type : BehaviorSubject<OperationType[]>
Default value : new BehaviorSubject(null) 
<c8y-title>{{ 'Bulk operations' | translate }}</c8y-title>
<c8y-breadcrumb>
  <c8y-breadcrumb-item
    [icon]="'c8y-overviews'"
    [label]="'Overviews' | translate"
  ></c8y-breadcrumb-item>
  <c8y-breadcrumb-item
    [icon]="'c8y-device-control'"
    [label]="'Device control' | translate"
    [path]="'devicecontrol/single'"
  ></c8y-breadcrumb-item>
  <c8y-breadcrumb-item
    [icon]="'c8y-energy'"
    [label]="'Bulk operations' | translate"
  ></c8y-breadcrumb-item>
</c8y-breadcrumb>

<c8y-action-bar-item
  *ngIf="bulkTypes?.length"
  itemClass="navbar-form"
  [placement]="'left'"
>
  <label
    class="hidden-sm hidden-xs"
    translate
  >
    Type
  </label>
  <c8y-select-legacy
    style="width: 180px"
    [items]="bulkTypes"
    [selected]="selectedTypeFilters"
    [disableApplyOnNoSelection]="true"
    (onChange)="selectedTypeFilters = $event; typeFilter$.next(selectedTypeFilters)"
  ></c8y-select-legacy>
</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
    class="btn btn-link d-flex a-i-center"
    title="{{ 'Add bulk operation' | translate }}"
    *ngIf="bulkTypes?.length"
    (click)="addBulkOperation()"
    c8yProductExperience
    [actionName]="BULK_OPERATION_EVENT"
    [actionData]="{ action: bulkActions.OPEN_ADD_BULK_OPERATION_DIALOG }"
  >
    <i
      class="m-r-4"
      c8yIcon="plus-circle"
    ></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
      class="m-r-4"
      c8yIcon="refresh"
      [ngClass]="{ 'icon-spin': refreshLoading }"
    ></i>
    <span class="text-truncate">
      {{ 'Reload' | translate }}
    </span>
  </button>
</c8y-action-bar-item>

<c8y-help
  src="/docs/device-management-application/monitoring-and-controlling-devices/#to-view-bulk-operations"
></c8y-help>

<!-- Empty state -->
<c8y-ui-empty-state
  icon="c8y-energy"
  [title]="'No items to display' | translate"
  [subtitle]="'Bulk operations will be displayed here' | translate"
  *ngIf="(bulkOperations$ | async)?.data.length === 0 && !isFilterApplied()"
>
  <button
    class="btn btn-primary"
    title="{{ 'Add bulk operation' | translate }}"
    type="button"
    *ngIf="bulkTypes?.length"
    (click)="addBulkOperation()"
    translate
  >
    Add bulk operation
  </button>
</c8y-ui-empty-state>

<!-- No results empty state -->
<c8y-ui-empty-state
  icon="search"
  [title]="'No results to display.' | translate"
  [subtitle]="'Adjust or reset the filter.' | translate"
  *ngIf="(bulkOperations$ | async)?.data.length === 0 && isFilterApplied()"
>
  <button
    class="btn btn-primary"
    title="{{ 'Reset filter' | translate }}"
    type="button"
    (click)="resetFilter()"
    translate
  >
    Reset filter
  </button>
</c8y-ui-empty-state>

<!-- Detailed list of operations + load more button -->
<c8y-list-group class="m-b-24">
  <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="invisible"
          c8yIcon="refresh"
        ></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
      class="d-contents"
      [bulkOperation]="bulkOperation"
      (reload)="reload$.next()"
      (showFailedOperation)="openFailedOperation($event)"
    ></c8y-bulk-operation-list-item>
  </div>
</c8y-list-group>

results matching ""

    No results matching ""