ngx-techlify-core 11.5.0 → 11.5.2

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,18 @@
+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/{lib/file-dropper/index.d.ts → src/lib/file-dropper/index.ts}

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