filter packages by tag

rename filter-by-keyword to search-by-packages

Issue-ID: CCSDK-1968
Issue-ID: CCSDK-1951
Signed-off-by: Ahmed Abbas <ahmad.helmy@orange.com>
Change-Id: I4667f2b9e98ba7e217ba7ab15e5cd8c45bee0c33

4 files changed, 163 insertions, 0 deletions

diff --git a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/filter-by-tags/filter-by-tags.component.css b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/filter-by-tags/filter-by-tags.component.css
new file mode 100644
index 000000000..e69de29bb
--- /dev/null
+++ b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/filter-by-tags/filter-by-tags.component.css
diff --git a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/filter-by-tags/filter-by-tags.component.html b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/filter-by-tags/filter-by-tags.component.html
new file mode 100644
index 000000000..6ce3a53a1
--- /dev/null
+++ b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/filter-by-tags/filter-by-tags.component.html
@@ -0,0 +1,18 @@
+<div class="dropdown packagesFilter w-100">
+    <input class="dropdown-toggle" type="text">
+    <div class="dropdown-text">ALL PACKAGES TAGS</div>
+    <ul class="dropdown-content w-100">
+        <li>
+            <div class="form-group">
+                <input type="text" (input)="reloadChanges($event)" class="form-control" placeholder="Search" autofocus>
+            </div>
+        </li>
+        <li *ngFor="let tag of viewedTags">
+            <div class="custom-control custom-checkbox">
+                <input type="checkbox" (click)="reloadPackages($event)" class="custom-control-input" id={{tag}}>
+                <label class="custom-control-label" for={{tag}}>{{tag}}</label>
+            </div>
+        </li>
+    </ul>
+</div>
+
diff --git a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/filter-by-tags/filter-by-tags.component.spec.ts b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/filter-by-tags/filter-by-tags.component.spec.ts
new file mode 100644
index 000000000..8285d8962
--- /dev/null
+++ b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/filter-by-tags/filter-by-tags.component.spec.ts
@@ -0,0 +1,45 @@
+/*
+============LICENSE_START==========================================
+===================================================================
+Copyright (C) 2019 Orange. All rights reserved.
+===================================================================
+
+Unless otherwise specified, all software contained herein is licensed
+under the Apache License, Version 2.0 (the License);
+you may not use this software 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 { TagsFilteringComponent } from './filter-by-tags.component';
+
+describe('SearchByTagsComponent', () => {
+  let component: TagsFilteringComponent;
+  let fixture: ComponentFixture<TagsFilteringComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ TagsFilteringComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TagsFilteringComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/filter-by-tags/filter-by-tags.component.ts b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/filter-by-tags/filter-by-tags.component.ts
new file mode 100644
index 000000000..b4007215a
--- /dev/null
+++ b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/filter-by-tags/filter-by-tags.component.ts
@@ -0,0 +1,100 @@
+/*
+============LICENSE_START==========================================
+===================================================================
+Copyright (C) 2019 Orange. All rights reserved.
+===================================================================
+
+Unless otherwise specified, all software contained herein is licensed
+under the Apache License, Version 2.0 (the License);
+you may not use this software 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, OnDestroy, OnInit} from '@angular/core';
+import {PackagesStore} from '../../packages.store';
+import {BlueprintModel, BluePrintPage} from '../../model/BluePrint.model';
+
+@Component({
+    selector: 'app-filter-by-tags',
+    templateUrl: './filter-by-tags.component.html',
+    styleUrls: ['./filter-by-tags.component.css']
+})
+
+export class TagsFilteringComponent implements OnInit {
+
+    page: BluePrintPage;
+    tags: string[] = [];
+    viewedTags: string[] = [];
+    searchTag = '';
+    viewedPackages: BlueprintModel[] = [];
+    private checkBoxTages = '';
+
+
+    constructor(private packagesStore: PackagesStore,
+    ) {
+        this.packagesStore.state$.subscribe(state => {
+            console.log(state);
+            if (state.page) {
+                this.viewedPackages = state.page.content;
+                this.viewedPackages.forEach(element => {
+                    element.tags.split(',').forEach(tag => {
+                        this.tags.push(tag.trim());
+                    });
+                    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
+        );
+    }
+
+    reloadPackages(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() + ',';
+        }
+        console.log(this.checkBoxTages);
+        if (!this.checkBoxTages.includes(',')) {
+            return;
+        }
+        this.viewedPackages = [];
+        // this.packagesStore.getPagesFilterByTags(this.checkBoxTages);
+        //   this.viewedPackages = this.viewedPackages.filter((value, index, self) => self.indexOf(value) === index);
+    }
+
+
+}