Me/record field license

libs/feature/editor/src/lib/+state/editor.selectors.spec.ts

@@ -63,6 +63,10 @@ describe('Editor Selectors', () => {
           config: DEFAULT_FIELDS[3],
           value: DATASET_RECORDS[0].recordUpdated,
         },
+        {
+          config: DEFAULT_FIELDS[4],
+          value: DATASET_RECORDS[0].licenses,
+        },
       ])
     })
   })

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

@@ -0,0 +1,8 @@
+<gn-ui-dropdown-selector
+  [title]="label"
+  [showTitle]="false"
+  [choices]="choices"
+  [selected]="selected"
+  (selectValue)="onSelectValue($event)"
+>
+</gn-ui-dropdown-selector>

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

@@ -0,0 +1,39 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing'
+
+import { FormFieldLicenseComponent } from './form-field-license.component'
+import { FormControl } from '@angular/forms'
+import { TranslateModule } from '@ngx-translate/core'
+
+describe('FormFieldLicenseComponent', () => {
+  let component: FormFieldLicenseComponent
+  let fixture: ComponentFixture<FormFieldLicenseComponent>
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [FormFieldLicenseComponent, TranslateModule.forRoot()],
+    }).compileComponents()
+
+    fixture = TestBed.createComponent(FormFieldLicenseComponent)
+    component = fixture.componentInstance
+    const control = new FormControl()
+    control.setValue([{ text: 'cc-by' }])
+    component.control = control
+    component.label = 'License'
+    fixture.detectChanges()
+  })
+
+  it('should create', () => {
+    expect(component).toBeTruthy()
+  })
+  describe('#selected', () => {
+    it('should get the selected value', () => {
+      expect(component.selected).toBe('cc-by')
+    })
+  })
+  describe('#onSelectValue', () => {
+    it('should set the selected value', () => {
+      component.onSelectValue('cc-by-sa')
+      expect(component.control.value).toEqual([{ text: 'cc-by-sa' }])
+    })
+  })
+})

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

