diff options
Diffstat (limited to 'cds-ui/designer-client/src/app/modules/feature-modules/packages')
3 files changed, 360 insertions, 56 deletions
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/imports-tab/imports-tab.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/imports-tab/imports-tab.component.ts index 8aa9d5e6d..9b65885a5 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/imports-tab/imports-tab.component.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/imports-tab/imports-tab.component.ts @@ -1,6 +1,8 @@ import {Component, OnInit} from '@angular/core'; import {NgxFileDropEntry, FileSystemFileEntry, FileSystemDirectoryEntry} from 'ngx-file-drop'; import {PackageCreationStore} from '../package-creation.store'; +import {Observable} from 'rxjs'; +import {HttpClient} from '@angular/common/http'; @Component({ @@ -9,7 +11,10 @@ import {PackageCreationStore} from '../package-creation.store'; styleUrls: ['./imports-tab.component.css'] }) export class ImportsTabComponent { - constructor(private packageCreationStore: PackageCreationStore) { + + fileContent: string | ArrayBuffer = ''; + + constructor(private packageCreationStore: PackageCreationStore, private http: HttpClient) { } public files: NgxFileDropEntry[] = []; @@ -21,16 +26,28 @@ export class ImportsTabComponent { // Is it a file? if (droppedFile.fileEntry.isFile) { const fileEntry = droppedFile.fileEntry as FileSystemFileEntry; + fileEntry.file((file: File) => { console.log(droppedFile.relativePath, file); - this.packageCreationStore.addDefinition(droppedFile.relativePath, ''); + + const formData = new FormData(); + formData.append('logo', file, droppedFile.relativePath); + console.log(formData); + + this.packageCreationStore.addDefinition(droppedFile.relativePath, this.getContent(droppedFile.relativePath)); }); } else { // It was a directory (empty directories are added, otherwise only files) const fileEntry = droppedFile.fileEntry as FileSystemDirectoryEntry; console.log(droppedFile.relativePath, fileEntry); - this.packageCreationStore.addDefinition(droppedFile.relativePath, ''); + + + /* const formData = new FormData(); + formData.append('logo', droppedFile, droppedFile.relativePath); + console.log(formData);*/ + + this.packageCreationStore.addDefinition(droppedFile.relativePath, this.getContent(droppedFile.relativePath)); } } @@ -43,4 +60,17 @@ export class ImportsTabComponent { public fileLeave(event) { console.log(event); } + + + getContent(filePath: string) { + let content = ''; + this.getJSON(filePath).subscribe(data => { + content = data; + }); + return content; + } + + public getJSON(filePath: string): Observable<any> { + return this.http.get(filePath); + } } diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.component.html index 1f5245222..3cc8707c5 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.component.html +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.component.html @@ -1,48 +1,309 @@ <app-header></app-header> -<div class="alert-dark" style="padding: 100px"> - <div> - <label>mode</label> - <label name="trst" *ngFor="let mode of modes; let i = index"> - <input type="checkbox" value={{mode}} [(ngModel)]="metaDataTab.mode"> - {{mode}} - </label> - <br> - <label>dictionary Library Instances</label> - <label> - <select name="cars"> - <option value="audi" - *ngFor="let dictionaryLibraryInstance of dictionaryLibraryInstances; let i = index">{{dictionaryLibraryInstance}}</option> - </select> - </label> - </div> - <div> - <label>Name</label> - <label> - <input type="input" (input)="searchPackages($event)" [(ngModel)]="metaDataTab.name"> - </label> - <br> - <label>Description</label> - <label> - <input type="input"> - </label> - <br> - <label>Version</label> - <label> - <input type="input"> - </label> - <br> - <label>tags</label> - <label> - <input type="input"> - </label> - <br> + +<div class="new-wrapper"> + <header class="page-title"> + <div class="row"> + <h2 class="col m-0">CBA Packages + <span>({{numberOfPackages}} packages)</span> + </h2> + <div class="col"> + </div> + </div> + </header> + + <div class="main-container"> + + <div class="container-fluid body-container creat-container-all"> + + <div class="creat-container"> + <div class="creat-action-container"> + <a href="#" class="action-button"> + <i class="icon-clone" aria-hidden="true"></i> + <span>Clone</span> + </a> + + <a href="#" class="action-button"> + <i class="icon-archive" aria-hidden="true"></i> + <span>Archive</span> + </a> + + <a href="#" class="action-button"> + <i class="icon-delete" aria-hidden="true"></i> + <span>Delete</span> + </a> + </div> + <nav class="row"> + <div class="col pr-0"> + <button class="float btn btn-sm btn-primary">Save</button> + <button class="float btn btn-sm btn-outline-secondary" disabled>Cancel</button> + </div> + </nav> + <nav class="row"> + <!--Nav Tabs--> + <div class="col pr-0"> + <div class="nav nav-tabs " id="nav-tab" role="tablist"> + <a class="nav-item nav-link active" id="nav-metadata-tab" data-toggle="tab" + href="#nav-metadata" + role="tab" aria-controls="nav-metadata" + aria-selected="true">METADATA</a> + <a class="nav-item nav-link" id="nav-imports-tab" data-toggle="tab" href="#nav-imports" + role="tab" aria-controls="nav-imports" + aria-selected="false">IMPORTS</a> + <a class="nav-item nav-link" id="nav-authentication-tab" data-toggle="tab" + href="#nav-authentication" + role="tab" aria-controls="nav-authentication" + aria-selected="false">EXTERNAL SYSTEM AUTHENTICATION PROPERTIES</a> + <a class="nav-item nav-link" id="nav-template-tab" data-toggle="tab" href="#nav-template" + role="tab" aria-controls="nav-template" + aria-selected="false">TEMPLATE & MAPPING</a> + <a class="nav-item nav-link" id="nav-scripts-tab" data-toggle="tab" href="#nav-scripts" + role="tab" aria-controls="nav-scripts" + aria-selected="false">SCRIPTS</a> + </div> + </div> + + </nav> + <div class="row mt-4"> + <div class="col"> + <div class="tab-content" id="nav-tabContent"> + <div class="tab-pane fade show active" id="nav-metadata" role="tabpanel" + aria-labelledby="nav-metadata-tab"> + <div class="card creat-card"> + <div class="single-line"> + <label class="label-name">Mode</label> + <label name="trst" *ngFor="let mode of modes; let i = index"> + <input class="form-check-input" [(ngModel)]="metaDataTab.mode" type="radio" + name="exampleRadios" id="exampleRadios1" value={{mode}}> + + <span> + <i [className]="mode.style" aria-hidden="true"></i> + <!-- <i class="mode-icon green icon-scripting-mode" aria-hidden="true"></i> --> + {{mode.name}} + </span> + </label> + </div> + <!-- <div class="single-line"> + <label class="label-name">Dictionary Library Instances</label> + <div class="label-input"> + <select name="cars"> + <option class="select-placeholder">Select library</option> + <option value="audi" + *ngFor="let dictionaryLibraryInstance of dictionaryLibraryInstances; let i = index">{{dictionaryLibraryInstance}}</option> + </select> + </div> + </div>--> + + </div> + <div class="card creat-card"> + <div class="single-line"> + <label class="label-name">Name</label> + <div class="label-input"> + <input type="input" (input)="searchPackages($event)" + [(ngModel)]="metaDataTab.name" placeholder="Topology name.vLB.CDS"> + </div> + </div> + <hr/> + <div class="single-line"> + <label class="label-name">Description</label> + <div class="label-input"> + <input type="input" placeholder="Descripe the package"> + </div> + </div> + <hr/> + <div class="single-line"> + <label class="label-name">Version</label> + <div class="label-input"> + <input type="input" placeholder="Example: 1.0.0"> + </div> + </div> + <hr/> + <div class="single-line"> + <label class="label-name">tags</label> + <div class="label-input"> + <input type="input" placeholder="Ex., vDNS-CDS"> + </div> + </div> + </div> + <div id="container"> + <div id="target"> + <div class="card creat-card"> + <div class="single-line"> + <h5 class="label-name"> + Custom key <a class="delete-key" (click)="deleteCustomKey($event)" >Delete</a> + </h5> + + </div> + <div class="single-line"> + <label class="label-name">Name</label> + <div class="label-input"> + <input type="input" placeholder="Enter Name"> + </div> + </div> + <hr/> + <div class="single-line"> + <label class="label-name">Value</label> + <div class="label-input"> + <input type="input" placeholder="Enter Value"> + </div> + </div> + + </div> + </div> + </div> + <div class="card creat-card"> + <div class="single-line"> + <div name="custom key"> + <button class="custom-key" (click)="createAnotherCustomKeyDiv()"><i + class="fa fa-plus" aria-hidden="true"></i> Add a custom key + </button> + + + </div> + </div> + </div> + + </div> + <div class="tab-pane fade" id="nav-imports" role="tabpanel" + aria-labelledby="nav-imports-tab"> + <div class="import-container-all"> + <div class="import-container"> + <div class="import-container-input"> + <input placeholder="Enter file URL" type="input" + class="ng-pristine ng-valid ng-touched"> + <a class="enter-link" href="#"><i class="icon-enter"></i></a> + </div> + <span class="import-container-span">Or you can also <a href="#" + data-toggle="modal" + data-target="#exampleModal">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 id="accordion"> + <div class="card"> + <div class="card-header" id="headingOne"> + <h5 class="mb-0 d-flex justify-content-between"> + <button class="btn btn-link" data-toggle="collapse" + data-target="#collapseOne" aria-expanded="true" + aria-controls="collapseOne"> + <i class="icon-file-code"></i> Definitions/data_types.json + </button> + <a class="accordion-delete" href="#"><i class="icon-delete"></i></a> + </h5> + </div> + + <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" + data-parent="#accordion"> + <div class="card-body"> + Anim pariatur cliche reprehenderit, enim eiusmod high life + accusamus terry richardson ad squid. 3 wolf moon officia aute, + non cupidatat skateboard dolor brunch. Food truck quinoa + nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua + put a bird on it squid single-origin coffee nulla assumenda + shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore + wes anderson cred nesciunt sapiente ea proident. Ad vegan + excepteur butcher vice lomo. Leggings occaecat craft beer + farm-to-table, raw denim aesthetic synth nesciunt you probably + haven't heard of them accusamus labore sustainable VHS. + </div> + </div> + </div> + <div class="card"> + <div class="card-header" id="headingTwo"> + <h5 class="mb-0"> + <button class="btn btn-link collapsed" data-toggle="collapse" + data-target="#collapseTwo" aria-expanded="false" + aria-controls="collapseTwo"> + Definitions/relationship_types.json + </button> + </h5> + </div> + <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" + data-parent="#accordion"> + <div class="card-body"> + Anim pariatur cliche reprehenderit, enim eiusmod high life + accusamus terry richardson ad squid. 3 wolf moon officia aute, + non cupidatat skateboard dolor brunch. Food truck quinoa + nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua + put a bird on it squid single-origin coffee nulla assumenda + shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore + wes anderson cred nesciunt sapiente ea proident. Ad vegan + excepteur butcher vice lomo. Leggings occaecat craft beer + farm-to-table, raw denim aesthetic synth nesciunt you probably + haven't heard of them accusamus labore sustainable VHS. + </div> + </div> + </div> + <div class="card"> + <div class="card-header" id="headingThree"> + <h5 class="mb-0"> + <button class="btn btn-link collapsed" data-toggle="collapse" + data-target="#collapseThree" aria-expanded="false" + aria-controls="collapseThree"> + Definitions/artifact_types.json + </button> + </h5> + </div> + <div id="collapseThree" class="collapse" aria-labelledby="headingThree" + data-parent="#accordion"> + <div class="card-body"> + Anim pariatur cliche reprehenderit, enim eiusmod high life + accusamus terry richardson ad squid. 3 wolf moon officia aute, + non cupidatat skateboard dolor brunch. Food truck quinoa + nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua + put a bird on it squid single-origin coffee nulla assumenda + shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore + wes anderson cred nesciunt sapiente ea proident. Ad vegan + excepteur butcher vice lomo. Leggings occaecat craft beer + farm-to-table, raw denim aesthetic synth nesciunt you probably + haven't heard of them accusamus labore sustainable VHS. + </div> + </div> + </div> + </div> + </div> + + </div> + </div> + <div class="tab-pane fade" id="nav-authentication" role="tabpanel" + aria-labelledby="nav-authentication-tab">... + </div> + <div class="tab-pane fade" id="nav-template" role="tabpanel" + aria-labelledby="nav-template-tab">... + </div> + <div class="tab-pane fade" id="nav-scripts" role="tabpanel" + aria-labelledby="nav-scripts-tab">... + </div> + </div> + </div> + </div> + </div> + </div> </div> - <div> - <div name="custom key"> - <button (click)="createAnotherCustomKeyDiv()"></button> - <div id="target"></div> +</div> +<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" + aria-hidden="true"> + <div class="modal-dialog" role="document"> + <div class="modal-content"> + <div class="modal-header"> + <h5 class="modal-title" id="exampleModalLabel">Import File</h5> + <button type="button" class="close" data-dismiss="modal" aria-label="Close"> + <span aria-hidden="true">×</span> + </button> + </div> + <div class="modal-body"> + ... + </div> + <div class="modal-footer"> + <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button> + <button type="button" class="btn btn-primary">Import</button> + </div> </div> </div> </div> -<app-imports-tab></app-imports-tab> diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.component.ts index 440f2e23b..60fccebc8 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.component.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.component.ts @@ -39,9 +39,13 @@ import {PackageCreationUtils} from './package-creation.utils'; }) export class PackageCreationComponent implements OnInit { - modes: string[] = ['Designer Mode', 'Scripting Mode']; + modes: object[] = [ + {name: 'Designer Mode', style: 'mode-icon icon-designer-mode'}, + {name: 'Scripting Mode', style: 'mode-icon icon-scripting-mode'}]; + dictionaryLibraryInstances: string[] = ['x', 'y']; - private target: HTMLElement; + private container: HTMLElement; + private elements: HTMLCollection; private newElement: HTMLElement; private metaDataTab: MetaDataTab = new MetaDataTab(); @@ -61,11 +65,13 @@ export class PackageCreationComponent implements OnInit { createAnotherCustomKeyDiv() { console.log(this.metaDataTab); - this.newElement = document.createElement('div'); - this.newElement.setAttribute('class', 'alert-dark'); - this.target = document.getElementById('target'); - this.target.appendChild(this.newElement); - this.metaDataTab = new MetaDataTab(); + this.newElement = document.getElementById('target'); + const copiedElement = this.newElement.cloneNode(true); + /* this.newElement.setAttribute('class', 'alert-dark');*/ + this.container = document.getElementById('container'); + this.container.appendChild(copiedElement); + this.elements = this.container.children; + /*this.metaDataTab = new MetaDataTab(); this.metaDataTab.name = 'klfdj'; this.metaDataTab.entryFileName = 'Definitions/vLB_CDS.json'; this.metaDataTab.description = 'rere'; @@ -74,7 +80,7 @@ export class PackageCreationComponent implements OnInit { this.metaDataTab.templateName = 'test'; - this.saveToFileSystem(MetaDataFile.getObjectInstance(this.metaDataTab)); + this.saveToFileSystem(MetaDataFile.getObjectInstance(this.metaDataTab));*/ } validatePacakgeName() { @@ -160,8 +166,15 @@ export class PackageCreationComponent implements OnInit { searchPackages($event: Event) { - /* const searchQuery = event.target.value; - searchQuery = searchQuery.trim(); - this.packagesStore.search(searchQuery);*/ + /* const searchQuery = event.target.value; + searchQuery = searchQuery.trim(); + this.packagesStore.search(searchQuery);*/ + } + + deleteCustomKey(event) { + this.container = document.getElementById('container'); + const element = event.parentElement.parentElement.parentElement; + this.container.removeChild(element); + console.log('removed'); } } |