File

register-device/general/general-device-registration.component.ts

Implements

AfterViewInit OnDestroy

Metadata

changeDetection	`ChangeDetectionStrategy.OnPush`
selector	`c8y-general-device-registration`
templateUrl	`general-device-registration.component.html`

Index

Properties

Public bsModalRef
failed
fields
Readonly FILTER
form
isLoading$
Readonly MANAGEMENT
model
options
success

Constructor

constructor(tenantUIService: TenantUiService, tenantService: TenantService, registerDeviceService: RegisterDeviceService, inventoryService: InventoryService, cd: ChangeDetectorRef, bsModalRef: BsModalRef)

Parameters :

Name	Type	Optional
tenantUIService	`TenantUiService`	No
tenantService	`TenantService`	No
registerDeviceService	`RegisterDeviceService`	No
inventoryService	`InventoryService`	No
cd	`ChangeDetectorRef`	No
bsModalRef	`BsModalRef`	No

Methods

create

create(eventObject: literal type)

Parameters :

Name	Type	Optional
eventObject	`literal type`	No

Returns : void

fixErrors

fixErrors(event: literal type, failedRequests: IDeviceRegistration[])

Parameters :

Name	Type	Optional
event	`literal type`	No
failedRequests	`IDeviceRegistration[]`	No

Returns : void

ngAfterViewInit

ngAfterViewInit()

Returns : void

ngOnDestroy

ngOnDestroy()

Returns : void

Properties

Public bsModalRef

Type : BsModalRef

failed

Type : IDeviceRegistration[]

Default value : []

fields

Type : FormlyFieldConfig[]

Default value :

[
    {
      type: 'array',
      key: 'devicesToCreate',
      fieldArray: {
        templateOptions: {
          label: gettext('new device')
        },
        fieldGroup: [{
          key: 'id',
          type: 'string',
          focus: true,
          templateOptions: {
            placeholder: '0123ab32fcd',
            label: gettext('Device ID'),
            required: true
          },
          validators: {
            unique: {
              expression: (control: FormControl) => {
                const found = (control.root.get('devicesToCreate').value as Array<{id: string}>).filter(el => el.id === control.value);
                return found.length === 0;
              },
              message: () => gettext('Device ID duplicates are not allowed'),
            },
          },
        },
        {
          key: 'tenant',
          type: 'typeahead',
          hideExpression: (model: any, formState: any, field: FormlyFieldConfig) => {
            if (!formState?.canLoadTenants) {
              field.formControl.setValue(null);
            }
            return !formState?.canLoadTenants || false;
          },
          defaultValue: {id: this.MANAGEMENT},
          templateOptions: {
            label: gettext('Add to tenant'),
            required: true,
            c8yForOptions: this.canLoadTenants$().pipe(filter(canLoad => canLoad), switchMap(() => this.getTenants$())) as Observable<IResultList<ITenant>>,
            container: 'body',
            displayProperty: 'id',
            valueProperties: ['id']
          },
          hooks: {
            onInit: field => this.canLoadTenants$().pipe(tap(canLoad => {
              this.options.formState.canLoadTenants = canLoad;
              this.cd.detectChanges();
            }))
          }
        },
        {
          key: 'group',
          type: 'typeahead',
          expressionProperties: {
            'templateOptions.disabled': (model: any, formState: any, field: FormlyFieldConfig) => {
              if (formState?.canLoadTenants) {
                if (model?.tenant?.id !== this.MANAGEMENT) {
                  field.formControl.setValue(null);
                }
                return !(model?.tenant?.id === this.MANAGEMENT);
              }
              delete field?.templateOptions?.description;
              return false;
            }
          },
          templateOptions: {
            disabled: false,
            label: gettext('Add to group'),
            description: gettext('You can add device to specific group for management tenant only.'),
            container: 'body',
            displayProperty: 'name',
            valueProperties: ['id'],
            c8yForOptions: this.getGroups$()
          },
          hooks: {
            onInit: field => this.canLoadTenants$().pipe(tap(canLoad => {
              this.options.formState.canLoadTenants = canLoad;
              this.cd.detectChanges();
            }))
          }
        }]
      }
    }
  ]

Readonly FILTER

Type : object

Default value :

{
    withTotalPages: true,
    pageSize: 25
  }

form

Default value : new FormGroup({})

isLoading$

Type : Observable<boolean>

Readonly MANAGEMENT

Type : string

Default value : 'management'

model

Type : object

Default value :

{
    devicesToCreate: [{} as GeneralDeviceRegistrationModelType]
  }

options

Type : FormlyFormOptions

Default value :

{
    formState: {
      canLoadTenants: true,
    }
  }

