geonetwork-ui 2.4.0-dev.27089d81 → 2.4.0-dev.4e4ab1af

package/src/libs/feature/record/src/lib/data-view-web-component/data-view-web-component.component.ts

@@ -1,7 +1,12 @@
-import { ChangeDetectionStrategy, Component, Inject } from '@angular/core'
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Inject,
+  Input,
+} from '@angular/core'
 import { Configuration } from '../../../../../../libs/data-access/gn4/src'
 import { MdViewFacade } from '../state'
-import { combineLatest, map } from 'rxjs'
+import { BehaviorSubject, combineLatest, map } from 'rxjs'
 import { GN_UI_VERSION } from '../gn-ui-version.token'
 
 @Component({
@@ -11,35 +16,77 @@ import { GN_UI_VERSION } from '../gn-ui-version.token'
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class DataViewWebComponentComponent {
+  viewType$ = new BehaviorSubject<string>('map')
+  @Input()
+  set viewType(value: string) {
+    this.viewType$.next(value)
+  }
   webComponentHtml$ = combineLatest(
+    this.viewType$,
     this.facade.chartConfig$,
     this.facade.metadata$
   ).pipe(
-    map(([config, metadata]) => {
-      if (config) {
-        const { aggregation, xProperty, yProperty, chartType } = config
+    map(([viewType, config, metadata]) => {
+      if (viewType === 'chart') {
+        if (config) {
+          const { aggregation, xProperty, yProperty, chartType } = config
+          return `<script src="https://cdn.jsdelivr.net/gh/geonetwork/geonetwork-ui@wc-dist-${
+            this.version
+          }/gn-wc.js"></script>
+  <gn-dataset-view-chart
+          api-url="${new URL(
+            this.config.basePath,
+            window.location.origin
+          ).toString()}"
+          dataset-id="${metadata.uniqueIdentifier}"
+          aggregation="${aggregation}"
+          x-property="${xProperty}"
+          y-property="${yProperty}"
+          chart-type="${chartType}"
+          primary-color="#0f4395"
+          secondary-color="#8bc832"
+          main-color="#555"
+          background-color="#fdfbff"
+          main-font="'Inter', sans-serif"
+          title-font="'DM Serif Display', serif"
+  ></gn-dataset-view-chart>`
+        }
+        return ''
+      } else if (viewType === 'table') {
         return `<script src="https://cdn.jsdelivr.net/gh/geonetwork/geonetwork-ui@wc-dist-${
           this.version
         }/gn-wc.js"></script>
-<gn-dataset-view-chart
+  <gn-dataset-view-table
+          api-url="${new URL(
+            this.config.basePath,
+            window.location.origin
+          ).toString()}"
+          dataset-id="${metadata.uniqueIdentifier}"
+          primary-color="#0f4395"
+          secondary-color="#8bc832"
+          main-color="#555"
+          background-color="#fdfbff"
+          main-font="'Inter', sans-serif"
+          title-font="'DM Serif Display', serif"
+  ></gn-dataset-view-table>`
+      } else {
+        return `<script src="https://cdn.jsdelivr.net/gh/geonetwork/geonetwork-ui@wc-dist-${
+          this.version
+        }/gn-wc.js"></script>
+<gn-dataset-view-map
         api-url="${new URL(
           this.config.basePath,
           window.location.origin
         ).toString()}"
         dataset-id="${metadata.uniqueIdentifier}"
-        aggregation="${aggregation}"
-        x-property="${xProperty}"
-        y-property="${yProperty}"
-        chart-type="${chartType}"
         primary-color="#0f4395"
         secondary-color="#8bc832"
         main-color="#555"
         background-color="#fdfbff"
         main-font="'Inter', sans-serif"
         title-font="'DM Serif Display', serif"
-></gn-dataset-view-chart>`
+></gn-dataset-view-map>`
       }
-      return ''
     })
   )
 

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

@@ -1,11 +1,11 @@
 import { Injectable } from '@angular/core'
 import { select, Store } from '@ngrx/store'
 import {
+  catchError,
   defaultIfEmpty,
   filter,
   map,
   mergeMap,
-  scan,
   switchMap,
   toArray,
 } from 'rxjs/operators'
@@ -119,7 +119,11 @@ export class MdViewFacade {
                     ? link
                     : null
                 }),
-                defaultIfEmpty(null)
+                defaultIfEmpty(null),
+                catchError((e) => {
+                  console.error(e)
+                  return of(null)
+                })
               )
             } else {
               return of(link)

package/src/libs/feature/search/src/lib/results-table/results-table-container.component.html

@@ -4,6 +4,7 @@
   [selectedRecordsIdentifiers]="selectedRecords$ | async"
   [sortOrder]="sortBy$ | async"
   (recordClick)="handleRecordClick($event)"
+  (duplicateRecord)="handleDuplicateRecord($event)"
   (recordsSelectedChange)="handleRecordsSelectedChange($event[0], $event[1])"
   (sortByChange)="handleSortByChange($event[0], $event[1])"
 ></gn-ui-results-table>

package/src/libs/feature/search/src/lib/results-table/results-table-container.component.ts

@@ -16,6 +16,7 @@ import { CommonModule } from '@angular/common'
 })
 export class ResultsTableContainerComponent {
   @Output() recordClick = new EventEmitter<CatalogRecord>()
+  @Output() duplicateRecord = new EventEmitter<CatalogRecord>()
 
   records$ = this.searchFacade.results$
   selectedRecords$ = this.selectionService.selectedRecordsIdentifiers$
@@ -35,6 +36,10 @@ export class ResultsTableContainerComponent {
     this.recordClick.emit(item as CatalogRecord)
   }
 
+  handleDuplicateRecord(item: unknown) {
+    this.duplicateRecord.emit(item as CatalogRecord)
+  }
+
   handleSortByChange(col: string, order: 'asc' | 'desc') {
     this.searchService.setSortBy([order, col])
   }

package/src/libs/feature/search/src/lib/utils/service/fields.service.ts

@@ -25,19 +25,21 @@ marker('search.filters.keyword')
 marker('search.filters.isSpatial')
 marker('search.filters.license')
 marker('search.filters.publicationYear')
-marker('search.filters.publisher')
+marker('search.filters.organization')
 marker('search.filters.representationType')
 marker('search.filters.resourceType')
 marker('search.filters.standard')
 marker('search.filters.topic')
 marker('search.filters.contact')
+marker('search.filters.producerOrg')
+marker('search.filters.publisherOrg')
 
 @Injectable({
   providedIn: 'root',
 })
 export class FieldsService {
   protected fields = {
-    publisher: new OrganizationSearchField(this.injector),
+    organization: new OrganizationSearchField(this.injector),
     format: new SimpleSearchField('format', this.injector, 'asc'),
     resourceType: new TranslatedSearchField(
       'resourceType',
@@ -70,6 +72,18 @@ export class FieldsService {
     q: new FullTextSearchField(),
     license: new LicenseSearchField(this.injector),
     owner: new OwnerSearchField(this.injector),
+    producerOrg: new MultilingualSearchField(
+      'originatorOrgForResourceObject',
+      this.injector,
+      'asc',
+      'key'
+    ),
+    publisherOrg: new MultilingualSearchField(
+      'distributorOrgForResourceObject',
+      this.injector,
+      'asc',
+      'key'
+    ),
   } as Record<string, AbstractSearchField>
 
   get supportedFields() {

package/src/libs/ui/elements/src/lib/api-card/api-card.component.html

@@ -1,7 +1,5 @@
 <div
-  class="group flex flex-col justify-between h-40 pt-5 pb-6 px-7 rounded filter overflow-hidden"
-  [ngClass]="{ 'cursor-pointer': displayApiFormButton }"
-  (click)="openRecordApiFormPanel()"
+  class="group flex flex-col justify-between h-40 pt-5 pb-6 px-7 rounded filter overflow-hidden cursor-default"
 >
   <div
     class="font-title font-medium text-21 text-black text-ellipsis overflow-hidden break-words pb-5 h-[4.5rem]"
@@ -17,35 +15,37 @@
         }"
         >{{ link.accessServiceProtocol }}</span
       >
-      <gn-ui-copy-text-button
-        *ngIf="!displayApiFormButton"
-        [text]="link.url.toString()"
-        [tooltipText]="'tooltip.url.copy' | translate"
-        [displayText]="false"
-      ></gn-ui-copy-text-button>
-      <button
-        *ngIf="displayApiFormButton"
-        type="button"
-        [ngClass]="{
-          'py-2 px-4 rounded-r-md bg-gray-400 hover:bg-gray-600 focus:bg-gray-800 text-white':
-            displayText
-        }"
-        mat-raised-button
-        [matTooltip]="
-          !currentlyActive
-            ? ('record.metadata.api.form.openForm' | translate)
-            : ('record.metadata.api.form.closeForm' | translate)
-        "
-        matTooltipPosition="above"
-      >
-        <mat-icon
-          class="material-symbols-outlined pointer-events-none align-middle card-icon"
+      <div class="flex flex-row gap-2 items-center">
+        <gn-ui-copy-text-button
+          [text]="link.url"
+          [tooltipText]="'tooltip.url.copy' | translate"
+          [displayText]="false"
+        ></gn-ui-copy-text-button>
+        <button
+          *ngIf="displayApiFormButton"
+          type="button"
           [ngClass]="{
-            'text-secondary opacity-100': currentlyActive
+            'py-2 px-4 rounded-r-md bg-gray-400 hover:bg-gray-600 focus:bg-gray-800 text-white':
+              displayText
           }"
-          >more_horiz</mat-icon
+          mat-raised-button
+          [matTooltip]="
+            !currentlyActive
+              ? ('record.metadata.api.form.openForm' | translate)
+              : ('record.metadata.api.form.closeForm' | translate)
+          "
+          matTooltipPosition="above"
+          (click)="openRecordApiFormPanel()"
         >
-      </button>
+          <mat-icon
+            class="material-symbols-outlined pointer-events-none align-middle card-icon"
+            [ngClass]="{
+              'text-secondary opacity-100': currentlyActive
+            }"
+            >more_horiz</mat-icon
+          >
+        </button>
+      </div>
     </div>
   </div>
 </div>

package/src/libs/ui/elements/src/lib/ui-elements.module.ts

@@ -10,7 +10,7 @@ import { DownloadItemComponent } from './download-item/download-item.component'
 import { DownloadsListComponent } from './downloads-list/downloads-list.component'
 import { ApiCardComponent } from './api-card/api-card.component'
 import { UiWidgetsModule } from '../../../../../libs/ui/widgets/src'
-import { UiLayoutModule } from '../../../../../libs/ui/layout/src'
+import { MaxLinesComponent, UiLayoutModule } from '../../../../../libs/ui/layout/src'
 import { TranslateModule } from '@ngx-translate/core'
 import { RelatedRecordCardComponent } from './related-record-card/related-record-card.component'
 import { MetadataContactComponent } from './metadata-contact/metadata-contact.component'
@@ -49,6 +49,7 @@ import { TimeSincePipe } from './user-feedback-item/time-since.pipe'
     ThumbnailComponent,
     TimeSincePipe,
     BadgeComponent,
+    MaxLinesComponent,
   ],
   declarations: [
     MetadataInfoComponent,

package/src/libs/ui/elements/src/lib/user-preview/user-preview.component.html

@@ -1,6 +1,6 @@
 <figure class="text-center">
   <div
-    class="w-12 h-12 border border-primary rounded-full capitalize"
+    class="w-10 h-10 border border-primary rounded-full capitalize"
     [matTooltip]="userFullName"
   >
     <gn-ui-avatar

package/src/libs/ui/inputs/src/lib/switch-toggle/switch-toggle.component.css

@@ -0,0 +1,31 @@
+:host {
+  --mat-standard-button-toggle-height: 32px;
+}
+
+.mat-button-toggle-group-appearance-standard {
+  background-color: var(--color-gray-200);
+  padding: 4px;
+  display: flex;
+  gap: 4px;
+  border-radius: 8px;
+}
+
+.mat-button-toggle-appearance-standard {
+  color: var(--color-main);
+  background-color: var(--color-gray-200);
+  border-radius: 4px;
+  border-left: none;
+}
+
+.mat-button-toggle-appearance-standard.mat-button-toggle-checked {
+  background-color: var(--color-main);
+  color: var(--color-primary-white);
+}
+
+button.mat-button-toggle-button.mat-focus-indicator.mat-button-toggle-label-content {
+  line-height: 32px;
+}
+
+.mat-button-toggle-label-content {
+  line-height: 32px;
+}

package/src/libs/ui/inputs/src/lib/switch-toggle/switch-toggle.component.html

@@ -0,0 +1,15 @@
+<mat-button-toggle-group
+  #group="matButtonToggleGroup"
+  multiple="false"
+  class="flex w-full"
+>
+  <mat-button-toggle
+    *ngFor="let option of options"
+    [aria-label]="option.label"
+    [value]="option.value"
+    [checked]="option.checked"
+    (change)="onChange(option)"
+    [class]="extraClasses"
+    >{{ option.label }}</mat-button-toggle
+  >
+</mat-button-toggle-group>

package/src/libs/ui/inputs/src/lib/switch-toggle/switch-toggle.component.ts

@@ -0,0 +1,38 @@
+import { CommonModule } from '@angular/common'
+import {
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  Input,
+  Output,
+} from '@angular/core'
+import { MatButtonToggleModule } from '@angular/material/button-toggle'
+
+export type SwitchToggleOption = {
+  label: string
+  value: string
+  checked: boolean
+}
+
+@Component({
+  selector: 'gn-ui-switch-toggle',
+  templateUrl: './switch-toggle.component.html',
+  styleUrls: ['./switch-toggle.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [MatButtonToggleModule, CommonModule],
+})
+export class SwitchToggleComponent {
+  @Input() options: SwitchToggleOption[]
+  @Input() ariaLabel? = ''
+  @Input() extraClasses? = ''
+  @Output() selectedValue = new EventEmitter<SwitchToggleOption>()
+
+  onChange(selectedOption: SwitchToggleOption) {
+    this.options.find(
+      (option) => option.value === selectedOption.value
+    ).checked = true
+
+    this.selectedValue.emit(selectedOption)
+  }
+}

package/src/libs/ui/layout/src/lib/max-lines/max-lines.component.html

@@ -14,6 +14,7 @@
   *ngIf="showToggleButton"
   (click)="toggleDisplay()"
   class="text-secondary cursor-pointer pt-2.5"
+  data-cy="readMoreButton"
 >
   {{ (isExpanded ? 'ui.readLess' : 'ui.readMore') | translate }}
 </div>

package/src/libs/ui/search/src/lib/results-table/action-menu/action-menu.component.html

@@ -0,0 +1,17 @@
+<gn-ui-button
+  type="outline"
+  [matMenuTriggerFor]="menu"
+  (buttonClick)="openMenu()"
+  data-test="record-menu-button"
+>
+  <mat-icon class="material-symbols-outlined">more_vert</mat-icon>
+</gn-ui-button>
+<mat-menu #menu="matMenu">
+  <button
+    mat-menu-item
+    (click)="duplicate.emit()"
+    data-test="record-menu-duplicate-button"
+  >
+    <span translate>record.action.duplicate</span>
+  </button>
+</mat-menu>

package/src/libs/ui/search/src/lib/results-table/action-menu/action-menu.component.ts

@@ -0,0 +1,22 @@
+import { Component, EventEmitter, Output, ViewChild } from '@angular/core'
+import { MatIconModule } from '@angular/material/icon'
+import { MatMenuModule, MatMenuTrigger } from '@angular/material/menu'
+import { ButtonComponent } from '../../../../../../../libs/ui/inputs/src'
+import { TranslateModule } from '@ngx-translate/core'
+
+@Component({
+  selector: 'gn-ui-action-menu',
+  templateUrl: './action-menu.component.html',
+  styleUrls: ['./action-menu.component.css'],
+  standalone: true,
+  imports: [MatIconModule, ButtonComponent, MatMenuModule, TranslateModule],
+})
+export class ActionMenuComponent {
+  @Output() duplicate = new EventEmitter<void>()
+
+  @ViewChild(MatMenuTrigger) trigger: MatMenuTrigger
+
+  openMenu() {
+    this.trigger.openMenu()
+  }
+}

package/src/libs/ui/search/src/lib/results-table/results-table.component.html

@@ -120,4 +120,13 @@
       {{ dateToString(item.recordUpdated) }}
     </ng-template>
   </gn-ui-interactive-table-column>
+
+  <!-- ACTION MENU COLUMN -->
+  <gn-ui-interactive-table-column>
+    <ng-template #header> </ng-template>
+    <ng-template #cell let-item>
+      <gn-ui-action-menu (duplicate)="handleDuplicate(item)">
+      </gn-ui-action-menu>
+    </ng-template>
+  </gn-ui-interactive-table-column>
 </gn-ui-interactive-table>

package/src/libs/ui/search/src/lib/results-table/results-table.component.ts

@@ -1,23 +1,31 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core'
+import { CommonModule } from '@angular/common'
+import {
+  Component,
+  EventEmitter,
+  Input,
+  Output,
+  ViewChild,
+} from '@angular/core'
+import { MatIconModule } from '@angular/material/icon'
+import { MatMenuModule, MatMenuTrigger } from '@angular/material/menu'
 import { CatalogRecord } from '../../../../../../libs/common/domain/src/lib/model/record'
 import {
-  FileFormat,
-  getBadgeColor,
-  getFileFormat,
-  getFormatPriority,
-} from '../../../../../../libs/util/shared/src'
+  FieldSort,
+  SortByField,
+} from '../../../../../../libs/common/domain/src/lib/model/search'
 import { BadgeComponent, UiInputsModule } from '../../../../../../libs/ui/inputs/src'
 import {
   InteractiveTableColumnComponent,
   InteractiveTableComponent,
 } from '../../../../../../libs/ui/layout/src'
-import { MatIconModule } from '@angular/material/icon'
-import { TranslateModule } from '@ngx-translate/core'
-import { CommonModule } from '@angular/common'
 import {
-  FieldSort,
-  SortByField,
-} from '../../../../../../libs/common/domain/src/lib/model/search'
+  FileFormat,
+  getBadgeColor,
+  getFileFormat,
+  getFormatPriority,
+} from '../../../../../../libs/util/shared/src'
+import { TranslateModule } from '@ngx-translate/core'
+import { ActionMenuComponent } from './action-menu/action-menu.component'
 
 @Component({
   selector: 'gn-ui-results-table',
@@ -32,6 +40,7 @@ import {
     MatIconModule,
     TranslateModule,
     BadgeComponent,
+    ActionMenuComponent,
   ],
 })
 export class ResultsTableComponent {
@@ -43,6 +52,7 @@ export class ResultsTableComponent {
   // emits the column (field) as well as the order
   @Output() sortByChange = new EventEmitter<[string, 'asc' | 'desc']>()
   @Output() recordClick = new EventEmitter<CatalogRecord>()
+  @Output() duplicateRecord = new EventEmitter<CatalogRecord>()
   @Output() recordsSelectedChange = new EventEmitter<
     [CatalogRecord[], boolean]
   >()
@@ -89,6 +99,10 @@ export class ResultsTableComponent {
     this.recordClick.emit(item as CatalogRecord)
   }
 
+  handleDuplicate(item: unknown) {
+    this.duplicateRecord.emit(item as CatalogRecord)
+  }
+
   setSortBy(col: string, order: 'asc' | 'desc') {
     this.sortByChange.emit([col, order])
   }

package/tailwind.base.css

@@ -115,7 +115,8 @@
     --padding: var(--gn-ui-badge-padding, 0.375em 0.75em);
     --text-color: var(--gn-ui-badge-text-color, var(--color-gray-50));
     --background-color: var(--gn-ui-badge-background-color, black);
-    @apply inline-block opacity-70 p-[--padding] rounded-[--rounded]
+    --opacity: var(--gn-ui-badge-opacity, 0.7);
+    @apply inline-block opacity-[--opacity] p-[--padding] rounded-[--rounded]
       font-medium text-[length:0.875em] leading-none text-[color:--text-color] bg-[color:--background-color];
   }
   /* makes sure icons will not make the badges grow vertically; also make size proportional */