Web SDK documentation
  1. Components
  2. ReplaceDeviceWizardComponent

File

replace-device/replace-device-wizard/replace-device-wizard.component.ts

Implements

GridConfigContextProvider

Metadata

providers DeviceGridService ReplaceDeviceWizardService { provide: DATA_GRID_CONFIGURATION_STRATEGY, useClass: UserPreferencesConfigurationStrategy } { provide: DATA_GRID_CONFIGURATION_CONTEXT_PROVIDER, useExisting: ReplaceDeviceWizardComponent }
selector c8y-replace-device-wizard
standalone true
imports CoreModule DeviceGridModule DeviceSelectorModule TooltipModule CollapseModule PopoverModule
templateUrl ./replace-device-wizard.component.html

Index

Properties
Methods
Inputs
HostBindings
Accessors

Constructor

constructor(service: ReplaceDeviceWizardService, deviceGridService: DeviceGridService, modal: ModalService, drawerRef: BottomDrawerRef<ReplaceDeviceWizardComponent>)
Parameters :
Name Type Optional
service ReplaceDeviceWizardService No
deviceGridService DeviceGridService No
modal ModalService No
drawerRef BottomDrawerRef<ReplaceDeviceWizardComponent> No

Inputs

deviceToReplace
Type : IManagedObject

HostBindings

class
Type : string
Default value : 'd-contents'

Methods

cancel
cancel()
Returns : void
close
close()
Returns : void
continue
continue()
Returns : void
getGridConfigContext
getGridConfigContext()
Returns : UserPreferencesGridConfigContext
Async replace
replace()
Returns : any

Properties

baseQuery$
Type : Observable<object>
Default value : this.service.deviceToReplace$.pipe( map(device => ({ __not: { id: { __eq: device?.id } } })) )
classes
Type : string
Default value : 'd-contents'
Decorators :
@HostBinding('class')
columns
Type : Column[]
REPLACE_DEVICE_STEP_STATES_MAP
Default value : REPLACE_DEVICE_STEP_STATES_MAP
replacementDeviceId
Type : string
Public service
Type : ReplaceDeviceWizardService
stepper
Type : C8yStepper
Decorators :
@ViewChild(C8yStepper, {static: true})

Accessors

deviceToReplace
setdeviceToReplace(deviceToReplace: IManagedObject)
Parameters :
Name Type Optional
deviceToReplace IManagedObject No
Returns : void 
<c8y-stepper
  class="d-contents c8y-stepper--no-btns"
  [disableDefaultIcons]="{ edit: true, done: false }"
  id="modal-body"
  [customClasses]="[
    'col-xs-10',
    'col-xs-offset-1',
    'col-sm-8',
    'col-sm-offset-2',
    'm-t-24',
    'm-b-40',
    'p-0',
    'flex-no-shrink'
  ]"
  linear
