@tuki-io/tuki-widgets 0.0.133 → 0.0.134

package/projects/tuki/widgets/user-manage/src/classes/user-interface.ts

@@ -0,0 +1,225 @@
+/*
+
+export interface UserInterface {
+  userid: string;
+  firstName: string;
+  lastName: string;
+  middleName: string;
+  email: string;
+  department: string;
+  telephoneNumber: string;
+  homeNumber: string;
+  mobileNumber: string;
+  pagerNumber: string;
+  displayName: string;
+  features: string[];
+  ldapIntegrated: boolean;
+  sparkLicenses: any[];
+  extensionMobility: ExtensionMobilityInterface;
+  singleNumberReach?: SingleNumberReachInterface;
+  primaryLineReference: LineDirectoryInterface;
+  voicemail: VoicemailInterface;
+  devices: DeviceInterface[];
+  deviceProfiles: DeviceInterface[];
+  lines: LineInterface[];
+  subscribeCss: string;
+  presenceGroup: string;
+  allowDeviceControlFromCti: boolean;
+  enableCrossClusterEm: boolean;
+  ucServiceProfile: string;
+  manager: string;
+  title: string;
+  associatedPc: string;
+  userProfile: string;
+  enableUserToHostConferenceNow: boolean;
+  attendeesAccessCode: string;
+  enableMobileVoiceAccess: boolean;
+  mlppUserIdNumber: string;
+  mlppPrecedencePattern: string;
+  userLocale: string;
+  siteId: number;
+  siteName: string;
+  location: string;
+  lineAppearances: Array<LineAppearance>;
+  meetMes: Array<MeetMeConferencing>;
+  homeCluster: boolean;
+  vmOnlyUser?: boolean;
+  directoryUri:string;
+}
+
+export interface SingleNumberReachInterface {
+  remoteDestinationProfileName: string;
+  remoteDestinations?: RemoteDestinationInterface[];
+  devicePool?: string;
+  css?: string;
+  rerouteCss?: string;
+}
+
+export interface VoicemailInterface {
+  callHandlerObjectId?: string;
+  extension: string;
+  vmUserTemplate?: string;
+  vmPassword?: VoicemailSettingsInterface;
+  vmMailbox?: MailboxInterface;
+  vmUnifiedMessagingAccount?: UnifiedMessagingAccount[];
+  notificationDevices?: VoicemailNotifications[];
+  alternateExtensions?: AlternateExtensions[];
+  language?: LanguageMailbox;
+  messageActions?: MessageActions;
+  webAppPassword?: WebAppPassword;
+  vmPasswordSettings?: VmPasswordSettings;
+  pkid?: string;
+}
+
+export interface ExtensionMobilityInterface {
+  deviceType: string;
+  deviceProfileName: string;
+  buttonTemplate: string;
+  services: string[];
+  protocol: string;
+  userLocale: string;
+  lineAssociations: LineAssociationInterface[];
+  speedDials: SpeedDialInterface[];
+}
+
+export interface SpeedDialInterface {
+  index: number;
+  position: number;
+  destination: string;
+  label: string;
+  editMode?: boolean;
+}
+
+export interface DeviceInterface {
+  name: string;
+  newName: string;
+  pkid: string;
+  entityChangeType: EntityChangeType;
+  deviceType: string;
+  protocol: string;
+  description: string;
+  buttonTemplate: string;
+  softkeyTemplate: string;
+  devicePoolName: string;
+  location: string;
+  userLocale: string;
+  enabledExtensionMobility: boolean;
+  callingSearchSpaceName: string;
+  services: string[];
+  networkLocale: string;
+  securityProfile: string;
+  lineAssociations: LineAssociationInterface[];
+  speedDials: SpeedDialInterface[];
+  sipProfile: string;
+  subscribeCallingSearchSpaceName: string;
+  commonPhoneConfigName: string;
+  ctiRemoteDevice: boolean;
+  firstExpansionModule: string;
+  secondExpansionModule: string;
+  thirdExpansionModule: string;
+  builtInBridge: string;
+  extraOptions?: DeviceExtraOptionsInterface;
+  formDisabledControls?: string[];
+  sharedUsers: string[];
+  busyLampFields: BusyLampFieldsInterface[];
+  meetMeEnabled: boolean;
+  deviceKind;
+  isCtiRoutePoint?: boolean;
+  cucmId: string;
+  plarDevice?: boolean;
+  firmwareVersion;
+  certificateOperation: string;
+  authenticationMode: string;
+  authenticationString?: string;
+  rsaKeySize?: string;
+  operationCompletesBy: string;
+  certificateStatus: string;
+  day?: string;
+  month?: string;
+  year?: string;
+  hour?: string;
+  securityProfileUuid?: string;
+  excludeDeviceExtraOptions?: boolean;
+}
+
+export interface DeviceViewConfiguration {
+  viewMode: any;
+  editMode: boolean;
+}
+
+export enum DeviceViewType {
+  details = 0,
+  lines = 1,
+  speedDials = 2,
+  blf = 2,
+}
+
+export interface LineAssociationInterface {
+  index: number;
+  position?: number;
+  e164Mask: string;
+  textLabel: string;
+  displayLabel: string;
+  displayLabelAscii: string;
+  directoryNumber: LineDirectoryInterface;
+  didPattern: TranslationPatternInterface;
+  mappedDids: Array<string>;
+  linePkid: string;
+  maxNumberOfCalls: number;
+  busyTrigger: number;
+  recordingOption: RecordingOptions;
+  recordingProfile: string;
+  recordingMediaSource: string;
+  visualMWI: string;
+  audibleMWI: string;
+  ringSetting_idle: string;
+  ringSetting_active: string;
+  pickupAAS_idle: string;
+  pickupAAS_active: string;
+  monitorCSS: string;
+  logMissedCall: string;
+  callInfoDisplay: LineCallInfoDisplayInterface;
+  lineLocalId: string;
+  sharedUsers: string[];
+  sharedDevices: string[];
+  ownerUserId: Array<string>;
+  associated: boolean;
+  populateWithDid: boolean;
+}
+
+export interface LineCallInfoDisplayInterface {
+  callerName: string;
+  callerNumber: string;
+  redirectedNumber: string;
+  dialedNumber: string;
+}
+
+export interface LineDirectoryInterface {
+  directoryNumber: string;
+  routePartitionName: string;
+  pkid: string;
+  dnType: string;
+  subType?: string;
+  templateDirectoryNumber?: string;
+}
+
+export interface TranslationPatternInterface {
+  pattern: string;
+  calledPartyTransformationMask: string;
+  description?: string;
+  site?: SiteShortDataInterface;
+  hasMultipleSites?: boolean;
+  multipleSitesId?: string;
+}
+
+export interface SiteShortDataInterface {
+  id: number;
+  name: string;
+}
+
+export enum RecordingOptions {
+  disabled = 'Call Recording Disabled',
+  auto_enabled = 'Automatic Call Recording Enabled',
+  selective_enabled = 'Selective Call Recording Enabled'
+}
+*/

