geonetwork-ui 2.3.0-dev.ff2a9db7 → 2.4.0-dev.573bccd7

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

@@ -42,16 +42,16 @@
 </div>
 
 <div class="p-4 max-w-[600px] m-auto text-[13px]">
-  <gn-ui-search-results-error
+  <gn-ui-error
     *ngIf="(errorCode$ | async) === 0"
     [type]="errorTypes.COULD_NOT_REACH_API"
   >
-  </gn-ui-search-results-error>
-  <gn-ui-search-results-error
+  </gn-ui-error>
+  <gn-ui-error
     *ngIf="(error$ | async) !== null && (errorCode$ | async) !== 0"
     [type]="errorTypes.RECEIVED_ERROR"
     [error]="errorMessage$ | async"
-  ></gn-ui-search-results-error>
+  ></gn-ui-error>
 </div>
 
 <ng-template #favoriteToggle let-record>

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

@@ -34,7 +34,18 @@
       <span translate>record.metadata.title</span>
     </ng-template>
     <ng-template #cell let-item>
-      {{ item.title }}
+      <div class="flex flex-row items-center gap-2 max-w-full">
+        <span class="overflow-hidden text-ellipsis">{{ item.title }}</span>
+        <gn-ui-badge
+          *ngIf="hasDraft(item)"
+          [style.--gn-ui-badge-padding]="'0.4em 0.6em'"
+          [style.--gn-ui-badge-text-color]="'#3d2006'"
+          [style.--gn-ui-badge-background-color]="'#ffbc7b'"
+          [style.--gn-ui-badge-rounded]="'4px'"
+        >
+          <span translate>dashboard.records.hasDraft</span>
+        </gn-ui-badge>
+      </div>
     </ng-template>
   </gn-ui-interactive-table-column>
 

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

@@ -20,6 +20,8 @@ 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'
+import { BadgeComponent } from '../../../../../../libs/ui/widgets/src'
+import { RecordsRepositoryInterface } from '../../../../../../libs/common/domain/src/lib/repository/records-repository.interface'
 
 @Component({
   selector: 'gn-ui-results-table',
@@ -33,6 +35,7 @@ import { SearchService } from '../utils/service/search.service'
     InteractiveTableColumnComponent,
     MatIconModule,
     TranslateModule,
+    BadgeComponent,
   ],
 })
 export class ResultsTableComponent {
@@ -44,7 +47,8 @@ export class ResultsTableComponent {
   constructor(
     private searchFacade: SearchFacade,
     private searchService: SearchService,
-    private selectionService: SelectionService
+    private selectionService: SelectionService,
+    private recordsRepository: RecordsRepositoryInterface
   ) {}
 
   dateToString(date: Date): string {
@@ -161,4 +165,8 @@ export class ResultsTableComponent {
       })
     )
   }
+
+  hasDraft(record: CatalogRecord): boolean {
+    return this.recordsRepository.recordHasDraft(record.uniqueIdentifier)
+  }
 }

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

@@ -3,6 +3,7 @@ export * from './lib/avatar/avatar.component'
 export * from './lib/content-ghost/content-ghost.component'
 export * from './lib/download-item/download-item.component'
 export * from './lib/downloads-list/downloads-list.component'
+export * from './lib/error/error.component'
 export * from './lib/image-overlay-preview/image-overlay-preview.component'
 export * from './lib/link-card/link-card.component'
 export * from './lib/markdown-editor/markdown-editor.component'
@@ -13,12 +14,12 @@ export * from './lib/metadata-contact/metadata-contact.component'
 export * from './lib/metadata-info/metadata-info.component'
 export * from './lib/metadata-quality-item/metadata-quality-item.component'
 export * from './lib/metadata-quality/metadata-quality.component'
+export * from './lib/notification/notification.component'
 export * from './lib/pagination-buttons/pagination-buttons.component'
 export * from './lib/pagination/pagination.component'
 export * from './lib/record-api-form/record-api-form.component'
 export * from './lib/related-record-card/related-record-card.component'
-export * from './lib/search-results-error/search-results-error.component'
+export * from './lib/sortable-list/sortable-list.component'
 export * from './lib/thumbnail/thumbnail.component'
 export * from './lib/ui-elements.module'
 export * from './lib/user-preview/user-preview.component'
