ngx-techlify-core 11.4.8 → 11.5.2

package/src/lib/import-csv/import-csv.component.ts

@@ -0,0 +1,198 @@
+import { ViewerConfig } from '../document-viewer/viewer-config.model';
+import { FileDropperConfig } from '../file-dropper/file-dropper.model';
+import { HttpService } from '../core/http.service';
+import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
+import { Component, Input, OnInit } from '@angular/core';
+import { AlertService } from '../core/alert.service';
+import { ErrorHandlerService } from '../core/error-handler.service';
+import * as XLSX from 'xlsx';
+import { ImportCsvConfig } from './import-csv-config';
+@UntilDestroy()
+
+@Component({
+  selector: 'app-import-csv',
+  templateUrl: './import-csv.component.html',
+  styleUrls: ['./import-csv.component.scss']
+})
+export class ImportCsvComponent implements OnInit {
+  result: any;
+  @Input() config: ImportCsvConfig;
+  filesConfig: FileDropperConfig;
+  filesList: any[] = [];
+  data: any[] = [];
+  isUploaded: boolean = false;
+  isImportTypeSelected: boolean = false;
+  viewerConfig: ViewerConfig;
+  fileData: any[] = [];
+  failedItems: any[] = [];
+  selectedFields: any[] = [];
+  importSteps: any = [
+    {
+      id: 1,
+      step: 1,
+      title: 'Upload',
+      progressTitle: '',
+      progressDescription: ''
+    },
+    {
+      id: 2,
+      step: 2,
+      title: 'Field Mappings',
+      progressTitle: '',
+      progressDescription: ''
+    },
+    {
+      id: 3,
+      step: 3,
+      title: 'Data Validation',
+      progressTitle: 'Data Being Validated',
+      progressDescription: 'The data is currently being validated and checked for errors, please do not navigate away from this page. '
+    },
+    {
+      id: 4,
+      step: 3,
+      title: 'Data Validation & Errors',
+      progressTitle: '',
+      progressDescription: ''
+    },
+    {
+      id: 5,
+      step: 4,
+      title: 'Data Importing',
+      progressTitle: 'Data Being Imported',
+      progressDescription: 'The data is currently being imported and saved, please do not navigate away from this page. After the import is completed, you will be redirected to a page with the imported records.'
+    },
+    {
+      id: 6,
+      step: 5,
+      title: 'Success Page & Data Preview',
+      progressTitle: '',
+      progressDescription: ''
+    },
+  ];
+  currentStep: any = 1;
+
+  constructor(
+    private alertService: AlertService,
+    private errorHandler: ErrorHandlerService,
+    private http: HttpService,
+  ) {
+    this.filesConfig = {
+      fileId: "file",
+      containerId: "fileContainer",
+      styles: {
+        height: "200px"
+      },
+      acceptFile: '.csv',
+      multiple: false,
+      maxSize: 10,
+      acceptFileText: ".csv"
+    };
+  }
+
+  ngOnInit() {
+  }
+
+  get step() {
+    return this.importSteps.find(step => step.id == this.currentStep);
+  }
+
+  async fileChanged(event: any) {
+    this.currentStep = 2;
+    this.filesList = event;
+
+    let selectedFile = null;
+    let jsonData = null;
+    const reader = new FileReader();
+    const file = this.filesList[0];
+    reader.onload = (event) => {
+      const data = reader.result;
+      selectedFile = XLSX.read(data, {
+        type: 'binary',
+        cellDates: true,
+      });
+      jsonData = selectedFile.SheetNames.reduce((initial, name) => {
+        const sheet = selectedFile.Sheets[name];
+        initial = XLSX.utils.sheet_to_json(sheet, {
+          header: 0,
+          defval: "",
+        });
+        return initial;
+      }, {});
+      this.fileData = jsonData;
+    }
+    reader.readAsBinaryString(file);
+    return;
+  }
+
+  mappingProcessed(event: any) {
+    this.currentStep = 3;
+    setTimeout(x => {
+      this.selectedFields = event.fields;
+      const tempFileData = JSON.parse(JSON.stringify(this.fileData));
+      tempFileData.forEach(data => {
+        for (var key in data) {
+          var field = event.fields.find((field: any) => field.label == key);
+          if (field) {
+            if ((field.propertyType == 'date' || field.propertyType == 'dateTime') && this.isValidDate(new Date(data[field.label]))) {
+              data[field.property] = (new Date(data[field.label]) as Date).toISOString();
+            }
+            else {
+              data[field.property] = data[field.label];
+            }
+            delete data[key];
+          }
+          else {
+            delete data[key];
+          }
+        }
+      });
+      this.save(tempFileData);
+    }, 2000);
+  }
+
+  async save(tempFileData: any) {
+    try {
+      this.http.post(this.config.apiUrl, { data: tempFileData })
+        .pipe(
+          untilDestroyed(this)
+        ).subscribe((result: any) => {
+
+          this.failedItems = result.failed_items;
+          if (this.failedItems.length) {
+            this.alertService.addAlert(result.msg, 'warn');
+          }
+          if (!(this.failedItems.length > 0)) {
+            this.currentStep = 5;
+            setTimeout(x => {
+              this.currentStep = 6;
+              this.result = result;
+            }, 2000);
+          }
+          else {
+            this.currentStep = 4;
+          }
+        });
+    } catch (error) {
+      if ((error.status === 422 || error.status === 400) && error.msg) {
+        this.alertService.addAlert(error.msg, "warning");
+      }
+      this.errorHandler.handleError(error);
+      this.reUpload();
+    }
+  }
+
+  isValidDate(d: any) {
+    return d instanceof Date && !isNaN(d.getTime());
+  }
+
+  reUpload() {
+    this.data = [];
+    this.fileData = [];
+    this.filesList = [];
+    this.failedItems = [];
+    this.selectedFields = [];
+    this.currentStep = 1;
+  }
+
+}

