@tuki-io/tuki-widgets 0.0.72 → 0.0.74

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

@@ -0,0 +1,158 @@
+<div *ngIf="dataPending" class="overlay">
+  <mat-progress-spinner
+    class="page-spinner"
+    mode="indeterminate"
+    [diameter]="120"></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)="upgradeSite(element)">Upgrade</button>
+          </ng-container>
+          <ng-template #statusBlock>
+            <div class="status-info">
+              <span class="status-indicator" [ngClass]="getSiteUpgradeStatusClass(element.upgradeStatus)"></span>
+              <span [ngClass]="{'status-ready': element.upgradeStatus === 'READY'}">{{ 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">
+        <button mat-button color="primary" class="upgrade-button" (click)="onSiteMigration(element)">Upgrade</button>
+<!--        <div class="pay-button-icon"></div>-->
+        <button mat-icon-button [matMenuTriggerFor]="defaultBatchMenu">
+          <span style="font-size: 17px;">⋮</span>
+        </button>
+        <mat-menu
+          #defaultBatchMenu="matMenu"
+          xPosition="after"
+          class="webex-action-menu">
+
+          <div class="webex-action-menu-row"
+               [ngClass]="{ 'webex-action-menu-row-disabled': element.pending }"
+               (click)="element.pending  ? $event.stopPropagation() : onCollect(element)">
+                    <span
+                      class="webex-details-icon webex-icon"
+                      [ngClass]="{ 'migration-action-disabled': element.pending || STATUS_ENTRIES[element.upgradeStatus] !== 'Ready'}">
+                    </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>

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

@@ -0,0 +1,430 @@
+@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;500;600;700&display=swap');
+
+.webex-action-menu {
+  box-shadow: 0px 4px 40px 0px rgba(0, 0, 0, 0.1) !important;
+  border-radius: 0px !important;
+  width: 258px;
+  box-sizing: content-box;
+  cursor: pointer;
+}
+.webex-action-menu-row-disabled {
+  cursor: default !important;
+  opacity: 0.4;
+
+  .webex-action-menu-title {
+    color: #bababa !important;
+    line-height: 23px;
+  }
+}
+.webex-action-menu-row:hover {
+  background: #f5f5f5;
+}
+.webex-icon {
+  display: inline-block;
+  height: 25px;
+  width: 25px;
+  margin: 0 7px 0 0;
+}
+.webex-details-icon {
+  background-image: url('../../../assets/icons/details_d_icon.svg');
+}
+.webex-action-menu-row {
+  padding: 5px 15px;
+  display: flex;
+  justify-content: flex-start;
+
+  .webex-action-menu-title {
+    line-height: 23px;
+  }
+}
+.mat-menu-content:not(:empty) {
+  padding-top: 0 !important;
+}
+.mat-menu-panel {
+  min-height: auto !important;
+}
+
+#siteUpgradeTable  {
+  font-family: "Inter", sans-serif !important;
+}
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+.overlay {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(255, 255, 255, 0.4);
+  z-index: 200;
+}
+.mat-progress-spinner {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  margin-top: -20px;
+  margin-left: -25px;
+  width: 50px;
+  height: 40px;
+  text-align: center;
+  font-size: 10px;
+}
+
+::ng-deep {
+
+  .mat-progress-spinner-td {
+    position: relative;
+  }
+  #siteUpgradeTable .mat-progress-spinner-td {
+
+    .mat-progress-spinner {
+      top: 28%;
+      left: 0;
+      margin: 0;
+    }
+  }
+
+}
+
+
+.site-upgrade-status-wrapper {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  flex-wrap: wrap;
+  margin-bottom: 1rem;
+}
+
+.site-upgrade-table {
+  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;
+    font-family: "Inter", sans-serif !important;
+  }
+  .mat-header-cell {
+    border-bottom: 1px solid #afafaf;
+    font-family: "Inter", sans-serif !important;
+  }
+
+  // Site info styling
+  .site-info {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+
+    .site-indicator {
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+      background-color: #1170cf;
+    }
+  }
+  .status-ready {
+    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;
+  }
+}
+
+::ng-deep .action-wrapper {
+  display: flex;
+  align-items: center;
+  flex: 1;
+  justify-content: space-between;
+  gap: 1rem;
+  color: #555555;
+}
+
+.table-action-panel {
+    width: 100%;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    gap: 1rem;
+}
+
+/// Play button
+// Pay Button Icon - Circle with right arrow triangle
+.pay-button-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  border-radius: 50%;
+  border: 1px solid #2c355d; // Light grey border
+  background-color: #ffffff;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  position: relative;
+
+  // Blue right arrow triangle
+  &::after {
+    content: '';
+    width: 0;
+    height: 0;
+    border-left: 6px solid #2c355d; // Blue color
+    border-top: 4px solid transparent;
+    border-bottom: 4px solid transparent;
+    margin-left: 2px; // Slight offset to center visually
+  }
+
+  // Hover effects
+  &:hover {
+    border-color: #2c355d;
+    background-color: #f8fafc;
+    transform: scale(1.05);
+
+    &::after {
+      border-left-color: #2c355d; // Darker blue on hover
+    }
+  }
+
+  // Active/pressed state
+  &:active {
+    transform: scale(0.95);
+    background-color: #e2e8f0;
+  }
+
+  // Disabled state
+  &:disabled,
+  &.disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+
+    &:hover {
+      transform: none;
+      border-color: #d1d5db;
+      background-color: #ffffff;
+
+      &::after {
+        border-left-color: #2c355d;
+      }
+    }
+  }
+}
+
+// Size variations
+.pay-button-icon {
+  // Small size
+  &.small {
+    width: 32px;
+    height: 32px;
+    border-width: 1.5px;
+
+    &::after {
+      border-left-width: 6px;
+      border-top-width: 5px;
+      border-bottom-width: 5px;
+      margin-left: 1px;
+    }
+  }
+
+  // Large size
+  &.large {
+    width: 48px;
+    height: 48px;
+    border-width: 2.5px;
+
+    &::after {
+      border-left-width: 10px;
+      border-top-width: 7px;
+      border-bottom-width: 7px;
+      margin-left: 3px;
+    }
+  }
+
+  // Extra large size
+  &.xl {
+    width: 56px;
+    height: 56px;
+    border-width: 3px;
+
+    &::after {
+      border-left-width: 12px;
+      border-top-width: 8px;
+      border-bottom-width: 8px;
+      margin-left: 3px;
+    }
+  }
+}
+
+
+// Animation for loading state
+.pay-button-icon {
+  &.loading {
+    &::after {
+      display: none;
+    }
+
+    &::before {
+      content: '';
+      width: 16px;
+      height: 16px;
+      border: 2px solid #2c355d;
+      //border-top-color: #2563eb;
+      border-radius: 50%;
+      animation: spin 1s linear infinite;
+    }
+  }
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+// Usage with button text
+.pay-button {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 16px;
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-size: 14px;
+  font-weight: 500;
+  color: #2c355d;
+  transition: color 0.3s ease;
+
+  .pay-button-icon {
+    margin: 0;
+  }
+}