refactor(date picker): implement date picker as standalone component (#…

…1251)
dasch-swiss · Oct 31, 2023 · e89dba8 · e89dba8
1 parent e2ddcdd
commit e89dba8
Show file tree

Hide file tree

Showing 6 changed files with 30 additions and 43 deletions.
diff --git a/apps/dsp-app/src/app/app.module.ts b/apps/dsp-app/src/app/app.module.ts
@@ -157,7 +157,7 @@ import {
     BuildTagToken,
 } from '@dasch-swiss/vre/shared/app-config';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
-import { AppDatePickerModule } from '@dasch-swiss/vre/shared/app-date-picker';
+import { AppDatePickerComponent } from '@dasch-swiss/vre/shared/app-date-picker';
 import { AdvancedSearchComponent } from '@dasch-swiss/vre/advanced-search';
 import { AppProgressIndicatorComponent } from "@dasch-swiss/vre/shared/app-progress-indicator";
 import {AppStringLiteralComponent} from "@dasch-swiss/vre/shared/app-string-literal";
@@ -295,7 +295,7 @@ export function httpLoaderFactory(httpClient: HttpClient) {
     ],
     imports: [
         AngularSplitModule,
-        AppDatePickerModule,
+        AppDatePickerComponent,
         AppProgressIndicatorComponent,
         AppRoutingModule,
         BrowserAnimationsModule,

diff --git a/...nced-search/src/lib/ui/property-form/property-form-value/property-form-value.component.ts b/...nced-search/src/lib/ui/property-form/property-form-value/property-form-value.component.ts
@@ -15,21 +15,21 @@ import { MatInputModule } from '@angular/material/input';
 import { MatMenuModule } from '@angular/material/menu';
 import { MatButtonModule } from '@angular/material/button';
 import { ErrorStateMatcher } from '@angular/material/core';
-import { AppDatePickerModule } from '@dasch-swiss/vre/shared/app-date-picker';
 import { ResourceLabel } from '../../../data-access/advanced-search-service/advanced-search.service';
 import { PropertyFormItem } from '../../../data-access/advanced-search-store/advanced-search-store.service';
+import { AppDatePickerComponent } from '@dasch-swiss/vre/shared/app-date-picker';
 @Component({
     selector: 'dasch-swiss-property-form-value',
     standalone: true,
     imports: [
+        AppDatePickerComponent,
         CommonModule,
         MatButtonModule,
         MatInputModule,
         MatMenuModule,
         MatSelectModule,
         FormsModule,
         ReactiveFormsModule,
-        AppDatePickerModule,
     ],
     templateUrl: './property-form-value.component.html',
     styleUrls: ['./property-form-value.component.scss'],

diff --git a/libs/vre/shared/app-date-picker/src/index.ts b/libs/vre/shared/app-date-picker/src/index.ts
@@ -1 +1 @@
-export * from './lib/app-date-picker.module';
+export * from './lib/app-date-picker/app-date-picker.component';
diff --git a/libs/vre/shared/app-date-picker/src/lib/app-date-picker.module.ts b/libs/vre/shared/app-date-picker/src/lib/app-date-picker.module.ts
diff --git a/libs/vre/shared/app-date-picker/src/lib/app-date-picker/app-date-picker.component.spec.ts b/libs/vre/shared/app-date-picker/src/lib/app-date-picker/app-date-picker.component.spec.ts
@@ -17,8 +17,8 @@ describe('DatePickerComponent', () => {
 
     beforeEach(async () => {
         await TestBed.configureTestingModule({
-            declarations: [AppDatePickerComponent],
             imports: [
+                AppDatePickerComponent,
                 BrowserAnimationsModule,
                 MatButtonModule,
                 MatButtonToggleModule,

diff --git a/libs/vre/shared/app-date-picker/src/lib/app-date-picker/app-date-picker.component.ts b/libs/vre/shared/app-date-picker/src/lib/app-date-picker/app-date-picker.component.ts
@@ -23,17 +23,17 @@ import {
     FormGroupDirective,
     NgControl,
     NgForm,
-    Validators,
+    Validators, FormsModule, ReactiveFormsModule
 } from '@angular/forms';
 import {
     CanUpdateErrorState,
     ErrorStateMatcher,
     mixinErrorState,
     _AbstractConstructor,
-    _Constructor,
+    _Constructor, MatOptionModule
 } from '@angular/material/core';
-import { MatFormFieldControl } from '@angular/material/form-field';
-import { MatMenuTrigger } from '@angular/material/menu';
+import { MatFormFieldControl, MatFormFieldModule } from '@angular/material/form-field';
+import { MatMenuModule, MatMenuTrigger } from '@angular/material/menu';
 import { KnoraDate } from '@dasch-swiss/dsp-js';
 import { Subject } from 'rxjs';
 import {
@@ -43,6 +43,12 @@ import {
     IslamicCalendarDate,
     JulianCalendarDate,
 } from '@dasch-swiss/jdnconvertiblecalendar';
+import { CommonModule } from '@angular/common';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { MatButtonModule } from '@angular/material/button';
+import { MatButtonToggleModule } from '@angular/material/button-toggle';
+import { MatSelectModule } from '@angular/material/select';
 
 /** error when invalid control is dirty, touched, or submitted. */
 export class DatePickerErrorStateMatcher implements ErrorStateMatcher {
@@ -85,9 +91,23 @@ const _MatInputMixinBase: CanUpdateErrorStateCtor & typeof MatInputBase =
     mixinErrorState(MatInputBase);
 
 @Component({
+    standalone: true,
     selector: 'dasch-swiss-app-date-picker',
     templateUrl: './app-date-picker.component.html',
     styleUrls: ['./app-date-picker.component.scss'],
+    imports: [
+        CommonModule,
+        FormsModule,
+        ReactiveFormsModule,
+        MatIconModule,
+        MatInputModule,
+        MatFormFieldModule,
+        MatOptionModule,
+        MatMenuModule,
+        MatButtonModule,
+        MatButtonToggleModule,
+        MatSelectModule,
+    ]
 })
 export class AppDatePickerComponent
     extends _MatInputMixinBase