diff options
author | swapnalipode <sp00501638@techmahindra.com> | 2020-05-02 01:38:16 +0530 |
---|---|---|
committer | swapnalipode <sp00501638@techmahindra.com> | 2020-05-02 01:44:15 +0530 |
commit | 2b71782556d2c84c5153113113a8d44f96d717f2 (patch) | |
tree | c1908ea020da555e9f58daa0b9503105b94bcb15 /cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/sources-template | |
parent | 6b6ac70007ba2b52c6beb8c0d22453a628c891f3 (diff) |
Resource Dictionary Creation
Adding Resource Dictionary Creation
Change-Id: Ic53018f406ba2cc1f8c878017c816bfce316a362
Issue-ID: CCSDK-1280
Signed-off-by: swapnalipode <sp00501638@techmahindra.com>
Diffstat (limited to 'cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/sources-template')
5 files changed, 506 insertions, 0 deletions
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/sources-template/sources-template.component.css b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/sources-template/sources-template.component.css new file mode 100644 index 000000000..7799d915f --- /dev/null +++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/sources-template/sources-template.component.css @@ -0,0 +1,208 @@ +/* +* ============LICENSE_START======================================================= +* ONAP : CDS +* ================================================================================ +* Copyright (C) 2020 TechMahindra +*================================================================================= +* Licensed under the Apache License, Version 2.0 (the "License"); +* you may not use this file except in compliance with the License. +* You may obtain a copy of the License at +* +* http://www.apache.org/licenses/LICENSE-2.0 +* +* Unless required by applicable law or agreed to in writing, software +* distributed under the License is distributed on an "AS IS" BASIS, +* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +* See the License for the specific language governing permissions and +* limitations under the License. +* ============LICENSE_END========================================================= +*/ +.source{ + left: 20px; + width: 72%; +} +.source1{ + width: 25%; + background-color:#F4F9FE; +} +h5{ + padding-top: 10px; + padding-left: 10px; + background-color:white; + height: 40px; + width: 100%; +} +.mat-form-field + .mat-form-field { + margin-left: 8px; +} +mat-expansion-panel-header{ + background-color:#E0E8F2; +} +mat-panel-title{ + color:#1B3E6F; +} +mat-expansion-panel{ + border-radius: 0px; + border-left: none; +} +.example-list .card{ + margin-bottom: 10px !important; +} +.expansion-panel{ + border: none; + background: white; + border-radius: 0px; + overflow: hidden; + display: block; + width: 100%; + color:#1B3E6F; + } +.example-container { + width: 230px; + max-width: 100%; + margin: 10px 10px 15px 0; + display: inline-block; + vertical-align: top; + border-radius: 2px; + height: 260px; + background-color:#F4F9FE; + } + .example-container2 { + width: 630px; + max-width: 100%; + margin: 10px 10px 5px 0; + display: inline-block; + vertical-align: top; + border-radius: 2px; + height: 300px; + background-color:#F4F9FE; + } + + .example-list { + min-height: 12px; + border-radius: 0px; + overflow: hidden; + display: block; + margin: 5px; + overflow-y:scroll; + overflow-x:hidden; + margin-left: 15px; + width: 195px; + margin-top: 15px; + } + + .example-list1 { + min-height: 12px; + border-radius: 0px; + overflow: hidden; + display: block; + margin: 5px; + overflow-y:hidden; + overflow-x:hidden; + } + + .checkbox{ + margin-left: 11%; + } + .example-box { + padding: 2px 1px; + display: flex; + flex-direction: row; + align-items: center; + justify-content: left; + box-sizing: border-box; + cursor: move; + font-size: 14px; + + } + .example-box1 { + padding: 1px 1px; + display: flex; + flex-direction: row; + align-items: center; + justify-content: left; + box-sizing: border-box; + cursor: move; + font-size: 14px; + border-radius: 0px !important; + } + + .cdk-drag-preview { + box-sizing: border-box; + border-radius: 4px; + box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), + 0 8px 10px 1px rgba(0, 0, 0, 0.14), + 0 3px 14px 2px rgba(0, 0, 0, 0.12); + } + + .cdk-drag-placeholder { + opacity: 0; + } + + .cdk-drag-animating { + transition: transform 250ms cubic-bezier(0, 0, 0.2, 1); + } + + .example-box:last-child { + border: none; + } + + .example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder) { + transition: transform 250ms cubic-bezier(0, 0, 0.2, 1); + } + +.searchText{ + width: 180px; + /* border-top: solid 2px #F4F9FE; */ + border: 0px; + color: #1B3E6F; + font-size: 13px; + margin-top: 2px; +} +.searchBox{ + position: relative; + top: 0%; + right: 0%; + height: 35px; + border-top: solid 2px #F4F9FE; + width: 100%; + margin-left:0px; + background-color:white; +} + +.searchButton1{ + float: left; + padding-left: 0 !important; + height: 30px; + width:30px; + background: url(src/assets/img/icon-search.svg) center center no-repeat; + border: 0 !important; + margin-right:0px; +} +.action-button1{ + margin-left:50px; + padding: 1px 6px; + box-shadow: none; + color:white; + font-size: 14px; + height: 25px; + background-color:#007bff; + border-radius:16px; + border:solid 0.5px #ededed; +} +.footer{ + margin: 1px 0px; +} +.delete{ + color: red; + font-size: 14px; + margin: 2px; +} +.footer input{ + margin: 6px 0px 1px 5px; +} +.select-button{ + color: #007bff; + font-size: 14px; + margin: 2px; +}
\ No newline at end of file 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 new file mode 100644 index 000000000..b274ce95d --- /dev/null +++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/sources-template/sources-template.component.html @@ -0,0 +1,85 @@ +<!--/* +* ============LICENSE_START======================================================= +* ONAP : CDS +* ================================================================================ +* Copyright (C) 2020 TechMahindra +*================================================================================= +* Licensed under the Apache License, Version 2.0 (the "License"); +* you may not use this file except in compliance with the License. +* You may obtain a copy of the License at +* +* http://www.apache.org/licenses/LICENSE-2.0 +* +* Unless required by applicable law or agreed to in writing, software +* distributed under the License is distributed on an "AS IS" BASIS, +* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +* See the License for the specific language governing permissions and +* limitations under the License. +* ============LICENSE_END========================================================= +*/--> +<div class="col-11"> + <div class= "row "> + <div class="card creat-card source1"> + <h5 class="label-name"> Sources Options</h5> + <div class="searchBox row"><i class="searchButton1 col-1" aria-hidden="true"></i> + <input class="searchText col-8" [(ngModel)]="searchText" type="input" placeholder="filter sources"> + </div> + + <div class="example-container"> + <div + cdkDropList + #todoList="cdkDropList" + [cdkDropListData]="option" + [cdkDropListConnectedTo]="[doneList]" + class="example-list" + (cdkDropListDropped)="drop($event)"> + <div class="example-box card creat-card" *ngFor="let item of option| search :searchText" cdkDrag> + <input type="checkbox" class="checkbox" [(ngModel)]="checked" (change)="onChange(item, $event.target.checked)"> + {{item.name}} + </div> + + </div> + + </div> + <div class="footer row"> + <a class="select-button col-sm-05">Select all</a> + <button class="action-button1 col-sm-04" >Add to list</button> + </div> + </div> + + <div class="card creat-card source"> + <h5 class="label-name">Sources List</h5> + <div class="example-container2 card creat-card"> + <div + cdkDropList + #doneList="cdkDropList" + [cdkDropListData]="sourcesOptions" + [cdkDropListConnectedTo]="[todoList]" + class="example-list1" + (cdkDropListDropped)="drop($event)"> + + <div class="example-box1" *ngFor="let item of sourcesOptions" cdkDrag> + <input type="checkbox" value="item.name"> + <mat-expansion-panel class="expansion-panel"> + <mat-expansion-panel-header [collapsedHeight]="'23px'" [expandedHeight]="'23px'"> + <mat-panel-title> + {{item.name}} + </mat-panel-title> + </mat-expansion-panel-header> + <br> + <ace-editor [(text)]=item.value [mode]="'javascript'" [autoUpdateContent]="true" + [durationBeforeCallback]="1000" (textChanged)="textChanged($event,item)" [theme]="'tomorrow_night_bright'" #editor style="height:300px;"> + </ace-editor> + </mat-expansion-panel> + </div> + + </div> + + </div> + <div> + <a type="submit" class="delete">Delete</a> + </div> + </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.spec.ts b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/sources-template/sources-template.component.spec.ts new file mode 100644 index 000000000..e9bd4ff43 --- /dev/null +++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/sources-template/sources-template.component.spec.ts @@ -0,0 +1,44 @@ +/* +* ============LICENSE_START======================================================= +* ONAP : CDS +* ================================================================================ +* Copyright (C) 2020 TechMahindra +*================================================================================= +* Licensed under the Apache License, Version 2.0 (the "License"); +* you may not use this file except in compliance with the License. +* You may obtain a copy of the License at +* +* http://www.apache.org/licenses/LICENSE-2.0 +* +* Unless required by applicable law or agreed to in writing, software +* distributed under the License is distributed on an "AS IS" BASIS, +* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +* See the License for the specific language governing permissions and +* limitations under the License. +* ============LICENSE_END========================================================= +*/ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { SourcesTemplateComponent } from './sources-template.component'; + +describe('SourcesTemplateComponent', () => { + let component: SourcesTemplateComponent; + let fixture: ComponentFixture<SourcesTemplateComponent>; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ SourcesTemplateComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(SourcesTemplateComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); 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 new file mode 100644 index 000000000..4a4f215cd --- /dev/null +++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/sources-template/sources-template.component.ts @@ -0,0 +1,109 @@ +/* +* ============LICENSE_START======================================================= +* ONAP : CDS +* ================================================================================ +* Copyright (C) 2020 TechMahindra +*================================================================================= +* Licensed under the Apache License, Version 2.0 (the "License"); +* you may not use this file except in compliance with the License. +* You may obtain a copy of the License at +* +* http://www.apache.org/licenses/LICENSE-2.0 +* +* Unless required by applicable law or agreed to in writing, software +* distributed under the License is distributed on an "AS IS" BASIS, +* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +* See the License for the specific language governing permissions and +* limitations under the License. +* ============LICENSE_END========================================================= +*/ +import { Component, OnInit} from '@angular/core'; +import { CdkDragDrop, moveItemInArray, transferArrayItem } from '@angular/cdk/drag-drop'; +import { SourcesStore } from './sources.store'; + +@Component({ + selector: 'app-sources-template', + templateUrl: './sources-template.component.html', + styleUrls: ['./sources-template.component.css'] +}) +export class SourcesTemplateComponent implements OnInit { + private searchQuery = ''; + lang = 'json'; + sources = []; + option = []; + sourcesOptions = []; + textValue: any; + selectItem: boolean; + ddSource = []; + checked: boolean; + selectedArray = []; + constructor(private sourcesStore: SourcesStore) { + this.sourcesStore.state$.subscribe(sources => { + this.sources = sources.sources; + for (const key in this.sources) { + if (key) { + const sourceObj = { name: key, value: JSON.stringify(this.sources[key] )}; + this.option.push(sourceObj); + } + } + }); + } + + ngOnInit() { + this.sourcesStore.getAllSources(); + } + + saveSorcesDataToStore() { + this.sourcesStore.saveSources(this.ddSource); + } + + drop(event: CdkDragDrop<string[]>) { + this.ddSource = []; + 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); + } + + for (const key2 in this.sources) { + if (key2) { + const originalSources = this.sourcesOptions; + for (const key of originalSources) { + if (key.name === key2) { + const obj = `{${key.name}: ${key.value}}`; + this.ddSource.push(obj); + } + } + } + } + } + + searchDictionary(event: any) { + this.searchQuery = event.target.value; + this.searchQuery = this.searchQuery.trim(); + console.log(this.searchQuery); + // this.dictionaryStore.search(this.searchQuery); + } + + onChange(item: string, isChecked: boolean) { + if (isChecked) { + this.selectedArray.push(item); + } + } + + textChanged(event, item) { + const editedData = JSON.parse(event); + const originalSources = this.sources; + for (const key in originalSources) { + if (key === item.name) { + this.sources[key] = editedData; + } + } + this.option = []; + this.sourcesStore.changeSources(this.sources); + } + +} diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/sources-template/sources.store.ts b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/sources-template/sources.store.ts new file mode 100644 index 000000000..7da8f03d3 --- /dev/null +++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/sources-template/sources.store.ts @@ -0,0 +1,60 @@ +/* +* ============LICENSE_START======================================================= +* ONAP : CDS +* ================================================================================ +* Copyright (C) 2020 TechMahindra +*================================================================================= +* Licensed under the Apache License, Version 2.0 (the "License"); +* you may not use this file except in compliance with the License. +* You may obtain a copy of the License at +* +* http://www.apache.org/licenses/LICENSE-2.0 +* +* Unless required by applicable law or agreed to in writing, software +* distributed under the License is distributed on an "AS IS" BASIS, +* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +* See the License for the specific language governing permissions and +* limitations under the License. +* ============LICENSE_END========================================================= +*/ +import { Sources } from '../../model/sources.model'; +import { Store } from 'src/app/common/core/stores/Store'; +import { Injectable } from '@angular/core'; +import { DictionaryCreationService } from '../dictionary-creation.service'; +import { Definition } from '../../model/definition.model'; + +@Injectable({ + providedIn: 'root' +}) +export class SourcesStore extends Store<Sources> { + constructor(private dictionaryCreationService: DictionaryCreationService) { + super(new Sources()); + } + + public getAllSources() { + console.log('getting all sources...'); + this.getSources(); + } + + protected getSources() { + this.dictionaryCreationService.getSources() + .subscribe((sou) => { + console.log(sou); + this.setState({ + ...this.state, + sources: sou + }); + }); + } + + public changeSources(sou) { + this.setState({ + ...this.state, + sources: sou + }); + } + + public saveSources(sources) { + console.log(sources); + } +} |