@tuki-io/tuki-widgets 0.0.95 → 0.0.97

package/projects/tuki/widgets/di2mt/styles/variables.scss

@@ -0,0 +1,94 @@
+//@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');
+
+@import '../../../../../node_modules/@angular/material/theming';
+
+$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: Inter, 'Inter', 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;
+
+$black-alpha-50: rgba(0, 0, 0, 0.5);

package/projects/tuki/widgets/di2mt/widgets/site-upgrade/progress-bar/progress-bar.component.html

@@ -0,0 +1,6 @@
+<!--<div *ngIf="isAvailable" class="progress-bar-container">
+  <div class="progress-bar {{color}}" [ngStyle]="{'width': progress + '%'}"></div>
+</div>-->
+<div *ngIf="isAvailable" class="progress-bar-container">
+  <div class="progress-bar" [ngClass]="color" [style.width.%]="progress"></div>
+</div>

package/projects/tuki/widgets/di2mt/widgets/site-upgrade/progress-bar/progress-bar.component.scss

@@ -0,0 +1,45 @@
+.progress-bar-container {
+  background-color: #E5E5E5;
+  border-radius: 20px;
+  width: 100%;
+}
+
+.progress-bar {
+  height: 7px;
+  width: 0;
+  border-radius: 15px;
+  text-align: center;
+}
+
+.progress-percent {
+  font-weight: 600;
+}
+
+.progress-bar.green {
+  background-color: #94D326;
+}
+
+.progress-bar.red {
+  background-color: #ED4364;
+}
+
+.progress-bar.yellow {
+  background-color: #FED200;
+}
+
+.progress-bar { height: 8px; border-radius: 4px; transition: width .25s ease, background-color .25s ease; }
+.progress-bar.red       { background-color: #e53935; }
+.progress-bar.yellow    { background-color: #fbc02d; }
+.progress-bar.darkblue  { background-color: #1e3a8a; }
+.progress-bar.lightblue { background-color: #60a5fa; }
+.progress-bar.green     { background-color: #22c55e; }
+.progress-bar.grey      { background-color: #9ca3af; }
+
+.progress-bar.darkblue {
+  background-color: #2C355D;
+}
+
+.progress-bar.lightblue {
+  background-color: #2299D9;
+}
+

package/projects/tuki/widgets/di2mt/widgets/site-upgrade/progress-bar/progress-bar.component.ts

@@ -0,0 +1,27 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'app-progress-bar',
+  templateUrl: './progress-bar.component.html',
+  styleUrls: ['./progress-bar.component.scss']
+})
+export class ProgressBarComponent {
+  @Input() isAvailable = false;
+
+  private _progress = 0;
+  @Input() set progress(value: number) {
+    this._progress = Math.max(0, Math.min(100, Number(value) || 0));
+    this.setColor(this._progress);
+  }
+  get progress() { return this._progress; }
+
+  color: string = 'grey';
+
+  private setColor(p: number): void {
+    if (p <= 20)       this.color = 'red';
+    else if (p <= 40)  this.color = 'yellow';
+    else if (p <= 60)  this.color = 'darkblue';
+    else if (p <= 80)  this.color = 'lightblue';
+    else               this.color = 'green';
+  }
+}

package/projects/tuki/widgets/di2mt/widgets/site-upgrade/site-upgrade-data-table/site-upgrade-data-table.component.html

@@ -0,0 +1,163 @@
+<div *ngIf="dataPending" class="overlay">
+  <mat-progress-spinner
+    class="page-spinner"
+    mode="indeterminate"
+    [diameter]="70"
+    strokeWidth="3"></mat-progress-spinner>
+</div>
+
+<div id="siteUpgradeTable" class="wrapper">
+  <div class="site-upgrade-status-wrapper">
+    <tk-summary-card [description]="'Sites are ready to upgrade'" [value]="statusCounts['Ready']"></tk-summary-card>
+    <tk-summary-card [description]="'Sites are not ready'" [value]="statusCounts['Not Ready']"
+                     [status]="'Not Ready'"></tk-summary-card>
+    <tk-summary-card [description]="'Sites failed to upgrade'" [value]="statusCounts['Failed']"
+                     [status]="'Failed'"></tk-summary-card>
+    <tk-summary-card [description]="'Successfully upgraded'" [value]="statusCounts['Completed']"
+                     [status]="'Completed'"></tk-summary-card>
+  </div>
+  <div class="table-action-panel">
+    <tk-table-filters *ngIf="filters.length > 0" [filters]="filters" (filter)="onFilter($event)"></tk-table-filters>
+    <div class="action-wrapper">
+      <span>{{ filteredDataCount }} Sites</span>
+    </div>
+  </div>
+  <table mat-table [dataSource]="data" class="site-upgrade-table">
+
+    <!-- Site Column -->
+    <ng-container matColumnDef="site">
+      <th mat-header-cell *matHeaderCellDef>Site</th>
+      <td mat-cell *matCellDef="let element">
+        <div class="site-info">
+          {{ element.siteName }}
+        </div>
+      </td>
+    </ng-container>
+
+    <!-- Ready Users Column -->
+    <ng-container matColumnDef="ready users">
+      <th mat-header-cell *matHeaderCellDef>Ready Users</th>
+      <td mat-cell *matCellDef="let element">
+        <div class="user-count-info">
+          <div class="user-count">{{ element.totalReadyUsers }}/{{ element.totalUsers }}</div>
+          <div class="user-label">Ready/Total</div>
+        </div>
+      </td>
+    </ng-container>
+
+    <!-- Upgraded Users Column -->
+    <ng-container matColumnDef="upgraded users">
+      <th mat-header-cell *matHeaderCellDef>Upgraded Users</th>
+      <td mat-cell *matCellDef="let element">
+        <div class="user-count-info">
+          <div class="user-count">{{ element.totalUpgradedUsers }}/{{ element.totalUsers }}</div>
+          <div class="user-label">Upgraded/Total</div>
+        </div>
+      </td>
+    </ng-container>
+
+    <!-- Location Mapping Column -->
+    <ng-container matColumnDef="location mapping">
+      <th mat-header-cell *matHeaderCellDef>Location Mapping</th>
+      <td mat-cell *matCellDef="let element">
+        <div class="status-icon-cell">
+          <img *ngIf="element.locationMapping" src="assets/icons/check2_icon.png" alt="Location Mapping Enabled"/>
+          <img *ngIf="!element.locationMapping" src="assets/icons/issue_icon.png" alt="Location Mapping Disabled"/>
+        </div>
+      </td>
+    </ng-container>
+
+    <!-- PSTN Trunk Column -->
+    <ng-container matColumnDef="pstn trunk">
+      <th mat-header-cell *matHeaderCellDef>PSTN Trunk</th>
+      <td mat-cell *matCellDef="let element">
+        <div class="status-icon-cell">
+          <img *ngIf="element.PSTNTrunk" src="assets/icons/check2_icon.png" alt="PSTN Trunk Enabled"/>
+          <img *ngIf="!element.PSTNTrunk" src="assets/icons/issue_icon.png" alt="PSTN Trunk Disabled"/>
+        </div>
+      </td>
+    </ng-container>
+
+    <!-- Site Upgrade Status Column -->
+    <ng-container matColumnDef="site upgrade status">
+      <th mat-header-cell *matHeaderCellDef>Site Upgrade Status</th>
+      <td mat-cell *matCellDef="let element">
+        <div class="upgrade-status-cell">
+          <ng-container *ngIf="element.upgradeStatus === 'READY'; else statusBlock">
+            <button mat-button color="primary" class="upgrade-button" (click)="onSiteMigration(element)">Upgrade</button>
+          </ng-container>
+          <ng-template #statusBlock>
+            <div class="status-info">
+              <span class="status-indicator" [ngClass]="getSiteUpgradeStatusClass(element.upgradeStatus)"></span>
+              <span>{{ STATUS_ENTRIES[element.upgradeStatus] }}</span>
+            </div>
+          </ng-template>
+        </div>
+      </td>
+    </ng-container>
+
+    <ng-container matColumnDef="progressBar">
+      <th class="header" mat-header-cell *matHeaderCellDef></th>
+      <td mat-cell *matCellDef="let element">
+        <div class="app-progress-bar-container">
+          <app-progress-bar
+            [isAvailable]="element.isProgressBarAvailable"
+            [progress]="element.progress"
+            #progressBars>
+          </app-progress-bar>
+        </div>
+        <span *ngIf="element.isProgressBarAvailable" class="progress-percents">
+            {{ element.progress }} %
+          </span>
+      </td>
+    </ng-container>
+
+    <!-- Action Column -->
+    <ng-container matColumnDef="actions">
+      <th mat-header-cell *matHeaderCellDef>Actions</th>
+      <td mat-cell *matCellDef="let element" class="progress-spinner-td">
+        <div class="flex-container">
+          <div class="icon-play collect-icon-cell" 
+            matTooltip="Start Collecting Data"
+            [matTooltipPosition]="'above'"
+            [ngClass]="{ 'webex-action-menu-row-disabled': element.pending || element.migrationFormStatus === 'NOT_PREPARED' }"
+            (click)="element.pending || element.migrationFormStatus === 'NOT_PREPARED' ? $event.stopPropagation() : onCollect(element)">
+          </div>
+        </div>
+
+        <!-- <mat-menu
+          #defaultBatchMenu="matMenu"
+          xPosition="after"
+          class="webex-action-menu">
+
+          <div class="webex-action-menu-row"
+               [ngClass]="{ 'webex-action-menu-row-disabled': element.pending || element.migrationFormStatus === 'NOT_PREPARED' }"
+               (click)="element.pending || element.migrationFormStatus === 'NOT_PREPARED' ? $event.stopPropagation() : onCollect(element)">
+                    <span
+                      class="webex-details-icon webex-icon"
+                      [ngClass]="{ 'migration-action-disabled': element.pending || element.migrationFormStatus === 'NOT_PREPARED'}">
+                    </span>
+            <span class="webex-action-menu-title">Collect</span>
+          </div>
+        </mat-menu> -->
+
+      </td>
+    </ng-container>
+
+    <ng-container matColumnDef="userUpgradeLoader">
+      <th mat-header-cell *matHeaderCellDef></th>
+      <td class="mat-progress-spinner-td" mat-cell *matCellDef="let element">
+
+        <mat-progress-spinner
+          *ngIf="element.pending"
+          class="field-spinner"
+          [diameter]="20"
+          mode="indeterminate">
+        </mat-progress-spinner>
+      </td>
+    </ng-container>
+
+    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+  </table>
+</div>