@tuki-io/tuki-widgets 0.0.64 → 0.0.65

package/projects/tuki/widgets/di2mt/shared/services/api.service.ts

@@ -0,0 +1,92 @@
+import { Injectable } from '@angular/core';
+import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { Observable } from 'rxjs';
+
+@Injectable({
+    providedIn: 'root'
+})
+export class APIService {
+  public token: any;
+  apiUrl = window.location.protocol + '//' + window.location.hostname + '/dcp';
+  constructor(
+    private httpClient: HttpClient
+  ) {
+    this.token = 'eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJhZG1pbkBjb3JyZW5ldC5jb20iLCJyb2xlcyI6IlNVUEVSX1VTRVIiLCJpYXQiOjE3NTUwODUyMzgsImV4cCI6MTc1NTEwMzIzOH0.X1CKx-OBZvSs7Bzr_4SWW2ulBgHNkYZrmVuv6V7FZyo'
+    // this.apiUrl = window.location.protocol + '//' + window.location.host + '/dcp';
+    this.apiUrl = 'https://dev.tuki.io/webex';
+    // this.apiUrl = 'http://localhost:8088/dcp';
+  }
+
+  fetch(url: string, params?: any, cache?: boolean): Observable<any> {
+    const headers = this.getHeaders(cache);
+    params = params || {};
+    return this.httpClient.get(this.apiUrl + url, {params: this.prepareEncodedParams(params), headers});
+  }
+
+  post(url: string, body: any, params = {}): Observable<any> {
+    body = body || null;
+    const headers = this.getHeaders();
+    return this.httpClient.post(this.apiUrl + url, body, {params: this.prepareEncodedParams(params), headers});
+  }
+
+  // use when response extended data is necessary:
+  postExtended(url: string, body = null, params = {}, headers = {}) {
+    headers = headers || this.getHeaders();
+    return this.httpClient.post(this.apiUrl + url, body, {
+      headers,
+      observe: 'response',
+      params: this.prepareEncodedParams(params)
+    });
+  }
+
+  put(url: string, body = null, params = {}) {
+    const headers = this.getHeaders();
+    return this.httpClient.put(this.apiUrl + url, body, {headers, params: this.prepareEncodedParams(params)});
+  }
+
+  delete(url: string, params = {}) {
+    const headers = this.getHeaders();
+    return this.httpClient.delete(this.apiUrl + url, {headers, params: this.prepareEncodedParams(params)});
+  }
+
+  fetchPagination(url: string, pageSize: number, pageNumber: number, additionalParams = {}, cache?: boolean): Observable<any> {
+    const copyAdditionalParams = JSON.parse(JSON.stringify(additionalParams));
+    const params = Object.assign(copyAdditionalParams, {size: pageSize.toString(), page: pageNumber.toString()});
+    return this.fetch(url, params, cache) as Observable<any>;
+  }
+
+  private prepareEncodedParams(params: any) {
+    const result: any = {};
+
+    if (!params) {
+      return {};
+    }
+    for (const key of Object.keys(params)) {
+      if (params[key]) {
+        const stringParam = params[key].toString();
+        result[key] = stringParam.includes('+') ? encodeURIComponent(stringParam) : stringParam;
+      }
+    }
+    return result;
+  }
+
+  private getHeaders(cache?: boolean): HttpHeaders {
+    let headers = new HttpHeaders();
+    if (cache) {
+      headers = headers.append('_Cache', 'true ');
+    }
+    const token = this.token || this.getParameterByName('token');
+    headers = headers.append('Authorization', 'Bearer '+ token);
+    return headers;
+  }
+
+  private getParameterByName(name: any, url = window.location.href) {
+    name = name.replace(/[\[\]]/g, '\\$&');
+    var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
+      results = regex.exec(url);
+    if (!results) return null;
+    if (!results[2]) return '';
+    return decodeURIComponent(results[2].replace(/\+/g, ' '));
+  }
+
+}

package/projects/tuki/widgets/di2mt/shared/shared.module.ts

@@ -0,0 +1,38 @@
+import { NgModule } from "@angular/core";
+import { CardComponent } from "./components/card/card.component";
+import { CommonModule } from "@angular/common";
+import { MaterialModule } from "./material.module";
+import { StatCardComponent } from "./components/stat-card/stat-card.component";
+import { StatusListCardComponent } from "./components/status-list-card/status-list-card.component";
+import { ChartCardComponent } from "./components/chart-card/chart-card.component";
+import { NgApexchartsModule } from "ng-apexcharts"
+import { MatTableModule } from "@angular/material/table";
+import { TableFiltersComponent } from "./components/table-filters/table-filters.component";
+import { HttpClientModule } from "@angular/common/http";
+import { SummaryCardComponent } from "./components/summary-card/summary-card.component";
+
+@NgModule({
+    declarations: [
+        CardComponent,
+        StatCardComponent,
+        StatusListCardComponent,
+        ChartCardComponent,
+        SummaryCardComponent,
+        TableFiltersComponent
+    ],
+    imports: [
+        CommonModule,
+        MaterialModule,
+        NgApexchartsModule,
+        HttpClientModule
+    ],
+    exports: [
+        CardComponent,
+        StatCardComponent,
+        StatusListCardComponent,
+        ChartCardComponent,
+        SummaryCardComponent,
+        TableFiltersComponent
+    ]
+})
+export class SharedModule {}