package/projects/tuki/widgets/user-manage/src/classes/user-list.ts

@@ -0,0 +1,42 @@
+import { DeviceInterface } from '../classes/device';
+import { LineInterface } from '../classes/line';
+
+export class ListUser {
+  // @ts-ignore
+  userid: string;
+  firstName!: string;
+  lastName!: string;
+  email!: string;
+  telephoneNumber!: string;
+  devices: DeviceInterface[] = [];
+  deviceProfiles: DeviceInterface[] = [];
+  lines!: LineInterface[];
+  siteId!: number;
+  siteName!: string;
+  webexUUID!: string;
+  cucmId!: number;
+  isMigrated!: boolean;
+
+  constructor(user?: ListUser) {
+    if (user) {
+      Object.assign(this, user);
+    }
+  }
+}
+
+export interface ListUserInterface {
+  userid: string;
+  firstName: string;
+  lastName: string;
+  email: string;
+  telephoneNumber: string;
+  viewMode: any;
+  devices: DeviceInterface[];
+  deviceProfiles: DeviceInterface[];
+  lines: LineInterface[];
+  siteId: number;
+  siteName: string;
+  webexUUID: string;
+  cucmId: number;
+  isMigrated: boolean;
+}

package/projects/tuki/widgets/user-manage/src/classes/user.ts

@@ -0,0 +1,8 @@
+export enum UserView {
+  USER = 0,
+  DEVICE = 1,
+  LINE = 2,
+  SNR = 3,
+  FEATURES = 4,
+  USER_COLLECTION = 5
+}

package/projects/tuki/widgets/user-manage/src/common-functions.ts

@@ -0,0 +1,16 @@
+export const getSavableData = (model: any, exclude?: Array<string>) => {
+  let result = Object.keys(model);
+  if (exclude && exclude.length) {
+    result = result.filter(key => !exclude.some(item => item === key));
+  }
+  return result.reduce((result, key) => {
+    if (model[key] instanceof Array && model[key].length && model[key][0].getSavableData) {
+      (result as any)[key] = model[key].map((item: any) => item.getSavableData());
+    } else if (model[key] instanceof Object && model[key].getSavableData) {
+      (result as any)[key] = model[key].getSavableData();
+    } else {
+      (result as any)[key] = model[key];
+    }
+    return result;
+  }, {});
+};

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

