geonetwork-ui 2.1.0-initial → 2.2.0-dev.05d3ea32

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

@@ -0,0 +1,24 @@
+<div
+  class="flex items-center justify-center w-64 h-11 rounded-lg border border-gray-300 bg-white"
+>
+  <div class="w-48 flex justify-between">
+    <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)"
+      />
+      <input
+        class="w-24 text-black font-basierCircle text-base font-medium text-center"
+        matEndDate
+        placeholder="End date"
+        (dateInput)="endDateSelected($event)"
+      />
+    </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>

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

@@ -0,0 +1,20 @@
+import { Component } from '@angular/core'
+import { MatDatepickerInputEvent } from '@angular/material/datepicker'
+
+@Component({
+  selector: 'gn-ui-date-range-picker',
+  templateUrl: './date-range-picker.component.html',
+  styleUrls: ['./date-range-picker.component.css'],
+})
+export class DateRangePickerComponent {
+  startDate: Date
+  endDate: Date
+
+  startDateSelected(event: MatDatepickerInputEvent<Date>) {
+    this.startDate = event.value
+  }
+
+  endDateSelected(event: MatDatepickerInputEvent<Date>) {
+    this.endDate = event.value
+  }
+}

package/src/libs/ui/inputs/src/lib/dropdown-multiselect/dropdown-multiselect.component.ts

@@ -17,7 +17,10 @@ import {
 } from '@angular/cdk/overlay'
 import { take } from 'rxjs/operators'
 import { Choice } from './dropdown-multiselect.model'
