ngx-techlify-core 11.5.2 → 14.2.0

package/src/lib/entity-files/entity-files-view-all.component.ts

@@ -1,325 +0,0 @@
-import { Component, OnInit, Input } from '@angular/core';
-import { Location } from '@angular/common';
-import { MatDialog } from '@angular/material/dialog';
-import { EntityFileFormComponent } from './entity-file-form/entity-file-form.component';
-import { EntityFileService } from './entity-file.service';
-import { FormBuilder, FormGroup } from '@angular/forms';
-import { UntilDestroy, untilDestroyed } from "@ngneat/until-destroy";
-import { debounceTime } from 'rxjs/operators';
-import { MatTableDataSource } from '@angular/material/table';
-import { AlertService } from '../core/alert.service';
-import { ActionPopupComponent } from '../action-popup/action-popup.component';
-import { ViewerConfig } from '../document-viewer/viewer-config.model';
-import { FileDropperConfig } from '../file-dropper';
-import { ActionPopup } from '../action-popup/action-popup.model';
-import { ErrorHandlerService } from '../core/error-handler.service';
-
-
-@UntilDestroy()
-@Component({
-  selector: 'app-entity-files-view-all',
-  templateUrl: './entity-files-view-all.component.html',
-  styleUrls: ['./entity-files-view-all.component.css']
-})
-export class EntityFilesViewAllComponent implements OnInit {
-  @Input() entityId: number;
-  @Input() entityType: string;
-  @Input() viewOnly: boolean = false;
-  @Input() removeSearch: boolean;
-  @Input() hideTitleAndDetails: boolean;
-  @Input() displayMode: boolean;
-  @Input() allowMultipleFiles: boolean = false;
-  @Input() allowBulkUpdate: boolean = false;
-  documentIds: any[] = [];
-  isAllSelected: boolean = false;
-
-  /**
-   * Should we allow tagging entity-files?
-   */
-  @Input() useTechlifyTags: boolean = false;
-
-  viewerConfig: ViewerConfig;
-  @Input() title: string = "File";
-  filters: any = {};
-  entityFiles: any[] = [];
-  displayedColumns = [
-    'index',
-    'title',
-    'details',
-    'file_size',
-    'uploaded_on',
-  ];
-  isWorking: boolean = false;
-  page: number = 1;
-  perPage: number = 25;
-  lastPage: number = 0;
-  fileConfig: FileDropperConfig;
-  fileList: any[] = [];
-  filterFormGroup: FormGroup;
-  dataSource = new MatTableDataSource();
-  updateRowForm: FormGroup;
-  isReload: boolean = false;
-
-  constructor(
-    private entityFileService: EntityFileService,
-    public location: Location,
-    private alertService: AlertService,
-    private dialog: MatDialog,
-    private fb: FormBuilder,
-    private errorHandler: ErrorHandlerService,
-  ) {
-    this.filterFormGroup = this.fb.group({
-      title: [""],
-      tag_ids: [""]
-    });
-
-    this.updateRowForm = this.fb.group({
-      title: [''],
-      details: [''],
-      tag_ids: [''],
-    });
-  }
-
-  ngOnInit(): void {
-    //File dropper config
-    this.fileConfig = {
-      fileId: "entityDashboardDropper",
-      containerId: "entityDashboardDropperContainer",
-      styles: {
-        height: "500px"
-      },
-      multiple: this.allowMultipleFiles,
-      acceptFile: "*",
-      maxSize: 10,
-      acceptFileText: "All Files"
-    };
-
-    this.viewerConfig = {
-      imageStyle: {
-        height: '200px',
-        width: '200px'
-      },
-      viewerStyle: {
-        height: ' 160px',
-        width: '200px'
-      },
-      hideRemove: true
-    };
-
-    if (this.hideTitleAndDetails) {
-      this.displayedColumns = this.displayedColumns.filter(x => (x !== 'details') && (x !== 'title'));
-    }
-    this.listenRoutes();
-    this.filters = {
-      entity_type: this.entityType,
-      entity_id: this.entityId,
-      title: ""
-    };
-    this.fetchEntityFilesDetails();
-    if (this.useTechlifyTags) {
-      this.displayedColumns.push('tag');
-    }
-    if (!this.viewOnly) {
-      this.displayedColumns.push('actions');
-    }
-    if (this.allowBulkUpdate) {
-      this.displayedColumns.push('select');
-    }
-  }
-
-  listenRoutes() {
-    this.filterFormGroup.valueChanges.pipe(debounceTime(500), untilDestroyed(this))
-      .subscribe(changes => {
-        this.reload();
-      });
-  }
-
-  async fetchEntityFilesDetails() {
-    this.filters.page = this.page;
-    this.filters.perPage = this.perPage;
-    let formGroup = this.filterFormGroup.value;
-    formGroup.tag_ids = formGroup.tag_ids.toString();
-    this.filters = {
-      ...this.filters,
-      ...formGroup
-    }
-    this.isWorking = true;
-    const result: any = await this.entityFileService.getEntityFiles(this.filters);
-    this.lastPage = result.last_page || this.page;
-    this.entityFiles = this.entityFiles.concat(result.data);
-    this.dataSource = new MatTableDataSource(this.entityFiles);
-    this.isWorking = false;
-  }
-
-  addEntityFile() {
-    this.isWorking = true;
-    const dialogRef = this.dialog.open(EntityFileFormComponent, {
-      width: "700px",
-      data: {
-        entity: this.filters,
-        hideTitleAndDetails: this.hideTitleAndDetails,
-        useTechlifyTags: this.useTechlifyTags,
-      },
-      autoFocus: false,
-      restoreFocus: false
-    });
-
-    dialogRef.afterClosed().subscribe(async result => {
-      this.isWorking = false;
-      if (result) {
-        const files = [...this.entityFiles];
-        files.push(result);
-        this.entityFiles = files;
-        this.dataSource = new MatTableDataSource(this.entityFiles);
-      }
-    });
-  }
-
-  editEntityFile(file: any) {
-    this.isWorking = true;
-    const dialogRef = this.dialog.open(EntityFileFormComponent, {
-      width: "700px",
-      autoFocus: false,
-      data: {
-        file: file,
-        hideTitleAndDetails: this.hideTitleAndDetails,
-        useTechlifyTags: this.useTechlifyTags,
-      } // Any data passed here will be injected into the model
-    });
-
-    dialogRef.afterClosed().subscribe(result => {
-      this.isWorking = false;
-      if (result) {
-        this.reload();
-      }
-    });
-  }
-
-  deleteEntityFile(file: any) {
-    const dialogRef = this.dialog.open(ActionPopupComponent, {
-      width: "400px",
-      data: <ActionPopup>{
-        title: "Delete File",
-        message: `Are you sure to proceed delete the file ${file.title}?`
-      },
-      autoFocus: false
-    });
-
-    dialogRef.afterClosed().subscribe(async result => {
-      if (result) {
-        //Action confirmed
-        const result = await this.entityFileService.deleteEntityFile(
-          file
-        );
-        this.alertService.addAlert(
-          "File successfully deleted",
-          "success"
-        );
-        this.reload();
-
-      }
-    });
-  }
-
-  onScroll() {
-    if (this.page < this.lastPage && !this.isWorking) {
-      this.page += 1;
-      this.fetchEntityFilesDetails();
-    }
-  }
-
-  reload() {
-    this.entityFiles = [];
-    this.documentIds = [];
-    this.isReload = false;
-    this.page = 1;
-    if (!this.isWorking) {
-      this.fetchEntityFilesDetails();
-    }
-  }
-
-  ngOnDestroy() { }
-
-  resetFieldValue(event: any, field: any) {
-    event.stopPropagation();
-    this.filterFormGroup.get(field).setValue("");
-  }
-
-  sizeOf(bytes) {
-    if (!bytes) { return "0.00 B"; }
-    var e = Math.floor(Math.log(bytes) / Math.log(1024));
-    return (bytes / Math.pow(1024, e)).toFixed(2) + ' ' + ' KMGTP'.charAt(e) + 'B';
-  }
-
-  async fileChanged(event: any) {
-    this.fileList = event;
-    if (this.fileList.length > 0) {
-      await this.fileList.forEach(async file => {
-        const result: any = await this.entityFileService.uploadEntityFile(
-          file,
-          {
-            entity_type: this.entityType,
-            entity_id: this.entityId,
-          }
-        );
-        this.reload();
-      });
-      this.fileList = [];
-      this.alertService.addAlert('Successfull uploaded', 'success');
-    }
-  }
-
-  selectAll() {
-    this.documentIds = [];
-    this.entityFiles.map((employee: any) => {
-      employee.is_selected = this.isAllSelected;
-      if (this.isAllSelected) {
-        this.documentIds.push(employee.id);
-      }
-    });
-    this.dataSource = new MatTableDataSource(this.entityFiles);
-  }
-
-  employeeListModified(event: any, employee: any) {
-    this.isAllSelected = false;
-    if (event.checked) {
-      this.documentIds.push(employee.id);
-    }
-    else {
-      this.documentIds = this.documentIds.filter((employeeData: any) => employeeData != employee.id);
-    }
-  }
-
-  unCheckAll() {
-    this.isAllSelected = false;
-    this.documentIds = [];
-    this.entityFiles.map((employee: any) => {
-      employee.is_selected = false;
-    });
-    this.dataSource = new MatTableDataSource(this.entityFiles);
-  }
-
-  resetFieldValueOfRow(field: string, event: any) {
-    event.stopPropagation();
-    this.updateRowForm.get(field).setValue("");
-  }
-
-  async bulkUpdate(fieldName: any) {
-    var data = this.updateRowForm.value;
-    this.isReload = this.isWorking = true;
-    data.field_name = fieldName;
-    data.document_ids = this.documentIds;
-
-    try {
-      await this.entityFileService.bulkUpdate(data).then(
-        res => {
-          this.alertService.addAlert("Successfully updated", "success");
-          this.isWorking = false;
-        }
-      );
-    }
-    catch (error) {
-      this.errorHandler.handleError(error);
-    }
-  }
-}

