creating meta data creation component(first tab)

Issue-ID: CCSDK-2014

Signed-off-by: shaaban Altanany <shaaban.eltanany.ext@orange.com>
Change-Id: I35283cbb5b48174606493ecb39c20b9f717a9c06

6 files changed, 26 insertions, 38 deletions

diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/filter-by-tags/filter-by-tags.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/filter-by-tags/filter-by-tags.component.html
index 6ce3a53a1..e5ebc315a 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/filter-by-tags/filter-by-tags.component.html
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/filter-by-tags/filter-by-tags.component.html
@@ -1,6 +1,6 @@
 <div class="dropdown packagesFilter w-100">
     <input class="dropdown-toggle" type="text">
-    <div class="dropdown-text">ALL PACKAGES TAGS</div>
+    <div class="dropdown-text">{{checkBoxTages.substr(0,checkBoxTages.length-1)}}</div>
     <ul class="dropdown-content w-100">
         <li>
             <div class="form-group">
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/filter-by-tags/filter-by-tags.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/filter-by-tags/filter-by-tags.component.ts
index b4007215a..28be5f5c8 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/filter-by-tags/filter-by-tags.component.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/filter-by-tags/filter-by-tags.component.ts
@@ -37,7 +37,7 @@ export class TagsFilteringComponent implements OnInit {
     searchTag = '';
     viewedPackages: BlueprintModel[] = [];
     private checkBoxTages = '';
-
+    currentPage = 0;
 
     constructor(private packagesStore: PackagesStore,
     ) {
@@ -45,13 +45,18 @@ export class TagsFilteringComponent implements OnInit {
             console.log(state);
             if (state.page) {
                 this.viewedPackages = state.page.content;
+                this.tags = [];
+                if (state.currentPage !== this.currentPage) {
+                    this.checkBoxTages = '';
+                    this.currentPage = state.currentPage;
+                }
                 this.viewedPackages.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();
-
                 });
             }
         });
@@ -80,20 +85,20 @@ export class TagsFilteringComponent implements OnInit {
     }
 
     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);
+        const tagsSelected = this.checkBoxTages.split(',').filter(item => {
+            if (item) {
+                return true;
+            }
+        }).map((item) => {
+            return item.trim();
+        });
+        this.packagesStore.filterByTags(tagsSelected);
     }
 
 
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.html
index 18428d4b4..8bc7adf8c 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.html
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.html
@@ -7,7 +7,7 @@
             </div>
             <div class="card-footer row">
                 <div class="col">
-                    <a href="#" role="button" aria-pressed="true" class="btn-create-package float">Create Package
+                    <a href="/packages/createPackage" role="button" aria-pressed="true" class="btn-create-package float">Create Package
                     </a>
                 </div>
                 <div class="col">
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.spec.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.spec.ts
index f45f25996..000f9eda1 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.spec.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.spec.ts
@@ -4,6 +4,7 @@ import { PackageListComponent } from './package-list.component';
 import { PackagesStore } from '../../packages.store';
 import { getBluePrintPageMock } from '../../blueprint.page.mock';
 import { of } from 'rxjs';
+import {PackagesDashboardState} from '../../model/packages-dashboard.state';
 
 describe('PackageListComponent', () => {
   let component: PackageListComponent;
@@ -12,7 +13,9 @@ describe('PackageListComponent', () => {
 
   beforeEach(async(() => {
 
-    store = { state$: of(getBluePrintPageMock()) };
+    const dashBoard = new PackagesDashboardState();
+    dashBoard.page = getBluePrintPageMock();
+    store = { state$: of(dashBoard) };
 
     TestBed.configureTestingModule({
       declarations: [ PackageListComponent ],
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.ts
index c7ec0af20..049801227 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.ts
@@ -16,8 +16,8 @@ export class PackageListComponent implements OnInit {
         console.log('PackageListComponent');
         this.packagesStore.state$.subscribe(state => {
             console.log(state);
-            if (state.page) {
-                this.viewedPackages = state.page.content;
+            if (state.filteredPackages) {
+                this.viewedPackages = state.filteredPackages.content;
             }
         });
     }
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.html
index ac510893b..7928f2d91 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.html
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.html
@@ -2,7 +2,7 @@
 </app-header>
 <div class="new-wrapper">
     <div class="container-fluid main-container">
-
+        <app-packages-header></app-packages-header>
         <div class="container-fluid body-container">
             <nav class="row">
                 <!--Nav Tabs-->
@@ -31,31 +31,11 @@
                         <div class="col-5 pl-2">
                             <app-filter-by-tags class="w-100"></app-filter-by-tags>
                         </div>
-                        
+
                     </div>
                 </div>
             </nav>
-            <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">
-                                <div class="col sort-packages">
-                                    
-                                </div>
-                                <app-package-pagination></app-package-pagination>
-            
-                            </div>
-                            <app-packages-list></app-packages-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 class="tab-pane fade" id="nav-contact1" role="tabpanel" aria-labelledby="nav-contact1-tab">...
-                        </div>
-                    </div>
-                </div>
-            </div>
+            <app-sort-packages></app-sort-packages>
         </div>
     </div>
 </div>