cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/imports-tab/imports-tab.component.ts

   1 import { Component, OnInit } from '@angular/core';
   2 import { FileSystemFileEntry, NgxFileDropEntry } from 'ngx-file-drop';
   3 import { PackageCreationStore } from '../package-creation.store';
   4 import { PackageCreationUtils } from '../package-creation.utils';
   5
   6
   7 @Component({
   8     selector: 'app-imports-tab',
   9     templateUrl: './imports-tab.component.html',
  10     styleUrls: ['./imports-tab.component.css']
  11 })
  12 export class ImportsTabComponent implements OnInit {
  13
  14     public definitionFiles: Map<string, string> = new Map<string, string>();
  15     public uploadedFiles: FileSystemFileEntry[] = [];
  16     private fileNames: Set<string> = new Set();
  17     fileToDelete: any = {};
  18     public files: NgxFileDropEntry[] = [];
  19
  20     constructor(private packageCreationStore: PackageCreationStore, private packageCreationUtils: PackageCreationUtils) {
  21     }
  22     ngOnInit(): void {
  23         this.packageCreationStore.state$.subscribe(cbaPackage => {
  24             if (cbaPackage.definitions && cbaPackage.definitions.imports && cbaPackage.definitions.imports.size > 0) {
  25                 this.definitionFiles = cbaPackage.definitions.imports;
  26             }
  27         });
  28     }
  29
  30     public dropped(files: NgxFileDropEntry[]) {
  31         this.files = files;
  32         for (const droppedFile of files) {
  33             // Is it a file? & Not added before
  34             if (droppedFile.fileEntry.isFile) {
  35                 const fileEntry = droppedFile.fileEntry as FileSystemFileEntry;
  36                 this.uploadedFiles.push(fileEntry);
  37                 console.log(fileEntry.name);
  38                 this.fileNames.add(fileEntry.name);
  39
  40             }
  41         }
  42     }
  43     initDelete(file) {
  44         console.log(file);
  45         this.fileToDelete = file;
  46     }
  47     removeFile() {
  48         const filename = this.fileToDelete.key;
  49         this.packageCreationStore.removeFileFromDefinition(filename);
  50
  51         for (let i = 0; i < this.uploadedFiles.length; i++) {
  52             console.log(this.uploadedFiles[i]);
  53             if (this.uploadedFiles[i].name === filename) {
  54                 this.uploadedFiles.splice(i, 1);
  55                 break;
  56             }
  57         }
  58     }
  59
  60     public fileOver(event) {
  61         console.log(event);
  62     }
  63
  64     public fileLeave(event) {
  65         console.log(event);
  66     }
  67
  68     setFilesToStore() {
  69         for (const droppedFile of this.uploadedFiles) {
  70             droppedFile.file((file: File) => {
  71                 const fileReader = new FileReader();
  72                 fileReader.onload = (e) => {
  73                     this.packageCreationStore.addDefinition('Definitions/' + droppedFile.name,
  74                         fileReader.result.toString());
  75                 };
  76                 fileReader.readAsText(file);
  77             });
  78
  79         }
  80     }
  81
  82     resetTheUploadedFiles() {
  83         this.uploadedFiles = [];
  84     }
  85
  86     textChanges(code: any, key: string) {
  87         this.packageCreationStore.addDefinition(key, code);
  88     }
  89
  90     changeDivShow(mapIndex: number) {
  91         const divElement = document.getElementById('id-' + mapIndex) as HTMLElement;
  92         if (divElement.getAttribute('class').includes('show')) {
  93             divElement.setAttribute('class', 'collapse');
  94         } else {
  95             divElement.setAttribute('class', 'collapse show');
  96         }
  97         console.log(divElement.getAttribute('class'));
  98     }
  99 }