fix: improve date validation for string type metadata (#1797)

## Description

Fixes issues found in the dataset metadata while testing in develop
server with more relevant data.


## Motivation
There were bugs found in develop while testing and also some
improvements needed.


## Fixes:
Please provide a list of the fixes implemented in this PR

* Fixes an issue where invalid dates were being considered valid
* Full screen mode didn't show the menu if you click on the three dots.


## Changes:
Please provide a list of the changes implemented by this PR

* changes are only in the metadata view and the dynamic material table
module


## Tests included
- [ ] Included for each change/fix?
- [ ] Passing? (Merge will not be approved unless this is checked) 

## Documentation
- [ ] swagger documentation updated \[required\]
- [ ] official documentation updated \[nice-to-have\]

### official documentation info
If you have updated the official documentation, please provide PR # and
URL of the pages where the updates are included

## Backend version
- [ ] Does it require a specific version of the backend
- which version of the backend is required:

## Summary by Sourcery

Bug Fixes:
- Fixes an issue where invalid dates were being considered valid.

## Summary by Sourcery

Improve date validation and metadata display in scientific metadata view

New Features:
- Added a method to generate human-readable names for metadata entries

Bug Fixes:
- Fixed invalid date validation to correctly identify and handle date
strings
- Resolved an issue with full-screen mode menu display

Enhancements:
- Refactored metadata name display logic to use a more consistent
human-readable name generation
- Improved date validation checks to be more robust

Author: martin-trajanovski

src/app/shared/modules/dynamic-material-table/table/dynamic-mat-table.module.ts

@@ -27,7 +27,11 @@ import { MatMenuModule } from "@angular/material/menu";
 import { MatTooltipModule } from "@angular/material/tooltip";
 import { MatRippleModule } from "@angular/material/core";
 import { TooltipComponent } from "../tooltip/tooltip.component";
-import { OverlayModule } from "@angular/cdk/overlay";
+import {
+  FullscreenOverlayContainer,
+  OverlayContainer,
+  OverlayModule,
+} from "@angular/cdk/overlay";
 import { TooltipDirective } from "../tooltip/tooltip.directive";
 import { TemplateOrStringDirective } from "../tooltip/template-or-string.directive";
 import { FormsModule } from "@angular/forms";
@@ -71,6 +75,12 @@ const ExtensionsModule = [HeaderFilterModule, RowMenuModule];
     TooltipDirective,
     TemplateOrStringDirective,
   ],
+  providers: [
+    {
+      provide: OverlayContainer,
+      useClass: FullscreenOverlayContainer,
+    },
+  ],
 })
 export class DynamicMatTableModule {
   static forRoot(

src/app/shared/modules/scientific-metadata/metadata-view/metadata-view.component.ts

@@ -5,7 +5,6 @@ import {
   OnChanges,
   SimpleChange,
 } from "@angular/core";
-import { DateTime } from "luxon";
 import {
   ScientificMetadataTableData,
   ScientificMetadata,
@@ -22,6 +21,7 @@ import { ReplaceUnderscorePipe } from "shared/pipes/replace-underscore.pipe";
 import { DatePipe, TitleCasePipe } from "@angular/common";
 import { LinkyPipe } from "ngx-linky";
 import { PrettyUnitPipe } from "shared/pipes/pretty-unit.pipe";
+import { DateTime } from "luxon";
 import { MetadataTypes } from "../metadata-edit/metadata-edit.component";
 
 @Component({
@@ -83,14 +83,6 @@ export class MetadataViewComponent implements OnInit, OnChanges {
             header: "Name",
             name: "human_name",
             width: 250,
-            customRender: (column, row) => {
-              return (
-                row[column.name] ||
-                this.titleCase.transform(
-                  this.replaceUnderscore.transform(row.name),
-                )
-              );
-            },
           },
           {
             name: "name",
@@ -161,12 +153,19 @@ export class MetadataViewComponent implements OnInit, OnChanges {
     public prettyUnit: PrettyUnitPipe,
   ) {}
 
+  getHumanReadableName(name: string): string {
+    return this.titleCase.transform(this.replaceUnderscore.transform(name));
+  }
+
   createMetadataArray(
     metadata: Record<string, any>,
   ): ScientificMetadataTableData[] {
     const metadataArray: ScientificMetadataTableData[] = [];
     Object.keys(metadata).forEach((key) => {
       let metadataObject: ScientificMetadataTableData;
+      const humanReadableName =
+        metadata[key]["human_name"] || this.getHumanReadableName(key);
+
       if (
         typeof metadata[key] === "object" &&
         "value" in (metadata[key] as ScientificMetadata)
@@ -175,7 +174,7 @@ export class MetadataViewComponent implements OnInit, OnChanges {
           name: key,
           value: metadata[key]["value"],
           unit: metadata[key]["unit"],
-          human_name: metadata[key]["human_name"],
+          human_name: humanReadableName,
           type: metadata[key]["type"],
           ontology_reference: metadata[key]["ontology_reference"],
         };
@@ -196,7 +195,7 @@ export class MetadataViewComponent implements OnInit, OnChanges {
           name: key,
           value: metadataValue,
           unit: "",
-          human_name: metadata[key]["human_name"],
+          human_name: humanReadableName,
           type: metadata[key]["type"],
           ontology_reference: metadata[key]["ontology_reference"],
         };
@@ -212,10 +211,12 @@ export class MetadataViewComponent implements OnInit, OnChanges {
       return true;
     }
 
-    if (
+    const isValidDate =
       typeof scientificMetadata.value !== "number" &&
-      DateTime.fromISO(scientificMetadata.value).isValid
-    ) {
+      new Date(scientificMetadata.value).toString() !== "Invalid Date" &&
+      DateTime.fromISO(scientificMetadata.value).isValid;
+
+    if (isValidDate) {
       return true;
     }