From ba3756e38e5b22fccd08e68f4ecc4cc95f9440c2 Mon Sep 17 00:00:00 2001 From: shaaban Altanany Date: Tue, 7 Jan 2020 12:08:44 +0200 Subject: adding design of first two tabs in creation package component Issue-ID: CCSDK-2014 Signed-off-by: shaaban Altanany Change-Id: Ib4cf67f38511fbabc9d69313e9e88edadd7b6c4a --- .../imports-tab/imports-tab.component.ts | 36 ++- .../package-creation.component.html | 345 ++++++++++++++++++--- .../package-creation/package-creation.component.ts | 35 ++- 3 files changed, 360 insertions(+), 56 deletions(-) (limited to 'cds-ui/designer-client/src/app') 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 { + 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 @@ -
-
- - -
- - -
-
- - -
- - -
- - -
- - -
+ +
+
+
+

CBA Packages + ({{numberOfPackages}} packages) +

+
+
+
+
+ +
+ +
+ +
+
+ + + Clone + + + + + Archive + + + + + Delete + +
+ + +
+
+
+ + + + + +
+
+
+
+
-
-
- -
+
+ - 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'); } } -- cgit 1.2.3-korg