diff options
Diffstat (limited to 'cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/scripts-tab')
4 files changed, 204 insertions, 0 deletions
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/scripts-tab/scripts-tab.component.css b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/scripts-tab/scripts-tab.component.css new file mode 100644 index 000000000..4ab1d7b7e --- /dev/null +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/scripts-tab/scripts-tab.component.css @@ -0,0 +1,11 @@ +a.accordion-delete i { + color: red; +} + +a.accordion-delete i:hover { + color: #007bff; + cursor: pointer; + transition-duration: .5s; + /* for Safari & Chrome */ + -webkit-transition-duration: .5s; +}
\ No newline at end of file diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/scripts-tab/scripts-tab.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/scripts-tab/scripts-tab.component.html new file mode 100644 index 000000000..1685b7eaf --- /dev/null +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/scripts-tab/scripts-tab.component.html @@ -0,0 +1,92 @@ +<div class="import-container-all"> + <div class="import-container"> + <div class="import-container-input"> + <input class="ng-pristine ng-valid ng-touched" placeholder="Enter file URL" type="input"> + <a class="enter-link" href="#"><i class="icon-enter"></i></a> + </div> + <span class="import-container-span">Or you can also <a data-target="#scriptsModal" data-toggle="modal" + href="#">Import File</a></span> + + </div> + + <div class="accordion"> + <div class="card creat-card"> + <div class="single-line"> + <label class="label-name">File</label> + </div> + </div> + <div *ngFor="let file of scriptsFiles | keyvalue; let mapIndex = index" id="accordion"> + + <div class="card"> + <div [id]="'head-'+mapIndex" class="card-header"> + <h5 class="mb-0 d-flex justify-content-between"> + <button [attr.aria-controls]="'id-'+mapIndex" [attr.data-target]="'#id-'+mapIndex" + aria-expanded="false" class="btn btn-link collapsed" + data-toggle="collapse"> + <i class="icon-file-code"></i> Definitions/{{file.key}} + </button> + <a (click)="removeFile(mapIndex)" class="accordion-delete"><i class="icon-delete"></i></a> + </h5> + </div> + <div [attr.aria-labelledby]="'head-'+mapIndex" [id]="'id-'+mapIndex" class="collapse" + data-parent="#accordion"> + <div class="card-body"> + {{file.value}} + </div> + </div> + </div> + + </div> + </div> + +</div> + +<div aria-hidden="true" aria-labelledby="scriptsModalLabel" class="modal fade" id="scriptsModal" role="dialog" + tabindex="-1"> + <div class="modal-dialog" role="document"> + <div class="modal-content"> + <div class="modal-header"> + <h5 class="modal-title" id="scriptsModalLabel">Import File</h5> + <button aria-label="Close" class="close" data-dismiss="modal" type="button"> + <span aria-hidden="true">×</span> + </button> + </div> + <div class="modal-body"> + <ngx-file-drop (onFileDrop)="dropped($event)" (onFileLeave)="fileLeave($event)" + (onFileOver)="fileOver($event)" dropZoneLabel="Drop files here"> + <ng-template let-openFileSelector="openFileSelector" ngx-file-drop-content-tmp> + <div class="folder-upload"> + <img src="assets/img/folder-upload.svg"/> + </div> + <div class="folder-upload-text"> + Drag & Drop file + </div> + <div class="folder-upload-text">or + <button (click)="openFileSelector()" class="btn btn-sm btn-primary" type="button">Browse + Files + </button> + </div> + <div class="folder-upload-type">Allowed file type: Kotlin(Kt)</div> + </ng-template> + </ngx-file-drop> + <div *ngFor="let item of uploadedFiles; let i=index" class="upload-table"> + <table class="table"> + <thead> + <tr> + <th>Name : {{ item.name }}</th> + </tr> + </thead> + </table> + </div> + </div> + <div class="modal-footer"> + <button (click)="resetTheUploadedFiles()" class="btn btn-sm btn-secondary" data-dismiss="modal" + type="button">Cancel + </button> + <button (click)="setFilesToStore()" class="btn btn-sm btn-primary" data-dismiss="modal" type="button"> + Import + </button> + </div> + </div> + </div> +</div> diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/scripts-tab/scripts-tab.component.spec.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/scripts-tab/scripts-tab.component.spec.ts new file mode 100644 index 000000000..5257822a2 --- /dev/null +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/scripts-tab/scripts-tab.component.spec.ts @@ -0,0 +1,25 @@ +import {async, ComponentFixture, TestBed} from '@angular/core/testing'; + +import {ScriptsTabComponent} from './scripts-tab.component'; + +describe('ScriptsTabComponent', () => { + let component: ScriptsTabComponent; + let fixture: ComponentFixture<ScriptsTabComponent>; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ScriptsTabComponent] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(ScriptsTabComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/scripts-tab/scripts-tab.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/scripts-tab/scripts-tab.component.ts new file mode 100644 index 000000000..d4d2b20d0 --- /dev/null +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/scripts-tab/scripts-tab.component.ts @@ -0,0 +1,76 @@ +import {Component, OnInit} from '@angular/core'; +import {FileSystemFileEntry, NgxFileDropEntry} from 'ngx-file-drop'; +import {PackageCreationStore} from '../package-creation.store'; +import {PackageCreationUtils} from '../package-creation.utils'; + +@Component({ + selector: 'app-scripts-tab', + templateUrl: './scripts-tab.component.html', + styleUrls: ['./scripts-tab.component.css'] +}) +export class ScriptsTabComponent implements OnInit { + + public scriptsFiles: Map<string, string> = new Map<string, string>(); + public uploadedFiles: FileSystemFileEntry[] = []; + public files: NgxFileDropEntry[] = []; + private fileNames: Set<string> = new Set(); + + constructor(private packageCreationStore: PackageCreationStore, private packageCreationUtils: PackageCreationUtils) { + this.packageCreationStore.state$.subscribe(cbaPackage => { + if (cbaPackage.scripts && cbaPackage.scripts.files && cbaPackage.scripts.files.size > 0) { + this.scriptsFiles = cbaPackage.scripts.files; + } + }); + } + + + ngOnInit() { + } + + public dropped(files: NgxFileDropEntry[]) { + this.files = files; + for (const droppedFile of files) { + // Is it a file & Not added before ? + if (droppedFile.fileEntry.isFile && !this.fileNames.has(droppedFile.fileEntry.name)) { + const fileEntry = droppedFile.fileEntry as FileSystemFileEntry; + this.uploadedFiles.push(fileEntry); + console.log(fileEntry.name); + this.fileNames.add(fileEntry.name); + + } + } + } + + removeFile(fileIndex: number) { + console.log(this.uploadedFiles[fileIndex]); + this.packageCreationStore.removeFromState(this.uploadedFiles[fileIndex].name, 'scripts'); + this.uploadedFiles.splice(fileIndex, 1); + } + + public fileOver(event) { + console.log(event); + } + + public fileLeave(event) { + console.log(event); + } + + + setFilesToStore() { + for (const droppedFile of this.uploadedFiles) { + droppedFile.file((file: File) => { + const fileReader = new FileReader(); + fileReader.onload = (e) => { + this.packageCreationStore.addScripts(droppedFile.name, + this.packageCreationUtils.transformToJson(fileReader.result)); + }; + fileReader.readAsText(file); + }); + + } + } + + resetTheUploadedFiles() { + this.uploadedFiles = []; + } +} |