File
Implements
Index
Properties
|
|
|
Methods
|
|
|
Inputs
|
|
|
HostBindings
|
|
|
Accessors
|
|
|
|
deviceToReplace
|
Type : IManagedObject
|
HostBindings
|
class
|
Type : string
|
Default value : 'd-contents'
|
Methods
|
getGridConfigContext
|
getGridConfigContext()
|
|
|
|
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')
|
|
REPLACE_DEVICE_STEP_STATES_MAP
|
Default value : REPLACE_DEVICE_STEP_STATES_MAP
|
|
replacementDeviceId
|
Type : string
|
|
stepper
|
Type : C8yStepper
|
Decorators :
@ViewChild(C8yStepper, {static: true})
|
Accessors
|
deviceToReplace
|
setdeviceToReplace(deviceToReplace: IManagedObject)
|
Parameters :
| Name |
Type |
Optional |
| deviceToReplace |
IManagedObject
|
No
|
|
<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 "Replacement device" 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>