@tuki-io/tuki-widgets 0.0.0

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,40 @@
+import { DeviceInterface } from '../classes/device';
+import { LineInterface } from '../classes/line';
+
+export class ListUser implements ListUserInterface {
+  // @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;
+
+  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;
+}

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/environments/environment.prod.ts

@@ -0,0 +1,9 @@
+export const environment = {
+  production: true,
+  apiUrl: '',
+  notificationsLifetime: 30000,
+  longNotificationsLifetime: 45000,
+  cashCleanTimer: 300000,
+  cashArrayLength: 1000,
+  matomoUrl: '',
+};

package/projects/tuki/widgets/user-manage/src/environments/environment.ts

@@ -0,0 +1,10 @@
+export const environment = {
+  production: false,
+  // apiUrl: 'http://localhost:4200',
+  apiUrl: 'http://192.168.0.191:8080',
+  notificationsLifetime: 30000,
+  longNotificationsLifetime: 45000,
+  cashCleanTimer: 900000,
+  cashArrayLength: 10000,
+  matomoUrl: 'http://192.168.0.136/matomo/',
+};

package/projects/tuki/widgets/user-manage/src/interseptors/auth.interceptor.ts

@@ -0,0 +1,36 @@
+import { Injectable } from '@angular/core';
+import {HttpEvent, HttpRequest, HttpInterceptor, HttpHandler, HttpErrorResponse} from '@angular/common/http';
+import { Observable, throwError } from 'rxjs';
+import {catchError } from 'rxjs/operators';
+
+@Injectable()
+export class AuthInterceptor implements HttpInterceptor {
+  constructor() {
+  }
+
+  intercept(
+    request: HttpRequest<any>,
+    next: HttpHandler
+  ): Observable<HttpEvent<any>> {
+    request = request.clone({
+      setHeaders: {
+        // Authorization: basicAuthHeaderString
+      }
+      , withCredentials: true
+    })
+    console.log('request :: ', request);
+
+    return next.handle(request).pipe(catchError(err => {
+      if (err instanceof HttpErrorResponse) {
+        if (err.status === 401) {
+          if (window.history.length < 3) {
+            err.error.message = '';
+          } else {
+            err.error.message = 'SESSION_INACTIVE';
+          }
+        }
+      }
+      return throwError(err);
+    }));
+  }
+}

package/projects/tuki/widgets/user-manage/src/lazy-loading-select/lazy-loading-select.component.html

@@ -0,0 +1,50 @@
+<ng-container *ngIf="standalone">
+  <mat-form-field appearance="outline">
+    <mat-select [formControl]="formControl"
+                (openedChange)="getOptions()"
+                [placeholder]="placeholder"
+                (selectionChange)="onFieldChange(controlName)"
+                [id]="id">
+      <mat-option *ngIf="default" [disabled]="default.disabled" [value]="default.key">{{default.value}}</mat-option>
+      <mat-option *ngFor="let type of options" [value]="type">
+        {{type}}
+      </mat-option>
+      <mat-progress-spinner class="field-spinner"
+                            [diameter]="20"
+                            mode="indeterminate"
+                            *ngIf="optionsPending"></mat-progress-spinner>
+    </mat-select>
+    <mat-error *ngIf="form.get(controlName)?.hasError(errorCode)">
+      <i class="fa fa-exclamation-triangle"></i>
+      {{errorText}}
+    </mat-error>
+  </mat-form-field>
+</ng-container>
+
+<!--
+This duplication is caused by the following bug: https://github.com/angular/components/issues/9411
+Which doesn't allow projection in mat-form-field
+-->
+
+<ng-container *ngIf="!standalone">
+  <mat-select *ngIf="form.get(controlName)"
+              [formControl]="formControl"
+              (openedChange)="getOptions()"
+              [placeholder]="placeholder"
+              (selectionChange)="onFieldChange(controlName)"
+              [id]="id"
+  >
+    <mat-option *ngIf="default" [disabled]="default.disabled" [value]="default.key">{{default.value}}</mat-option>
+    <mat-option *ngFor="let type of options" [value]="type">
+      {{type}}
+    </mat-option>
+    <mat-progress-spinner class="field-spinner"
+                          [diameter]="20"
+                          mode="indeterminate"
+                          *ngIf="optionsPending"></mat-progress-spinner>
+  </mat-select>
+  <mat-error *ngIf="form.get(controlName)?.hasError(errorCode)">
+    <i class="fa fa-exclamation-triangle"></i>
+    {{errorText}}
+  </mat-error>
+</ng-container>

