geonetwork-ui 2.1.0-initial

package/src/libs/ui/widgets/src/lib/step-bar/step-bar.component.html

@@ -0,0 +1,13 @@
+<div class="relative flex flex-col justify-center">
+  <div class="flex justify-between ml-16 mr-16 z-10 circle-steps">
+    <div
+      *ngFor="let step of stepCounter; let i = index"
+      class="shadow-md rounded-full h-6 w-6 {{ getCircleColor(i + 1) }}"
+    >
+      <span class="icon-check pl-1" *ngIf="getChecked(i)"></span>
+    </div>
+  </div>
+  <div
+    class="absolute rounded-lg right-0 w-full {{ color.outerBar }} h-2 z-0"
+  ></div>
+</div>

package/src/libs/ui/widgets/src/lib/step-bar/step-bar.component.ts

@@ -0,0 +1,55 @@
+import { ChangeDetectorRef, Component, Input } from '@angular/core'
+
+interface ColorScheme {
+  outerBar: string
+  innerBar: string
+}
+
+@Component({
+  selector: 'gn-ui-step-bar',
+  templateUrl: './step-bar.component.html',
+  styleUrls: ['./step-bar.component.css'],
+})
+export class StepBarComponent {
+  @Input() steps
+  @Input() currentStep = 1
+  @Input() type: 'primary' | 'secondary' | 'default' = 'default'
+
+  constructor(private cdr: ChangeDetectorRef) {}
+
+  get stepCounter() {
+    return new Array(this.steps)
+  }
+
+  get color(): ColorScheme {
+    switch (this.type) {
+      case 'default':
+        return {
+          outerBar: 'bg-gray-200',
+          innerBar: 'bg-gray-100',
+        }
+      case 'primary':
+        return {
+          outerBar: 'bg-primary',
+          innerBar: 'bg-primary-lighter',
+        }
+      case 'secondary':
+        return {
+          outerBar: 'bg-secondary',
+          innerBar: 'bg-secondary-lighter',
+        }
+    }
+  }
+
+  getCircleColor(index: number): string {
+    return index === this.currentStep
+      ? 'bg-black'
+      : index < this.currentStep
+      ? 'bg-white'
+      : this.color.innerBar
+  }
+
+  getChecked(index: number): boolean {
+    return index + 1 < this.currentStep
+  }
+}

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

@@ -0,0 +1,48 @@
+import { NgModule } from '@angular/core'
+import { UtilSharedModule } from '../../../../../libs/util/shared/src'
+import { TranslateModule } from '@ngx-translate/core'
+import { NgxDropzoneModule } from 'ngx-dropzone'
+import { ColorScaleComponent } from './color-scale/color-scale.component'
+import { ProgressBarComponent } from './progress-bar/progress-bar.component'
+import { StepBarComponent } from './step-bar/step-bar.component'
+import { TagInputModule } from 'ngx-chips'
+import { FormsModule, ReactiveFormsModule } from '@angular/forms'
+import { LoadingMaskComponent } from './loading-mask/loading-mask.component'
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner'
+import { PopupAlertComponent } from './popup-alert/popup-alert.component'
+import { BadgeComponent } from './badge/badge.component'
+import { MatIconModule } from '@angular/material/icon'
+import { SpinningLoaderComponent } from './spinning-loader/spinning-loader.component'
+import { CommonModule } from '@angular/common'
+
+@NgModule({
+  declarations: [
+    ColorScaleComponent,
+    ProgressBarComponent,
+    StepBarComponent,
+    LoadingMaskComponent,
+    PopupAlertComponent,
+    BadgeComponent,
+    SpinningLoaderComponent,
+  ],
+  imports: [
+    CommonModule,
+    TranslateModule.forChild(),
+    NgxDropzoneModule,
+    FormsModule,
+    ReactiveFormsModule,
+    TagInputModule,
+    UtilSharedModule,
+    MatProgressSpinnerModule,
+    MatIconModule,
+  ],
+  exports: [
+    ProgressBarComponent,
+    StepBarComponent,
+    LoadingMaskComponent,
+    PopupAlertComponent,
+    BadgeComponent,
+    SpinningLoaderComponent,
+  ],
+})
+export class UiWidgetsModule {}