package/src/lib/entity-files/entity-files-view-all.module.ts

@@ -1,38 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { EntityFileFormComponent } from './entity-file-form/entity-file-form.component';
-import { EntityFilesViewAllComponent } from './entity-files-view-all.component';
-import { ReactiveFormsModule, FormsModule } from '@angular/forms';
-import { FlexLayoutModule } from '@angular/flex-layout';
-import { InfiniteScrollModule } from 'ngx-infinite-scroll';
-import { FileDropperModule } from '../file-dropper/file-dropper.module';
-import { DocumentViewerModule } from '../document-viewer/document-viewer.module';
-import { ActionPopupModule } from '../action-popup/action-popup.module';
-import { MaterialModule } from '../material.module';
-import { TechlifyTaggerTagFormFieldModule } from '../techlify-tagger-tag-form-field/techlify-tagger-tag-form-field.module';
-import { SearchableSelectorModule } from '../searchable-selector/searchable-selector.module';
-import { ReadMoreModule } from '../read-more/read-more.module';
-
-
-@NgModule({
-  declarations: [EntityFileFormComponent, EntityFilesViewAllComponent],
-  imports: [
-    CommonModule,
-    FormsModule,
-    ReactiveFormsModule,
-    FlexLayoutModule,
-    FileDropperModule,
-    DocumentViewerModule,
-    InfiniteScrollModule,
-    ActionPopupModule,
-    MaterialModule,
-    TechlifyTaggerTagFormFieldModule,
-    SearchableSelectorModule,
-    ReadMoreModule
-  ],
-  exports: [
-    EntityFilesViewAllComponent
-  ],
-  entryComponents: [EntityFileFormComponent]
-})
-export class EntityFilesViewAllModule { }

