Validate date on frontend

Author: AramAlsabti

src/app/shared/components/forms/form-body-application/form-body-application.component.ts

@@ -142,6 +142,15 @@ export class FormBodyApplicationComponent implements OnInit, OnDestroy {
     }
 
     onSubmit(): void {
+        if (this.serializedStartDate.invalid) {
+            // Depending on what date component is used, it might use its own highlighting
+            this.handleError(this.buildErrorMessage('MESSAGE.INVALID-DATE'), 'application.startDate');
+            return;
+        } else if (this.serializedEndDate.invalid) {
+            this.handleError(this.buildErrorMessage('MESSAGE.INVALID-DATE'), 'application.endDate');
+            return;
+        }
+
         this.application.organizationId = this.sharedVariableService.getSelectedOrganisationId();
         this.application.startDate = this.serializedStartDate.value?.toISOString();
         this.application.endDate = this.serializedEndDate.value?.toISOString();
@@ -154,6 +163,14 @@ export class FormBodyApplicationComponent implements OnInit, OnDestroy {
         }
     }
 
+    private buildErrorMessage(message: string): Pick<HttpErrorResponse, 'error'> {
+      return {
+        error: {
+          message,
+        },
+      };
+    }
+
     updateApplication(id: number): void {
         this.applicationService
             .updateApplication(this.application, id)
@@ -181,21 +198,21 @@ export class FormBodyApplicationComponent implements OnInit, OnDestroy {
             );
     }
 
-    private handleError(error: HttpErrorResponse) {
+    private handleError(error: Pick<HttpErrorResponse, 'error'>, errorField?: string) {
         this.errorFields = [];
         this.errorMessages = [];
 
         // Temp fix till we standardise backend error handling
         if (error.error?.message[0]?.property) {
             this.externalError(error);
         } else {
-            this.backendError(error);
+            this.backendError(error, errorField);
         }
 
         this.formFailedSubmit = true;
     }
 
-    externalError(error: HttpErrorResponse) {
+    externalError(error: Pick<HttpErrorResponse, 'error'>) {
         error.error.message.forEach((err) => {
             this.errorFields.push(err.property);
             this.errorMessages = this.errorMessages.concat(
@@ -205,12 +222,12 @@ export class FormBodyApplicationComponent implements OnInit, OnDestroy {
         this.formFailedSubmit = true;
     }
 
-    backendError(error: HttpErrorResponse) {
+    backendError(error: Pick<HttpErrorResponse, 'error'>, errorField = 'name') {
         this.translate.get([error.error.message])
             .subscribe(translations => {
                 this.errorMessages.push(translations[error.error.message]);
             });
-        this.errorFields.push('name');
+        this.errorFields.push(errorField);
     }
 
     routeBack(): void {

src/app/shared/components/metadata-details/metadata-details.component.html

@@ -1,4 +1,4 @@
-<p *ngIf="status">
+<p *ngIf="status && status !== ApplicationStatus.NONE">
   <strong>{{ 'APPLICATION.METADATA-FIELD.STATUS' | translate }}</strong>{{ 'APPLICATION.STATUS.' + status | translate }}
 </p>
 <p *ngIf="startDate">

src/app/shared/components/metadata-details/metadata-details.component.ts

@@ -28,6 +28,7 @@ export class MetadataDetailsComponent implements OnInit {
 
   entries = Object.entries;
   toPascalKebabCase = toPascalKebabCase;
+  ApplicationStatus = ApplicationStatus;
 
   constructor(private translate: TranslateService) {}
 

src/assets/i18n/da.json

@@ -762,7 +762,8 @@
     "APPLICATION-DOES-NOT-EXIST": "Den tilhørende applikation findes ikke",
     "FAILED-TO-CREATE-OR-UPDATE-IOT-DEVICE": "Enheden kunne ikke oprettes eller opdateres",
     "DEVICE-MODEL-ORGANIZATION-DOES-NOT-MATCH": "Organisationsid'et på device modellen matcher ikke den tilhørende applikation",
-    "DEVICE-MODEL-DOES-NOT-EXIST": "Device model findes ikke"
+    "DEVICE-MODEL-DOES-NOT-EXIST": "Device model findes ikke",
+    "INVALID-DATE": "Datoen er ugyldig"
   },
   "PROFILES": {
     "NAME": "LoRaWAN profiler",