fixing required inputs for save function

Issue-ID: CCSDK-2014
Signed-off-by: ShaabanEltanany <shaaban.eltanany.ext@orange.com>
Change-Id: Iec03932293f0c566333828fac24a071e3e719dfa

4 files changed, 72 insertions, 67 deletions

diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/metadata-tab/metadata-tab.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/metadata-tab/metadata-tab.component.html
index a9cde0eb9..9bd08b7cb 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/metadata-tab/metadata-tab.component.html
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/metadata-tab/metadata-tab.component.html
@@ -32,7 +32,7 @@
     <div class="single-line-model">
         <label class="label-name">Name <span>*</span></label>
         <div class="label-input">
-            <input type="input" [readOnly]="!packageNameAndVersionEnables" [(ngModel)]="metaDataTab.name"
+            <input type="input" [readOnly]="!packageNameAndVersionEnables" (change)="checkRequiredElements()" [(ngModel)]="metaDataTab.name"
                 placeholder="Package name">
         </div>
         <!--<div class="model-note-container error-message">
@@ -44,7 +44,7 @@
     <div class="single-line-model">
         <label class="label-name">Version <span>*</span></label>
         <div class="label-input">
-            <input type="input" [readOnly]="!packageNameAndVersionEnables" [(ngModel)]="metaDataTab.version"
+            <input type="input" [readOnly]="!packageNameAndVersionEnables" (change)="checkRequiredElements()" [(ngModel)]="metaDataTab.version"
                 (input)="validatePackageNameAndVersion()" [pattern]="versionPattern" placeholder="Example: 1.0.0">
         </div>
         <div class="model-note-container error-message">{{errorMessage}}</div>
@@ -52,7 +52,7 @@
     <div class="single-line-model">
         <label class="label-name">Description <span>*</span></label>
         <div class="label-input">
-            <input type="input" [(ngModel)]="metaDataTab.description" placeholder="Descripe the package">
+            <input type="input" [(ngModel)]="metaDataTab.description" (change)="checkRequiredElements()" placeholder="Descripe the package">
         </div>
     </div>
 
@@ -119,4 +119,4 @@
 
         </div>
     </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/metadata-tab/metadata-tab.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/metadata-tab/metadata-tab.component.ts