package/src/lib/entity-files/index.ts

@@ -1,2 +0,0 @@
-export * from './entity-files-view-all.component';
-export * from './entity-file-form/entity-file-form.component';

package/src/lib/export-excel/export-excel-button/export-excel-button.component.html

@@ -1 +0,0 @@
-<button mat-raised-button color="accent" (click)="exportExcel()">Export Excel</button>

package/src/lib/export-excel/export-excel-button/export-excel-button.component.spec.ts

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

package/src/lib/export-excel/export-excel-button/export-excel-button.component.ts

@@ -1,31 +0,0 @@
-import { Component, OnInit, Input } from '@angular/core';
-import * as XLSX from 'xlsx';
-
-@Component({
-  selector: 'app-export-excel-button',
-  templateUrl: './export-excel-button.component.html',
-  styleUrls: ['./export-excel-button.component.scss']
-})
-export class ExportExcelButtonComponent implements OnInit {
-
-  @Input() name: string = 'Export_Data';
-  @Input() data: any[] = [];
-
-  constructor() { }
-
-  ngOnInit(): void {
-  }
-
-  exportExcel() {
-    const fileName = `${this.name}_${new Date().getTime()}.xlsx`;
-    const ws = XLSX.utils.json_to_sheet(this.data);
-    /* generate workbook and add the worksheet */
-    const wb: XLSX.WorkBook = XLSX.utils.book_new();
-    XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');
-
-    /* save to file */
-    XLSX.writeFile(wb, fileName);
-  }
-
-
-}

