feat: 796 display datepicker adapted to touch UI when small screen

src/app/features/admin/orgunit/components/presentationals/admin-orgunit-form/admin-orgunit-form.presentational.html

@@ -59,7 +59,9 @@
     <mat-datepicker-toggle matSuffix
                            [for]="openingDateDatepicker"
     ></mat-datepicker-toggle>
-    <mat-datepicker #openingDateDatepicker></mat-datepicker>
+    <mat-datepicker [touchUi]="breakpointService.isSmallerThanMd()"
+                    #openingDateDatepicker
+    ></mat-datepicker>
   </mat-form-field>
 
   <mat-form-field>
@@ -71,7 +73,9 @@
     <mat-datepicker-toggle matSuffix
                            [for]="closingDateDatepicker"
     ></mat-datepicker-toggle>
-    <mat-datepicker #closingDateDatepicker></mat-datepicker>
+    <mat-datepicker [touchUi]="breakpointService.isSmallerThanMd()"
+                    #closingDateDatepicker
+    ></mat-datepicker>
   </mat-form-field>
 
   <mat-checkbox [formControlName]="formDefinition.isEmpty">{{'admin.organizationalUnit.form.isEmpty' | translate }}</mat-checkbox>

src/app/features/admin/orgunit/components/presentationals/admin-orgunit-form/admin-orgunit-form.presentational.ts

@@ -16,6 +16,7 @@ import {OrganizationalUnitExtended} from "@deposit/models/organizational-unit-ex
 import {SharedAbstractFormPresentational} from "@shared/components/presentationals/shared-abstract-form/shared-abstract-form.presentational";
 import {LocalModelAttributeEnum} from "@shared/enums/model-attribute.enum";
 import {BaseFormDefinition} from "@shared/models/base-form-definition.model";