index c74a1e01e..c82ccc6b6 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/metadata-tab/metadata-tab.component.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/metadata-tab/metadata-tab.component.ts
@@ -1,8 +1,8 @@
-import { Component, OnInit } from '@angular/core';
-import { PackageCreationService } from '../package-creation.service';
-import { MetaDataTabModel } from '../mapping-models/metadata/MetaDataTab.model';
-import { PackageCreationStore } from '../package-creation.store';
-import { ActivatedRoute } from '@angular/router';
+import {Component, OnInit} from '@angular/core';
+import {PackageCreationService} from '../package-creation.service';
+import {MetaDataTabModel} from '../mapping-models/metadata/MetaDataTab.model';
+import {PackageCreationStore} from '../package-creation.store';
+import {ActivatedRoute} from '@angular/router';
 
 
 @Component({
@@ -16,7 +16,7 @@ export class MetadataTabComponent implements OnInit {
     tags = new Set<string>();
     customKeysMap = new Map();
     modes: any[] = [
-        { name: 'Designer Mode', style: 'mode-icon icon-topologyView-active' }];
+        {name: 'Designer Mode', style: 'mode-icon icon-topologyView-active'}];
     /*  {name: 'Scripting Mode', style: 'mode-icon icon-topologySource'},
       {name: 'Generic Script Mode', style: 'mode-icon icon-topologySource'}];*/
     modeType = this.modes[0].name;
@@ -104,8 +104,10 @@ export class MetadataTabComponent implements OnInit {
             this.packageCreationService.checkBluePrintNameAndVersion(this.metaDataTab.name, this.metaDataTab.version).then(element => {
                 if (element) {
                     this.errorMessage = 'Package name already exists with this version. Use different name or different version number.';
+                } else if (!this.metaDataTab.version.match(this.versionPattern)) {
+                    this.errorMessage = 'version should be as example 1.0.0';
                 } else {
-                    this.errorMessage = ' ';
+                    this.errorMessage = '';
                 }
             });
         }
@@ -115,4 +117,17 @@ export class MetadataTabComponent implements OnInit {
     saveMetaDataToStore() {
         this.packageCreationStore.changeMetaData(this.metaDataTab);
     }
+
+    checkRequiredElements() {
+        const newMetaData = new MetaDataTabModel();
+        newMetaData.description = this.metaDataTab.description;
+        newMetaData.name = this.metaDataTab.name;
+        newMetaData.version = this.metaDataTab.version;
+        newMetaData.templateTags = this.metaDataTab.templateTags;
+        newMetaData.mapOfCustomKey = this.metaDataTab.mapOfCustomKey;
+        newMetaData.mode = this.metaDataTab.mode;
+        this.packageCreationStore.changeMetaData(newMetaData);
+    }
+
+
 }
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 baf6ea9e3..7afea6b9a 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
@@ -20,35 +20,13 @@
         <div class="container-fluid body-container">
             <div class="container">
                 <div class="creat-action-container">
-                    <a class="action-button save" (click)="saveBluePrint()">
-                        <i class="icon-save-sm" aria-hidden="true"></i>
-                        <span>Save</span>
-                    </a>
-                    <a href="#" class="action-button" (click)="goBackToDashBorad()">
-                        <i class="icon-discard-sm" aria-hidden="true"></i>
-                        <span>Discard Changes</span>
-                    </a>
-
-                    <hr>
-                    <a href="#" class="action-button">
-                        <i class="icon-clone-sm" aria-hidden="true"></i>
-                        <span>Clone</span>
-                    </a>
-
-                    <a href="#" class="action-button">
-                        <i class="icon-archive-sm" aria-hidden="true"></i>
-                        <span>Archive</span>
-                    </a>
-
-                    <a href="#" class="action-button">
-                        <i class="icon-download" aria-hidden="true"></i>
-                        <span>Download</span>
-                    </a>
-
-                    <a href="#" class="action-button delete">
-                        <i class="icon-delete-sm" aria-hidden="true"></i>
-                        <span>Delete</span>
-                    </a>
+                    <!--  <a class="action-button save" [hidden]="!isSaveEnabled" (click)="saveBluePrint()">
+                          <i class="icon-save-sm" aria-hidden="true"></i>
+                          <span>Save</span>-->
+                    <button (click)="saveBluePrint()" [disabled]="!isSaveEnabled"
+                            class="action-button save" aria-hidden="true"><i class="icon-save-sm"
+                                                                                          aria-hidden="true"></i>
+                        <span>Save</span></button>
                 </div>
 
 
@@ -57,17 +35,17 @@
                     <div class="col">
                         <div class="nav nav-tabs " id="nav-tab" role="tablist">
                             <a class="nav-item nav-link active" id="nav-metadata-tab" data-toggle="tab"
-                                href="#nav-metadata" role="tab" aria-controls="nav-metadata" aria-selected="false"
-                                autofocus #nameit (focusout)="test()">METADATA</a>
+                               href="#nav-metadata" role="tab" aria-controls="nav-metadata" aria-selected="false"
+                               autofocus #nameit (focusout)="test()">METADATA</a>
                             <a class="nav-item nav-link" id="nav-template-tab" data-toggle="tab" href="#nav-template"
-                                role="tab" aria-controls="nav-template" aria-selected="false">TEMPLATE & MAPPING</a>
+                               role="tab" aria-controls="nav-template" aria-selected="false">TEMPLATE & MAPPING</a>
                             <a class="nav-item nav-link" id="nav-scripts-tab" data-toggle="tab" href="#nav-scripts"
-                                role="tab" aria-controls="nav-scripts" aria-selected="false">SCRIPTS</a>
+                               role="tab" aria-controls="nav-scripts" aria-selected="false">SCRIPTS</a>
                             <a class="nav-item nav-link" id="nav-imports-tab" data-toggle="tab" href="#nav-imports"
-                                role="tab" aria-controls="nav-imports" aria-selected="false">DEFINITIONS</a>
+                               role="tab" aria-controls="nav-imports" aria-selected="false">DEFINITIONS</a>
                             <a class="nav-item nav-link" id="nav-authentication-tab" data-toggle="tab"
-                                href="#nav-authentication" role="tab" aria-controls="nav-authentication"
-                                aria-selected="false">EXTERNAL SYSTEM AUTHENTICATION PROPERTIES</a>
+                               href="#nav-authentication" role="tab" aria-controls="nav-authentication"
+                               aria-selected="false">EXTERNAL SYSTEM AUTHENTICATION PROPERTIES</a>
                         </div>
                     </div>
 
@@ -76,24 +54,24 @@
                     <div class="col">
                         <div class="tab-content" id="nav-tabContent">
                             <div class="tab-pane fade show active" id="nav-metadata" role="tabpanel"
-                                aria-labelledby="nav-metadata-tab">
+                                 aria-labelledby="nav-metadata-tab">
                                 <app-metadata-tab></app-metadata-tab>
                             </div>
                             <div class="tab-pane fade" id="nav-template" role="tabpanel"
-                                aria-labelledby="nav-template-tab">
+                                 aria-labelledby="nav-template-tab">
                                 <app-template-mapping></app-template-mapping>
                             </div>
                             <div class="tab-pane fade" id="nav-scripts" role="tabpanel"
-                                aria-labelledby="nav-scripts-tab">
+                                 aria-labelledby="nav-scripts-tab">
                                 <app-scripts-tab></app-scripts-tab>
                             </div>
                             <div class="tab-pane fade" id="nav-imports" role="tabpanel"
-                                aria-labelledby="nav-imports-tab">
+                                 aria-labelledby="nav-imports-tab">
                                 <app-imports-tab></app-imports-tab>
 
                             </div>
                             <div class="tab-pane fade" id="nav-authentication" role="tabpanel"
-                                aria-labelledby="nav-authentication-tab">
+                                 aria-labelledby="nav-authentication-tab">
                                 <div class="card creat-card">
                                     <div class="editor-container">
                                         <app-dsl-definitions-tab></app-dsl-definitions-tab>
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 0c5885cef..bba45c810 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
@@ -19,18 +19,18 @@ limitations under the License.
 ============LICENSE_END============================================
 */
 
-import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
-import { FilesContent, FolderNodeElement, MetaDataTabModel } from './mapping-models/metadata/MetaDataTab.model';
+import {Component, ElementRef, OnInit, ViewChild} from '@angular/core';
+import {FilesContent, FolderNodeElement, MetaDataTabModel} from './mapping-models/metadata/MetaDataTab.model';
 
 import * as JSZip from 'jszip';
-import { PackageCreationStore } from './package-creation.store';
-import { Definition } from './mapping-models/CBAPacakge.model';
-import { PackageCreationModes } from './creationModes/PackageCreationModes';
-import { PackageCreationBuilder } from './creationModes/PackageCreationBuilder';
-import { PackageCreationUtils } from './package-creation.utils';
-import { MetadataTabComponent } from './metadata-tab/metadata-tab.component';
-import { Router } from '@angular/router';
-import { ToastrService } from 'ngx-toastr';
+import {PackageCreationStore} from './package-creation.store';
+import {Definition} from './mapping-models/CBAPacakge.model';
+import {PackageCreationModes} from './creationModes/PackageCreationModes';
+import {PackageCreationBuilder} from './creationModes/PackageCreationBuilder';
+import {PackageCreationUtils} from './package-creation.utils';
+import {MetadataTabComponent} from './metadata-tab/metadata-tab.component';
+import {Router} from '@angular/router';
+import {ToastrService} from 'ngx-toastr';
 
 
 @Component({
@@ -52,22 +52,34 @@ 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' }];
+        {name: 'Designer Mode', style: 'mode-icon icon-designer-mode'},
+        {name: 'Scripting Mode', style: 'mode-icon icon-scripting-mode'}];
     metaDataTab: MetaDataTabModel = new MetaDataTabModel();
     folder: FolderNodeElement = new FolderNodeElement();
     zipFile: JSZip = new JSZip();
     filesData: any = [];
     definition: Definition = new Definition();
+    isSaveEnabled = false;
 
-    @ViewChild(MetadataTabComponent, { static: false })
+    @ViewChild(MetadataTabComponent, {static: false})
     metadataTabComponent: MetadataTabComponent;
 
-    @ViewChild('nameit', { static: true })
+    @ViewChild('nameit', {static: true})
     elementRef: ElementRef;
+    versionPattern = '^(\\d+\\.)?(\\d+\\.)?(\\*|\\d+)$';
 
     ngOnInit() {
         this.elementRef.nativeElement.focus();
+        const regexp = RegExp(this.versionPattern);
+        this.packageCreationStore.state$.subscribe(cbaPackage => {
+            if (cbaPackage && cbaPackage.metaData && cbaPackage.metaData.description
+                && cbaPackage.metaData.name && cbaPackage.metaData.version &&
+                regexp.test(cbaPackage.metaData.version)) {
+                this.isSaveEnabled = true;
+            } else {
+                this.isSaveEnabled = false;
+            }
+        });
     }
 
     saveBluePrint() {
@@ -90,7 +102,7 @@ export class PackageCreationComponent implements OnInit {
 
     saveBluePrintToDataBase() {
         this.create();
-        this.zipFile.generateAsync({ type: 'blob' })
+        this.zipFile.generateAsync({type: 'blob'})
             .then(blob => {
                 this.packageCreationStore.saveBluePrint(blob).subscribe(
                     bluePrintDetailModels => {