Display useful input component for duration values on the search page

src/app/core/utils/value-converter.utils.ts

@@ -1,10 +1,10 @@
 import { AqlParameterValueType } from 'src/app/shared/models/aql/aql-parameter-value-type.enum'
 import { DateHelperService } from '../helper/date-helper.service'
-import { Moment } from 'moment'
+import { Duration, Moment } from 'moment'
 
 export const convertParameterInputToType = (
   type: AqlParameterValueType,
-  inputValue: string | number | boolean | Date | Moment,
+  inputValue: string | number | boolean | Date | Moment | Duration,
   defaultToUndefined = false
 ): number | string | boolean => {
   let outputValue: number | string | boolean
@@ -29,7 +29,13 @@ export const convertParameterInputToType = (
     case AqlParameterValueType.Boolean:
       outputValue = inputValue && inputValue !== 'false'
       break
-
+    case AqlParameterValueType.Duration:
+      outputValue = inputValue
+        ? (inputValue as Duration).toISOString()
+        : defaultToUndefined
+          ? undefined
+          : ' '
+      break
     default:
       outputValue = inputValue ? inputValue.toString() : defaultToUndefined ? undefined : ' '
       break

src/app/modules/cohort-builder/components/aql-connector-item/aql-connector-item.component.ts

@@ -159,6 +159,8 @@ export class AqlConnectorItemComponent implements OnInit, OnDestroy {
         return AqlParameterValueType.DateTime
       case ReferenceModelType.Dv_time:
         return AqlParameterValueType.Time
+      case ReferenceModelType.Dv_duration:
+        return AqlParameterValueType.Duration
 
       default:
         return AqlParameterValueType.String

src/app/shared/components/aql-parameter-inputs/aql-parameter-inputs.component.html

@@ -110,5 +110,28 @@
       "
       data-test="aql-parameter-inputs__time-value-input"
     ></num-time-input>
+
+    <mat-form-field
+      appearance="outline"
+      class="input num-tiny-input datepicker"
+      *ngIf="item.valueType === AqlParameterValueType.Duration"
+    >
+      <input
+        aria-labelledby="value-label"
+        formControlName="value"
+        inputmode="numeric"
+        matInput
+        type="text"
+        data-test="aql-parameter-inputs__value-input"
+      />
+      <mat-select formControlName="unit" matSuffix>
+        <mat-option value="y">{{ 'UNITS.YEARS' | translate }}</mat-option>
+        <mat-option value="M">{{ 'UNITS.MONTHS' | translate }}</mat-option>
+        <mat-option value="d">{{ 'UNITS.DAYS' | translate }}</mat-option>
+        <mat-option value="h">{{ 'UNITS.HOURS' | translate }}</mat-option>
+        <mat-option value="m">{{ 'UNITS.MINUTES' | translate }}</mat-option>
+        <mat-option value="s">{{ 'UNITS.SECONDS' | translate }}</mat-option>
+      </mat-select>
+    </mat-form-field>
   </ng-container>
 </section>

src/app/shared/components/aql-parameter-inputs/aql-parameter-inputs.component.ts

@@ -68,14 +68,25 @@ export class AqlParameterInputsComponent implements OnInit, OnDestroy {
         })
       )
     }
-    this.valueForm = new UntypedFormGroup({
-      value: new UntypedFormControl({ value: this.item?.value, disabled: this.disabled }, [
-        Validators.required,
-      ]),
-    })
+    if (this.item.valueType === AqlParameterValueType.Duration) {
+      this.valueForm = new UntypedFormGroup({
+        value: new UntypedFormControl({ value: this.item?.value, disabled: this.disabled }, [
+          Validators.required,
+        ]),
+        unit: new UntypedFormControl({ value: 'y', disabled: this.disabled }, [
+          Validators.required,
+        ]),
+      })
+    } else {
+      this.valueForm = new UntypedFormGroup({
+        value: new UntypedFormControl({ value: this.item?.value, disabled: this.disabled }, [
+          Validators.required,
+        ]),
+      })
+    }
 
     this.subscriptions.add(
-      this.valueForm.get('value').valueChanges.subscribe((value) => this.handleInputChange(value))
+      this.valueForm.valueChanges.subscribe((value) => this.handleInputChange(value))
     )
 
     this.valueForm?.get('value').markAllAsTouched()
