feat(dh): date range picker component

apps/datahub/src/app/app.module.ts

@@ -76,7 +76,6 @@ import { RecordOtherlinksComponent } from './record/record-otherlinks/record-oth
 import { RecordDownloadsComponent } from './record/record-downloads/record-downloads.component'
 import { RecordApisComponent } from './record/record-apis/record-apis.component'
 import { MatTabsModule } from '@angular/material/tabs'
-import { CustomApiComponent } from './record/custom-api/custom-api.component'
 
 export const metaReducers: MetaReducer[] = !environment.production ? [] : []
 // https://github.com/nrwl/nx/issues/191
@@ -101,7 +100,6 @@ export const metaReducers: MetaReducer[] = !environment.production ? [] : []
     RecordOtherlinksComponent,
     RecordDownloadsComponent,
     RecordApisComponent,
-    CustomApiComponent,
   ],
   imports: [
     BrowserModule,

apps/datahub/src/app/record/record-metadata/record-metadata.component.html

@@ -126,7 +126,7 @@
       ></datahub-record-apis>
     </div>
   </div>
-  <datahub-custom-api *ngIf="custom"></datahub-custom-api>
+  <gn-ui-custom-api *ngIf="custom"></gn-ui-custom-api>
 
   <div id="related-records" *ngIf="displayRelated$ | async">
     <div>

apps/datahub/src/app/record/custom-api/custom-api.component.html → libs/ui/elements/src/lib/custom-api/custom-api.component.html

@@ -27,6 +27,7 @@
       </div>
       <div class="flex flex-col">
         <p>Intervalle de temps</p>
+        <gn-ui-date-range-picker></gn-ui-date-range-picker>
       </div>
     </div>
   </div>

apps/datahub/src/app/record/custom-api/custom-api.component.ts → libs/ui/elements/src/lib/custom-api/custom-api.component.ts

@@ -1,7 +1,7 @@
 import { Component } from '@angular/core'
 
 @Component({
-  selector: 'datahub-custom-api',
+  selector: 'gn-ui-custom-api',
   templateUrl: './custom-api.component.html',
   styleUrls: ['./custom-api.component.css'],
 })

libs/ui/elements/src/lib/ui-elements.module.ts

@@ -27,6 +27,7 @@ import { AvatarComponent } from './avatar/avatar.component'
 import { UserPreviewComponent } from './user-preview/user-preview.component'
 import { GnUiLinkifyDirective } from './metadata-info/linkify.directive'
 import { PaginationButtonsComponent } from './pagination-buttons/pagination-buttons.component'
+import { CustomApiComponent } from './custom-api/custom-api.component'
 
 @NgModule({
   imports: [
@@ -61,6 +62,7 @@ import { PaginationButtonsComponent } from './pagination-buttons/pagination-butt
     UserPreviewComponent,
     GnUiLinkifyDirective,
     PaginationButtonsComponent,
+    CustomApiComponent,
   ],
   exports: [
     MetadataInfoComponent,
@@ -80,6 +82,7 @@ import { PaginationButtonsComponent } from './pagination-buttons/pagination-butt
     AvatarComponent,
     UserPreviewComponent,
     PaginationButtonsComponent,
+    CustomApiComponent,
   ],
 })
 export class UiElementsModule {}

libs/ui/inputs/src/lib/date-range-picker/date-range-picker.component.html

@@ -0,0 +1,26 @@
+<div
+  class="flex items-center justify-center w-64 h-11 rounded-lg border border-gray-300 bg-white"
+>
+  <div class="w-48 flex justify-between">
+    <mat-date-range-input [rangePicker]="picker" class="w-full">
+      <input
+        class="w-24 text-black font-basierCircle text-base font-medium text-center"
+        matStartDate
+        placeholder="Start date"
+        (dateInput)="startDateSelected($event)"
+      />
+      <input
+        class="w-24 text-black font-basierCircle text-base font-medium text-center"
+        matEndDate
+        placeholder="End date"
+        (dateInput)="endDateSelected($event)"
+      />
+    </mat-date-range-input>
+  </div>
+  <mat-datepicker-toggle matSuffix [for]="picker">
+    <!-- <mat-icon class="text-primary material-symbols-outlined"
+      >open_in_new</mat-icon
+    > -->
+  </mat-datepicker-toggle>
+  <mat-date-range-picker #picker></mat-date-range-picker>
+</div>

libs/ui/inputs/src/lib/date-range-picker/date-range-picker.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing'
+import { DateRangePickerComponent } from './date-range-picker.component'
+
+describe('DateRangePickerComponent', () => {
+  let component: DateRangePickerComponent
+  let fixture: ComponentFixture<DateRangePickerComponent>
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [DateRangePickerComponent],
+    }).compileComponents()
+
+    fixture = TestBed.createComponent(DateRangePickerComponent)
+    component = fixture.componentInstance
+    fixture.detectChanges()
+  })
+
+  it('should create', () => {
+    expect(component).toBeTruthy()
+  })
+})

libs/ui/inputs/src/lib/date-range-picker/date-range-picker.component.ts

@@ -0,0 +1,20 @@
+import { Component } from '@angular/core'
+import { MatDatepickerInputEvent } from '@angular/material/datepicker'
+
+@Component({
+  selector: 'gn-ui-date-range-picker',
+  templateUrl: './date-range-picker.component.html',
+  styleUrls: ['./date-range-picker.component.css'],
+})
+export class DateRangePickerComponent {
+  startDate: Date
+  endDate: Date
+
+  startDateSelected(event: MatDatepickerInputEvent<Date>) {
+    this.startDate = event.value
+  }
+
+  endDateSelected(event: MatDatepickerInputEvent<Date>) {
+    this.endDate = event.value
+  }
+}

libs/ui/inputs/src/lib/ui-inputs.module.ts

@@ -34,6 +34,11 @@ import { CheckToggleComponent } from './check-toggle/check-toggle.component'
 import { CopyTextButtonComponent } from './copy-text-button/copy-text-button.component'
 import { MatTooltipModule } from '@angular/material/tooltip'
 import { CommonModule } from '@angular/common'
+import { DateRangePickerComponent } from './date-range-picker/date-range-picker.component'
+import { MatFormFieldModule } from '@angular/material/form-field'
+import { MatInputModule } from '@angular/material/input'
+import { MatDatepickerModule } from '@angular/material/datepicker'
+import { MatNativeDateModule } from '@angular/material/core'
 
 @NgModule({
   declarations: [
@@ -58,6 +63,7 @@ import { CommonModule } from '@angular/common'
     FormFieldTemporalExtentComponent,
     CheckToggleComponent,
     CopyTextButtonComponent,
+    DateRangePickerComponent,
   ],
   imports: [
     CommonModule,
@@ -73,6 +79,10 @@ import { CommonModule } from '@angular/common'
     OverlayModule,
     MatCheckboxModule,
     MatTooltipModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatDatepickerModule,
+    MatNativeDateModule,
   ],
   exports: [
     DropdownSelectorComponent,
@@ -89,6 +99,7 @@ import { CommonModule } from '@angular/common'
     FormFieldComponent,
     CheckToggleComponent,
     CopyTextButtonComponent,
+    DateRangePickerComponent,
   ],
 })
 export class UiInputsModule {}