geonetwork-ui 2.1.0-initial

package/src/libs/feature/dataviz/src/lib/service/data.service.ts

@@ -0,0 +1,208 @@
+import { Injectable } from '@angular/core'
+import { marker } from '@biesbjerg/ngx-translate-extract-marker'
+import { WfsEndpoint, WfsVersion } from '@camptocamp/ogc-client'
+import {
+  BaseReader,
+  FetchError,
+  openDataset,
+  SupportedType,
+  SupportedTypes,
+} from '../../../../../../libs/util/data-fetcher/src'
+import {
+  extensionToFormat,
+  getFileFormat,
+  getMimeTypeForFormat,
+  ProxyService,
+} from '../../../../../../libs/util/shared/src'
+import type { FeatureCollection } from 'geojson'
+import { from, Observable, throwError } from 'rxjs'
+import { catchError, map, switchMap, tap } from 'rxjs/operators'
+import {
+  DatasetDistribution,
+  DatasetServiceDistribution,
+} from '../../../../../../libs/common/domain/src/lib/record'
+
+marker('wfs.unreachable.cors')
+marker('wfs.unreachable.http')
+marker('wfs.unreachable.unknown')
+marker('wfs.featuretype.notfound')
+marker('wfs.geojsongml.notsupported')
+marker('dataset.error.network')
+marker('dataset.error.http')
+marker('dataset.error.parse')
+marker('dataset.error.unsupportedType')
+marker('dataset.error.unknown')
+
+interface WfsDownloadUrls {
+  all: { [format: string]: string }
+  geojson: string
+  gml: { featureUrl: string; namespace: string; wfsVersion: WfsVersion }
+}
+
+@Injectable({
+  providedIn: 'root',
+})
+export class DataService {
+  constructor(private proxy: ProxyService) {}
+
+  private getDownloadUrlsFromWfs(
+    wfsUrl: string,
+    featureTypeName: string
+  ): Observable<WfsDownloadUrls> {
+    return from(
+      new WfsEndpoint(this.proxy.getProxiedUrl(wfsUrl)).isReady()
+    ).pipe(
+      catchError((error: FetchError | Error) => {
+        if (error instanceof Error) {
+          throw new Error(`wfs.unreachable.unknown`)
+        } else {
+          if (error.type === 'network') {
+            throw new Error(`wfs.unreachable.cors`)
+          }
+          if (error.type === 'http') {
+            throw new Error(`wfs.unreachable.http`)
+          }
+          if (error.type === 'parse') {
+            throw new Error(`wfs.unreachable.parse`)
+          }
+          if (error.type === 'unsupportedType') {
+            throw new Error(`wfs.unreachable.unsupportedType`)
+          } else {
+            throw new Error(`wfs.unreachable.unknown`)
+          }
+        }
+      }),
+      map((endpoint) => {
+        const featureTypes = endpoint.getFeatureTypes()
+        const featureType = endpoint.getFeatureTypeSummary(
+          featureTypes.length === 1 && !featureTypeName
+            ? featureTypes[0].name
+            : featureTypeName
+        )
+        if (!featureType) {
+          throw new Error('wfs.featuretype.notfound')
+        }
+        return {
+          all: featureType.outputFormats.reduce(
+            (prev, curr) => ({
+              ...prev,
+              [curr]: endpoint.getFeatureUrl(featureType.name, {
+                outputFormat: curr,
+              }),
+            }),
+            {}
+          ),
+          geojson: endpoint.supportsJson(featureType.name)
+            ? endpoint.getFeatureUrl(featureType.name, {
+                outputFormat: 'application/json',
+                outputCrs: 'EPSG:4326',
+              })
+            : null,
+          gml:
+            featureType.outputFormats.find((f) =>
+              f.toLowerCase().includes('gml')
+            ) &&
+            (featureType.defaultCrs === 'EPSG:4326' ||
+              featureType.otherCrs?.includes('EPSG:4326'))
+              ? {
+                  featureUrl: endpoint.getFeatureUrl(featureType.name, {
+                    outputFormat: featureType.outputFormats.find((f) =>
+                      f.toLowerCase().includes('gml')
+                    ),
+                    outputCrs: 'EPSG:4326',
+                  }),
+                  namespace: featureType.name,
+                  wfsVersion: endpoint.getVersion(),
+                }
+              : null,
+        }
+      })
+    )
+  }
+
+  private getDownloadUrlFromEsriRest(apiUrl: string, format: string): string {
+    return this.proxy.getProxiedUrl(
+      `${apiUrl}/query?f=${format}&where=1=1&outFields=*`
+    )
+  }
+
+  getDownloadLinksFromWfs(
+    wfsLink: DatasetServiceDistribution
+  ): Observable<DatasetDistribution[]> {
+    // Pour DL toutes les données
+    return this.getDownloadUrlsFromWfs(
+      wfsLink.url.toString(),
+      wfsLink.name
+    ).pipe(
+      map((urls) => urls.all),
+      map((urls) =>
+        Object.keys(urls).map((format) => ({
+          ...wfsLink,
+          url: new URL(urls[format]),
+          mimeType: getMimeTypeForFormat(extensionToFormat(format)) || format,
+        }))
+      )
+    )
+  }
+
+  getDownloadLinksFromEsriRest(
+    esriRestLink: DatasetServiceDistribution
+  ): DatasetDistribution[] {
+    return ['json', 'geojson'].map((format) => ({
+      ...esriRestLink,
+      url: new URL(
+        this.getDownloadUrlFromEsriRest(esriRestLink.url.toString(), format)
+      ),
+      mimeType: getMimeTypeForFormat(extensionToFormat(format)) || format,
+    }))
+  }
+
+  readAsGeoJson(link: DatasetDistribution): Observable<FeatureCollection> {
+    return this.getDataset(link).pipe(
+      switchMap((dataset) => dataset.selectAll().read()),
+      map((features) => ({
+        type: 'FeatureCollection',
+        features,
+      }))
+    )
+  }
+
+  getDataset(link: DatasetDistribution): Observable<BaseReader> {
+    if (link.type === 'service' && link.accessServiceProtocol === 'wfs') {
+      return this.getDownloadUrlsFromWfs(link.url.toString(), link.name).pipe(
+        switchMap((urls) => {
+          if (urls.geojson) return openDataset(urls.geojson, 'geojson')
+          if (urls.gml)
+            return openDataset(urls.gml.featureUrl, 'gml', {
+              namespace: urls.gml.namespace,
+              wfsVersion: urls.gml.wfsVersion,
+            })
+          return null
+        }),
+        tap((url) => {
+          if (url === null) {
+            throw new Error('wfs.geojsongml.notsupported')
+          }
+        })
+      )
+    } else if (link.type === 'download') {
+      const linkProxifiedUrl = this.proxy.getProxiedUrl(link.url.toString())
+      const format = getFileFormat(link)
+      const supportedType =
+        SupportedTypes.indexOf(format as any) > -1
+          ? (format as SupportedType)
+          : undefined
+      return from(openDataset(linkProxifiedUrl, supportedType)).pipe()
+    } else if (
+      link.type === 'service' &&
+      link.accessServiceProtocol === 'esriRest'
+    ) {
+      const url = this.getDownloadUrlFromEsriRest(
+        link.url.toString(),
+        'geojson'
+      )
+      return from(openDataset(url, 'geojson')).pipe()
+    }
+    return throwError(() => 'protocol not supported')
+  }
+}