package/src/lib/export-excel/export-excel.module.ts

@@ -1,16 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { ExportExcelButtonComponent } from './export-excel-button/export-excel-button.component';
-import { MaterialModule } from '../material.module';
-
-
-
-@NgModule({
-  declarations: [ExportExcelButtonComponent],
-  imports: [
-    CommonModule,
-    MaterialModule
-  ],
-  exports: [ExportExcelButtonComponent]
-})
-export class ExportExcelModule { }

package/src/lib/file-dropper/file-dropper.component.html

@@ -1,41 +0,0 @@
-<div
-  id="{{ config.containerId }}"
-  [ngStyle]="config.styles"
-  class="file-border"
-  (dragleave)="dragLeave($event)"
-  (dragenter)="dragEnter($event)"
-  (dragover)="dragOver($event)"
-  (click)="clickEvent($event)"
-  (drop)="dropEvent($event)"
-  [ngClass]="{ 'disable-div': isSingleMode && fileArray.length > 0 }"
->
-  <div fxFill fxLayout="column" fxLayoutAlign="center center">
-    <div>
-      <span>Drag and drop file</span>
-    </div>
-
-    <div class="mt-2">
-      <span>or</span>
-    </div>
-
-    <div class="mt-2">
-      <button mat-raised-button color="primary" type="button">Browse</button>
-    </div>
-
-    <div class="mt-4">
-      <span>Supported files</span>
-    </div>
-
-    <div *ngIf="config.acceptFileText">
-      <span>{{ config.acceptFileText }}</span>
-    </div>
-  </div>
-</div>
-<input
-  type="file"
-  id="{{ config.fileId }}"
-  [accept]="config.acceptFile"
-  (change)="onFileChange($event)"
-  [multiple]="config.multiple === true"
-  style="display:none"
-/>

package/src/lib/file-dropper/file-dropper.component.scss

@@ -1,8 +0,0 @@
-
-.disable-div {
-  cursor: not-allowed;
-}
-
-.file-border{
-  border:1px dashed #989898;
-}

package/src/lib/file-dropper/file-dropper.component.ts