package/projects/tuki/widgets/user-manage/src/lazy-loading-select/lazy-loading-select.component.scss

@@ -0,0 +1,3 @@
+.field-spinner {
+  margin-top: -30px;
+}

package/projects/tuki/widgets/user-manage/src/lazy-loading-select/lazy-loading-select.component.ts

@@ -0,0 +1,81 @@
+import { AfterContentInit, Component, EventEmitter, Input, Output } from '@angular/core';
+import { FormControl, FormGroup } from '@angular/forms';
+import { NotificationService } from '../services/notification.service';
+import { SiteSettingsService } from '../services/site-settings.service';
+
+export interface OptionValue {
+  key: string;
+  value: string;
+  disabled: boolean;
+}
+
+@Component({
+  selector: 'app-lazy-loading-select',
+  templateUrl: './lazy-loading-select.component.html',
+  styleUrls: ['./lazy-loading-select.component.scss']
+})
+export class LazyLoadingSelectComponent implements AfterContentInit {
+  optionsPending!: boolean;
+  options!: any;
+
+  @Input()
+  public siteId!: number
+  @Input()
+  public form!: FormGroup;
+  @Input()
+  public standalone = true;
+  @Input()
+  public placeholder!: string;
+  @Input()
+  public controlName!: string;
+  @Input()
+  public optionsToken!: string;
+  @Input()
+  public appearance = 'standard';
+  @Input()
+  public errorCode!: string;
+  @Input()
+  public errorText!: string;
+  @Input()
+  public default!: OptionValue;
+  @Input()
+  public id!: string;
+  @Output()
+  public changeField = new EventEmitter<string>();
+
+  get formControl(): FormControl {
+    return this.form?.get(this.controlName) as FormControl;
+  }
+
+
+  constructor(
+    private notificationService: NotificationService,
+    private siteSettingsService: SiteSettingsService,
+  ) {
+  }
+
+  ngAfterContentInit() {
+    this.options = [this.form?.get(this.controlName)?.value];
+  }
+
+  getOptions() {
+    if (!this.siteId && this.options.length > 1) {
+      return;
+    }
+    this.optionsPending = true;
+    this.siteSettingsService.getSelectionOptions(this.siteId, this.optionsToken)
+      .subscribe(() => {
+        this.optionsPending = false;
+        // @ts-ignore
+        this.options = this.siteSettingsService[this.optionsToken];
+      }, () => {
+        this.optionsPending = false;
+        // this.notificationService.error(this.translate.instant('COMMON.LOAD_SELECT_OPTIONS_FAILED'));
+      });
+  }
+
+  public onFieldChange(token: string) {
+    this.changeField.emit(token);
+  }
+
+}

package/projects/tuki/widgets/user-manage/src/material.module.ts

@@ -0,0 +1,85 @@
+import { NgModule } from '@angular/core';
+
+import { MatExpansionModule } from '@angular/material/expansion';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
+import { MatChipsModule } from '@angular/material/chips';
+import { MatListModule } from '@angular/material/list';
+import { MatSidenavModule } from '@angular/material/sidenav';
+import { MatTreeModule } from '@angular/material/tree';
+import { DragDropModule } from '@angular/cdk/drag-drop';
+import { MatButtonModule } from '@angular/material/button';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatInputModule } from '@angular/material/input';
+import { MatNativeDateModule } from '@angular/material/core';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatStepperModule } from '@angular/material/stepper';
+import { MatTabsModule } from '@angular/material/tabs';
+import { MatCardModule } from '@angular/material/card';
+import { MatSelectModule } from '@angular/material/select';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+import { MatTableModule } from '@angular/material/table';
+import { MatPaginatorModule } from '@angular/material/paginator';
+
+
+@NgModule({
+  imports: [
+    DragDropModule,
+    MatButtonModule,
+    MatListModule,
+    MatProgressSpinnerModule,
+    MatExpansionModule,
+    MatInputModule,
+    MatInputModule,
+    MatListModule,
+    MatTreeModule,
+    MatTreeModule,
+    MatNativeDateModule,
+    MatDatepickerModule,
+    MatTooltipModule,
+    MatAutocompleteModule,
+    MatChipsModule,
+    MatSidenavModule,
+    MatFormFieldModule,
+    MatStepperModule,
+    MatTabsModule,
+    MatCardModule,
+    MatSelectModule,
+    MatCheckboxModule,
+    MatSlideToggleModule,
+    MatTableModule,
+    MatPaginatorModule
+  ],
+  exports: [
+    DragDropModule,
+    MatButtonModule,
+    MatListModule,
+    MatProgressSpinnerModule,
+    MatExpansionModule,
+    MatInputModule,
+    MatInputModule,
+    MatListModule,
+    MatTreeModule,
+    MatTreeModule,
+    MatNativeDateModule,
+    MatDatepickerModule,
+    MatTooltipModule,
+    MatAutocompleteModule,
+    MatChipsModule,
+    MatSidenavModule,
+    MatFormFieldModule,
+    MatStepperModule,
+    MatTabsModule,
+    MatCardModule,
+    MatCheckboxModule,
+    MatSelectModule,
+    MatSlideToggleModule,
+    MatProgressSpinnerModule,
+    MatTableModule,
+    MatPaginatorModule
+  ],
+})
+export class MaterialModule {
+}

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

