geonetwork-ui 2.3.0-dev.c22cb78a → 2.3.0-dev.e07c5606

package/src/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 '../../../../../../../../../libs/ui/inputs/src'
+
+@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'),
+    },
+  ]
+}

package/src/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>

package/src/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 '../../../../../../../../libs/ui/inputs/src'
+import { FormFieldWrapperComponent } from '../../../../../../../../libs/ui/layout/src'
 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,6 +36,7 @@ import { FormFieldConfig } from './form-field.model'
     EditableLabelDirective,
     MatIconModule,
     MatTooltipModule,
+    FormFieldWrapperComponent,
     FormFieldSimpleComponent,
     FormFieldRichComponent,
     FormFieldObjectComponent,
@@ -41,6 +44,7 @@ import { FormFieldConfig } from './form-field.model'
     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'
+  }
 }

package/src/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',
+    },
+  },
 ]

package/src/libs/feature/record/src/lib/feature-record.module.ts

@@ -11,7 +11,10 @@ import { MdViewFacade } from './state'
 import { MdViewEffects } from './state/mdview.effects'
 import { MapViewComponent } from './map-view/map-view.component'
 import { DataViewComponent } from './data-view/data-view.component'
-import { MD_VIEW_FEATURE_STATE_KEY, reducer } from './state/mdview.reducer'
+import {
+  METADATA_VIEW_FEATURE_STATE_KEY,
+  reducer,
+} from './state/mdview.reducer'
 import { MatTabsModule } from '@angular/material/tabs'
 import { MatIconModule } from '@angular/material/icon'
 import { UiWidgetsModule } from '../../../../../libs/ui/widgets/src'
