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

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

@@ -1,110 +0,0 @@
-<div
-  style="
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    background-color: white;
-  "
->
-  <!-- <div class="content-box"> -->
-  <div class="info-holder">
-    <div class="info-holder__user-image">
-      <i class="icon-people-regular"></i>
-    </div>
-    <div class="info-holder__user-information">
-      <div class="info-holder__user-name">
-        {{ name }}
-        <ng-container *ngIf="webexUUID">
-          <span
-            [matTooltip]="'Webex Calling'"
-            matTooltipPosition="right"
-            style="
-              display: inline-flex;
-              margin-left: 8px;
-              vertical-align: middle;
-            "
-          >
-            <img src="assets/icons/webex.svg" width="20" alt="" />
-          </span>
-        </ng-container>
-        <ng-container *ngIf="!webexUUID">
-          <span
-            *ngIf="cucmid == ON_PREM_ID"
-            [matTooltip]="'UCM'"
-            matTooltipPosition="right"
-            style="
-              display: inline-flex;
-              margin-left: 8px;
-              vertical-align: middle;
-            "
-          >
-            <img src="assets/icons/local_24.svg" width="20" alt="" />
-          </span>
-          <span
-            *ngIf="cucmid != ON_PREM_ID"
-            [matTooltip]="'Webex Calling DI'"
-            matTooltipPosition="right"
-            style="
-              display: inline-flex;
-              margin-left: 8px;
-              vertical-align: middle;
-            "
-          >
-            <img src="assets/icons/di_cloud_24.svg" width="20" alt="" />
-          </span>
-        </ng-container>
-      </div>
-      <div class="info-holder__user-breadcrumbs">
-        <div class="is-active" *ngIf="active; else notActive">
-          <span class="icon-user-status icon-user-status-active"></span>Active
-        </div>
-        <div class="icon-text-wrapper">
-          <div class="icon-separator"></div>
-          <div class="email">{{ email }}</div>
-        </div>
-        <div class="icon-text-wrapper">
-          <div class="icon-separator"></div>
-          <div class="position">{{ position }}</div>
-        </div>
-      </div>
-    </div>
-    <div class="action-btn-wrapper">
-      <button disabled style="opacity: 0.5; cursor: not-allowed">
-        <span>Actions</span>
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          width="12"
-          height="14"
-          viewBox="0 0 32 32"
-          style="vertical-align: middle"
-        >
-          <path
-            d="M28.708 9.293a1 1 0 0 0-1.415 0L16 20.586 4.707 9.293a1 1 0 0 0-1.414 1.414l12 12a1 1 0 0 0 1.414 0l12-12a1 1 0 0 0 0-1.414"
-            fill="currentColor"
-          />
-        </svg>
-      </button>
-    </div>
-  </div>
-  <!-- </div> -->
-</div>
-
-<ng-template #notActive>
-  <div class="is-active">
-    <svg
-      width="8"
-      height="9"
-      viewBox="0 0 8 9"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
-        d="M4 8.5C6.20914 8.5 8 6.70914 8 4.5C8 2.29086 6.20914 0.5 4 0.5C1.79086 0.5 0 2.29086 0 4.5C0 6.70914 1.79086 8.5 4 8.5Z"
-        fill="grey"
-      />
-    </svg>
-    <div>Not active</div>
-  </div>
-</ng-template>

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

@@ -1,121 +0,0 @@
-// $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

@@ -1,28 +0,0 @@
-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;
-  @Input()
-  cucmid!: number;
-  // @Input()
-  // webexUUID!: string;
-
-  public readonly ON_PREM_ID = 2542;
-
-  get webexUUID() {
-    const uuid = localStorage.getItem('webexUUID');
-    return uuid === 'null' ? null : uuid;
-  }
-}

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

@@ -1,313 +0,0 @@
-<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 : ''" [cucmid]="user.cucmId"></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>-->