feat(editor): support updateFrequency field in record form

libs/feature/editor/src/lib/components/record-form/form-field/form-field-update-frequency/form-field-update-frequency.component.html

@@ -0,0 +1,15 @@
+<p>form-field-update-frequency works!</p>
+<gn-ui-check-toggle
+  [label]="'editor.record.form.updateFrequency.planned' | translate"
+  [value]="planned"
+  (toggled)="onPlannedToggled()"
+></gn-ui-check-toggle>
+<gn-ui-dropdown-selector
+  title="updateFrequency"
+  [showTitle]="false"
+  [choices]="choices"
+  [selected]="selectedFrequency"
+  (selectValue)="onSelectFrequencyValue($event)"
+  [disabled]="!planned"
+>
+</gn-ui-dropdown-selector>

libs/feature/editor/src/lib/components/record-form/form-field/form-field-update-frequency/form-field-update-frequency.component.spec.ts

@@ -0,0 +1,63 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing'
+
+import { FormFieldUpdateFrequencyComponent } from './form-field-update-frequency.component'
+import { TranslateModule } from '@ngx-translate/core'
+import { FormControl } from '@angular/forms'
+
+describe('FormFieldUpdateFrequencyComponent', () => {
+  let component: FormFieldUpdateFrequencyComponent
+  let fixture: ComponentFixture<FormFieldUpdateFrequencyComponent>
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [FormFieldUpdateFrequencyComponent, TranslateModule.forRoot()],
+    }).compileComponents()
+
+    fixture = TestBed.createComponent(FormFieldUpdateFrequencyComponent)
+    component = fixture.componentInstance
+    const control = new FormControl()
+    control.setValue({
+      updatedTimes: 3,
+      per: 'week',
+    })
+    component.control = control
+    fixture.detectChanges()
+  })
+
+  it('should create', () => {
+    expect(component).toBeTruthy()
+  })
+
+  it('should parse the updatedTimes and per values', () => {
+    component.onSelectFrequencyValue('day.1')
+    expect(component.control.value).toEqual({
+      updatedTimes: 1,
+      per: 'day',
+    })
+  })
+
+  it('should be recognized as planned', () => {
+    expect(component.planned).toBeTruthy()
+  })
+
+  it('should add the custom frequency to the dropdown choices', () => {
+    expect(component.choices).toContainEqual({
+      value: 'week.3',
+      label: 'domain.record.updateFrequency.week',
+    })
+  })
+
+  describe('Switch to not planned', () => {
+    beforeEach(async () => {
+      component.onPlannedToggled()
+    })
+
+    it('should set the value as notPlanned', () => {
+      expect(component.control.value).toBe('notPlanned')
+    })
+
+    it('should be recognized as not planned', () => {
+      expect(component.planned).toBeFalsy()
+    })
+  })
+})

libs/feature/editor/src/lib/components/record-form/form-field/form-field-update-frequency/form-field-update-frequency.component.ts