@@ -35,7 +38,7 @@ import { DataViewShareComponent } from './data-view-share/data-view-share.compon
   ],
   imports: [
     CommonModule,
-    StoreModule.forFeature(MD_VIEW_FEATURE_STATE_KEY, reducer),
+    StoreModule.forFeature(METADATA_VIEW_FEATURE_STATE_KEY, reducer),
     EffectsModule.forFeature([MdViewEffects]),
     UiLayoutModule,
     FeatureMapModule,

package/src/libs/feature/record/src/lib/state/mdview.actions.ts

@@ -1,7 +1,13 @@
 import { DatavizConfigurationModel } from '../../../../../../libs/common/domain/src/lib/model/dataviz/dataviz-configuration.model'
 import { createAction, props } from '@ngrx/store'
-import { CatalogRecord } from '../../../../../../libs/common/domain/src/lib/model/record'
+import {
+  CatalogRecord,
+  UserFeedback,
+} from '../../../../../../libs/common/domain/src/lib/model/record'
 
+/*
+  Metadata actions
+ */
 export const loadFullMetadata = createAction(
   '[Metadata view] Load full metadata',
   props<{ uuid: string }>()
@@ -12,24 +18,63 @@ export const setIncompleteMetadata = createAction(
   props<{ incomplete: Partial<CatalogRecord> }>()
 )
 
-export const loadFullSuccess = createAction(
-  '[Metadata view] Load full success',
+export const loadFullMetadataSuccess = createAction(
+  '[Metadata view] Load full metadata success',
   props<{ full: CatalogRecord }>()
 )
 
-export const loadFullFailure = createAction(
-  '[Metadata view] Load full failure',
+export const loadFullMetadataFailure = createAction(
+  '[Metadata view] Load full metadata failure',
   props<{ otherError?: string; notFound?: boolean }>()
 )
 
+export const closeMetadata = createAction('[Metadata view] close')
+
+/*
+  Related actions
+ */
 export const setRelated = createAction(
   '[Metadata view] Set related records',
   props<{ related: CatalogRecord[] }>()
 )
 
+/*
+  ChartConfig actions
+ */
 export const setChartConfig = createAction(
   '[Metadata view] Set chart config',
   props<{ chartConfig: DatavizConfigurationModel }>()
 )
 
-export const close = createAction('[Metadata view] close')
+/*
+  User Feedbacks actions
+ */
+export const addUserFeedback = createAction(
+  '[Metadata view] Add UserFeedback',
+  props<{ userFeedback: UserFeedback }>()
+)
+
+export const addUserFeedbackSuccess = createAction(
+  '[Metadata view] Add UserFeedback Success',
+  props<{ datasetUuid: string }>()
+)
+
+export const addUserFeedbackFailure = createAction(
+  '[Metadata view] Add UserFeedback Failure',
+  props<{ otherError?: string; notFound?: boolean }>()
+)
+
+export const loadUserFeedbacks = createAction(
+  '[Metadata view] Load UserFeedbacks',
+  props<{ datasetUuid: string }>()
+)
+
+export const loadUserFeedbacksSuccess = createAction(
+  '[Metadata view] Load UserFeedbacks Success',
+  props<{ userFeedbacks: UserFeedback[] }>()
+)
+
+export const loadUserFeedbacksFailure = createAction(
+  '[Metadata view] Load UserFeedbacks Failure',
+  props<{ otherError?: string; notFound?: boolean }>()
+)

package/src/libs/feature/record/src/lib/state/mdview.effects.ts

@@ -1,18 +1,23 @@
 import { Injectable } from '@angular/core'
 import { Actions, createEffect, ofType } from '@ngrx/effects'
-import { of } from 'rxjs'
+import { exhaustMap, mergeMap, of } from 'rxjs'
 import { catchError, map, switchMap } from 'rxjs/operators'
 import * as MdViewActions from './mdview.actions'
 import { RecordsRepositoryInterface } from '../../../../../../libs/common/domain/src/lib/repository/records-repository.interface'
+import { PlatformServiceInterface } from '../../../../../../libs/common/domain/src/lib/platform.service.interface'
 
 @Injectable()
 export class MdViewEffects {
   constructor(
     private actions$: Actions,
-    private recordsRepository: RecordsRepositoryInterface
+    private recordsRepository: RecordsRepositoryInterface,
+    private platformServiceInterface: PlatformServiceInterface
   ) {}
 
-  loadFull$ = createEffect(() =>
+  /*
+    Metadata effects
+  */
+  loadFullMetadata$ = createEffect(() =>
     this.actions$.pipe(
       ofType(MdViewActions.loadFullMetadata),
       switchMap(({ uuid }) =>
@@ -20,19 +25,22 @@ export class MdViewEffects {
       ),
       map((record) => {
         if (record === null) {
-          return MdViewActions.loadFullFailure({ notFound: true })
+          return MdViewActions.loadFullMetadataFailure({ notFound: true })
         }
-        return MdViewActions.loadFullSuccess({ full: record })
+        return MdViewActions.loadFullMetadataSuccess({ full: record })
       }),
       catchError((error) =>
-        of(MdViewActions.loadFullFailure({ otherError: error.message }))
+        of(MdViewActions.loadFullMetadataFailure({ otherError: error.message }))
       )
     )
   )
 
+  /*
+    Related effects
+  */
   loadRelatedRecords$ = createEffect(() =>
     this.actions$.pipe(
-      ofType(MdViewActions.loadFullSuccess),
+      ofType(MdViewActions.loadFullMetadataSuccess),
       switchMap(({ full }) => this.recordsRepository.getSimilarRecords(full)),
       map((related) => {
         return MdViewActions.setRelated({ related })
@@ -40,4 +48,71 @@ export class MdViewEffects {
       catchError((error) => of(MdViewActions.setRelated({ related: null })))
     )
   )
+
+  /*
+    UserFeedback effects
+  */
+  loadUserFeedbacks$ = createEffect(() =>
+    this.actions$.pipe(
+      ofType(MdViewActions.loadUserFeedbacks),
+      exhaustMap(({ datasetUuid }) =>
+        this.platformServiceInterface.getUserFeedbacks(datasetUuid).pipe(
+          map((userFeedbacks) =>
+            MdViewActions.loadUserFeedbacksSuccess({ userFeedbacks })
+          ),
+          catchError((error) =>
+            of(
+              MdViewActions.loadUserFeedbacksFailure({
+                otherError: error.message,
+              })
+            )
+          )
+        )
+      )
+    )
+  )
+
+  reloadUserFeedbacks$ = createEffect(() =>
+    this.actions$.pipe(
+      ofType(MdViewActions.addUserFeedbackSuccess),
+      exhaustMap(({ datasetUuid }) =>
+        this.platformServiceInterface.getUserFeedbacks(datasetUuid).pipe(
+          map((userFeedbacks) =>
+            MdViewActions.loadUserFeedbacksSuccess({ userFeedbacks })
+          ),
+          catchError((error) =>
+            of(
+              MdViewActions.loadUserFeedbacksFailure({
+                otherError: error.message,
+              })
+            )
+          )
+        )
+      )
+    )
+  )
+
+  addUserFeedback$ = createEffect(() =>
+    this.actions$.pipe(
+      ofType(MdViewActions.addUserFeedback),
+      mergeMap((action) =>
+        this.platformServiceInterface
+          .postUserFeedbacks(action.userFeedback)
+          .pipe(
+            map(() =>
+              MdViewActions.addUserFeedbackSuccess({
+                datasetUuid: action.userFeedback.metadataUUID,
+              })
+            ),
+            catchError((error) => {
+              return of(
+                MdViewActions.addUserFeedbackFailure({
+                  otherError: error.message,
+                })
+              )
+            })
+          )
+      )
+    )
+  )
 }

package/src/libs/feature/record/src/lib/state/mdview.facade.ts

@@ -5,7 +5,12 @@ import * as MdViewActions from './mdview.actions'
 import * as MdViewSelectors from './mdview.selectors'
 import { LinkClassifierService, LinkUsage } from '../../../../../../libs/util/shared/src'
 import { DatavizConfigurationModel } from '../../../../../../libs/common/domain/src/lib/model/dataviz/dataviz-configuration.model'
-import { CatalogRecord } from '../../../../../../libs/common/domain/src/lib/model/record'
+import {
+  CatalogRecord,
+  UserFeedback,
+  UserFeedbackViewModel,
+} from '../../../../../../libs/common/domain/src/lib/model/record'
+import { AvatarServiceInterface } from '../../../../../../libs/api/repository/src'
 
 @Injectable()
 /**
@@ -15,19 +20,31 @@ import { CatalogRecord } from '../../../../../../libs/common/domain/src/lib/mode
  * To clear the current record use the `close()` method.
  */
 export class MdViewFacade {
+  constructor(
+    private store: Store,
+    private linkClassifier: LinkClassifierService,
+    private avatarService: AvatarServiceInterface
+  ) {}
+
   isPresent$ = this.store.pipe(
     select(MdViewSelectors.getMetadataUuid),
     map((uuid) => !!uuid)
   )
-  isLoading$ = this.store.pipe(select(MdViewSelectors.getMetadataIsLoading))
+
+  isMetadataLoading$ = this.store.pipe(
+    select(MdViewSelectors.getMetadataIsLoading)
+  )
+
   metadata$ = this.store.pipe(
     select(MdViewSelectors.getMetadata),
     filter((md) => !!md)
   )
+
   isIncomplete$ = this.store.pipe(
     select(MdViewSelectors.getMetadataIsIncomplete),
     filter((incomplete) => incomplete !== null)
   )
+
   error$ = this.store.pipe(select(MdViewSelectors.getMetadataError))
 
   related$ = this.store.pipe(select(MdViewSelectors.getRelated))
@@ -37,11 +54,13 @@ export class MdViewFacade {
   allLinks$ = this.metadata$.pipe(
     map((record) => ('distributions' in record ? record.distributions : []))
   )
+
   apiLinks$ = this.allLinks$.pipe(
     map((links) =>
       links.filter((link) => this.linkClassifier.hasUsage(link, LinkUsage.API))
     )
   )
+
   mapApiLinks$ = this.allLinks$.pipe(
     map((links) =>
       links.filter((link) =>
@@ -49,6 +68,7 @@ export class MdViewFacade {
       )
     )
   )
+
   downloadLinks$ = this.allLinks$.pipe(
     map((links) =>
       links.filter((link) =>
@@ -56,11 +76,13 @@ export class MdViewFacade {
       )
     )
   )
+
   dataLinks$ = this.allLinks$.pipe(
     map((links) =>
       links.filter((link) => this.linkClassifier.hasUsage(link, LinkUsage.DATA))
     )
   )
+
   geoDataLinks$ = this.allLinks$.pipe(
     map((links) =>
       links.filter((link) =>
@@ -68,9 +90,11 @@ export class MdViewFacade {
       )
     )
   )
+
   landingPageLinks$ = this.metadata$.pipe(
     map((record) => ('landingPage' in record ? [record.landingPage] : []))
   )
+
   otherLinks$ = this.allLinks$.pipe(
     map((links) =>
       links.filter((link) =>
@@ -79,10 +103,13 @@ export class MdViewFacade {
     )
   )
 
-  constructor(
-    private store: Store,
-    private linkClassifier: LinkClassifierService
-  ) {}
+  userFeedbacks$ = this.store.pipe(select(MdViewSelectors.getUserFeedbacks))
+  isAllUserFeedbackLoading$ = this.store.pipe(
+    select(MdViewSelectors.getAllUserFeedbacksLoading)
+  )
+  isAddUserFeedbackLoading$ = this.store.pipe(
+    select(MdViewSelectors.getAddUserFeedbacksLoading)
+  )
 
   /**
    * This will show an incomplete record (e.g. from a search result) as a preview
@@ -91,16 +118,30 @@ export class MdViewFacade {
   setIncompleteMetadata(incomplete: CatalogRecord) {
     this.store.dispatch(MdViewActions.setIncompleteMetadata({ incomplete }))
   }
+
   /**
    * This will trigger the load of a full metadata record
    */
   loadFull(uuid: string) {
     this.store.dispatch(MdViewActions.loadFullMetadata({ uuid }))
   }
-  close() {
-    this.store.dispatch(MdViewActions.close())
+
+  closeMetadata() {
+    this.store.dispatch(MdViewActions.closeMetadata())
   }
+
   setChartConfig(chartConfig: DatavizConfigurationModel) {
     this.store.dispatch(MdViewActions.setChartConfig({ chartConfig }))
   }
+
+  /**
+   * UserFeedbacks
+   */
+  addUserFeedback(userFeedback: UserFeedback) {
+    this.store.dispatch(MdViewActions.addUserFeedback({ userFeedback }))
+  }
+
+  loadUserFeedbacks(datasetUuid: string) {
+    this.store.dispatch(MdViewActions.loadUserFeedbacks({ datasetUuid }))
+  }
 }