-import { propagateToDocumentOnly } from '../../../../../../libs/util/shared/src'
+import {
+  createFuzzyFilter,
+  propagateToDocumentOnly,
+} from '../../../../../../libs/util/shared/src'
 
 @Component({
   selector: 'gn-ui-dropdown-multiselect',
@@ -74,9 +77,9 @@ export class DropdownMultiselectComponent {
   }
 
   get filteredChoicesByText() {
-    return this.choices.filter((choice) =>
-      choice.label.toLowerCase().includes(this.searchInputValue?.toLowerCase())
-    )
+    if (!this.searchInputValue) return this.choices
+    const filter = createFuzzyFilter(this.searchInputValue)
+    return this.choices.filter((choice) => filter(choice.label))
   }
 
   get focusedIndex(): number | -1 {

package/src/libs/ui/inputs/src/lib/dropdown-selector/dropdown-selector.component.html

@@ -53,7 +53,7 @@
       #choiceInputs
       type="button"
       *ngFor="let choice of choices"
-      [title]="choice.label"
+      [title]="choice.label | translate"
       class="flex px-5 py-1 w-full text-start cursor-pointer transition-colors"
       [ngClass]="
         isSelected(choice)

package/src/libs/ui/inputs/src/lib/navigation-button/navigation-button.component.html

@@ -1,6 +1,11 @@
 <button
-  class="group flex items-center justify-center p-1 bg-primary-opacity-25 text-white rounded"
+  class="group flex items-center justify-center gap-1 backdrop-blur p-1 bg-primary-opacity-30 text-white rounded content-center"
 >
-  <mat-icon class="material-symbols-outlined align-middle">{{ icon }}</mat-icon>
-  <span class="mx-2 hidden group-hover:inline">{{ label }}</span>
+  <mat-icon class="material-symbols-outlined align-middle w-[18px]">{{
+    icon
+  }}</mat-icon>
+  <span
+    class="mx-2 mt-0.5 text-[16px] tracking-widest content-center opacity-75"
+    >{{ label.toUpperCase() }}</span
+  >
 </button>

package/src/libs/ui/inputs/src/lib/search-input/search-input.component.html

@@ -0,0 +1,25 @@
+<div class="h-full relative text-gray-300">
+  <input
+    #input
+    class="peer h-full appearance-none border border-gray-300 rounded w-full p-2 pl-10 text-gray-700 leading-tight hover:border-primary focus:text-primary focus:outline-none focus:border-primary focus:border-2"
+    type="text"
+    [value]="value"
+    [placeholder]="placeholder"
+    (change)="handleChange($event)"
+    (input)="handleChange($event)"
+  />
+  <div
+    class="absolute inset-y-0 left-0 pl-2.5 flex items-center peer-hover:text-primary peer-focus:text-primary"
+  >
+    <mat-icon class="material-symbols-outlined">search</mat-icon>
+  </div>
+  <button
+    *ngIf="rawChange | async"
+    type="button"
+    class="text-primary-lightest hover:text-primary absolute transition-all duration-100 inset-y-0 right-0 pr-2.5"
+    aria-label="Clear"
+    (click)="clear()"
+  >
+    <mat-icon class="material-symbols-outlined align-middle">close</mat-icon>
+  </button>
+</div>

package/src/libs/ui/inputs/src/lib/search-input/search-input.component.ts

@@ -0,0 +1,29 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Input,
+  Output,
+} from '@angular/core'
+import { Subject, distinctUntilChanged } from 'rxjs'
+
+@Component({
+  selector: 'gn-ui-search-input',
+  templateUrl: './search-input.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class SearchInputComponent {
+  @Input() value = ''
+  @Input() placeholder = ''
+  rawChange = new Subject<string>()
+  @Output() valueChange = this.rawChange.pipe(distinctUntilChanged())
+
+  handleChange($event) {
+    const value = $event.target.value
+    this.rawChange.next(value)
+  }
+
+  clear() {
+    this.value = null
+    this.rawChange.next(null)
+  }
+}

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

@@ -11,6 +11,7 @@ mat-icon {
   font-size: 1.5em;
   margin-top: -0.1em;
   font-variation-settings: 'opsz' 40;
+  stroke: var(--color-primary-darker);
 }
 
 .star-filled {

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

@@ -34,6 +34,13 @@ import { CheckToggleComponent } from './check-toggle/check-toggle.component'
 import { CopyTextButtonComponent } from './copy-text-button/copy-text-button.component'
 import { MatTooltipModule } from '@angular/material/tooltip'
 import { CommonModule } from '@angular/common'
+import { CheckboxComponent } from './checkbox/checkbox.component'
+import { SearchInputComponent } from './search-input/search-input.component'
+import { DateRangePickerComponent } from './date-range-picker/date-range-picker.component'
+import { MatFormFieldModule } from '@angular/material/form-field'
+import { MatInputModule } from '@angular/material/input'
+import { MatDatepickerModule } from '@angular/material/datepicker'
+import { MatNativeDateModule } from '@angular/material/core'
 
 @NgModule({
   declarations: [
@@ -58,6 +65,9 @@ import { CommonModule } from '@angular/common'
     FormFieldTemporalExtentComponent,
     CheckToggleComponent,
     CopyTextButtonComponent,
+    CheckboxComponent,
+    SearchInputComponent,
+    DateRangePickerComponent,
   ],
   imports: [
     CommonModule,
@@ -73,6 +83,10 @@ import { CommonModule } from '@angular/common'
     OverlayModule,
     MatCheckboxModule,
     MatTooltipModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatDatepickerModule,
+    MatNativeDateModule,
   ],
   exports: [
     DropdownSelectorComponent,
@@ -89,6 +103,9 @@ import { CommonModule } from '@angular/common'
     FormFieldComponent,
     CheckToggleComponent,
     CopyTextButtonComponent,
+    CheckboxComponent,
+    SearchInputComponent,
+    DateRangePickerComponent,
   ],
 })
 export class UiInputsModule {}

package/src/libs/ui/search/src/lib/facets/facets.model.ts

@@ -1,4 +1,4 @@
-import { AggregationsTypes } from '../../../../../../libs/common/domain/src/lib/search'
+import { AggregationsTypes } from '../../../../../../libs/common/domain/src/lib/model/search'
 
 export type FacetPath = string[]
 

package/src/libs/ui/search/src/lib/record-preview/record-preview.component.ts

@@ -13,14 +13,13 @@ import {
   stripHtml,
   removeWhitespace,
 } from '../../../../../../libs/util/shared/src'
-import { MetadataQualityDisplay } from '../../../../../../libs/ui/elements/src'
 import { fromEvent, Subscription } from 'rxjs'
 import {
   CatalogRecord,
   DatasetRecord,
   Individual,
   Organization,
-} from '../../../../../../libs/common/domain/src/lib/record'
+} from '../../../../../../libs/common/domain/src/lib/model/record'
 
 @Component({
   selector: 'gn-ui-record-preview',
@@ -31,7 +30,7 @@ export class RecordPreviewComponent implements OnInit, OnDestroy {
   @Input() linkTarget = '_blank'
   @Input() favoriteTemplate: TemplateRef<{ $implicit: CatalogRecord }>
   @Input() linkHref: string = null
-  @Input() metadataQualityDisplay: MetadataQualityDisplay
+  @Input() metadataQualityDisplay: boolean
   @Output() mdSelect = new EventEmitter<CatalogRecord>()
   subscription = new Subscription()
   abstract: string
@@ -51,9 +50,6 @@ export class RecordPreviewComponent implements OnInit, OnDestroy {
   get organization(): Organization {
     return this.record.ownerOrganization
   }
-  get hasMetadataQualityWidget(): boolean {
-    return this.metadataQualityDisplay?.widget === true
-  }
 
   constructor(protected elementRef: ElementRef) {}
 

package/src/libs/ui/search/src/lib/record-preview-feed/record-preview-feed.component.html

@@ -25,6 +25,7 @@
         <gn-ui-thumbnail
           *ngIf="hasLogo"
           [thumbnailUrl]="record.ownerOrganization?.logoUrl?.toString()"
+          [fit]="'contain'"
         ></gn-ui-thumbnail>
       </div>
       <div class="flex flex-col overflow-hidden items-start">

package/src/libs/ui/search/src/lib/record-preview-row/record-preview-row.component.html

@@ -35,9 +35,7 @@
     <div
       class="text-primary opacity-45 uppercase col-start-1 col-span-2 row-start-2 sm:truncate sm:row-start-3 sm:col-span-1"
       data-cy="recordOrg"
-      [class]="
-        hasMetadataQualityWidget ? 'limit-organisation-with-quality' : ''
-      "
+      [class]="metadataQualityDisplay ? 'limit-organisation-with-quality' : ''"
     >
       {{ organization?.name }}
     </div>
@@ -56,7 +54,7 @@
       >
     </div>
     <div
-      *ngIf="hasMetadataQualityWidget"
+      *ngIf="metadataQualityDisplay"
       class="col-start-2 row-start-4 sm:row-start-3 absolute right-[4em] sm:right-[5em]"
     >
       <gn-ui-metadata-quality
@@ -67,6 +65,7 @@
     </div>
     <div
       class="text-right col-start-3 row-start-4 sm:absolute sm:col-start-2 sm:row-start-1 sm:top-[-1.125em] sm:right-[0.4em]"
+      data-cy="recordFav"
     >
       <ng-container
         [ngTemplateOutlet]="favoriteTemplate"

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

@@ -1,24 +1,76 @@
 <div>
   <div *ngIf="totalHits" class="">
+    <div class="flex records-information">
+      <div
+        translate
+        class="my-8 ml-4 block text-gray-800"
+        [translateParams]="{
+          displayed: records.length,
+          hits: totalHits
+        }"
+      >
+        results.records.hits.displayedOn
+      </div>
+      <div
+        *ngIf="selectedRecords.length > 0"
+        class="my-8 ml-6 block text-gray-400 selected-records"
+        translate
+        [translateParams]="{ amount: selectedRecords.length }"
+      >
+        results.records.hits.selected
+      </div>
+    </div>
+
     <div
-      translate
-      class="my-8 ml-4 block text-gray-500"
-      [translateParams]="{
-        displayed: records.length,
-        hits: totalHits
-      }"
+      class="grid grid-cols-[repeat(3,minmax(0,max-content))] gap-x-4 gap-y-1"
+      *ngIf="records[0].name"
     >
-      results.records.hits.displayedOn
+      <div class="contents text-sm">
+        <div class="record-table-header text-gray-400 flex gap-1">
+          <span translate>dashboard.records.userDetail</span>
+        </div>
+        <div class="record-table-header text-gray-400 flex gap-1">
+          <span translate>dashboard.records.username</span>
+        </div>
+        <div class="record-table-header text-gray-400 flex gap-1">
+          <span translate>dashboard.records.userEmail</span>
+        </div>
+      </div>
+      <div
+        class="contents hover:text-gray-900 text-gray-800 cursor-pointer"
+        (click)="recordSelect.emit(record)"
+        *ngFor="let record of records"
+      >
+        <div class="record-table-col text-16">
+          {{ record.name }}
+        </div>
+        <div class="record-table-col text-16">
+          {{ record.username }}
+        </div>
+        <div class="record-table-col text-16">
+          {{ record.emailAddresses[0] }}
+        </div>
+      </div>
     </div>
 
     <div
-      class="grid grid-cols-[repeat(5,minmax(0,max-content))] gap-x-4 gap-y-1"
+      class="grid grid-cols-[repeat(6,minmax(0,max-content))] gap-x-4 gap-y-1"
+      *ngIf="!records[0].name"
     >
       <div class="contents text-sm">
+        <div class="flex justify-center items-center">
+          <gn-ui-checkbox
+            [checked]="isAllSelected()"
+            [indeterminate]="isSomeSelected()"
+            (changed)="selectAll()"
+            type="default"
+          >
+          </gn-ui-checkbox>
+        </div>
         <div class="record-table-header text-gray-400 flex gap-1">
           <gn-ui-button
             type="light"
-            extraClass="px-3 py-2 space-x-1"
+            extraClass="px-3 pl-0 space-x-1 text-left"
             (buttonClick)="setSortBy('resourceTitleObject.default.keyword')"
           >
             <span translate>record.metadata.title</span>
@@ -42,7 +94,7 @@
         <div class="record-table-header text-gray-400 flex gap-1">
           <gn-ui-button
             type="light"
-            extraClass="px-3 py-2 space-x-1"
+            extraClass="px-3 pl-0 space-x-1"
             (buttonClick)="setSortBy('recordOwner')"
           >
             <span translate>record.metadata.author</span>
@@ -63,7 +115,7 @@
         <div class="record-table-header text-gray-400 flex gap-1">
           <gn-ui-button
             type="light"
-            extraClass="px-3 py-2 space-x-1"
+            extraClass="px-3 pl-0 space-x-1"
             (buttonClick)="setSortBy('changeDate')"
           >
             <span translate>record.metadata.updatedOn</span>
@@ -84,7 +136,7 @@
         <div class="record-table-header text-gray-400 flex gap-1">
           <gn-ui-button
             type="light"
-            extraClass="px-3 py-2 space-x-1"
+            extraClass="px-3 pl-0 space-x-1"
             (buttonClick)="setSortBy('createDate')"
           >
             <span translate>record.metadata.createdOn</span>
@@ -108,7 +160,17 @@
         (click)="recordSelect.emit(record)"
         *ngFor="let record of records"
       >
-        <div [title]="record.title" class="record-table-col text-16">
+        <div class="record-table-col">
+          <gn-ui-checkbox
+            [checked]="isChecked(record)"
+            (changed)="handleRecordSelectedChange($event, record)"
+            type="default"
+          ></gn-ui-checkbox>
+        </div>
+        <div
+          [title]="record.title"
+          class="record-table-col text-16 self-center"
+        >
           {{ record.title }}
         </div>
         <div
@@ -130,7 +192,10 @@
           >
             {{ formats[1] }}
           </span>
-          <div class="flex-shrink-0" *ngIf="formats.slice(2).length > 0">
+          <div
+            class="flex-shrink-0"
+            *ngIf="!record.name && formats.slice(2).length > 0"
+          >
             <span>+{{ formats.slice(2).length }}</span>
           </div>
         </div>
@@ -138,10 +203,10 @@
           <mat-icon class="material-symbols-outlined"> person </mat-icon>
           <span class="">{{ formatUserInfo(record.extras?.ownerInfo) }}</span>
         </div>
-        <div class="record-table-col text-16">
+        <div class="record-table-col text-16 self-center">
           {{ dateToString(record.recordUpdated) }}
         </div>
-        <div class="record-table-col text-16">
+        <div class="record-table-col text-16 self-center">
           {{ dateToString(record.recordCreated) }}
         </div>
       </div>

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

@@ -1,12 +1,12 @@
 import { Component, EventEmitter, Input, Output } from '@angular/core'
-import { CatalogRecord } from '../../../../../../libs/common/domain/src/lib/record'
+import { CatalogRecord } from '../../../../../../libs/common/domain/src/lib/model/record'
 import {
   FileFormat,
   getBadgeColor,
   getFileFormat,
   getFormatPriority,
 } from '../../../../../../libs/util/shared/src'
-import { SortByField } from '../../../../../../libs/common/domain/src/lib/search'
+import { SortByField } from '../../../../../../libs/common/domain/src/lib/model/search'
 
 @Component({
   selector: 'gn-ui-record-table',
@@ -14,10 +14,13 @@ import { SortByField } from '../../../../../../libs/common/domain/src/lib/search
   styleUrls: ['./record-table.component.css'],
 })
 export class RecordTableComponent {
-  @Input() records: CatalogRecord[] = []
+  @Input() selectedRecords: string[] = []
+  @Input() records: any[] = []
   @Input() totalHits?: number
   @Input() sortBy?: SortByField
-  @Output() recordSelect = new EventEmitter<CatalogRecord>()
+  @Output() recordClick = new EventEmitter<CatalogRecord>()
+  @Output() recordsSelect = new EventEmitter<CatalogRecord[]>()
+  @Output() recordsDeselect = new EventEmitter<CatalogRecord[]>()
   @Output() sortByChange = new EventEmitter<SortByField>()
 
   dateToString(date: Date): string {
@@ -90,4 +93,57 @@ export class RecordTableComponent {
     const sortOrder = this.getOrderForColumn(col)
     return sortOrder === order
   }
+
+  isChecked(record: CatalogRecord) {
+    if (this.selectedRecords.includes(record.uniqueIdentifier)) {
+      return true
+    }
+    return false
+  }
+
+  handleRecordSelectedChange(selected: boolean, record: CatalogRecord) {
+    if (!selected) {
+      this.recordsDeselect.emit([record])
+      this.selectedRecords = this.selectedRecords.filter(
+        (val) => val !== record.uniqueIdentifier
+      )
+    } else {
+      this.recordsSelect.emit([record])
+      this.selectedRecords.push(record.uniqueIdentifier)
+    }
+  }
+
+  selectAll() {
+    if (this.isAllSelected()) {
+      this.recordsDeselect.emit(this.records)
+      this.selectedRecords = []
+    } else {
+      this.recordsSelect.emit(this.records)
+      this.selectedRecords = this.records.map((record) => {
+        return record.uniqueIdentifier
+      })
+    }
+  }
+
+  isAllSelected(): boolean {
+    if (this.selectedRecords.length === this.records.length) {
+      const allRecords = this.records.filter((record) =>
+        this.selectedRecords.includes(record.uniqueIdentifier)
+      )
+      if (allRecords.length === this.records.length) {
+        return true
+      }
+    }
+    return false
+  }
+
+  isSomeSelected(): boolean {
+    if (
+      this.selectedRecords.length > 0 &&
+      this.selectedRecords.length < this.records.length
+    ) {
+      return true
+    }
+    return false
+  }
 }

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

@@ -3,6 +3,7 @@ import {
   Component,
   EventEmitter,
   Input,
+  OnInit,
   Output,
   TemplateRef,
 } from '@angular/core'
@@ -10,8 +11,7 @@ import {
   DEFAULT_RESULTS_LAYOUT_CONFIG,
   ResultsLayoutConfigItem,
 } from './results-layout.config'
-import { CatalogRecord } from '../../../../../../libs/common/domain/src/lib/record'
-import { MetadataQualityDisplay } from '../../../../../../libs/ui/elements/src'
+import { CatalogRecord } from '../../../../../../libs/common/domain/src/lib/model/record'
 
 @Component({
   selector: 'gn-ui-results-list',
@@ -25,6 +25,6 @@ export class ResultsListComponent {
     DEFAULT_RESULTS_LAYOUT_CONFIG['CARD']
   @Input() favoriteTemplate: TemplateRef<{ $implicit: CatalogRecord }>
   @Input() recordUrlGetter: (record: CatalogRecord) => string
-  @Input() metadataQualityDisplay: MetadataQualityDisplay
+  @Input() metadataQualityDisplay: boolean
   @Output() mdSelect = new EventEmitter<CatalogRecord>()
 }

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

@@ -13,8 +13,7 @@ import {
 } from '@angular/core'
 import { RecordPreviewComponent } from '../record-preview/record-preview.component'
 import { ResultsLayoutConfigItem } from '../results-list/results-layout.config'
-import { CatalogRecord } from '../../../../../../libs/common/domain/src/lib/record'
-import { MetadataQualityDisplay } from '../../../../../../libs/ui/elements/src'
+import { CatalogRecord } from '../../../../../../libs/common/domain/src/lib/model/record'
 
 @Component({
   selector: 'gn-ui-results-list-item',
@@ -26,7 +25,7 @@ export class ResultsListItemComponent implements OnChanges, AfterViewInit {
   @Input() layoutConfig: ResultsLayoutConfigItem
   @Input() record: CatalogRecord
   @Input() favoriteTemplate: TemplateRef<{ $implicit: CatalogRecord }>
-  @Input() metadataQualityDisplay: MetadataQualityDisplay
+  @Input() metadataQualityDisplay: boolean
   @Input() linkHref: string
   @Output() mdSelect = new EventEmitter<CatalogRecord>()
   initialized = false

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

@@ -27,6 +27,7 @@ import { RecordPreviewFeedComponent } from './record-preview-feed/record-preview
 import { RecordTableComponent } from './record-table/record-table.component'
 import { CommonModule } from '@angular/common'
 import { UiInputsModule } from '../../../../../libs/ui/inputs/src'
+import { MatCheckboxModule } from '@angular/material/checkbox'
 
 @NgModule({
   declarations: [
@@ -56,6 +57,7 @@ import { UiInputsModule } from '../../../../../libs/ui/inputs/src'
     UiInputsModule,
     UiElementsModule,
     MatIconModule,
+    MatCheckboxModule,
     RouterLink,
   ],
   exports: [