@tuki-io/tuki-widgets 0.0.64 → 0.0.65

package/projects/tuki/widgets/user-manage/src/services/user.service.ts

@@ -0,0 +1,242 @@
+import {Injectable, OnInit} from '@angular/core';
+import { of, forkJoin, Subject } from 'rxjs';
+import { SimplifiedUser } from '../classes/simplified-user';
+import { API } from '../app.constants';
+import { APIService } from './api.service';
+import { map } from 'rxjs/operators';
+import { UtilsService } from './utils.service';
+import { LineAssociation } from '../classes/line-association';
+import { LineAssociationInterface } from '../classes/line-association-interface';
+import { LineService } from './line.service';
+import { SortingUtilsService } from './sorting-utils.service';
+
+@Injectable()
+export class UserService implements OnInit{
+  siteId: number = -1;
+  userId: string = '';
+  dataPending = false;
+  userIdExistPending = false;
+  hasExistedUserId = false;
+  user!: SimplifiedUser;
+  originUser!: SimplifiedUser;
+  onUserLineSaved$ = new Subject<any>();
+
+  get lineAssociation(): LineAssociation | LineAssociationInterface {
+    return this.user && this.originUser.devices && this.user.devices[0] && this.user.devices[0].lineAssociations && this.user.devices[0].lineAssociations[0];
+  }
+
+  get originLineAssociation(): LineAssociation | LineAssociationInterface {
+    return this.originUser && this.originUser.devices && this.originUser.devices[0] && this.originUser.devices[0].lineAssociations && this.originUser.devices[0].lineAssociations[0];
+  }
+
+  constructor(
+    private apiService: APIService,
+    private lineService: LineService
+  ) {
+
+  }
+
+  ngOnInit(): void {
+    console.log(this.siteId)
+  }
+
+  public fetchUserToken(siteId: number, userId: string, isLdap?: boolean, isSetNewTokenOnly?: boolean): any {
+    // isLdap TEMP because of token response issue
+    this.siteId = siteId;
+    this.userId = userId;
+    return this.apiService.fetch(API.USER_TOKEN.replace(':siteId', String(this.siteId)).replace(':userId', encodeURIComponent(encodeURIComponent(userId))))
+      .pipe(map((result: any) => {
+        const user = result && Object.values(result)[0];
+        const token = Object.keys(result)[0];
+        if (user) {
+          if (!isSetNewTokenOnly) {
+            this.setSimplifiedUser(user);
+            this.user.token = user.token ;
+          }
+          this.user.token = user.token || token;
+          this.originUser.token = user.token || token;
+        }
+      }))
+    // .pipe(this.handleError(false, true));
+  }
+
+  public updateUserFields(body: any): any {
+    if (!this.siteId ) {
+      return;
+    }
+    return this.apiService.post(API.UPDATE_USER_FIELDS.replace(':siteId', String(this.siteId)).replace(':token', this.user.token), body)
+      // .pipe(this.handleError(false, true));
+  }
+
+  public fetchUserById(id: string) {
+    this.userIdExistPending = true;
+    return this.apiService.fetch(API.USER_BY_ID.replace(':siteId', String(this.siteId)).replace(':userId', encodeURIComponent(encodeURIComponent(id))))
+      .pipe(map(result => {
+        this.userIdExistPending = false;
+        return result;
+      }));
+  }
+
+  public persistCacheChanges() {
+    /*const params = {
+      excludeDeviceExtraOptions: true
+    };*/
+    return this.processUserChangesToCache()
+      .pipe(map((result: any) => {
+        return this.apiService.post(API.PERSIST_USER_CACHE.replace(':siteId', String(this.siteId)).replace(':token', this.user.token), {})
+          .subscribe(() => {
+
+          })
+          // .pipe(map((user) => {
+          //   // this.setUser(user, false, this.user.token);
+          //   this.user.hasModifiedCache = false;
+          // }))
+          // .pipe(this.handleError(true, true));
+      }));
+  }
+
+  public processUserChangesToCache(): any {
+    const calls = [];
+    const body = UtilsService.diff(this.originUser.getUserDetailsSavableData(), this.user.getUserDetailsSavableData(), 'user');
+    if (body?.length) {
+      calls.push(this.updateUserFields(body));
+    }
+    if (!calls?.length) {
+      return of(this.user);
+    }
+
+    return forkJoin(calls)
+      .pipe(map((responses: any) => {
+        // ApiUserResponse
+        this.handleSaveUserResponse(responses);
+      }))
+      // .pipe(this.handleError(false, true));
+
+  }
+
+  public saveNewLine(): any {
+    this.dataPending = true;
+    this.deleteLine(this.user.siteId, this.lineAssociation.linePkid, encodeURIComponent(this.user.token))
+      .subscribe(() => {
+        const URL = API.PERSIST_USER_CACHE.replace(':siteId', String(this.siteId)).replace(':token', this.user.token);
+        this.apiService.post(URL, {}, )
+          .subscribe(() => {
+            this.fetchUserToken(this.siteId, this.user.userid, false, true)
+              .subscribe(() => {
+                this.runNewLineCreation();
+              });
+          });
+      });
+  }
+
+  public runNewLineCreation(): void {
+    // CREATE NEW LINE
+    const newLineBody = SortingUtilsService.diff(
+      this.lineService.generateLineAssociationFromLine(null),
+      this.lineService.generateLineAssociationFromLine(this.lineAssociation),
+      'device.lineAssociations', null
+    );
+    this.associateLineToUserDevice(
+      this.user.siteId,
+      this.user.devices[0].name,
+      newLineBody,
+      null,
+      this.lineAssociation.callingSearchSpace
+    ).subscribe((response: any) => {
+      if (response && response.currentUpdatedUser) {
+        const linePkId = this.getLinePkIdFromUser(response?.currentUpdatedUser, 0);
+        forkJoin([
+          this.updateLineFields(this.siteId, linePkId, this.user.token, this.lineAssociation.alertingName),
+          this.updateDeviceFields(this.siteId, this.user.devices[0]?.name, this.user.token)
+        ]).subscribe((response: any) => {
+          this.originUser.devices[0].lineAssociations[0].directoryNumber.directoryNumber = this.lineAssociation.directoryNumber.directoryNumber;
+          this.onUserLineSaved$.next(true);
+        });
+      }
+    })
+    // -----
+  }
+
+  public getLinePkIdFromUser(user: any, index: number): any {
+    if (user.devices && user.devices[index] && user.devices[index].lineAssociations && user.devices[index].lineAssociations[index]) {
+      return user.devices[index].lineAssociations[index].linePkid || user.devices[index].lineAssociations[index].lineLocalId;
+    }
+  }
+
+  public deleteLine(siteId: number, pkid: string, token: string) {
+    return this.apiService.delete(API.DELETE_LINE.replace(':siteId', String(siteId)).replace(':pkid', pkid).replace(':token', encodeURIComponent(token)), {})
+    // .pipe(this.handleError(true, false));
+  }
+
+  public disassociateLine(siteId: number, linePkid: string, token: string, deviceName: string) {
+    return this.apiService.delete(
+      API.DISASSOCIATE_LINE.replace(':siteId', String(siteId))
+        .replace(':linePkid', linePkid)
+        .replace(':deviceName', deviceName)
+        .replace(':token', encodeURIComponent(token)), {})
+    // .pipe(this.handleError(true, false));
+  }
+
+  public updateLineFields(siteId: number, pkid: string, token: string, alertingName: any) {
+    const body = ['line.description=', `line.alertingName=${alertingName}`];
+    return this.apiService.post(API.UPDATE_LINE_FIELDS.replace(':siteId', String(siteId)).replace(':pkid', encodeURIComponent(pkid)).replace(':token', encodeURIComponent(token)), body)
+    // .pipe(this.handleError(true, false));
+  }
+
+  public updateDeviceFields(siteId: number, deviceName: string, token: string) {
+    const body = ['device.associatedDNs.0=null'];
+    return this.apiService.post(API.UPDATE_DEVICE_FIELDS.replace(':siteId', String(siteId)).replace(':deviceName', deviceName).replace(':token', encodeURIComponent(token)), body)
+    // .pipe(this.handleError(true, false));
+  }
+  public checkDestinationNumber(siteId: string, directoryNumber: string, routePartitionName: string) {
+    const params = {
+      dntype: 'EXTENSION'
+    };
+    const body = {
+      directoryNumber: directoryNumber,
+      routePartitionName: routePartitionName
+    };
+    return this.apiService.post(API.CHECK_DESTINATION_NUMBER.replace(':siteId', siteId), body, params);
+  }
+
+  public associateLineToUserDevice(siteId: number, deviceName: string, body: any, pkid: any, css: any) {
+    let params = {};
+    if (pkid) {
+      params = {linePkid: pkid};
+    }
+    if (css) {
+      // @ts-ignore
+      params['css'] = css;
+    }
+    return this.apiService.post(API.ASSOCIATE_LINE.replace(':siteId', String(siteId)).replace(':deviceName', deviceName)
+      .replace(':token', encodeURIComponent(this.user.token)), body, params)
+    // .pipe(this.handleError(true, true));
+  }
+
+  public hasUnsavedChanges() {
+    if (this.user && this.originUser) {
+      return !this.user.equal(this.originUser);
+    }
+    return false;
+  }
+
+  public setSimplifiedUser(user: any, isLdap?: boolean): void {
+    // isLdap TEMP because of token response issue
+    this.user = new SimplifiedUser(user, isLdap);
+    const copiedUser = JSON.parse(JSON.stringify(user));
+    this.originUser = new SimplifiedUser(copiedUser, isLdap);
+  }
+
+  private handleSaveUserResponse(responses: any) {
+    if (!responses?.length) {
+      return;
+    }
+    for (let len = responses.length, i = len - 1; i >= 0; i--) {
+      if (responses[i] && responses[i].currentUpdatedUser) {
+        // this.setUser(responses[i].currentUpdatedUser, false, this.user.token);
+        this.user.hasModifiedCache = true;
+        return;
+      }
+    }
+  }
+}