success

Type : IDeviceRegistration[]

Default value : []

<c8y-modal [headerClasses]="'dialog-header'" [customFooter]="true">
  <ng-container c8y-modal-title>
    <span [c8yIcon]="'c8y-device-connect'"></span>
    <h4>{{ 'Register devices' | translate }}</h4>
  </ng-container>
  <c8y-stepper [hideStepProgress]="true" linear>
    <cdk-step [stepControl]="form">
      <div class="p-b-16">
        <p
          class="
            p-l-24 p-r-24 p-t-16 p-b-16
            m-b-0
            sticky-top
            separator-bottom
            lead
            text-center
            bg-component
          "
          translate
        >
          Register a general device
        </p>
        <formly-form
          [form]="form"
          [fields]="fields"
          [model]="model"
          [options]="options"
          class="formly-group-array-cols d-block p-24 min-height-fit"
        ></formly-form>
      </div>
      <c8y-stepper-buttons
        (onNext)="create($event)"
        (onCancel)="bsModalRef.hide()"
        [showButtons]="{ cancel: true, next: true }"
        [disabled]="!form?.valid"
        [pending]="isLoading$ | async"
        class="sticky-bottom d-block p-t-16 p-b-16 separator-top bg-white"
      ></c8y-stepper-buttons>
    </cdk-step>
    <cdk-step state="final">
      <div class="p-24 min-height-fit">
        <c8y-operation-result
          *ngIf="success.length === 1 && failed.length === 0"
          text="{{ 'Device registered' | translate }}"
          [size]="84"
          [vertical]="true"
          type="success"
          class="lead"
        ></c8y-operation-result>
        <c8y-operation-result
          *ngIf="success.length === 0 && failed.length === 1"
          text="{{ 'Failed to register device' | translate }}"
          [size]="84"
          [vertical]="true"
          type="error"
          class="lead"
        ></c8y-operation-result>

        <ng-container *ngIf="success.length > 1 || failed.length > 1">
          <c8y-operation-result
            *ngIf="failed.length === 0"
            text="{{ success.length }} {{ 'devices registered' | translate }}"
            [size]="84"
            [vertical]="true"
            type="success"
            class="lead"
          ></c8y-operation-result>
          <c8y-operation-result
            *ngIf="success.length === 0"
            text="{{ failed.length }} {{ 'devices failed to register' | translate }}"
            [size]="84"
            [vertical]="true"
            type="error"
            class="lead"
          ></c8y-operation-result>
        </ng-container>

        <div *ngIf="success.length > 0 && failed.length > 0" class="p-l-24 p-r-24 text-center">
          <c8y-operation-result
            text="{{ 'Some devices failed to register' | translate }}"
            [size]="84"
            [vertical]="true"
            type="error"
            class="lead"
          ></c8y-operation-result>
          <p
            ngNonBindable
            translate
            [translateParams]="{ count: failed.length, total: failed.length + success.length }"
            class="p-b-16 text-danger"
          >
            Registration failed for {{ count }} devices out of {{ total }}.
          </p>
        </div>

        <div class="m-b-8 p-l-24 p-r-24" *ngIf="success.length > 0" translate>
          Turn on the registered device(s) and wait for connection(s) to be established. Once a
          device is connected, its status will change to "Pending acceptance". You will need to
          approve it by clicking on the "Accept" button.
        </div>

        <c8y-list-group class="separator-top m-t-16">
          <c8y-li *ngFor="let fail of failed">
            <c8y-li-icon class="text-danger" [icon]="'ban'"></c8y-li-icon>
            <p>{{ fail?.id }}</p>
            <small>{{ fail?.message | translate }}</small>
            <c8y-li-collapse>
              <pre><code>{{ fail?.details | json }}</code></pre>
            </c8y-li-collapse>
          </c8y-li>

          <c8y-li *ngFor="let s of success">
            <c8y-li-icon class="text-success" [icon]="'check-circle'"></c8y-li-icon>
            {{ s?.id }}
          </c8y-li>
        </c8y-list-group>
      </div>
      <c8y-stepper-buttons
        class="sticky-bottom d-block p-t-16 p-b-16 separator-top bg-white"
        (onCustom)="bsModalRef.hide()"
        (onBack)="fixErrors($event, failed)"
        [showButtons]="{ back: failed.length > 0, custom: true }"
        [labels]="{ back: 'Fix errors', custom: 'Close' }"
      ></c8y-stepper-buttons>
    </cdk-step>
  </c8y-stepper>
</c8y-modal>

File

Implements

Metadata

Index

Properties

Methods

Constructor

Methods

Properties

results matching ""

No results matching ""