-export * from './lib/notification/notification.component'

package/src/libs/ui/elements/src/lib/{search-results-error/search-results-error.component.html → error/error.component.html}

@@ -1,7 +1,10 @@
 <div
   class="p-[1.7em] bg-red-50 text-red-800 text-[1.5em] text-center rounded-lg"
 >
-  <div *ngIf="type === types.COULD_NOT_REACH_API">
+  <div
+    *ngIf="type === types.COULD_NOT_REACH_API"
+    data-test="could-not-reach-api-error"
+  >
     <div class="relative opacity-40">
       <mat-icon class="material-symbols-outlined face">face</mat-icon>
       <mat-icon class="material-symbols-outlined question-mark1"
@@ -13,14 +16,26 @@
     </div>
     <div translate>search.error.couldNotReachApi</div>
   </div>
-  <div *ngIf="type === types.RECEIVED_ERROR">
+  <div
+    *ngIf="type === types.DATASET_HAS_NO_LINK"
+    data-test="dataset-has-no-link-error"
+  >
+    <div class="relative opacity-40">
+      <mat-icon class="material-symbols-outlined face">computer</mat-icon>
+    </div>
+    <div translate>search.error.recordHasnolink</div>
+  </div>
+  <div *ngIf="type === types.RECEIVED_ERROR" data-test="received-error-error">
     <div class="relative opacity-40">
       <mat-icon class="material-symbols-outlined face">mood_bad</mat-icon>
     </div>
     <div translate>search.error.receivedError</div>
     <div *ngIf="error">{{ error }}</div>
   </div>
-  <div *ngIf="type === types.RECORD_NOT_FOUND">
+  <div
+    *ngIf="type === types.RECORD_NOT_FOUND"
+    data-test="record-not-found-error"
+  >
     <div class="relative opacity-40">
       <mat-icon class="material-symbols-outlined computer">computer</mat-icon>
       <mat-icon class="material-symbols-outlined computer-question-mark"

package/src/libs/ui/elements/src/lib/{search-results-error/search-results-error.component.ts → error/error.component.ts}

