Web SDK documentation
  1. Components
  2. DefaultSubscriptionsComponent

File

default-subscriptions/default-subscriptions.component.ts

Description

The component shows the main view for managing default subscriptions configuration.

Metadata

selector c8y-default-subscriptions
templateUrl ./default-subscriptions.component.html

Index

Properties
Methods

Constructor

constructor(fb: FormBuilder, defaultSubscriptionsService: DefaultSubscriptionsService, alertService: AlertService)
Parameters :
Name Type Optional
fb FormBuilder No
defaultSubscriptionsService DefaultSubscriptionsService No
alertService AlertService No

Methods

Async initForm
initForm()

Loads the list of apps, builds the form and hooks value change events for override switches.

Returns : any
isEmptyView
isEmptyView()

Checks if there are no application rows to be displayed.

Returns : boolean
isSubscribed
isSubscribed(app: IApplication, subscribedApps: PartialAppsList)

Checks if given application is subscribed (present in the given list of applications).

Parameters :
Name Type Optional Description
app IApplication No

Application object to check.
subscribedApps PartialAppsList No

The list of application objects to check against.
Returns : boolean

True, if the application is present in the list.
Async ngOnInit
ngOnInit()

Initializes the loading of the form and the current settings.

Returns : any
Async save
save()

Saves the current value of form object to backend.

Returns : any
shouldShowAppRow
shouldShowAppRow(appRowRawValue)

Checks if given application row should be displayed. The row is displayed when any of its checkboxes is selected or any of the lists is being overridden.

Parameters :
Name Optional
appRowRawValue No
Returns : boolean

Properties

currentDefaultSubscriptions
Type : DefaultSubscriptions

Default subscriptions defined in the current tenant.
disabledCheckboxHint
Default value : gettext('Select "Override inherited" to enable.')

Hint text for disabled checkboxes.
form
Type : FormGroup

Form object.
loading
Type : boolean

Whether the configuration is being loaded.
parentDefaultSubscriptions
Type : DefaultSubscriptions

Default subscriptions inherited from parent tenant.

 
<c8y-title>{{ 'Default subscriptions' | translate }}</c8y-title>

<c8y-breadcrumb>
  <c8y-breadcrumb-item [label]="'Ecosystem' | translate" [icon]="'c8y-atom'"></c8y-breadcrumb-item>
  <c8y-breadcrumb-item
    [label]="'Default subscriptions' | translate"
    [icon]="'c8y-atom'"
  ></c8y-breadcrumb-item>
</c8y-breadcrumb>