@@ -0,0 +1,64 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
+import { FormControl } from '@angular/forms'
+import { marker } from '@biesbjerg/ngx-translate-extract-marker'
+import { DropdownSelectorComponent } from '@geonetwork-ui/ui/inputs'
+
+@Component({
+  selector: 'gn-ui-form-field-license',
+  templateUrl: './form-field-license.component.html',
+  styleUrls: ['./form-field-license.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [DropdownSelectorComponent],
+})
+export class FormFieldLicenseComponent {
+  @Input() control!: FormControl
+  @Input() label: string
+
+  get selected() {
+    return this.control.value[0]?.text
+  }
+
+  onSelectValue(value: unknown) {
+    this.control.setValue([{ text: value }])
+  }
+
+  choices = [
+    {
+      value: 'cc-by',
+      label: marker('editor.record.form.license.cc-by'),
+    },
+    {
+      value: 'cc-by-sa',
+      label: marker('editor.record.form.license.cc-by-sa'),
+    },
+    {
+      value: 'cc-zero',
+      label: marker('editor.record.form.license.cc-zero'),
+    },
+    {
+      value: 'etalab',
+      label: marker('editor.record.form.license.etalab'),
+    },
+    {
+      value: 'etalab-v2',
+      label: marker('editor.record.form.license.etalab-v2'),
+    },
+    {
+      value: 'odbl',
+      label: marker('editor.record.form.license.odbl'),
+    },
+    {
+      value: 'odc-by',
+      label: marker('editor.record.form.license.odc-by'),
+    },
+    {
+      value: 'pddl',
+      label: marker('editor.record.form.license.pddl'),
+    },
+    {
+      value: 'unknown',
+      label: marker('editor.record.form.license.unknown'),
+    },
+  ]
+}

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

@@ -1,29 +1,18 @@
 <div class="flex flex-col h-full">
-  <div class="mb-2 flex flex-row">
-    <label class="grow">
-      <span class="font-medium field-label">{{
-        config.labelKey | translate
-      }}</span>
-      <span *ngIf="config.hintKey" class="text-gray-900 text-sm">
-        - {{ config.hintKey | translate }}
-      </span>
-    </label>
-    <mat-icon
-      *ngIf="isFieldOk"
-      class="material-symbols-outlined text-[#c6d950] icon-ok"
-      >check_circle</mat-icon
-    >
-    <mat-icon
-      *ngIf="isFieldLocked"
-      class="material-symbols-outlined text-blue-400 icon-locked"
-      >lock</mat-icon
-    >
-    <mat-icon
-      *ngIf="isFieldInvalid"
-      class="material-symbols-outlined text-pink-500 icon-invalid"
-      >cancel</mat-icon
+  <ng-container *ngIf="withoutWrapper; else withGenericWrapper">
+    <ng-container *ngTemplateOutlet="fieldContent"></ng-container>
+  </ng-container>
+  <ng-template #withGenericWrapper>
+    <gn-ui-form-field-wrapper
+      [label]="config.labelKey | translate"
+      [hint]="config.hintKey | translate"
     >
-  </div>
+      <ng-container *ngTemplateOutlet="fieldContent"></ng-container>
+    </gn-ui-form-field-wrapper>
+  </ng-template>
+</div>
+
+<ng-template #fieldContent>
   <ng-container *ngIf="isTitle">
     <div class="flex justify-between items-center gap-3">
       <h2
@@ -48,6 +37,20 @@
       </span>
     </div>
   </ng-container>
+  <ng-container *ngIf="isAbstract">
+    <gn-ui-form-field-rich
+      class="h-[8rem]"
+      [control]="formControl"
+      [label]="config.labelKey | translate"
+      [hint]="config.hintKey | translate"
+    ></gn-ui-form-field-rich>
+  </ng-container>
+  <ng-container *ngIf="isLicenses">
+    <gn-ui-form-field-license
+      [control]="formControl"
+      [label]="config.labelKey | translate"
+    ></gn-ui-form-field-license>
+  </ng-container>
   <ng-container *ngIf="isSimpleField">
     <gn-ui-form-field-simple
       [type]="simpleType"
@@ -63,14 +66,6 @@
       [invalid]="isFieldInvalid"
     ></gn-ui-form-field-file>
   </ng-container>
-  <ng-container *ngIf="isAbstract">
-    <gn-ui-form-field-rich
-      class="h-[8rem]"
-      [control]="formControl"
-      [label]="config.labelKey | translate"
-      [hint]="config.hintKey | translate"
-    ></gn-ui-form-field-rich>
-  </ng-container>
   <ng-container *ngIf="isArrayField">
     <gn-ui-form-field-array></gn-ui-form-field-array>
   </ng-container>
@@ -89,4 +84,4 @@
   >
     {{ config.invalidHintKey | translate }}
   </div>
-</div>
+</ng-template>

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

@@ -9,6 +9,8 @@ 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 { FormFieldWrapperComponent } from '@geonetwork-ui/ui/layout'
+import { EditableLabelDirective } from '@geonetwork-ui/ui/inputs'
 
 describe('FormFieldComponent', () => {
   let component: FormFieldComponent
@@ -32,12 +34,30 @@ describe('FormFieldComponent', () => {
     expect(component).toBeTruthy()
   })
 
+  describe('abstract field', () => {
+    let formField
+    beforeEach(() => {
+      component.model = 'abstract'
+      component.value = 'Some rich abstract value'
+      fixture.detectChanges()
+      formField = fixture.debugElement.query(
+        By.directive(FormFieldRichComponent)
+      ).componentInstance
+    })
+    it('creates a rich text form field', () => {
+      expect(formField).toBeTruthy()
+    })
+  })
   describe('simple field', () => {
+    let fieldWrapper
     let formField
     beforeEach(async () => {
       component.config.type = 'url'
       fixture.detectChanges()
       await fixture.whenStable()
+      fieldWrapper = fixture.debugElement.query(
+        By.directive(FormFieldWrapperComponent)
+      ).componentInstance
       formField = fixture.debugElement.query(
         By.directive(FormFieldSimpleComponent)
       ).componentInstance
@@ -48,13 +68,8 @@ describe('FormFieldComponent', () => {
       expect(formField.readonly).toEqual(component.config.locked)
       expect(formField.invalid).toEqual(component.config.invalid)
     })
-    it('shows the label', () => {
-      const label = fixture.debugElement.query(By.css('.field-label'))
-      expect(label.nativeElement.textContent).toEqual(component.config.labelKey)
-    })
-    it('shows the ok icon', () => {
-      const icon = fixture.debugElement.query(By.css('.icon-ok'))
-      expect(icon).toBeTruthy()
+    it('creates a form field wrapper', () => {
+      expect(fieldWrapper).toBeTruthy()
     })
   })
   describe('simple field (invalid)', () => {
@@ -74,10 +89,6 @@ describe('FormFieldComponent', () => {
       expect(formField.type).toEqual(component.config.type)
       expect(formField.invalid).toEqual(true)
     })
-    it('shows the invalid icon', () => {
-      const icon = fixture.debugElement.query(By.css('.icon-invalid'))
-      expect(icon).toBeTruthy()
-    })
     it('shows the invalid hint key', () => {
       const hint = fixture.debugElement.query(By.css('.field-invalid-hint'))
       expect(hint.nativeElement.textContent).toContain(
@@ -103,24 +114,6 @@ describe('FormFieldComponent', () => {
       expect(formField.readonly).toEqual(true)
       expect(formField.invalid).toEqual(false)
     })
-    it('shows the locked icon', () => {
-      const icon = fixture.debugElement.query(By.css('.icon-locked'))
-      expect(icon).toBeTruthy()
-    })
-  })
-  describe('abstract field', () => {
-    let formField
-    beforeEach(() => {
-      component.model = 'abstract'
-      component.value = 'Some rich abstract value'
-      fixture.detectChanges()
-      formField = fixture.debugElement.query(
-        By.directive(FormFieldRichComponent)
-      ).componentInstance
-    })
-    it('creates a rich text form field', () => {
-      expect(formField).toBeTruthy()
-    })
   })
   describe('file field', () => {
     let formField

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

@@ -11,10 +11,12 @@ import { FormControl, ReactiveFormsModule } from '@angular/forms'
 import { MatIconModule } from '@angular/material/icon'
 import { MatTooltipModule } from '@angular/material/tooltip'
 import { EditableLabelDirective } from '@geonetwork-ui/ui/inputs'
+import { FormFieldWrapperComponent } from '@geonetwork-ui/ui/layout'
 import { TranslateModule } from '@ngx-translate/core'
 import { Observable } from 'rxjs'
 import { FormFieldArrayComponent } from './form-field-array/form-field-array.component'
 import { FormFieldFileComponent } from './form-field-file/form-field-file.component'
+import { FormFieldLicenseComponent } from './form-field-license/form-field-license.component'
 import { FormFieldObjectComponent } from './form-field-object/form-field-object.component'
 import { FormFieldRichComponent } from './form-field-rich/form-field-rich.component'
 import { FormFieldSimpleComponent } from './form-field-simple/form-field-simple.component'
@@ -34,13 +36,15 @@ import { FormFieldConfig } from './form-field.model'
     EditableLabelDirective,
     MatIconModule,
     MatTooltipModule,
+    FormFieldWrapperComponent,
     FormFieldSimpleComponent,
     FormFieldRichComponent,
     FormFieldObjectComponent,
     FormFieldSpatialExtentComponent,
     FormFieldTemporalExtentComponent,
     FormFieldFileComponent,
     FormFieldArrayComponent,
+    FormFieldLicenseComponent,
     TranslateModule,
   ],
 })
@@ -118,4 +122,11 @@ export class FormFieldComponent {
   get isAbstract() {
     return this.model === 'abstract'
   }
+  get isLicenses() {
+    return this.model === 'licenses'
+  }
+
+  get withoutWrapper() {
+    return this.model === 'title' || this.model === 'abstract'
+  }
 }

libs/feature/editor/src/lib/fields.config.ts

@@ -1,3 +1,4 @@
+import { marker } from '@biesbjerg/ngx-translate-extract-marker'
 import { EditorFieldsConfig } from './models/fields.model'
 
 export const DEFAULT_FIELDS: EditorFieldsConfig = [
@@ -32,4 +33,11 @@ export const DEFAULT_FIELDS: EditorFieldsConfig = [
     },
     onSaveProcess: '${dateNow()}',
   },
+  {
+    model: 'licenses',
+    formFieldConfig: {
+      labelKey: marker('editor.record.form.license'),
+      type: 'list',
+    },
+  },
 ]

libs/ui/inputs/src/lib/dropdown-selector/dropdown-selector.component.spec.ts

@@ -1,23 +1,14 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing'
 import { TranslateModule } from '@ngx-translate/core'
-import { ButtonComponent } from '../button/button.component'
 import { DropdownSelectorComponent } from './dropdown-selector.component'
-import { OverlayModule } from '@angular/cdk/overlay'
-import { MatIconModule } from '@angular/material/icon'
 
 describe('DropdownSelectorComponent', () => {
   let component: DropdownSelectorComponent
   let fixture: ComponentFixture<DropdownSelectorComponent>
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [
-        ButtonComponent,
-        OverlayModule,
-        MatIconModule,
-        TranslateModule.forRoot(),
-      ],
-      declarations: [DropdownSelectorComponent],
+      imports: [DropdownSelectorComponent, TranslateModule.forRoot()],
     }).compileComponents()
   })