ngx-techlify-core 11.4.8 → 11.5.2

package/src/lib/import-csv/data-import/data-import.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 { DataImportComponent } from './data-import.component';
+
+describe('DataImportComponent', () => {
+  let component: DataImportComponent;
+  let fixture: ComponentFixture<DataImportComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ DataImportComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DataImportComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

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

package/src/lib/import-csv/failed-items-list/failed-items-list.component.html

@@ -0,0 +1,61 @@
+<div *ngIf="failedItems.length" class="mt-4" fxLayout="column">
+  <div fxLayout="row wrap" class="pb-3">
+    <h5 fxFlex="30%" class="primary-color">Summary</h5>
+    <div fxFlex="70%" fxLayoutAlign="center center">
+      <h5 class="secondary-color">
+        <span class="font-weight-bold">{{failedItems.length}}</span>
+      </h5>
+      <span class="text-muted ml-2"> Error(s) Found In Uploaded File</span>
+    </div>
+  </div>
+
+  <div>
+    <mat-divider></mat-divider>
+  </div>
+  <div fxLayout="row wrap" class="pt-3">
+    <h5 class="primary-color">Errors</h5>
+    <div style="overflow-x: auto;width: 1100px;" class="pt-3">
+      <table class="table table-bordered table-striped table-hover table-sm ml-4 w-100">
+        <thead>
+          <tr>
+            <th>#</th>
+            <th *ngFor="let field of selectedFields;">{{field?.label}}</th>
+            <th class="text-danger">Error</th>
+          </tr>
+        </thead>
+        <tbody>
+          <ng-container *ngFor="let timesheet of failedItems; let i=index">
+            <tr>
+              <td>{{i + 1}}</td>
+              <td *ngFor="let field of selectedFields;">
+                <ng-container *ngIf="(field.propertyType == 'date' || field.propertyType == 'dateTime')
+                 &&isValidDate(timesheet[field.property]);else elseProperty;">
+                  {{ timesheet[field.property] | date: 'MMM d, y, H:mm:ss' }}
+                </ng-container>
+                <ng-template #elseProperty>
+                  {{ timesheet[field.property] }}
+                </ng-template>
+              </td>
+              <td class="text-danger">
+                {{timesheet?.error}}
+              </td>
+            </tr>
+          </ng-container>
+        </tbody>
+      </table>
+    </div>
+  </div>
+  <div class="mt-1" fxFlex="100%" fxLayoutAlign="end">
+    <button mat-button class="mt-2 mr-2" type="button" (click)="location.back()">
+      Close
+    </button>
+    <button mat-stroked-button class="mt-2 mr-2 primary-color" type="button" (click)="reUpload()">
+      <mat-icon>
+        <span class="material-icons-outlined">
+          file_upload
+        </span>
+      </mat-icon>
+      Re-upload
+    </button>
+  </div>
+</div>

package/src/lib/import-csv/failed-items-list/failed-items-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 { FailedItemsListComponent } from './failed-items-list.component';
+
+describe('FailedItemsListComponent', () => {
+  let component: FailedItemsListComponent;
+  let fixture: ComponentFixture<FailedItemsListComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ FailedItemsListComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FailedItemsListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/import-csv/failed-items-list/failed-items-list.component.ts

@@ -0,0 +1,30 @@
+import { Location } from '@angular/common';
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+
+@Component({
+  selector: 'app-failed-items-list',
+  templateUrl: './failed-items-list.component.html',
+  styleUrls: ['./failed-items-list.component.scss']
+})
+export class FailedItemsListComponent implements OnInit {
+  @Input() failedItems: any[];
+  @Input() selectedFields: any[];
+  @Output() onReUpload = new EventEmitter();
+
+  constructor(
+    public location: Location
+  ) { }
+
+  ngOnInit() {
+  }
+
+  isValidDate(d: any): boolean {
+    var date = new Date(d);
+    return date instanceof Date && !isNaN(date.getTime());
+  }
+
+  reUpload() {
+    this.onReUpload.emit(true);
+  }
+
+}

package/src/lib/import-csv/field-mapping/field-mapping.component.html

@@ -0,0 +1,70 @@
+<div fxLayout="column" class="mt-2">
+  <div fxLayout="row wrap" class="pb-3">
+    <h5 fxFlex="30%" class="primary-color">Summary</h5>
+    <div fxFlex="70%" fxLayoutAlign="center center">
+      <h5 class="secondary-color">
+        <span class="font-weight-bold">{{data.length}}</span>
+      </h5>
+      <span class="text-muted ml-2"> Records Found In Uploaded File</span>
+    </div>
+  </div>
+
+  <div>
+    <mat-divider></mat-divider>
+  </div>
+
+  <form [formGroup]="importMappingForm" (ngSubmit)="next()" fxLayout="column" class="pt-3">
+    <h5 class="primary-color pb-2">Properties</h5>
+    <table style="width: 100%;" class="table table-sm table-striped">
+      <tr class="table-header-row">
+        <th>Column Headers From File</th>
+        <th>Preview Information</th>
+        <th>Property</th>
+      </tr>
+      <ng-container formArrayName="fields">
+        <tr *ngFor="let field of fieldsArray.controls; let i=index" [formGroupName]="i">
+          <td>{{ field.get('label').value }}</td>
+          <td>{{ field.get('value').value }}</td>
+          <td>
+            <mat-form-field fxFlex="100%" appearance="outline">
+              <mat-label>Select Property</mat-label>
+              <mat-select placeholder="Select Property" formControlName="property" required
+                (selectionChange)="updatePropertyType($event, i)">
+                <mat-option *ngFor="let property of properties" [value]="property.value">
+                  {{property.label}}
+                </mat-option>
+              </mat-select>
+              <mat-error *ngIf="isFieldValid('property', fieldsArray.controls[i])">
+                {{getErrorMessage('property', fieldsArray.controls[i])}}
+              </mat-error>
+            </mat-form-field>
+            <button type="button" mat-icon-button (click)="removeField(i)" *ngIf="fieldsArray.length > 1"
+              matTooltip="Remove column" matTooltipPosition="right">
+              <mat-icon class="text-danger">remove_circle</mat-icon>
+            </button>
+          </td>
+        </tr>
+      </ng-container>
+    </table>
+
+    <div class="mt-1" fxFlex="100%" fxLayoutAlign="end">
+      <button mat-button class="mt-2 mr-2" type="button" (click)="location.back()">
+        Cancel
+      </button>
+      <button mat-stroked-button class="mt-2 mr-2 primary-color" type="button" (click)="reUpload()">
+        <mat-icon>
+          <span class="material-icons-outlined">
+            file_upload
+          </span>
+        </mat-icon>
+        Re-upload
+      </button>
+      <button mat-stroked-button class="mt-2 primary-bg text-white" type="submit">
+        Next
+        <mat-icon>
+          chevron_right
+        </mat-icon>
+      </button>
+    </div>
+  </form>
+</div>

package/src/lib/import-csv/field-mapping/field-mapping.component.scss

@@ -0,0 +1,15 @@
+table {
+    width: 100%;
+  }
+  
+  th,
+  td {
+    padding: 1%;
+  }
+  
+  .table-header-row {
+    background-color: #e6e4e4;
+    color: black;
+    font-weight: bolder;
+  }
+  

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

@@ -0,0 +1,161 @@
+import { FormValidatorService } from '../../core/form-validator.service';
+import { ChangeDetectorRef, Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { FormArray, FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
+import { Location } from '@angular/common';
+import { ImportCsvConfig } from '../import-csv-config';
+
+const errorMessages: any = {
+  property: {
+    required: "Property is required",
+    unavailable: "Duplicate entry"
+  },
+};
+
+@Component({
+  selector: 'app-field-mapping',
+  templateUrl: './field-mapping.component.html',
+  styleUrls: ['./field-mapping.component.scss']
+})
+export class FieldMappingComponent implements OnInit {
+
+  importMappingForm: FormGroup;
+  @Input() data: any[];
+  @Input() config: ImportCsvConfig;
+  firstDataArray: any[] = [];
+  properties: any[] = [];
+  @Output() onSave = new EventEmitter();
+  @Output() onReUpload= new EventEmitter();
+
+  constructor(
+    private fb: FormBuilder,
+    private formValidatorService: FormValidatorService,
+    private changeDetectorRef: ChangeDetectorRef,
+    public location: Location
+  ) {
+    this.createImportMappingForm();
+  }
+
+  ngOnInit() {
+    this.properties = this.config.properties;;
+    this.reFectorAttributes(this.data[0]);
+  }
+
+  createImportMappingForm() {
+    this.importMappingForm = this.fb.group({
+      fields: this.fb.array([]),
+    });
+  }
+
+  get fieldsArray(): FormArray {
+    return this.importMappingForm.get('fields') as FormArray;
+  }
+
+  createField(field: any): FormGroup {
+    var fieldForm: FormGroup = this.fb.group({
+      id: new FormControl(field.id),
+      label: new FormControl(field.label),
+      value: new FormControl(field.value),
+      property: new FormControl(field.property,
+        Validators.compose(
+          [
+            Validators.required
+          ]
+        )
+      ),
+      propertyType: new FormControl(field.propertyType)
+    });
+    return fieldForm;
+  }
+
+  reFectorAttributes(data) {
+    for (var k in data) {
+      if (data.hasOwnProperty(k)) {
+        var dataValue = {
+          id: '',
+          label: k,
+          value: data[k],
+          property: '',
+          propertyType: ''
+        };
+        this.firstDataArray.push(dataValue);
+      }
+    }
+    this.firstDataArray.forEach((element: any, mainIndex: any) => {
+      element.id = mainIndex;
+      this.properties.find((property: any, index: any) => {
+        if (property.label.toLowerCase().includes(element.label.toLowerCase())) {
+          element.property = property.value;
+          element.propertyType = property.type;
+          return element;
+        }
+      });
+    });
+  }
+
+  next() {
+    this.importMappingForm.markAllAsTouched();
+    if (!this.importMappingForm.valid) {
+      return;
+    }
+    this.onSave.emit(this.importMappingForm.value);
+  }
+
+  /** Method to evaluate form fields*/
+  isFieldValid(field: string, form: any) {
+    return this.formValidatorService.isFieldValid(field, form);
+  }
+
+  /** Method to find error in form fields*/
+  getErrorMessage(field: string, form: any) {
+    return this.formValidatorService.getErrorMessage(field, form, errorMessages);
+  }
+
+  ngAfterViewInit(): void {
+    //Called after ngAfterContentInit when the component's view has been initialized. Applies to components only.
+    //Add 'implements AfterViewInit' to the class.
+    setTimeout(x => {
+      this.firstDataArray.forEach((element: any) => {
+        this.fieldsArray.push(this.createField(element));
+      });
+      this.changeDetectorRef.detectChanges();
+    }, 500);
+  }
+
+  updatePropertyType(event: any, index: any): void {
+    var field = this.properties.find((field: any) => field.value == event.value);
+    if (field) {
+      this.fieldsArray.controls[index].get('propertyType').setValue(field.type);
+      this.uniqueValidator();
+    }
+  }
+
+  uniqueValidator() {
+    this.fieldsArray.value.forEach((field: any, index: any) => {
+      var control = this.fieldsArray.controls[index].get('property');
+      const isNameUnique = this.fieldsArray.value.find(propertyData =>
+        propertyData.property === control.value
+        && propertyData.id != this.fieldsArray.controls[index].get('id').value
+      )
+        ? false
+        : true;
+      if (!isNameUnique) {
+        control.setErrors({ unavailable: true });
+      }
+      else {
+        control.setErrors(null);
+      }
+    });
+  }
+
+  removeField(index: number) {
+    if (index == -1) {
+      return;
+    }
+    this.fieldsArray.removeAt(index);
+  }
+
+  reUpload() {
+    this.onReUpload.emit(true);
+  }
+
+}

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

@@ -0,0 +1,17 @@
+export declare class ImportCsvConfig {
+  apiUrl: string;
+  title: string;
+  importType: string;
+  properties: any[];
+  customErrorMessages?: any[]; /** Optional */
+  sampleFile?: {
+    name: string;
+    path: string;
+  }; /** Optional */
+  viewRouterLink?: string;
+  importHistory: {
+    isEnabled: boolean;
+    type?: string;
+    apiUrl?: string;
+  }
+}

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

@@ -0,0 +1,71 @@
+<div fxLayout="column wrap" class="p-4">
+  <mat-card fxFlex="100%" fxLayoutAlign="center center" class="p-0">
+    <mat-card-content fxFill fxLayout="row wrap" fxLayoutAlign="center center" class="primary-color">
+      <h4 fxFlex="20%" class="ml-2">
+        Step {{step.step}}: <span class="normal-font-weight">{{step?.title}}</span>
+      </h4>
+      <h3 fxFlex="80%" fxLayoutAlign="center center" class="text-dark" fxLayoutGap="1rem grid">
+        <span>{{config?.title}} Import</span>
+        <a *ngIf="config?.sampleFile && currentStep == 1" style="color: inherit;" [download]="config?.sampleFile?.name"
+          target="_blank" [href]="config?.sampleFile?.path" matTooltip="Download Sample file" matTooltipPosition="below"
+          fxLayoutAlign="center center">
+          <button mat-stroked-button class="primary-color">
+            <mat-icon>
+              download
+            </mat-icon>
+            Sample File
+          </button>
+        </a>
+      </h3>
+    </mat-card-content>
+  </mat-card>
+  <div fxFlex="100%" class="mt-3">
+    <div fxLayout="row wrap" fxLayoutGap="1rem grid" *ngIf="currentStep==1 || currentStep == 2 || currentStep == 4">
+      <div fxFlex="100%" fxFlex.gt-sm="0 1 calc(70%-1rem)">
+        <mat-card fxFlex="100%">
+          <mat-card-content fxLayout="column">
+            <div fxFlex="100%">
+              <section fxLayout="column" *ngIf="config.importType && !this.fileData.length && !this.failedItems.length">
+                <h5 class="primary-color pb-3">File Upload</h5>
+                <app-file-dropper fxFill class="mb-2 drop-section" [config]="filesConfig" [fileArray]="filesList"
+                  (fileChanged)="fileChanged($event)">
+                </app-file-dropper>
+                <app-import-history-list *ngIf="config.importHistory.isEnabled" [config]="config">
+                </app-import-history-list>
+              </section>
+              <app-field-mapping class="w-100" *ngIf="this.fileData.length > 0 && !this.failedItems.length"
+                [data]="fileData" [config]="config" (onSave)="mappingProcessed($event)" (onReUpload)="reUpload()">
+              </app-field-mapping>
+              <app-failed-items-list class="w-100" *ngIf="this.failedItems.length > 0" [failedItems]="failedItems"
+                [selectedFields]="selectedFields" (onReUpload)="reUpload()"></app-failed-items-list>
+            </div>
+          </mat-card-content>
+        </mat-card>
+      </div>
+      <div fxFlex="100%" fxFlex.gt-sm="30%">
+        <mat-card fxFlex="100%">
+          <mat-card-content fxLayout="column" fxLayoutAlign="start start">
+            <h5 class="primary-color pb-3">Instructions & Requirements</h5>
+            <div class="text-muted">
+              <p>
+                Please use this yyyy-mm-dd date format for all the date fields. Otherwise your date fields will be
+                incorrect or not will be accepted. Ex: 2021-09-27
+              </p>
+              <ng-container *ngIf="config?.customErrorMessages">
+                <p *ngFor="let message of config?.customErrorMessages">
+                  {{message}}
+                </p>
+              </ng-container>
+            </div>
+          </mat-card-content>
+        </mat-card>
+      </div>
+    </div>
+    <div fxLayout="column wrap" class="p-4" *ngIf="currentStep==3 || currentStep == 5">
+      <app-data-import [step]="step" fxLayoutAlign="center center"></app-data-import>
+    </div>
+    <div fxLayout="column wrap" class="p-4" *ngIf="currentStep == 6">
+      <app-import-success [data]="result" [config]="config" fxLayoutAlign="center center"></app-import-success>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,15 @@
+.drop-section {
+  width: 500px !important;
+}
+
+.mat-card-title {
+  margin: 0px !important;
+}
+
+.clickable-card {
+  width: 100%;
+}
+
+.normal-font-weight {
+  font-weight: 200 !important;
+}

package/src/lib/import-csv/import-csv.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 { ImportCsvComponent } from './import-csv.component';
+
+describe('ImportDashboardComponent', () => {
+  let component: ImportCsvComponent;
+  let fixture: ComponentFixture<ImportCsvComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ImportCsvComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ImportCsvComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});