package/projects/tuki/widgets/user-manage/src/services/users-search.service.ts

@@ -0,0 +1,59 @@
+import { Injectable, OnInit } from '@angular/core';
+import { SimplifiedUser } from '../classes/simplified-user';
+import { APIService } from './api.service';
+import { ListUser, ListUserInterface } from '../classes/user-list';
+import { BehaviorSubject, Observable } from 'rxjs';
+import { API, PAGINATION_DEFAULTS, PAGINATION_SIZE_OPTIONS } from '../app.constants';
+import { TableDataInterface } from '../classes/table-data';
+import { map } from 'rxjs/operators';
+import { RemoveKynFromIBMService } from '../removeKynFromIBM.service';
+import { PaginationDataDto } from '../classes/pagination';
+
+
+
+@Injectable()
+export class UsersSearchService  {
+  siteId: number = -1;
+  userId: string = '';
+  customerId!: number;
+  userIdExistPending = false;
+  hasExistedUserId = false;
+  pageSize = PAGINATION_DEFAULTS.SIZE;
+  pageIndex = PAGINATION_DEFAULTS.SIZE;
+  pageSizeOptions = PAGINATION_SIZE_OPTIONS;
+  total!: number;
+  searchParams!: any;
+  foundUsers$!: any;
+
+  constructor(
+    private apiService: APIService,
+    private removeKynFromIBMService: RemoveKynFromIBMService
+  ) {
+    this.foundUsers$ = new BehaviorSubject(null);
+
+  }
+
+  public getPagination(): PaginationDataDto {
+    return {
+      total: this.total,
+      pageSizeOptions: this.pageSizeOptions,
+      pageSize: this.pageSize,
+      pageIndex: this.pageIndex
+    };
+  }
+
+  public quickRegularUsersSearch() {
+    this.searchParams = this.searchParams || {customerid: this.customerId};
+    this.searchParams['provisionType'] = 'CUCM';
+    return this.apiService.fetchPagination(API.QUICK_USERS_SEARCH, this.pageSize, this.pageIndex, this.searchParams)
+      .pipe(map((res: TableDataInterface) => {
+        this.total = res.total;
+        // this.totals = this.totals || {};
+        // this.totals['users'] = res.total;
+        const users = res.pageData && res.pageData.length ? res.pageData.map(user => new ListUser(user)) : [];
+        // this.foundUsers$.next(this.removeKynFromIBMService.removeCUCMS(users, this.customerId));
+        this.foundUsers$.next(users);
+      }));
+      // .pipe(this.handleError(true));
+  }
+}

