[CORE-6751] title max length

package.json

@@ -91,5 +91,6 @@
     "ts-node": "~8.3.0",
     "typescript": "~4.9.5"
   },
-  "description": "Practera CUTIE project"
+  "description": "Practera CUTIE project",
+  "packageManager": "[email protected]+sha1.4ba7fc5c6e704fce2066ecbfb0b0d8976fe62447"
 }

src/app/metrics/update-metric/update-metric.component.html

@@ -20,7 +20,12 @@
       <ion-card-content>
         <ion-item>
           <ion-input labelPlacement="stacked" formControlName="name">
-            <div slot="label">Title<ion-text color="danger">*</ion-text></div>
+            <div slot="label">
+              Title<ion-text color="danger">*</ion-text>
+              <ion-text color="danger" *ngIf="metricForm.controls.name.errors?.maxlength">
+                (Title must be less than 64 characters)
+              </ion-text>
+            </div>
           </ion-input>
         </ion-item>
         <ion-item>
@@ -108,7 +113,7 @@
 <ion-footer>
   <ion-toolbar>
     <ion-buttons slot="end">
-      <ion-button (click)="saveMetric()">Save Changes</ion-button>
+      <ion-button (click)="saveMetric()" [disabled]="metricForm.invalid">Save Changes</ion-button>
     </ion-buttons>
   </ion-toolbar>
 </ion-footer>

src/app/metrics/update-metric/update-metric.component.ts

@@ -1,5 +1,5 @@
 import { AfterViewInit, Component, OnDestroy } from '@angular/core';
-import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { AbstractControl, FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { Metric, MetricsService } from '../metrics.service';
 import { ModalController, ToastController } from '@ionic/angular';
 import { Subject, takeUntil } from 'rxjs';
@@ -36,7 +36,10 @@ export class UpdateMetricComponent implements AfterViewInit, OnDestroy {
     this.metricForm = this.formBuilder.group({
       id: [''],
       uuid: [''],
-      name: ['', Validators.required],
+      name: ['', [
+        Validators.required, 
+        Validators.maxLength(64),
+      ]],
       description: [''],
       dataSource: [''],
       aggregation: ['', Validators.required],
@@ -117,9 +120,15 @@ export class UpdateMetricComponent implements AfterViewInit, OnDestroy {
       });
     }
 
+    let errorMessage = 'Please fill out all required fields';
+    const titleInput: AbstractControl = this.metricForm.get('name');
+    if (titleInput.hasError('maxlength')) {
+      errorMessage = `Title must be less than ${titleInput.errors.maxlength.requiredLength} characters. You have entered ${titleInput.errors.maxlength.actualLength} characters.`;
+    }
+
     return this.notificationService.alert({
       header: 'Invalid Form',
-      message: 'Please fill out all required fields',
+      message: errorMessage,
       buttons: ['OK']
     });
   }