@tuki-io/tuki-widgets 0.0.0

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

@@ -0,0 +1,291 @@
+<div class="header-box">
+  <div class="content-box">
+    <div class="header-back-block">
+      <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M5.70746 7.99987L11.3539 2.35352C11.4453 2.25928 11.496 2.13287 11.495 2.00159C11.494 1.8703 11.4414 1.74467 11.3486 1.65183C11.2558 1.55899 11.1301 1.50639 10.9988 1.50539C10.8676 1.50438 10.7411 1.55506 10.6469 1.64647L4.64691 7.64647C4.55316 7.74023 4.50049 7.8674 4.50049 7.99999C4.50049 8.13259 4.55316 8.25975 4.64691 8.35352L10.6469 14.3535C10.6931 14.4011 10.7482 14.439 10.8092 14.4651C10.8702 14.4912 10.9357 14.5049 11.002 14.5054C11.0683 14.5059 11.134 14.4932 11.1954 14.468C11.2567 14.4429 11.3125 14.4058 11.3593 14.3589C11.4062 14.312 11.4433 14.2563 11.4685 14.1949C11.4936 14.1336 11.5063 14.0679 11.5058 14.0016C11.5053 13.9353 11.4916 13.8697 11.4655 13.8088C11.4394 13.7478 11.4015 13.6926 11.3539 13.6465L5.70746 7.99987Z" fill="black" fill-opacity="0.95"/>
+      </svg>
+      Users
+    </div>
+    <div class="header-button-block">
+      <button mat-raised-button
+              [disabled]="!userService.hasUnsavedChanges()"
+              (click)="saveChanges()">Save</button>
+    </div>
+  </div>
+</div>
+<app-user-info *ngIf="user" [name]="userName" [email]="user.email" [active]="false" [position]="'Sales Senior VP'"></app-user-info>
+
+<mat-tab-group disableRipple class="content-box">
+  <mat-tab label="Profile">
+    <ng-container *ngTemplateOutlet="userProfile">
+    </ng-container>
+  </mat-tab>
+  <mat-tab ></mat-tab>
+  <mat-tab ></mat-tab>
+  <mat-tab ></mat-tab>
+</mat-tab-group>
+
+<ng-template #userProfile>
+  <form *ngIf="user && form" [formGroup]="form">
+    <div class="info-boxes-container">
+      <div *ngIf="dataPending == true" class="data-loader">
+        <mat-spinner [diameter]="50"></mat-spinner>
+      </div>
+
+      <!--    USER INFO BOX-->
+      <div class="user-info-box user-details-box">
+        <h3 class="user-box-title">User General Info</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">User General 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>
+
+<mat-progress-spinner *ngIf="dataPending"
+  class="page-spinner"
+  mode="indeterminate"
+  [diameter]="120"></mat-progress-spinner>