From c133b83cb2cbf0b3c7a63aad105a56060db2a6df Mon Sep 17 00:00:00 2001 From: shaaban Altanany Date: Thu, 9 Jan 2020 10:15:28 +0200 Subject: creating meta data creation component(first tab) Issue-ID: CCSDK-2014 Signed-off-by: shaaban Altanany Change-Id: I35283cbb5b48174606493ecb39c20b9f717a9c06 --- .../src/app/common/constants/app-constants.ts | 3 +- .../packages/model/packages-dashboard.state.ts | 1 + .../imports-tab/imports-tab.component.html | 130 ++++++++++++++--- .../mapping-models/definitions/VlbDefinition.ts | 24 ++- .../mapping-models/metadata/MetaDataTab.model.ts | 6 +- .../package-creation.component.html | 162 +++------------------ .../package-creation/package-creation.component.ts | 159 ++++++++++++++------ .../package-creation/package-creation.service.ts | 13 +- .../package-creation/package-creation.utils.ts | 2 + .../packages/packages-api.service.ts | 4 +- .../filter-by-tags/filter-by-tags.component.html | 2 +- .../filter-by-tags/filter-by-tags.component.ts | 25 ++-- .../package-list/package-list.component.html | 2 +- .../package-list/package-list.component.spec.ts | 5 +- .../package-list/package-list.component.ts | 4 +- .../packages-dashboard.component.html | 26 +--- .../packages/packages.routing.module.ts | 2 + .../feature-modules/packages/packages.store.ts | 62 +++++++- .../src/assets/img/folder-upload.svg | 20 +++ cds-ui/designer-client/src/styles.css | 81 ++++++++++- 20 files changed, 468 insertions(+), 265 deletions(-) create mode 100644 cds-ui/designer-client/src/assets/img/folder-upload.svg (limited to 'cds-ui') diff --git a/cds-ui/designer-client/src/app/common/constants/app-constants.ts b/cds-ui/designer-client/src/app/common/constants/app-constants.ts index 506d3b90f..387c35342 100644 --- a/cds-ui/designer-client/src/app/common/constants/app-constants.ts +++ b/cds-ui/designer-client/src/app/common/constants/app-constants.ts @@ -98,7 +98,8 @@ export const BlueprintURLs = { deploy: '/controllerblueprint/deploy-blueprint', getMetaDate: '/controllerblueprint/meta-data/', countOfAllBluePrints: '/controllerblueprint/list/count', - getMetaDatePageable: '/controllerblueprint/metadata/paged' + getMetaDatePageable: '/controllerblueprint/metadata/paged', + getBlueprintByName: '/controllerblueprint/by-name/' }; export const ResourceDictionaryURLs = { diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/model/packages-dashboard.state.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/model/packages-dashboard.state.ts index 068e93160..f4f56c591 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/model/packages-dashboard.state.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/model/packages-dashboard.state.ts @@ -24,6 +24,7 @@ import {BluePrintPage} from './BluePrint.model'; export class PackagesDashboardState { page: BluePrintPage; + filteredPackages: BluePrintPage; command: string; currentPage = 0; totalPackages: number; diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/imports-tab/imports-tab.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/imports-tab/imports-tab.component.html index fc1015ca0..affba1b3b 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/imports-tab/imports-tab.component.html +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/imports-tab/imports-tab.component.html @@ -1,23 +1,111 @@ -
- - gi - Optional custom content that replaces the the entire default content. - - - -
- - - - - - - - - - - -
Name
{{ item.relativePath }}
+ +
+
+
+ + +
+ Or you can also Import File + +
+ +
+
+
+ +
+
+
+
+
+
+ + +
+
+ +
+
+ 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. +
+
+
+
+
+
+ +
+
+
+
+ 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. +
+
+
+
+
+
+ +
+
+
+
+ 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. +
+
+
+
+
+ +
+ + + + diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/mapping-models/definitions/VlbDefinition.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/mapping-models/definitions/VlbDefinition.ts index 5c59404c2..2d5e520ee 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/mapping-models/definitions/VlbDefinition.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/mapping-models/definitions/VlbDefinition.ts @@ -1,4 +1,5 @@ -import {JsonObject, JsonProperty} from 'json2typescript'; +import {Any, JsonObject, JsonProperty} from 'json2typescript'; + @JsonObject export class VlbDefinition { @@ -11,17 +12,30 @@ export class VlbDefinition { // topology_template: TopologyTemplate; } +@JsonObject('metadata') export class Metadata { @JsonProperty('template_author') - templateAuthor: string; + // tslint:disable-next-line:variable-name + template_author: string; 'author-email': string; 'user-groups': string; @JsonProperty('template_name') - templateName: string; + // tslint:disable-next-line:variable-name + template_name: string; @JsonProperty('template_version') - templateVersion: string; + // tslint:disable-next-line:variable-name + template_version: string; @JsonProperty('template_tag') - templateTags: string; + // tslint:disable-next-line:variable-name + template_tags: string; + + @JsonProperty('dictionary_group') + // tslint:disable-next-line:variable-name + dictionary_group: string; + + + /* @JsonProperty('custom_keys', {String}, false) + mapOfCustomKeys: Map = new Map();*/ } export class Import { diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/mapping-models/metadata/MetaDataTab.model.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/mapping-models/metadata/MetaDataTab.model.ts index 353ac4e1c..42aac5c4f 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/mapping-models/metadata/MetaDataTab.model.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/mapping-models/metadata/MetaDataTab.model.ts @@ -51,9 +51,9 @@ export class MetaDataFile { 'CSAR-Version: 1.0\n' + 'Created-By: Shaaban Ebrahim \n' + 'Entry-Definitions:' + metaDataTab.entryFileName + '\n' + - 'Template-Name:' + metaDataTab.templateName + '\n' + - 'Template-Version: 1.0.0\n' + - 'Template-Type: DEFAULT\n' + + 'Template-Name:' + metaDataTab.name + '\n' + + 'Template-Version:' + metaDataTab.version + '\n' + + 'Template-Type: ' + metaDataTab.mode + '\n' + 'Template-Tags:' + metaDataTab.tags; } 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 3cc8707c5..dc363b28a 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 @@ -34,7 +34,7 @@
@@ -73,32 +73,21 @@
-
-
@@ -106,21 +95,26 @@
- +
- +
+
- +
@@ -129,21 +123,22 @@
- Custom key Delete + Custom key Delete
- +
- +
@@ -165,110 +160,8 @@
- - 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 60fccebc8..37a017953 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 @@ -31,6 +31,8 @@ import {JsonConvert} from 'json2typescript'; import {JsonPipe} from '@angular/common'; import {PackageCreationService} from './package-creation.service'; import {PackageCreationUtils} from './package-creation.utils'; +import List = _.List; +import {Router} from '@angular/router'; @Component({ selector: 'app-package-creation', @@ -38,10 +40,11 @@ import {PackageCreationUtils} from './package-creation.utils'; styleUrls: ['./package-creation.component.css'] }) export class PackageCreationComponent implements OnInit { - + counter = 0; modes: object[] = [ {name: 'Designer Mode', style: 'mode-icon icon-designer-mode'}, {name: 'Scripting Mode', style: 'mode-icon icon-scripting-mode'}]; + customKeysAndValues: Map = new Map(); dictionaryLibraryInstances: string[] = ['x', 'y']; private container: HTMLElement; @@ -54,23 +57,34 @@ export class PackageCreationComponent implements OnInit { private folder: FolderNodeElement = new FolderNodeElement(); private zipFile: JSZip = new JSZip(); private filesData: any = []; + private errorMessage: string; + private keys: NodeListOf; + private values: NodeListOf; - constructor(private packageCreationService: PackageCreationService, private packageCreationUtils: PackageCreationUtils) { + constructor(private packageCreationService: PackageCreationService, private packageCreationUtils: PackageCreationUtils, + private router: Router) { } ngOnInit() { + // this.customKeysAndValues.set('Dictionary Library Instances', ' '); + this.keys = document.getElementsByName('key'); + this.values = document.getElementsByName('value'); } createAnotherCustomKeyDiv() { - console.log(this.metaDataTab); this.newElement = document.getElementById('target'); + const id = this.newElement.getAttribute('id'); + this.newElement.setAttribute('id', 'target' + this.counter++); 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.newElement.setAttribute('id', id); + this.clearCopiedElement(); + + // console.log(this.packageCreationService.checkBluePrintNameAndVersion(this.metaDataTab.name, this.metaDataTab.version)); /*this.metaDataTab = new MetaDataTab(); this.metaDataTab.name = 'klfdj'; this.metaDataTab.entryFileName = 'Definitions/vLB_CDS.json'; @@ -83,66 +97,96 @@ export class PackageCreationComponent implements OnInit { this.saveToFileSystem(MetaDataFile.getObjectInstance(this.metaDataTab));*/ } - validatePacakgeName() { - + private clearCopiedElement() { + const newCopiedElement: HTMLInputElement = document.getElementById('target' + (this.counter - 1)) as HTMLInputElement; + const inputElements = newCopiedElement.getElementsByTagName('input'); + for (let i = 0; i < inputElements.length; i++) { + const element: HTMLInputElement = inputElements.item(i) as HTMLInputElement; + element.value = ''; + } } - getDictionaryLibraryInstances() { + + validatePackageNameAndVersion() { + if (this.metaDataTab.name && this.metaDataTab.version) { + this.packageCreationService.checkBluePrintNameAndVersion(this.metaDataTab.name, this.metaDataTab.version).then(element => { + if (element) { + this.errorMessage = 'the package with name and version is exists'; + } else { + this.errorMessage = ' '; + } + }); + } } - saveMetaData() { + getDictionaryLibraryInstances() { } - private saveToFileSystem(response) { - - const filename = 'TOSCA.meta'; - FilesContent.putData(filename, response); - - const filenameEntry = 'vLB_CDS.json'; - const vlbDefinition: VlbDefinition = new VlbDefinition(); - const metadata: Metadata = new Metadata(); + saveMetaData() { + for (let i = 0; i < this.values.length; i++) { + const inputKeyElement: HTMLInputElement = this.keys.item(i) as HTMLInputElement; + const inputKey: string = inputKeyElement.value; + const inputValueElement: HTMLInputElement = this.values.item(i) as HTMLInputElement; + const inputValue: string = inputValueElement.value; + this.customKeysAndValues.set(inputKey, inputValue); + } - metadata.templateAuthor = ' lldkslds'; - metadata.templateName = ' lldkslds'; - metadata.templateTags = ' lldkslds'; - metadata.templateVersion = ' lldkslds'; - metadata['author-email'] = ' lldkslds'; - metadata['user-groups'] = ' lldkslds'; - vlbDefinition.metadata = metadata; + this.metaDataTab.mapOfCustomKey = this.customKeysAndValues; + this.setModeType(this.metaDataTab); + this.setEntryPoint(this.metaDataTab); - vlbDefinition.imports = [{ - file: 'Definitions/data_types.json' - }]; + this.addToscaMetaDataFile(this.metaDataTab); - const value = this.packageCreationUtils.transformToJson(vlbDefinition); - FilesContent.putData(filenameEntry, value); + const vlbDefinition: VlbDefinition = new VlbDefinition(); + this.fillVLBDefinition(vlbDefinition, this.metaDataTab); this.filesData.push(this.folder.TREE_DATA); this.saveToBackend(); + this.packageCreationService.refreshPackages(); + this.router.navigate(['/packages']); + } + addToscaMetaDataFile(metaDataTab: MetaDataTab) { + const filename = 'TOSCA.meta'; + FilesContent.putData(filename, MetaDataFile.getObjectInstance(this.metaDataTab)); + } + + private setModeType(metaDataTab: MetaDataTab) { + if (metaDataTab.mode.startsWith('Scripting')) { + metaDataTab.mode = 'KOTLIN_SCRIPT'; + } else if (metaDataTab.mode.startsWith('Designer')) { + metaDataTab.mode = 'DEFAULT'; + } else { + metaDataTab.mode = 'GENERIC_SCRIPT'; + } + } saveToBackend() { this.create(); this.zipFile.generateAsync({type: 'blob'}) .then(blob => { - const formData = new FormData(); - formData.append('file', blob); - this.packageCreationService.saveBlueprint(formData) - .subscribe( - data => { - console.log('Success:' + JSON.stringify(data)); - }, error => { - console.log('Error -' + error.message); - }); + this.saveBluePrint(blob); }); } + private saveBluePrint(blob) { + const formData = new FormData(); + formData.append('file', blob); + this.packageCreationService.saveBlueprint(formData) + .subscribe( + data => { + console.log('Success:' + JSON.stringify(data)); + }, error => { + console.log('Error -' + error.message); + }); + } + create() { this.folder.TREE_DATA.forEach((path) => { @@ -151,8 +195,6 @@ export class PackageCreationComponent implements OnInit { this.zipFile.folder(name); path.children.forEach(children => { const name2 = children.name; - console.log(FilesContent.getMapOfFilesNamesAndContent()); - console.log(name2); if (FilesContent.getMapOfFilesNamesAndContent().has(name2)) { this.zipFile.file(name + '/' + name2, FilesContent.getMapOfFilesNamesAndContent().get(name2)); } else { @@ -165,16 +207,41 @@ export class PackageCreationComponent implements OnInit { } - searchPackages($event: Event) { - /* 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'); + } + + + private setEntryPoint(metaDataTab: MetaDataTab) { + if (metaDataTab.mode.startsWith('DEFAULT')) { + metaDataTab.entryFileName = 'Definitions/vLB_CDS.json'; + } else { + metaDataTab.entryFileName = ''; + } + + + } + + private fillVLBDefinition(vlbDefinition: VlbDefinition, metaDataTab: MetaDataTab) { + + const metadata: Metadata = new Metadata(); + metadata.template_author = 'Shaaban'; + metadata.template_name = metaDataTab.templateName; + metadata.template_tags = metaDataTab.tags; + + metadata.dictionary_group = 'default'; + metadata.template_version = metaDataTab.version; + metadata['author-email'] = 'shaaban.altanany.ext@orange.com'; + metadata['user-groups'] = 'ADMIN'; + // metadata.mapOfCustomKeys = this.metaDataTab.mapOfCustomKey; + vlbDefinition.tosca_definitions_version = metaDataTab.version; + vlbDefinition.metadata = metadata; + + // console.log(vlbDefinition.metadata.mapOfCustomKeys); + const value = this.packageCreationUtils.transformToJson(vlbDefinition); + console.log(value); + FilesContent.putData('vLB_CDS.json', value); } } diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.service.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.service.ts index 20e147684..0e5cd6a11 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.service.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.service.ts @@ -24,6 +24,8 @@ import {Injectable} from '@angular/core'; import {Observable} from 'rxjs'; import {ApiService} from '../../../../common/core/services/api.service'; import {BlueprintURLs} from '../../../../common/constants/app-constants'; +import {PackagesApiService} from '../packages-api.service'; +import {PackagesStore} from '../packages.store'; @Injectable({ providedIn: 'root' @@ -31,10 +33,19 @@ import {BlueprintURLs} from '../../../../common/constants/app-constants'; export class PackageCreationService { - constructor(private api: ApiService) { + constructor(private api: ApiService, private packagesListService: PackagesApiService, private packagesStore: PackagesStore) { } saveBlueprint(body: any | null, options?: any): Observable { return this.api.post(BlueprintURLs.save, body, {responseType: 'text'}); } + + async checkBluePrintNameAndVersion(name: string, version: string): Promise { + return await this.packagesListService.checkBluePrintIfItExists(name, version) + .then(bluePrintModelsResult => bluePrintModelsResult != null && bluePrintModelsResult.length > 0); + } + + refreshPackages() { + this.packagesStore.getAll(); + } } diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.utils.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.utils.ts index 2ee0de7e2..4bccb3dd5 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.utils.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.utils.ts @@ -21,6 +21,7 @@ limitations under the License. import {JsonPipe} from '@angular/common'; import {Injectable} from '@angular/core'; +import {JsonConvert} from 'json2typescript'; @Injectable({ @@ -32,6 +33,7 @@ export class PackageCreationUtils { } public transformToJson(object: any): string { + return this.pipe.transform(object); } diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-api.service.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-api.service.ts index ca4acd36b..2332d8e53 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-api.service.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-api.service.ts @@ -44,8 +44,8 @@ export class PackagesApiService { }); } - checkBluePrintIfItExists(keyword: string) {// : Observable { - // return this.api.get(BlueprintURLs.get + '/' + keyword); + async checkBluePrintIfItExists(name: string, version: string): Promise { + return await this.api.get(BlueprintURLs.getBlueprintByName + '/' + name + '/version/' + version).toPromise(); } getCountOfAllPackages(observable: Observable) { diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/filter-by-tags/filter-by-tags.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/filter-by-tags/filter-by-tags.component.html index 6ce3a53a1..e5ebc315a 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/filter-by-tags/filter-by-tags.component.html +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/filter-by-tags/filter-by-tags.component.html @@ -1,6 +1,6 @@
-
ALL PACKAGES TAGS
+
{{checkBoxTages.substr(0,checkBoxTages.length-1)}}
  • diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/filter-by-tags/filter-by-tags.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/filter-by-tags/filter-by-tags.component.ts index b4007215a..28be5f5c8 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/filter-by-tags/filter-by-tags.component.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/filter-by-tags/filter-by-tags.component.ts @@ -37,7 +37,7 @@ export class TagsFilteringComponent implements OnInit { searchTag = ''; viewedPackages: BlueprintModel[] = []; private checkBoxTages = ''; - + currentPage = 0; constructor(private packagesStore: PackagesStore, ) { @@ -45,13 +45,18 @@ export class TagsFilteringComponent implements OnInit { console.log(state); if (state.page) { this.viewedPackages = state.page.content; + this.tags = []; + if (state.currentPage !== this.currentPage) { + this.checkBoxTages = ''; + this.currentPage = state.currentPage; + } this.viewedPackages.forEach(element => { element.tags.split(',').forEach(tag => { this.tags.push(tag.trim()); }); + this.tags.push('All'); this.tags = this.tags.filter((value, index, self) => self.indexOf(value) === index); this.assignTags(); - }); } }); @@ -80,20 +85,20 @@ export class TagsFilteringComponent implements OnInit { } reloadPackages(event: any) { - if (!event.target.checked) { this.checkBoxTages = this.checkBoxTages.replace(event.target.id + ',', '') .replace(event.target.id, ''); } else { this.checkBoxTages += event.target.id.trim() + ','; } - console.log(this.checkBoxTages); - if (!this.checkBoxTages.includes(',')) { - return; - } - this.viewedPackages = []; - // this.packagesStore.getPagesFilterByTags(this.checkBoxTages); - // this.viewedPackages = this.viewedPackages.filter((value, index, self) => self.indexOf(value) === index); + const tagsSelected = this.checkBoxTages.split(',').filter(item => { + if (item) { + return true; + } + }).map((item) => { + return item.trim(); + }); + this.packagesStore.filterByTags(tagsSelected); } diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.html index 18428d4b4..8bc7adf8c 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.html +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.html @@ -7,7 +7,7 @@
    - Create Package + Create Package
    diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.spec.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.spec.ts index f45f25996..000f9eda1 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.spec.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.spec.ts @@ -4,6 +4,7 @@ import { PackageListComponent } from './package-list.component'; import { PackagesStore } from '../../packages.store'; import { getBluePrintPageMock } from '../../blueprint.page.mock'; import { of } from 'rxjs'; +import {PackagesDashboardState} from '../../model/packages-dashboard.state'; describe('PackageListComponent', () => { let component: PackageListComponent; @@ -12,7 +13,9 @@ describe('PackageListComponent', () => { beforeEach(async(() => { - store = { state$: of(getBluePrintPageMock()) }; + const dashBoard = new PackagesDashboardState(); + dashBoard.page = getBluePrintPageMock(); + store = { state$: of(dashBoard) }; TestBed.configureTestingModule({ declarations: [ PackageListComponent ], diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.ts index c7ec0af20..049801227 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.ts @@ -16,8 +16,8 @@ export class PackageListComponent implements OnInit { console.log('PackageListComponent'); this.packagesStore.state$.subscribe(state => { console.log(state); - if (state.page) { - this.viewedPackages = state.page.content; + if (state.filteredPackages) { + this.viewedPackages = state.filteredPackages.content; } }); } diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.html index ac510893b..7928f2d91 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.html +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.html @@ -2,7 +2,7 @@
    - +
    -
    -
    -
    - - - - -
    -
    -
    +
    diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages.routing.module.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages.routing.module.ts index da1031998..913bb1081 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages.routing.module.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages.routing.module.ts @@ -3,6 +3,7 @@ import {Routes, RouterModule} from '@angular/router'; import {PackagesDashboardComponent} from './packages-dashboard/packages-dashboard.component'; import {DesignerComponent} from './designer/designer.component'; import {PackageCreationComponent} from './package-creation/package-creation.component'; +import {ConfigurationDashboardComponent} from './configuration-dashboard/configuration-dashboard.component'; const routes: Routes = [ @@ -11,6 +12,7 @@ const routes: Routes = [ component: PackagesDashboardComponent }, {path: 'designer', component: DesignerComponent}, + {path: 'package/:id', component: ConfigurationDashboardComponent}, {path: 'createPackage', component: PackageCreationComponent}, ]; diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages.store.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages.store.ts index b8aa73442..83c695f71 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages.store.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages.store.ts @@ -24,7 +24,7 @@ import {BluePrintPage} from './model/BluePrint.model'; import {Store} from '../../../common/core/stores/Store'; import {PackagesApiService} from './packages-api.service'; import {PackagesDashboardState} from './model/packages-dashboard.state'; - +import {Observable, of} from 'rxjs'; @Injectable({ providedIn: 'root' @@ -32,6 +32,7 @@ import {PackagesDashboardState} from './model/packages-dashboard.state'; export class PackagesStore extends Store { // TDOD fixed for now as there is no requirement to change it from UI public pageSize = 5; + private bluePrintContent: BluePrintPage = new BluePrintPage(); constructor(private packagesServiceList: PackagesApiService) { super(new PackagesDashboardState()); @@ -50,6 +51,13 @@ export class PackagesStore extends Store { } } + public filterByTags(tags: string[]) { + console.log(this.state.currentPage); + this.getPagedPackagesByTags(this.state.command, this.state.currentPage, + this.pageSize, this.state.sortBy, tags); + + } + public getPage(pageNumber: number, pageSize: number) { if (this.isCommandExist()) { this.searchPagedPackages(this.state.command, pageNumber, pageSize); @@ -74,11 +82,13 @@ export class PackagesStore extends Store { this.setState({ ...this.state, page: pages[0], + filteredPackages: pages[0], command: '', totalPackages: pages[0].totalElements, currentPage: pageNumber, // this param is set only in get all as it represents the total number of pacakges in the server totalPackagesWithoutSearchorFilters: pages[0].totalElements, + tags: [], sortBy }); }); @@ -90,9 +100,11 @@ export class PackagesStore extends Store { this.setState({ ...this.state, page: pages[0], + filteredPackages: pages[0], command: keyWord, totalPackages: pages[0].totalElements, currentPage: pageNumber, + tags: [], sortBy }); }); @@ -101,4 +113,52 @@ export class PackagesStore extends Store { private isCommandExist() { return this.state.command; } + + private getPagedPackagesByTags(keyWord: string, currentPage1: number, pageSize: number, sortBy1: string, tagsSearchable: string[]) { + this.getPagedPackagesByKeyWordFilteredByTags(tagsSearchable) + .subscribe((pages: BluePrintPage) => { + this.setState({ + ...this.state, + page: this.state.page, + filteredPackages: pages, + command: keyWord, + tags: tagsSearchable, + // totalPackages: pages.totalElements, + currentPage: currentPage1, + sortBy: sortBy1, + totalPackages: this.state.page.totalElements, + }); + }); + } + + private getPagedPackagesByKeyWordFilteredByTags(tagsSearchable: string[]): Observable { + this.bluePrintContent.content = []; + if (tagsSearchable && tagsSearchable.length !== 0 && !tagsSearchable.includes('All')) { + tagsSearchable.forEach(tag => { + if (tag) { + this.state.page.content.forEach(bluePrintModel => { + if (tag.endsWith(',')) { + tag = tag.replace(',', ''); + } + bluePrintModel.tags.split(',').forEach(bluePrintModelTag => { + if (bluePrintModelTag === tag) { + this.bluePrintContent.content.push(bluePrintModel); + } + }); + }); + } else { + this.getPagedPackages(this.state.currentPage, this.pageSize); + return of(this.state.page); + } + }); + this.bluePrintContent.content = this.bluePrintContent.content.filter((value, index, self) => self.indexOf(value) === index); + console.log('the lenght is ' + this.bluePrintContent.content.length); + return of(this.bluePrintContent); + } else { + this.getPagedPackages(this.state.currentPage, this.pageSize); + return of(this.state.page); + } + } + + } diff --git a/cds-ui/designer-client/src/assets/img/folder-upload.svg b/cds-ui/designer-client/src/assets/img/folder-upload.svg new file mode 100644 index 000000000..a07eb85ce --- /dev/null +++ b/cds-ui/designer-client/src/assets/img/folder-upload.svg @@ -0,0 +1,20 @@ + + + + icon + Created with Sketch. + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/cds-ui/designer-client/src/styles.css b/cds-ui/designer-client/src/styles.css index 0e6a7f3e7..17c49ce48 100644 --- a/cds-ui/designer-client/src/styles.css +++ b/cds-ui/designer-client/src/styles.css @@ -6,7 +6,8 @@ body{ /* background-image: linear-gradient(-45deg, #000 10%, #fff 0); background-size: 6px 6px; */ margin: 0; - font-family: 'Nunito' !important; + /* font-family: 'Nunito' !important; */ + font-family: Arial, Helvetica, sans-serif !important; color: #1B3E6F !important; } *:focus{ @@ -1449,7 +1450,10 @@ ul.package-contributers{ .btn{ padding-right: 20px !important; padding-left: 20px !important; - border-radius: 15px !important; + +} +.btn.border-radius{ + border-radius: 20px !important; } .btn-primary{ background-color: #1273EB !important; @@ -1592,6 +1596,79 @@ hr { display: inline-block; margin-top: 5px; } +.btn-link:hover, .btn-link:focus{ + text-decoration: none !important; +} +.btn-link::before{ + content: "\f107"; + font-family:'FontAwesome'; + position: relative; + margin-right: 20px; +} +.btn-link.collapsed::before{ + content: "\f105"; + font-family:'FontAwesome'; + position: relative; + margin-right: 30px; +} +.btn-link i{ + margin-right: 10px; +} +.ngx-file-drop__content{ + background: #F4F9FE; + padding: 20px; + height: auto !important; + display: inline-block !important; + width: 100%; +} +.ngx-file-drop__drop-zone{ + border: 2px dotted #F4F9FE !important; + border-radius: 0px !important; + height: auto !important; +} +.folder-upload{ + width: 100%; + display: inline-block; + text-align: center; +} +.folder-upload-text{ + margin-top: 10px; + width: 100%; + display: inline-block; + text-align: center; + color:#242424 ; + font-size: 12px; +} +.folder-upload-text button{ + margin-left: 10px; + font-size: 12px; +} +.folder-upload-type{ + color:#A4B2C6 ; + font-size: 10px; + width: 100%; + display: inline-block; + text-align: center; +} +.upload-table .table thead th{ + border-top: 0px !important; + border-bottom: 0px !important; +} +.upload-table .table{ + margin-bottom: 0px !important; +} +.nav-tabs .nav-link{ + position: relative; +} +.nav-tabs .nav-link.tab-done::after{ + content: "\f058"; + position: absolute; + font-family: 'FontAwesome'; + left: 3px; + font-size: 16px; + top: 11px; + color: #66BB00; +} /* Extra small devices (portrait phones, less than 576px) */ @media (max-width: 575.98px) { .page-title{ -- cgit 1.2.3-korg