@tuki-io/tuki-widgets 0.0.219-dev.0 → 0.0.220

package/projects/tuki/widgets/user-creation/src/widgets/user-creation-wizard/components/user-details-step/user-details-step.component.html

@@ -1,376 +0,0 @@
-<app-loader *ngIf="loadingAvailableNumbers"></app-loader>
-<section class="details-step-content">
-  <form [formGroup]="userDetailsForm">
-    <div class="details-step-sections">
-      <section class="details-step-section">
-        <h3 class="details-step-section__title">User details</h3>
-        <div class="details-step-section__content">
-          <div class="details-step-section__part">
-            <div class="details-inline-fields">
-              <div class="details-inline-field">
-                <label class="details-inline-field__label">User ID</label>
-                <mat-form-field class="details-step-input" appearance="outline">
-                  <input matInput placeholder="User ID" formControlName="userId" />
-                  <mat-error *ngIf="userDetailsForm.get('userId')?.hasError('required') && userDetailsForm.get('userId')?.touched">
-                    User ID is required
-                  </mat-error>
-                  <mat-error *ngIf="userDetailsForm.get('userId')?.hasError('userIdExists') && userDetailsForm.get('userId')?.touched">
-                    User ID already exists
-                  </mat-error>
-                  <mat-hint *ngIf="userIdCheckPending">Checking user ID...</mat-hint>
-                </mat-form-field>
-              </div>
-
-              <div class="details-inline-field">
-                <label class="details-inline-field__label">First Name</label>
-                <mat-form-field class="details-step-input" appearance="outline">
-                  <input matInput placeholder="First Name" formControlName="firstName" />
-                  <mat-error *ngIf="userDetailsForm.get('firstName')?.hasError('required') && userDetailsForm.get('firstName')?.touched">
-                    First name is required
-                  </mat-error>
-                </mat-form-field>
-              </div>
-
-              <div class="details-inline-field">
-                <label class="details-inline-field__label">Last Name</label>
-                <mat-form-field class="details-step-input" appearance="outline">
-                  <input matInput placeholder="Last Name" formControlName="lastName" />
-                  <mat-error *ngIf="userDetailsForm.get('lastName')?.hasError('required') && userDetailsForm.get('lastName')?.touched">
-                    Last name is required
-                  </mat-error>
-                </mat-form-field>
-              </div>
-
-              <div class="details-inline-field">
-                <label class="details-inline-field__label">Email</label>
-                <mat-form-field class="details-step-input" appearance="outline">
-                  <input matInput placeholder="Email" formControlName="email" />
-                  <mat-error *ngIf="userDetailsForm.get('email')?.invalid && userDetailsForm.get('email')?.touched">
-                    <span *ngIf="userDetailsForm.get('email')?.hasError('required')">Email is required</span>
-                    <span *ngIf="userDetailsForm.get('email')?.hasError('email')">Please enter a valid email</span>
-                  </mat-error>
-                </mat-form-field>
-              </div>
-
-              <div class="details-inline-field">
-                <label class="details-inline-field__label">User Template</label>
-                <mat-form-field class="details-step-input" appearance="outline">
-                  <input
-                    matInput
-                    placeholder="User Template"
-                    [value]="userCreationWizardService.selectedTemplateName || ''"
-                    [disabled]="true"
-                  />
-                </mat-form-field>
-              </div>
-            </div>
-          </div>
-
-          <div class="details-step-section__part">
-            <mat-accordion class="details-user-accordion">
-              <mat-expansion-panel togglePosition="before">
-                <mat-expansion-panel-header>
-                  <mat-panel-title>Choose an existing or a LDAP user</mat-panel-title>
-                </mat-expansion-panel-header>
-                <div class="details-user-accordion__content">
-                  <div class="details-ldap-search" [formGroup]="ldapSearchForm">
-                    <mat-form-field
-                      class="details-ldap-search__input"
-                      appearance="outline"
-                      floatLabel="never"
-                    >
-                      <input
-                        matInput
-                        placeholder="Search"
-                        formControlName="queryValue"
-                        (keyup.enter)="searchLdapUsers()"
-                      />
-                    </mat-form-field>
-
-                    <mat-form-field
-                      class="details-ldap-search__select"
-                      appearance="outline"
-                      floatLabel="never"
-                    >
-                      <mat-select formControlName="queryType">
-                        <mat-option *ngFor="let option of ldapQueryTypeOptions" [value]="option.value">
-                          {{ option.label }}
-                        </mat-option>
-                      </mat-select>
-                    </mat-form-field>
-
-                    <mat-chip-list *ngIf="selectedLdapUser" class="details-ldap-search__chip">
-                      <mat-chip removable (removed)="onRemoveLdapTag()">
-                        {{ selectedLdapUser.userid }}
-                        <mat-icon matChipRemove>cancel</mat-icon>
-                      </mat-chip>
-                    </mat-chip-list>
-
-                    <button
-                      mat-button
-                      class="details-ldap-search__btn"
-                      type="button"
-                      [disabled]="ldapLoading"
-                      (click)="searchLdapUsers()"
-                    >
-                      Search
-                    </button>
-                  </div>
-
-                  <app-loader *ngIf="ldapLoading"></app-loader>
-
-                  <p
-                    *ngIf="!ldapLoading && ldapSearchAttempted && !hasLdapUsers"
-                    class="details-ldap-table__empty"
-                  >
-                    No users found
-                  </p>
-
-                  <table
-                    *ngIf="!ldapLoading && hasLdapUsers"
-                    mat-table
-                    [dataSource]="userCreationWizardService.ldapUsers"
-                    class="details-ldap-table"
-                  >
-                    <ng-container matColumnDef="userId">
-                      <th mat-header-cell *matHeaderCellDef>User Id</th>
-                      <td mat-cell *matCellDef="let row">{{ row.userid }}</td>
-                    </ng-container>
-
-                    <ng-container matColumnDef="firstName">
-                      <th mat-header-cell *matHeaderCellDef>First Name</th>
-                      <td mat-cell *matCellDef="let row">{{ row.firstName }}</td>
-                    </ng-container>
-
-                    <ng-container matColumnDef="lastName">
-                      <th mat-header-cell *matHeaderCellDef>Last Name</th>
-                      <td mat-cell *matCellDef="let row">{{ row.lastName }}</td>
-                    </ng-container>
-
-                    <ng-container matColumnDef="email">
-                      <th mat-header-cell *matHeaderCellDef>Email</th>
-                      <td mat-cell *matCellDef="let row">{{ row.email }}</td>
-                    </ng-container>
-
-                    <ng-container matColumnDef="add">
-                      <th mat-header-cell *matHeaderCellDef>Add</th>
-                      <td mat-cell *matCellDef="let row">
-                        <button
-                          *ngIf="!isLdapUserRowSelected(row); else deleteLdapUserBtn"
-                          mat-button
-                          class="details-ldap-table__add-btn"
-                          type="button"
-                          (click)="onAddLdapUser(row)"
-                        >
-                          Add User
-                        </button>
-                        <ng-template #deleteLdapUserBtn>
-                          <button
-                            mat-button
-                            class="details-ldap-table__add-btn details-ldap-table__add-btn--delete"
-                            type="button"
-                            (click)="onDeleteLdapUser(row)"
-                          >
-                            Delete user
-                          </button>
-                        </ng-template>
-                      </td>
-                    </ng-container>
-
-                    <tr mat-header-row *matHeaderRowDef="userCreationWizardService.ldapTableColumns"></tr>
-                    <tr mat-row *matRowDef="let row; columns: userCreationWizardService.ldapTableColumns"></tr>
-                  </table>
-
-                  <mat-paginator
-                    *ngIf="!ldapLoading && hasLdapUsers"
-                    class="details-ldap-paginator"
-                    [length]="ldapTotalCount"
-                    [pageSize]="ldapPageSize"
-                    [pageIndex]="ldapPageIndex"
-                    [pageSizeOptions]="[ldapPageSize]"
-                    [hidePageSize]="true"
-                    [disabled]="ldapLoading"
-                    (page)="onLdapPageChange($event)"
-                  ></mat-paginator>
-                </div>
-              </mat-expansion-panel>
-            </mat-accordion>
-          </div>
-        </div>
-      </section>
-
-      <section class="details-step-section">
-        <h3 class="details-step-section__title">Lines</h3>
-        <div class="details-step-section__content" formArrayName="lines">
-          <div class="line-route-list">
-            <div
-              class="line-route-row"
-              *ngFor="let lineGroup of linesFormArray.controls; let idx = index"
-              [formGroupName]="idx"
-            >
-              <div class="line-info">
-                <mat-form-field
-                  class="details-step-input line-route-field"
-                  appearance="outline"
-                  floatLabel="never"
-                  hideRequiredMarker
-                >
-                  <input matInput placeholder="Line number" formControlName="lineNumber" />
-                </mat-form-field>
-
-                <mat-form-field
-                  class="details-step-input line-route-field"
-                  appearance="outline"
-                  floatLabel="never"
-                  hideRequiredMarker
-                >
-                  <input
-                    matInput
-                    placeholder="Search for a number"
-                    formControlName="number"
-                    [matAutocomplete]="numberAuto"
-                    (input)="filterAvailableNumbers(idx, $event)"
-                  />
-                  <mat-autocomplete
-                    #numberAuto="matAutocomplete"
-                    [panelWidth]="'auto'"
-                    (optionSelected)="onNumberSelected(idx, $event.option.value)"
-                  >
-                    <mat-option *ngFor="let option of getFilteredNumbers(idx)" [value]="option">
-                      {{ option }}
-                    </mat-option>
-                  </mat-autocomplete>
-                  <mat-error *ngIf="getLineGroup(idx).get('number')?.invalid && getLineGroup(idx).get('number')?.touched">
-                    Number is required
-                  </mat-error>
-                </mat-form-field>
-
-                <mat-form-field
-                  class="details-step-input line-route-field"
-                  appearance="outline"
-                  floatLabel="never"
-                  hideRequiredMarker
-                >
-                  <input
-                    matInput
-                    placeholder="Select route partition"
-                    formControlName="routePartition"
-                    [matAutocomplete]="routePartitionAuto"
-                    (input)="filterRoutePartitions(idx, $event)"
-                  />
-                  <mat-autocomplete
-                    #routePartitionAuto="matAutocomplete"
-                    (optionSelected)="onRoutePartitionSelected(idx, $event.option.value)"
-                  >
-                    <mat-option
-                      *ngFor="let routePartition of getFilteredRoutePartitions(idx)"
-                      [value]="routePartition"
-                    >
-                      {{ routePartition }}
-                    </mat-option>
-                  </mat-autocomplete>
-                  <mat-error *ngIf="getLineGroup(idx).get('routePartition')?.invalid && getLineGroup(idx).get('routePartition')?.touched">
-                    Route partition is required
-                  </mat-error>
-                </mat-form-field>
-              </div>
-            </div>
-          </div>
-        </div>
-      </section>
-
-      <section class="details-step-section">
-        <h3 class="details-step-section__title">Devices</h3>
-        <div class="details-step-section__content" formArrayName="devices">
-          <div class="devices-rows">
-            <div
-              class="details-inline-fields details-inline-fields--four"
-              *ngFor="let deviceGroup of devicesFormArray.controls; let idx = index"
-              [formGroupName]="idx"
-            >
-              <div class="details-inline-field">
-                <label class="details-inline-field__label">Device type</label>
-                <mat-form-field class="details-step-input" appearance="outline">
-                  <input matInput formControlName="deviceType" />
-                </mat-form-field>
-              </div>
-
-              <div class="details-inline-field">
-                <label class="details-inline-field__label">Protocol</label>
-                <mat-form-field class="details-step-input" appearance="outline">
-                  <input matInput formControlName="protocol" />
-                </mat-form-field>
-              </div>
-
-              <div class="details-inline-field">
-                <label class="details-inline-field__label">Button Template</label>
-                <mat-form-field class="details-step-input" appearance="outline">
-                  <input matInput formControlName="buttonTemplate" />
-                </mat-form-field>
-              </div>
-
-              <div class="details-inline-field">
-                <label class="details-inline-field__label">Name</label>
-                <mat-form-field class="details-step-input" appearance="outline">
-                  <span matPrefix *ngIf="getDeviceNamePrefix(idx) as devicePrefix">{{ devicePrefix }}</span>
-                  <input matInput placeholder="Name" formControlName="name" />
-                  <mat-error *ngIf="getDeviceGroup(idx).get('name')?.hasError('deviceName') && getDeviceGroup(idx).get('name')?.touched">
-                    {{ getDeviceGroup(idx).get('name')?.getError('deviceName')?.caption || getDeviceNameValidationCaption(idx) || 'Please enter a valid device name' }}
-                  </mat-error>
-                  <mat-error *ngIf="getDeviceGroup(idx).get('name')?.hasError('required') && getDeviceGroup(idx).get('name')?.touched">
-                    Name is required
-                  </mat-error>
-                </mat-form-field>
-              </div>
-            </div>
-          </div>
-        </div>
-      </section>
-
-      <section class="details-step-section" *ngIf="deviceProfilesFormArray.length">
-        <h3 class="details-step-section__title">Device profiles</h3>
-        <div class="details-step-section__content" formArrayName="deviceProfiles">
-          <div class="devices-rows">
-            <div
-              class="details-inline-fields details-inline-fields--four"
-              *ngFor="let profileGroup of deviceProfilesFormArray.controls; let idx = index"
-              [formGroupName]="idx"
-            >
-              <div class="details-inline-field">
-                <label class="details-inline-field__label">Device type</label>
-                <mat-form-field class="details-step-input" appearance="outline">
-                  <input matInput formControlName="deviceType" />
-                </mat-form-field>
-              </div>
-
-              <div class="details-inline-field">
-                <label class="details-inline-field__label">Protocol</label>
-                <mat-form-field class="details-step-input" appearance="outline">
-                  <input matInput formControlName="protocol" />
-                </mat-form-field>
-              </div>
-
-              <div class="details-inline-field">
-                <label class="details-inline-field__label">Button Template</label>
-                <mat-form-field class="details-step-input" appearance="outline">
-                  <input matInput formControlName="buttonTemplate" />
-                </mat-form-field>
-              </div>
-
-              <div class="details-inline-field">
-                <label class="details-inline-field__label">Name</label>
-                <mat-form-field class="details-step-input" appearance="outline">
-                  <span matPrefix *ngIf="getDeviceProfileNamePrefix(idx) as profilePrefix">{{ profilePrefix }}</span>
-                  <input matInput placeholder="Name" formControlName="name" />
-                  <mat-error *ngIf="getDeviceProfileGroup(idx).get('name')?.hasError('deviceName') && getDeviceProfileGroup(idx).get('name')?.touched">
-                    {{ getDeviceProfileGroup(idx).get('name')?.getError('deviceName')?.caption || getDeviceProfileNameValidationCaption(idx) || 'Please enter a valid device name' }}
-                  </mat-error>
-                </mat-form-field>
-              </div>
-            </div>
-          </div>
-        </div>
-      </section>
-    </div>
-  </form>
-</section>