@@ -0,0 +1,32 @@
+<div class="info-boxes-container">
+  <!--    USER INFO BOX-->
+  <div class="user-info-box user-details-box">
+      <h3 class="user-box-title">Devices</h3>
+      <div class="form-holder__inputs">
+        <ng-container *ngFor="let device of devices; let isLast = last">
+          <app-device-row [device]="device" (onDeviceSelect)="selectDevice($event)"></app-device-row>
+          <mat-divider></mat-divider>
+        </ng-container>
+        <button class="add-btn">
+          Add device
+        </button>
+      </div>
+  </div>
+
+  <div class="user-info-box user-details-box">
+      <h3 class="user-box-title">Devices settings</h3>
+      <div class="form-holder__inputs">
+        <div class="input-holder">
+          <div class="input-holder__name">
+            <span class="phone-name">Software upgrade channel</span>
+          </div>
+          <div class="input-holder__input">
+            <div class="info-labels">
+              <span class="info-icon"></span>
+              <span class="status-label">Software upgrade channel setting has moved</span>
+            </div>
+          </div>
+        </div>
+      </div>
+  </div>
+</div>

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

@@ -0,0 +1,305 @@
+@import "../styles/_variables";
+
+.info-holder {
+  display: flex;
+  gap: 16px;
+  align-items: center;
+  font-family: "Inter", sans-serif;
+  height: 102px;
+  width: 100%;
+  background: white;
+  margin: 0 0 30px 0;
+
+  &__user-image {
+    img {
+      width: 40px;
+      border-radius: 120px;
+      margin: 20px 0 0 0;
+    }
+  }
+
+  &__user-information {
+    padding: 10px;
+    margin: 10px;
+    gap: 10px;
+    display: flex;
+    flex-direction: column;
+  }
+
+  &__user-name {
+    font-size: 20px;
+    font-weight: 500;
+  }
+
+  &__user-breadcrumbs {
+    display: flex;
+    gap: 8px;
+    font-weight: 400;
+    font-size: 14px;
+    color: rgba(0, 0, 0, 0.7);
+    align-items: center;
+  }
+
+  .icon-separator {
+    height: 5px;
+    width: 5px;
+    background-color: rgba(0, 0, 0, 0.7);
+    border-radius: 50%;
+  }
+
+  .is-active {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+  }
+}
+.icon-user-status {
+  width: .5rem;
+  height: .5rem;
+  border-radius: 50%;
+  background-color: #707070;
+  margin: 0 5px 0 0;
+}
+.icon-user-status.icon-user-status-active  {
+  background-color: #1d805f;
+  display:inline-block;
+}
+// Devices list
+
+.webex-list {
+  padding: 2.5rem;
+}
+
+.webex-list-header {
+  display: flex;
+  align-items: center;
+
+  padding: 1rem;
+}
+
+.webex-list-header__hr {
+  width: 100%;
+
+  font-size: 12px;
+}
+
+// Device Row --------------
+
+.device-item {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background-color: white;
+  border-bottom: 1px solid #b0b0b0;
+  padding: 0.8rem;
+  z-index: 10;
+  cursor: pointer;
+  transition: background-color 0.3s;
+  cursor: pointer;
+
+  /*&:hover {
+    background-color: #ededed;
+  }*/
+}
+
+.device-item__td {
+  width: 100%;
+}
+
+.device-item__actions-menu {
+  position: absolute;
+  margin: 0 1rem;
+  right: 0;
+}
+
+.device-item__more {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  cursor: pointer;
+
+  color: #b0b0b0;
+
+  border-radius: 50%;
+  padding: 0.5rem;
+
+  transition: background-color 0.3s ease-in-out;
+
+  /*&:hover {
+    background-color: #ffffff;
+  }*/
+}
+
+
+
+.info-boxes-container {
+  padding: 24px 0;
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+
+  .user-info-box {
+    background: white;
+    display: flex;
+    gap: 2rem;
+    border-radius: 8px;
+    border: rgba(0, 0, 0, 0.2) 1px solid;
+    padding: 24px;
+    font-weight: 400;
+    font-size: 14px;
+
+    .user-box-title {
+      display: flex;
+      font-weight: 500;
+      font-size: 16px;
+      max-inline-size: 11.25rem;
+      flex: 1;
+      color: #000000f2;
+      margin-top: 3px;
+      font-family: $poppins-font;
+    }
+
+    .form-holder__inputs {
+      display: flex;
+      flex-direction: column;
+      flex: 1;
+
+      & .input-holder {
+        display: flex;
+        gap: 1.5rem;
+        padding: 0.5rem 0;
+        font-size: 0.75rem;
+        line-height: 1.25;
+        align-items: center;
+        overflow: hidden;
+
+        &:nth-child(1) {
+          padding-top: 0;
+        }
+
+        &:last-child {
+          padding-bottom: 0;
+        }
+
+        &__name{
+          font-weight: 500 !important;
+          font-size: 14px !important;
+          flex-basis: 12rem;
+          display: flex;
+          gap: 0.5rem;
+          align-items: center;
+          flex-basis: 15rem !important;
+
+          .phone-icon {
+            inline-size: 2.25rem;
+            block-size: 2.25rem;
+            background-repeat: no-repeat;
+            background-position: center;
+            height: 40px;
+            width: 40px;
+            display: block;
+            background-size: contain;
+          }
+          
+          .phone-name {
+
+          }
+
+          .primary-label {
+            background-color: #08599c;
+            display: inline-flex;
+            gap: .25rem;
+            align-items: center;
+            justify-content: center;
+            padding: .25rem .5rem;
+            border-radius: .25rem;
+            color: #fffffff2;
+            font-size: .75rem;
+            line-height: 1;
+            text-align: center;
+          }
+        }
+
+        &__input{
+          display: flex;
+          flex: 1;
+          gap: 0.75rem;
+          align-items: center;
+
+          .status-indicator {
+            height: 7px;
+            width: 7px;
+            background-color: #707070;
+            border-radius: 50px;
+          }
+
+          .status-label {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 1.5rem;
+            overflow: auto;
+            font-size: 0.9rem;
+            line-height: 1.25;
+            color: #000000f2;
+          }
+
+          .info-labels {
+            display: flex;
+            gap: 0.25rem;
+            align-items: center;
+            justify-content: center;
+            padding: .25rem .5rem;
+            border: .0625rem solid transparent;
+            border-radius: .25rem;
+            line-height: 1;
+            text-overflow: ellipsis;
+            border-color: #d6b220;
+            background-color: #f7f6dc;
+            color: #735107;
+
+            .info-icon {
+              inline-size: 2.25rem;
+              block-size: 2.25rem;
+              background-repeat: no-repeat;
+              background-position: center;
+              height: 13px;
+              width: 13px;
+              display: block;
+              background-size: contain;
+              background-image: url('../assets/icons/info-circle-bold.svg');
+            }
+          }
+        }
+      }
+
+      .add-btn {
+        position: relative;
+        display: inline-flex;
+        gap: .375rem;
+        align-items: center;
+        justify-content: center;
+        overflow: hidden !important;
+        padding: 0.75rem;
+        border: .0625rem solid transparent;
+        border-radius: 6.25rem;
+        font-weight: 500;
+        font-size: .875rem;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        transition: all .1s cubic-bezier(.25, .1, .25, 1);
+        inline-size: min-content;
+        max-inline-size: 100%;
+        border-color: #00000080;
+        background-color: #00000000;
+        color: #000000f2;
+        margin: 1rem 0;
+        block-size: 2rem;
+      }
+      .mat-divider {
+        margin: 0px !important;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,26 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { Device } from '../classes/device';
+
+@Component({
+  selector: 'app-device-list',
+  templateUrl: './device-list.component.html',
+  styleUrls: ['./device-list.component.scss']
+})
+export class DeviceListComponent {
+  @Input() devices!: any;
+  @Output()
+  onDeviceSelect = new EventEmitter<Device>();
+
+  constructor() {
+    console.log('devices list');
+
+  }
+
+
+  selectDevice(device: Device): void {
+    localStorage.setItem('deviceType', device.deviceType);
+    this.onDeviceSelect.emit(device);
+  }
+
+
+}

package/projects/tuki/widgets/user-manage/src/device-list/device-row/device-row.component.html

@@ -0,0 +1,13 @@
+<div class="input-holder" (click)="selectDevice(device)">
+    <div class="input-holder__name">
+        <i class="phone-icon" [ngClass]="getImageClass(device.deviceType)"></i>
+        <span class="phone-name">{{ device.deviceType }}</span>
+        <!-- <span class="primary-label">Primary</span> -->
+    </div>
+    <div class="input-holder__input">
+    <ng-container>
+        <span class="status-indicator"></span>
+        <span class="status-label">Status unavailable</span>
+        <i class="arrow-right-icon"></i>
+    </ng-container>
+</div>