<form [formGroup]="form" (ngSubmit)="save()">
  <div class="card card--fullpage col-lg-max">
    <div class="card-header separator">
      <div class="card-title" translate>Applications</div>
    </div>
    <div class="inner-scroll">
      <div class="sticky-top separator-bottom">
        <div class="d-flex">
          <div class="col-sm-6 col-xs-6 p-24 p-t-16 p-l-xs-16">
            <p translate>
              Configure default subscriptions in the platform, both for tenant creation and for
              platform upgrade. To display a full list of available applications, override inherited
              settings.
            </p>
          </div>
          <div class="col-sm-6 col-xs-6 bg-level-1 p-16 text-center separator-bottom">
            <div class="row">
              <div class="col-sm-6 col-xs-6">
                <p><strong translate>Subscribed on tenant creation</strong></p>
                <div>
                  <label class="c8y-switch" title="{{ 'Override inherited' | translate }}">
                    <input type="checkbox" formControlName="overrideOnCreationSubscriptions" />
                    <span></span>
                    <span>
                      {{ 'Override inherited' | translate }}
                    </span>
                  </label>
                </div>
              </div>
              <div class="col-sm-6 col-xs-6">
                <p><strong translate>Subscribed on platform upgrade</strong></p>
                <div>
                  <label class="c8y-switch" title="{{ 'Override inherited' | translate }}">
                    <input type="checkbox" formControlName="overrideOnUpgradeSubscriptions" />
                    <span></span>
                    <span>
                      {{ 'Override inherited' | translate }}
                    </span>
                  </label>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="card-block" *ngIf="loading"></div>
      <div class="card-block card-block d-flex a-i-center j-c-center d-col" *ngIf="loading">
        <c8y-loading></c8y-loading>
      </div>
      <div class="card-block" *ngIf="loading"></div>

      <ng-container formArrayName="appRows">
        <div class="bg-level-1" *ngIf="!loading && isEmptyView()"></div>
        <div class="card-block bg-level-0" *ngIf="!loading && isEmptyView()">
          <c8y-ui-empty-state
            [icon]="'c8y-c8y-data'"
            [title]="'No application subscriptions yet.' | translate"
            [subtitle]="
              'Select &quot;Override inherited&quot; to define the list of subscribed applications.'
                | translate
            "
          ></c8y-ui-empty-state>
        </div>
        <div class="bg-level-1" *ngIf="!loading && isEmptyView()"></div>

        <div *ngFor="let appRowControl of form.get('appRows')['controls']; let i = index">
          <ng-container
            *ngIf="shouldShowAppRow(appRowControl.getRawValue())"
            formArrayName="{{ i }}"
          >
            <div class="d-flex a-i-stretch">
              <div class="col-sm-6 col-xs-6 separator-bottom">
                <div class="c8y-list__item__block">
                  <div class="c8y-list__item__appicon">
                    <c8y-app-icon
                      [app]="appRowControl.value.app"
                      [name]="appRowControl.value.app.name"
                      [contextPath]="appRowControl.value.app.contextPath"
                    ></c8y-app-icon>
                  </div>
                  <div class="c8y-list__item__body" data-cy="defaultSubscriptionForm--c8y-list_item">
                    <div class="content-flex-30">
                      <div class="col-6">
                        <p
                          class="text-truncate"
                          title="{{ appRowControl.value.app | humanizeAppName | async }}"
                        >
                          {{ appRowControl.value.app | humanizeAppName | async }}
                        </p>
                        <small class="text-muted">{{ appRowControl.value.app.contextPath }}</small>
                      </div>
                      <div class="col-6 text-right-sm">
                        <p>
                          <span class="text-label-small m-r-4" translate>Tenant ID</span>
                          {{ appRowControl.value.app.owner.tenant.id }}
                        </p>
                        <!-- TODO: uncomment when company name is available
                            <p>
                            <span class="text-label-small m-r-4" translate>Company</span>
                            <small class="text-muted">company name</small>
                          </p> -->
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <div
                class="col-sm-3 col-xs-3 bg-level-1 separator-bottom d-flex j-c-center a-i-center"
              >
                <label
                  class="c8y-checkbox"
                  [ngClass]="{ disabled: appRowControl.controls.subscribedOnCreation.disabled }"
                >
                  <input type="checkbox" formControlName="subscribedOnCreation" />
                  <span *ngIf="!appRowControl.controls.subscribedOnCreation.disabled"></span>
                  <span
                    *ngIf="appRowControl.controls.subscribedOnCreation.disabled"
                    title="{{ disabledCheckboxHint | translate }}"
                  ></span>
                  <span class="sr-only">{{ 'Subscribed on tenant creation' | translate }}</span>
                </label>
              </div>

              <div
                class="col-sm-3 col-xs-3 bg-level-1 separator-bottom d-flex j-c-center a-i-center"
              >
                <label
                  class="c8y-checkbox"
                  [ngClass]="{ disabled: appRowControl.controls.subscribedOnUpgrade.disabled }"
                >
                  <input type="checkbox" formControlName="subscribedOnUpgrade" />
                  <span *ngIf="!appRowControl.controls.subscribedOnUpgrade.disabled"></span>
                  <span
                    *ngIf="appRowControl.controls.subscribedOnUpgrade.disabled"
                    title="{{ disabledCheckboxHint | translate }}"
                  ></span>
                  <span class="sr-only">{{ 'Subscribed on platform upgrade' | translate }}</span>
                </label>
              </div>
            </div>
          </ng-container>
        </div>
      </ng-container>
    </div>
    <div class="card-footer separator">
      <button
        class="btn btn-primary"
        type="submit"
        title="{{ 'Save default subscriptions' | translate }}"
        [disabled]="form.invalid || form.pristine"
      >
        {{ 'Save' | translate }}
      </button>
    </div>
  </div>
</form>

results matching ""

    No results matching ""