@@ -4,15 +4,16 @@ export enum ErrorType {
   COULD_NOT_REACH_API,
   RECEIVED_ERROR,
   RECORD_NOT_FOUND,
+  DATASET_HAS_NO_LINK,
 }
 
 @Component({
-  selector: 'gn-ui-search-results-error',
-  templateUrl: './search-results-error.component.html',
-  styleUrls: ['./search-results-error.component.css'],
+  selector: 'gn-ui-error',
+  templateUrl: './error.component.html',
+  styleUrls: ['./error.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class SearchResultsErrorComponent {
+export class ErrorComponent {
   @Input() type!: ErrorType
   @Input() error?: string
   @Input() recordId?: string

package/src/libs/ui/elements/src/lib/record-api-form/record-api-form.component.ts

@@ -5,7 +5,7 @@ import {
   ServiceProtocol,
 } from '../../../../../../libs/common/domain/src/lib/model/record'
 import { mimeTypeToFormat } from '../../../../../../libs/util/shared/src'
-import { BehaviorSubject, combineLatest, map, switchMap } from 'rxjs'
+import { BehaviorSubject, combineLatest, filter, map, switchMap } from 'rxjs'
 
 const DEFAULT_PARAMS = {
   OFFSET: '',
@@ -54,7 +54,8 @@ export class RecordApiFormComponent {
     this.offset$,
     this.limit$,
     this.format$,
-    this.endpoint$,
+    // only compute the url if the endpoint was created
+    this.endpoint$.pipe(filter((endpoint) => !!endpoint)),
   ]).pipe(
     switchMap(([offset, limit, format]) =>
       this.generateApiQueryUrl(offset, limit, format)
@@ -121,11 +122,9 @@ export class RecordApiFormComponent {
       this.supportOffset = this.endpoint.supportsStartIndex()
       return this.endpoint.getServiceInfo() as OutputFormats
     } else {
-      {
-        return (await this.endpoint.getCollectionInfo(
-          this.firstCollection
-        )) as OutputFormats
-      }
+      return (await this.endpoint.getCollectionInfo(
+        this.firstCollection
+      )) as OutputFormats
     }
   }
 
@@ -136,7 +135,7 @@ export class RecordApiFormComponent {
       await (this.endpoint as WfsEndpoint).isReady()
     } else {
       this.endpoint = new OgcApiEndpoint(this.apiBaseUrl)
-      this.firstCollection = (await this.endpoint.featureCollections)[0]
+      this.firstCollection = (await this.endpoint.allCollections)[0].name
     }
     this.endpoint$.next(this.endpoint)
   }

package/src/libs/ui/elements/src/lib/sortable-list/sortable-list.component.css

@@ -0,0 +1,18 @@
+.cdk-drag-preview {
+  box-sizing: border-box;
+  border-radius: 4px;
+  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
+    0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
+}
+
+.cdk-drag-placeholder {
+  opacity: 0;
+}
+
+.cdk-drag-animating {
+  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+}
+
+.sortable-list.cdk-drop-list-dragging .sortable-box:not(.cdk-drag-placeholder) {
+  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+}

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

@@ -0,0 +1,36 @@
+<div class="flex gap-2 mb-2">
+  <gn-ui-button
+    *ngFor="let addOption of addOptions"
+    (buttonClick)="add.emit(addOption.eventName)"
+  >
+    <span class="material-symbols-outlined gn-ui-icon-small"> add </span>
+    &nbsp;{{ addOption.buttonLabel }}</gn-ui-button
+  >
+</div>
+<div
+  cdkDropList
+  class="sortable-list flex flex-col gap-3 p-2"
+  (cdkDropListDropped)="drop($event)"
+>
+  <ng-container *ngFor="let element of elements; index as index">
+    <div class="sortable-box bg-white flex items-center" cdkDrag>
+      <span
+        cdkDragHandle
+        class="material-symbols-outlined mx-[10px] cursor-grab gn-ui-icon-medium flex-none"
+      >
+        drag_handle
+      </span>
+      <div class="flex-1">
+        <ng-container
+          *ngComponentOutlet="element.component; inputs: element.inputs"
+        ></ng-container>
+      </div>
+      <span
+        (click)="removeElement(index)"
+        class="material-symbols-outlined mx-[10px] cursor-pointer gn-ui-icon-medium flex-none"
+      >
+        close
+      </span>
+    </div>
+  </ng-container>
+</div>

package/src/libs/ui/elements/src/lib/sortable-list/sortable-list.component.ts

@@ -0,0 +1,56 @@
+import {
+  CdkDrag,
+  CdkDragDrop,
+  CdkDragHandle,
+  CdkDropList,
+  moveItemInArray,
+} from '@angular/cdk/drag-drop'
+import { NgComponentOutlet, NgFor } from '@angular/common'
+import {
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  Input,
+  Output,
+  Type,
+} from '@angular/core'
+import { MatIconModule } from '@angular/material/icon'
+import { ButtonComponent } from '../../../../../../libs/ui/inputs/src'
+
+type DynamicElement = {
+  component: Type<any>
+  inputs: Record<string, any>
+}
+
+@Component({
+  selector: 'gn-ui-sortable-list',
+  templateUrl: 'sortable-list.component.html',
+  styleUrls: ['sortable-list.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [
+    NgFor,
+    NgComponentOutlet,
+    CdkDropList,
+    CdkDrag,
+    CdkDragHandle,
+    MatIconModule,
+    ButtonComponent,
+  ],
+})
+export class SortableListComponent {
+  @Input() elements: Array<DynamicElement>
+  @Input() addOptions: Array<{ buttonLabel: string; eventName: string }>
+  @Output() elementsChange = new EventEmitter<Array<DynamicElement>>()
+  @Output() add = new EventEmitter<string>()
+
+  drop(event: CdkDragDrop<string[]>) {
+    moveItemInArray(this.elements, event.previousIndex, event.currentIndex)
+    this.elementsChange.emit(this.elements)
+  }
+
+  removeElement(index: number) {
+    this.elements = this.elements.filter((_, i) => i !== index)
+    this.elementsChange.emit(this.elements)
+  }
+}

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

@@ -9,16 +9,15 @@ import { ContentGhostComponent } from './content-ghost/content-ghost.component'
 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 { BadgeComponent, UiWidgetsModule } from '../../../../../libs/ui/widgets/src'
 import { UiLayoutModule } from '../../../../../libs/ui/layout/src'
 import { TranslateModule } from '@ngx-translate/core'
-import { LinkCardComponent } from './link-card/link-card.component'
 import { RelatedRecordCardComponent } from './related-record-card/related-record-card.component'
 import { MetadataContactComponent } from './metadata-contact/metadata-contact.component'
 import { MetadataCatalogComponent } from './metadata-catalog/metadata-catalog.component'
 import { MetadataQualityComponent } from './metadata-quality/metadata-quality.component'
 import { MetadataQualityItemComponent } from './metadata-quality-item/metadata-quality-item.component'
-import { SearchResultsErrorComponent } from './search-results-error/search-results-error.component'
+import { ErrorComponent } from './error/error.component'
 import { PaginationComponent } from './pagination/pagination.component'
 import { ThumbnailComponent } from './thumbnail/thumbnail.component'
 import { UiInputsModule } from '../../../../../libs/ui/inputs/src'
@@ -50,6 +49,7 @@ import { TimeSincePipe } from './user-feedback-item/time-since.pipe'
     MarkdownParserComponent,
     ThumbnailComponent,
     TimeSincePipe,
+    BadgeComponent,
   ],
   declarations: [
     MetadataInfoComponent,
@@ -62,7 +62,7 @@ import { TimeSincePipe } from './user-feedback-item/time-since.pipe'
     MetadataCatalogComponent,
     MetadataQualityComponent,
     MetadataQualityItemComponent,
-    SearchResultsErrorComponent,
+    ErrorComponent,
     PaginationComponent,
     AvatarComponent,
     UserPreviewComponent,
@@ -84,7 +84,7 @@ import { TimeSincePipe } from './user-feedback-item/time-since.pipe'
     MetadataCatalogComponent,
     MetadataQualityComponent,
     MetadataQualityItemComponent,
-    SearchResultsErrorComponent,
+    ErrorComponent,
     PaginationComponent,
     ThumbnailComponent,
     AvatarComponent,

package/src/libs/ui/inputs/src/lib/date-picker/date-picker.component.html

@@ -1,7 +1,8 @@
 <div
-  class="flex items-center justify-between pl-3 rounded-lg border border-gray-300 bg-white"
+  class="flex items-center justify-between rounded-lg border border-gray-300 bg-white"
 >
   <input
+    class="pl-3"
     [matDatepicker]="picker"
     [value]="date"
     (dateChange)="dateChange.emit($event.value)"

package/src/libs/ui/inputs/src/lib/date-picker/date-picker.component.ts

@@ -1,4 +1,10 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core'
+import {
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  Input,
+  Output,
+} from '@angular/core'
 import { MatNativeDateModule } from '@angular/material/core'
 import { MatDatepickerModule } from '@angular/material/datepicker'
 import { MatIconModule } from '@angular/material/icon'
@@ -7,6 +13,7 @@ import { MatIconModule } from '@angular/material/icon'
   selector: 'gn-ui-date-picker',
   templateUrl: './date-picker.component.html',
   styleUrls: ['./date-picker.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [MatIconModule, MatNativeDateModule, MatDatepickerModule],
 })

package/src/libs/ui/inputs/src/lib/date-range-picker/date-range-picker.component.html

@@ -1,24 +1,24 @@
 <div
-  class="flex items-center justify-center w-64 h-11 rounded-lg border border-gray-300 bg-white"
+  class="flex items-center justify-between rounded-lg border border-gray-300 bg-white"
 >
-  <div class="w-48 flex justify-between">
+  <div class="pl-3 flex justify-center">
     <mat-date-range-input [rangePicker]="picker" class="w-full">
       <input
-        class="w-24 text-black font-basierCircle text-base font-medium text-center"
         matStartDate
         placeholder="Start date"
-        (dateInput)="startDateSelected($event)"
+        [value]="startDate"
+        (dateInput)="startDateChange.emit($event.value)"
       />
       <input
-        class="w-24 text-black font-basierCircle text-base font-medium text-center"
         matEndDate
         placeholder="End date"
-        (dateInput)="endDateSelected($event)"
+        [value]="endDate"
+        (dateInput)="endDateChange.emit($event.value)"
       />
     </mat-date-range-input>
   </div>
   <mat-datepicker-toggle matSuffix [for]="picker">
     <mat-icon>calendar_today</mat-icon>
   </mat-datepicker-toggle>
-  <mat-date-range-picker #picker></mat-date-range-picker>
 </div>
+<mat-date-range-picker #picker></mat-date-range-picker>

package/src/libs/ui/inputs/src/lib/date-range-picker/date-range-picker.component.ts

@@ -1,27 +1,25 @@
-import { Component } from '@angular/core'
-import { MatNativeDateModule } from '@angular/material/core'
 import {
-  MatDatepickerInputEvent,
-  MatDatepickerModule,
-} from '@angular/material/datepicker'
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  Input,
+  Output,
+} from '@angular/core'
+import { MatNativeDateModule } from '@angular/material/core'
+import { MatDatepickerModule } from '@angular/material/datepicker'
 import { MatIconModule } from '@angular/material/icon'
 
 @Component({
   selector: 'gn-ui-date-range-picker',
   templateUrl: './date-range-picker.component.html',
   styleUrls: ['./date-range-picker.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [MatIconModule, MatNativeDateModule, MatDatepickerModule],
 })
 export class DateRangePickerComponent {
-  startDate: Date
-  endDate: Date
-
-  startDateSelected(event: MatDatepickerInputEvent<Date>) {
-    this.startDate = event.value
-  }
-
-  endDateSelected(event: MatDatepickerInputEvent<Date>) {
-    this.endDate = event.value
-  }
+  @Input() startDate: Date
+  @Input() endDate: Date
+  @Output() startDateChange = new EventEmitter<Date>()
+  @Output() endDateChange = new EventEmitter<Date>()
 }

package/src/libs/ui/widgets/src/lib/badge/badge.component.html

@@ -1,5 +1,5 @@
 <div
-  class="inline-block bg-black opacity-70 py-1.5 px-3 rounded font-medium text-gray-50 text-sm leading-none"
+  class="gn-ui-badge"
   [ngClass]="
     clickable
       ? 'hover:bg-primary cursor-pointer transition-colors duration-100'

package/src/libs/ui/widgets/src/lib/badge/badge.component.ts

@@ -1,11 +1,14 @@
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
+import { CommonModule } from '@angular/common'
 
 @Component({
   selector: 'gn-ui-badge',
   templateUrl: './badge.component.html',
   styleUrls: ['./badge.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [CommonModule],
 })
 export class BadgeComponent {
-  @Input() clickable? = false
+  @Input() clickable = false
 }

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

@@ -10,7 +10,6 @@ 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'
@@ -22,7 +21,6 @@ import { CommonModule } from '@angular/common'
     StepBarComponent,
     LoadingMaskComponent,
     PopupAlertComponent,
-    BadgeComponent,
     SpinningLoaderComponent,
   ],
   imports: [
@@ -41,7 +39,6 @@ import { CommonModule } from '@angular/common'
     StepBarComponent,
     LoadingMaskComponent,
     PopupAlertComponent,
-    BadgeComponent,
     SpinningLoaderComponent,
   ],
 })

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

@@ -144,6 +144,7 @@ export function loadAppConfig() {
         [],
         [
           'max_zoom',
+          'do_not_tile_wms',
           'max_extent',
           'baselayer',
           'do_not_use_default_basemap',
@@ -158,6 +159,7 @@ export function loadAppConfig() {
           ? null
           : ({
               MAX_ZOOM: parsedMapSection.max_zoom,
+              DO_NOT_TILE_WMS: parsedMapSection.do_not_tile_wms,
               MAX_EXTENT: parsedMapSection.max_extent,
               EXTERNAL_VIEWER_URL_TEMPLATE:
                 parsedMapSection.external_viewer_url_template,

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

@@ -81,6 +81,7 @@ export const MAP_CONFIG_FIXTURE: MapConfig = {
   MAX_ZOOM: 10,
   MAX_EXTENT: [-418263.418776, 5251529.591305, 961272.067714, 6706890.609855],
   DO_NOT_USE_DEFAULT_BASEMAP: false,
+  DO_NOT_TILE_WMS: false,
   EXTERNAL_VIEWER_URL_TEMPLATE:
     'https://example.com/myviewer/#/?actions=[{"type":"CATALOG:ADD_LAYERS_FROM_CATALOGS","layers":["${layer_name}"],"sources":[{"url":"${service_url}","type":"${service_type}"}]}]',
   EXTERNAL_VIEWER_OPEN_NEW_TAB: true,

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

@@ -20,6 +20,7 @@ export interface LayerConfig {
 
 export interface MapConfig {
   MAX_ZOOM?: number
+  DO_NOT_TILE_WMS: boolean
   MAX_EXTENT?: [number, number, number, number] // Expressed as [minx, miny, maxx, maxy]
   EXTERNAL_VIEWER_URL_TEMPLATE?: string
   EXTERNAL_VIEWER_OPEN_NEW_TAB?: boolean

package/tailwind.base.css

@@ -15,6 +15,11 @@
     width: 16px;
     height: 16px;
   }
+  .gn-ui-icon-medium {
+    font-size: 20px;
+    width: 20px;
+    height: 20px;
+  }
 
   /* LINK CLASSES */
   .gn-ui-link {
@@ -104,7 +109,27 @@
       border border-white focus:ring-4 focus:ring-gray-300;
   }
 
-  /* TODO: add prefix */
+  /* BADGE CLASS */
+  .gn-ui-badge {
+    --rounded: var(--gn-ui-badge-rounded, 0.25em);
+    --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]
+      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 */
+  .gn-ui-badge mat-icon.mat-icon {
+    margin-top: -0.325em;
+    margin-bottom: -0.325em;
+    flex-shrink: 0;
+    vertical-align: middle;
+    font-size: 1.4em;
+    width: 1em;
+    height: 1em;
+  }
+
+  /* TODO: replace by gn-ui-badge class above */
   .badge-btn {
     @apply flex items-center justify-center px-4 py-1 text-white rounded backdrop-blur;
   }

package/translations/de.json

@@ -20,6 +20,7 @@
   "dashboard.createRecord": "Neuer Eintrag",
   "dashboard.labels.mySpace": "Mein Bereich",
   "dashboard.records.all": "Katalog",
+  "dashboard.records.hasDraft": "",
   "dashboard.records.myDraft": "Meine Entwürfe",
   "dashboard.records.myLibrary": "Meine Bibliothek",
   "dashboard.records.myOrg": "Meine Organisation",
@@ -156,6 +157,11 @@
   "editor.record.form.license.pddl": "",
   "editor.record.form.license.unknown": "Unbekannt oder nicht vorhanden",
   "editor.record.form.resourceUpdated": "",
+  "editor.record.form.temporalExtents": "",
+  "editor.record.form.temporalExtents.addDate": "",
+  "editor.record.form.temporalExtents.addRange": "",
+  "editor.record.form.temporalExtents.date": "",
+  "editor.record.form.temporalExtents.range": "",
   "editor.record.form.updateFrequency": "",
   "editor.record.form.updateFrequency.planned": "",
   "editor.record.loadError.body": "",
@@ -167,6 +173,9 @@
   "editor.record.publishError.title": "",
   "editor.record.publishSuccess.body": "",
   "editor.record.publishSuccess.title": "",
+  "editor.record.saveStatus.asDraftOnly": "",
+  "editor.record.saveStatus.draftWithChangesPending": "",
+  "editor.record.saveStatus.recordUpToDate": "",
   "editor.record.upToDate": "",
   "externalviewer.dataset.unnamed": "Datensatz aus dem Datahub",
   "facets.block.title.OrgForResource": "Organisation",
@@ -334,6 +343,7 @@
   "search.autocomplete.error": "Vorschläge konnten nicht abgerufen werden:",
   "search.error.couldNotReachApi": "Die API konnte nicht erreicht werden",
   "search.error.receivedError": "Ein Fehler ist aufgetreten",
+  "search.error.recordHasnolink": "",
   "search.error.recordNotFound": "Der Datensatz mit der Kennung \"{ id }\" konnte nicht gefunden werden.",
   "search.field.any.placeholder": "Suche Datensätze ...",
   "search.field.sortBy": "Sortieren nach:",