@tuki-io/tuki-widgets 0.0.133 → 0.0.134

package/projects/tuki/widgets/user-manage/src/user-info/user-info.component.scss

@@ -0,0 +1,121 @@
+// $base-font-size: 16px;
+
+// @function rem($px) {
+//   @return ($px / $base-font-size) * 1rem;
+// }
+
+.info-holder {
+  display: flex;
+  gap: 0.75rem;
+  align-items: center;
+  font-family: "Inter", sans-serif;
+  height: 102px;
+  width: 100%;
+  background: white;
+  // margin: 0 0 30px 0;
+  padding: 0 4.375rem 0;
+  font-family: poppins, sans-serif;
+
+  &__user-image {
+    img {
+      width: 40px;
+      border-radius: 120px;
+      margin: 20px 0 0 0;
+    }
+  }
+
+  &__user-information {
+    gap: 10px;
+    display: flex;
+    flex-direction: column;
+  }
+
+  &__user-name {
+    font-size: 20px;
+    font-weight: 600;
+  }
+
+  &__user-breadcrumbs {
+    display: flex;
+    gap: 8px;
+    font-weight: 400;
+    font-size: 14px;
+    color: rgba(0, 0, 0, 0.7);
+    align-items: center;
+  }
+
+  .is-active {
+    display: flex;
+    gap: 0.5rem;
+    align-items: center;
+  }
+
+  .icon-text-wrapper {
+    display: flex;
+    gap: 0.5rem;
+    align-items: center;
+
+    .icon-separator {
+      border-radius: 50%;
+      flex-shrink: 0;
+      border-radius: 50%;
+      background-color: rgba(0, 0, 0, 0.75);
+      inline-size: .25rem;
+      block-size: .25rem;
+      margin-inline-end: .25rem;
+    }
+  }
+
+  .info-holder__user-image {
+    width: 40px;
+    height: 40px;
+
+    .icon-people-regular {
+      background-image: url('../assets/icons/people-regular.svg');
+      background-repeat: no-repeat;
+      background-position: center;
+      height: 40px;
+      width: 40px;
+      display: block;
+      background-size: contain;
+    }
+  }
+}
+.icon-user-status {
+  width: .5rem;
+  height: .5rem;
+  border-radius: 50%;
+  background-color: #707070;
+}
+.icon-user-status.icon-user-status-active  {
+  background-color: #1d805f;
+  display:inline-block;
+}
+
+.action-btn-wrapper {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+
+  button {
+    background-color: #000000f2;
+    color: #fffffff2;
+    position: relative;
+    display: inline-flex;
+    gap: 6px;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden !important;
+    padding: 8px .75rem;
+    border: 1px solid transparent;
+    border-radius: 6.25rem;
+    font-weight: 500;
+    font-size: 14px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    transition: all .1s cubic-bezier(.25, .1, .25, 1);
+    inline-size: min-content;
+    max-inline-size: 100%;
+  }
+}

package/projects/tuki/widgets/user-manage/src/user-info/user-info.component.ts

@@ -0,0 +1,19 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'app-user-info',
+  templateUrl: './user-info.component.html',
+  styleUrls: ['./user-info.component.scss']
+})
+export class UserInfoComponent {
+  @Input()
+  name!: string;
+  @Input()
+  active!: boolean;
+  @Input()
+  email!: string;
+  @Input()
+  position!: string;
+
+
+}

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

@@ -0,0 +1,313 @@
+<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]="user.siteName ? 'Member of ' + user.siteName : ''"></app-user-info>
+
+  <mat-tab-group disableRipple class="tabs-container">
+    <!-- <mat-tab label="Summary">
+      <ng-container *ngTemplateOutlet="userProfile">
+      </ng-container>
+    </mat-tab> -->
+    <mat-tab label="Profile">
+      <ng-container *ngTemplateOutlet="userProfile">
+      </ng-container>
+    </mat-tab>
+    <!-- <mat-tab label="General">
+      <ng-container *ngTemplateOutlet="userProfile">
+      </ng-container>
+    </mat-tab> -->
+    <!-- <mat-tab label="Meetings">
+      <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="Messaging">
+      <ng-container *ngTemplateOutlet="userProfile">
+      </ng-container>
+    </mat-tab> -->
+    <!-- <mat-tab label="Hybrid Services">
+      <ng-container *ngTemplateOutlet="userProfile">
+      </ng-container>
+    </mat-tab> -->
+    <mat-tab label="Devices" [disabled]="!user?.devices || !user?.devices.length">
+      <app-device-list [devices]="user?.devices" (onDeviceSelect)="onDeviceSelect($event)"></app-device-list>
+    </mat-tab>
+    <!-- <mat-tab label="Vidcast">
+      <ng-container *ngTemplateOutlet="userProfile">
+      </ng-container>
+    </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">Primary 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>
+          </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 class="custom-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]="70" strokeWidth="3"></mat-progress-spinner>-->