fixing metadata at editing package

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

2 files changed, 25 insertions, 13 deletions

diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.html
index 0d0f5ef93..1e5b18d43 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.html
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.html
@@ -26,7 +26,8 @@
                         <i class="icon-save-sm" aria-hidden="true"></i>
                         <span>Save</span>
                     </button>
-                    <button data-target="#discardChangesModal" data-toggle="modal" class="action-button" [disabled]="!isSaveEnabled">
+                    <button data-target="#discardChangesModal" data-toggle="modal" class="action-button"
+                            [disabled]="!isSaveEnabled">
                         <i class="icon-discard-sm" aria-hidden="true"></i>
                         <span>Discard Changes</span>
                     </button>
@@ -682,7 +683,7 @@
                     <!--Nav Tabs-->
                     <div class="col">
                         <div class="nav nav-tabs " id="nav-tab" role="tablist">
-                            <a class="nav-item nav-link active complete" id="nav-metadata-tab" data-toggle="tab"
+                            <a [classList]="metadataClasses" id="nav-metadata-tab" data-toggle="tab"
                                href="#nav-metadata" role="tab" aria-controls="nav-metadata" aria-selected="true"
                                autofocus #nameit (focusout)="saveMetaData()">METADATA</a>
                             <a class="nav-item nav-link" id="nav-template-tab" data-toggle="tab" href="#nav-template"
@@ -702,7 +703,7 @@
                     <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" (click)="clickEvent()">
                                 <app-metadata-tab></app-metadata-tab>
                             </div>
                             <div class="tab-pane fade" id="nav-template" role="tabpanel"
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.ts
index a69e45fce..764a5b9b1 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.ts
@@ -41,6 +41,7 @@ export class ConfigurationDashboardComponent implements OnInit {
     vlbDefinition: VlbDefinition = new VlbDefinition();
     isSaveEnabled = false;
     versionPattern = '^(\\d+\\.)?(\\d+\\.)?(\\*|\\d+)$';
+    metadataClasses = 'nav-item nav-link active';
 
     constructor(
         private route: ActivatedRoute,
@@ -58,17 +59,22 @@ export class ConfigurationDashboardComponent implements OnInit {
 
         this.elementRef.nativeElement.focus();
         this.refreshCurrentPackage();
-
         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;
-            }
-        });
+        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;
+                    if (!this.metadataClasses.includes('complete')) {
+                        this.metadataClasses += 'complete';
+                    }
+                } else {
+                    this.metadataClasses = this.metadataClasses.replace('complete', '');
+                    this.isSaveEnabled = false;
+                }
+
+            });
     }
 
     private refreshCurrentPackage() {
@@ -172,6 +178,7 @@ export class ConfigurationDashboardComponent implements OnInit {
 
     saveMetaData() {
         this.metadataTabComponent.saveMetaDataToStore();
+
     }
 
     getMetaDataTabInfo(fileData: string) {
@@ -292,4 +299,8 @@ export class ConfigurationDashboardComponent implements OnInit {
                 console.log('Error -' + error.message);
             });
     }
+
+    clickEvent() {
+        this.isSaveEnabled = true;
+    }
 }