diff options
Diffstat (limited to 'cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary')
4 files changed, 122 insertions, 90 deletions
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/dictionary-metadata/dictionary-metadata.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/dictionary-metadata/dictionary-metadata.component.html index 943707e6e..b60bc328a 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/dictionary-metadata/dictionary-metadata.component.html +++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/dictionary-metadata/dictionary-metadata.component.html @@ -21,7 +21,7 @@ <div class="single-line-model"> <label class="label-name">Name</label> <div class="label-input"> - <input type="input" [(ngModel)]="metaDataTab.name" placeholder="Topology name.vLB.CDS"> + <input type="input" [(ngModel)]="metaDataTab.name" placeholder="Dictionary Name"> </div> <!-- <div class="model-note-container error-message"> Package name already exists with this version. Please enter a different name or enter different version @@ -74,18 +74,17 @@ <input type="input" [(ngModel)]="metaDataTab.libraryInstance" placeholder="Library Instance"> </div> </div> --> - <!-- <div class="single-line-model"> - <label class="label-name">Derived From</label> + <div class="single-line-model"> + <label class="label-name">Updated By</label> <div class="label-input"> - <input type="input" [(ngModel)]="metaDataTab.derivedFrom" placeholder="Derived From"> + <input type="input" [(ngModel)]="metaDataTab['updated-by']" placeholder="Updated By"> </div> - </div> --> + </div> <div class="single-line-model"> <label class="label-name">Tags</label> <div class="label-input"> - <input type="input" (keyup.enter)="addTag($event)" - placeholder="Ex., vDNS-CDS"> + <input type="input" (keyup.enter)="addTag($event)" placeholder="Ex., vDNS-CDS"> </div> <div class="model-note-container tag-notes">Seprate tags with comma or space</div> diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/resource-dictionary-creation.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/resource-dictionary-creation.component.html index 26857e600..00d6e31d3 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/resource-dictionary-creation.component.html +++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/resource-dictionary-creation.component.html @@ -115,7 +115,7 @@ autofocus #nameit (focusout)="saveDictionaryToStore()">METADATA</a> <a class="nav-item nav-link" id="nav-source-tab" data-toggle="tab" href="#nav-source" role="tab" aria-controls="nav-source" aria-selected="false">SOURCES</a> - <a class="nav-item nav-link edit-button" id="nav-editor-tab" data-toggle="tab" + <a class="nav-item nav-link edit-button" (click)="saveDictionaryToStore()" id="nav-editor-tab" data-toggle="tab" href="#nav-editor" role="tab" aria-controls="nav-editor" aria-selected="false">EDITOR MODE</a> </div> diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/sources-template/sources-template.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/sources-template/sources-template.component.html index 14a0b6668..3eddaa79a 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/sources-template/sources-template.component.html +++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/sources-template/sources-template.component.html @@ -32,18 +32,20 @@ (change)="onChange(item, $event.target.checked)"> {{item.name}} --> <div class="custom-control custom-checkbox"> - <input type="checkbox" class="custom-control-input" id="customControlValidation1" required> - <label class="custom-control-label" for="customControlValidation1">{{item.name}}</label> + <input [disabled]="sourcesOptions.has(item.name)" [checked]="tempSources.has(item.name)" + (change)="setTempSources($event,item)" type="checkbox" class="custom-control-input" + id="input-{{item.name}}"> + <label class="custom-control-label" for="input-{{item.name}}">{{item.name}}</label> </div> </div> </div> </div> <div class="row sourceOptionActions"> - <div class="col"> + <div (click)="selectAll()" class="col"> <a>Select all</a> </div> <div class="col"> - <button class="btn">Add to list</button> + <button (click)="addSources()" class="btn">Add to list</button> </div> </div> </div> @@ -54,71 +56,30 @@ <h5>Sources List</h5> <div class="accordion sourceListItems" id="accordionExample"> - <div class="card"> + <div class="card" *ngFor="let item of sourcesOptions | keyvalue; let i=index"> <div class="card-header" id="headingOne"> <h2 class="mb-0"> - <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" - aria-expanded="true" aria-controls="collapseOne"> + <button class="btn btn-link" type="button" data-toggle="collapse" attr.data-target="#collapse-{{item.key}}" + aria-expanded="true" attr.aria-controls="collapse-{{item.key}}"> <div class="custom-control custom-checkbox"> - <input type="checkbox" class="custom-control-input" id="customControlValidation1" required> - <label class="custom-control-label" for="customControlValidation1"></label> + <input (change)="setToDeleteSources($event,item)" type="checkbox" class="custom-control-input" + id="current-{{item.key}}" required> + <label class="custom-control-label" for="current-{{item.key}}"></label> </div> - Collapsible Group Item #1 + {{item.key}} </button> </h2> </div> - <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample"> - <div class="card-body"> - Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf - moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. - Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda - shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea - proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim - aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. - </div> - </div> - </div> - <div class="card"> - <div class="card-header" id="headingTwo"> - <h2 class="mb-0"> - <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" - aria-expanded="false" aria-controls="collapseTwo"> - Collapsible Group Item #2 - </button> - </h2> - </div> - <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample"> + <div id="collapse-{{item.key}}" class="collapse" aria-labelledby="headingOne" data-parent="#accordionExample"> <div class="card-body"> - Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf - moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. - Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda - shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea - proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim - aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. - </div> - </div> - </div> - <div class="card"> - <div class="card-header" id="headingThree"> - <h2 class="mb-0"> - <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" - aria-expanded="false" aria-controls="collapseThree"> - Collapsible Group Item #3 - </button> - </h2> - </div> - <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample"> - <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. + <ace-editor [mode]="'json'" [autoUpdateContent]="true" [durationBeforeCallback]="1000" + [theme]="'tomorrow_night_bright'" #editor style="height:300px;"> + </ace-editor> </div> </div> </div> + </div> <!-- <div cdkDropList #doneList="cdkDropList" [cdkDropListData]="sourcesOptions" [cdkDropListConnectedTo]="[todoList]" @@ -141,7 +102,7 @@ </div> --> <div class="row deleteSource"> <div class="col"> - <a type="submit" class="">Delete Source</a> + <a type="button" (click)="deleteSource()" class="">Delete Source</a> </div> </div> </div> diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/sources-template/sources-template.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/sources-template/sources-template.component.ts index 1a950163e..25b81994a 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/sources-template/sources-template.component.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/sources-template/sources-template.component.ts @@ -34,16 +34,19 @@ export class SourcesTemplateComponent implements OnInit { lang = 'json'; sources = {}; option = []; - sourcesOptions = []; textValue: any; selectItem: boolean; - ddSource = []; + // ddSource = []; checked: boolean; searchText = ''; text = ''; selectedArray = []; metaDataTab: MetaData = new MetaData(); + tempSources = new Map(); + toDeleteSource = new Map<string, any>(); + sourcesOptions = new Map<string, any>(); + constructor( private sourcesStore: SourcesStore, private dictionaryCreationService: DictionaryCreationService, @@ -58,9 +61,9 @@ export class SourcesTemplateComponent implements OnInit { // console.log(sources); this.sources = sources[0]; // this.sources = { - // "input": "source-input", "rest": "source-rest", "default":"source-default", "capability": "source-capability", - // "sdnc": "source-rest", "vault-data": "source-rest", "processor-db": "source-db", "aai-data": "source-rest", - // "script": "source-capability" + // "input": "source-input", "rest": "source-rest", "default": "source-default", "capability": "source-capability", + // "sdnc": "source-rest", "vault-data": "source-rest", "processor-db": "source-db", "aai-data": "source-rest", + // "script": "source-capability" // }; for (const key in this.sources) { if (key) { @@ -95,9 +98,13 @@ export class SourcesTemplateComponent implements OnInit { } saveSorcesDataToStore() { - console.log(this.ddSource); + const ddSource = []; + for (const key of this.sourcesOptions.keys()) { + ddSource.push(this.sourcesOptions.get(key)); + } + console.log(ddSource); this.metaDataTab.sources = {}; - for (const obj of this.ddSource) { + for (const obj of ddSource) { this.metaDataTab.sources = { ...this.metaDataTab.sources, ...obj }; } // this.metaDataTab.sources = { ...this.ddSource } @@ -105,39 +112,104 @@ export class SourcesTemplateComponent implements OnInit { this.dictionaryCreationStore.changeMetaData(this.metaDataTab); } - drop(event: CdkDragDrop<string[]>) { - console.log('-------------'); - // console.log(event); + setTempSources(event, item) { + console.log(event.target.checked); + if (event.target.checked) { + this.tempSources.set(item.name, item); + } else { + this.tempSources.delete(item.name); + } + console.log(this.tempSources); + } - if (event.previousContainer === event.container) { - moveItemInArray(event.container.data, event.previousIndex, event.currentIndex); + selectAll() { + if (this.tempSources.size === 0) { + for (const option of this.option) { + if (!this.sourcesOptions.has(option.name)) { + this.tempSources.set(option.name, option); + } + } } else { - transferArrayItem(event.previousContainer.data, - event.container.data, - event.previousIndex, - event.currentIndex); + this.tempSources = new Map<string, any>(); } + } - console.log(this.sourcesOptions); - console.log(this.sources); + setToDeleteSources(event, item) { + console.log(event.target.checked); + if (event.target.checked) { + this.toDeleteSource.set(item.key, item); + } else { + this.toDeleteSource.delete(item.key); + } - this.ddSource = []; + } - const originalSources = this.sourcesOptions; - for (const key of originalSources) { + addSources() { + // this.tempSources + const originalSources = this.tempSources; + for (const key of originalSources.keys()) { /* tslint:disable:no-string-literal */ - this.ddSource.push({ - [key.name]: { - type: key.value, + this.sourcesOptions.set(key, { + [key]: { + type: originalSources.get(key).value, properties: {} } }); } + console.log(this.sourcesOptions); + this.tempSources.clear(); + this.saveSorcesDataToStore(); + } + + deleteSource() { + console.log(this.toDeleteSource); + for (const key of this.toDeleteSource.keys()) { + console.log(key); + this.sourcesOptions.delete(key); + } + this.toDeleteSource = new Map<string, any>(); this.saveSorcesDataToStore(); } + // drop(event: CdkDragDrop<string[]>) { + // console.log('-------------'); + // // console.log(event); + + // if (event.previousContainer === event.container) { + // moveItemInArray(event.container.data, event.previousIndex, event.currentIndex); + // } else { + // transferArrayItem(event.previousContainer.data, + // event.container.data, + // event.previousIndex, + // event.currentIndex); + // } + + // console.log(this.sourcesOptions); + // console.log(this.sources); + + // this.ddSource = []; + + // const originalSources = this.sourcesOptions; + // for (const key of originalSources) { + // /* tslint:disable:no-string-literal */ + // this.ddSource.push({ + // [key.name]: { + // type: key.value, + // properties: {} + // } + // }); + + // } + + // this.saveSorcesDataToStore(); + // } + + getMapKey(map) { + return Object.assign({}, map.keys()); + } + searchDictionary(event: any) { this.searchQuery = event.target.value; this.searchQuery = this.searchQuery.trim(); |