@@ -0,0 +1,33 @@
+<!--
+
+<div class="notification-block" role="alert" aria-live="assertive">
+  <div class="notification"
+       *ngFor="let notification of list"
+       [ngClass]="{'error': notification.isError(), 'success': notification.isSuccess()}">
+
+    <div class="flex-box">
+      <div class="notification-icons-block">
+        <i *ngIf="notification.isError()" class="fa fa-exclamation-triangle"></i>
+        <i *ngIf="notification.isWarning()" class="fa fa-hand-paper-o"></i>
+        <i *ngIf="notification.isSuccess()" class="fa fa-check"></i>
+        <i *ngIf="notification.isInfo()" class="fa fa-info-circle"></i>
+      </div>
+      <div *ngIf="!isReadMore" class="message-block">
+        {{notification.message | truncate:[93]}}
+      </div>
+      <div *ngIf="isReadMore" class="message-block">
+        {{notification.message}}
+      </div>
+    </div>
+    <div class="read-more-error link clickable" *ngIf="notification.message && notification.message.length > 93"
+         (click)="readMore()">{{(isReadMore ? 'BUTTON.COLLAPSE' : 'BUTTON.READ_MORE') | translate}}</div>
+    <button
+      class="close"
+      mat-icon-button
+      matTooltip="{{'BUTTON.CLOSE' | translate}} {{'NOTIFICATION_MSG.' + notification.type | translate}} {{'NOTIFICATION_MSG.NOTI' | translate}}"
+      (click)="removeNotification(notification)">
+      <img class="notification-icon-close" src="assets/icons/close_icon_modal.svg" alt="">
+    </button>
+  </div>
+</div>
+-->

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

@@ -0,0 +1,84 @@
+@import '../styles/variables';
+
+.notification-block {
+  right: 0;
+  top: 110px;
+  position: absolute;
+  width: 20%;
+  z-index: 100;
+
+  .read-more-error {
+    margin: 10px 13px 3px 0;
+    text-align: right;
+  }
+
+  .notification {
+    padding: 15px 0 10px 0;
+    margin-bottom: 18px;
+    color: $main-txt-color;
+    position: relative;
+    border-radius: 3px;
+    border-top: 1.5px solid $warning-border-color;
+    background: $warning-bg-color;
+    box-shadow: 0px 8px 12px 0px rgba(9, 30, 66, 0.15), 0px 0px 1px 0px rgba(9, 30, 66, 0.31);
+    width: 368px;
+    position: relative;
+
+    .notification-icons-block {
+      text-align: center;
+      width: 56px;
+    }
+    .message-block {
+      font-size: 14px;
+      font-family: $poppins-font !important;
+      word-break: break-word;
+      width: 270px;
+    }
+    .notification-icon-close {
+      height: 24px;
+    }
+
+    &.error {
+      background: #FFE9E9;
+      border-top: 1.5px solid #E16D6D;
+    }
+    &.success {
+      background: $success-bg-color;
+      border-top: 1.5px solid $success-border-color;
+    }
+    .fa-exclamation-triangle {
+      color: #E16D6D !important;
+    }
+    .fa-check {
+      color: #a0c37f !important;
+    }
+    .fa-info-circle, .fa-hand-paper-o {
+      color: #bdb89e !important;
+    }
+    .fa {
+      font-size: 20px;
+    }
+    .close {
+      position: absolute;
+      top: 2px;
+      right: -5px;
+      .fa {
+        font-size: 14px;
+      }
+    }
+    .fa {
+      margin: 0;
+      color: inherit;
+    }
+  }
+}
+
+@media screen and (max-width: 600px) {
+  .notification-block {
+    width: 50%;
+    min-width: 150px;
+  }
+
+}
+
+