>
  <cdk-step [label]="'Replacement device' | translate">
    <div class="p-16 p-t-0 flex-no-shrink separator-bottom col-xs-12">
      <div class="row">
        <div class="col-md-6 col-md-offset-3 col-lg-4 col-lg-offset-4">
          <div class="h4 text-center text-medium">
            {{ 'Replacement device' | translate }}
          </div>
        </div>
      </div>
    </div>
    <c8y-device-grid
      class="flex-grow col-xs-12 no-gutter"
      [title]="'Select replacement device' | translate"
      [infiniteScroll]="'auto'"
      [actionControls]="[]"
      [columns]="columns"
      [selectable]="true"
      [singleSelection]="true"
      [baseQuery]="baseQuery$ | async"
      (itemsSelect)="replacementDeviceId = $event[0]"
    ></c8y-device-grid>
    <c8y-stepper-buttons
      class="d-block card-footer p-24 separator"
      [disabled]="!replacementDeviceId"
      (onCancel)="cancel()"
      (onNext)="service.changeReplacementDeviceId(replacementDeviceId); continue()"
    ></c8y-stepper-buttons>
  </cdk-step>

  <cdk-step [label]="'Select external IDs' | translate">
    <div class="p-16 p-t-0 flex-no-shrink col-xs-12">
      <div class="row">
        <div class="col-md-6 col-md-offset-3 col-lg-4 col-lg-offset-4">
          <div class="h4 text-center text-medium">
            {{ 'Select external IDs' | translate }}
          </div>
        </div>
      </div>
    </div>
    <c8y-li class="page-sticky-header hidden-sm hidden-xs">
      <c8y-li-icon><i class="p-l-24"></i></c8y-li-icon>
      <c8y-li-body class="content-flex-40">
        <div class="col-4">
          <span
            class="text-medium text-truncate"
            title=" {{ 'Type' | translate }} "
          >
            {{ 'Type' | translate }}
          </span>
        </div>
        <div class="col-6">
          <span
            class="text-medium text-truncate"
            title="{{ 'External ID' | translate }}"
          >
            {{ 'External ID' | translate }}
          </span>
        </div>
      </c8y-li-body>
    </c8y-li>
    <div
      class="col-xs-12 flex-grow no-gutter"
      *ngIf="!(service.externalIdsLoading$ | async); else loading"
    >
      <div
        class="card-inner-scroll fit-h"
        *ngIf="(service.externalIdsWithSelection$ | async)?.length > 0; else noIds"
      >
        <div class="card-block p-t-0 p-b-0">
          <c8y-list-group>
            <c8y-li *ngFor="let extId of service.externalIdsWithSelection$ | async">
              <c8y-li-checkbox
                [selected]="extId.selected"
                (onSelect)="service.checkExternalId(extId.id, $event)"
              ></c8y-li-checkbox>
              <c8y-li-body class="content-flex-40">
                <div class="col-4 m-b-xs-8">
                  <div
                    class="text-truncate"
                    title="{{ 'Type' | translate }}"
                  >
                    <span
                      class="text-label-small m-r-8 visible-xs visible-sm"
                      translate
                    >
                      Type
                    </span>
                    {{ extId.id.type }}
                  </div>
                </div>
                <div class="col-6 m-b-xs-8">
                  <div
                    class="text-truncate"
                    title="{{ 'External ID' | translate }}"
                  >
                    <span
                      class="text-label-small m-r-8 visible-xs visible-sm"
                      translate
                    >
                      External ID
                    </span>
                    {{ extId.id.externalId }}
                  </div>
                </div>
              </c8y-li-body>
            </c8y-li>
          </c8y-list-group>
        </div>
      </div>
      <ng-template #noIds>
        <c8y-ui-empty-state
          [icon]="'barcode'"
          [title]="'No external IDs assigned.'"
          [subtitle]="
            'The selected replacement device does not have external IDs assigned. Go back to &quot;Replacement device&quot; and select a different device.'
              | translate
          "
          *ngIf="true"
        ></c8y-ui-empty-state>
      </ng-template>
    </div>
    <ng-template #loading>
      <div class="d-flex d-col a-i-center j-c-center fit-h">
        <c8y-loading></c8y-loading>
      </div>
    </ng-template>
    <c8y-stepper-buttons
      class="d-block card-footer p-24 separator"
      [disabled]="
        (service.externalIdsLoading$ | async) || !(service.selectedExternalIds$ | async)?.length
      "
      (onCancel)="cancel()"
      (onNext)="replace()"
      [labels]="{ next: ('Replace' | translate) }"
    ></c8y-stepper-buttons>
  </cdk-step>

  <cdk-step [label]="'Replace' | translate">
    <div class="p-16 p-t-0 flex-no-shrink col-xs-12 separator-bottom">
      <div class="row">
        <div class="col-md-6 col-md-offset-3 col-lg-4 col-lg-offset-4">
          <div class="h4 text-center text-medium">
            {{ 'Replace' | translate }}
          </div>
        </div>
      </div>
    </div>
    <div class="d-flex d-col a-i-center j-c-center inner-scroll">
      <c8y-list-group class="col-sm-8 col-md-6">
        <c8y-li
          *ngFor="let step of service.steps"
          [attr.data-cy]="'c8y-replace-device-wizard--step-' + step.label"
        >
          <c8y-li-icon>
            <i
              [c8yIcon]="REPLACE_DEVICE_STEP_STATES_MAP[step.state || 'Pending']?.icon"
              [tooltip]="(step.state || 'Pending').toString() | translate"
              [ngClass]="REPLACE_DEVICE_STEP_STATES_MAP[step.state || 'Pending']?.styleClass"
            ></i>
          </c8y-li-icon>
          <c8y-li-body>
            <span [ngClass]="{ 'text-bold': !!step.error }">{{ step.label | translate }}</span>
            <button
              class="btn-help btn-help--sm pull-right"
              [attr.aria-label]="'Help' | translate"
              [attr.aria-label]="step.info.msg | translate"
              [popover]="step.info.msg | translate"
              placement="right"
              triggers="focus"
              type="button"
              *ngIf="!!step.info?.msg"
            >
              <i c8yIcon="question-circle-o"></i>
            </button>
          </c8y-li-body>
          <c8y-li-collapse
            #alert
            *ngIf="step.error"
          >
            <span class="message">{{ step.error?.text | translate }}</span>
            <p
              class="text-muted m-t-8"
              *ngIf="step?.error?.detailedData"
            >
              <button
                class="btn btn-clean"
                (click)="alert.expanded = !alert.expanded"
              >
                <i c8yIcon="chevron-down"></i>
                <span *ngIf="!alert.expanded">Show details</span>
                <span *ngIf="alert.expanded">Hide details</span>
              </button>
            </p>
            <div
              [collapse]="!alert.expanded"
              [isAnimated]="true"
            >
              {{ step.error.detailedData | json }}
            </div>
          </c8y-li-collapse>
          <c8y-li-action
            icon="play"
            label="{{ 'Retry this step`button`' | translate }}"
            *ngIf="step.state === 'Failed' && !step.overrideContext"
            (click)="service.retryStep(step)"
            data-cy="c8y-replace-device-wizard--retry-step"
          ></c8y-li-action>
        </c8y-li>
      </c8y-list-group>
    </div>

    <c8y-stepper-buttons
      class="d-block card-footer p-24 separator"
      [pending]="service.deviceReplacementInProgress$ | async"
      (onBack)="close()"
      [labels]="{ back: 'Close' | translate }"
    >
      <button
        class="btn btn-primary"
        [title]="'Retry' | translate"
        type="button"
        *ngIf="(service.deviceReplaced$ | async) === false"
        (click)="service.retryStep()"
        [ngClass]="{ 'btn-pending': service.deviceReplacementInProgress$ | async }"
        [disabled]="service.deviceReplacementInProgress$ | async"
        data-cy="c8y-replace-device-wizard--btn-retry"
      >
        {{ 'Retry' | translate }}
      </button>
    </c8y-stepper-buttons>
  </cdk-step>
</c8y-stepper>

results matching ""

    No results matching ""