wip

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

@@ -0,0 +1,9 @@
+<p>form-field-license works!</p>
+<gn-ui-dropdown-selector
+  title="license"
+  [showTitle]="false"
+  [choices]="choices"
+  [selected]="control.value"
+  (selectValue)="control.setValue($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,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing'
+
+import { FormFieldLicenseComponent } from './form-field-license.component'
+
+describe('FormFieldLicenseComponent', () => {
+  let component: FormFieldLicenseComponent
+  let fixture: ComponentFixture<FormFieldLicenseComponent>
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [FormFieldLicenseComponent],
+    }).compileComponents()
+
+    fixture = TestBed.createComponent(FormFieldLicenseComponent)
+    component = fixture.componentInstance
+    fixture.detectChanges()
+  })
+
+  it('should create', () => {
+    expect(component).toBeTruthy()
+  })
+})

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

@@ -0,0 +1,31 @@
+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
+
+  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,19 @@
       </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="isLicense">
+    <gn-ui-form-field-license
+      [control]="formControl"
+    ></gn-ui-form-field-license>
+  </ng-container>
   <ng-container *ngIf="isSimpleField">
     <gn-ui-form-field-simple
       [type]="simpleType"
@@ -63,14 +65,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 +83,4 @@
   >
     {{ config.invalidHintKey | translate }}
   </div>
-</div>
+</ng-template>

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

@@ -4,6 +4,7 @@ import {
   Component,
   ElementRef,
   Input,
+  OnInit,
   Output,
   ViewChild,
 } from '@angular/core'
@@ -21,6 +22,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 { FormFieldConfig } from './form-field.model'
+import { FormFieldLicenseComponent } from './form-field-license/form-field-license.component'
+import { FormFieldWrapperComponent } from '@geonetwork-ui/ui/layout'
 
 @Component({
   selector: 'gn-ui-form-field',
@@ -34,13 +37,15 @@ import { FormFieldConfig } from './form-field.model'
     EditableLabelDirective,
     MatIconModule,
     MatTooltipModule,
+    FormFieldWrapperComponent,
     FormFieldSimpleComponent,
     FormFieldRichComponent,
     FormFieldObjectComponent,
     FormFieldSpatialExtentComponent,
     FormFieldTemporalExtentComponent,
     FormFieldFileComponent,
     FormFieldArrayComponent,
+    FormFieldLicenseComponent,
     TranslateModule,
   ],
 })
@@ -118,4 +123,11 @@ export class FormFieldComponent {
   get isAbstract() {
     return this.model === 'abstract'
   }
+  get isLicense() {
+    return this.model === 'license'
+  }
+
+  get withoutWrapper() {
+    return this.model === 'title' || this.model === 'abstract'
+  }
 }

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

@@ -2,7 +2,9 @@ import { CommonModule } from '@angular/common'
 import { ChangeDetectionStrategy, Component } from '@angular/core'
 import { EditorFacade } from '../../+state/editor.facade'
 import { EditorFieldState, EditorFieldValue } from '../../models/fields.model'
-import { FormFieldComponent } from './form-field'
+import { FormFieldComponent, FormFieldConfigSimple } from './form-field'
+import { map } from 'rxjs'
+import { hi } from 'date-fns/locale'
 
 @Component({
   selector: 'gn-ui-record-form',
@@ -13,7 +15,20 @@ import { FormFieldComponent } from './form-field'
   imports: [CommonModule, FormFieldComponent],
 })
 export class RecordFormComponent {
-  fields$ = this.facade.recordFields$
+  mockLicenseField = {
+    config: {
+      formFieldConfig: {
+        type: 'list',
+        labelKey: 'editor.record.form.license',
+      } as FormFieldConfigSimple,
+      model: 'license',
+      hidden: false,
+    },
+    value: '',
+  }
+  fields$ = this.facade.recordFields$.pipe(
+    map((fields) => [...fields, this.mockLicenseField])
+  )
 
   constructor(public facade: EditorFacade) {}