package/projects/tuki/widgets/user-manage/src/services/utils.service.ts

@@ -0,0 +1,71 @@
+import { Injectable } from '@angular/core';
+
+@Injectable()
+export class UtilsService {
+
+  static sortSortArrayByProperty(array: [], sortBy: string) {
+    if (!array) {
+      return null;
+    }
+    return array.sort((a, b) => {
+      if (!a[sortBy] && !b[sortBy]) {
+        return 0;
+      }
+      if (a[sortBy] && !b[sortBy]) {
+        return 1;
+      }
+      if (!a[sortBy] && b[sortBy]) {
+        return -1;
+      }
+      const positionA = a[sortBy];
+      const positionB = b[sortBy];
+      return (positionA < positionB) ? -1 : (positionA > positionB) ? 1 : 0;
+    });
+  }
+
+  static diff(origObject: any, updatedObj: any, path: string, keysToIgnore?: string[]) {
+    let result: any = [];
+    if (Object.is(origObject, updatedObj)) {
+      return undefined;
+    }
+    if (!updatedObj || typeof updatedObj !== 'object') {
+      return updatedObj;
+    }
+    const concat = Array.from(new Set([...Object.keys(origObject || {}), ...Object.keys(updatedObj || {})]));
+    const filter = keysToIgnore ? concat.filter(key => !keysToIgnore.includes(key)) : concat;
+    filter
+      .forEach(key => {
+        if (typeof updatedObj[key] === 'object' && typeof origObject[key] === 'object') {
+          if (UtilsService.differs(updatedObj[key], origObject[key])) {
+            const newPath = `${path}${path ? '.' : ''}${key}`;
+            const values = UtilsService.diff(origObject[key], updatedObj[key], newPath, keysToIgnore);
+            if (values !== undefined) {
+              result = [...result, ...values];
+            }
+          }
+        } else if (updatedObj && !origObject || updatedObj[key] !== origObject[key] && !Object.is(origObject[key], updatedObj[key])) {
+          const value = updatedObj ? UtilsService.formatIfEmpty(updatedObj[key]) : null;
+          result.push(`${path}${path ? '.' : ''}${key}=${value}`);
+        }
+      });
+    return result;
+  }
+
+  static formatIfEmpty(value: any) {
+    if (value) {
+      return value;
+    }
+    switch (typeof value) {
+      case 'boolean':
+        return value;
+      case 'string':
+        return '';
+      default:
+        return null;
+    }
+  }
+
+  static differs(obj1: any, obj2: any): boolean {
+    return JSON.stringify(obj1) !== JSON.stringify(obj2);
+  }
+}

