@tuki-io/tuki-widgets 0.0.133 → 0.0.134

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

@@ -0,0 +1,103 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');
+$main-webex-font: Inter, 'Inter', sans-serif;
+
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');
+$main-webex-font: Inter, 'Inter', sans-serif;
+
+#info-dialog {
+  min-height: 150px;
+  width: 400px;
+  box-sizing: border-box;
+  position: relative;
+  padding: 0 0 30px 0;
+
+
+  .fa  {
+    font-size: 35px;
+    margin: 0 auto 20px;
+    display: block;
+    text-align: center;
+    color: #009fdb;
+    cursor: default;
+  }
+
+}
+.scroll-content {
+  overflow-y: auto;
+  margin: auto;
+  max-height: 150px;
+  width: 100%;
+}
+.app-dialog {
+  font-family: $main-webex-font;
+
+  .app-dialog-title {
+    text-align: center;
+    font-weight: 600;
+    font-size: 16px;
+    font-family: $main-webex-font;
+    margin: 0 0 24px 0;
+  }
+  .flex-gap-container {
+    gap: 16px;
+    position: absolute;
+    right: 0;
+    gap: 15px;
+    display: flex;
+
+  }
+  .app-dialog-content {
+    color: rgba(0, 0, 0, 0.70);
+    font-size: 14px;
+    margin: 0 auto 15px;
+  }
+}
+
+.move_user_popup_icon {
+  display: block;
+  height: 30xp;
+  margin: auto;
+}
+.mat-dialog-actions {
+  margin: 0;
+  bottom: -20px;
+}
+.dialog-content-message {
+  font-weight: 500;
+  p  {
+    padding: 15px 0 0 0;
+  }
+}
+.mat-dialog-content {
+  padding: 0;
+}
+
+.app-dialog-button {
+  height: 32px;
+  padding: 10px 12px;
+  text-align: center;
+  border-radius: 50px;
+  box-shadow: none;
+  line-height: 11px;
+  border: none;
+  font-size: 14px;
+  font-family: $main-webex-font;
+  cursor: pointer;
+}
+.app-dialog-cancel-button {
+  border: 1px solid rgba(0, 0, 0, 0.50);
+  color: black;
+  background: white;
+}
+.app-dialog-confirm-button {
+  background: black;
+  color: white;
+}
+.move_user_popup_icon {
+  background-image: url('../assets/icons/move_user_to_another_location.svg');
+  display: block;
+  height: 100px;
+  margin: auto;
+  background-repeat: no-repeat;
+  background-position: center;
+}

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