package/projects/tuki/widgets/di2mt/shared/types/constants.ts

@@ -0,0 +1,14 @@
+export type Status = 'Ready' | 'Not Ready' | 'Partial Ready' | 'Failed' | 'Completed';
+
+export const STATUS_ENTRIES: { [key: string]: Status } = {
+    READY: 'Ready',
+    NOT_READY: 'Not Ready',
+    PARTIAL_READY: 'Partial Ready',
+    FAILED: 'Failed',
+    COMPLETED: 'Completed'
+};
+
+export const DEPENDENCIES_STATUS: { [key: string]: string } = {
+    DEPENDENCIES_FOUND: 'Dependencies found',
+    NO_DEPENDENCIES: 'No dependencies',
+};

package/projects/tuki/widgets/di2mt/shared/types/data-table.ts

@@ -0,0 +1,5 @@
+export type TableColumn = {
+    key: string,
+    label: string,
+    sortable: boolean
+};

package/projects/tuki/widgets/di2mt/shared/types/table/filter.ts

@@ -0,0 +1,14 @@
+export type FilterKind = 'search' | 'select';
+
+export type TableFilter = {
+    id: string,
+    columnKey: string,
+    type: FilterKind,
+    placeholder: string,
+    icon?: {
+        name?: string,
+        src?: string
+    },
+    options: { label: string, value: string }[],
+    defaultValue?: string
+}

package/projects/tuki/widgets/di2mt/styles/tuki-widgets-theme.scss

@@ -0,0 +1,13 @@
+/* Minimal Material Design styles for Tuki Widgets */
+
+/* Import only the core Material styles needed for our components */
+@import '~@angular/material/prebuilt-themes/indigo-pink.css';
+
+/* Override with Tuki brand colors */
+:root {
+  --tuki-primary-color: #08599C;
+  --tuki-accent-color: #1170CF;
+  --tuki-warn-color: #F23933;
+  --tuki-success-color: #1D805F;
+  --tuki-warning-color: #F8CD00;
+}

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

@@ -0,0 +1,92 @@
+//@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;

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

@@ -0,0 +1,92 @@
+<div 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">
+                <span class="site-indicator"></span>
+                {{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="STATUS_ENTRIES[element.upgradeStatus] === 'Ready'; else statusBlock">
+                    <button mat-button color="primary" class="upgrade-button" (click)="upgradeSite(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>
+
+    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+</table>
+</div>

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

@@ -0,0 +1,187 @@
+@import "../../../styles/variables.scss";
+
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.site-upgrade-status-wrapper {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  flex-wrap: wrap;
+  margin-bottom: 1rem;
+}
+
+.site-upgrade-table {
+  font-family: $main-font;
+  width: 100%;
+  background: white;
+  border-radius: 8px;
+  overflow: hidden;
+  font-size: 14px;
+
+  .mat-header-row {
+    // background-color: #ededed;
+    font-size: 12px;
+    height: 35px;
+  }
+
+  .mat-cell {
+    border-bottom: 1px solid #d6d6d6;
+  }
+  .mat-header-cell {
+    border-bottom: 1px solid #afafaf;
+  }
+
+  // Site info styling
+  .site-info {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+
+    .site-indicator {
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+      background-color: #1170cf;
+    }
+  }
+
+  // Device info styling
+  .device-info {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+
+    .device-name-wrapper {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      // margin-bottom: 2px;
+
+      .device-name {
+        font-weight: 500;
+        color: #212121;
+      }
+
+      .device-indicator {
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+        background-color: #f8cd00;
+      }
+    }
+
+    .device-model {
+      font-size: 12px;
+      color: #757575;
+    }
+  }
+
+  // Status indicators
+  .status-info {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+
+    .status-indicator {
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+
+      &.ready {
+        background-color: #1d805f;
+      }
+
+      &.partial-ready {
+        background-color: #f8cd00;
+      }
+
+      &.not-ready {
+        background-color: #9e9e9e;
+      }
+
+      &.completed {
+        background-color: #1d805f;
+      }
+
+      &.failed {
+        background-color: #f23933;
+      }
+    }
+  }
+
+  // Dependencies styling
+  .dependencies-text {
+    font-size: 12px;
+    background-color: #ffe9e9;
+    padding: 0.25rem 0.5rem;
+    border-radius: 3px;
+    color: #000;
+  }
+
+  // Upgrade status cell
+  .upgrade-status-cell {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+  }
+
+  // Upgrade button styling
+  .upgrade-button {
+    border: 1px solid #08599c;
+    color: #08599c;
+    background: white;
+    // padding: 6px 16px;
+    border-radius: 20px;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 500;
+    height: 32px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    &:hover {
+      background-color: #e3f2fd;
+    }
+  }
+
+  // User count info styling
+  .user-count-info {
+    .user-count {
+      font-weight: 500;
+      color: #212121;
+      // margin-bottom: 2px;
+    }
+
+    .user-label {
+      font-size: 12px;
+      color: #757575;
+    }
+  }
+
+  // Status icon cell styling
+  .status-icon-cell {
+    display: flex;
+    align-items: center;
+  }
+}
+
+.action-wrapper {
+  display: flex;
+  align-items: center;
+  flex: 1;
+  justify-content: space-between;
+  gap: 1rem;
+}
+
+.table-action-panel {
+    width: 100%;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    gap: 1rem;
+}