geonetwork-ui 2.2.0-dev.c15a456d → 2.2.0-dev.cbcafed5

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

@@ -0,0 +1,112 @@
+<gn-ui-interactive-table
+  [items]="records$ | async"
+  (itemClick)="handleRecordClick($event)"
+>
+  <!-- SELECTED COLUMN -->
+  <gn-ui-interactive-table-column>
+    <ng-template #header>
+      <gn-ui-checkbox
+        [checked]="isAllSelected() | async"
+        [indeterminate]="isSomeSelected() | async"
+        (changed)="toggleSelectAll()"
+        type="default"
+        class="-m-2 mr-3"
+      >
+      </gn-ui-checkbox>
+    </ng-template>
+    <ng-template #cell let-item>
+      <gn-ui-checkbox
+        [checked]="isChecked(item) | async"
+        (changed)="handleRecordSelectedChange($event, item)"
+        class="-m-2"
+        type="default"
+      ></gn-ui-checkbox>
+    </ng-template>
+  </gn-ui-interactive-table-column>
+
+  <!-- TITLE COLUMN -->
+  <gn-ui-interactive-table-column
+    [sortable]="true"
+    [activeSort]="isSortedBy('resourceTitleObject.default.keyword') | async"
+    (sortChange)="setSortBy('resourceTitleObject.default.keyword', $event)"
+  >
+    <ng-template #header>
+      <span translate>record.metadata.title</span>
+    </ng-template>
+    <ng-template #cell let-item>
+      {{ item.title }}
+    </ng-template>
+  </gn-ui-interactive-table-column>
+
+  <!-- FORMATS COLUMN -->
+  <gn-ui-interactive-table-column>
+    <ng-template #header>
+      <span translate>record.metadata.formats</span>
+    </ng-template>
+    <ng-template #cell let-item>
+      <div
+        class="flex justify-start items-center gap-2"
+        *ngIf="getRecordFormats(item) as formats"
+        [title]="formats.join(', ')"
+      >
+        <span
+          class="badge-btn min-w-[45px] text-sm text-white px-2 flex-shrink-0"
+          [style.background-color]="getBadgeColor(formats[0])"
+          *ngIf="formats[0]"
+        >
+          {{ formats[0] }}
+        </span>
+        <span
+          class="badge-btn min-w-[45px] text-sm text-white px-2 flex-shrink-0"
+          [style.background-color]="getBadgeColor(formats[1])"
+          *ngIf="formats[1]"
+        >
+          {{ formats[1] }}
+        </span>
+        <div class="flex-shrink-0" *ngIf="formats.slice(2).length > 0">
+          <span>+{{ formats.slice(2).length }}</span>
+        </div>
+      </div>
+      <div *ngIf="!getRecordFormats(item)"></div>
+    </ng-template>
+  </gn-ui-interactive-table-column>
+
+  <!-- OWNER COLUMN -->
+  <gn-ui-interactive-table-column
+    [sortable]="true"
+    [activeSort]="isSortedBy('recordOwner') | async"
+    (sortChange)="setSortBy('recordOwner', $event)"
+  >
+    <ng-template #header>
+      <span translate>record.metadata.author</span>
+    </ng-template>
+    <ng-template #cell let-item>
+      <mat-icon class="material-symbols-outlined">person</mat-icon>
+      <span>{{ formatUserInfo(item.extras?.ownerInfo) }}</span>
+    </ng-template>
+  </gn-ui-interactive-table-column>
+
+  <!-- STATUS COLUMN -->
+  <gn-ui-interactive-table-column>
+    <ng-template #header>
+      <span translate>record.metadata.status</span>
+    </ng-template>
+    <ng-template #cell let-item>
+      {{ item.status }}
+    </ng-template>
+  </gn-ui-interactive-table-column>
+
+  <!-- UPDATE DATE COLUMN -->
+  <gn-ui-interactive-table-column
+    [sortable]="true"
+    [activeSort]="isSortedBy('changeDate') | async"
+    (sortChange)="setSortBy('changeDate', $event)"
+  >
+    <ng-template #header>
+      <span translate>record.metadata.updatedOn</span>
+    </ng-template>
+    <ng-template #cell let-item>
+      {{ dateToString(item.recordUpdated) }}
+    </ng-template>
+  </gn-ui-interactive-table-column>
+</gn-ui-interactive-table>

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