package/src/lib/import-csv/import-csv.module.ts

@@ -0,0 +1,43 @@
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { DocumentViewerModule } from './../document-viewer/document-viewer.module';
+import { FileDropperModule } from './../file-dropper/file-dropper.module';
+import { MaterialModule } from './../material.module';
+import { ImportSuccessComponent } from './import-success/import-success.component';
+import { ImportHistoryListComponent } from './import-history-list/import-history-list.component';
+import { FieldMappingComponent } from './field-mapping/field-mapping.component';
+import { FailedItemsListComponent } from './failed-items-list/failed-items-list.component';
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { FlexLayoutModule } from '@angular/flex-layout';
+import { ImportCsvComponent } from './import-csv.component';
+import { RouterModule } from '@angular/router';
+import { InfiniteScrollModule } from 'ngx-infinite-scroll';
+import { DataImportComponent } from './data-import/data-import.component';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    ReactiveFormsModule,
+    FlexLayoutModule,
+    RouterModule,
+    MaterialModule,
+    FlexLayoutModule,
+    FileDropperModule,
+    DocumentViewerModule,
+    InfiniteScrollModule
+  ],
+  declarations: [
+    ImportCsvComponent,
+    FieldMappingComponent,
+    FailedItemsListComponent,
+    ImportHistoryListComponent,
+    ImportSuccessComponent,
+    DataImportComponent
+  ],
+  providers: [],
+  exports: [
+    ImportCsvComponent
+  ],
+})
+export class ImportCsvModule { }

package/src/lib/import-csv/import-history-list/import-history-list.component.html

