@tuki-io/tuki-widgets 0.0.65 → 0.0.67

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

@@ -1,63 +1,63 @@
-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 { HttpClientModule } from '@angular/common/http';
-import { ApiWebexService } from './services/api-webex.service';
-import { AppLoaderComponent } from './utils/app-loader/app-loader';
-import { MoveUserWizardComponent } from './move-user-wizard/move-user-wizard.component';
-import { MoveUserStepperComponent } from './move-user-wizard/move-user-stepper/move-user-stepper.component';
-import { UserListConfirmDialogComponent } from './user-list-confirm-dialog/user-list-confirm-dialog.component';
-import { DnsService } from './services/dns.service';
-import { SiteSettingsService } from './services/site-settings.service';
-import { MoveUserService } from './services/move-user.service';
-import {
-  DevicesMoveUserWizardTabComponent
-} from './move-user-wizard/move-user-stepper/device-move-user-tab/devices-move-user-wizard-tab.component';
-import {
-  DeviceMoveUserWizardComponent
-} from './move-user-wizard/move-user-stepper/device-move-user/device-move-user-wizard.component';
-
-
-@NgModule({
-  declarations: [
-    UsersListComponent,
-    PaginationComponent,
-    AppLoaderComponent,
-    MoveUserWizardComponent,
-    MoveUserStepperComponent,
-    UserListConfirmDialogComponent,
-    DevicesMoveUserWizardTabComponent,
-    DeviceMoveUserWizardComponent
-  ],
-  imports: [
-    BrowserModule,
-    FormsModule,
-    ReactiveFormsModule,
-    HttpClientModule,
-    MaterialModule
-  ],
-  providers: [
-    UserService,
-    APIService,
-    EventsCommunicationService,
-    UsersSearchService,
-    NotificationService,
-    RemoveKynFromIBMService,
-    ApiWebexService,
-    DnsService,
-    SiteSettingsService,
-    MoveUserService
-  ],
-  exports: [UsersListComponent]
-})
-export class UsersListModule { }
+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 { HttpClientModule } from '@angular/common/http';
+import { ApiWebexService } from './services/api-webex.service';
+import { AppLoaderComponent } from './utils/app-loader/app-loader';
+import { MoveUserWizardComponent } from './move-user-wizard/move-user-wizard.component';
+import { MoveUserStepperComponent } from './move-user-wizard/move-user-stepper/move-user-stepper.component';
+import { UserListConfirmDialogComponent } from './user-list-confirm-dialog/user-list-confirm-dialog.component';
+import { DnsService } from './services/dns.service';
+import { SiteSettingsService } from './services/site-settings.service';
+import { MoveUserService } from './services/move-user.service';
+import {
+  DevicesMoveUserWizardTabComponent
+} from './move-user-wizard/move-user-stepper/device-move-user-tab/devices-move-user-wizard-tab.component';
+import {
+  DeviceMoveUserWizardComponent
+} from './move-user-wizard/move-user-stepper/device-move-user/device-move-user-wizard.component';
+
+
+@NgModule({
+  declarations: [
+    UsersListComponent,
+    PaginationComponent,
+    AppLoaderComponent,
+    MoveUserWizardComponent,
+    MoveUserStepperComponent,
+    UserListConfirmDialogComponent,
+    DevicesMoveUserWizardTabComponent,
+    DeviceMoveUserWizardComponent
+  ],
+  imports: [
+    BrowserModule,
+    FormsModule,
+    ReactiveFormsModule,
+    HttpClientModule,
+    MaterialModule
+  ],
+  providers: [
+    UserService,
+    APIService,
+    EventsCommunicationService,
+    UsersSearchService,
+    NotificationService,
+    RemoveKynFromIBMService,
+    ApiWebexService,
+    DnsService,
+    SiteSettingsService,
+    MoveUserService
+  ],
+  exports: [UsersListComponent]
+})
+export class UsersListModule { }

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

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

@@ -1,11 +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;
-}
+.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

@@ -1,13 +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() {
-  }
-
-}
+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

@@ -1,32 +1,32 @@
-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;
-  }, {});
-};
-
-export const filterOptions = (options: any[], query: string, shownValue?: string, field?: string) => {
-  if (!options) {
-    return [];
-  }
-  if (!query) {
-    return options;
-  }
-  return options.filter(option => {
-    return (
-      field ? String(option[field]).toLowerCase().includes(String(query).toLowerCase()) :
-        String(option).toLowerCase().includes(String(query).toLowerCase()) ||
-        (shownValue && shownValue === option)
-    );
-  });
-};
+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;
+  }, {});
+};
+
+export const filterOptions = (options: any[], query: string, shownValue?: string, field?: string) => {
+  if (!options) {
+    return [];
+  }
+  if (!query) {
+    return options;
+  }
+  return options.filter(option => {
+    return (
+      field ? String(option[field]).toLowerCase().includes(String(query).toLowerCase()) :
+        String(option).toLowerCase().includes(String(query).toLowerCase()) ||
+        (shownValue && shownValue === option)
+    );
+  });
+};

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

@@ -1,33 +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>
--->
+<!--
+
+<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

@@ -1,84 +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;
-  }
-
-}
-
-
+@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

@@ -1,46 +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();
-      });
-  }
-}
+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.html

@@ -1,26 +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>
+<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>