@tuki-io/tuki-widgets 0.0.26 → 0.0.28

package/projects/tuki/widgets/user-manage/src/user-manage-widget.component.html

@@ -0,0 +1,292 @@
+<app-loader *ngIf="dataPending || userService.dataPending"></app-loader>
+
+<div *ngIf="!dataPending">
+  <div class="go-back-box" (click)="onGoBack()">
+    <div class="go-back-box-container">
+      <span class="app-icon icon-webex-left-arrow"></span>
+      <span class="go-back-title">Users</span>
+    </div>
+  </div>
+
+  <app-user-info *ngIf="user" [name]="userName" [email]="user.email" [active]="true"
+                 [position]="'Member of ' + user.siteName"></app-user-info>
+
+  <mat-tab-group disableRipple class="content-box">
+    <mat-tab label="Profile">
+      <ng-container *ngTemplateOutlet="userProfile">
+      </ng-container>
+    </mat-tab>
+    <mat-tab label="Calling" [disabled]="!lineAssociation">
+      <app-user-calling *ngIf="lineAssociation" [siteId]="siteId"
+                        (onExtensionChange)="onExtensionChange()"></app-user-calling>
+    </mat-tab>
+    <mat-tab label="Devices">
+      dev
+<!--      //[disabled]="!user?.devices?.length"-->
+      <app-device-list [devices]="user?.devices" (onDeviceSelect)="onDeviceSelect($event)"></app-device-list>
+    </mat-tab>
+    <mat-tab label="Lines" [disabled]="true"></mat-tab>
+    <mat-tab label="Features" [disabled]="true"></mat-tab>
+  </mat-tab-group>
+
+  <ng-template #userProfile>
+    <form *ngIf="user && form" [formGroup]="form">
+      <div class="info-boxes-container">
+        <!--    USER INFO BOX-->
+        <div class="user-info-box user-details-box">
+          <h3 class="user-box-title">User Details</h3>
+          <div class="form-holder__inputs">
+            <div class="input-holder">
+              <div class="input-holder__name">User Id</div>
+              <div class="input-holder__input">
+                <mat-form-field appearance="outline">
+                  <input formControlName="userid" matInput (input)="onChangeField('userid')">
+                  <mat-error
+                    *ngIf="form.get('userid').hasError('required')">
+                    <i class="fa fa-exclamation-triangle"></i>
+                    This field is required
+                  </mat-error>
+                  <mat-error *ngIf="form.get('userid').hasError('exist')">
+                    <i class="fa fa-exclamation-triangle"></i>
+                    User ID already exists
+                  </mat-error>
+                </mat-form-field>
+              </div>
+            </div>
+            <mat-divider></mat-divider>
+            <div class="input-holder">
+              <div class="input-holder__name">Email</div>
+              <div class="input-holder__input">
+                <mat-form-field appearance="outline">
+                  <input formControlName="email" matInput (input)="onChangeField('email')">
+                  <mat-error
+                    *ngIf="form.get('email').touched && form.get('email').hasError('required')">
+                    <i class="fa fa-exclamation-triangle"></i>
+                    This field is required
+                  </mat-error>
+                  <mat-error *ngIf="form.get('email').touched && form.get('email').hasError('pattern')">
+                    <i class="fa fa-exclamation-triangle"></i>
+                    Please enter valid email
+                  </mat-error>
+                </mat-form-field>
+              </div>
+            </div>
+            <mat-divider></mat-divider>
+            <div class="input-holder">
+              <div class="input-holder__name">Fisrt Name</div>
+              <div class="input-holder__input">
+                <mat-form-field appearance="outline">
+                  <input formControlName="firstName" matInput (input)="onChangeField('firstName')">
+                </mat-form-field>
+              </div>
+            </div>
+            <mat-divider></mat-divider>
+            <div class="input-holder">
+              <div class="input-holder__name">Last Name</div>
+              <div class="input-holder__input">
+                <mat-form-field appearance="outline">
+                  <input formControlName="lastName" matInput (input)="onChangeField('lastName')">
+                  <mat-error
+                    *ngIf="form.get('lastName').touched && form.get('lastName').hasError('required')">
+                    <i class="fa fa-exclamation-triangle"></i>
+                    This field is required
+                  </mat-error>
+                </mat-form-field>
+              </div>
+            </div>
+            <mat-divider></mat-divider>
+          </div>
+
+        </div>
+
+
+        <!--    USER INFO BOX-->
+        <div class="user-info-box user-details-box">
+          <h3 class="user-box-title">General User Info</h3>
+          <div class="form-holder__inputs">
+            <div class="input-holder">
+              <div class="input-holder__name">Department</div>
+              <div class="input-holder__input">
+                <mat-form-field appearance="outline">
+                  <input formControlName="department" matInput type="text" (input)="onChangeField('department')">
+                </mat-form-field>
+              </div>
+            </div>
+            <mat-divider></mat-divider>
+            <div class="input-holder">
+              <div class="input-holder__name">Manager user ID</div>
+              <div class="input-holder__input">
+                <mat-form-field appearance="outline">
+                  <input formControlName="manager" matInput type="text" (input)="onChangeField('manager')">
+                </mat-form-field>
+              </div>
+            </div>
+            <mat-divider></mat-divider>
+            <div class="input-holder">
+              <div class="input-holder__name">Associated PC</div>
+              <div class="input-holder__input">
+                <mat-form-field appearance="outline">
+                  <input formControlName="associatedPc" matInput type="text" (input)="onChangeField('associatedPc')">
+                </mat-form-field>
+              </div>
+            </div>
+            <mat-divider></mat-divider>
+            <div class="input-holder">
+              <div class="input-holder__name">Digest credentials</div>
+              <div class="input-holder__input">
+                <mat-form-field appearance="outline">
+                  <input formControlName="digestCredentials" matInput type="text"
+                         (input)="onChangeField('digestCredentials')">
+                </mat-form-field>
+              </div>
+            </div>
+            <mat-divider></mat-divider>
+            <div class="input-holder">
+              <div class="input-holder__name">User profile</div>
+              <div class="input-holder__input">
+                <app-lazy-loading-select
+                  [siteId]="siteId"
+                  [controlName]="'userProfile'"
+                  [form]="user.form"
+                  (changeField)="changeField('userProfile')"
+                  [optionsToken]="'userProfiles'"
+                ></app-lazy-loading-select>
+              </div>
+            </div>
+            <mat-divider></mat-divider>
+            <div class="input-holder">
+              <div class="input-holder__name">Mobile voice access</div>
+              <div class="input-holder__input">
+                <mat-slide-toggle
+                  formControlName="enableMobileVoiceAccess"
+                  (change)="onChangeField('enableMobileVoiceAccess')"
+                  [checked]="user.enableMobileVoiceAccess">
+                </mat-slide-toggle>
+              </div>
+            </div>
+            <mat-divider></mat-divider>
+            <div class="input-holder">
+              <div class="input-holder__name">Userlocale</div>
+              <div class="input-holder__input">
+                <app-lazy-loading-select
+                  [siteId]="siteId"
+                  [controlName]="'userLocale'"
+                  [form]="user.form"
+                  (changeField)="changeField($event)"
+                  [optionsToken]="'userLocales'"
+                  [default]="{key: '', value: 'None', disabled: false}">
+                </app-lazy-loading-select>
+              </div>
+            </div>
+            <mat-divider></mat-divider>
+            <div class="input-holder">
+              <div class="input-holder__name">Confirm digest credentials</div>
+              <div class="input-holder__input">
+                <mat-form-field appearance="outline">
+                  <input formControlName="confirmDigestCredentials" matInput type="text"
+                         (input)="onChangeField('confirmDigestCredentials')">
+                </mat-form-field>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!--    USER INFO BOX-->
+        <div class="user-info-box user-details-box">
+          <h3 class="user-box-title">Contact Information</h3>
+          <div class="form-holder__inputs">
+            <div class="input-holder">
+              <div class="input-holder__name">Middle Name</div>
+              <div class="input-holder__input">
+                <mat-form-field appearance="outline">
+                  <input matInput type="text" formControlName="middleName" (input)="onChangeField('middleName')">
+                </mat-form-field>
+              </div>
+            </div>
+            <mat-divider></mat-divider>
+            <div class="input-holder">
+              <div class="input-holder__name">Telephone Number</div>
+              <div class="input-holder__input">
+                <mat-form-field appearance="outline">
+                  <input matInput type="number" formControlName="telephoneNumber"
+                         (input)="onChangeField('telephoneNumber')">
+                </mat-form-field>
+              </div>
+            </div>
+            <mat-divider></mat-divider>
+            <div class="input-holder">
+              <div class="input-holder__name">Mobile Number</div>
+              <div class="input-holder__input">
+                <mat-form-field appearance="outline">
+                  <input matInput type="number" formControlName="mobileNumber" (input)="onChangeField('mobileNumber')">
+                </mat-form-field>
+              </div>
+            </div>
+            <mat-divider></mat-divider>
+            <div class="input-holder">
+              <div class="input-holder__name">Digest credentials</div>
+              <div class="input-holder__input">
+                <mat-form-field appearance="outline">
+                  <input matInput type="text" formControlName="digestCredentials"
+                         (input)="onChangeField('digestCredentials')">
+                </mat-form-field>
+              </div>
+            </div>
+            <mat-divider></mat-divider>
+            <div class="input-holder">
+              <div class="input-holder__name">Diractory URI</div>
+              <div class="input-holder__input">
+                <mat-form-field appearance="outline">
+                  <input matInput type="text" formControlName="directoryUri" (input)="onChangeField('directoryUri')">
+                </mat-form-field>
+              </div>
+            </div>
+            <mat-divider></mat-divider>
+            <div class="input-holder">
+              <div class="input-holder__name">Title</div>
+              <div class="input-holder__input">
+                <mat-form-field appearance="outline">
+                  <input matInput type="text" formControlName="title" (input)="onChangeField('title')">
+                </mat-form-field>
+              </div>
+            </div>
+            <mat-divider></mat-divider>
+            <div class="input-holder">
+              <div class="input-holder__name">Home Number</div>
+              <div class="input-holder__input">
+                <mat-form-field appearance="outline">
+                  <input matInput type="number" formControlName="homeNumber" (input)="onChangeField('homeNumber')">
+                </mat-form-field>
+              </div>
+            </div>
+            <mat-divider></mat-divider>
+            <div class="input-holder">
+              <div class="input-holder__name">Pager Number</div>
+              <div class="input-holder__input">
+                <mat-form-field appearance="outline">
+                  <input matInput type="number" formControlName="pagerNumber" (input)="onChangeField('pagerNumber')">
+                </mat-form-field>
+              </div>
+            </div>
+            <mat-divider></mat-divider>
+            <div class="input-holder">
+              <div class="input-holder__name">Display Name</div>
+              <div class="input-holder__input">
+                <mat-form-field appearance="outline">
+                  <input matInput type="text" formControlName="displayName" (input)="onChangeField('displayName')">
+                </mat-form-field>
+              </div>
+            </div>
+          </div>
+        </div>
+
+      </div>
+
+    </form>
+  </ng-template>
+</div>
+
+<!--<mat-progress-spinner *ngIf="dataPending"-->
+<!--  class="page-spinner"-->
+<!--  mode="indeterminate"-->
+<!--  [diameter]="120"></mat-progress-spinner>-->