fix: update shared filter module to use Luxon date adapter and adjust date formats (#2036)

## Description

- Fixed Angular Native Date module overriding Luxon DateAdapter (caused
by JsonFormsAngularMaterial library)
- Centered the dash in the date input box
- Added missing column fields to user external settings


## Motivation
Background on use case, changes needed


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

* Items added


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

* changes made


## 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

Enforce the Luxon date adapter with dynamic date formats in
SharedFilterModule, refine the date range input styling, and include
missing column type and format settings in table components.

Bug Fixes:
- Prevent Angular Native Date module from overriding the Luxon adapter
by moving the date adapter and MAT_DATE_FORMATS provider into
SharedFilterModule and removing the redundant provider from AppModule.

Enhancements:
- Center and color the date range input separator in
SharedFilterComponent to match the primary theme.
- Include 'type' and 'format' properties when saving column settings in
ProposalTableComponent and DatasetTableComponent.

Chores:
- Refactor shared module imports to ensure SharedFilterModule is
imported exactly once.

---------

Co-authored-by: Max Novelli <[email protected]>

Author: Junjiequan

cypress/e2e/datasets/datasets-metadata.cy.js

@@ -400,10 +400,10 @@ describe("Datasets", () => {
     });
   });
 
-  describe("Different metadata types", () => {
+  describe.only("Different metadata types", () => {
     it("should be able to add a metadata entry with type 'date'", () => {
       const newMetadataName = "Cypress dataset date metadata";
-      const metaDataInvalidValue = "20";
+      const metaDataInvalidValue = "20ab";
       const metadata = {
         value: "2025-03-05 10:48",
         name: "date_metadata",

src/app/app.module.ts

@@ -16,8 +16,6 @@ import { StoreModule } from "@ngrx/store";
 import { ApiModule, Configuration } from "@scicatproject/scicat-sdk-ts-angular";
 import { routerReducer } from "@ngrx/router-store";
 import { extModules } from "./build-specifics";
-import { MAT_DATE_FORMATS } from "@angular/material/core";
-
 import { MatProgressSpinnerModule } from "@angular/material/progress-spinner";
 import {
   MAT_FORM_FIELD_DEFAULT_OPTIONS,
@@ -130,23 +128,6 @@ const apiConfigurationFn = (
       },
       deps: [AppConfigService],
     },
-    {
-      provide: MAT_DATE_FORMATS,
-      useFactory: (appConfigService: AppConfigService) => {
-        const base =
-          appConfigService.getConfig().dateFormat || "yyyy-MM-dd HH:mm";
-        return {
-          parse: { dateInput: base },
-          display: {
-            dateInput: base,
-            monthYearLabel: "MMM yyyy",
-            dateA11yLabel: "LL",
-            monthYearA11yLabel: "MMMM yyyy",
-          },
-        };
-      },
-      deps: [AppConfigService],
-    },
     AuthService,
     AppThemeService,
     Title,

src/app/datasets/dataset-table/dataset-table.component.ts

@@ -214,14 +214,15 @@ export class DatasetTableComponent implements OnInit, OnDestroy {
   saveTableSettings(setting: ITableSetting) {
     this.pending = true;
     const columnsSetting = setting.columnSetting.map((column, index) => {
-      const { name, display, width, type } = column;
+      const { name, display, width, type, format } = column;
 
       return {
         name,
         enabled: !!(display === "visible"),
         order: index,
         width,
         type,
+        format,
       };
     });
     this.store.dispatch(

src/app/proposals/proposal-table/proposal-table.component.ts

@@ -243,13 +243,15 @@ export class ProposalTableComponent implements OnInit, OnDestroy {
   saveTableSettings(setting: ITableSetting) {
     this.pending = true;
     const columnsSetting = setting.columnSetting.map((column) => {
-      const { name, display, index, width } = column;
+      const { name, display, index, width, type, format } = column;
 
       return {
         name,
         enabled: !!(display === "visible"),
         order: index,
         width,
+        type,
+        format,
       };
     });
 

src/app/shared/modules/shared-filter/shared-filter.component.scss

@@ -6,6 +6,14 @@
   @include mat.form-field-density(-5);
 }
 
+::ng-deep .mat-date-range-input-wrapper {
+  min-width: 100px;
+}
+
+::ng-deep .mat-date-range-input-separator {
+  color: var(--theme-primary-default) !important;
+}
+
 .mat-mdc-form-field {
   width: 100%;
 }

src/app/shared/modules/shared-filter/shared-filter.module.ts

@@ -9,14 +9,16 @@ import { SharedFilterComponent } from "./shared-filter.component";
 import { ReactiveFormsModule } from "@angular/forms";
 import { MatFormFieldModule } from "@angular/material/form-field";
 import { MultiSelectFilterComponent } from "../filters/multiselect-filter.component";
-import { MatOptionModule } from "@angular/material/core";
+import { MAT_DATE_FORMATS, MatOptionModule } from "@angular/material/core";
 import { MatChipsModule } from "@angular/material/chips";
 import { NgxNumericRangeFormFieldModule } from "../numeric-range/ngx-numeric-range-form-field.module";
 import { MatAutocompleteModule } from "@angular/material/autocomplete";
 import { MatDividerModule } from "@angular/material/divider";
 import { MatCheckboxModule } from "@angular/material/checkbox";
 import { MatButtonModule } from "@angular/material/button";
 import { PipesModule } from "shared/pipes/pipes.module";
+import { provideLuxonDateAdapter } from "@angular/material-luxon-adapter";
+import { AppConfigService } from "app-config.service";
 
 @NgModule({
   declarations: [SharedFilterComponent, MultiSelectFilterComponent],
@@ -38,6 +40,29 @@ import { PipesModule } from "shared/pipes/pipes.module";
     MatChipsModule,
     NgxNumericRangeFormFieldModule,
   ],
+  // Force shared-filter to use the Luxon adapter.
+  // Needed because JsonFormsAngularMaterialModule brings in MatNativeDateModule,
+  // which otherwise switches the DateAdapter to the native one.
+  providers: [
+    provideLuxonDateAdapter(),
+    {
+      provide: MAT_DATE_FORMATS,
+      useFactory: (appConfigService: AppConfigService) => {
+        const base =
+          appConfigService.getConfig().dateFormat || "yyyy-MM-dd HH:mm";
+        return {
+          parse: { dateInput: base },
+          display: {
+            dateInput: base,
+            monthYearLabel: "MMM yyyy",
+            dateA11yLabel: "LL",
+            monthYearA11yLabel: "MMMM yyyy",
+          },
+        };
+      },
+      deps: [AppConfigService],
+    },
+  ],
   exports: [SharedFilterComponent, MultiSelectFilterComponent],
 })
 export class SharedFilterModule {}

src/app/shared/shared.module.ts

@@ -42,7 +42,6 @@ import { JsonformsAccordionRendererService } from "./services/jsonforms-accordio
     SearchParametersDialogModule,
     CommonModule,
     FormsModule,
-    SharedFilterModule,
     SharedTableModule,
     ScientificMetadataTreeModule,
     DynamicMatTableModule.forRoot({}),
@@ -51,6 +50,7 @@ import { JsonformsAccordionRendererService } from "./services/jsonforms-accordio
     JsonFormsModule,
     JsonFormsAngularMaterialModule,
     JsonFormsCustomRenderersModule,
+    SharedFilterModule,
   ],
   providers: [
     ConfigService,
@@ -72,7 +72,6 @@ import { JsonformsAccordionRendererService } from "./services/jsonforms-accordio
     TableModule,
     CommonModule,
     FormsModule,
-    SharedFilterModule,
     SharedTableModule,
     ScientificMetadataTreeModule,
     DynamicMatTableModule,
@@ -81,6 +80,7 @@ import { JsonformsAccordionRendererService } from "./services/jsonforms-accordio
     JsonFormsModule,
     JsonFormsAngularMaterialModule,
     JsonFormsCustomRenderersModule,
+    SharedFilterModule,
   ],
 })
 export class SharedScicatFrontendModule {}