@@ -85,21 +96,29 @@ export class AqlParameterInputsComponent implements OnInit, OnDestroy {
     this.subscriptions.unsubscribe()
   }
 
-  handleInputChange(value): void {
+  handleInputChange(input: { value: string; unit: 'y' | 'M' | 'd' | 'h' | 'm' | 's' }): void {
+    console.log(input)
     let newValue
-    if (value === null || value === undefined || !value.length || value === '-') {
-      newValue = value
+    if (
+      input.value === null ||
+      input.value === undefined ||
+      !input.value.length ||
+      input.value === '-'
+    ) {
+      newValue = input.value
     } else if (this.item?.valueType === AqlParameterValueType.Number) {
-      newValue = (parseInt(value?.toString(), 10) || 0).toString()
+      newValue = (parseInt(input.value?.toString(), 10) || 0).toString()
     } else if (this.item?.valueType === AqlParameterValueType.Double) {
       const numberPattern = new RegExp('^[+-]?([0-9]+([.][0-9]*)?|[.][0-9]+)$')
-      const isValid = numberPattern.test(value.replace(',', '.'))
-      newValue = isValid ? value : this.item.value
+      const isValid = numberPattern.test(input.value.replace(',', '.'))
+      newValue = isValid ? input.value : this.item.value
+    } else if (this.item?.valueType === AqlParameterValueType.Duration) {
+      newValue = moment.duration(input.value, input.unit)
     } else {
-      newValue = value
+      newValue = input.value
     }
 
-    if (newValue !== value) {
+    if (newValue !== input.value && this.item?.valueType !== AqlParameterValueType.Duration) {
       this.patchValue(newValue)
     } else {
       this.item.value = newValue

src/app/shared/models/aql/aql-parameter-value-type.enum.ts

@@ -7,4 +7,5 @@ export enum AqlParameterValueType {
   String = 'STRING',
   Boolean = 'BOOLEAN',
   Options = 'OPTIONS',
+  Duration = 'DURATION',
 }

src/app/shared/models/aql/aql-parameter.interface.ts

@@ -5,7 +5,7 @@ import { AqlParameterValueType } from './aql-parameter-value-type.enum'
 export interface IAqlParameter {
   name: string
   nameWithDollar: string
-  value: string | number | boolean | Date | moment.Moment
+  value: string | number | boolean | Date | moment.Moment | moment.Duration
   operator: AqlParameterOperator
   possibleOperators: AqlParameterOperator[]
   path: string

src/assets/i18n/de.json

@@ -139,6 +139,14 @@
     "PRIVACY_PUBLIC": "Öffentlich",
     "CATEGORY_NOT_DELETABLE": "Kategorien mit zugewiesenen Kriterien können nicht gelöscht werden."
   },
+  "UNITS": {
+    "YEARS": "Jahre",
+    "MONTHS": "Monate",
+    "DAYS": "Tage",
+    "HOURS": "Stunden",
+    "MINUTES": "Minuten",
+    "SECONDS": "Sekunden"
+  },
   "CONTENT_EDITOR": {
     "SAVE_NAVIGATION_SUCCESS": "Die Navigationselemente wurden erfolgreich veröffentlicht.",
     "SAVE_NAVIGATION_ERROR": "Die Navigationselemente konnten nicht veröffentlicht werden. Bitte überprüfen Sie Ihre Eingabe und versuchen es erneut.",

src/assets/i18n/en.json

@@ -139,6 +139,14 @@
     "PRIVACY_PUBLIC": "Public",
     "CATEGORY_NOT_DELETABLE": "Categories with assigned criterias can not be deleted."
   },
+  "UNITS": {
+    "YEARS": "years",
+    "MONTHS": "months",
+    "DAYS": "days",
+    "HOURS": "hours",
+    "MINUTES": "minutes",
+    "SECONDS": "seconds"
+  },
   "CONTENT_EDITOR": {
     "SAVE_NAVIGATION_SUCCESS": "The navigations items were successfully published.",
     "SAVE_NAVIGATION_ERROR": "The navigation items could not be published. Please check your entries and try again.",