creating meta data creation component(first tab)

Issue-ID: CCSDK-2014

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

17 files changed, 367 insertions, 262 deletions

diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/model/packages-dashboard.state.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/model/packages-dashboard.state.ts
index 068e93160..f4f56c591 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/model/packages-dashboard.state.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/model/packages-dashboard.state.ts
@@ -24,6 +24,7 @@ import {BluePrintPage} from './BluePrint.model';
 export class PackagesDashboardState {
 
     page: BluePrintPage;
+    filteredPackages: BluePrintPage;
     command: string;
     currentPage = 0;
     totalPackages: number;
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/imports-tab/imports-tab.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/imports-tab/imports-tab.component.html
index fc1015ca0..affba1b3b 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/imports-tab/imports-tab.component.html
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/imports-tab/imports-tab.component.html
@@ -1,23 +1,111 @@
-<div class="center">
-    <ngx-file-drop dropZoneLabel="Drop files here" (onFileDrop)="dropped($event)"
-                   (onFileOver)="fileOver($event)" (onFileLeave)="fileLeave($event)">
-        gi<ng-template ngx-file-drop-content-tmp let-openFileSelector="openFileSelector">
-            Optional custom content that replaces the the entire default content.
-            <button type="button" (click)="openFileSelector()">Browse Files</button>
-        </ng-template>
-    </ngx-file-drop>
-    <div class="upload-table">
-        <table class="table">
-            <thead>
-            <tr>
-                <th>Name</th>
-            </tr>
-            </thead>
-            <tbody class="upload-name-style">
-            <tr *ngFor="let item of files; let i=index">
-                <td><strong>{{ item.relativePath }}</strong></td>
-            </tr>
-            </tbody>
-        </table>
+
+<div class="import-container-all">
+    <div class="import-container">
+        <div class="import-container-input">
+            <input placeholder="Enter file URL" type="input" class="ng-pristine ng-valid ng-touched">
+            <a class="enter-link" href="#"><i class="icon-enter"></i></a>
+        </div>
+        <span class="import-container-span">Or you can also <a href="#" data-toggle="modal" data-target="#exampleModal">Import File</a></span>
+
+    </div>
+
+    <div class="accordion">
+        <div class="card creat-card">
+            <div class="single-line">
+                <label class="label-name">File</label>
+            </div>
+        </div>
+        <div id="accordion">
+            <div class="card">
+                <div class="card-header" id="headingOne">
+                    <h5 class="mb-0 d-flex justify-content-between">
+                        <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
+                            <i class="icon-file-code"></i>  Definitions/data_types.json
+                        </button>
+                        <a class="accordion-delete" href="#"><i class="icon-delete"></i></a>
+                    </h5>
+                </div>
+
+                <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
+                    <div class="card-body">
+                        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
+                    </div>
+                </div>
+            </div>
+            <div class="card">
+                <div class="card-header" id="headingTwo">
+                    <h5 class="mb-0">
+                        <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
+                            <i class="icon-file-code"></i>  Definitions/relationship_types.json
+                        </button>
+                    </h5>
+                </div>
+                <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
+                    <div class="card-body">
+                        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
+                    </div>
+                </div>
+            </div>
+            <div class="card">
+                <div class="card-header" id="headingThree">
+                    <h5 class="mb-0">
+                        <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
+                            <i class="icon-file-code"></i>  Definitions/artifact_types.json
+                        </button>
+                    </h5>
+                </div>
+                <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion">
+                    <div class="card-body">
+                        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+</div>
+
+<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
+    <div class="modal-dialog" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title" id="exampleModalLabel">Import File</h5>
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                    <span aria-hidden="true">&times;</span>
+                </button>
+            </div>
+            <div class="modal-body">
+                <ngx-file-drop dropZoneLabel="Drop files here" (onFileDrop)="dropped($event)"
+                               (onFileOver)="fileOver($event)" (onFileLeave)="fileLeave($event)">
+                    <ng-template ngx-file-drop-content-tmp let-openFileSelector="openFileSelector">
+                        <div class="folder-upload">
+                            <img src="assets/img/folder-upload.svg"/>
+                        </div>
+                        <div class="folder-upload-text">
+                            Drag & Drop file
+                        </div>
+                        <div class="folder-upload-text">or
+                            <button type="button" class="btn btn-sm btn-primary" (click)="openFileSelector()">Browse Files</button>
+                        </div>
+                        <div class="folder-upload-type">Allowed file type: json</div>
+                    </ng-template>
+                </ngx-file-drop>
+                <div class="upload-table"  *ngFor="let item of files; let i=index">
+                    <table class="table">
+                        <thead>
+                        <tr>
+                            <th>Name : {{ item.relativePath }}</th>
+                        </tr>
+                        </thead>
+                    </table>
+                </div>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-sm btn-secondary" data-dismiss="modal">Cancel</button>
+                <button type="button" class="btn btn-sm btn-primary">Import</button>
+            </div>
+        </div>
     </div>
 </div>
+
+
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/mapping-models/definitions/VlbDefinition.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/mapping-models/definitions/VlbDefinition.ts
index 5c59404c2..2d5e520ee 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/mapping-models/definitions/VlbDefinition.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/mapping-models/definitions/VlbDefinition.ts
@@ -1,4 +1,5 @@
-import {JsonObject, JsonProperty} from 'json2typescript';
+import {Any, JsonObject, JsonProperty} from 'json2typescript';
+
 
 @JsonObject
 export class VlbDefinition {
@@ -11,17 +12,30 @@ export class VlbDefinition {
     // topology_template: TopologyTemplate;
 }
 
+@JsonObject('metadata')
 export class Metadata {
     @JsonProperty('template_author')
-    templateAuthor: string;
+     // tslint:disable-next-line:variable-name
+    template_author: string;
     'author-email': string;
     'user-groups': string;
     @JsonProperty('template_name')
-    templateName: string;
+        // tslint:disable-next-line:variable-name
+    template_name: string;
     @JsonProperty('template_version')
-    templateVersion: string;
+        // tslint:disable-next-line:variable-name
+    template_version: string;
     @JsonProperty('template_tag')
-    templateTags: string;
+        // tslint:disable-next-line:variable-name
+    template_tags: string;
+
+    @JsonProperty('dictionary_group')
+        // tslint:disable-next-line:variable-name
+    dictionary_group: string;
+
+
+    /* @JsonProperty('custom_keys', {String}, false)
+     mapOfCustomKeys: Map<string, string> = new Map<string, string>();*/
 }
 
 export class Import {
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/mapping-models/metadata/MetaDataTab.model.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/mapping-models/metadata/MetaDataTab.model.ts
index 353ac4e1c..42aac5c4f 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/mapping-models/metadata/MetaDataTab.model.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/mapping-models/metadata/MetaDataTab.model.ts
@@ -51,9 +51,9 @@ export class MetaDataFile {
             'CSAR-Version: 1.0\n' +
             'Created-By: Shaaban Ebrahim <shaaban.eltanany.ext@orange.con>\n' +
             'Entry-Definitions:' + metaDataTab.entryFileName + '\n' +
-            'Template-Name:' + metaDataTab.templateName + '\n' +
-            'Template-Version: 1.0.0\n' +
-            'Template-Type: DEFAULT\n' +
+            'Template-Name:' + metaDataTab.name + '\n' +
+            'Template-Version:' + metaDataTab.version + '\n' +
+            'Template-Type: ' + metaDataTab.mode + '\n' +
             'Template-Tags:' + metaDataTab.tags;
 
     }
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.component.html
index 3cc8707c5..dc363b28a 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.component.html
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.component.html
@@ -34,7 +34,7 @@
                 </div>
                 <nav class="row">
                     <div class="col pr-0">
-                        <button class="float btn btn-sm btn-primary">Save</button>
+                        <button class="float btn btn-sm btn-primary" (click)="saveMetaData()">Save</button>
                         <button class="float btn btn-sm btn-outline-secondary" disabled>Cancel</button>
                     </div>
                 </nav>
@@ -73,32 +73,21 @@
                                         <label class="label-name">Mode</label>
                                         <label name="trst" *ngFor="let mode of modes; let i = index">
                                             <input class="form-check-input" [(ngModel)]="metaDataTab.mode" type="radio"
-                                                   name="exampleRadios" id="exampleRadios1" value={{mode}}>
+                                                   name="exampleRadios" id="exampleRadios1" value={{mode.name}}>
 
                                             <span>
-                                            <i [className]="mode.style" aria-hidden="true"></i>
-                                                <!-- <i class="mode-icon green icon-scripting-mode" aria-hidden="true"></i> -->
+                                            <i [className]="mode.style" aria-hidden="true" [id]="mode.name"></i>
                                                 {{mode.name}}
                                             </span>
                                         </label>
                                     </div>
-                                  <!--  <div class="single-line">
-                                        <label class="label-name">Dictionary Library Instances</label>
-                                        <div class="label-input">
-                                            <select name="cars">
-                                                <option class="select-placeholder">Select library</option>
-                                                <option value="audi"
-                                                        *ngFor="let dictionaryLibraryInstance of dictionaryLibraryInstances; let i = index">{{dictionaryLibraryInstance}}</option>
-                                            </select>
-                                        </div>
-                                    </div>-->
 
                                 </div>
                                 <div class="card creat-card">
                                     <div class="single-line">
                                         <label class="label-name">Name</label>
                                         <div class="label-input">
-                                            <input type="input" (input)="searchPackages($event)"
+                                            <input type="input"
                                                    [(ngModel)]="metaDataTab.name" placeholder="Topology name.vLB.CDS">
                                         </div>
                                     </div>
@@ -106,21 +95,26 @@
                                     <div class="single-line">
                                         <label class="label-name">Description</label>
                                         <div class="label-input">
-                                            <input type="input" placeholder="Descripe the package">
+                                            <input type="input" [(ngModel)]="metaDataTab.description"
+                                                   placeholder="Descripe the package">
                                         </div>
                                     </div>
                                     <hr/>
                                     <div class="single-line">
                                         <label class="label-name">Version</label>
                                         <div class="label-input">
-                                            <input type="input" placeholder="Example: 1.0.0">
+                                            <input type="input" [(ngModel)]="metaDataTab.version"
+                                                   (input)="validatePackageNameAndVersion()"
+                                                   placeholder="Example: 1.0.0">
                                         </div>
+                                        <div><label style="color: red">{{errorMessage}}</label></div>
                                     </div>
                                     <hr/>
                                     <div class="single-line">
                                         <label class="label-name">tags</label>
                                         <div class="label-input">
-                                            <input type="input" placeholder="Ex., vDNS-CDS">
+                                            <input type="input" [(ngModel)]="metaDataTab.tags"
+                                                   placeholder="Ex., vDNS-CDS">
                                         </div>
                                     </div>
                                 </div>
@@ -129,21 +123,22 @@
                                         <div class="card creat-card">
                                             <div class="single-line">
                                                 <h5 class="label-name">
-                                                    Custom key <a class="delete-key" (click)="deleteCustomKey($event)" >Delete</a>
+                                                    Custom key <a class="delete-key" (click)="deleteCustomKey($event)">Delete</a>
                                                 </h5>
 
                                             </div>
                                             <div class="single-line">
                                                 <label class="label-name">Name</label>
                                                 <div class="label-input">
-                                                    <input type="input" placeholder="Enter Name">
+                                                    <input name="key" type="input" placeholder="Enter Name">
                                                 </div>
                                             </div>
                                             <hr/>
                                             <div class="single-line">
                                                 <label class="label-name">Value</label>
                                                 <div class="label-input">
-                                                    <input type="input" placeholder="Enter Value">
+                                                    <input name="value" type="input"
+                                                           placeholder="Enter Value">
                                                 </div>
                                             </div>
 
@@ -165,110 +160,8 @@
                             </div>
                             <div class="tab-pane fade" id="nav-imports" role="tabpanel"
                                  aria-labelledby="nav-imports-tab">
-                                <div class="import-container-all">
-                                    <div class="import-container">
-                                        <div class="import-container-input">
-                                            <input placeholder="Enter file URL" type="input"
-                                                   class="ng-pristine ng-valid ng-touched">
-                                            <a class="enter-link" href="#"><i class="icon-enter"></i></a>
-                                        </div>
-                                        <span class="import-container-span">Or you can also <a href="#"
-                                                                                               data-toggle="modal"
-                                                                                               data-target="#exampleModal">Import File</a></span>
-
-                                    </div>
-
-                                    <div class="accordion">
-                                        <div class="card creat-card">
-                                            <div class="single-line">
-                                                <label class="label-name">File</label>
-                                            </div>
-                                        </div>
-                                        <div id="accordion">
-                                            <div class="card">
-                                                <div class="card-header" id="headingOne">
-                                                    <h5 class="mb-0 d-flex justify-content-between">
-                                                        <button class="btn btn-link" data-toggle="collapse"
-                                                                data-target="#collapseOne" aria-expanded="true"
-                                                                aria-controls="collapseOne">
-                                                            <i class="icon-file-code"></i> Definitions/data_types.json
-                                                        </button>
-                                                        <a class="accordion-delete" href="#"><i class="icon-delete"></i></a>
-                                                    </h5>
-                                                </div>
-
-                                                <div id="collapseOne" class="collapse show" aria-labelledby="headingOne"
-                                                     data-parent="#accordion">
-                                                    <div class="card-body">
-                                                        Anim pariatur cliche reprehenderit, enim eiusmod high life
-                                                        accusamus terry richardson ad squid. 3 wolf moon officia aute,
-                                                        non cupidatat skateboard dolor brunch. Food truck quinoa
-                                                        nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua
-                                                        put a bird on it squid single-origin coffee nulla assumenda
-                                                        shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore
-                                                        wes anderson cred nesciunt sapiente ea proident. Ad vegan
-                                                        excepteur butcher vice lomo. Leggings occaecat craft beer
-                                                        farm-to-table, raw denim aesthetic synth nesciunt you probably
-                                                        haven't heard of them accusamus labore sustainable VHS.
-                                                    </div>
-                                                </div>
-                                            </div>
-                                            <div class="card">
-                                                <div class="card-header" id="headingTwo">
-                                                    <h5 class="mb-0">
-                                                        <button class="btn btn-link collapsed" data-toggle="collapse"
-                                                                data-target="#collapseTwo" aria-expanded="false"
-                                                                aria-controls="collapseTwo">
-                                                            Definitions/relationship_types.json
-                                                        </button>
-                                                    </h5>
-                                                </div>
-                                                <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo"
-                                                     data-parent="#accordion">
-                                                    <div class="card-body">
-                                                        Anim pariatur cliche reprehenderit, enim eiusmod high life
-                                                        accusamus terry richardson ad squid. 3 wolf moon officia aute,
-                                                        non cupidatat skateboard dolor brunch. Food truck quinoa
-                                                        nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua
-                                                        put a bird on it squid single-origin coffee nulla assumenda
-                                                        shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore
-                                                        wes anderson cred nesciunt sapiente ea proident. Ad vegan
-                                                        excepteur butcher vice lomo. Leggings occaecat craft beer
-                                                        farm-to-table, raw denim aesthetic synth nesciunt you probably
-                                                        haven't heard of them accusamus labore sustainable VHS.
-                                                    </div>
-                                                </div>
-                                            </div>
-                                            <div class="card">
-                                                <div class="card-header" id="headingThree">
-                                                    <h5 class="mb-0">
-                                                        <button class="btn btn-link collapsed" data-toggle="collapse"
-                                                                data-target="#collapseThree" aria-expanded="false"
-                                                                aria-controls="collapseThree">
-                                                            Definitions/artifact_types.json
-                                                        </button>
-                                                    </h5>
-                                                </div>
-                                                <div id="collapseThree" class="collapse" aria-labelledby="headingThree"
-                                                     data-parent="#accordion">
-                                                    <div class="card-body">
-                                                        Anim pariatur cliche reprehenderit, enim eiusmod high life
-                                                        accusamus terry richardson ad squid. 3 wolf moon officia aute,
-                                                        non cupidatat skateboard dolor brunch. Food truck quinoa
-                                                        nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua
-                                                        put a bird on it squid single-origin coffee nulla assumenda
-                                                        shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore
-                                                        wes anderson cred nesciunt sapiente ea proident. Ad vegan
-                                                        excepteur butcher vice lomo. Leggings occaecat craft beer
-                                                        farm-to-table, raw denim aesthetic synth nesciunt you probably
-                                                        haven't heard of them accusamus labore sustainable VHS.
-                                                    </div>
-                                                </div>
-                                            </div>
-                                        </div>
-                                    </div>
+                                <app-imports-tab></app-imports-tab>
 
-                                </div>
                             </div>
                             <div class="tab-pane fade" id="nav-authentication" role="tabpanel"
                                  aria-labelledby="nav-authentication-tab">...
@@ -286,24 +179,3 @@
         </div>
     </div>
 </div>
-
-<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
-     aria-hidden="true">
-    <div class="modal-dialog" role="document">
-        <div class="modal-content">
-            <div class="modal-header">
-                <h5 class="modal-title" id="exampleModalLabel">Import File</h5>
-                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-                    <span aria-hidden="true">&times;</span>
-                </button>
-            </div>
-            <div class="modal-body">
-                ...
-            </div>
-            <div class="modal-footer">
-                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
-                <button type="button" class="btn btn-primary">Import</button>
-            </div>
-        </div>
-    </div>
-</div>
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.component.ts
index 60fccebc8..37a017953 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.component.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.component.ts
@@ -31,6 +31,8 @@ import {JsonConvert} from 'json2typescript';
 import {JsonPipe} from '@angular/common';
 import {PackageCreationService} from './package-creation.service';
 import {PackageCreationUtils} from './package-creation.utils';
+import List = _.List;
+import {Router} from '@angular/router';
 
 @Component({
     selector: 'app-package-creation',
@@ -38,10 +40,11 @@ import {PackageCreationUtils} from './package-creation.utils';
     styleUrls: ['./package-creation.component.css']
 })
 export class PackageCreationComponent implements OnInit {
-
+    counter = 0;
     modes: object[] = [
         {name: 'Designer Mode', style: 'mode-icon icon-designer-mode'},
         {name: 'Scripting Mode', style: 'mode-icon icon-scripting-mode'}];
+    customKeysAndValues: Map<string, string> = new Map<string, string>();
 
     dictionaryLibraryInstances: string[] = ['x', 'y'];
     private container: HTMLElement;
@@ -54,23 +57,34 @@ export class PackageCreationComponent implements OnInit {
     private folder: FolderNodeElement = new FolderNodeElement();
     private zipFile: JSZip = new JSZip();
     private filesData: any = [];
+    private errorMessage: string;
+    private keys: NodeListOf<HTMLElement>;
+    private values: NodeListOf<HTMLElement>;
 
 
-    constructor(private packageCreationService: PackageCreationService, private packageCreationUtils: PackageCreationUtils) {
+    constructor(private packageCreationService: PackageCreationService, private packageCreationUtils: PackageCreationUtils,
+                private router: Router) {
     }
 
     ngOnInit() {
+        // this.customKeysAndValues.set('Dictionary Library Instances', ' ');
+        this.keys = document.getElementsByName('key');
+        this.values = document.getElementsByName('value');
     }
 
 
     createAnotherCustomKeyDiv() {
-        console.log(this.metaDataTab);
         this.newElement = document.getElementById('target');
+        const id = this.newElement.getAttribute('id');
+        this.newElement.setAttribute('id', 'target' + this.counter++);
         const copiedElement = this.newElement.cloneNode(true);
-        /* this.newElement.setAttribute('class', 'alert-dark');*/
         this.container = document.getElementById('container');
         this.container.appendChild(copiedElement);
         this.elements = this.container.children;
+        this.newElement.setAttribute('id', id);
+        this.clearCopiedElement();
+
+        // console.log(this.packageCreationService.checkBluePrintNameAndVersion(this.metaDataTab.name, this.metaDataTab.version));
         /*this.metaDataTab = new MetaDataTab();
         this.metaDataTab.name = 'klfdj';
         this.metaDataTab.entryFileName = 'Definitions/vLB_CDS.json';
@@ -83,66 +97,96 @@ export class PackageCreationComponent implements OnInit {
         this.saveToFileSystem(MetaDataFile.getObjectInstance(this.metaDataTab));*/
     }
 
-    validatePacakgeName() {
-
+    private clearCopiedElement() {
+        const newCopiedElement: HTMLInputElement = document.getElementById('target' + (this.counter - 1)) as HTMLInputElement;
+        const inputElements = newCopiedElement.getElementsByTagName('input');
+        for (let i = 0; i < inputElements.length; i++) {
+            const element: HTMLInputElement = inputElements.item(i) as HTMLInputElement;
+            element.value = '';
+        }
     }
 
-    getDictionaryLibraryInstances() {
+
+    validatePackageNameAndVersion() {
+        if (this.metaDataTab.name && this.metaDataTab.version) {
+            this.packageCreationService.checkBluePrintNameAndVersion(this.metaDataTab.name, this.metaDataTab.version).then(element => {
+                if (element) {
+                    this.errorMessage = 'the package with name and version is exists';
+                } else {
+                    this.errorMessage = ' ';
+                }
+            });
+        }
 
     }
 
-    saveMetaData() {
+    getDictionaryLibraryInstances() {
 
 
     }
 
-    private saveToFileSystem(response) {
-
-        const filename = 'TOSCA.meta';
-        FilesContent.putData(filename, response);
-
-        const filenameEntry = 'vLB_CDS.json';
-        const vlbDefinition: VlbDefinition = new VlbDefinition();
-        const metadata: Metadata = new Metadata();
+    saveMetaData() {
+        for (let i = 0; i < this.values.length; i++) {
+            const inputKeyElement: HTMLInputElement = this.keys.item(i) as HTMLInputElement;
+            const inputKey: string = inputKeyElement.value;
+            const inputValueElement: HTMLInputElement = this.values.item(i) as HTMLInputElement;
+            const inputValue: string = inputValueElement.value;
+            this.customKeysAndValues.set(inputKey, inputValue);
+        }
 
-        metadata.templateAuthor = ' lldkslds';
-        metadata.templateName = ' lldkslds';
-        metadata.templateTags = ' lldkslds';
-        metadata.templateVersion = ' lldkslds';
-        metadata['author-email'] = ' lldkslds';
-        metadata['user-groups'] = ' lldkslds';
-        vlbDefinition.metadata = metadata;
+        this.metaDataTab.mapOfCustomKey = this.customKeysAndValues;
+        this.setModeType(this.metaDataTab);
+        this.setEntryPoint(this.metaDataTab);
 
-        vlbDefinition.imports = [{
-            file: 'Definitions/data_types.json'
-        }];
+        this.addToscaMetaDataFile(this.metaDataTab);
 
-        const value = this.packageCreationUtils.transformToJson(vlbDefinition);
-        FilesContent.putData(filenameEntry, value);
+        const vlbDefinition: VlbDefinition = new VlbDefinition();
+        this.fillVLBDefinition(vlbDefinition, this.metaDataTab);
 
         this.filesData.push(this.folder.TREE_DATA);
         this.saveToBackend();
+        this.packageCreationService.refreshPackages();
+        this.router.navigate(['/packages']);
+
     }
 
+    addToscaMetaDataFile(metaDataTab: MetaDataTab) {
+        const filename = 'TOSCA.meta';
+        FilesContent.putData(filename, MetaDataFile.getObjectInstance(this.metaDataTab));
+    }
+
+    private setModeType(metaDataTab: MetaDataTab) {
+        if (metaDataTab.mode.startsWith('Scripting')) {
+            metaDataTab.mode = 'KOTLIN_SCRIPT';
+        } else if (metaDataTab.mode.startsWith('Designer')) {
+            metaDataTab.mode = 'DEFAULT';
+        } else {
+            metaDataTab.mode = 'GENERIC_SCRIPT';
+        }
+    }
 
     saveToBackend() {
         this.create();
         this.zipFile.generateAsync({type: 'blob'})
             .then(blob => {
-                const formData = new FormData();
-                formData.append('file', blob);
-                this.packageCreationService.saveBlueprint(formData)
-                    .subscribe(
-                        data => {
-                            console.log('Success:' + JSON.stringify(data));
-                        }, error => {
-                            console.log('Error -' + error.message);
-                        });
+                this.saveBluePrint(blob);
 
             });
     }
 
 
+    private saveBluePrint(blob) {
+        const formData = new FormData();
+        formData.append('file', blob);
+        this.packageCreationService.saveBlueprint(formData)
+            .subscribe(
+                data => {
+                    console.log('Success:' + JSON.stringify(data));
+                }, error => {
+                    console.log('Error -' + error.message);
+                });
+    }
+
     create() {
         this.folder.TREE_DATA.forEach((path) => {
 
@@ -151,8 +195,6 @@ export class PackageCreationComponent implements OnInit {
                 this.zipFile.folder(name);
                 path.children.forEach(children => {
                     const name2 = children.name;
-                    console.log(FilesContent.getMapOfFilesNamesAndContent());
-                    console.log(name2);
                     if (FilesContent.getMapOfFilesNamesAndContent().has(name2)) {
                         this.zipFile.file(name + '/' + name2, FilesContent.getMapOfFilesNamesAndContent().get(name2));
                     } else {
@@ -165,16 +207,41 @@ export class PackageCreationComponent implements OnInit {
     }
 
 
-    searchPackages($event: Event) {
-        /* const searchQuery = event.target.value;
-         searchQuery = searchQuery.trim();
-         this.packagesStore.search(searchQuery);*/
-    }
-
     deleteCustomKey(event) {
         this.container = document.getElementById('container');
         const element = event.parentElement.parentElement.parentElement;
         this.container.removeChild(element);
-        console.log('removed');
+    }
+
+
+    private setEntryPoint(metaDataTab: MetaDataTab) {
+        if (metaDataTab.mode.startsWith('DEFAULT')) {
+            metaDataTab.entryFileName = 'Definitions/vLB_CDS.json';
+        } else {
+            metaDataTab.entryFileName = '';
+        }
+
+
+    }
+
+    private fillVLBDefinition(vlbDefinition: VlbDefinition, metaDataTab: MetaDataTab) {
+
+        const metadata: Metadata = new Metadata();
+        metadata.template_author = 'Shaaban';
+        metadata.template_name = metaDataTab.templateName;
+        metadata.template_tags = metaDataTab.tags;
+
+        metadata.dictionary_group = 'default';
+        metadata.template_version = metaDataTab.version;
+        metadata['author-email'] = 'shaaban.altanany.ext@orange.com';
+        metadata['user-groups'] = 'ADMIN';
+        // metadata.mapOfCustomKeys = this.metaDataTab.mapOfCustomKey;
+        vlbDefinition.tosca_definitions_version = metaDataTab.version;
+        vlbDefinition.metadata = metadata;
+
+        // console.log(vlbDefinition.metadata.mapOfCustomKeys);
+        const value = this.packageCreationUtils.transformToJson(vlbDefinition);
+        console.log(value);
+        FilesContent.putData('vLB_CDS.json', value);
     }
 }
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.service.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.service.ts
index 20e147684..0e5cd6a11 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.service.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.service.ts
@@ -24,6 +24,8 @@ import {Injectable} from '@angular/core';
 import {Observable} from 'rxjs';
 import {ApiService} from '../../../../common/core/services/api.service';
 import {BlueprintURLs} from '../../../../common/constants/app-constants';
+import {PackagesApiService} from '../packages-api.service';
+import {PackagesStore} from '../packages.store';
 
 @Injectable({
     providedIn: 'root'
@@ -31,10 +33,19 @@ import {BlueprintURLs} from '../../../../common/constants/app-constants';
 export class PackageCreationService {
 
 
-    constructor(private api: ApiService) {
+    constructor(private api: ApiService, private packagesListService: PackagesApiService, private packagesStore: PackagesStore) {
     }
 
     saveBlueprint(body: any | null, options?: any): Observable<any> {
         return this.api.post(BlueprintURLs.save, body, {responseType: 'text'});
     }
+
+    async checkBluePrintNameAndVersion(name: string, version: string): Promise<boolean> {
+        return await this.packagesListService.checkBluePrintIfItExists(name, version)
+            .then(bluePrintModelsResult => bluePrintModelsResult != null && bluePrintModelsResult.length > 0);
+    }
+
+    refreshPackages() {
+        this.packagesStore.getAll();
+    }
 }
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.utils.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.utils.ts
index 2ee0de7e2..4bccb3dd5 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.utils.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.utils.ts
@@ -21,6 +21,7 @@ limitations under the License.
 
 import {JsonPipe} from '@angular/common';
 import {Injectable} from '@angular/core';
+import {JsonConvert} from 'json2typescript';
 
 
 @Injectable({
@@ -32,6 +33,7 @@ export class PackageCreationUtils {
     }
 
     public transformToJson(object: any): string {
+
         return this.pipe.transform(object);
     }
 
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-api.service.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-api.service.ts
index ca4acd36b..2332d8e53 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-api.service.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-api.service.ts
@@ -44,8 +44,8 @@ export class PackagesApiService {
         });
     }
 
-    checkBluePrintIfItExists(keyword: string) {// : Observable<any> {
-        // return this.api.get(BlueprintURLs.get + '/' + keyword);
+    async checkBluePrintIfItExists(name: string, version: string): Promise<BluePrintPage[]> {
+        return await this.api.get(BlueprintURLs.getBlueprintByName + '/' + name + '/version/' + version).toPromise();
     }
 
     getCountOfAllPackages(observable: Observable<number>) {
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>
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages.routing.module.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages.routing.module.ts
index da1031998..913bb1081 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages.routing.module.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages.routing.module.ts
@@ -3,6 +3,7 @@ import {Routes, RouterModule} from '@angular/router';
 import {PackagesDashboardComponent} from './packages-dashboard/packages-dashboard.component';
 import {DesignerComponent} from './designer/designer.component';
 import {PackageCreationComponent} from './package-creation/package-creation.component';
+import {ConfigurationDashboardComponent} from './configuration-dashboard/configuration-dashboard.component';
 
 
 const routes: Routes = [
@@ -11,6 +12,7 @@ const routes: Routes = [
         component: PackagesDashboardComponent
     },
     {path: 'designer', component: DesignerComponent},
+    {path: 'package/:id', component: ConfigurationDashboardComponent},
     {path: 'createPackage', component: PackageCreationComponent},
 ];
 
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages.store.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages.store.ts
index b8aa73442..83c695f71 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages.store.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages.store.ts
@@ -24,7 +24,7 @@ import {BluePrintPage} from './model/BluePrint.model';
 import {Store} from '../../../common/core/stores/Store';
 import {PackagesApiService} from './packages-api.service';
 import {PackagesDashboardState} from './model/packages-dashboard.state';
-
+import {Observable, of} from 'rxjs';
 
 @Injectable({
     providedIn: 'root'
@@ -32,6 +32,7 @@ import {PackagesDashboardState} from './model/packages-dashboard.state';
 export class PackagesStore extends Store<PackagesDashboardState> {
     // TDOD fixed for now as there is no requirement to change it from UI
     public pageSize = 5;
+    private bluePrintContent: BluePrintPage = new BluePrintPage();
 
     constructor(private packagesServiceList: PackagesApiService) {
         super(new PackagesDashboardState());
@@ -50,6 +51,13 @@ export class PackagesStore extends Store<PackagesDashboardState> {
         }
     }
 
+    public filterByTags(tags: string[]) {
+        console.log(this.state.currentPage);
+        this.getPagedPackagesByTags(this.state.command, this.state.currentPage,
+            this.pageSize, this.state.sortBy, tags);
+
+    }
+
     public getPage(pageNumber: number, pageSize: number) {
         if (this.isCommandExist()) {
             this.searchPagedPackages(this.state.command, pageNumber, pageSize);
@@ -74,11 +82,13 @@ export class PackagesStore extends Store<PackagesDashboardState> {
                 this.setState({
                     ...this.state,
                     page: pages[0],
+                    filteredPackages: pages[0],
                     command: '',
                     totalPackages: pages[0].totalElements,
                     currentPage: pageNumber,
                     // this param is set only in get all as it represents the total number of pacakges in the server
                     totalPackagesWithoutSearchorFilters: pages[0].totalElements,
+                    tags: [],
                     sortBy
                 });
             });
@@ -90,9 +100,11 @@ export class PackagesStore extends Store<PackagesDashboardState> {
                 this.setState({
                     ...this.state,
                     page: pages[0],
+                    filteredPackages: pages[0],
                     command: keyWord,
                     totalPackages: pages[0].totalElements,
                     currentPage: pageNumber,
+                    tags: [],
                     sortBy
                 });
             });
@@ -101,4 +113,52 @@ export class PackagesStore extends Store<PackagesDashboardState> {
     private isCommandExist() {
         return this.state.command;
     }
+
+    private getPagedPackagesByTags(keyWord: string, currentPage1: number, pageSize: number, sortBy1: string, tagsSearchable: string[]) {
+        this.getPagedPackagesByKeyWordFilteredByTags(tagsSearchable)
+            .subscribe((pages: BluePrintPage) => {
+                this.setState({
+                    ...this.state,
+                    page: this.state.page,
+                    filteredPackages: pages,
+                    command: keyWord,
+                    tags: tagsSearchable,
+                    //  totalPackages: pages.totalElements,
+                    currentPage: currentPage1,
+                    sortBy: sortBy1,
+                    totalPackages: this.state.page.totalElements,
+                });
+            });
+    }
+
+    private getPagedPackagesByKeyWordFilteredByTags(tagsSearchable: string[]): Observable<any> {
+        this.bluePrintContent.content = [];
+        if (tagsSearchable && tagsSearchable.length !== 0 && !tagsSearchable.includes('All')) {
+            tagsSearchable.forEach(tag => {
+                if (tag) {
+                    this.state.page.content.forEach(bluePrintModel => {
+                        if (tag.endsWith(',')) {
+                            tag = tag.replace(',', '');
+                        }
+                        bluePrintModel.tags.split(',').forEach(bluePrintModelTag => {
+                            if (bluePrintModelTag === tag) {
+                                this.bluePrintContent.content.push(bluePrintModel);
+                            }
+                        });
+                    });
+                } else {
+                    this.getPagedPackages(this.state.currentPage, this.pageSize);
+                    return of(this.state.page);
+                }
+            });
+            this.bluePrintContent.content = this.bluePrintContent.content.filter((value, index, self) => self.indexOf(value) === index);
+            console.log('the lenght is ' + this.bluePrintContent.content.length);
+            return of(this.bluePrintContent);
+        } else {
+            this.getPagedPackages(this.state.currentPage, this.pageSize);
+            return of(this.state.page);
+        }
+    }
+
+
 }