@@ -0,0 +1,164 @@
+import { Component, EventEmitter, Output } from '@angular/core'
+import { CatalogRecord } from '../../../../../../libs/common/domain/src/lib/model/record'
+import {
+  FileFormat,
+  getBadgeColor,
+  getFileFormat,
+  getFormatPriority,
+} from '../../../../../../libs/util/shared/src'
+import { 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 { SearchFacade } from '../state/search.facade'
+import { SelectionService } from '../../../../../../libs/api/repository/src'
+import { combineLatest, firstValueFrom, Observable } from 'rxjs'
+import { CommonModule } from '@angular/common'
+import { map, take } from 'rxjs/operators'
+import { FieldSort } from '../../../../../../libs/common/domain/src/lib/model/search'
+import { SearchService } from '../utils/service/search.service'
+
+@Component({
+  selector: 'gn-ui-results-table',
+  templateUrl: './results-table.component.html',
+  styleUrls: ['./results-table.component.css'],
+  standalone: true,
+  imports: [
+    CommonModule,
+    UiInputsModule,
+    InteractiveTableComponent,
+    InteractiveTableColumnComponent,
+    MatIconModule,
+    TranslateModule,
+  ],
+})
+export class ResultsTableComponent {
+  @Output() recordClick = new EventEmitter<CatalogRecord>()
+
+  records$ = this.searchFacade.results$
+  selectedRecords$ = this.selectionService.selectedRecordsIdentifiers$
+
+  constructor(
+    private searchFacade: SearchFacade,
+    private searchService: SearchService,
+    private selectionService: SelectionService
+  ) {}
+
+  dateToString(date: Date): string {
+    return date?.toLocaleDateString(undefined, {
+      year: 'numeric',
+      month: 'long',
+      day: 'numeric',
+      timeZone: 'UTC',
+    })
+  }
+
+  getStatus(isPublishedToAll: boolean | unknown) {
+    return isPublishedToAll ? 'published' : 'not published'
+  }
+
+  getRecordFormats(record: CatalogRecord): FileFormat[] {
+    if (record.kind === 'service' || !('distributions' in record)) {
+      return []
+    }
+    const formats = Array.from(
+      new Set(
+        record.distributions.map((distribution) => getFileFormat(distribution))
+      )
+    ).filter((format) => !!format)
+    formats.sort((a, b) => getFormatPriority(b) - getFormatPriority(a))
+    return formats
+  }
+
+  formatUserInfo(userInfo: string | unknown): string {
+    const infos = (typeof userInfo === 'string' ? userInfo : '').split('|')
+    if (infos && infos.length === 4) {
+      return `${infos[2]} ${infos[1]}`
+    }
+    return undefined
+  }
+
+  getBadgeColor(format: FileFormat): string {
+    return getBadgeColor(format)
+  }
+
+  handleRecordClick(item: unknown) {
+    this.recordClick.emit(item as CatalogRecord)
+  }
+
+  setSortBy(col: string, order: 'asc' | 'desc') {
+    this.searchService.setSortBy([order, col])
+  }
+
+  isSortedBy(col: string): Observable<'asc' | 'desc' | null> {
+    return this.searchFacade.sortBy$.pipe(
+      take(1),
+      map((sortOrder) => {
+        const sortArray = Array.isArray(sortOrder[0])
+          ? (sortOrder as FieldSort[])
+          : ([sortOrder] as FieldSort[])
+        for (const sort of sortArray) {
+          if (sort[1] === col) {
+            return sort[0]
+          }
+        }
+        return null
+      })
+    )
+  }
+
+  isChecked(record: CatalogRecord): Observable<boolean> {
+    return this.selectedRecords$.pipe(
+      take(1),
+      map((selectedRecords) => {
+        return selectedRecords.includes(record.uniqueIdentifier)
+      })
+    )
+  }
+
+  handleRecordSelectedChange(selected: boolean, record: CatalogRecord) {
+    if (!selected) {
+      this.selectionService.deselectRecords([record])
+    } else {
+      this.selectionService.selectRecords([record])
+    }
+  }
+
+  async toggleSelectAll() {
+    const records = await firstValueFrom(this.records$)
+    if (await firstValueFrom(this.isAllSelected())) {
+      this.selectionService.deselectRecords(records)
+    } else {
+      this.selectionService.selectRecords(records)
+    }
+  }
+
+  isAllSelected(): Observable<boolean> {
+    return combineLatest([this.records$, this.selectedRecords$]).pipe(
+      take(1),
+      map(([records, selectedRecords]) => {
+        return records.every((record) =>
+          selectedRecords.includes(record.uniqueIdentifier)
+        )
+      })
+    )
+  }
+
+  isSomeSelected(): Observable<boolean> {
+    return combineLatest([this.records$, this.selectedRecords$]).pipe(
+      take(1),
+      map(([records, selectedRecords]) => {
+        const allSelected = records.every((record) =>
+          selectedRecords.includes(record.uniqueIdentifier)
+        )
+        const someSelected = records.some((record) =>
+          selectedRecords.includes(record.uniqueIdentifier)
+        )
+        return !allSelected && someSelected
+      })
+    )
+  }
+}

package/src/libs/feature/search/src/lib/state/effects.ts

@@ -41,7 +41,7 @@ import { getSearchStateSearch } from './selectors'
 import { HttpErrorResponse } from '@angular/common/http'
 import { switchMapWithSearchId } from '../utils/operators/search.operator'
 import { Geometry } from 'geojson'
-import { FILTER_GEOMETRY } from '../feature-search.module'
+import { FILTER_GEOMETRY } from '../filter-geometry.token'
 import { RecordsRepositoryInterface } from '../../../../../../libs/common/domain/src/lib/repository/records-repository.interface'
 import { FavoritesService } from '../../../../../../libs/api/repository/src'
 import { PlatformServiceInterface } from '../../../../../../libs/common/domain/src/lib/platform.service.interface'
@@ -126,10 +126,11 @@ export class SearchEffects {
           ),
           switchMap(([state, favorites]) => {
             if (!state.params.useSpatialFilter || !this.filterGeometry$) {
-              return of([state, favorites, null])
+              return of([state, favorites, undefined])
             }
             return this.filterGeometry$.pipe(
               tap((geom) => {
+                if (!geom) return
                 try {
                   const trace = validGeoJson(geom, true) as string[]
                   if (trace?.length > 0) {
@@ -145,7 +146,7 @@ export class SearchEffects {
               }),
               map((geom) => [state, favorites, geom]),
               catchError((e) => {
-                return of([state, favorites, null])
+                return of([state, favorites, undefined])
               })
             )
           }),
@@ -153,7 +154,7 @@ export class SearchEffects {
             ([state, favorites, geometry]: [
               SearchStateSearch,
               string[],
-              Geometry | null
+              Geometry | undefined
             ]) => {
               const { currentPage, pageSize, sort } = state.params
               const filters = {

package/src/libs/feature/search/src/lib/state/search.facade.ts

@@ -40,7 +40,7 @@ import {
   isEndOfResults,
   totalPages,
 } from './selectors'
-import { FILTER_GEOMETRY } from '../feature-search.module'
+import { FILTER_GEOMETRY } from '../filter-geometry.token'
 import { Geometry } from 'geojson'
 import { catchError, map, shareReplay } from 'rxjs/operators'
 import {
@@ -215,5 +215,6 @@ export class SearchFacade {
     this.store.dispatch(new SetFilters({}, this.searchId))
     this.store.dispatch(new SetSortBy([], this.searchId))
     this.store.dispatch(new SetFavoritesOnly(false, this.searchId))
+    return this
   }
 }

package/src/libs/ui/catalog/src/lib/language-switcher/language-switcher.component.html

@@ -5,5 +5,6 @@
   [selected]="currentLang"
   ariaName="languages"
   [showTitle]="false"
+  [extraBtnClass]="'flex justify-items-center text-white !pl-2 !py-1'"
 >
 </gn-ui-dropdown-selector>

package/src/libs/ui/catalog/src/lib/language-switcher/language-switcher.component.ts

@@ -34,7 +34,7 @@ export class LanguageSwitcherComponent implements OnInit {
   ngOnInit(): void {
     const languages = this.languagePlaceholder || DEFAULT_LANGUAGES
     this.languageList = languages.map((language) => ({
-      label: `language.${language}`,
+      label: `${language}`.toUpperCase(),
       value: language,
     }))
   }

package/src/libs/ui/elements/src/index.ts

@@ -18,4 +18,7 @@ export * from './lib/pagination/pagination.component'
 export * from './lib/related-record-card/related-record-card.component'
 export * from './lib/search-results-error/search-results-error.component'
 export * from './lib/user-preview/user-preview.component'
+export * from './lib/max-lines/max-lines.component'
 export * from './lib/record-api-form/record-api-form.component'
+export * from './lib/markdown-parser/markdown-parser.component'
+export * from './lib/image-overlay-preview/image-overlay-preview.component'

package/src/libs/ui/elements/src/lib/downloads-list/downloads-list.component.html

@@ -8,7 +8,10 @@
   >
     record.metadata.download
   </p>
-  <div class="flex flex-wrap justify-start sm:justify-end sm:pb-4">
+  <div
+    class="flex flex-wrap justify-start sm:justify-end sm:pb-4"
+    data-cy="download-format-filters"
+  >
     <gn-ui-button
       class="m-1 format-filter"
       [extraClass]="

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

@@ -0,0 +1,30 @@
+<gn-ui-content-ghost
+  [showContent]="imageUrl !== undefined"
+  ghostClass="h-48 mb-3"
+>
+  <div
+    *ngIf="imageUrl"
+    [showContent]="imageUrl !== undefined"
+    data-cy="record-thumbnail"
+    class="flex-shrink-0 bg-gray-100 rounded-lg overflow-hidden w-full border border-gray-300 group-hover:shadow-xl group-hover:border-0 h-48 mb-3"
+  >
+    <gn-ui-thumbnail
+      class="relative h-full w-full"
+      [thumbnailUrl]="imageUrl"
+      fit="cover"
+      (placeholderShown)="isPlaceholderShown.emit($event)"
+    ></gn-ui-thumbnail>
+    <div class="relative">
+      <gn-ui-button
+        class="absolute bottom-0 right-0 z-10 mr-2 mb-2"
+        [type]="'outline'"
+        [extraClass]="'!py-2 !px-0'"
+        (buttonClick)="openLightbox(imageUrl)"
+      >
+        <mat-icon class="material-symbols-outlined font-extralight"
+          >zoom_out_map</mat-icon
+        >
+      </gn-ui-button>
+    </div>
+  </div>
+</gn-ui-content-ghost>

package/src/libs/ui/elements/src/lib/image-overlay-preview/image-overlay-preview.component.ts

@@ -0,0 +1,15 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core'
+import * as basicLightbox from 'basiclightbox'
+
+@Component({
+  selector: 'gn-ui-image-overlay-preview',
+  templateUrl: './image-overlay-preview.component.html',
+  styleUrls: ['./image-overlay-preview.component.css'],
+})
+export class ImageOverlayPreviewComponent {
+  @Input() imageUrl: string
+  @Output() isPlaceholderShown = new EventEmitter<boolean>()
+  openLightbox(src: string) {
+    basicLightbox.create(`<img src="${src}"/>`).show()
+  }
+}

package/src/libs/ui/elements/src/lib/markdown-parser/markdown-parser.component.css

@@ -0,0 +1,264 @@
+/** Body **/
+:host ::ng-deep .markdown-body {
+  -ms-text-size-adjust: 100%;
+  -webkit-text-size-adjust: 100%;
+  margin: 0px 0px 1.5rem 0px;
+  line-height: 1.5;
+  word-wrap: break-word;
+}
+
+/** Emphasis **/
+
+:host ::ng-deep .markdown-body strong {
+  @apply font-bold;
+  color: var(--color-secondary-darker);
+}
+
+/** Headings **/
+
+:host ::ng-deep .markdown-body h1,
+:host ::ng-deep .markdown-body h2,
+:host ::ng-deep .markdown-body h3,
+:host ::ng-deep .markdown-body h4,
+:host ::ng-deep .markdown-body h5,
+:host ::ng-deep .markdown-body h6 {
+  margin-top: 24px;
+  margin-bottom: 16px;
+  line-height: 1.25;
+  @apply text-title font-title font-bold;
+}
+
+:host ::ng-deep .markdown-body h1 {
+  margin: 0.67em 0;
+  padding-bottom: 0.3em;
+  font-size: 2em;
+  color: var(--color-primary);
+}
+
+:host ::ng-deep .markdown-body h2 {
+  padding-bottom: 0.3em;
+  font-size: 1.5em;
+  color: var(--color-secondary);
+}
+
+:host ::ng-deep .markdown-body h3 {
+  font-size: 1.25em;
+  color: var(--color-secondary);
+}
+
+:host ::ng-deep .markdown-body h4 {
+  font-size: 1em;
+  color: var(--color-secondary);
+}
+
+:host ::ng-deep .markdown-body h5 {
+  font-size: 0.875em;
+  color: var(--color-secondary);
+}
+
+:host ::ng-deep .markdown-body h6 {
+  font-size: 0.85em;
+  color: var(--color-secondary-lighter);
+}
+
+/** Paragraphs **/
+
+:host ::ng-deep .markdown-body p {
+  margin-top: 0;
+  margin-bottom: 10px;
+}
+
+/** Links **/
+
+:host ::ng-deep .markdown-body p > a {
+  margin-top: 0;
+  margin-bottom: 10px;
+  color: var(--color-primary) !important;
+  text-decoration: none !important;
+  @apply font-bold;
+}
+
+:host ::ng-deep .markdown-body p > a:hover {
+  color: var(--color-primary-darker) !important;
+}
+
+/** Blockquotes **/
+
+:host ::ng-deep .markdown-body blockquote {
+  margin: 0;
+  padding: 0 1em;
+  color: var(--color-secondary-lighter);
+  border-left: 0.25em solid var(--color-primary-lighter);
+}
+
+/** Code **/
+
+:host ::ng-deep .markdown-body pre {
+  margin-top: 0;
+  margin-bottom: 0;
+  font-size: 12px;
+  background-color: var(--color-gray-100);
+  word-wrap: normal;
+}
+
+:host ::ng-deep .markdown-body pre {
+  padding: 16px;
+  overflow: auto;
+  font-size: 85%;
+  line-height: 1.45;
+  color: var(--color-secondary);
+  border-radius: 6px;
+}
+
+:host ::ng-deep .markdown-body code {
+  padding: 0.2em 0.4em;
+  margin: 0;
+  font-size: 85%;
+  white-space: break-spaces;
+  border-radius: 6px;
+}
+
+:host ::ng-deep .markdown-body pre code {
+  display: inline;
+  max-width: auto;
+  padding: 0;
+  margin: 0;
+  overflow: visible;
+  line-height: inherit;
+  word-wrap: normal;
+  border: 0;
+}
+
+/** Horizontal rules **/
+
+:host ::ng-deep .markdown-body hr {
+  box-sizing: content-box;
+  overflow: hidden;
+  background: transparent;
+  border-bottom: 1px solid var(--color-secondary);
+  height: 0.15em;
+  padding: 0;
+  margin: 24px 0;
+  background-color: var(--color-secondary);
+  border: 0;
+}
+
+:host ::ng-deep .markdown-body hr::before {
+  display: table;
+  content: '';
+}
+
+:host ::ng-deep .markdown-body hr::after {
+  display: table;
+  clear: both;
+  content: '';
+}
+
+/** Lists **/
+
+:host ::ng-deep .markdown-body ul,
+:host ::ng-deep .markdown-body ol {
+  margin-top: 0;
+  margin-bottom: 0;
+  padding-left: 2em;
+  list-style: revert;
+}
+
+:host ::ng-deep .markdown-body ol ol,
+:host ::ng-deep .markdown-body ul ol {
+  list-style-type: lower-roman;
+}
+
+:host ::ng-deep .markdown-body ul ul ol,
+:host ::ng-deep .markdown-body ul ol ol,
+:host ::ng-deep .markdown-body ol ul ol,
+:host ::ng-deep .markdown-body ol ol ol {
+  list-style-type: lower-alpha;
+}
+
+:host ::ng-deep .markdown-body ol[type='a s'] {
+  list-style-type: lower-alpha;
+}
+
+:host ::ng-deep .markdown-body ol[type='A s'] {
+  list-style-type: upper-alpha;
+}
+
+:host ::ng-deep .markdown-body ol[type='i s'] {
+  list-style-type: lower-roman;
+}
+
+:host ::ng-deep .markdown-body ol[type='I s'] {
+  list-style-type: upper-roman;
+}
+
+:host ::ng-deep .markdown-body ol[type='1'] {
+  list-style: unset;
+  list-style-type: decimal;
+}
+
+:host ::ng-deep .markdown-body div > ol:not([type]) {
+  list-style: unset;
+  list-style-type: decimal;
+}
+
+/** Table **/
+
+:host ::ng-deep .markdown-body table {
+  border-spacing: 0;
+  border-collapse: collapse;
+  display: block;
+  width: max-content;
+  max-width: 100%;
+  overflow: auto;
+  padding-bottom: 15px;
+}
+
+:host ::ng-deep .markdown-body td,
+:host ::ng-deep .markdown-body th {
+  padding: 0;
+}
+
+:host ::ng-deep .markdown-body th {
+  color: var(--color-secondary);
+}
+
+:host ::ng-deep .markdown-body table th,
+:host ::ng-deep .markdown-body table td {
+  padding: 6px 13px;
+  border: 1px solid var(--color-gray-500);
+}
+
+:host ::ng-deep .markdown-body table td > :last-child {
+  margin-bottom: 0;
+}
+
+:host ::ng-deep .markdown-body table tr {
+  background-color: #ffffff;
+  border-top: 1px solid var(--color-secondary-lighter);
+}
+
+:host ::ng-deep .markdown-body table tr:nth-child(2n) {
+  background-color: var(--color-gray-100);
+}
+
+:host ::ng-deep .markdown-body table img {
+  background-color: transparent;
+}
+
+/** Images **/
+
+:host ::ng-deep .markdown-body img {
+  border-style: none;
+  max-width: 100%;
+  box-sizing: content-box;
+  background-color: transparent;
+}
+
+:host ::ng-deep .markdown-body img[align='right'] {
+  padding-left: 20px;
+}
+
+:host ::ng-deep .markdown-body img[align='left'] {
+  padding-right: 20px;
+}

package/src/libs/ui/elements/src/lib/markdown-parser/markdown-parser.component.html

@@ -0,0 +1 @@
+<div class="markdown-body" [innerHTML]="parsedMarkdown"></div>