@@ -0,0 +1,43 @@
+<section fxLayout="column">
+  <h5 class="primary-color py-3">
+    Import History
+  </h5>
+  <table mat-table [dataSource]="histories" class="mat-elevation-z8 w-100" infi infiniteScroll
+    [infiniteScrollDistance]="2" [infiniteScrollThrottle]="50" (scrolled)="onScroll()">
+
+    <!-- Index Column -->
+    <ng-container matColumnDef="index">
+      <th mat-header-cell *matHeaderCellDef> # </th>
+      <td mat-cell *matCellDef="let element;let i=index"> {{ i+1 }} </td>
+    </ng-container>
+
+    <!-- Date Column -->
+    <ng-container matColumnDef="date">
+      <th mat-header-cell *matHeaderCellDef> Date </th>
+      <td mat-cell *matCellDef="let element"> {{element?.created_at | date:'medium'}} </td>
+    </ng-container>
+
+    <!-- Imported By Column -->
+    <ng-container matColumnDef="imported_by">
+      <th mat-header-cell *matHeaderCellDef> Imported By </th>
+      <td mat-cell *matCellDef="let element"> {{element?.creator?.name}} </td>
+    </ng-container>
+
+    <!-- No of records Column -->
+    <ng-container matColumnDef="no_of_records">
+      <th mat-header-cell *matHeaderCellDef> # of Records </th>
+      <td mat-cell *matCellDef="let element">
+        <a *ngIf="config.viewRouterLink" href="javascript:;"
+          [routerLink]="[config.viewRouterLink, {import_id: element?.id}]">
+          {{element?.no_of_records}}
+        </a>
+        <span *ngIf="!config.viewRouterLink">
+          {{element?.no_of_records}}
+        </span>
+      </td>
+    </ng-container>
+
+    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+  </table>
+</section>

package/src/lib/import-csv/import-history-list/import-history-list.component.spec.ts

