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
  18     public files: NgxFileDropEntry[] = [];
  19
  20     constructor(private packageCreationStore: PackageCreationStore, private packageCreationUtils: PackageCreationUtils) {
  21     }
  22
  23     ngOnInit(): void {
  24         this.packageCreationStore.state$.subscribe(cbaPackage => {
  25             if (cbaPackage.definitions && cbaPackage.definitions.imports && cbaPackage.definitions.imports.size > 0) {
  26                 this.definitionFiles = cbaPackage.definitions.imports;
  27             }
  28         });
  29     }
  30
  31     public dropped(files: NgxFileDropEntry[]) {
  32         this.files = files;
  33         for (const droppedFile of files) {
  34             // Is it a file? & Not added before
  35             if (droppedFile.fileEntry.isFile && !this.fileNames.has(droppedFile.fileEntry.name)) {
  36                 const fileEntry = droppedFile.fileEntry as FileSystemFileEntry;
  37                 this.uploadedFiles.push(fileEntry);
  38                 console.log(fileEntry.name);
  39                 this.fileNames.add(fileEntry.name);
  40
  41             }
  42         }
  43     }
  44
  45     removeFile(fileIndex: number) {
  46         const filename = 'Definitions/' + this.uploadedFiles[fileIndex].name;
  47         this.packageCreationStore.removeFileFromDefinition(filename);
  48         this.uploadedFiles.splice(fileIndex, 1);
  49     }
  50
  51     public fileOver(event) {
  52         console.log(event);
  53     }
  54
  55     public fileLeave(event) {
  56         console.log(event);
  57     }
  58
  59     setFilesToStore() {
  60         for (const droppedFile of this.uploadedFiles) {
  61             droppedFile.file((file: File) => {
  62                 const fileReader = new FileReader();
  63                 fileReader.onload = (e) => {
  64                     this.packageCreationStore.addDefinition('Definitions/' + droppedFile.name,
  65                         fileReader.result.toString());
  66                 };
  67                 fileReader.readAsText(file);
  68             });
  69
  70         }
  71     }
  72
  73     resetTheUploadedFiles() {
  74         this.uploadedFiles = [];
  75     }
  76
  77     textChanges(code: any, key: string) {
  78         this.packageCreationStore.addDefinition(key, code);
  79     }
  80
  81     changeDivShow(mapIndex: number) {
  82         const divElement = document.getElementById('id-' + mapIndex) as HTMLElement;
  83         if (divElement.getAttribute('class').includes('show')) {
  84             divElement.setAttribute('class', 'collapse');
  85         } else {
  86             divElement.setAttribute('class', 'collapse show');
  87         }
  88         console.log(divElement.getAttribute('class'));
  89     }
  90 }