summaryrefslogtreecommitdiffstats
path: root/cds-ui/designer-client/src/app/modules
diff options
context:
space:
mode:
authorswapnalipode <sp00501638@techmahindra.com>2020-04-18 19:45:12 +0530
committerSwapnali Pode <sp00501638@techmahindra.com>2020-04-21 16:16:20 +0000
commitb85c484da92c3b6721bb241376074fd9d7a712e2 (patch)
treed85aff1e31f31d73853ba528e82017530cd82cec /cds-ui/designer-client/src/app/modules
parent3c10444c1d9d84b4d7f38b223fd304450cb36eb6 (diff)
Adding Resource dictionary
Adding resource-dictionary Change-Id: Ib23b282e7293843ce94263e82b3f7cdb0fe36c5a Issue-ID: CCSDK-2253 Signed-off-by: swapnalipode <sp00501638@techmahindra.com>
Diffstat (limited to 'cds-ui/designer-client/src/app/modules')
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/dictionary-api.service.spec.ts32
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/dictionary-api.service.ts48
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/dictionary.store.ts161
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/model/definition.model.ts30
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/model/dictionary-dashboard.state.ts33
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/model/dictionary.model.ts36
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/model/metaData.model.ts29
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/model/sources.model.ts24
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/dictionary-header/dictionary-header.component.css19
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/dictionary-header/dictionary-header.component.html30
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/dictionary-header/dictionary-header.component.spec.ts45
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/dictionary-header/dictionary-header.component.ts42
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/dictionary-list/dictionary-list.component.css19
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/dictionary-list/dictionary-list.component.html90
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/dictionary-list/dictionary-list.component.spec.ts45
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/dictionary-list/dictionary-list.component.ts51
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/dictionary-pagination/dictionary-pagination.component.css19
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/dictionary-pagination/dictionary-pagination.component.html25
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/dictionary-pagination/dictionary-pagination.component.spec.ts45
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/dictionary-pagination/dictionary-pagination.component.ts60
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/filterby-tags/filterby-tags.component.css19
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/filterby-tags/filterby-tags.component.html38
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/filterby-tags/filterby-tags.component.spec.ts45
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/filterby-tags/filterby-tags.component.ts100
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/resource-dictionary-dashboard.component.css19
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/resource-dictionary-dashboard.component.html59
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/resource-dictionary-dashboard.component.spec.ts45
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/resource-dictionary-dashboard.component.ts36
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/search-dictionary/search-dictionary.component.css19
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/search-dictionary/search-dictionary.component.html24
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/search-dictionary/search-dictionary.component.spec.ts45
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/search-dictionary/search-dictionary.component.ts42
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/sort-dictionary/sort-dictionary.component.css19
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/sort-dictionary/sort-dictionary.component.html52
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/sort-dictionary/sort-dictionary.component.spec.ts45
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/sort-dictionary/sort-dictionary.component.ts54
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-routing.module.ts36
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary.module.ts62
-rw-r--r--cds-ui/designer-client/src/app/modules/shared-modules/header/header.component.html7
-rw-r--r--cds-ui/designer-client/src/app/modules/shared-modules/header/header.component.ts7
-rw-r--r--cds-ui/designer-client/src/app/modules/shared-modules/shared-modules.module.ts9
41 files changed, 1654 insertions, 11 deletions
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/dictionary-api.service.spec.ts b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/dictionary-api.service.spec.ts
new file mode 100644
index 000000000..0bf40e43c
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/dictionary-api.service.spec.ts
@@ -0,0 +1,32 @@
+/*
+* ============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 { TestBed } from '@angular/core/testing';
+
+import { DictionaryApiService } from './dictionary-api.service';
+
+describe('DictionaryApiService', () => {
+ beforeEach(() => TestBed.configureTestingModule({}));
+
+ it('should be created', () => {
+ const service: DictionaryApiService = TestBed.get(DictionaryApiService);
+ expect(service).toBeTruthy();
+ });
+});
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/dictionary-api.service.ts b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/dictionary-api.service.ts
new file mode 100644
index 000000000..c253842d1
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/dictionary-api.service.ts
@@ -0,0 +1,48 @@
+/*
+* ============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 { Injectable } from '@angular/core';
+import { DictionaryPage } from './model/dictionary.model';
+import { ApiService } from 'src/app/common/core/services/api.service';
+import { ResourceDictionaryURLs } from 'src/app/common/constants/app-constants';
+import { Observable } from 'rxjs';
+
+@Injectable({
+ providedIn: 'root'
+})
+export class DictionaryApiService {
+
+ constructor(private api: ApiService) { }
+
+ getPagedDictionary(pageNumber: number, pageSize: number, sortBy: string) {
+ return this.api.get(ResourceDictionaryURLs.getPagedDictionary, {
+ offset: pageNumber,
+ limit: pageSize,
+ sort: sortBy
+ });
+ }
+ getPagedDictionaryByKeyWord(keyWord: string, pageNumber: number, pageSize: number, sortBy: string) {
+ return this.api.get(ResourceDictionaryURLs.getMetaDatePageable + '/' + keyWord, {
+ offset: pageNumber,
+ limit: pageSize,
+ sort: sortBy
+ });
+ }
+}
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/dictionary.store.ts b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/dictionary.store.ts
new file mode 100644
index 000000000..a932327cf
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/dictionary.store.ts
@@ -0,0 +1,161 @@
+/*
+* ============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 { Injectable } from '@angular/core';
+import { Store } from '../../../common/core/stores/Store';
+import { Observable, of } from 'rxjs';
+import { DictionaryDashboardState } from './model/dictionary-dashboard.state';
+import { DictionaryPage } from './model/dictionary.model';
+import { DictionaryApiService } from './dictionary-api.service';
+
+@Injectable({
+ providedIn: 'root'
+})
+export class DictionaryStore extends Store<DictionaryDashboardState> {
+ // TDOD fixed for now as there is no requirement to change it from UI
+ public pageSize = 5;
+ private dictionaryContent: DictionaryPage = new DictionaryPage();
+
+ constructor(private dictionaryServiceList: DictionaryApiService) {
+ super(new DictionaryDashboardState());
+ }
+
+ public search(command: string) {
+ if (command) {
+ this.searchPagedDictionary(command, 0, this.pageSize);
+ } else {
+ this.getPagedDictionary(0, this.pageSize);
+ }
+ }
+
+ public getAll() {
+ console.log('getting all packages...');
+ this.getPagedDictionary(0, this.pageSize);
+ }
+
+ public getPage(pageNumber: number, pageSize: number) {
+ if (this.isCommandExist()) {
+ this.searchPagedDictionary(this.state.command, pageNumber, pageSize);
+ } else {
+ this.getPagedDictionary(pageNumber, pageSize);
+ }
+ }
+
+ public sortPagedDictionary(sortBy: string) {
+ if (this.isCommandExist()) {
+ this.searchPagedDictionary(this.state.command, this.state.currentPage, this.pageSize, sortBy);
+ } else {
+ this.getPagedDictionary(this.state.currentPage, this.pageSize, sortBy);
+ }
+}
+
+ public filterByTags(tags: string[]) {
+ console.log(this.state.currentPage);
+ this.getPagedDictionaryByTags(this.state.command, this.state.currentPage,
+ this.pageSize, this.state.sortBy, tags);
+
+ }
+
+ protected getPagedDictionary(pageNumber: number, pageSize: number, sortBy: string = this.state.sortBy) {
+
+ this.dictionaryServiceList.getPagedDictionary(pageNumber, pageSize, sortBy)
+ .subscribe((pages: DictionaryPage) => {
+ console.log(pages);
+ this.setState({
+ ...this.state,
+ page: pages,
+ filteredPackages: pages,
+ command: '',
+ totalPackages: pages.totalElements,
+ currentPage: pageNumber,
+ // this param is set only in get all as it represents the total number of pacakges in the server
+ totalDictionariesWithoutSearchorFilters: pages.totalElements,
+ tags: [],
+ sortBy
+ });
+ });
+ }
+
+ private searchPagedDictionary(keyWord: string, pageNumber: number, pageSize: number, sortBy: string = this.state.sortBy) {
+ this.dictionaryServiceList.getPagedDictionaryByKeyWord(keyWord, pageNumber, pageSize, sortBy)
+ .subscribe((pages: DictionaryPage) => {
+ console.log(pages);
+ this.setState({
+ ...this.state,
+ page: pages,
+ filteredPackages: pages,
+ command: keyWord,
+ totalPackages: pages.totalElements,
+ currentPage: pageNumber,
+ tags: [],
+ sortBy
+ });
+ });
+ }
+
+ private isCommandExist() {
+ return this.state.command;
+ }
+
+ private getPagedDictionaryByTags(keyWord: string, currentPage1: number, pageSize: number, sortBy1: string, tagsSearchable: string[]) {
+ this.getPagedDictionaryByKeyWordFilteredByTags(tagsSearchable)
+ .subscribe((pages: DictionaryPage) => {
+ this.setState({
+ ...this.state,
+ page: this.state.page,
+ filteredPackages: pages,
+ command: keyWord,
+ tags: tagsSearchable,
+ currentPage: currentPage1,
+ sortBy: sortBy1,
+ totalPackages: this.state.page.totalElements,
+ });
+ });
+ }
+
+ private getPagedDictionaryByKeyWordFilteredByTags(tagsSearchable: string[]): Observable<any> {
+ this.dictionaryContent.content = [];
+ if (tagsSearchable && tagsSearchable.length !== 0 && !tagsSearchable.includes('All')) {
+ tagsSearchable.forEach(tag => {
+ if (tag) {
+ this.state.page.content.forEach(dictionaryModel => {
+ if (tag.endsWith(',')) {
+ tag = tag.replace(',', '');
+ }
+ dictionaryModel.tags.split(',').forEach(dictionaryModelTag => {
+ if (dictionaryModelTag === tag) {
+ this.dictionaryContent.content.push(dictionaryModel);
+ }
+ });
+ });
+ } else {
+ this.getPagedDictionary(this.state.currentPage, this.pageSize);
+ return of(this.state.page);
+ }
+ });
+ this.dictionaryContent.content = this.dictionaryContent.content.filter((value, index, self) => self.indexOf(value) === index);
+ console.log('the lenght is ' + this.dictionaryContent.content.length);
+ return of(this.dictionaryContent);
+ } else {
+ this.getPagedDictionary(this.state.currentPage, this.pageSize);
+ return of(this.state.page);
+ }
+ }
+}
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/model/definition.model.ts b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/model/definition.model.ts
new file mode 100644
index 000000000..96d188a54
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/model/definition.model.ts
@@ -0,0 +1,30 @@
+/*
+* ============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 './sources.model';
+
+export class Definition {
+ tag: string;
+ name: string;
+ property: string;
+ updatedBy: string;
+ sources: Sources[];
+
+}
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/model/dictionary-dashboard.state.ts b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/model/dictionary-dashboard.state.ts
new file mode 100644
index 000000000..d0a0be151
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/model/dictionary-dashboard.state.ts
@@ -0,0 +1,33 @@
+/*
+* ============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 { DictionaryPage } from './dictionary.model';
+
+export class DictionaryDashboardState {
+
+ page: DictionaryPage;
+ filteredPackages: DictionaryPage;
+ command: string;
+ currentPage = 0;
+ totalPackages: number;
+ tags: string[];
+ sortBy = 'DATE';
+ totalDictionariesWithoutSearchorFilters: number;
+}
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/model/dictionary.model.ts b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/model/dictionary.model.ts
new file mode 100644
index 000000000..0f54f4ad2
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/model/dictionary.model.ts
@@ -0,0 +1,36 @@
+/*
+* ============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 { Page } from 'src/app/common/model/page';
+
+export class DictionaryModel {
+
+ public name: string;
+ public tags: string;
+ public dataType: string;
+ public description: string;
+ public entrySchema: string;
+ public updatedBy: string;
+ public createdDate: string;
+ public definition: object;
+}
+
+export class DictionaryPage extends Page<DictionaryModel> {
+}
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/model/metaData.model.ts b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/model/metaData.model.ts
new file mode 100644
index 000000000..e4b9be75f
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/model/metaData.model.ts
@@ -0,0 +1,29 @@
+/*
+* ============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=========================================================
+*/
+
+export class MetaData {
+ public name: string;
+ public tags: string;
+ public dataType: string;
+ public description: string;
+ public entrySchema: string;
+ public updatedBy: string;
+ public createdDate: string;
+}
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/model/sources.model.ts b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/model/sources.model.ts
new file mode 100644
index 000000000..4074e5138
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/model/sources.model.ts
@@ -0,0 +1,24 @@
+/*
+* ============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=========================================================
+*/
+
+export class Sources {
+ sources: [];
+
+}
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/dictionary-header/dictionary-header.component.css b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/dictionary-header/dictionary-header.component.css
new file mode 100644
index 000000000..f263c0086
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/dictionary-header/dictionary-header.component.css
@@ -0,0 +1,19 @@
+/*
+* ============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=========================================================
+*/ \ No newline at end of file
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/dictionary-header/dictionary-header.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/dictionary-header/dictionary-header.component.html
new file mode 100644
index 000000000..fc08ebe22
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/dictionary-header/dictionary-header.component.html
@@ -0,0 +1,30 @@
+<!-- /*
+* ============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=========================================================
+*/ -->
+
+<header class="page-title">
+ <div class="row">
+ <h2 class="col m-0">Resource Dictionary
+ <span id="numberOfPackages">({{numberOfDD}} DD)</span>
+ </h2>
+ <div class="col">
+ </div>
+ </div>
+</header>
+
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/dictionary-header/dictionary-header.component.spec.ts b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/dictionary-header/dictionary-header.component.spec.ts
new file mode 100644
index 000000000..46888ef9e
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/dictionary-header/dictionary-header.component.spec.ts
@@ -0,0 +1,45 @@
+/*
+* ============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 { DictionaryHeaderComponent } from './dictionary-header.component';
+
+describe('DictionaryHeaderComponent', () => {
+ let component: DictionaryHeaderComponent;
+ let fixture: ComponentFixture<DictionaryHeaderComponent>;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ DictionaryHeaderComponent ]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(DictionaryHeaderComponent);
+ 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-dashboard/dictionary-header/dictionary-header.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/dictionary-header/dictionary-header.component.ts
new file mode 100644
index 000000000..364c71f95
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/dictionary-header/dictionary-header.component.ts
@@ -0,0 +1,42 @@
+/*
+* ============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 { DictionaryStore } from '../../dictionary.store';
+
+@Component({
+ selector: 'app-dictionary-header',
+ templateUrl: './dictionary-header.component.html',
+ styleUrls: ['./dictionary-header.component.css']
+})
+export class DictionaryHeaderComponent implements OnInit {
+
+ numberOfDD: number;
+
+ constructor(private dictionaryStore: DictionaryStore) {
+ this.dictionaryStore.state$
+ .subscribe(state => {
+ this.numberOfDD = state.totalDictionariesWithoutSearchorFilters;
+ });
+ }
+ ngOnInit() {
+ }
+
+}
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/dictionary-list/dictionary-list.component.css b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/dictionary-list/dictionary-list.component.css
new file mode 100644
index 000000000..f263c0086
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/dictionary-list/dictionary-list.component.css
@@ -0,0 +1,19 @@
+/*
+* ============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=========================================================
+*/ \ No newline at end of file
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/dictionary-list/dictionary-list.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/dictionary-list/dictionary-list.component.html
new file mode 100644
index 000000000..1cedeeb09
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/dictionary-list/dictionary-list.component.html
@@ -0,0 +1,90 @@
+<!-- /*
+* ============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="row packages-card">
+ <div class="col-lg-3 col-md-6 d-flex">
+ <!--Add Package Card-->
+ <div class="card addPaackage-card">
+ <div class="card-body text-center">
+ <img src="/assets/img/icon-addPackage.svg" width="40%">
+ </div>
+ <div class="card-footer row">
+ <div class="col text-center">
+ <a routerLink="/resource-dictionary/createDictionary" role="button" aria-pressed="true"
+ class="btn-create-package float"><i class="icon-create-white" aria-hidden="true"></i>Create Package
+ </a>
+ <br/>
+ <a href="#" role="button" aria-pressed="true" class="btn-import-package float mb-3"><i class="icon-import-blue" aria-hidden="true"></i>Import Package
+ </a>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="col-lg-3 col-md-6 d-flex" *ngFor="let dictionary of viewedDictionary">
+ <!--Card 1-->
+ <div>
+ <div class="card">
+ <div class="card-body">
+ <div class="row">
+ <div class="col-9 pr-0">
+ <a class="card-title" [routerLink]="['/dictionary/dictionaryByName', dictionary.name]"
+ (click)="testDispatch(dictionary)">
+ <!-- <img class="icon-deployed" src="/assets/img/icon-deploy.svg"> -->
+ {{dictionary.name}}
+ </a>
+ </div>
+ <div class="col-3">
+
+ <div class="dropdown">
+ <input class="dropdown-toggle" type="text">
+ <div class="dropdown-text">
+ <!-- <img src="/assets/img/icon-menuDots.svg" title="Actions"> -->
+ <i class="icon-menuDots" aria-hidden="true"></i>
+ </div>
+ <ul class="dropdown-content">
+ <li class="action-clone">
+ <a href="#">
+ <i class="icon-clone-sm" aria-hidden="true"></i>
+ Clone
+ </a>
+ </li>
+ <li class="action-delete">
+ <a href="#">
+ <i class="icon-delete-sm" aria-hidden="true"></i>
+ Delete
+ </a>
+ </li>
+ </ul>
+ </div>
+
+ </div>
+ </div>
+ <div class="row">
+ <div class="col">
+ <p class="mb-0">Last modified {{ dictionary.createdDate | date:'short' }}
+ </p>
+ <p class="mb-2">By {{dictionary.updatedBy}}</p>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+</div>
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/dictionary-list/dictionary-list.component.spec.ts b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/dictionary-list/dictionary-list.component.spec.ts
new file mode 100644
index 000000000..18b5f2b41
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/dictionary-list/dictionary-list.component.spec.ts
@@ -0,0 +1,45 @@
+/*
+* ============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 { DictionaryListComponent } from './dictionary-list.component';
+
+describe('DictionaryListComponent', () => {
+ let component: DictionaryListComponent;
+ let fixture: ComponentFixture<DictionaryListComponent>;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ DictionaryListComponent ]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(DictionaryListComponent);
+ 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-dashboard/dictionary-list/dictionary-list.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/dictionary-list/dictionary-list.component.ts
new file mode 100644
index 000000000..7c4c991f7
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/dictionary-list/dictionary-list.component.ts
@@ -0,0 +1,51 @@
+/*
+* ============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 { DictionaryModel } from '../../model/dictionary.model';
+import { DictionaryStore } from '../../dictionary.store';
+
+@Component({
+ selector: 'app-dictionary-list',
+ templateUrl: './dictionary-list.component.html',
+ styleUrls: ['./dictionary-list.component.css']
+})
+export class DictionaryListComponent implements OnInit {
+ viewedDictionary: DictionaryModel[] = [];
+
+ constructor(private dictionaryStore: DictionaryStore) {
+ console.log('DictionaryListComponent');
+ this.dictionaryStore.state$.subscribe(state => {
+ console.log(state);
+ if (state.filteredPackages) {
+ this.viewedDictionary = state.filteredPackages.content;
+ }
+ });
+ }
+
+ ngOnInit() {
+ this.dictionaryStore.getAll();
+ }
+
+ testDispatch(dictionary: DictionaryModel) {
+ console.log(dictionary.name);
+ }
+
+}
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/dictionary-pagination/dictionary-pagination.component.css b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/dictionary-pagination/dictionary-pagination.component.css
new file mode 100644
index 000000000..f263c0086
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/dictionary-pagination/dictionary-pagination.component.css
@@ -0,0 +1,19 @@
+/*
+* ============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=========================================================
+*/ \ No newline at end of file
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/dictionary-pagination/dictionary-pagination.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/dictionary-pagination/dictionary-pagination.component.html
new file mode 100644
index 000000000..8909ef431
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/dictionary-pagination/dictionary-pagination.component.html
@@ -0,0 +1,25 @@
+<!-- /*
+* ============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 package-paginator pr-0">
+ <ngb-pagination [collectionSize]="totalCount" [(page)]="pageNumber" [pageSize]="pageSize" class="float-right"
+ (pageChange)="getPageFromService($event)">
+ </ngb-pagination>
+</div>
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/dictionary-pagination/dictionary-pagination.component.spec.ts b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/dictionary-pagination/dictionary-pagination.component.spec.ts
new file mode 100644
index 000000000..e9a95ffa4
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/dictionary-pagination/dictionary-pagination.component.spec.ts
@@ -0,0 +1,45 @@
+/*
+* ============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 { DictionaryPaginationComponent } from './dictionary-pagination.component';
+
+describe('DictionaryPaginationComponent', () => {
+ let component: DictionaryPaginationComponent;
+ let fixture: ComponentFixture<DictionaryPaginationComponent>;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ DictionaryPaginationComponent ]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(DictionaryPaginationComponent);
+ 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-dashboard/dictionary-pagination/dictionary-pagination.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/dictionary-pagination/dictionary-pagination.component.ts
new file mode 100644
index 000000000..1cd4e2ea2
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/dictionary-pagination/dictionary-pagination.component.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 { Component, OnInit } from '@angular/core';
+import { DictionaryStore } from '../../dictionary.store';
+
+@Component({
+ selector: 'app-dictionary-pagination',
+ templateUrl: './dictionary-pagination.component.html',
+ styleUrls: ['./dictionary-pagination.component.css']
+})
+export class DictionaryPaginationComponent implements OnInit {
+
+ pageNumber: number;
+ totalCount: number;
+ pageSize: number;
+ previousPage: number;
+
+ constructor(private dictionaryStore: DictionaryStore) {
+ this.pageSize = dictionaryStore.pageSize;
+
+ this.dictionaryStore.state$
+ .subscribe(state => {
+ this.pageNumber = state.currentPage;
+ this.totalCount = state.totalPackages;
+ });
+ }
+
+ ngOnInit() {
+ }
+
+ public getPageFromService(page) {
+ console.log('getPageFromService', page);
+ if (isNaN(page)) {
+ page = 1;
+ console.log('page change to first...', page);
+ }
+ if (this.previousPage !== page) {
+ this.dictionaryStore.getPage(page - 1, this.dictionaryStore.pageSize);
+ this.previousPage = page;
+ }
+ }
+}
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/filterby-tags/filterby-tags.component.css b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/filterby-tags/filterby-tags.component.css
new file mode 100644
index 000000000..f263c0086
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/filterby-tags/filterby-tags.component.css
@@ -0,0 +1,19 @@
+/*
+* ============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=========================================================
+*/ \ No newline at end of file
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/filterby-tags/filterby-tags.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/filterby-tags/filterby-tags.component.html
new file mode 100644
index 000000000..f8f378486
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/filterby-tags/filterby-tags.component.html
@@ -0,0 +1,38 @@
+<!-- /*
+* ============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="dropdown packagesFilter w-100">
+ <input class="dropdown-toggle" type="text">
+ <div class="dropdown-text">{{checkBoxTages.substr(0,checkBoxTages.length-1)}}</div>
+ <ul class="dropdown-content w-100">
+ <li>
+ <div class="form-group">
+ <input type="text" (input)="reloadChanges($event)" class="form-control" placeholder="Search By Tag" autofocus>
+ </div>
+ </li>
+ <li *ngFor="let tag of viewedTags">
+ <div class="custom-control custom-checkbox">
+ <input type="checkbox" (click)="reloadDictionary($event)" class="custom-control-input" id={{tag}}>
+ <label class="custom-control-label" for={{tag}}>{{tag}}</label>
+ </div>
+ </li>
+ <li class="reset-filter"><a href="">Reset filter</a></li>
+ </ul>
+</div>
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/filterby-tags/filterby-tags.component.spec.ts b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/filterby-tags/filterby-tags.component.spec.ts
new file mode 100644
index 000000000..f83470f25
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/filterby-tags/filterby-tags.component.spec.ts
@@ -0,0 +1,45 @@
+/*
+* ============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 { FilterbyTagsComponent } from './filterby-tags.component';
+
+describe('FilterbyTagsComponent', () => {
+ let component: FilterbyTagsComponent;
+ let fixture: ComponentFixture<FilterbyTagsComponent>;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ FilterbyTagsComponent ]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(FilterbyTagsComponent);
+ 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-dashboard/filterby-tags/filterby-tags.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/filterby-tags/filterby-tags.component.ts
new file mode 100644
index 000000000..bdf6bd1ea
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/filterby-tags/filterby-tags.component.ts
@@ -0,0 +1,100 @@
+/*
+* ============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 { DictionaryModel, DictionaryPage } from '../../model/dictionary.model';
+import { DictionaryStore } from '../../dictionary.store';
+
+@Component({
+ selector: 'app-filterby-tags',
+ templateUrl: './filterby-tags.component.html',
+ styleUrls: ['./filterby-tags.component.css']
+})
+export class FilterbyTagsComponent implements OnInit {
+ page: DictionaryPage;
+ tags: string[] = [];
+ viewedTags: string[] = [];
+ searchTag = '';
+ viewedDictionary: DictionaryModel[] = [];
+ private checkBoxTages = '';
+ currentPage = 0;
+
+ constructor(private dictionaryStore: DictionaryStore) {
+ this.dictionaryStore.state$.subscribe(state => {
+ console.log(state);
+ if (state.page) {
+ this.viewedDictionary = state.page.content;
+ this.tags = [];
+ if (state.currentPage !== this.currentPage) {
+ this.checkBoxTages = '';
+ this.currentPage = state.currentPage;
+ }
+ this.viewedDictionary.forEach(element => {
+ element.tags.split(',').forEach(tag => {
+ this.tags.push(tag.trim());
+ });
+ this.tags.push('All');
+ this.tags = this.tags.filter((value, index, self) => self.indexOf(value) === index);
+ this.assignTags();
+ });
+ }
+ });
+ }
+
+ ngOnInit() {
+
+ }
+
+ reloadChanges(event: any) {
+ this.searchTag = event.target.value;
+ this.filterItem(this.searchTag);
+ }
+
+ private assignTags() {
+ this.viewedTags = this.tags;
+ }
+
+ private filterItem(value) {
+ if (!value) {
+ this.assignTags();
+ }
+ this.viewedTags = this.tags.filter(
+ item => item.toLowerCase().indexOf(value.toLowerCase()) > -1
+ );
+ }
+
+ reloadDictionary(event: any) {
+ if (!event.target.checked) {
+ this.checkBoxTages = this.checkBoxTages.replace(event.target.id + ',', '')
+ .replace(event.target.id, '');
+ } else {
+ this.checkBoxTages += event.target.id.trim() + ',';
+ }
+ const tagsSelected = this.checkBoxTages.split(',').filter(item => {
+ if (item) {
+ return true;
+ }
+ }).map((item) => {
+ return item.trim();
+ });
+ this.dictionaryStore.filterByTags(tagsSelected);
+ }
+
+}
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/resource-dictionary-dashboard.component.css b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/resource-dictionary-dashboard.component.css
new file mode 100644
index 000000000..f263c0086
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/resource-dictionary-dashboard.component.css
@@ -0,0 +1,19 @@
+/*
+* ============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=========================================================
+*/ \ No newline at end of file
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/resource-dictionary-dashboard.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/resource-dictionary-dashboard.component.html
new file mode 100644
index 000000000..1d435dbd8
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/resource-dictionary-dashboard.component.html
@@ -0,0 +1,59 @@
+<!-- /*
+* ============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=========================================================
+*/ -->
+
+<app-header>
+</app-header>
+<div class="new-wrapper">
+ <div class="container-fluid main-container">
+ <app-dictionary-header></app-dictionary-header>
+ <div class="container-fluid body-container">
+ <nav class="row">
+ <!--Nav Tabs-->
+ <div class="col pr-0">
+ <div class="nav nav-tabs " id="nav-tab" role="tablist">
+ <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home"
+ role="tab" aria-controls="nav-home"
+ aria-selected="true">All</a>
+ <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile"
+ role="tab" aria-controls="nav-profile"
+ aria-selected="false">ATT</a>
+ <a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact"
+ role="tab" aria-controls="nav-contact"
+ aria-selected="false">OPEN CONFIG</a>
+ </div>
+ </div>
+ <!--Nav Search & Filter-->
+ <div class="col search-filter-col">
+ <div class="row">
+ <div class="col-7">
+ <app-search-dictionary></app-search-dictionary>
+ </div>
+ <div class="col-5 pl-2">
+ <app-filterby-tags class="w-100"></app-filterby-tags>
+ </div>
+
+ </div>
+ </div>
+ </nav>
+ <app-sort-dictionary></app-sort-dictionary>
+ </div>
+ </div>
+</div>
+
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/resource-dictionary-dashboard.component.spec.ts b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/resource-dictionary-dashboard.component.spec.ts
new file mode 100644
index 000000000..bb821f34b
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/resource-dictionary-dashboard.component.spec.ts
@@ -0,0 +1,45 @@
+/*
+* ============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 { ResourceDictionaryDashboardComponent } from './resource-dictionary-dashboard.component';
+
+describe('ResourceDictionaryDashboardComponent', () => {
+ let component: ResourceDictionaryDashboardComponent;
+ let fixture: ComponentFixture<ResourceDictionaryDashboardComponent>;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ ResourceDictionaryDashboardComponent ]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(ResourceDictionaryDashboardComponent);
+ 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-dashboard/resource-dictionary-dashboard.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/resource-dictionary-dashboard.component.ts
new file mode 100644
index 000000000..8a64b9215
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/resource-dictionary-dashboard.component.ts
@@ -0,0 +1,36 @@
+/*
+* ============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';
+
+@Component({
+ selector: 'app-resource-dictionary-dashboard',
+ templateUrl: './resource-dictionary-dashboard.component.html',
+ styleUrls: ['./resource-dictionary-dashboard.component.css']
+})
+export class ResourceDictionaryDashboardComponent implements OnInit {
+
+ constructor() { }
+
+ ngOnInit() {
+ console.log('ResourceDictionaryDashboardComponent');
+ }
+
+}
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/search-dictionary/search-dictionary.component.css b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/search-dictionary/search-dictionary.component.css
new file mode 100644
index 000000000..f263c0086
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/search-dictionary/search-dictionary.component.css
@@ -0,0 +1,19 @@
+/*
+* ============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=========================================================
+*/ \ No newline at end of file
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/search-dictionary/search-dictionary.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/search-dictionary/search-dictionary.component.html
new file mode 100644
index 000000000..80f980b05
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/search-dictionary/search-dictionary.component.html
@@ -0,0 +1,24 @@
+<!-- /*
+* ============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="searchBox">
+ <input class="searchInput" [ngClass]="{'searchBox-expanded': searchQuery}" (input)="searchDictionary($event)" type="text" name="" placeholder="Search Dictionary">
+ <button class="searchButton" href="#"></button>
+</div>
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/search-dictionary/search-dictionary.component.spec.ts b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/search-dictionary/search-dictionary.component.spec.ts
new file mode 100644
index 000000000..70964048b
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/search-dictionary/search-dictionary.component.spec.ts
@@ -0,0 +1,45 @@
+/*
+* ============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 { SearchDictionaryComponent } from './search-dictionary.component';
+
+describe('SearchDictionaryComponent', () => {
+ let component: SearchDictionaryComponent;
+ let fixture: ComponentFixture<SearchDictionaryComponent>;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ SearchDictionaryComponent ]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(SearchDictionaryComponent);
+ 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-dashboard/search-dictionary/search-dictionary.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/search-dictionary/search-dictionary.component.ts
new file mode 100644
index 000000000..76e40cf7d
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/search-dictionary/search-dictionary.component.ts
@@ -0,0 +1,42 @@
+/*
+* ============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 { DictionaryStore } from '../../dictionary.store';
+
+@Component({
+ selector: 'app-search-dictionary',
+ templateUrl: './search-dictionary.component.html',
+ styleUrls: ['./search-dictionary.component.css']
+})
+export class SearchDictionaryComponent implements OnInit {
+ private searchQuery = '';
+ constructor(private dictionaryStore: DictionaryStore) {
+ }
+
+ ngOnInit() {
+ }
+ searchDictionary(event: any) {
+ this.searchQuery = event.target.value;
+ this.searchQuery = this.searchQuery.trim();
+ this.dictionaryStore.search(this.searchQuery);
+ }
+
+}
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/sort-dictionary/sort-dictionary.component.css b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/sort-dictionary/sort-dictionary.component.css
new file mode 100644
index 000000000..f263c0086
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/sort-dictionary/sort-dictionary.component.css
@@ -0,0 +1,19 @@
+/*
+* ============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=========================================================
+*/ \ No newline at end of file
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/sort-dictionary/sort-dictionary.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/sort-dictionary/sort-dictionary.component.html
new file mode 100644
index 000000000..cc55f6cab
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/sort-dictionary/sort-dictionary.component.html
@@ -0,0 +1,52 @@
+<!-- /*
+* ============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="row mt-4">
+ <div class="col">
+ <div class="tab-content" id="nav-tabContent">
+ <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
+ <div class="row">
+ <!--Dictionary Sort-->
+ <div class="col sort-packages">
+ Sort by:
+ <div class="dropdown">
+ <input class="dropdown-toggle" type="text">
+ <div class="dropdown-text">{{selected}}</div>
+ <ul class="dropdown-content">
+ <li *ngFor="let sortType of sortTypes">
+ <a (click)="sortDictionary($event)" name={{sortType}}>{{sortType}}</a>
+ </li>
+
+ </ul>
+ </div>
+ </div>
+ <!--Dictionary Paginator-->
+ <app-dictionary-pagination></app-dictionary-pagination>
+ </div>
+ <app-dictionary-list></app-dictionary-list>
+
+ </div>
+ <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">...</div>
+ <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">...</div>
+ </div>
+ </div>
+</div>
+
+
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/sort-dictionary/sort-dictionary.component.spec.ts b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/sort-dictionary/sort-dictionary.component.spec.ts
new file mode 100644
index 000000000..54b103823
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/sort-dictionary/sort-dictionary.component.spec.ts
@@ -0,0 +1,45 @@
+/*
+* ============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 { SortDictionaryComponent } from './sort-dictionary.component';
+
+describe('SortDictionaryComponent', () => {
+ let component: SortDictionaryComponent;
+ let fixture: ComponentFixture<SortDictionaryComponent>;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ SortDictionaryComponent ]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(SortDictionaryComponent);
+ 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-dashboard/sort-dictionary/sort-dictionary.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/sort-dictionary/sort-dictionary.component.ts
new file mode 100644
index 000000000..61c334a6b
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/sort-dictionary/sort-dictionary.component.ts
@@ -0,0 +1,54 @@
+/*
+* ============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 { DictionaryStore } from '../../dictionary.store';
+
+@Component({
+ selector: 'app-sort-dictionary',
+ templateUrl: './sort-dictionary.component.html',
+ styleUrls: ['./sort-dictionary.component.css']
+})
+export class SortDictionaryComponent implements OnInit {
+ sortTypes: string[];
+ selected: string;
+
+ constructor(private dictionaryStore: DictionaryStore) {
+ this.sortTypes = Object.keys(SortByToServerValue);
+ this.selected = 'Recent';
+ }
+
+ ngOnInit() {
+ }
+
+ sortDictionary(event: any) {
+ const key = event.target.name;
+ console.log(key);
+ this.selected = key;
+ this.dictionaryStore.sortPagedDictionary(SortByToServerValue[key]);
+ }
+
+}
+
+enum SortByToServerValue {
+ Recent = 'DATE',
+ Name = 'NAME',
+
+}
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-routing.module.ts b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-routing.module.ts
new file mode 100644
index 000000000..eb29c4c87
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-routing.module.ts
@@ -0,0 +1,36 @@
+/*
+* ============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 { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+import { ResourceDictionaryDashboardComponent } from './resource-dictionary-dashboard/resource-dictionary-dashboard.component';
+
+const routes: Routes = [
+ {
+ path: '',
+ component: ResourceDictionaryDashboardComponent
+ }
+];
+
+@NgModule({
+ imports: [RouterModule.forChild(routes)],
+ exports: [RouterModule]
+})
+export class ResourceDictionaryRoutingModule { }
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary.module.ts b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary.module.ts
new file mode 100644
index 000000000..5bd6710f8
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary.module.ts
@@ -0,0 +1,62 @@
+/*
+* ============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 { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { NgbPaginationModule } from '@ng-bootstrap/ng-bootstrap';
+import { SidebarModule } from 'ng-sidebar';
+import { FormsModule } from '@angular/forms';
+import { NgxFileDropModule } from 'ngx-file-drop';
+import { AceEditorModule } from 'ng2-ace-editor';
+import { DataTablesModule } from 'angular-datatables';
+
+import { ResourceDictionaryRoutingModule } from './resource-dictionary-routing.module';
+import { ResourceDictionaryDashboardComponent } from './resource-dictionary-dashboard/resource-dictionary-dashboard.component';
+import { DictionaryHeaderComponent } from './resource-dictionary-dashboard/dictionary-header/dictionary-header.component';
+import { SearchDictionaryComponent } from './resource-dictionary-dashboard/search-dictionary/search-dictionary.component';
+import { FilterbyTagsComponent } from './resource-dictionary-dashboard/filterby-tags/filterby-tags.component';
+import { SortDictionaryComponent } from './resource-dictionary-dashboard/sort-dictionary/sort-dictionary.component';
+import { DictionaryPaginationComponent } from './resource-dictionary-dashboard/dictionary-pagination/dictionary-pagination.component';
+import { SharedModulesModule } from '../../shared-modules/shared-modules.module';
+import { DictionaryListComponent } from './resource-dictionary-dashboard/dictionary-list/dictionary-list.component';
+
+@NgModule({
+ declarations: [
+ ResourceDictionaryDashboardComponent,
+ DictionaryHeaderComponent,
+ SearchDictionaryComponent,
+ FilterbyTagsComponent,
+ SortDictionaryComponent,
+ DictionaryPaginationComponent,
+ DictionaryListComponent,
+ ],
+ imports: [
+ CommonModule,
+ ResourceDictionaryRoutingModule,
+ NgbPaginationModule,
+ SharedModulesModule,
+ SidebarModule.forRoot(),
+ FormsModule,
+ NgxFileDropModule,
+ AceEditorModule,
+ DataTablesModule,
+ ]
+})
+export class ResourceDictionaryModule { }
diff --git a/cds-ui/designer-client/src/app/modules/shared-modules/header/header.component.html b/cds-ui/designer-client/src/app/modules/shared-modules/header/header.component.html
index 4b1c17e35..bfccac7a0 100644
--- a/cds-ui/designer-client/src/app/modules/shared-modules/header/header.component.html
+++ b/cds-ui/designer-client/src/app/modules/shared-modules/header/header.component.html
@@ -5,17 +5,18 @@
<div class="overflow-container">
<ul class="menu-dropdown">
<li class="active">
- <a (click)="redirect()" routerLink="/packages">Packages</a>
+ <a routerLink="/packages">Packages</a>
<span class="icon">
<!-- <i class="fa fa-dashboard"></i> -->
<i class="icon-nav-packages"></i>
</span>
</li>
- <li class="menu-hasdropdown">
- <a >Data Dictionary</a>
+ <li>
+ <a routerLink="/resource-dictionary">Resource Dictionary</a>
<span class="icon">
<i class="icon-nav-dictionary"></i>
</span>
+ </li>
<!-- <label title="toggle menu" for="settings">
<span class="downarrow">
<i class="fa fa-caret-down"></i>
diff --git a/cds-ui/designer-client/src/app/modules/shared-modules/header/header.component.ts b/cds-ui/designer-client/src/app/modules/shared-modules/header/header.component.ts
index db87f8fdf..38e368526 100644
--- a/cds-ui/designer-client/src/app/modules/shared-modules/header/header.component.ts
+++ b/cds-ui/designer-client/src/app/modules/shared-modules/header/header.component.ts
@@ -13,8 +13,7 @@ export class HeaderComponent implements OnInit {
ngOnInit() {
}
- redirect() {
- this.router.navigate(['/packages']);
- }
-
+ // redirect() {
+ // this.router.navigate(['/packages']);
+ // }
}
diff --git a/cds-ui/designer-client/src/app/modules/shared-modules/shared-modules.module.ts b/cds-ui/designer-client/src/app/modules/shared-modules/shared-modules.module.ts
index 6b6d39689..7229891f5 100644
--- a/cds-ui/designer-client/src/app/modules/shared-modules/shared-modules.module.ts
+++ b/cds-ui/designer-client/src/app/modules/shared-modules/shared-modules.module.ts
@@ -1,13 +1,14 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HeaderComponent } from './header/header.component';
-
-
+import { RouterModule } from '@angular/router';
@NgModule({
declarations: [HeaderComponent],
imports: [
- CommonModule
- ], exports : [HeaderComponent]
+ CommonModule,
+ RouterModule,
+ ],
+ exports : [HeaderComponent]
})
export class SharedModulesModule { }