ngx-techlify-core 11.5.2 → 14.2.1

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

@@ -1,28 +0,0 @@
-/* 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

@@ -1,16 +0,0 @@
-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

@@ -1,61 +0,0 @@
-<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

@@ -1,28 +0,0 @@
-/* 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

@@ -1,30 +0,0 @@
-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

@@ -1,70 +0,0 @@
-<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

@@ -1,15 +0,0 @@
-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

@@ -1,161 +0,0 @@
-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

@@ -1,17 +0,0 @@
-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

@@ -1,71 +0,0 @@
-<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

@@ -1,15 +0,0 @@
-.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

@@ -1,28 +0,0 @@
-/* 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();
-  });
-});