@@ -0,0 +1,143 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Input,
+  OnInit,
+} from '@angular/core'
+import { FormControl } from '@angular/forms'
+import { marker } from '@biesbjerg/ngx-translate-extract-marker'
+import {
+  CheckToggleComponent,
+  DropdownSelectorComponent,
+} from '@geonetwork-ui/ui/inputs'
+import { TranslateModule, TranslateService } from '@ngx-translate/core'
+
+@Component({
+  selector: 'gn-ui-form-field-update-frequency',
+  templateUrl: './form-field-update-frequency.component.html',
+  styleUrls: ['./form-field-update-frequency.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [CheckToggleComponent, DropdownSelectorComponent, TranslateModule],
+})
+export class FormFieldUpdateFrequencyComponent implements OnInit {
+  @Input() control: FormControl
+
+  get planned() {
+    return this.control.value !== 'notPlanned'
+  }
+
+  constructor(private translateService: TranslateService) {}
+
+  ngOnInit() {
+    const updatedTimes = this.control.value?.updatedTimes
+    const per = this.control.value?.per
+    if (updatedTimes && updatedTimes !== 1 && updatedTimes !== 2) {
+      this.choices = [
+        {
+          value: `${per}.${updatedTimes}`,
+          label: this.translateService.instant(
+            `domain.record.updateFrequency.${per}`,
+            {
+              count: updatedTimes,
+            }
+          ),
+        },
+        ...this.choices,
+      ]
+    }
+  }
+
+  onPlannedToggled() {
+    if (this.planned) {
+      this.control.setValue('notPlanned')
+    } else {
+      this.control.setValue({ updatedTimes: 1, per: 'day' })
+    }
+  }
+
+  get selectedFrequency() {
+    const { updatedTimes, per } = this.control.value
+    return `${per}.${updatedTimes}`
+  }
+
+  onSelectFrequencyValue(value: unknown) {
+    const split = (value as string).split('.')
+    this.control.setValue({ updatedTimes: Number(split[1]), per: split[0] })
+  }
+
+  choices = [
+    {
+      value: 'day.1',
+      label: this.translateService.instant(
+        'domain.record.updateFrequency.day',
+        {
+          count: 1,
+        }
+      ),
+    },
+    {
+      value: 'day.2',
+      label: this.translateService.instant(
+        'domain.record.updateFrequency.day',
+        {
+          count: 2,
+        }
+      ),
+    },
+    {
+      value: 'week.1',
+      label: this.translateService.instant(
+        'domain.record.updateFrequency.week',
+        {
+          count: 1,
+        }
+      ),
+    },
+    {
+      value: 'week.2',
+      label: this.translateService.instant(
+        'domain.record.updateFrequency.week',
+        {
+          count: 2,
+        }
+      ),
+    },
+    {
+      value: 'month.1',
+      label: this.translateService.instant(
+        'domain.record.updateFrequency.month',
+        {
+          count: 1,
+        }
+      ),
+    },
+    {
+      value: 'month.2',
+      label: this.translateService.instant(
+        'domain.record.updateFrequency.month',
+        {
+          count: 2,
+        }
+      ),
+    },
+    {
+      value: 'year.1',
+      label: this.translateService.instant(
+        'domain.record.updateFrequency.year',
+        {
+          count: 1,
+        }
+      ),
+    },
+    {
+      value: 'year.2',
+      label: this.translateService.instant(
+        'domain.record.updateFrequency.year',
+        {
+          count: 2,
+        }
+      ),
+    },
+  ]
+}

libs/feature/editor/src/lib/components/record-form/form-field/form-field.component.html

@@ -48,6 +48,11 @@
       </span>
     </div>
   </ng-container>
+  <ng-container *ngIf="isUpdateFrequency">
+    <gn-ui-form-field-update-frequency
+      [control]="formControl"
+    ></gn-ui-form-field-update-frequency>
+  </ng-container>
   <ng-container *ngIf="isSimpleField">
     <gn-ui-form-field-simple
       [type]="simpleType"

libs/feature/editor/src/lib/components/record-form/form-field/form-field.component.spec.ts

@@ -9,6 +9,7 @@ import { FormFieldSimpleComponent } from './form-field-simple/form-field-simple.
 import { FormFieldSpatialExtentComponent } from './form-field-spatial-extent/form-field-spatial-extent.component'
 import { FormFieldTemporalExtentComponent } from './form-field-temporal-extent/form-field-temporal-extent.component'
 import { FormFieldComponent } from './form-field.component'
+import { FormFieldUpdateFrequencyComponent } from './form-field-update-frequency/form-field-update-frequency.component'
 
 describe('FormFieldComponent', () => {
   let component: FormFieldComponent
@@ -32,6 +33,23 @@ describe('FormFieldComponent', () => {
     expect(component).toBeTruthy()
   })
 
+  describe('update frequency field', () => {
+    let formField
+    beforeEach(() => {
+      component.model = 'updateFrequency'
+      component.value = {
+        updatedTimes: 3,
+        per: 'week',
+      }
+      fixture.detectChanges()
+      formField = fixture.debugElement.query(
+        By.directive(FormFieldUpdateFrequencyComponent)
+      ).componentInstance
+    })
+    it('creates an update frequency form field', () => {
+      expect(formField).toBeTruthy()
+    })
+  })
   describe('simple field', () => {
     let formField
     beforeEach(async () => {

libs/feature/editor/src/lib/components/record-form/form-field/form-field.component.ts

@@ -21,6 +21,7 @@ import { FormFieldSimpleComponent } from './form-field-simple/form-field-simple.
 import { FormFieldSpatialExtentComponent } from './form-field-spatial-extent/form-field-spatial-extent.component'
 import { FormFieldTemporalExtentComponent } from './form-field-temporal-extent/form-field-temporal-extent.component'
 import { FormFieldConfig } from './form-field.model'
+import { FormFieldUpdateFrequencyComponent } from './form-field-update-frequency/form-field-update-frequency.component'
 
 @Component({
   selector: 'gn-ui-form-field',
@@ -34,6 +35,7 @@ import { FormFieldConfig } from './form-field.model'
     EditableLabelDirective,
     MatIconModule,
     MatTooltipModule,
+    FormFieldUpdateFrequencyComponent,
     FormFieldSimpleComponent,
     FormFieldRichComponent,
     FormFieldObjectComponent,
@@ -118,4 +120,7 @@ export class FormFieldComponent {
   get isAbstract() {
     return this.model === 'abstract'
   }
+  get isUpdateFrequency() {
+    return this.model === 'updateFrequency'
+  }
 }