1 files changed, 100 insertions, 0 deletions
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);
+  }
+
+}