package/src/libs/feature/dataviz/src/lib/table-view/table-view.component.html

@@ -0,0 +1,22 @@
+<div class="w-full h-full flex flex-col">
+  <div class="relative h-full">
+    <gn-ui-table
+      class="overflow-auto grow"
+      [data]="tableData$ | async"
+      (selected)="onTableSelect($event)"
+    ></gn-ui-table>
+    <gn-ui-loading-mask
+      *ngIf="loading"
+      class="absolute inset-0"
+      [message]="'table.loading.data' | translate"
+    ></gn-ui-loading-mask>
+    <gn-ui-popup-alert
+      *ngIf="error"
+      type="warning"
+      icon="error_outline"
+      class="absolute m-2 inset-0"
+    >
+      <span translate>{{ error }}</span>
+    </gn-ui-popup-alert>
+  </div>
+</div>

package/src/libs/feature/dataviz/src/lib/table-view/table-view.component.ts

@@ -0,0 +1,90 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
+import { BehaviorSubject, Observable, of } from 'rxjs'
+import {
+  catchError,
+  finalize,
+  map,
+  shareReplay,
+  startWith,
+  switchMap,
+} from 'rxjs/operators'
+import { DataItem, FetchError } from '../../../../../../libs/util/data-fetcher/src'
+import { DataService } from '../service/data.service'
+import { TableItemModel } from '../../../../../../libs/ui/dataviz/src'
+import { DatasetDistribution } from '../../../../../../libs/common/domain/src/lib/record'
+import { TranslateService } from '@ngx-translate/core'
+
+@Component({
+  selector: 'gn-ui-table-view',
+  templateUrl: './table-view.component.html',
+  styleUrls: ['./table-view.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class TableViewComponent {
+  @Input() set link(value: DatasetDistribution) {
+    this.currentLink$.next(value)
+  }
+  private currentLink$ = new BehaviorSubject<DatasetDistribution>(null)
+
+  loading = false
+  error = null
+
+  tableData$ = this.currentLink$.pipe(
+    switchMap((link) => {
+      this.error = null
+      if (!link) return of([] as TableItemModel[])
+      this.loading = true
+      return this.fetchData(link).pipe(
+        map((items) =>
+          items.map((item) => ({
+            id: item.id,
+            ...item.properties,
+          }))
+        ),
+        catchError((error) => {
+          this.handleError(error)
+          return of([] as TableItemModel[])
+        }),
+        finalize(() => {
+          this.loading = false
+        })
+      )
+    }),
+    startWith([] as TableItemModel[]),
+    shareReplay(1)
+  )
+
+  constructor(
+    private dataService: DataService,
+    private translateService: TranslateService
+  ) {}
+
+  fetchData(link: DatasetDistribution): Observable<DataItem[]> {
+    return this.dataService
+      .getDataset(link)
+      .pipe(switchMap((dataset) => dataset.read()))
+  }
+
+  onTableSelect(event) {
+    console.log(event)
+  }
+
+  handleError(error: FetchError | Error | string) {
+    if (error instanceof FetchError) {
+      this.error = this.translateService.instant(
+        `dataset.error.${error.type}`,
+        {
+          info: error.info,
+        }
+      )
+      console.warn(error.message)
+    } else if (error instanceof Error) {
+      this.error = this.translateService.instant(error.message)
+      console.warn(error.stack || error)
+    } else {
+      this.error = this.translateService.instant(error)
+      console.warn(error)
+    }
+    this.loading = false
+  }
+}

package/src/libs/feature/editor/src/index.ts

@@ -0,0 +1,6 @@
+export * from './lib/feature-editor.module'
+export * from './lib/services/editor.service'
+export * from './lib/record-form/record-form.component'
+export * from './lib/components/wizard/wizard.component'
+export * from './lib/components/wizard-field/wizard-field.component'
+export * from './lib/components/wizard-summarize/wizard-summarize.component'

package/src/libs/feature/editor/src/lib/components/configs/datepicker.config.ts

@@ -0,0 +1,26 @@
+export const MONTH_OF_THE_YEAR = [
+  'january',
+  'february',
+  'march',
+  'april',
+  'may',
+  'june',
+  'july',
+  'august',
+  'september',
+  'october',
+  'november',
+  'december',
+]
+
+export const DATEPICKER_OPTIONS: any = {
+  todayBtnTxt: 'Today',
+  markCurrentDay: true,
+  dateFormat: 'dd mmm yyyy',
+  firstDayOfWeek: 'mo',
+  sunHighlight: true,
+  inline: false,
+  showTodayBtn: false,
+  height: '100%',
+  selectorHeight: '100%',
+}

package/src/libs/feature/editor/src/lib/components/wizard/wizard.component.css

@@ -0,0 +1,5 @@
+:host {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}

package/src/libs/feature/editor/src/lib/components/wizard/wizard.component.html

@@ -0,0 +1,26 @@
+<div class="pl-5 pt-24 flex flex-1 flex-col justify-between">
+  <div
+    #wizardFields
+    class="flex-1 flex"
+    *ngFor="let config of configuration; let i = index"
+  >
+    <gn-ui-wizard-field [wizardFieldConfig]="config"></gn-ui-wizard-field>
+  </div>
+</div>
+<div class="flex pt-24 pl-8">
+  <gn-ui-button
+    (buttonClick)="handlePreviousBtnClick()"
+    type="primary"
+    class="pr-8"
+    extraClass="rounded-full px-20"
+  >
+    <span class="uppercase text-white font-bold" translate>previous</span>
+  </gn-ui-button>
+  <gn-ui-button
+    (buttonClick)="handleNextBtnClick()"
+    type="primary"
+    extraClass="rounded-full px-20"
+  >
+    <span class="uppercase text-white font-bold" translate>next</span>
+  </gn-ui-button>
+</div>

package/src/libs/feature/editor/src/lib/components/wizard/wizard.component.ts

@@ -0,0 +1,93 @@
+import {
+  AfterViewInit,
+  Component,
+  ElementRef,
+  EventEmitter,
+  Input,
+  OnInit,
+  Output,
+  ViewChild,
+} from '@angular/core'
+import { TranslateService } from '@ngx-translate/core'
+import { take } from 'rxjs/operators'
+import { WizardFieldModel } from '../../models/wizard-field.model'
+import { WizardService } from '../../services/wizard.service'
+
+@Component({
+  selector: 'gn-ui-wizard',
+  templateUrl: './wizard.component.html',
+  styleUrls: ['./wizard.component.css'],
+})
+export class WizardComponent implements OnInit, AfterViewInit {
+  @Input() id: string
+  @Input() initialConfig: {
+    configuration: WizardFieldModel[][]
+    storageKey: string
+  }
+  @Input() requiredMsgKey: string
+
+  @Output() stepChanges = new EventEmitter<number>()
+  @Output() stepsNumber = new EventEmitter<number>()
+
+  @ViewChild('wizardFields') wizardFieldsEl: ElementRef<HTMLElement>
+
+  currentStep: number
+  configuration: WizardFieldModel[]
+
+  constructor(
+    private wizardService: WizardService,
+    private translate: TranslateService
+  ) {}
+
+  ngOnInit(): void {
+    this.wizardService.initialize(this.id, this.initialConfig)
+
+    this.initializeCurrentStep()
+    this.stepChanges.emit(this.wizardService.getCurrentStep())
+    this.stepsNumber.emit(this.wizardService.getConfigurationStepNumber())
+  }
+
+  ngAfterViewInit() {
+    this.setFocus()
+  }
+
+  handlePreviousBtnClick() {
+    this.onStepChange(this.currentStep - 1)
+
+    this.stepChanges.emit(this.currentStep)
+  }
+
+  handleNextBtnClick() {
+    if (
+      this.wizardFieldsEl?.nativeElement?.querySelectorAll('.invalid').length >
+      0
+    ) {
+      this.translate.get(this.requiredMsgKey).pipe(take(1)).subscribe(alert)
+      return
+    }
+    this.onStepChange(this.currentStep + 1)
+
+    this.stepChanges.emit(this.currentStep)
+  }
+
+  onStepChange(step: number) {
+    this.wizardService.onWizardStepChanged(step)
+
+    this.setFocus()
+    this.initializeCurrentStep()
+  }
+
+  private initializeCurrentStep() {
+    this.currentStep = this.wizardService.getCurrentStep()
+    this.configuration = this.wizardService.getStepConfiguration()
+  }
+
+  private setFocus() {
+    setTimeout(() => {
+      const inputEl = this.wizardFieldsEl.nativeElement.querySelectorAll(
+        'input, textarea, select'
+      )[0] as HTMLElement
+      inputEl.focus()
+    }, 0)
+  }
+}

package/src/libs/feature/editor/src/lib/components/wizard-field/wizard-field.component.css

@@ -0,0 +1,31 @@
+:host {
+  display: flex;
+  flex: 1;
+}
+
+gn-ui-text-input::ng-deep input,
+input[type='text'] {
+  height: 100%;
+  background: white;
+  color: black;
+  font-style: italic;
+
+  border-width: 2px;
+  border-color: var(--color-primary);
+}
+
+gn-ui-text-area::ng-deep textarea {
+  border-width: 2px;
+  border-color: var(--color-primary);
+}
+
+gn-ui-dropdown-selector::ng-deep div {
+  height: 100%;
+}
+
+gn-ui-dropdown-selector::ng-deep select {
+  height: 100%;
+  border-width: 2px;
+  border-color: var(--color-primary);
+  background-color: white;
+}

package/src/libs/feature/editor/src/lib/components/wizard-field/wizard-field.component.html

@@ -0,0 +1,75 @@
+<div class="flex flex-1">
+  <span [class]="wizardFieldConfig.icon + ' pr-10'"></span>
+  <div class="flex flex-col flex-1">
+    <div translate class="text-xl font-bold pb-1">
+      {{ wizardFieldConfig.label }}
+    </div>
+    <div
+      class="w-1/2 h-12"
+      *ngIf="wizardFieldType.TEXT === wizardFieldConfig.type"
+    >
+      <gn-ui-text-input
+        #searchText
+        [id]="wizardFieldConfig.id"
+        [value]="wizardFieldData"
+        [required]="wizardFieldConfig.required || false"
+        hint=""
+      ></gn-ui-text-input>
+    </div>
+    <div
+      class="flex-1 w-11/12"
+      *ngIf="wizardFieldType.CHIPS === wizardFieldConfig.type"
+    >
+      <gn-ui-chips-input
+        #chips
+        [selectedItems]="wizardFieldData"
+        placeholder=""
+        [id]="wizardFieldConfig.id"
+        [url]="wizardFieldConfig.options.url"
+        [loadOnce]="wizardFieldConfig.options.loadOnce"
+      ></gn-ui-chips-input>
+    </div>
+    <div
+      class="h-32 w-11/12"
+      *ngIf="wizardFieldType.TEXT_AREA === wizardFieldConfig.type"
+    >
+      <gn-ui-text-area
+        #textArea
+        [id]="wizardFieldConfig.id"
+        [value]="wizardFieldData"
+        [required]="wizardFieldConfig.required || false"
+        placeholder=""
+      ></gn-ui-text-area>
+    </div>
+    <div
+      class="w-1/2 h-12"
+      *ngIf="wizardFieldType.DATA_PICKER === wizardFieldConfig.type"
+    >
+      <input
+        [id]="wizardFieldConfig.id"
+        type="text"
+        (click)="datepicker.open()"
+        class="rounded p-2 text-gray-700 w-full leading-tight focus:outline-none focus:border-primary"
+        [value]="wizardFieldData"
+        [matDatepicker]="datepicker"
+        (dateChange)="onDateChange($event)"
+      />
+      <mat-datepicker #datepicker></mat-datepicker>
+    </div>
+    <div
+      class="w-1/2 h-12"
+      *ngIf="wizardFieldType.DROPDOWN === wizardFieldConfig.type"
+    >
+      <gn-ui-dropdown-selector
+        #dropdown
+        [id]="wizardFieldConfig.id"
+        [title]="''"
+        [extraBtnClass]="'secondary min-w-full'"
+        [showTitle]="false"
+        [choices]="dropdownChoices"
+        [selected]="wizardFieldData"
+        ariaName="search-sort-by"
+      ></gn-ui-dropdown-selector>
+    </div>
+  </div>
+</div>