@tuki-io/tuki-widgets 0.0.0

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

@@ -0,0 +1,58 @@
+import { Injectable, OnInit } from '@angular/core';
+import { SimplifiedUser } from '../classes/simlified-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};
+    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/users-list/src/users-list.component.css

@@ -0,0 +1,4 @@
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}/*# sourceMappingURL=users-list.component.css.map */

package/projects/tuki/widgets/users-list/src/users-list.component.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["users-list.component.scss","users-list.component.css"],"names":[],"mappings":"AAAA;EACE,yBAAA;EACA,iBAAA;ACCF","file":"users-list.component.css"}

package/projects/tuki/widgets/users-list/src/users-list.component.html

@@ -0,0 +1,39 @@
+<app-pagination
+        [pagination]="usersSearchService.getPagination()"
+        [showPageSizeOptions]="true"
+        (pageNumberChangeEmitter)="pageNumberChangeEvent($event)"
+        (pageEmitter)="pageEvent($event)">
+</app-pagination>
+
+<table class="webex-table" mat-table *ngIf="users?.length" #table [dataSource]="dataSource">
+
+    <ng-container matColumnDef="user-icon">
+        <th mat-header-cell *matHeaderCellDef class="webex-table-th"></th>
+        <td class="user-site" mat-cell *matCellDef="let user" (click)="onUserClick(user)">
+            <span class="icon-webex-box"><span class="icon-webex icon-webex-user"></span></span>
+        </td>
+    </ng-container>
+
+    <ng-container matColumnDef="name">
+        <th mat-header-cell *matHeaderCellDef class="webex-table-th">First Name/Last Name</th>
+        <td class="user-site" mat-cell *matCellDef="let user" (click)="onUserClick(user)"> {{ user.firstName }} {{ user.lastName }}</td>
+    </ng-container>
+
+    <ng-container matColumnDef="email">
+        <th mat-header-cell *matHeaderCellDef class="webex-table-th">Email</th>
+        <td class="user-site" mat-cell *matCellDef="let user" (click)="onUserClick(user)"> {{ user.email }}</td>
+    </ng-container>
+
+    <ng-container matColumnDef="status">
+        <th mat-header-cell *matHeaderCellDef class="webex-table-th">Status</th>
+        <td class="user-site" mat-cell *matCellDef="let user" (click)="onUserClick(user)"></td>
+    </ng-container>
+
+    <ng-container matColumnDef="role">
+        <th mat-header-cell *matHeaderCellDef class="webex-table-th">Administrator Role</th>
+        <td class="user-site" mat-cell *matCellDef="let user" (click)="onUserClick(user)"></td>
+    </ng-container>
+
+    <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
+    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+</table>

package/projects/tuki/widgets/users-list/src/users-list.component.scss

@@ -0,0 +1,9 @@
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+table.mat-table {
+  border-spacing: 0;
+  width: 100%;
+}

package/projects/tuki/widgets/users-list/src/users-list.component.ts