@@ -0,0 +1,35 @@
+import { Component, Inject, OnInit, ViewEncapsulation } from '@angular/core';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+
+@Component({
+  selector: 'app-info-dialog',
+  templateUrl: './user-list-confirm-dialog.component.html',
+  styleUrls: ['./user-list-confirm-dialog.component.scss'],
+  encapsulation: ViewEncapsulation.None
+})
+export class UserListConfirmDialogComponent implements OnInit {
+  public confirmButtonText = 'OK';
+  public message = '';
+  public title = '';
+
+  constructor(
+    public dialogRef: MatDialogRef<any>,
+    @Inject(MAT_DIALOG_DATA) public data: InfoDialogConfig
+  ) { }
+
+  ngOnInit(): void {
+    this.confirmButtonText = this.data.confirmButtonText || '';
+    this.message = this.data.message || '';
+    this.title = this.data.title || '';
+  }
+
+  public onClose(val: boolean): void {
+    this.dialogRef.close(val);
+  }
+}
+
+export class InfoDialogConfig {
+  message!: string;
+  title!: string;
+  confirmButtonText!: string;
+}

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,261 @@
+<app-loader *ngIf="dataPending"></app-loader>
+<div *ngIf="!showMoveUserWizard" id="users-list">
+  <tk-users-table-toolbar
+    [totalUsersCount]="totalUsersCount"
+    (searchChange)="searchUsers($event)"
+  ></tk-users-table-toolbar>
+  <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"
+          [ngClass]="{'disabled-user-row': moveUserPending && moveInProgressUserId && moveInProgressUserId === user?.userid}"
+          (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"
+        style="padding-left: 60px"
+      >
+        Display name
+      </th>
+      <td
+        class="user-site"
+        mat-cell
+        *matCellDef="let user"
+        [ngClass]="{
+          'disabled-user-row':
+            moveUserPending &&
+            moveInProgressUserId &&
+            moveInProgressUserId === user?.userid,
+        }"
+        (click)="onUserClick(user)"
+      >
+        <div class="display-name-wrapper">
+          <span
+            class="user-name-text"
+            [ngClass]="{ 'inactive-user-row': user.status !== 'Active' }"
+          >
+            {{ user.firstName }} {{ user.lastName }}
+          </span>
+          <span class="icon-webex-box"
+            ><span class="icon-webex icon-webex-user"></span
+          ></span>
+        </div>
+      </td>
+    </ng-container>
+
+    <ng-container matColumnDef="email">
+      <th mat-header-cell *matHeaderCellDef class="webex-table-th">Email</th>
+      <td
+        class="user-site"
+        [ngClass]="{
+          'disabled-user-row':
+            moveUserPending &&
+            moveInProgressUserId &&
+            moveInProgressUserId === user?.userid,
+          'inactive-user-row': user.status !== 'Active',
+        }"
+        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">
+        <span class="header-with-info">
+          Status
+          <img src="assets/icons/info-circle-regular.svg" width="16" alt="" />
+        </span>
+      </th>
+      <td
+        class="user-site"
+        mat-cell
+        *matCellDef="let user"
+        [ngClass]="{
+          'disabled-user-row':
+            moveUserPending &&
+            moveInProgressUserId &&
+            moveInProgressUserId === user?.userid,
+          'inactive-user-row': user.status !== 'Active',
+        }"
+        (click)="onUserClick(user)"
+      >
+        <span
+          class="icon-user-status"
+          [ngClass]="{ 'icon-user-status-active': user.status === 'Active' }"
+        ></span
+        >{{ user.status }}
+      </td>
+    </ng-container>
+
+    <ng-container matColumnDef="actions">
+      <th
+        mat-header-cell
+        *matHeaderCellDef
+        class="webex-table-th"
+        style="padding-left: 24px; padding-top: 4px"
+      >
+        <img src="assets/icons/settings-regular.svg" width="16" alt="" />
+      </th>
+      <td
+        class="user-site"
+        mat-cell
+        *matCellDef="let user; let i = index"
+        [ngClass]="{
+          'disabled-user-row':
+            moveUserPending &&
+            moveInProgressUserId &&
+            moveInProgressUserId === user?.userid,
+          'inactive-user-row': user.status !== 'Active',
+        }"
+      >
+        <mat-progress-spinner
+          class="field-spinner"
+          [diameter]="70"
+          strokeWidth="3"
+          mode="indeterminate"
+          *ngIf="user.status === 'In Progress'"
+        ></mat-progress-spinner>
+        <button
+          *ngIf="
+            !(
+              moveUserPending &&
+              moveInProgressUserId &&
+              moveInProgressUserId === user?.userid
+            )
+          "
+          class="button-action-dot"
+          mat-icon-button
+          [matMenuTriggerFor]="menu"
+        >
+          <div class="icon-actions-dots">
+            <span class="icon-dot">.</span>
+            <span class="icon-dot">.</span>
+            <span class="icon-dot">.</span>
+          </div>
+        </button>
+        <mat-menu #menu="matMenu">
+          <button mat-menu-item [disabled]="true">Resend Invitation</button>
+          <button mat-menu-item [disabled]="true">Reset Password</button>
+          <button
+            [disabled]="user.webexUUID"
+            *ngIf="!user.isMigrated"
+            mat-menu-item
+            (click)="onMoveUser(user, i, 'QuickMove', 'MT')"
+          >
+            Quick Upgrade User to MT
+          </button>
+          <button
+            [disabled]="user.webexUUID"
+            *ngIf="!user.isMigrated"
+            mat-menu-item
+            (click)="onMoveUser(user, i, 'MT', 'MT')"
+          >
+            Upgrade User to MT
+          </button>
+          <button
+            *ngIf="user.isMigrated"
+            mat-menu-item
+            (click)="onMoveUser(user, i, 'DI', 'DI')"
+          >
+            Revert User to UCM/DI
+          </button>
+          <button mat-menu-item [disabled]="true">Deactivate User</button>
+          <button mat-menu-item [disabled]="true">Delete User</button>
+        </mat-menu>
+      </td>
+    </ng-container>
+
+    <ng-container matColumnDef="role">
+      <th mat-header-cell *matHeaderCellDef class="webex-table-th">
+        Admin roles
+      </th>
+      <td
+        class="user-site"
+        mat-cell
+        *matCellDef="let user"
+        [ngClass]="{ 'inactive-user-row': user.status !== 'Active' }"
+        (click)="onUserClick(user)"
+      >
+        {{ user.roleName || "-" }}
+      </td>
+    </ng-container>
+
+    <ng-container matColumnDef="source">
+      <th mat-header-cell *matHeaderCellDef class="webex-table-th">
+        Provisioning Type
+      </th>
+      <td
+        class="user-site"
+        mat-cell
+        *matCellDef="let user"
+        (click)="onUserClick(user)"
+      >
+        <ng-container *ngIf="user.webexUUID">
+          <span [matTooltip]="'Multi-Tenant'" matTooltipPosition="right"
+            ><img src="assets/icons/webex.svg" width="20" alt=""
+          /></span>
+        </ng-container>
+        <ng-container *ngIf="!user.webexUUID">
+          <span [matTooltip]="'Dedicated Instance'" matTooltipPosition="right"
+            ><img src="assets/icons/mt.svg" width="20" alt=""
+          /></span>
+        </ng-container>
+      </td>
+    </ng-container>
+
+    <ng-container matColumnDef="last-active-time">
+      <th mat-header-cell *matHeaderCellDef class="webex-table-th">
+        <span class="header-with-info">
+          Last active time
+          <!-- <mat-icon class="info-icon">info</mat-icon> -->
+          <img src="assets/icons/info-circle-regular.svg" width="16" alt="" />
+        </span>
+      </th>
+      <td
+        class="user-site"
+        mat-cell
+        *matCellDef="let user"
+        [ngClass]="{ 'inactive-user-row': user.status !== 'Active' }"
+        (click)="onUserClick(user)"
+      >
+        2/16/26
+      </td>
+      /
+    </ng-container>
+
+    <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
+    <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
+  </table>
+
+  <app-pagination
+    [pagination]="usersSearchService.getPagination()"
+    [showPageSizeOptions]="true"
+    (pageNumberChangeEmitter)="pageNumberChangeEvent($event)"
+    (pageEmitter)="pageEvent($event)"
+  >
+  </app-pagination>
+</div>
+
+<app-move-user-wizard
+  *ngIf="showMoveUserWizard"
+  [user]="moveUser"
+  (done)="closeMoveUserWizard(true)"
+  [customerId]="customerId"
+  (runMoveUser)="runMoveUserToMT()"
+  (closeMoveUserWizard)="closeMoveUserWizard(false)"
+></app-move-user-wizard>