From a251c8e00c5f81644a8e58d0b93ca8fbe8cb5bcf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Laure-H=C3=A9l=C3=A8ne=20Bruneton?= Date: Mon, 29 Apr 2024 14:13:53 +0200 Subject: [PATCH] feat(editor): support updateFrequency field in record form --- .../form-field-update-frequency.component.css | 0 ...form-field-update-frequency.component.html | 15 ++ ...m-field-update-frequency.component.spec.ts | 63 ++++++++ .../form-field-update-frequency.component.ts | 143 ++++++++++++++++++ .../form-field/form-field.component.html | 5 + .../form-field/form-field.component.spec.ts | 18 +++ .../form-field/form-field.component.ts | 5 + 7 files changed, 249 insertions(+) create mode 100644 libs/feature/editor/src/lib/components/record-form/form-field/form-field-update-frequency/form-field-update-frequency.component.css create mode 100644 libs/feature/editor/src/lib/components/record-form/form-field/form-field-update-frequency/form-field-update-frequency.component.html create mode 100644 libs/feature/editor/src/lib/components/record-form/form-field/form-field-update-frequency/form-field-update-frequency.component.spec.ts create mode 100644 libs/feature/editor/src/lib/components/record-form/form-field/form-field-update-frequency/form-field-update-frequency.component.ts diff --git a/libs/feature/editor/src/lib/components/record-form/form-field/form-field-update-frequency/form-field-update-frequency.component.css b/libs/feature/editor/src/lib/components/record-form/form-field/form-field-update-frequency/form-field-update-frequency.component.css new file mode 100644 index 0000000000..e69de29bb2 diff --git a/libs/feature/editor/src/lib/components/record-form/form-field/form-field-update-frequency/form-field-update-frequency.component.html b/libs/feature/editor/src/lib/components/record-form/form-field/form-field-update-frequency/form-field-update-frequency.component.html new file mode 100644 index 0000000000..02960ec345 --- /dev/null +++ b/libs/feature/editor/src/lib/components/record-form/form-field/form-field-update-frequency/form-field-update-frequency.component.html @@ -0,0 +1,15 @@ +

form-field-update-frequency works!

+ + + diff --git a/libs/feature/editor/src/lib/components/record-form/form-field/form-field-update-frequency/form-field-update-frequency.component.spec.ts b/libs/feature/editor/src/lib/components/record-form/form-field/form-field-update-frequency/form-field-update-frequency.component.spec.ts new file mode 100644 index 0000000000..b862ada4b4 --- /dev/null +++ b/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 + + 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() + }) + }) +}) diff --git a/libs/feature/editor/src/lib/components/record-form/form-field/form-field-update-frequency/form-field-update-frequency.component.ts b/libs/feature/editor/src/lib/components/record-form/form-field/form-field-update-frequency/form-field-update-frequency.component.ts new file mode 100644 index 0000000000..81e045279f --- /dev/null +++ b/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, + } + ), + }, + ] +} diff --git a/libs/feature/editor/src/lib/components/record-form/form-field/form-field.component.html b/libs/feature/editor/src/lib/components/record-form/form-field/form-field.component.html index ee898db249..a28f62c138 100644 --- a/libs/feature/editor/src/lib/components/record-form/form-field/form-field.component.html +++ b/libs/feature/editor/src/lib/components/record-form/form-field/form-field.component.html @@ -48,6 +48,11 @@ + + + { 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 () => { diff --git a/libs/feature/editor/src/lib/components/record-form/form-field/form-field.component.ts b/libs/feature/editor/src/lib/components/record-form/form-field/form-field.component.ts index 36417bc8ac..e55c217e5f 100644 --- a/libs/feature/editor/src/lib/components/record-form/form-field/form-field.component.ts +++ b/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' + } }