@@ -0,0 +1,85 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { FormGroup } from '@angular/forms';
+import { UserService } from './services/user.service';
+import { APIService } from "./services/api.service";
+import { NotificationService } from './services/notification.service';
+import { Subscription } from 'rxjs';
+import { UsersSearchService } from './services/users-search.service';
+import { ListUser } from './classes/user-list';
+import { MatTableDataSource } from '@angular/material/table';
+import { PageEvent } from '@angular/material/paginator';
+
+const DISPLAYED_COLS = ['user-icon', 'name', 'email', 'status', 'role'];
+
+@Component({
+  selector: 'app-users-list',
+  templateUrl: './users-list.component.html',
+  styleUrls: ['./users-list.component.scss']
+})
+export class UsersListComponent implements OnInit {
+  @Input() token!: string;
+  @Input() customerId!: number;
+  @Output() openUser = new EventEmitter();
+  dataPending!: boolean;
+  users!: ListUser[];
+  dataSource!: MatTableDataSource<ListUser>;
+  displayedColumns = DISPLAYED_COLS;
+  private searchSubscription!: Subscription;
+
+  get form(): FormGroup {
+    return this.userService?.user?.form;
+  }
+
+  constructor(
+    public userService: UserService,
+    private apiService: APIService,
+    private notifications: NotificationService,
+    public usersSearchService: UsersSearchService
+  ) {
+    console.log('users list 1');
+  }
+
+  ngOnInit(): void {
+    console.log('users list 2');
+    this.usersSearchService.customerId = this.customerId;
+    this.apiService.token = this.token;
+    this.runSearch();
+
+    this.searchSubscription = this.usersSearchService.foundUsers$
+      .subscribe((users: ListUser[]) => {
+        this.initializeDataSource(users);
+        this.users = users;
+      });
+  }
+
+  public pageNumberChangeEvent(perPageNumber: number): void {
+    this.usersSearchService.pageSize = perPageNumber;
+    this.usersSearchService.pageIndex = 0;
+    this.runSearch();
+  }
+
+  public pageEvent(event: PageEvent): void {
+    this.usersSearchService.pageSize = event.pageSize;
+    this.usersSearchService.pageIndex = event.pageIndex;
+    this.runSearch();
+  }
+
+  public onUserClick(user: ListUser): void {
+    this.openUser.emit(user);
+  }
+
+  private initializeDataSource(users: ListUser[]): void {
+    this.dataSource = new MatTableDataSource(users);
+  }
+
+  private runSearch(): void {
+    this.dataPending = true;
+    this.usersSearchService.quickRegularUsersSearch()
+      .subscribe(() => {
+        this.dataPending = false;
+      }, () => {
+        this.dataPending = false;
+        this.notifications.error('The data can not be received');
+      });
+  }
+}

package/projects/tuki/widgets/users-list/src/users-list.module.ts

@@ -0,0 +1,36 @@
+import { NgModule } from '@angular/core';
+import { UsersListComponent } from './users-list.component';
+import { FormsModule } from '@angular/forms';
+import { ReactiveFormsModule } from '@angular/forms';
+import { BrowserModule } from '@angular/platform-browser';
+import { MaterialModule } from './material.module';
+import { PaginationComponent } from './utils/pagination/pagination.component';
+import { UserService } from './services/user.service';
+import { APIService } from './services/api.service';
+import { EventsCommunicationService } from './services/events-communication.service';
+import { UsersSearchService } from './services/users-search.service';
+import { NotificationService } from './services/notification.service';
+import { RemoveKynFromIBMService } from './services/removeKynFromIBM.service';
+import { HttpClient, HttpClientModule } from '@angular/common/http';
+
+
+@NgModule({
+  declarations: [UsersListComponent, PaginationComponent],
+  imports: [
+    BrowserModule,
+    FormsModule,
+    ReactiveFormsModule,
+    HttpClientModule,
+    MaterialModule
+  ],
+  providers: [
+    UserService,
+    APIService,
+    EventsCommunicationService,
+    UsersSearchService,
+    NotificationService,
+    RemoveKynFromIBMService
+  ],
+  exports: [UsersListComponent]
+})
+export class UsersListModule { }

package/projects/tuki/widgets/users-list/src/utils/app-loader/app-loader.component.css

@@ -0,0 +1,11 @@
+.overlay {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(255, 255, 255, 0.2);
+  z-index: 200;
+}/*# sourceMappingURL=app-loader.component.css.map */

package/projects/tuki/widgets/users-list/src/utils/app-loader/app-loader.component.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["app-loader.component.scss","app-loader.component.css"],"names":[],"mappings":"AAAA;EACI,eAAA;EACA,WAAA;EACA,YAAA;EACA,MAAA;EACA,OAAA;EACA,QAAA;EACA,SAAA;EACA,0CAAA;EACA,YAAA;ACCJ","file":"app-loader.component.css"}

