Sub status pagination new branch

src/AdminUI/src/app/app.module.ts

@@ -119,6 +119,7 @@ import { UnarchiveCustomersDialogComponent } from './components/customer/unarchi
 import { DBManagementService } from './services/db-management.service';
 import { DBManagementComponent } from './components/db-management/db-management.component';
 import { OverviewTabService } from './services/overview-tab.service';
+import { StatusTableComponent } from './components/overview/subscription-status-tab/status-table/status-table.component';
 
 export function app_Init(settingsHttpService: SettingsHttpService) {
   return () => settingsHttpService.initializeApp();
@@ -202,6 +203,7 @@ export function app_Init(settingsHttpService: SettingsHttpService) {
     LoggingTab,
     FailedEmailsTab,
     UtilitiesTab,
+    StatusTableComponent,
   ],
   imports: [
     BrowserModule,

src/AdminUI/src/app/components/overview/subscription-status-tab/status-table/status-table.component.html

@@ -0,0 +1,90 @@
+<mat-table
+      #endingSoonTable
+      [dataSource]="tableDataSource"
+      (matSortChange)="changeSort($event)"
+      matSort
+    >
+      <!-- SUBSCRIPTION NAME -->
+      <ng-container matColumnDef="name">
+        <mat-header-cell *matHeaderCellDef mat-sort-header
+          >Subscription Name</mat-header-cell
+        >
+        <mat-cell *matCellDef="let row"> {{ row.name }}</mat-cell>
+      </ng-container>
+
+      <!-- START DATE -->
+      <ng-container matColumnDef="startDate">
+        <mat-header-cell *matHeaderCellDef mat-sort-header
+          >Start Date</mat-header-cell
+        >
+        <mat-cell *matCellDef="let row">
+          {{ row.startDate | date : dateFormat }}
+        </mat-cell>
+      </ng-container>
+
+      <!-- END DATE -->
+      <ng-container matColumnDef="endDate">
+        <mat-header-cell *matHeaderCellDef mat-sort-header
+          >End Date</mat-header-cell
+        >
+        <mat-cell *matCellDef="let row">
+          {{ row.endDate | date : dateFormat }}
+        </mat-cell>
+      </ng-container>
+
+      <!-- APPENDIX A DATE -->
+      <ng-container matColumnDef="appendixDate">
+        <mat-header-cell *matHeaderCellDef mat-sort-header
+          >Appendix A Date</mat-header-cell
+        >
+        <mat-cell *matCellDef="let row">
+          {{ row.appendixDate | date : dateFormat }}
+        </mat-cell>
+      </ng-container>
+
+      <!-- IS CONTINUOUS SUBSCRIPTION -->
+      <ng-container matColumnDef="isContinuous">
+        <mat-header-cell *matHeaderCellDef mat-sort-header
+          >Continuous</mat-header-cell
+        >
+        <mat-cell *matCellDef="let row">
+          <mat-icon
+            *ngIf="row.isContinuous"
+            aria-hidden="false"
+            aria-label="check_circle icon"
+            >check_circle
+          </mat-icon>
+        </mat-cell>
+      </ng-container>
+
+      <!-- LAST UPDATED DATE -->
+      <ng-container matColumnDef="lastUpdated">
+        <mat-header-cell *matHeaderCellDef mat-sort-header
+          >Last Updated</mat-header-cell
+        >
+        <mat-cell *matCellDef="let row">
+          {{ row.lastUpdated | date : dateFormat }}
+        </mat-cell>
+      </ng-container>
+
+      <!-- HEADER ROW -->
+      <mat-header-row
+        *matHeaderRowDef="displayColumns"
+      ></mat-header-row>
+
+      <!-- ROW DEFINITION -->
+      <mat-row
+        *matRowDef="let row; columns: displayColumns"
+        class="table-row cursor-pointer"
+        (click)="editSubscription(row)"
+      >
+      </mat-row>
+    </mat-table>
+    <mat-paginator
+      [length]="itemCount"
+      [pageSize]="pageSize"
+      (page)="paginationChange($event)"
+      [pageSizeOptions]="[5, 10, 25, 100]"
+      aria-label="Select page"
+    >
+    </mat-paginator>

src/AdminUI/src/app/components/overview/subscription-status-tab/status-table/status-table.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { StatusTableComponent } from './status-table.component';
+
+describe('StatusTableComponent', () => {
+  let component: StatusTableComponent;
+  let fixture: ComponentFixture<StatusTableComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ StatusTableComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(StatusTableComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/AdminUI/src/app/components/overview/subscription-status-tab/status-table/status-table.component.ts

@@ -0,0 +1,167 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { MatTableDataSource } from '@angular/material/table';
+import { Observable } from 'rxjs';
+import { Router } from '@angular/router';
+import { AppSettings } from 'src/app/AppSettings';
+import { SubscriptionService } from 'src/app/services/subscription.service';
+import { DataSource } from '@angular/cdk/collections';
+
+@Component({
+  selector: 'app-status-table',
+  templateUrl: './status-table.component.html',
+  styleUrls: ['./status-table.component.scss']
+})
+export class StatusTableComponent implements OnInit {
+
+
+  @Input() tableName: string
+  apiMethod: any;
+
+  dateFormat = AppSettings.DATE_FORMAT;
+  itemCount = 10;
+  pageNumber = 0;
+  pageSize = 5;
+  sortBy = "name"
+  sortOrder = "asc"
+
+  public tableDataSource: MatTableDataSource<SubscriptionWithEndDate>;
+  displayColumns = [
+    'name',
+    'startDate',
+    'endDate',
+    'appendixDate',
+    'isContinuous',
+    'lastUpdated',
+  ];
+
+  constructor(
+    private router: Router,
+    private subSvc: SubscriptionService,
+    ) { 
+      console.log(this.tableName)
+    }
+
+  getAPIMethod(){
+  }
+
+  ngOnInit(): void {
+    this.getSize()
+    // this.refreshData()
+  }
+
+  getSize(){
+    //TODO : Create seconddary API call to get size
+    if(this.tableName == "endingSoon"){
+      this.subSvc.getSubStatusEndingSoon(0,100000,this.sortBy,this.sortOrder).subscribe(
+        (success) => {
+          let arrayVal = []
+          arrayVal = success as Array<any>
+          this.itemCount = arrayVal.length;
+          this.setData(success)
+        }
+      )
+    }
+    if(this.tableName == "inProgress"){
+      this.subSvc.getSubStatusInProgress(0,100000,this.sortBy,this.sortOrder).subscribe(
+        (success) => {
+          let arrayVal = []
+          arrayVal = success as Array<any>
+          this.itemCount = arrayVal.length;
+          this.setData(success)
+        }
+      )
+    }
+    if(this.tableName == "stopped"){
+      this.subSvc.getSubStatusStopped(0,100000,this.sortBy,this.sortOrder).subscribe(
+        (success) => {
+          let arrayVal = []
+          arrayVal = success as Array<any>
+          this.itemCount = arrayVal.length;
+          this.setData(success)
+        }
+      )
+    }
+  }
+  refreshData(){
+    //Why wont it let me set the method as a variable and use it based on that :<
+    if(this.tableName == "endingSoon"){
+      this.subSvc.getSubStatusEndingSoon(this.pageNumber,this.pageSize,this.sortBy,this.sortOrder).subscribe(
+        (success) => {
+          this.setData(success)
+        }
+      )
+    }
+    if(this.tableName == "inProgress"){
+      this.subSvc.getSubStatusInProgress(this.pageNumber,this.pageSize,this.sortBy,this.sortOrder).subscribe(
+        (success) => {
+          this.setData(success)
+        }
+      )
+    }
+    if(this.tableName == "stopped"){
+      this.subSvc.getSubStatusStopped(this.pageNumber,this.pageSize,this.sortBy,this.sortOrder).subscribe(
+        (success) => {
+          this.setData(success)
+        }
+      )
+    }
+  }
+
+
+  changeSort(sortEvent) {
+    this.sortOrder = sortEvent.direction;
+    if (sortEvent.direction == '') {
+      this.sortOrder = 'asc';
+      this.sortBy = 'name';
+    } else {
+      this.sortBy = sortEvent.active;
+    }
+    this.refreshData();
+  }
+
+  paginationChange(event) {
+    this.pageNumber = event.pageIndex;
+    this.pageSize = event.pageSize;
+    this.refreshData();
+  }
+
+  setData(success){
+    this.tableDataSource = new MatTableDataSource();
+    this.tableDataSource.data = success as any
+    // this.sortingDataAccessor(this.tableDataSource);
+  }
+
+  // private sortingDataAccessor(callBack: any) {
+  //   callBack.sortingDataAccessor = (item, property) => {
+  //     switch (property) {
+  //       case 'startDate':
+  //         return new Date(item.cycle_start_date);
+  //       case 'endDate':
+  //         return new Date(item.cycle_end_date);
+  //       case 'appendixDate':
+  //         return new Date(item.appendix_a_date);
+  //       case 'isContinuous':
+  //         return item.continuous_subscription ? 1 : 0;
+  //       case 'lastUpdated':
+  //         return new Date(item.updated);
+  //       default:
+  //         return item[property];
+  //     }
+  //   };
+  // }
+
+  public editSubscription(row) {
+    this.router.navigate(['/view-subscription', row._id]);
+  }
+
+}
+
+interface SubscriptionWithEndDate {
+  // top-level primitives for column sorting
+  name: string;
+  cycle_start_date: Date;
+  cycle_end_date: Date;
+  appendix_a_date: Date;
+  is_continuous: string;
+  last_updated: Date;
+}