@@ -0,0 +1,28 @@
+/* tslint:disable:no-unused-variable */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
+
+import { ImportHistoryListComponent } from './import-history-list.component';
+
+describe('ImportHistoryListComponent', () => {
+  let component: ImportHistoryListComponent;
+  let fixture: ComponentFixture<ImportHistoryListComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ImportHistoryListComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ImportHistoryListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/import-csv/import-history-list/import-history-list.component.ts

@@ -0,0 +1,74 @@
+import { ErrorHandlerService } from './../../core/error-handler.service';
+import { PageEvent } from './../../data-table/data-table.model';
+import { Component, Input, OnInit } from '@angular/core';
+import { ImportCsvConfig } from '../import-csv-config';
+import { HttpService } from '../../core/http.service';
+
+@Component({
+  selector: 'app-import-history-list',
+  templateUrl: './import-history-list.component.html',
+  styleUrls: ['./import-history-list.component.scss']
+})
+export class ImportHistoryListComponent implements OnInit {
+
+  @Input() config: ImportCsvConfig;
+  histories: any[] = [];
+  displayedColumns: string[] = [
+    'index',
+    'imported_by',
+    'date',
+    'no_of_records'
+  ];
+  isWorking: boolean = false;
+  filter: any;
+  pageEvent: PageEvent = { page: 1, perPage: 25, lastPage: 1 };
+
+  constructor(
+    private errorHandler: ErrorHandlerService,
+    private http: HttpService,
+  ) {
+  }
+
+  ngOnInit() {
+    if (this.config.importHistory.isEnabled) {
+      this.filter = {
+        model_type: this.config.importHistory.type,
+      };
+    }
+    this.loadData();
+  }
+
+  loadData() {
+    try {
+      this.isWorking = true;
+      this.http.get(this.config.importHistory.apiUrl, { params: { ...this.filter, ...this.pageEvent } }).subscribe((result: any) => {
+        this.histories = this.histories.concat(result.data);
+        this.pageEvent.page = result.current_page;
+        this.pageEvent.lastPage = result.last_page;
+      });
+    } catch (error) {
+      this.errorHandler.handleError(error);
+    }
+    finally {
+      this.isWorking = false;
+    }
+  }
+
+  onScroll() {
+    if (this.pageEvent.lastPage > this.pageEvent.page) {
+      this.pageEvent.page += 1;
+      this.loadData();
+    }
+  }
+
+  reload() {
+    this.histories = [];
+    this.pageEvent = { page: 1, perPage: 25, lastPage: 1 };
+    this.loadData();
+  }
+
+  ngOnDestroy() {
+    //Until destroyed uses it
+  }
+
+}

package/src/lib/import-csv/import-success/import-success.component.html

@@ -0,0 +1,22 @@
+<mat-card fxFlex="100%" fxLayoutAlign="center center" class="p-0">
+  <mat-card-content class="pt-3" fxLayout="column" fxLayoutAlign="center center">
+    <mat-icon style="transform: scale(2);" class="text-success">
+      <span class="material-icons-outlined">
+        check_circle
+      </span>
+    </mat-icon>
+    <h3 class="font-weight-bold p-3 text-success" fxLayoutAlign="center center">
+      {{data?.no_of_recrods}} Records have been successfully imported
+    </h3>
+    <ng-container *ngIf="config.viewRouterLink">
+      <div class="text-muted p-3 text-center" fxLayoutAlign="center center">
+        Click the button below to view the imported records.
+      </div>
+      <div class="text-muted p-3 text-center" fxLayoutAlign="center center">
+        <button type="button" mat-raised-button [routerLink]="[config.viewRouterLink, {import_id: data?.import_id}]">
+          View Imported Records
+        </button>
+      </div>
+    </ng-container>
+  </mat-card-content>
+</mat-card>

package/src/lib/import-csv/import-success/import-success.component.spec.ts

@@ -0,0 +1,28 @@
+/* tslint:disable:no-unused-variable */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
+
+import { ImportSuccessComponent } from './import-success.component';
+
+describe('ImportSuccessComponent', () => {
+  let component: ImportSuccessComponent;
+  let fixture: ComponentFixture<ImportSuccessComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ImportSuccessComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ImportSuccessComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/import-csv/import-success/import-success.component.ts

@@ -0,0 +1,17 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { ImportCsvConfig } from '../import-csv-config';
+
+@Component({
+  selector: 'app-import-success',
+  templateUrl: './import-success.component.html',
+  styleUrls: ['./import-success.component.scss']
+})
+export class ImportSuccessComponent implements OnInit {
+  @Input() data: any;
+  @Input() config: ImportCsvConfig;
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

package/src/lib/loader/loader.component.html

@@ -0,0 +1,4 @@
+<div [hidden]="!isLoading">
+  <mat-progress-spinner mode="indeterminate" [strokeWidth]="2" [diameter]="32 * size"></mat-progress-spinner>
+  <span class="message">{{message}}</span>
+</div>

package/src/lib/loader/loader.component.scss

@@ -0,0 +1,8 @@
+.mat-progress-spinner {
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.message {
+  margin-left: 0.5em;
+}

package/src/lib/loader/loader.component.spec.ts

@@ -0,0 +1,73 @@
+import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { FlexLayoutModule } from '@angular/flex-layout';
+
+import { MaterialModule } from '@app/material.module';
+import { LoaderComponent } from './loader.component';
+
+describe('LoaderComponent', () => {
+  let component: LoaderComponent;
+  let fixture: ComponentFixture<LoaderComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        BrowserAnimationsModule,
+        FlexLayoutModule,
+        MaterialModule
+      ],
+      declarations: [LoaderComponent]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LoaderComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should not be visible by default', () => {
+    // Arrange
+    const element = fixture.nativeElement;
+    const div = element.querySelectorAll('div')[0];
+
+    // Assert
+    expect(div.getAttribute('hidden')).not.toBeNull();
+  });
+
+  it('should be visible when app is loading', () => {
+    // Arrange
+    const element = fixture.nativeElement;
+    const div = element.querySelectorAll('div')[0];
+
+    // Act
+    fixture.componentInstance.isLoading = true;
+    fixture.detectChanges();
+
+    // Assert
+    expect(div.getAttribute('hidden')).toBeNull();
+  });
+
+  it('should not display a message by default', () => {
+    // Arrange
+    const element = fixture.nativeElement;
+    const span = element.querySelectorAll('span')[0];
+
+    // Assert
+    expect(span.textContent).toBe('');
+  });
+
+  it('should display specified message', () => {
+    // Arrange
+    const element = fixture.nativeElement;
+    const span = element.querySelectorAll('span')[0];
+
+    // Act
+    fixture.componentInstance.message = 'testing';
+    fixture.detectChanges();
+
+    // Assert
+    expect(span.textContent).toBe('testing');
+  });
+});

package/src/lib/loader/loader.component.ts

@@ -0,0 +1,18 @@
+import { Component, OnInit, Input } from '@angular/core';
+
+@Component({
+  selector: 'app-loader',
+  templateUrl: './loader.component.html',
+  styleUrls: ['./loader.component.scss']
+})
+export class LoaderComponent implements OnInit {
+
+  @Input() isLoading = false;
+  @Input() size = 0.6;
+  @Input() message: string | undefined;
+
+  constructor() { }
+
+  ngOnInit() { }
+
+}

package/src/lib/loader/loader.module.ts

@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { LoaderComponent } from './loader.component';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+
+@NgModule({
+  declarations: [
+    LoaderComponent
+  ],
+  imports: [
+    CommonModule,
+    MatProgressSpinnerModule
+  ],
+  exports: [
+    LoaderComponent
+  ]
+})
+export class LoaderModule { }

package/src/lib/login-history-for-user/login-history-for-user-routing.module.ts

@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+import { AuthenticationGuard } from '../core/authentication.guard';
+import { LoginHistoryForUserComponent } from './login-history-for-user.component';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: LoginHistoryForUserComponent,
+    canActivate: [AuthenticationGuard]
+  },
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class LoginHistoryForUserRoutingModule { }

package/src/lib/login-history-for-user/login-history-for-user.component.html

@@ -0,0 +1,31 @@
+<div class="mat-typography m-4">
+    <form [formGroup]="historyFilterForm" fxLayoutAlign=" start center">
+        <app-timeline-filter formControlName="duration" (selectionChange)="onTimelineChange($event)"></app-timeline-filter>
+    </form>
+
+    <section>
+        <div class="scroll-container" infiniteScroll [infiniteScrollDistance]="2" [infiniteScrollThrottle]="50"
+            (scrolled)="onScroll()" [scrollWindow]="false">
+            <table mat-table [dataSource]="loginHistoryList" matSort class="w-100 mt-1" multiTemplateDataRows
+                id="login-history-table">
+
+                <!-- Index Column -->
+                <ng-container matColumnDef="index">
+                    <th mat-header-cell *matHeaderCellDef> # </th>
+                    <td mat-cell *matCellDef="let loginHistory; let i = dataIndex"> {{ i+1 }} </td>
+                </ng-container>
+
+                <ng-container matColumnDef="created_at">
+                    <th mat-header-cell *matHeaderCellDef mat-sort-header> Last Login</th>
+                    <td mat-cell *matCellDef="let loginHistory;">
+                        {{loginHistory?.created_at | date:'medium' }}
+                    </td>
+                </ng-container>
+
+                <tr mat-header-row *matHeaderRowDef="displayedColumns;"></tr>
+                <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+            </table>
+        </div>
+
+    </section>
+</div>

package/src/lib/login-history-for-user/login-history-for-user.component.scss

@@ -0,0 +1,4 @@
+.scroll-container{
+    max-height: 800px;
+    overflow-y: auto;
+}

package/src/lib/login-history-for-user/login-history-for-user.component.spec.ts

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