@@ -1,139 +0,0 @@
-import { Component, OnInit, Input, Output, EventEmitter } from "@angular/core";
-import { AlertService } from "../core/alert.service";
-import { FileDropperConfig } from './file-dropper.model';
-
-
-@Component({
-  selector: "app-file-dropper",
-  templateUrl: "./file-dropper.component.html",
-  styleUrls: ["./file-dropper.component.scss"]
-})
-export class FileDropperComponent implements OnInit {
-  @Input() fileArray: any[] = [];
-
-  @Input() config: FileDropperConfig;
-
-  @Output() fileChanged: any = new EventEmitter();
-
-  border = "1px dashed #989898";
-
-  @Input() styles: any;
-
-  isSingleMode: boolean;
-
-  constructor(private alertService: AlertService) { }
-
-  /**Life cycle hook method */
-  ngOnInit() {
-    this.isSingleMode = !Boolean(this.config.multiple);
-  }
-
-  /**Method for dragging event */
-  dragEnter(event: any) {
-    event.target.style.background = this.config.dragColor || "#c0c0c0";
-
-    event.target.style.border = "1px dashed black";
-
-    event.preventDefault();
-  }
-
-  /**Method for drag over event */
-  dragOver(event: any) {
-    event.preventDefault();
-  }
-
-  /**Method for drag leave event */
-  dragLeave(event: any) {
-    event.target.style.background = "";
-    event.target.style.border = this.border;
-
-    event.preventDefault();
-  }
-
-  /**Method for drop event */
-  dropEvent(event: any) {
-    event.target.style.background = "";
-    event.target.style.border = this.border;
-    const droppedFiles: FileList = event.dataTransfer.files;
-    if (droppedFiles.length > 0) {
-      const fileArray = Array.from(droppedFiles);
-      this.addFiles(fileArray);
-    }
-    event.preventDefault();
-  }
-
-  /**Method to list files selected */
-  onFileChange(event: any) {
-    if (event.target.files && event.target.files.length) {
-      const fileArray = Array.from(event.target.files);
-      this.addFiles(fileArray);
-      const fileInput = document.getElementById(
-        this.config.fileId
-      ) as HTMLInputElement;
-      fileInput.value = "";
-    }
-  }
-
-  /**Method to add files in the array */
-  addFiles(fileArray: any) {
-    if (!this.isSingleMode) {
-      fileArray.forEach((file: any) => {
-        this.fileArray = this.fileArray.filter(
-          (item: any) => item.name !== file.name
-        );
-        if (this.fileSizeAllowed(file)) {
-          this.fileArray.push(file);
-        }
-      });
-
-      this.fileArray.sort(this.sortFiles);
-      this.fileChanged.emit(this.fileArray);
-    } else {
-      // Single Mode
-      if (this.fileArray.length === 0) {
-        if (this.fileSizeAllowed(fileArray[0])) {
-          this.fileArray.push(fileArray[0]);
-          this.fileArray.sort(this.sortFiles);
-          this.fileChanged.emit(this.fileArray);
-        }
-      }
-    }
-  }
-
-  /**Method to sort the files in asc */
-  sortFiles(a: any, b: any) {
-    const nameA = a.name.toUpperCase();
-    const nameB = b.name.toUpperCase();
-    if (nameA < nameB) {
-      return -1;
-    }
-    if (nameA > nameB) {
-      return 1;
-    }
-
-    return 0;
-  }
-
-  /**Method tp validate the file size */
-  fileSizeAllowed(file: any): boolean {
-    if (!Boolean(this.config.maxSize)) {
-      return true;
-    } else if (file.size / (1024 * 1024) < this.config.maxSize) {
-      return true;
-    } else {
-      this.alertService.addAlert(
-        `The size of the file exceeds the limit ${this.config.maxSize} MB, kindly upload a file with size ${this.config.maxSize} MB or below`,
-        "warn"
-      );
-      return false;
-    }
-  }
-
-  /**Method invokes when the drop box is clicked to upload the file */
-  clickEvent(event: any) {
-    if (!(this.isSingleMode && this.fileArray.length > 0)) {
-      document.getElementById(this.config.fileId).click();
-    }
-    event.preventDefault();
-  }
-}

package/src/lib/file-dropper/file-dropper.model.ts

@@ -1,10 +0,0 @@
-export class FileDropperConfig {
-  containerId: string;
-  fileId: string;
-  styles?: any;
-  multiple?: boolean;
-  dragColor?: boolean;
-  acceptFile: string; // use '*' to accept all file types.
-  maxSize?: number; // size in MB
-  acceptFileText?: string;
-}

package/src/lib/file-dropper/file-dropper.module.ts

@@ -1,18 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { FileDropperComponent } from './file-dropper.component';
-import { FlexLayoutModule } from '@angular/flex-layout';
-import { MaterialModule } from '../material.module';
-
-@NgModule({
-    imports: [
-        CommonModule,
-        FlexLayoutModule,
-        MaterialModule
-    ],
-    declarations: [
-        FileDropperComponent
-    ],
-    exports: [FileDropperComponent]
-})
-export class FileDropperModule { }

package/src/lib/file-dropper/index.ts

@@ -1,2 +0,0 @@
-export * from './file-dropper.component';
-export * from './file-dropper.model';