diff options
Diffstat (limited to 'cds-ui/designer-client/src/app/modules/feature-modules')
30 files changed, 839 insertions, 320 deletions
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/creationModes/DesignerCreationMode.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/creationModes/DesignerCreationMode.ts new file mode 100644 index 000000000..41b81eea3 --- /dev/null +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/creationModes/DesignerCreationMode.ts @@ -0,0 +1,57 @@ +import {PackageCreationModes} from './PackageCreationModes'; +import {CBAPackage, Scripts} from '../mapping-models/CBAPacakge.model'; +import {FilesContent} from '../mapping-models/metadata/MetaDataTab.model'; +import {Import, Metadata, VlbDefinition} from '../mapping-models/definitions/VlbDefinition'; +import {PackageCreationUtils} from '../package-creation.utils'; + + +export class DesignerCreationMode extends PackageCreationModes { + + constructor() { + super(); + } + + execute(cbaPackage: CBAPackage, packageCreationUtils: PackageCreationUtils) { + this.addToscaMetaDataFile(cbaPackage.metaData); + this.createDefinitionsFolder(cbaPackage, packageCreationUtils); + this.addScriptsFolder(cbaPackage.scripts); + } + + private addScriptsFolder(scripts: Scripts) { + scripts.files.forEach((key, value) => { + FilesContent.putData(key, value); + }); + } + + private createDefinitionsFolder(cbaPackage: CBAPackage, packageCreationUtils: PackageCreationUtils) { + cbaPackage.definitions.imports.forEach((key, valueOfFile) => { + FilesContent.putData(key, valueOfFile); + }); + + const filenameEntry = 'Definitions/vLB_CDS.json'; + const vlbDefinition: VlbDefinition = new VlbDefinition(); + const metadata: Metadata = new Metadata(); + + metadata.template_author = 'Shaaban Ebrahim'; + metadata.template_name = cbaPackage.metaData.name; + metadata.template_tags = cbaPackage.metaData.tags; + metadata.template_version = cbaPackage.metaData.version; + metadata['author-email'] = 'shaaban.eltanany.ext@orange.com'; + metadata['user-groups'] = 'test'; + cbaPackage.definitions.metaDataTab.mapOfCustomKey.forEach((key, customKeyValue) => { + metadata[key] = customKeyValue; + }); + vlbDefinition.metadata = metadata; + const files: Import[] = []; + cbaPackage.definitions.imports.forEach((key, valueOfFile) => { + files.push({file: valueOfFile}); + }); + console.log(vlbDefinition); + vlbDefinition.imports = files; + const value = packageCreationUtils.transformToJson(vlbDefinition); + FilesContent.putData(filenameEntry, value); + console.log('hello there'); + console.log(FilesContent.getMapOfFilesNamesAndContent()); + + } +} diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/creationModes/GenericCreationMode.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/creationModes/GenericCreationMode.ts new file mode 100644 index 000000000..58409eea8 --- /dev/null +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/creationModes/GenericCreationMode.ts @@ -0,0 +1,12 @@ +/*import {CBAPackage} from '../mapping-models/CBAPacakge.model'; +import {PackageCreationModes} from './PackageCreationModes'; + +export class GenericCreationMode extends PackageCreationModes { + + execute(cbaPackage: CBAPackage) { + this.addToscaMetaDataFile(cbaPackage.metaData); + } + + +} +*/ diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/creationModes/PackageCreation.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/creationModes/PackageCreation.ts deleted file mode 100644 index e1d28105f..000000000 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/creationModes/PackageCreation.ts +++ /dev/null @@ -1,13 +0,0 @@ -import {CBAPackage} from '../mapping-models/CBAPacakge.model'; - -export abstract class PackageCreation { - - abstract setModeType(cbaPackage: CBAPackage); - - abstract setEntryPoint(cbaPackage: CBAPackage); - - createToscaMetaData(cbaPackage: CBAPackage) { - - } - -} diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/creationModes/PackageCreationBuilder.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/creationModes/PackageCreationBuilder.ts new file mode 100644 index 000000000..08443cca1 --- /dev/null +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/creationModes/PackageCreationBuilder.ts @@ -0,0 +1,24 @@ +import {CBAPackage} from '../mapping-models/CBAPacakge.model'; +import {ModeType} from '../mapping-models/ModeType'; +import {DesignerCreationMode} from './DesignerCreationMode'; +import {PackageCreationModes} from './PackageCreationModes'; + + +export class PackageCreationBuilder { + + constructor() { + } + + public static getCreationMode(cbaPackage: CBAPackage): PackageCreationModes { + let creationMode: PackageCreationModes; + /*if (cbaPackage.metaData.mode.includes(ModeType.Generic)) { + creationMode = new GenericCreationMode(); + } else */ + if (cbaPackage.metaData.mode.includes(ModeType.Designer)) { + creationMode = new DesignerCreationMode(); + } /*else if (cbaPackage.metaData.mode.includes(ModeType.Scripting)) { + creationMode = new ScriptingCreationMode(); + }*/ + return creationMode; + } +} diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/creationModes/PackageCreationModes.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/creationModes/PackageCreationModes.ts new file mode 100644 index 000000000..400304aab --- /dev/null +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/creationModes/PackageCreationModes.ts @@ -0,0 +1,54 @@ +import {CBAPackage} from '../mapping-models/CBAPacakge.model'; +import {ModeType} from '../mapping-models/ModeType'; +import {FilesContent, MetaDataTabModel} from '../mapping-models/metadata/MetaDataTab.model'; +import {PackageCreationUtils} from '../package-creation.utils'; + + +export abstract class PackageCreationModes { + + protected constructor() { + } + + public static setEntryPoint(metaDataTab: MetaDataTabModel) { + if (metaDataTab.mode.startsWith(ModeType.Designer)) { + metaDataTab.entryFileName = 'Definitions/vLB_CDS.json'; + } else { + // TODO Not implemented + metaDataTab.entryFileName = ''; + } + return metaDataTab; + } + + public static mapModeType(cbaPackage: CBAPackage) { + if (cbaPackage.metaData.mode.startsWith('Scripting')) { + cbaPackage.metaData.mode = ModeType.Scripting; + } else if (cbaPackage.metaData.mode.startsWith('Designer')) { + cbaPackage.metaData.mode = ModeType.Designer; + } else { + cbaPackage.metaData.mode = ModeType.Generic; + } + return cbaPackage; + } + + getValueOfMetaData(metaDataTab: MetaDataTabModel): string { + return 'TOSCA-Meta-File-Version: 1.0.0\n' + + 'CSAR-Version: 1.0\n' + + 'Created-By: Shaaban Ebrahim <shaaban.eltanany.ext@orange.con>\n' + + 'Entry-Definitions:' + metaDataTab.entryFileName + '\n' + + 'Template-Name:' + metaDataTab.name + '\n' + + 'Template-Version:' + metaDataTab.version + '\n' + + 'Template-Type: ' + metaDataTab.mode + '\n' + + 'Template-Tags:' + metaDataTab.tags; + + } + + protected addToscaMetaDataFile(metaDataTab: MetaDataTabModel) { + const filename = 'TOSCA-Metadata/TOSCA.meta'; + FilesContent.putData(this.getValueOfMetaData(metaDataTab), filename); + } + + + abstract execute(cbaPackage: CBAPackage, packageCreationUtils: PackageCreationUtils) ; + + +} diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/creationModes/ScriptingCreationMode.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/creationModes/ScriptingCreationMode.ts new file mode 100644 index 000000000..21dce171d --- /dev/null +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/creationModes/ScriptingCreationMode.ts @@ -0,0 +1,11 @@ +/*import {CBAPackage, Definition, Scripts} from '../mapping-models/CBAPacakge.model'; +import {PackageCreationModes} from './PackageCreationModes'; +import {FilesContent} from '../mapping-models/metadata/MetaDataTab.model'; + +export class ScriptingCreationMode extends PackageCreationModes { + execute(cbaPackage: CBAPackage) { + } + + +} +*/ diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/dsl-definitions-tab/dsl-definitions-tab.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/dsl-definitions-tab/dsl-definitions-tab.component.html index dde21297a..6fb1dcfd8 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/dsl-definitions-tab/dsl-definitions-tab.component.html +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/dsl-definitions-tab/dsl-definitions-tab.component.html @@ -1 +1,5 @@ -<ace-editor [(text)]="dslDefinition.content" [mode]="lang" #editor style="height:150px;"></ace-editor> +<ace-editor [(text)]="dslDefinition.content" [mode]="'javascript'" [autoUpdateContent]="true" + [durationBeforeCallback]="1000" [theme]="'tomorrow_night_bright'" #editor style="height:300px;"> +</ace-editor> + +<!-- <app-source-editor [lang]="'javascript'" (textChanged)="textChanged($event)" [(text)]="dslDefinition.content"></app-source-editor> -->
\ No newline at end of file diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/dsl-definitions-tab/dsl-definitions-tab.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/dsl-definitions-tab/dsl-definitions-tab.component.ts index 032ba0b7f..7171e730e 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/dsl-definitions-tab/dsl-definitions-tab.component.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/dsl-definitions-tab/dsl-definitions-tab.component.ts @@ -1,6 +1,6 @@ -import {Component, OnInit} from '@angular/core'; -import {DslDefinition} from '../mapping-models/CBAPacakge.model'; -import {PackageCreationStore} from '../package-creation.store'; +import { Component, OnInit } from '@angular/core'; +import { DslDefinition } from '../mapping-models/CBAPacakge.model'; +import { PackageCreationStore } from '../package-creation.store'; @Component({ selector: 'app-dsl-definitions-tab', @@ -19,4 +19,8 @@ export class DslDefinitionsTabComponent implements OnInit { this.packageCreationStore.changeDslDefinition(this.dslDefinition); } + + textChanged(event) { + console.log('event changed'); + } } 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 5cd888828..344e7f599 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 @@ -39,7 +39,7 @@ <button class="btn btn-link collapsed" data-toggle="collapse" [attr.data-target]="'#id-'+mapIndex" aria-expanded="false" [attr.aria-controls]="'id-'+mapIndex"> - <i class="icon-file-code"></i> Definitions/{{file.key}} + <i class="icon-file-code"></i> {{file.key}} </button> <a class="accordion-delete" (click)="removeFile(mapIndex)"><i class="icon-delete"></i></a> </h5> @@ -47,7 +47,10 @@ <div [id]="'id-'+mapIndex" class="collapse" [attr.aria-labelledby]="'head-'+mapIndex" data-parent="#accordion"> <div class="card-body"> - {{file.value}} + <ace-editor [(text)]="file.value" [mode]="'json'" [autoUpdateContent]="true" + [durationBeforeCallback]="1000" [theme]="'tomorrow_night_bright'" #editor + style="height:300px;"> + </ace-editor> </div> </div> </div> @@ -90,7 +93,7 @@ </button> </div> <div class="modal-body"> - <ngx-file-drop dropZoneLabel="Drop files here" (onFileDrop)="dropped($event)" + <ngx-file-drop accept=".json" dropZoneLabel="Drop files here" (onFileDrop)="dropped($event)" (onFileOver)="fileOver($event)" (onFileLeave)="fileLeave($event)"> <ng-template ngx-file-drop-content-tmp let-openFileSelector="openFileSelector"> <div class="folder-upload"> 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 a8ba164f3..106fe3090 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,7 +1,7 @@ -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'; +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({ @@ -39,33 +39,13 @@ export class ImportsTabComponent implements OnInit { console.log(fileEntry.name); this.fileNames.add(fileEntry.name); - } /*else { - const directorEntry = droppedFile.fileEntry as FileSystemDirectoryEntry; - this.filesUnderDirectory = directorEntry.getFile(''); - // const fileEntry = droppedFile.fileEntry as FileSystemDirectoryEntry; - /* this.uploadedFile.push(droppedFile); - const formData = new FormData() - formData.append('logo', fileEntry, droppedFile.relativePath); - console.log(formData);*/ - /* // It was a directory (empty directories are added, otherwise only files) - const fileEntry = droppedFile.fileEntry as FileSystemDirectoryEntry; - console.log(droppedFile.relativePath, fileEntry); - - - const formData = new FormData(); - formData.append('logo', droppedFile, droppedFile.relativePath); - console.log(formData); - - //this.packageCreationStore.addDefinition(droppedFile.relativePath, this.getContent(droppedFile.relativePath)); -*/ - /* }*/ + } } } removeFile(fileIndex: number) { - console.log(this.uploadedFiles[fileIndex]); - console.log(this.uploadedFiles); - this.packageCreationStore.removeFileFromDefinition(this.uploadedFiles[fileIndex].name); + const filename = 'Definitions/' + this.uploadedFiles[fileIndex].name; + this.packageCreationStore.removeFileFromDefinition(filename); this.uploadedFiles.splice(fileIndex, 1); } @@ -77,23 +57,13 @@ export class ImportsTabComponent implements OnInit { console.log(event); } - /* readFileContent(file: File): string | ArrayBuffer { - const fileReader = new FileReader(); - // let content: string | ArrayBuffer = ''; - fileReader.onload = (e) => { - content = fileReader.result; - }; - fileReader.readAsText(file); - return content; - } - */ setFilesToStore() { for (const droppedFile of this.uploadedFiles) { droppedFile.file((file: File) => { const fileReader = new FileReader(); fileReader.onload = (e) => { - this.packageCreationStore.addDefinition(droppedFile.name, - this.packageCreationUtils.transformToJson(fileReader.result)); + this.packageCreationStore.addDefinition('Definitions/' + droppedFile.name, + fileReader.result.toString()); }; fileReader.readAsText(file); }); diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/mapping-models/CBAPacakge.model.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/mapping-models/CBAPacakge.model.ts index 78a9b5212..d94a64ca3 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/mapping-models/CBAPacakge.model.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/mapping-models/CBAPacakge.model.ts @@ -47,17 +47,33 @@ export class Scripts { } } + +export class Template { + public files: Map<string, string>; + + constructor() { + this.files = new Map<string, string>(); + } + + public setTemplates(key: string, value: string) { + this.files.set(key, value); + return this; + } +} + export class CBAPackage { public metaData: MetaDataTabModel; public definitions: Definition; public scripts: Scripts; + public templates: Template; constructor() { this.definitions = new Definition(); this.scripts = new Scripts(); this.metaData = new MetaDataTabModel(); + this.templates = new Template(); } diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/mapping-models/ModeType.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/mapping-models/ModeType.ts new file mode 100644 index 000000000..d6f9a978f --- /dev/null +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/mapping-models/ModeType.ts @@ -0,0 +1,5 @@ +export enum ModeType { + Scripting = 'KOTLIN_SCRIPT', + Designer = 'DEFAULT', + Generic = 'GENERIC_SCRIPT' +} 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 194e660c7..df723d58f 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 @@ -45,17 +45,6 @@ Content-Type: application/vnd.oasis.bpmn*/ export class MetaDataFile { - static getValueOfMetaData(metaDataTab: MetaDataTabModel): string { - return 'TOSCA-Meta-File-Version: 1.0.0\n' + - 'CSAR-Version: 1.0\n' + - 'Created-By: Shaaban Ebrahim <shaaban.eltanany.ext@orange.con>\n' + - 'Entry-Definitions:' + metaDataTab.entryFileName + '\n' + - 'Template-Name:' + metaDataTab.name + '\n' + - 'Template-Version:' + metaDataTab.version + '\n' + - 'Template-Type: ' + metaDataTab.mode + '\n' + - 'Template-Tags:' + metaDataTab.tags; - - } } @@ -118,4 +107,8 @@ export class FilesContent { public static putData(fileName: string, content: string) { FilesContent.mapOfFilesNamesAndContent.set(fileName, content); } + + public static clear() { + this.mapOfFilesNamesAndContent = new Map<string, string>(); + } } diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/mapping-models/template-mapping.model.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/mapping-models/template-mapping.model.ts new file mode 100644 index 000000000..400ef21c4 --- /dev/null +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/mapping-models/template-mapping.model.ts @@ -0,0 +1,11 @@ +export class Template { + public name: string; + public type: string; + public content: string; +} +export class Mapping { } + +export class TemplateMapping { + public template: Template; + public mapping: Mapping; +} diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/metadata-tab/metadata-tab.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/metadata-tab/metadata-tab.component.html index a94687b37..09393c403 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/metadata-tab/metadata-tab.component.html +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/metadata-tab/metadata-tab.component.html @@ -11,40 +11,62 @@ </span> </label> </div> + <div class="single-line"> + <label class="label-name">Dictionary Library Instance</label> + <div class="label-input"> + <select class="form-control" id="exampleFormControlSelect1"> + <option>Library Instance 1</option> + <option>Library Instance 2</option> + <option>Library Instance 3</option> + <option>Library Instance 4</option> + <option>Library Instance 5</option> + </select> + </div> + </div> </div> <div class="card creat-card"> - <div class="single-line"> - <label class="label-name">Name</label> + <div class="single-line-model error"> + <label class="label-name">Name <span>*</span></label> <div class="label-input"> <input type="input" [(ngModel)]="metaDataTab.name" placeholder="Topology name.vLB.CDS"> </div> + <div class="model-note-container error-message"> + Package name already exists with this version. Please enter a different name or enter different version number. + </div> </div> - <hr/> - <div class="single-line"> - <label class="label-name">Description</label> - <div class="label-input"> - <input type="input" [(ngModel)]="metaDataTab.description" - placeholder="Descripe the package"> - </div> - </div> - <hr/> - <div class="single-line"> - <label class="label-name">Version</label> + + <div class="single-line-model"> + <label class="label-name">Version <span>*</span></label> <div class="label-input"> <input type="input" [(ngModel)]="metaDataTab.version" (input)="validatePackageNameAndVersion()" placeholder="Example: 1.0.0"> </div> - <div><label style="color: red">{{errorMessage}}</label></div> + <div class="model-note-container error-message">{{errorMessage}}</div> </div> - <hr/> - <div class="single-line"> + <div class="single-line-model"> + <label class="label-name">Description</label> + <div class="label-input"> + <input type="input" [(ngModel)]="metaDataTab.description" + placeholder="Descripe the package"> + </div> + </div> + + <div class="single-line-model"> <label class="label-name">tags</label> <div class="label-input"> <input type="input" [(ngModel)]="metaDataTab.tags" placeholder="Ex., vDNS-CDS"> + + </div> + <div class="model-note-container tag-notes">Seprate tags with comma or space</div> + <div class="model-note-container tages-container"> + <span class="single-tage">vDNS-CDS <a href="#"> <i class="fa fa-times-circle"></i></a></span> + <span class="single-tage">vDNS-CDS <a href="#"> <i class="fa fa-times-circle"></i></a></span> + <span class="single-tage">vDNS-CDS <a href="#"> <i class="fa fa-times-circle"></i></a></span> + <span class="single-tage">vDNS-CDS <a href="#"> <i class="fa fa-times-circle"></i></a></span> </div> </div> </div> @@ -53,35 +75,58 @@ <div class="card creat-card"> <div class="single-line"> <h5 class="label-name"> - Custom key <a class="delete-key" (click)="deleteCustomKey($event)">Delete</a> + Custom key </h5> </div> - <div class="single-line"> - <label class="label-name">Name</label> + <div class="single-custom-key"> + <div class="single-line-custom-key"> + <label class="label-name"><span>1-</span> Name</label> <div class="label-input"> - <input name="key" type="input" placeholder="Enter Name"> + <input name="key" type="input" placeholder="Enter name"> </div> </div> - <hr/> - <div class="single-line"> + <div class="single-line-custom-key"> <label class="label-name">Value</label> <div class="label-input"> <input name="value" type="input" - placeholder="Enter Value"> + placeholder="Enter value"> </div> </div> + <div class="single-line-custom-key-delete"><button class="custom-key-delete"><i aria-hidden="true" class="icon-delete"></i></button></div> + </div> + <div class="single-custom-key"> + <div class="single-line-custom-key"> + <label class="label-name"><span>2-</span> Name</label> + <div class="label-input"> + <input name="key" type="input" placeholder="Enter name"> + </div> + </div> + <div class="single-line-custom-key"> + <label class="label-name">Value</label> + <div class="label-input"> + <input name="value" type="input" + placeholder="Enter value"> + </div> + </div> + <div class="single-line-custom-key-delete"><button class="custom-key-delete"><i aria-hidden="true" class="icon-delete"></i></button></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 class="single-custom-key"> + <div class="single-line-custom-key"> + <label class="label-name"><span>3-</span> Name</label> + <div class="label-input"> + <input name="key" type="input" placeholder="Enter name"> + </div> + </div> + <div class="single-line-custom-key"> + <label class="label-name">Value</label> + <div class="label-input"> + <input name="value" type="input" + placeholder="Enter value"> + </div> + </div> + </div> </div> </div> diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/metadata-tab/metadata-tab.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/metadata-tab/metadata-tab.component.ts index 710ca924a..97040ee90 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/metadata-tab/metadata-tab.component.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/metadata-tab/metadata-tab.component.ts @@ -14,7 +14,8 @@ export class MetadataTabComponent implements OnInit { counter = 0; modes: object[] = [ {name: 'Designer Mode', style: 'mode-icon icon-designer-mode'}, - {name: 'Scripting Mode', style: 'mode-icon icon-scripting-mode'}]; + {name: 'Scripting Mode', style: 'mode-icon icon-scripting-mode'}, + {name: 'Generic Script Mode', style: 'mode-icon icon-generic-script-mode'}]; private metaDataTab: MetaDataTabModel = new MetaDataTabModel(); private errorMessage: string; diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.component.css b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.component.css index e69de29bb..8b1378917 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.component.css +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.component.css @@ -0,0 +1 @@ + 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 73f917f52..906904855 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,21 +1,27 @@ <app-header></app-header> <div class="new-wrapper"> + <div class="container-fluid main-container"> <header class="page-title"> <div class="row"> - <h2 class="col m-0">CBA Packages - <span>({{numberOfPackages}} packages)</span> + <h2 class="col m-0"> + <ul class="breadcrumb-header"> + <li>CBA Packages</li> + <li>Package Name</li> + </ul> </h2> - <div class="col"> + <div class="col d-flex justify-content-end header-button-save"> + <button class="float btn btn-sm btn-outline-secondary" disabled>Discard Changes</button> + <button class="float btn btn-sm btn-primary" (click)="saveBluePrint()">Save</button> </div> </div> </header> - <div class="main-container"> - <div class="container-fluid body-container creat-container-all"> - <div class="creat-container"> + <div class="container-fluid body-container"> + + <div class="container"> <div class="creat-action-container"> <a href="#" class="action-button"> <i class="icon-clone" aria-hidden="true"></i> @@ -27,20 +33,81 @@ <span>Archive</span> </a> - <a href="#" class="action-button"> + <a href="#" class="action-button delete"> <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" (click)="saveBluePrint()">Save</button> - <button class="float btn btn-sm btn-outline-secondary" disabled>Cancel</button> + + <div class="card creat-card view-package-container"> + <div class="row"> + <div class="col-8"> + <div class="row"> + <div class="col d-flex"> + <i class="package-type-icon icon-designer-mode"></i> + <div class="package-name-container"> + <div class="row"> + <div class="col-12 package-name deployed"> + Package Name + <span>.vLB.CDS</span> + <i class="icon-deploy"></i> + </div> + <div class="col-12 package-description"> + Last modified Oct 4, 2019 03:48 PM By Ahmed Abbas + </div> + </div> + <!-- <div class="row"> + <div class="col-4"> + <div class="package-view-title">Author Name</div> + <p>Abdelmuhaimen Seaudi</p> + </div> + <div class="col-4"> + <div class="package-view-title">Author Email</div> + <p>abdelmuhaimen.seaudi@orange.com</p> + </div> + <div class="col-4"> + <div class="package-view-title">Contributions</div> + <ul class="package-contributers"> + <li> + <button type="button" class="border-fade" data-toggle="tooltip" + data-placement="bottom" + title="User name"> + <img src="/assets/img/img-user1.jpeg"> + </button> + </li> + <li> + <button type="button" data-toggle="tooltip" data-placement="bottom" + title="User name"> + <img src="/assets/img/img-user2.jpg"> + </button> + </li> + <li> + <button type="button" data-toggle="tooltip" data-placement="bottom" + title="User name"> + <img src="/assets/img/img-user3.jpg"> + </button> + </li> + <li> + <a href="">5 contributors</a> + </li> + </ul> + </div> + </div> --> + </div> + </div> + </div> + </div> + <div class="col-4 package-view-button"> + <button class="btn btn-sm btn-outline-secondary"><i class="fa fa-play-circle"></i> Deploy</button> + <button class="btn btn-sm btn-primary">Designer Mode</button> + </div> </div> - </nav> + + </div> + <nav class="row"> <!--Nav Tabs--> - <div class="col pr-0"> + <div class="col"> <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" @@ -85,12 +152,16 @@ </div> <div class="tab-pane fade" id="nav-authentication" role="tabpanel" aria-labelledby="nav-authentication-tab"> - <app-dsl-definitions-tab></app-dsl-definitions-tab> + <div class="card creat-card"> + <div class="editor-container"> + <app-dsl-definitions-tab></app-dsl-definitions-tab> + </div> + </div> </div> </div> </div> </div> </div> </div> - </div> +</div> </div> 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 cdf8cf38b..c15a5dd4f 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 @@ -20,11 +20,15 @@ limitations under the License. */ import {Component, OnInit} from '@angular/core'; -import {FilesContent, FolderNodeElement, MetaDataFile, MetaDataTabModel} from './mapping-models/metadata/MetaDataTab.model'; -// import {saveAs} from 'file-saver/dist/FileSaver'; +import {FilesContent, FolderNodeElement, MetaDataTabModel} from './mapping-models/metadata/MetaDataTab.model'; + import * as JSZip from 'jszip'; import {PackageCreationStore} from './package-creation.store'; import {Definition} from './mapping-models/CBAPacakge.model'; +import {PackageCreationModes} from './creationModes/PackageCreationModes'; +import {PackageCreationBuilder} from './creationModes/PackageCreationBuilder'; +import {PackageCreationUtils} from './package-creation.utils'; + @Component({ selector: 'app-package-creation', @@ -42,7 +46,10 @@ export class PackageCreationComponent implements OnInit { private filesData: any = []; private definition: Definition = new Definition(); - constructor(private packageCreationStore: PackageCreationStore) { + // adding initial referencing to designer mode + + + constructor(private packageCreationStore: PackageCreationStore, private packageCreationUtils: PackageCreationUtils) { } ngOnInit() { @@ -53,17 +60,12 @@ export class PackageCreationComponent implements OnInit { this.packageCreationStore.state$.subscribe( cbaPackage => { console.log(cbaPackage); - this.metaDataTab = cbaPackage.metaData; - this.setModeType(this.metaDataTab); - this.setEntryPoint(this.metaDataTab); - this.addToscaMetaDataFile(this.metaDataTab); - - this.definition = cbaPackage.definitions; - this.definition.metaDataTab = cbaPackage.metaData; - this.createDefinitionsFolder(this.definition); - // const vlbDefinition: VlbDefinition = new VlbDefinition(); - // this.fillVLBDefinition(vlbDefinition, this.metaDataTab); - + FilesContent.clear(); + let packageCreationModes: PackageCreationModes; + cbaPackage = PackageCreationModes.mapModeType(cbaPackage); + cbaPackage.metaData = PackageCreationModes.setEntryPoint(cbaPackage.metaData); + packageCreationModes = PackageCreationBuilder.getCreationMode(cbaPackage); + packageCreationModes.execute(cbaPackage, this.packageCreationUtils); this.filesData.push(this.folder.TREE_DATA); this.saveBluePrintToDataBase(); }); @@ -71,29 +73,6 @@ export class PackageCreationComponent implements OnInit { } - private addToscaMetaDataFile(metaDataTab: MetaDataTabModel) { - const filename = 'TOSCA-Metadata/TOSCA.meta'; - FilesContent.putData(filename, MetaDataFile.getValueOfMetaData(metaDataTab)); - } - -// TODO use enumerator - private setModeType(metaDataTab: MetaDataTabModel) { - if (metaDataTab.mode.startsWith('Scripting')) { - metaDataTab.mode = 'KOTLIN_SCRIPT'; - } else if (metaDataTab.mode.startsWith('Designer')) { - metaDataTab.mode = 'DEFAULT'; - } else { - metaDataTab.mode = 'GENERIC_SCRIPT'; - } - } - - private setEntryPoint(metaDataTab: MetaDataTabModel) { - if (metaDataTab.mode.startsWith('DEFAULT')) { - metaDataTab.entryFileName = 'Definitions/vLB_CDS.json'; - } else { - metaDataTab.entryFileName = ''; - } - } saveBluePrintToDataBase() { this.create(); @@ -105,7 +84,11 @@ export class PackageCreationComponent implements OnInit { create() { - this.folder.TREE_DATA.forEach((path) => { + FilesContent.getMapOfFilesNamesAndContent().forEach((key, value) => { + this.zipFile.folder(key.split('/')[0]); + this.zipFile.file(key, value); + }); + /*this.folder.TREE_DATA.forEach((path) => { const name = path.name; if (path.children) { this.zipFile.folder(name); @@ -114,37 +97,14 @@ export class PackageCreationComponent implements OnInit { if (FilesContent.getMapOfFilesNamesAndContent().has(name2)) { this.zipFile.file(name + '/' + name2, FilesContent.getMapOfFilesNamesAndContent().get(name2)); } else { + // this.zipFile.file(name2, FilesContent.getMapOfFilesNamesAndContent().get(name2)); } }); } - }); + });*/ } - private createDefinitionsFolder(definition: Definition) { - this.definition.imports.forEach((key, value) => { - FilesContent.putData(key, value); - }); - - /*const filenameEntry = 'vLB_CDS.json'; - const vlbDefinition: VlbDefinition = new VlbDefinition(); - const metadata: MetaDataTabModel = new MetaDataTabModel(); - - metadata.templateAuthor = ' lldkslds'; - metadata.templateName = ' lldkslds'; - metadata.templateTags = ' lldkslds'; - metadata.templateVersion = ' lldkslds'; - metadata['author-email'] = ' lldkslds'; - metadata['user-groups'] = ' lldkslds'; - vlbDefinition.metadata = metadata; - - vlbDefinition.imports = [{ - file: 'Definitions/data_types.json' - }]; - - const value = this.packageCreationUtils.transformToJson(vlbDefinition); - FilesContent.putData(filenameEntry, value);*/ - } } diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.store.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.store.ts index 3e37952b2..3dae2e570 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.store.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.store.ts @@ -86,4 +86,11 @@ export class PackageCreationStore extends Store<CBAPackage> { saveBluePrint(blob) { this.packageCreationService.savePackage(blob); } + + addTemplate(filePath: string, fileContent: string) { + this.setState({ + ...this.state, + templates: this.state.templates.setTemplates(filePath, fileContent) + }); + } } 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 index 1685b7eaf..824152035 100644 --- 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 @@ -5,7 +5,7 @@ <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> + href="#">Import File</a></span> </div> @@ -15,23 +15,25 @@ <label class="label-name">File</label> </div> </div> - <div *ngFor="let file of scriptsFiles | keyvalue; let mapIndex = index" id="accordion"> + <div *ngFor="let file of scriptsFiles | keyvalue; let mapIndex = index" id="accordion-script"> <div class="card"> - <div [id]="'head-'+mapIndex" class="card-header"> + <div [id]="'head-script-'+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 [attr.aria-controls]="'id-script-'+mapIndex" [attr.data-target]="'#id-script-'+mapIndex" + aria-expanded="false" class="btn btn-link collapsed" data-toggle="collapse"> + <i class="icon-file-code"></i> {{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 [attr.aria-labelledby]="'head-script-'+mapIndex" [id]="'id-script-'+mapIndex" class="collapse" + data-parent="#accordion-script"> <div class="card-body"> - {{file.value}} + <ace-editor [(text)]="file.value" [mode]="'kotlin'" [autoUpdateContent]="true" + [durationBeforeCallback]="1000" [theme]="'tomorrow_night_bright'" #editor + style="height:300px;"> + </ace-editor> </div> </div> </div> @@ -42,7 +44,7 @@ </div> <div aria-hidden="true" aria-labelledby="scriptsModalLabel" class="modal fade" id="scriptsModal" role="dialog" - tabindex="-1"> + tabindex="-1"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> @@ -52,11 +54,11 @@ </button> </div> <div class="modal-body"> - <ngx-file-drop (onFileDrop)="dropped($event)" (onFileLeave)="fileLeave($event)" - (onFileOver)="fileOver($event)" dropZoneLabel="Drop files here"> + <ngx-file-drop accept=".kt" (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"/> + <img src="assets/img/folder-upload.svg" /> </div> <div class="folder-upload-text"> Drag & Drop file @@ -72,16 +74,16 @@ <div *ngFor="let item of uploadedFiles; let i=index" class="upload-table"> <table class="table"> <thead> - <tr> - <th>Name : {{ item.name }}</th> - </tr> + <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 + type="button">Cancel </button> <button (click)="setFilesToStore()" class="btn btn-sm btn-primary" data-dismiss="modal" type="button"> Import @@ -89,4 +91,4 @@ </div> </div> </div> -</div> +</div>
\ 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.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/scripts-tab/scripts-tab.component.ts index 43b9b503c..eee291bba 100644 --- 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 @@ -1,7 +1,9 @@ -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'; +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'; +import 'ace-builds/src-noconflict/ace'; +import 'ace-builds/webpack-resolver'; @Component({ selector: 'app-scripts-tab', @@ -43,7 +45,8 @@ export class ScriptsTabComponent implements OnInit { removeFile(fileIndex: number) { console.log(this.uploadedFiles[fileIndex]); - this.packageCreationStore.removeFileFromState(this.uploadedFiles[fileIndex].name); + const filename = 'Scripts/' + this.uploadedFiles[fileIndex].name; + this.packageCreationStore.removeFileFromState(filename); this.uploadedFiles.splice(fileIndex, 1); } @@ -61,8 +64,8 @@ export class ScriptsTabComponent implements OnInit { droppedFile.file((file: File) => { const fileReader = new FileReader(); fileReader.onload = (e) => { - this.packageCreationStore.addScripts(droppedFile.name, - this.packageCreationUtils.transformToJson(fileReader.result)); + this.packageCreationStore.addScripts('Scripts/' + droppedFile.name, + fileReader.result.toString()); }; fileReader.readAsText(file); }); diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/TemplateType.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/TemplateType.ts new file mode 100644 index 000000000..17a4bfae6 --- /dev/null +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/TemplateType.ts @@ -0,0 +1,5 @@ +export enum TemplateType { + Velocity = 'vtl', + Koltin = 'kt', + Jinja = 'Unknown' +} diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.html index f6afb4929..3c92bc7c7 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.html +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.html @@ -1,64 +1,12 @@ <h6 class="create-title">CREATE</h6> <div class="card creat-card"> - <div class="single-line"> - <label class="label-name">Name</label> - <div class="label-input"> - <input type="input" placeholder="Topology name.vLB.CDS"> - </div> - </div> - <hr /> - <div class="single-line"> - <label class="label-name">Management Type</label> - <div class="label-input"> - <div class="row"> - <div class="col-md-4 d-flex"> - <a class="select-type active" href="#"> - <div class="select-type-icon"><span class="icon-template-mapping"></span></div> - <div>Template And Support Mapping</div> - </a> - </div> - <div class="col-md-4 d-flex"> - <a class="select-type" href="#"> - <div class="select-type-icon"><span class="icon-template"></span></div> - <div>Template Only</div> - </a> - </div> - <div class="col-md-4 d-flex"> - <a class="select-type" href="#"> - <div class="select-type-icon"><span class="icon-mapping"></span></div> - <div>Mapping Only</div> - </a> - - </div> - </div> + <div class="single-line-model"> + <label class="label-name">Name + <span _ngcontent-uew-c3="">*</span> + </label> - </div> - </div> - <hr /> - <div class="single-line"> - <label class="label-name">Type</label> <div class="label-input"> - <label name="trst"> - <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value=Velcoity> - - <span> - Velcoity - </span> - </label> - <label name="trst"> - <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value=Velcoity> - - <span> - Jinja - </span> - </label> - <label name="trst"> - <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value=Velcoity> - - <span> - Kotlin - </span> - </label> + <input type="input" [(ngModel)]="fileName" placeholder="Topology name.vLB.CDS"> </div> </div> </div> @@ -69,7 +17,7 @@ <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"> + aria-controls="collapseOne"> 1. Create Template </button> @@ -78,13 +26,42 @@ <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 class="single-line"> + <label class="label-name">Template Type</label> + <div class="label-input"> + <label name="trst"> + <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" + value=Velcoity> + + <span> + Velcoity + </span> + </label> + <label name="trst"> + <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" + value=Velcoity> + + <span> + Jinja + </span> + </label> + <label name="trst"> + <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" + value=Velcoity> + + <span> + Kotlin + </span> + </label> + </div> + </div> + <div class="create-template-import">Use the editor to add parameters or you can also <a href="#" + data-toggle="modal" + data-target="#exampleModal">Import + File</a></div> + <div class="editor-container"> + <app-dsl-definitions-tab></app-dsl-definitions-tab> + </div> </div> </div> </div> @@ -92,22 +69,101 @@ <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"> + aria-expanded="false" aria-controls="collapseTwo"> 2. Manage Mapping </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. + <h6 class="text-center">Select a source to load config parameters</h6> + <div class="text-center"> + <a href="#" class="mapping-source-load"> + <i class="icon-current-template"></i> + <br/> + <span>Use Current Template Instance</span> + </a> + <a href="#" data-toggle="modal" data-target="#exampleModal" class="mapping-source-load"> + <i class="icon-Upload-attribute"></i> + <br/> + <div>Upload attribute list</div> + <div class="source-load-note">(Should be comma delimited file)</div> + </a> + <!-- <a href="#" class="mapping-source-load"> + <i class="icon-import-cds"></i> + <br/> + <span>Import from SDC Model</span> + </a> --> + </div> + + <div class="table-container"> + + + </div> </div> + + </div> + + + </div> + + <div class="template-mapping-action"> + <button class="btn btn-sm btn-outline-secondary">Cancel</button> + <button class="btn btn-sm btn-primary">Finish</button> </div> </div> -</div>
\ No newline at end of file +</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"> + <ngx-file-drop dropZoneLabel="Drop files here" (onFileDrop)="dropped($event)" + (onFileOver)="fileOver($event)" (onFileLeave)="fileLeave($event)"> + <ng-template ngx-file-drop-content-tmp let-openFileSelector="openFileSelector"> + <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 type="button" class="btn btn-sm btn-primary" (click)="openFileSelector()">Browse + Files + </button> + </div> + <div class="folder-upload-type">Allowed file type: json</div> + </ng-template> + </ngx-file-drop> + <div class="upload-table" *ngFor="let item of uploadedFiles; let i=index"> + <table class="table"> + <thead> + <tr> + <th>Name : {{ item.name }}</th> + </tr> + </thead> + </table> + </div> + </div> + + <div class="modal-footer"> + <button type="button" class="btn btn-sm btn-secondary" data-dismiss="modal" + (click)="resetTheUploadedFiles()">Cancel + </button> + <button type="button" class="btn btn-sm btn-primary" data-dismiss="modal" + (click)="setFilesToStore()"> + Import + </button> + </div> + </div> + </div> +</div> diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.ts index 3a938c5ae..752bd510b 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.ts @@ -1,15 +1,68 @@ -import { Component, OnInit } from '@angular/core'; +import {Component, EventEmitter, OnInit, Output} from '@angular/core'; +import {FileSystemFileEntry, NgxFileDropEntry} from 'ngx-file-drop'; +import {PackageCreationStore} from '../../package-creation.store'; @Component({ - selector: 'app-templ-mapp-creation', - templateUrl: './templ-mapp-creation.component.html', - styleUrls: ['./templ-mapp-creation.component.css'] + selector: 'app-templ-mapp-creation', + templateUrl: './templ-mapp-creation.component.html', + styleUrls: ['./templ-mapp-creation.component.css'] }) export class TemplMappCreationComponent implements OnInit { - constructor() { } + public uploadedFiles: FileSystemFileEntry[] = []; + private fileNames: Set<string> = new Set(); - ngOnInit() { - } + public files: NgxFileDropEntry[] = []; + fileName: any; + constructor(private packageCreationStore: PackageCreationStore) { + } + + 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); + this.fileNames.add(fileEntry.name); + + } + } + } + + removeFile(fileIndex: number) { + /*const filename = 'Definitions/' + this.uploadedFiles[fileIndex].name; + this.packageCreationStore.removeFileFromDefinition(filename); + this.uploadedFiles.splice(fileIndex, 1);*/ + } + + setFilesToStore() { + for (const droppedFile of this.uploadedFiles) { + droppedFile.file((file: File) => { + const fileReader = new FileReader(); + fileReader.onload = (e) => { + this.packageCreationStore.addTemplate('Templates/' + this.fileName, + fileReader.result.toString()); + }; + fileReader.readAsText(file); + }); + + } + } + + public fileOver(event) { + console.log(event); + } + + public fileLeave(event) { + console.log(event); + } + + resetTheUploadedFiles() { + this.uploadedFiles = []; + } } diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-listing/templ-mapp-listing.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-listing/templ-mapp-listing.component.html index ef233ad99..ddf06c824 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-listing/templ-mapp-listing.component.html +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-listing/templ-mapp-listing.component.html @@ -1,6 +1,156 @@ -<h6>Basic List Template and mapping</h6> -<div> - <a (click)="openCreationView()" class="action-button"> - <span>Create</span> + + + <a (click)="openCreationView()" class="create-template-mapping-button"> + <i class="fa fa-plus"></i> <span>Create</span> </a> -</div>
\ No newline at end of file + + +<div class="template-mapping-accordion"> + <div id="accordion"> + <div class="card"> + <div class="card-header" id="headingThree"> + <h5 class="mb-0 d-flex justify-content-between"> + <button class="btn btn-link" data-toggle="collapse" data-target="#collapseThree" aria-expanded="true" + aria-controls="collapseThree"> + Template and Mapping List + </button> + + </h5> + </div> + + <div id="collapseThree" class="collapse show" aria-labelledby="headingThree" data-parent="#accordion"> + <div class="card-body max-height-list" *ngFor="let file of templates.files | keyvalue; let mapIndex = index"> + <div class="row"> + <div class="col"> + <a href="#" class="template-mapping-list active">{{file.key}} + <span>Mapping</span> + <span>Template</span> + </a> + </div> + <!-- <div class="col"> + <a href="#" class="template-mapping-list">vf-module-1 + <span>Mapping</span> + </a> + </div> + <div class="col"> + <a href="#" class="template-mapping-list">vf-module-2 + <span>Mapping</span> + </a> + </div>--> + </div> + <!-- <div class="row"> + <div class="col"> + <a href="#" class="template-mapping-list">hostname + <span>Mapping</span> + <span>Template</span> + </a> + </div> + <div class="col"> + <a href="#" class="template-mapping-list">vf-module-1 + <span>Mapping</span> + </a> + </div> + <div class="col"> + <a href="#" class="template-mapping-list">vf-module-2 + <span>Mapping</span> + </a> + </div> + </div> + <div class="row"> + <div class="col"> + <a href="#" class="template-mapping-list">hostname + + <span>Template</span> + </a> + </div> + <div class="col"> + <a href="#" class="template-mapping-list">vf-module-1 + <span>Template</span> + </a> + </div> + <div class="col"> + <a href="#" class="template-mapping-list">vf-module-2 + <span>Mapping</span> + <span>Template</span> + </a> + </div> + </div> + <div class="row"> + <div class="col"> + <a href="#" class="template-mapping-list">hostname + + <span>Template</span> + </a> + </div> + <div class="col"> + <a href="#" class="template-mapping-list">vf-module-1 + <span>Mapping</span> + </a> + </div> + <div class="col"> + <a href="#" class="template-mapping-list">vf-module-2 + <span>Mapping</span> + </a> + </div> + </div> + <div class="row"> + <div class="col"> + <a href="#" class="template-mapping-list">hostname + <span>Mapping</span> + <span>Template</span> + </a> + </div> + <div class="col"> + <a href="#" class="template-mapping-list">vf-module-1 + <span>Mapping</span> + </a> + </div> + <div class="col"> + <a href="#" class="template-mapping-list">vf-module-2 + <span>Mapping</span> + </a> + </div> + </div> + <div class="row"> + <div class="col"> + <a href="#" class="template-mapping-list">hostname + <span>Mapping</span> + <span>Template</span> + </a> + </div> + <div class="col"> + <a href="#" class="template-mapping-list">vf-module-1 + <span>Mapping</span> + </a> + </div> + <div class="col"> + <a href="#" class="template-mapping-list">vf-module-2 + <span>Mapping</span> + </a> + </div> + </div> + <div class="row"> + <div class="col"> + <a href="#" class="template-mapping-list">hostname + + <span>Template</span> + </a> + </div> + <div class="col"> + <a href="#" class="template-mapping-list">vf-module-1 + <span>Template</span> + </a> + </div> + <div class="col"> + <a href="#" class="template-mapping-list">vf-module-2 + <span>Mapping</span> + <span>Template</span> + </a> + </div> + </div>--> + </div> + </div> + </div> + + </div> +</div> diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-listing/templ-mapp-listing.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-listing/templ-mapp-listing.component.ts index 525e58128..5cb41c35e 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-listing/templ-mapp-listing.component.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-listing/templ-mapp-listing.component.ts @@ -1,20 +1,29 @@ -import { Component, OnInit, Output, EventEmitter } from '@angular/core'; +import {Component, EventEmitter, OnInit, Output} from '@angular/core'; +import {PackageCreationStore} from '../../package-creation.store'; +import {Template} from '../../mapping-models/CBAPacakge.model'; @Component({ - selector: 'app-templ-mapp-listing', - templateUrl: './templ-mapp-listing.component.html', - styleUrls: ['./templ-mapp-listing.component.css'] + selector: 'app-templ-mapp-listing', + templateUrl: './templ-mapp-listing.component.html', + styleUrls: ['./templ-mapp-listing.component.css'] }) export class TemplMappListingComponent implements OnInit { - @Output() showCreationViewParentNotification = new EventEmitter<any>(); + @Output() showCreationViewParentNotification = new EventEmitter<any>(); + private templates: Template; - constructor() { } + constructor(private packageCreationStore: PackageCreationStore) { + this.packageCreationStore.state$.subscribe(cba => { + if (cba.templates) { + this.templates = cba.templates; + } + }); + } - ngOnInit() { - } + ngOnInit() { + } - openCreationView() { - this.showCreationViewParentNotification.emit('tell parent to open create views'); - } + openCreationView() { + this.showCreationViewParentNotification.emit('tell parent to open create views'); + } } 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 f45b2fed7..7f6c0a6f4 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,11 +7,11 @@ </div> <div class="card-footer row"> <div class="col"> - <a routerLink="/packages/createPackage" role="button" aria-pressed="true" class="btn-create-package float">Create Package + <a routerLink="/packages/createPackage" role="button" aria-pressed="true" class="btn-create-package float">Create </a> </div> <div class="col"> - <a href="#" role="button" aria-pressed="true" class="btn-import-package float">Import Package + <a href="#" role="button" aria-pressed="true" class="btn-import-package float">Import </a> </div> </div> diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/source-editor/source-editor.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/source-editor/source-editor.component.html index 24423cfac..2f647f9b9 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/source-editor/source-editor.component.html +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/source-editor/source-editor.component.html @@ -1 +1 @@ -<ace-editor (textChanged)="onChange($event)" [(text)]="Data" [mode]="lang" #editor style="height:150px;"></ace-editor> +<ace-editor (textChanged)="onChange($event)" [(text)]="text" [mode]="lang" #editor style="height:150px;"></ace-editor>
\ No newline at end of file diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/source-editor/source-editor.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/source-editor/source-editor.component.ts index a63dfa7e0..8f4c376a3 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/source-editor/source-editor.component.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/source-editor/source-editor.component.ts @@ -1,4 +1,5 @@ -import {AfterViewInit, Component, EventEmitter, Input, OnInit, Output, ViewChild} from '@angular/core'; +import { AfterViewInit, Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core'; +import { AceEditorComponent } from 'ng2-ace-editor'; // import 'brace/ext/searchbox'; // import 'ace-builds/webpack-resolver'; // import 'brace'; @@ -13,12 +14,10 @@ import {AfterViewInit, Component, EventEmitter, Input, OnInit, Output, ViewChild export class SourceEditorComponent implements OnInit, AfterViewInit { - @Input() Data: string; - @Output() DataChange = new EventEmitter(); + @Input() text: string; + @Output() textChange = new EventEmitter(); @Input() lang: string; - mode = 'json'; - @ViewChild('editor', {static: false}) editor; - text = ''; + @ViewChild('editor', { static: false }) editor: AceEditorComponent; ngOnInit(): void { // throw new Error("Method not implemented."); @@ -26,10 +25,18 @@ export class SourceEditorComponent implements OnInit, AfterViewInit { ngAfterViewInit() { - this.editor.setTheme('eclipse'); + console.log(this.lang); + this.editor.setTheme('eclipse'); this.editor.getEditor().setOptions({ - enableBasicAutocompletion: true + enableBasicAutocompletion: true, + // fontSize: '14pt', + // maxLines: 4096, + // behavioursEnabled: true, + // wrapBehavioursEnabled: true, + // showPrintMargin: true, + // indentedSoftWrap: true, + // wrap: true, }); this.editor.getEditor().commands.addCommand({ @@ -41,9 +48,7 @@ export class SourceEditorComponent implements OnInit, AfterViewInit { }); } - onChange($event: {}) { - console.log('editor action'); - console.log(this.Data); - console.log($event); + onChange(editor) { + this.textChange.emit(this.text); } } |