summaryrefslogtreecommitdiffstats
path: root/cds-ui/designer-client/src/app/modules/feature-modules/packages
diff options
context:
space:
mode:
authorshaaban Altanany <shaaban.eltanany.ext@orange.com>2020-01-07 12:08:44 +0200
committershaaban Altanany <shaaban.eltanany.ext@orange.com>2020-01-07 12:08:44 +0200
commitba3756e38e5b22fccd08e68f4ecc4cc95f9440c2 (patch)
treeafd534ecf634acae94ea0de90aefa93e67074731 /cds-ui/designer-client/src/app/modules/feature-modules/packages
parent077b1ab152c61695ac4d007035dfb81e9aef2c61 (diff)
adding design of first two tabs in creation package component
Issue-ID: CCSDK-2014 Signed-off-by: shaaban Altanany <shaaban.eltanany.ext@orange.com> Change-Id: Ib4cf67f38511fbabc9d69313e9e88edadd7b6c4a
Diffstat (limited to 'cds-ui/designer-client/src/app/modules/feature-modules/packages')
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/imports-tab/imports-tab.component.ts36
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.component.html345
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.component.ts35
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">&times;</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');
}
}