package/projects/tuki/widgets/user-manage/src/styles/_variables.scss

@@ -0,0 +1,90 @@
+//@import url( 'https://fonts.googleapis.com/css?family=Roboto:400,700|Material+Icons');
+//@import url('https://fonts.googleapis.com/css?family=Raleway:400,100,200,300,500,600,800,700,900');
+@import url('https://fonts.googleapis.com/css?family=Poppins:400,100,200,300,500,600,800,700,900');
+//@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400&display=swap');
+
+$fa-font-path : '../../node_modules/font-awesome/fonts';
+
+//$common-font: Raleway, 'Raleway', sans-serif;
+//$special-font: Raleway, 'Roboto', sans-serif;
+//$content-font: 'Roboto', sans-serif;
+//$buttons-font: Raleway, 'Raleway', sans-serif;
+//$input-font: 'Roboto', sans-serif;
+$menu-font: Poppins, 'Poppins', sans-serif;
+$main-font: Poppins, 'Poppins', sans-serif;
+//$sub-menu-font: Inter, 'Inter', sans-serif;
+$font-size: 14px;
+$txt-color: rgba(0, 0, 0, 0.87);
+$table-title-color: rgba(0,0,0,.54);;
+$txt-grey-color: #454e5e;
+$header-gradient: linear-gradient(90deg,#0d56aa,#0d56ab);
+$poppins-font: Poppins, 'Poppins', sans-serif;
+
+$icon-color: #8E9FB7;
+$active-color: #0D56AA;
+$icon-box-color: #0773BC;
+$mark-color: #009FDB;
+$hover-color: #0985A0;
+$error-color: #C73636;
+$main-txt-color: #333;
+
+$table-border-color: rgba(0, 0, 0, 0.12);
+$input-border-color: rgba(0, 0, 0, 0.30);
+$bg-color: #F7F9FB;
+
+$error-bg-color: #f2dede;
+$error-border-color: #ebccd1;
+$error-txt-color: #bc1e1b;
+$qob-error-color: #E70707;
+
+$warning-bg-color: #fcf8e3;
+$warning-border-color: #e5e1cd;
+$warning-txt-color: #8a6d3b;
+
+$success-bg-color: #e3f4dc;
+$success-border-color: #b3d692;
+$success-txt-color: #3c763d;
+
+$read-only-txt-color: rgba(0, 0, 0, 0.38);
+$my-menu-txt-color: #555555;
+
+$page-background-color: #F3F6F6;
+$disabled-button-text-color: #BABCC5;
+$dark-elements-color: #2C355D;
+$dark-disabled-btn-color: #DFE3E7;
+$disabled-color: #DFE3E7;
+$link-color: #0985A0;
+$title-color: #0985A0;
+$active-link-color: #0985A0;
+$text-color: #646464;
+$light-border-color: #DEE5EA;
+$icon-background: #D2E5E5;
+
+// QOB style
+$navy: #2399DA;
+$dark-blue: #2C355D;
+$qob-danger-color: #E70707;
+$qob-disabled-color: #D4D4D4;
+
+// WEBEX STYLE
+
+$webex-body-bg: #f7f7f7;
+
+
+$webex-icon-bg: #d0d0d0;
+$webex-icon-color: #2a2a2a;
+$webex-text-color: #252525;
+
+$webex-tr-hover-bg: #ededed;
+$webex-tr-border: #dedede;
+
+$webex-table-th-bg: #f7f7f7;
+$webex-table-th-txt: #636363;
+$webex-table-th-size: 12px;
+
+$webex-table-td-bg: #fff;
+$webex-table-td-txt: #636363;
+$webex-table-td-size: 14px;
+
+$webex-pagination-txt: #636363;
+$webex-pagination-hover-bg: #ededed;

package/projects/tuki/widgets/user-manage/src/styles/form.scss

@@ -0,0 +1,231 @@
+@import "variables";
+
+.mat-form-field {
+  padding: 0 0 5px 0;
+  width: 93%;
+}
+.mat-form-field.mat-form-field-disabled {
+  border-bottom: none;
+}
+.mat-error {
+  color: $error-color;
+  margin: 13px 0 0 0;
+}
+.select-box {
+  border-radius: 30px;
+  background: #F3F6F6;
+  border: 1px solid #E2E9EF;
+  height: 35px;
+  position: relative;
+
+  select {
+    border: none !important;
+    background: transparent;
+    height: 100%;
+    width: 92%;
+    margin: auto;
+    display: block;
+  }
+
+}
+
+option:focus, option:focus-visible {
+  border: none !important;
+  outline: none !important;
+}
+option {
+  height: 30px;
+  cursor: pointer;
+  color: $webex-pagination-txt;
+}
+option:hover {
+  background: $webex-pagination-hover-bg !important;
+}
+.mat-select {
+  height: 100%;
+  line-height: 35px;
+}
+.info-holder, .input-holder {
+  display: grid;
+  grid-template-columns: 30% 70%;
+  align-items: baseline;
+
+  &__name{
+    font-weight: 500;
+    font-size: 14px;
+  }
+  &__inputs{
+    & .input-holder{
+      display: grid;
+      grid-template-columns: 30% 70%;
+      align-items: baseline;
+      &__name{
+        font-weight: 400;
+        font-size: 14px;
+      }
+    }
+  }
+}
+.mat-form-field-wrapper {
+  height: 30px !important;
+}
+.mat-form-field-flex{
+  height: 30px !important;
+}
+
+.mat-form-field-appearance-outline .mat-form-field-outline{
+  height: 35px !important;
+}
+
+.mat-form-field-outline .mat-form-field-outline-thick{
+  height: 35px !important;
+}
+
+.mat-select{
+  line-height: 20px !important;
+}
+.mat-form-field-appearance-outline .mat-form-field-infix {
+  padding: 14px 12px 10px;
+  border-top: 0;
+  max-width: 300px;
+}
+
+.mat-tab-group{
+  font-family: "Inter", sans-serif;
+}
+
+.mat-tab-label{
+  font-weight: 500 !important;
+  font-size: 14px !important;
+  height: auto !important;
+  min-width: auto !important;
+  padding: 0 !important;
+}
+
+.mat-ink-bar{
+  background-color: rgba(0, 0, 0, 0.9) !important;
+  height: 3px !important;
+}
+.mat-form-field-wrapper{
+  padding-bottom: 0;
+}
+
+.mat-form-field{
+  padding: 0;
+  max-width: 300px;
+}
+
+.mat-divider{
+  margin: 12px 0;
+}
+
+/*
+
+.input-holder {
+  background: #EDEDED;
+  padding: 32px 60px;
+}
+
+.form-hold {
+  padding: 24px 0;
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+::ng-deep .mat-form-field-appearance-outline .mat-form-field-infix {
+  padding: 14px 12px 10px;
+  border-top: 0;
+  max-width: 300px;
+}
+
+::ng-deep .mat-tab-group{
+  font-family: "Inter", sans-serif;
+}
+
+::ng-deep .mat-tab-label{
+  font-weight: 500 !important;
+  font-size: 14px !important;
+  height: auto !important;
+  min-width: auto !important;
+  padding: 0 !important;
+}
+
+::ng-deep .mat-ink-bar{
+  background-color: rgba(0, 0, 0, 0.9) !important;
+  height: 3px !important;
+}
+.form-holder{
+  background: white;
+  display: grid;
+  grid-template-columns: 30% 70%;
+  border-radius: 8px;
+  border: rgba(0, 0, 0, 0.2) 1px solid;
+  padding: 24px;
+  &__name{
+    font-weight: 500;
+    font-size: 16px;
+  }
+  &__inputs{
+    & .input-holder{
+      display: grid;
+      grid-template-columns: 30% 70%;
+      align-items: baseline;
+      &__name{
+        font-weight: 400;
+        font-size: 14px;
+      }
+    }
+  }
+}
+
+::ng-deep .mat-form-field-wrapper{
+  padding-bottom: 0;
+}
+
+::ng-deep .mat-form-field{
+  padding: 0;
+  max-width: 300px;
+}
+
+.mat-divider{
+  margin: 12px 0;
+}
+
+.user-details-box {
+  background: white;
+  display: grid;
+  grid-template-columns: 30% 70%;
+  border-radius: 8px;
+  border: rgba(0, 0, 0, 0.2) 1px solid;
+  padding: 24px;
+  &__name{
+    font-weight: 500;
+    font-size: 16px;
+  }
+  &__inputs{
+    & .input-holder{
+      display: grid;
+      grid-template-columns: 30% 70%;
+      align-items: baseline;
+      &__name{
+        font-weight: 400;
+        font-size: 14px;
+      }
+    }
+  }
+}
+
+::ng-deep .mat-form-field-wrapper{
+  padding-bottom: 0;
+}
+
+::ng-deep .mat-form-field{
+  padding: 0;
+  max-width: 300px;
+}
+
+.mat-divider{
+  margin: 12px 0;
+}
+*/