+import {BreakpointService} from "@shared/services/breakpoint.service";
 import _ from "lodash";
 import {
   DateUtil,
@@ -45,7 +46,8 @@ export class AdminOrgunitFormPresentational extends SharedAbstractFormPresentati
   listPreservationPolicies: PreservationPolicy[];
 
   constructor(protected readonly _changeDetectorRef: ChangeDetectorRef,
-              private readonly _fb: FormBuilder) {
+              private readonly _fb: FormBuilder,
+              public readonly breakpointService: BreakpointService) {
     super(_changeDetectorRef);
   }
 

src/app/features/deposit/components/presentationals/deposit-form/deposit-form.presentational.html

@@ -72,7 +72,9 @@
     <mat-datepicker-toggle matSuffix
                            [for]="publicationDateDatepicker"
     ></mat-datepicker-toggle>
-    <mat-datepicker #publicationDateDatepicker></mat-datepicker>
+    <mat-datepicker [touchUi]="breakpointService.isSmallerThanMd()"
+                    #publicationDateDatepicker
+    ></mat-datepicker>
     <mat-error>{{formValidationHelper.getFormError(fd)}}</mat-error>
   </mat-form-field>
 
@@ -91,7 +93,9 @@
     <mat-datepicker-toggle matSuffix
                            [for]="collectionBeginDatepicker"
     ></mat-datepicker-toggle>
-    <mat-datepicker #collectionBeginDatepicker></mat-datepicker>
+    <mat-datepicker [touchUi]="breakpointService.isSmallerThanMd()"
+                    #collectionBeginDatepicker
+    ></mat-datepicker>
     <mat-error>{{formValidationHelper.getFormError(fd)}}</mat-error>
   </mat-form-field>
 
@@ -110,7 +114,9 @@
     <mat-datepicker-toggle matSuffix
                            [for]="collectionEndDatepicker"
     ></mat-datepicker-toggle>
-    <mat-datepicker #collectionEndDatepicker></mat-datepicker>
+    <mat-datepicker [touchUi]="breakpointService.isSmallerThanMd()"
+                    #collectionEndDatepicker
+    ></mat-datepicker>
     <mat-error>{{formValidationHelper.getFormError(fd)}}</mat-error>
   </mat-form-field>
 

src/app/features/deposit/components/presentationals/deposit-form/deposit-form.presentational.ts

@@ -24,6 +24,7 @@ import {SharedAbstractFormPresentational} from "@app/shared/components/presentat
 import {LocalModelAttributeEnum} from "@app/shared/enums/model-attribute.enum";
 import {BaseFormDefinition} from "@app/shared/models/base-form-definition.model";
 import {DepositPersonDialog} from "@deposit/components/dialogs/deposit-person/deposit-person.dialog";
+import {BreakpointService} from "@shared/services/breakpoint.service";
 import _ from "lodash";
 import {
   distinctUntilChanged,
@@ -78,7 +79,8 @@ export class DepositFormPresentational extends SharedAbstractFormPresentational<
 
   constructor(protected readonly _changeDetectorRef: ChangeDetectorRef,
               private readonly _fb: FormBuilder,
-              private readonly dialog: MatDialog) {
+              private readonly dialog: MatDialog,
+              public readonly breakpointService: BreakpointService) {
     super(_changeDetectorRef);
   }
 

src/app/features/home/components/presentationals/home-archive-form/home-archive-detail-presentational.component.scss

@@ -51,5 +51,5 @@ dd {
 .code {
   font-family: monospace;
   white-space: pre-line;
-  padding-top: 0px;
+  padding-top: 0;
 }

src/app/features/organizational-unit/components/presentationals/orgunit-form/orgunit-form.presentational.html

@@ -31,7 +31,9 @@
     <mat-datepicker-toggle matSuffix
                            [for]="openingDateDatepicker"
     ></mat-datepicker-toggle>
-    <mat-datepicker #openingDateDatepicker></mat-datepicker>
+    <mat-datepicker [touchUi]="breakpointService.isSmallerThanMd()"
+                    #openingDateDatepicker
+    ></mat-datepicker>
   </mat-form-field>
 
   <mat-form-field>
@@ -43,7 +45,9 @@
     <mat-datepicker-toggle matSuffix
                            [for]="closingDateDatepicker"
     ></mat-datepicker-toggle>
-    <mat-datepicker #closingDateDatepicker></mat-datepicker>
+    <mat-datepicker [touchUi]="breakpointService.isSmallerThanMd()"
+                    #closingDateDatepicker
+    ></mat-datepicker>
   </mat-form-field>
 
   <mat-checkbox [formControlName]="formDefinition.isEmpty">{{'organizationalUnit.isEmpty' | translate }}</mat-checkbox>

src/app/features/organizational-unit/components/presentationals/orgunit-form/orgunit-form.presentational.ts

@@ -15,6 +15,7 @@ import {
 } from "@app/generated-api";
 import {SharedAbstractFormPresentational} from "@app/shared/components/presentationals/shared-abstract-form/shared-abstract-form.presentational";
 import {BaseFormDefinition} from "@app/shared/models/base-form-definition.model";
+import {BreakpointService} from "@shared/services/breakpoint.service";
 import {
   DateUtil,
   PropertyName,
@@ -37,7 +38,8 @@ export class OrgunitFormPresentational extends SharedAbstractFormPresentational<
   listPreservationPolicies: PreservationPolicy[];
 
   constructor(protected readonly _changeDetectorRef: ChangeDetectorRef,
-              private readonly _fb: FormBuilder) {
+              private readonly _fb: FormBuilder,
+              public readonly breakpointService: BreakpointService) {
     super(_changeDetectorRef);
   }
 

src/app/shared/services/breakpoint.service.ts

+import {BreakpointObserver} from "@angular/cdk/layout";
+import {Injectable} from "@angular/core";
+import {environment} from "../../../environments/environment";
+
+@Injectable({
+  providedIn: "root",
+})
+export class BreakpointService {
+  constructor(private breakpointObserver: BreakpointObserver) {
+  }
+
+  isSmallerThanMd(): boolean {
+    return this.breakpointObserver.isMatched(`(max-width: ${environment.breakpointMd})`);
+  }
+
+  isSmallerThanSm(): boolean {
+    return this.breakpointObserver.isMatched(`(max-width: ${environment.breakpointSm})`);
+  }
+}

src/app/shared/shared.module.ts

+import {LayoutModule} from "@angular/cdk/layout";
 import {TextFieldModule} from "@angular/cdk/text-field";
 import {CommonModule} from "@angular/common";
 import {NgModule} from "@angular/core";
@@ -34,6 +35,7 @@ import {SharedHistoryDialog} from "@shared/components/dialogs/shared-history/sha
 import {SharedButtonStatusHistoryPresentational} from "@shared/components/presentationals/shared-button-status-history/shared-button-status-history.presentational";
 import {SharedPersonForm} from "@shared/components/presentationals/shared-person-form/shared-person-form";
 import {DatetimePipe} from "@shared/pipes/datetime.pipe";
+import {BreakpointService} from "@shared/services/breakpoint.service";
 import {CanDeactivateGuard} from "@shared/services/can-deactivate-guard.service";
 import {TableModule} from "primeng/table";
 import {SolidifyFrontendModule} from "solidify-frontend";
@@ -60,7 +62,10 @@ const pipes = [
   FileSizePipe,
   DatetimePipe,
 ];
-const services = [CanDeactivateGuard];
+const services = [
+  CanDeactivateGuard,
+  BreakpointService,
+];
 const modules = [
   CommonModule,
   FormsModule,
@@ -71,6 +76,7 @@ const modules = [
   TranslateModule,
   SolidifyFrontendModule,
   TextFieldModule,
+  LayoutModule,
 ];
 
 @NgModule({

src/environments/environment.defaults.model.ts

@@ -22,6 +22,12 @@ export interface DlcmEnvironment extends DefaultSolidifyEnvironment {
   // OAuth2 properties
   tokenInMemoryStorage: boolean;
 
+  // Breakpoints
+  breakpointXs: string;
+  breakpointSm: string;
+  breakpointMd: string;
+  breakpointLg: string;
+
   // Others
   modalHeight: string;
   modalWidth: string;

src/environments/environment.defaults.ts

@@ -45,6 +45,12 @@ export const defaultEnvironment: DlcmEnvironment = {
   sendAccessToken: true,
   tokenInMemoryStorage: true,
 
+  // Breakpoint
+  breakpointXs: "0em",
+  breakpointSm: "36em",
+  breakpointMd: "62em",
+  breakpointLg: "85em",
+
   // Others
   defaultNotificationErrorDurationInSeconds: 5,
   defaultNotificationSuccessDurationInSeconds: 3,