package/projects/tuki/widgets/users-list/src/utils/app-loader/app-loader.component.html

@@ -0,0 +1,6 @@
+<div class="overlay">
+  <mat-progress-spinner
+    class="page-spinner"
+    mode="indeterminate"
+    [diameter]="120"></mat-progress-spinner>
+</div>

package/projects/tuki/widgets/users-list/src/utils/app-loader/app-loader.component.scss

@@ -0,0 +1,11 @@
+.overlay {
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(255, 255, 255, 0.2);
+    z-index: 200;
+}

package/projects/tuki/widgets/users-list/src/utils/app-loader/app-loader.ts

@@ -0,0 +1,13 @@
+import { Component, ViewEncapsulation } from '@angular/core';
+
+@Component({
+  selector: 'app-loader',
+  templateUrl: './app-loader.component.html',
+  styleUrls: ['./app-loader.component.scss'],
+  encapsulation: ViewEncapsulation.None,
+})
+export class AppLoaderComponent {
+  constructor() {
+  }
+
+}

package/projects/tuki/widgets/users-list/src/utils/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/users-list/src/utils/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/users-list/src/utils/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;
+  }
+
+}
+
+

package/projects/tuki/widgets/users-list/src/utils/notifications/notification.component.ts

@@ -0,0 +1,46 @@
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
+import { Subscription } from 'rxjs';
+import { NotificationService } from '../../services/notification.service';
+import { Notification } from '../../classes/notification';
+
+@Component({
+  selector: 'app-notification',
+  templateUrl: './notification.component.html',
+  styleUrls: ['./notification.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class NotificationsComponent implements OnInit, OnDestroy {
+  public list!: Notification[];
+  public isReadMore!: boolean;
+  private listSubscription!: Subscription;
+
+  constructor(
+    public notificationService: NotificationService,
+    private ref: ChangeDetectorRef
+  ) {
+  }
+
+  ngOnInit() {
+    this.listChangeSubscribe();
+  }
+
+  ngOnDestroy() {
+    this.listSubscription.unsubscribe();
+  }
+
+  public readMore(): void {
+    this.isReadMore = !this.isReadMore;
+  }
+
+  public removeNotification(notification: Notification): void {
+    this.notificationService.remove(notification);
+  }
+
+  private listChangeSubscribe(): void {
+    this.listSubscription = this.notificationService.listChange
+      .subscribe((list: any) => {
+        this.list = list;
+        this.ref.detectChanges();
+      });
+  }
+}

package/projects/tuki/widgets/users-list/src/utils/pagination/pagination.component.css

@@ -0,0 +1,45 @@
+.search-header-refresh-icon {
+  align-items: center;
+  line-height: 54px;
+  margin-left: 10px;
+}
+
+button[mat-icon-button] i {
+  font-size: 18px;
+}
+
+mat-spinner.length-spinner {
+  position: absolute;
+  right: 120px;
+}
+
+h3, .search-header-refresh-icon {
+  float: left;
+}
+
+.page-options, .mat-paginator {
+  float: right;
+}
+
+.per-page-block mat-form-field {
+  width: 70px !important;
+}
+
+.per-page-block span {
+  margin-right: 20px;
+}
+
+.pagination {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.select-page-size {
+  width: 60px;
+  margin: 0 0 0 15px;
+  padding: 0 10px;
+}
+
+.item_per_page {
+  line-height: 35px;
+}/*# sourceMappingURL=pagination.component.css.map */

package/projects/tuki/widgets/users-list/src/utils/pagination/pagination.component.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["pagination.component.scss","pagination.component.css"],"names":[],"mappings":"AAAA;EACE,mBAAA;EACA,iBAAA;EACA,iBAAA;ACCF;;ADGE;EACE,eAAA;ACAJ;;ADIA;EACE,kBAAA;EACA,YAAA;ACDF;;ADGA;EACE,WAAA;ACAF;;ADEA;EACE,YAAA;ACCF;;ADCA;EACE,sBAAA;ACEF;;ADAA;EACE,kBAAA;ACGF;;ADDA;EACE,aAAA;EACA,yBAAA;ACIF;;ADFA;EACE,WAAA;EACA,kBAAA;EACA,eAAA;ACKF;;ADHA;EACE,iBAAA;ACMF","file":"pagination.component.css"}

package/projects/tuki/widgets/users-list/src/utils/pagination/pagination.component.html

@@ -0,0 +1,26 @@
+<div class="flex-box pagination">
+  <div class="page-indexes-box">
+    <mat-paginator
+      [id]="'commonPagination'"
+      [hidePageSize]="true"
+      [length]="pagination.total"
+      [pageIndex]="pagination.pageIndex"
+      [pageSize]="pagination.pageSize"
+      [pageSizeOptions]="pagination.pageSizeOptions"
+      (page)="pageEvent($event)">
+    </mat-paginator>
+    <mat-spinner class="length-spinner" [diameter]="20" mode="indeterminate" *ngIf="lengthPending">
+    </mat-spinner>
+  </div>
+
+  <div class="flex-box per-page-block" *ngIf="showPageSizeOptions">
+    <div class="item_per_page">Items per page:</div>
+    <div class="select-box select-page-size">
+      <mat-select [(ngModel)]="pagination.pageSize" (selectionChange)="changePerPageNumber($event)" #page
+                  [id]="'commonPaginationSelect'">
+        <mat-option *ngFor="let option of pageSizeOptions; let i = index;" [id]="'paginationSelectOpt_' + i" [value]="option">{{option}}</mat-option>
+      </mat-select>
+    </div>
+
+  </div>
+</div>

package/projects/tuki/widgets/users-list/src/utils/pagination/pagination.component.scss

@@ -0,0 +1,41 @@
+.search-header-refresh-icon {
+  align-items: center;
+  line-height: 54px;
+  margin-left: 10px;
+}
+
+button[mat-icon-button] {
+  i {
+    font-size: 18px;
+  }
+}
+
+mat-spinner.length-spinner {
+  position: absolute;
+  right: 120px;
+}
+h3, .search-header-refresh-icon {
+  float: left;
+}
+.page-options, .mat-paginator {
+  float: right;
+}
+.per-page-block mat-form-field {
+  width: 70px !important;
+}
+.per-page-block span {
+  margin-right: 20px;
+}
+.pagination {
+  display: flex;
+  justify-content: flex-end;
+}
+.select-page-size {
+  width: 60px;
+  margin: 0 0 0 15px;
+  padding: 0 10px;
+}
+.item_per_page {
+  line-height: 35px;
+}
+

package/projects/tuki/widgets/users-list/src/utils/pagination/pagination.component.ts

@@ -0,0 +1,41 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { PaginationDataDto } from '../../classes/pagination';
+import { PAGINATION_SIZE_OPTIONS } from '../../app.constants';
+
+
+@Component({
+  selector: 'app-pagination',
+  templateUrl: './pagination.component.html',
+  styleUrls: ['./pagination.component.scss'],
+})
+export class PaginationComponent implements OnInit{
+  @Input()
+  public pagination!: PaginationDataDto;
+  @Input()
+  public showPageSizeOptions!: boolean;
+  @Input()
+  public showRefreshButton!: boolean;
+  @Input()
+  public lengthPending!: boolean;
+  @Output()
+  public pageEmitter = new EventEmitter();
+  @Output()
+  public pageNumberChangeEmitter = new EventEmitter<any>();
+  public pageSizeOptions: number[] = PAGINATION_SIZE_OPTIONS;
+
+  constructor(
+  ) {
+  }
+
+  ngOnInit(): void {
+  }
+
+  public pageEvent(event: any) {
+    this.pageEmitter.emit(event);
+  }
+
+  public changePerPageNumber(event: any) {
+    this.pageNumberChangeEmitter.emit(event.value);
+  }
+
+}