cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/scripts-tab/scripts-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 'ace-builds/src-noconflict/ace';
   5 import 'ace-builds/webpack-resolver';
   6 import {ToastrService} from 'ngx-toastr';
   7
   8 declare var $: any;
   9
  10 @Component({
  11     selector: 'app-scripts-tab',
  12     templateUrl: './scripts-tab.component.html',
  13     styleUrls: ['./scripts-tab.component.css']
  14 })
  15 export class ScriptsTabComponent implements OnInit {
  16
  17     public scriptsFiles: Map<string, string> = new Map<string, string>();
  18     public uploadedFiles: FileSystemFileEntry[] = [];
  19     public files: NgxFileDropEntry[] = [];
  20     private fileNames: Set<string> = new Set();
  21     fileToDelete: any = {};
  22     currentFileName: any;
  23     scriptExtension: any;
  24     currentFileContent = '';
  25     currentExtension = '';
  26
  27     constructor(
  28         private packageCreationStore: PackageCreationStore,
  29         private toastService: ToastrService
  30     ) {
  31     }
  32
  33
  34     ngOnInit() {
  35
  36         this.packageCreationStore.state$.subscribe(cbaPackage => {
  37             if (cbaPackage.scripts && cbaPackage.scripts.files && cbaPackage.scripts.files.size > 0) {
  38                 this.scriptsFiles = cbaPackage.scripts.files;
  39             }
  40         });
  41     }
  42
  43     public dropped(files: NgxFileDropEntry[]) {
  44         this.files = files;
  45         for (const droppedFile of files) {
  46             // Is it a file & Not added before ?
  47             if (droppedFile.fileEntry.isFile) {
  48                 const fileEntry = droppedFile.fileEntry as FileSystemFileEntry;
  49                 this.uploadedFiles.push(fileEntry);
  50                 console.log(fileEntry.name);
  51                 this.fileNames.add(fileEntry.name);
  52
  53             }
  54         }
  55     }
  56
  57     removeInitFile(index) {
  58         this.uploadedFiles.splice(index, 1);
  59     }
  60
  61     initDelete(file) {
  62         this.fileToDelete = file;
  63     }
  64
  65     removeFile(filePath: string, FileIndex: number) {
  66         const filename = filePath.split('/')[2] || '';
  67         //  const filename = 'Scripts/' + this.getFileType(this.uploadedFiles[fileIndex].name) + '/' + this.uploadedFiles[fileIndex].name;
  68         this.packageCreationStore.removeFileFromState(filePath);
  69         // remove from upload files array
  70         // tslint:disable-next-line: prefer-for-of
  71         for (let i = 0; i < this.uploadedFiles.length; i++) {
  72             if (this.uploadedFiles[i].name === filename) {
  73                 this.uploadedFiles.splice(i, 1);
  74                 break;
  75             }
  76         }
  77     }
  78
  79     public fileOver(event) {
  80         console.log(event);
  81     }
  82
  83     public fileLeave(event) {
  84         console.log(event);
  85     }
  86
  87
  88     setFilesToStore() {
  89         for (const droppedFile of this.uploadedFiles) {
  90             droppedFile.file((file: File) => {
  91                 const fileReader = new FileReader();
  92                 fileReader.onload = (e) => {
  93                     this.packageCreationStore.addScripts('Scripts/' + this.getFileType(droppedFile.name) + '/' + droppedFile.name,
  94                         fileReader.result.toString());
  95                 };
  96                 fileReader.readAsText(file);
  97             });
  98
  99         }
 100     }
 101
 102     getFileType(filename: string): string {
 103         let fileType = '';
 104         const fileExtension = filename.substring(filename.lastIndexOf('.') + 1);
 105         if (fileExtension === 'py') {
 106             fileType = 'python';
 107         } else if (fileExtension === 'kt') {
 108             fileType = 'kotlin';
 109         }
 110         return fileType;
 111     }
 112
 113     resetTheUploadedFiles() {
 114         this.uploadedFiles = [];
 115     }
 116
 117     textChanges(code: any, key: string) {
 118         this.packageCreationStore.addScripts(key, code);
 119         this.toastService.success(key + ' is updated successfully');
 120     }
 121
 122     changeDivShow(mapIndex: number) {
 123         const divElement = document.getElementById('id-script-' + mapIndex) as HTMLElement;
 124         if (divElement.getAttribute('class').includes('show')) {
 125             divElement.setAttribute('class', 'collapse');
 126         } else {
 127             divElement.setAttribute('class', 'collapse show');
 128         }
 129     }
 130
 131     textCurrentChanges() {
 132         console.log(this.currentFileName);
 133         console.log(this.currentFileContent);
 134         if (this.currentFileName) {
 135             let fileExtension = 'kt';
 136             if (this.currentExtension.includes('python')) {
 137                 fileExtension = 'py';
 138             } else if (this.currentExtension.includes('ansible')) {
 139                 fileExtension = 'yaml';
 140             }
 141             this.packageCreationStore.addScripts('Scripts/' + this.currentExtension + '/' + this.currentFileName + '.' + fileExtension
 142                 , this.currentFileContent);
 143             this.toastService.success('the ' + this.currentFileName + ' has been added');
 144             this.currentFileName = '';
 145             this.currentExtension = '';
 146             this.currentFileContent = '';
 147         }
 148     }
 149
 150     changeExtension() {
 151         this.currentExtension = this.scriptExtension;
 152         console.log(this.scriptExtension);
 153     }
 154 }