package/src/libs/util/app-config/src/index.ts

@@ -0,0 +1,3 @@
+export * from './lib/app-config'
+export * from './lib/fixtures'
+export * from './lib/model'

package/src/libs/util/app-config/src/lib/app-config.ts

@@ -0,0 +1,327 @@
+import * as TOML from '@ltd/j-toml'
+import {
+  checkMetadataLanguage,
+  parseConfigSection,
+  parseMultiConfigSection,
+  parseTranslationsConfigSection,
+} from './parse-utils'
+import {
+  CustomTranslations,
+  CustomTranslationsAllLanguages,
+  GlobalConfig,
+  LayerConfig,
+  MapConfig,
+  SearchConfig,
+  MetadataQualityConfig,
+  ThemeConfig,
+} from './model'
+import { TranslateCompiler, TranslateLoader } from '@ngx-translate/core'
+import { TranslateMessageFormatCompiler } from 'ngx-translate-messageformat-compiler'
+import { HttpClient } from '@angular/common/http'
+import { DEFAULT_LANG } from '../../../../../libs/util/i18n/src'
+import { FileWithOverridesTranslateLoader } from './i18n/file-with-overrides.translate.loader'
+
+const MISSING_CONFIG_ERROR = `Application configuration was not initialized correctly.
+This error might show up in case of an invalid/malformed configuration file.
+
+Note: make sure that you have called \`loadAppConfig\` from '../../../../../libs/util/app-config/src' before starting the Angular application.`
+
+let globalConfig: GlobalConfig = null
+
+export function getGlobalConfig(): GlobalConfig {
+  if (globalConfig === null) throw new Error(MISSING_CONFIG_ERROR)
+  return globalConfig
+}
+
+let themeConfig: ThemeConfig = null
+
+export function getThemeConfig(): ThemeConfig {
+  if (themeConfig === null) throw new Error(MISSING_CONFIG_ERROR)
+  return themeConfig
+}
+
+let mapConfig: MapConfig = null
+
+export function getOptionalMapConfig(): MapConfig | null {
+  return mapConfig
+}
+
+let searchConfig: SearchConfig = null
+
+export function getOptionalSearchConfig(): SearchConfig | null {
+  return searchConfig
+}
+
+let metadataQualityConfig: MetadataQualityConfig = null
+export function getMetadataQualityConfig(): MetadataQualityConfig {
+  return (
+    metadataQualityConfig ||
+    ({
+      ENABLED: false,
+    } as MetadataQualityConfig)
+  )
+}
+
+let customTranslations: CustomTranslationsAllLanguages = null
+
+export function getCustomTranslations(langCode: string): CustomTranslations {
+  if (customTranslations === null) throw new Error(MISSING_CONFIG_ERROR)
+  return langCode in customTranslations ? customTranslations[langCode] : {}
+}
+
+let appConfigLoaded = false
+
+export function loadAppConfig() {
+  return fetch('assets/configuration/default.toml')
+    .then((resp) => {
+      if (!resp.ok) throw new Error('Configuration file could not be loaded')
+      return resp.text()
+    })
+    .then((conf) => {
+      let parsed
+      try {
+        parsed = TOML.parse(conf, { joiner: '\n', bigint: false }) as any
+      } catch (e: any) {
+        throw new Error(
+          `An error occurred when parsing the configuration file: ${e.message}`
+        )
+      }
+      const errors = []
+      const warnings = []
+
+      let parsedGlobalSection = parseConfigSection(
+        parsed,
+        'global',
+        ['geonetwork4_api_url'],
+        [
+          'proxy_path',
+          'metadata_language',
+          'login_url',
+          'web_component_embedder_url',
+          'languages',
+        ],
+        warnings,
+        errors
+      )
+      if (parsedGlobalSection?.metadata_language) {
+        parsedGlobalSection = checkMetadataLanguage(
+          parsedGlobalSection,
+          warnings
+        )
+      }
+      globalConfig =
+        parsedGlobalSection === null
+          ? null
+          : ({
+              GN4_API_URL: parsedGlobalSection.geonetwork4_api_url,
+              PROXY_PATH: parsedGlobalSection.proxy_path,
+              METADATA_LANGUAGE: parsedGlobalSection.metadata_language
+                ? (
+                    parsedGlobalSection.metadata_language as string
+                  ).toLowerCase()
+                : undefined,
+              LOGIN_URL: parsedGlobalSection.login_url,
+              WEB_COMPONENT_EMBEDDER_URL:
+                parsedGlobalSection.web_component_embedder_url,
+              LANGUAGES: parsedGlobalSection.languages,
+            } as GlobalConfig)
+
+      const parsedLayersSections = parseMultiConfigSection(
+        parsed,
+        'map_layer',
+        ['type'],
+        ['name', 'url', 'data'],
+        warnings,
+        errors
+      )
+      const parsedMapSection = parseConfigSection(
+        parsed,
+        'map',
+        [],
+        [
+          'max_zoom',
+          'max_extent',
+          'baselayer',
+          'do_not_use_default_basemap',
+          'external_viewer_url_template',
+          'external_viewer_open_new_tab',
+        ],
+        warnings,
+        errors
+      )
+      mapConfig =
+        parsedMapSection === null || parsedLayersSections === null
+          ? null
+          : ({
+              MAX_ZOOM: parsedMapSection.max_zoom,
+              MAX_EXTENT: parsedMapSection.max_extent,
+              EXTERNAL_VIEWER_URL_TEMPLATE:
+                parsedMapSection.external_viewer_url_template,
+              EXTERNAL_VIEWER_OPEN_NEW_TAB:
+                parsedMapSection.external_viewer_open_new_tab,
+              DO_NOT_USE_DEFAULT_BASEMAP:
+                !!parsedMapSection.do_not_use_default_basemap,
+              MAP_LAYERS: parsedLayersSections.map(
+                (map_layer) =>
+                  ({
+                    TYPE: map_layer.type,
+                    URL: map_layer.url,
+                    NAME: map_layer.name,
+                    DATA: map_layer.data,
+                  } as LayerConfig)
+              ),
+            } as MapConfig)
+
+      const parsedThemeSection = parseConfigSection(
+        parsed,
+        'theme',
+        ['primary_color', 'secondary_color', 'main_color', 'background_color'],
+        [
+          'header_foreground_color',
+          'main_font',
+          'title_font',
+          'fonts_stylesheet_url',
+          'thumbnail_placeholder',
+          'header_background',
+        ],
+        warnings,
+        errors
+      )
+      themeConfig =
+        parsedThemeSection === null
+          ? null
+          : ({
+              PRIMARY_COLOR: parsedThemeSection.primary_color,
+              SECONDARY_COLOR: parsedThemeSection.secondary_color,
+              MAIN_COLOR: parsedThemeSection.main_color,
+              BACKGROUND_COLOR: parsedThemeSection.background_color,
+              HEADER_FOREGROUND_COLOR:
+                parsedThemeSection.header_foreground_color,
+              THUMBNAIL_PLACEHOLDER: parsedThemeSection.thumbnail_placeholder,
+              HEADER_BACKGROUND: parsedThemeSection.header_background,
+              TITLE_FONT: parsedThemeSection.title_font,
+              MAIN_FONT: parsedThemeSection.main_font,
+              FONTS_STYLESHEET_URL: parsedThemeSection.fonts_stylesheet_url,
+            } as ThemeConfig)
+
+      const parsedSearchSection = parseConfigSection(
+        parsed,
+        'search',
+        [],
+        [
+          'filter_geometry_data',
+          'filter_geometry_url',
+          'search_preset',
+          'advanced_filters',
+        ],
+        warnings,
+        errors
+      )
+      const parsedSearchParams = parseMultiConfigSection(
+        parsed,
+        'search_preset',
+        ['name'],
+        ['sort', 'filters'],
+        warnings,
+        errors
+      )
+      searchConfig =
+        parsedSearchSection === null
+          ? null
+          : ({
+              FILTER_GEOMETRY_DATA: parsedSearchSection.filter_geometry_data,
+              FILTER_GEOMETRY_URL: parsedSearchSection.filter_geometry_url,
+              SEARCH_PRESET: parsedSearchParams.map((param) => ({
+                sort: param.sort,
+                name: param.name,
+                filters: param.filters,
+              })),
+              ADVANCED_FILTERS: parsedSearchSection.advanced_filters,
+            } as SearchConfig)
+
+      const parsedMetadataQualitySection = parseConfigSection(
+        parsed,
+        'metadata-quality',
+        [],
+        [
+          'enabled',
+          'sortable',
+          'display_widget_in_detail',
+          'display_widget_in_search',
+          'display_title',
+          'display_description',
+          'display_topic',
+          'display_keywords',
+          'display_legal_constraints',
+          'display_contact',
+          'display_update_frequency',
+          'display_organisation',
+        ],
+        warnings,
+        errors
+      )
+      metadataQualityConfig =
+        parsedMetadataQualitySection === null
+          ? null
+          : ({
+              ENABLED: parsedMetadataQualitySection.enabled,
+              SORTABLE: parsedMetadataQualitySection.sortable,
+              DISPLAY_WIDGET_IN_DETAIL:
+                parsedMetadataQualitySection.display_widget_in_detail,
+              DISPLAY_WIDGET_IN_SEARCH:
+                parsedMetadataQualitySection.display_widget_in_search,
+              DISPLAY_TITLE: parsedMetadataQualitySection.display_title,
+              DISPLAY_DESCRIPTION:
+                parsedMetadataQualitySection.display_description,
+              DISPLAY_TOPIC: parsedMetadataQualitySection.display_topic,
+              DISPLAY_KEYWORDS: parsedMetadataQualitySection.display_keywords,
+              DISPLAY_LEGAL_CONSTRAINTS:
+                parsedMetadataQualitySection.display_legal_constraints,
+              DISPLAY_CONTACT: parsedMetadataQualitySection.display_contact,
+              DISPLAY_UPDATE_FREQUENCY:
+                parsedMetadataQualitySection.display_update_frequency,
+              DISPLAY_ORGANISATION:
+                parsedMetadataQualitySection.display_organisation,
+            } as MetadataQualityConfig)
+
+      customTranslations = parseTranslationsConfigSection(
+        parsed,
+        'translations'
+      ) as CustomTranslationsAllLanguages
+
+      if (errors.length) {
+        throw new Error(`One or more mandatory settings were missing from the configuration file.
+${errors.join('\n')}`)
+      } else if (warnings.length) {
+        console.warn(`One or more unexpected settings were encountered in the configuration file.
+${warnings.join('\n')}`)
+      }
+
+      appConfigLoaded = true
+    })
+}
+
+export function isConfigLoaded() {
+  return appConfigLoaded
+}
+
+export function _reset() {
+  globalConfig = null
+  themeConfig = null
+  customTranslations = null
+}
+
+export const TRANSLATE_WITH_OVERRIDES_CONFIG = {
+  compiler: {
+    provide: TranslateCompiler,
+    useClass: TranslateMessageFormatCompiler,
+  },
+  loader: {
+    provide: TranslateLoader,
+    useFactory: function HttpLoaderFactory(http: HttpClient) {
+      return new FileWithOverridesTranslateLoader(http, './assets/i18n/')
+    },
+    defaultLanguage: DEFAULT_LANG,
+    deps: [HttpClient],
+  },
+}