geonetwork-ui 2.2.0-dev.55bb5e18 → 2.2.0-dev.5b8d393f

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

@@ -1,215 +0,0 @@
-<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
-      class="grid grid-cols-[repeat(3,minmax(0,max-content))] gap-x-4 gap-y-1"
-      *ngIf="records[0].name"
-    >
-      <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(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 pl-0 space-x-1 text-left"
-            (buttonClick)="setSortBy('resourceTitleObject.default.keyword')"
-          >
-            <span translate>record.metadata.title</span>
-            <mat-icon
-              class="material-symbols-outlined"
-              *ngIf="isSortedBy('resourceTitleObject.default.keyword', 'desc')"
-            >
-              expand_more</mat-icon
-            >
-            <mat-icon
-              class="material-symbols-outlined"
-              *ngIf="isSortedBy('resourceTitleObject.default.keyword', 'asc')"
-            >
-              expand_less</mat-icon
-            >
-          </gn-ui-button>
-        </div>
-        <div translate="" class="record-table-header text-gray-400 flex gap-1">
-          record.metadata.formats
-        </div>
-        <div class="record-table-header text-gray-400 flex gap-1">
-          <gn-ui-button
-            type="light"
-            extraClass="px-3 pl-0 space-x-1"
-            (buttonClick)="setSortBy('recordOwner')"
-          >
-            <span translate>record.metadata.author</span>
-            <mat-icon
-              class="material-symbols-outlined"
-              *ngIf="isSortedBy('recordOwner', 'desc')"
-            >
-              expand_more</mat-icon
-            >
-            <mat-icon
-              class="material-symbols-outlined"
-              *ngIf="isSortedBy('recordOwner', 'asc')"
-            >
-              expand_less</mat-icon
-            >
-          </gn-ui-button>
-        </div>
-        <div class="record-table-header text-gray-400 flex gap-1">
-          <gn-ui-button
-            type="light"
-            extraClass="px-3 pl-0 space-x-1"
-            (buttonClick)="setSortBy('changeDate')"
-          >
-            <span translate>record.metadata.updatedOn</span>
-            <mat-icon
-              class="material-symbols-outlined"
-              *ngIf="isSortedBy('changeDate', 'desc')"
-            >
-              expand_more</mat-icon
-            >
-            <mat-icon
-              class="material-symbols-outlined"
-              *ngIf="isSortedBy('changeDate', 'asc')"
-            >
-              expand_less</mat-icon
-            >
-          </gn-ui-button>
-        </div>
-        <div class="record-table-header text-gray-400 flex gap-1">
-          <gn-ui-button
-            type="light"
-            extraClass="px-3 pl-0 space-x-1"
-            (buttonClick)="setSortBy('createDate')"
-          >
-            <span translate>record.metadata.createdOn</span>
-            <mat-icon
-              class="material-symbols-outlined"
-              *ngIf="isSortedBy('createDate', 'desc')"
-            >
-              expand_more</mat-icon
-            >
-            <mat-icon
-              class="material-symbols-outlined"
-              *ngIf="isSortedBy('createDate', 'asc')"
-            >
-              expand_less</mat-icon
-            >
-          </gn-ui-button>
-        </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">
-          <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
-          class="record-table-col flex justify-start items-center gap-2 text-16"
-          [title]="formats.join(', ')"
-          *ngIf="getRecordFormats(record) as formats"
-        >
-          <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="!record.name && formats.slice(2).length > 0"
-          >
-            <span>+{{ formats.slice(2).length }}</span>
-          </div>
-        </div>
-        <div class="record-table-col flex items-center gap-2 text-16">
-          <mat-icon class="material-symbols-outlined"> person </mat-icon>
-          <span class="">{{ formatUserInfo(record.extras?.ownerInfo) }}</span>
-        </div>
-        <div class="record-table-col text-16 self-center">
-          {{ dateToString(record.recordUpdated) }}
-        </div>
-        <div class="record-table-col text-16 self-center">
-          {{ dateToString(record.recordCreated) }}
-        </div>
-      </div>
-    </div>
-  </div>
-</div>

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

@@ -1,149 +0,0 @@
-import { Component, EventEmitter, Input, 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 { SortByField } from '../../../../../../libs/common/domain/src/lib/model/search'
-
-@Component({
-  selector: 'gn-ui-record-table',
-  templateUrl: './record-table.component.html',
-  styleUrls: ['./record-table.component.css'],
-})
-export class RecordTableComponent {
-  @Input() selectedRecords: string[] = []
-  @Input() records: any[] = []
-  @Input() totalHits?: number
-  @Input() sortBy?: SortByField
-  @Output() recordClick = new EventEmitter<CatalogRecord>()
-  @Output() recordsSelect = new EventEmitter<CatalogRecord[]>()
-  @Output() recordsDeselect = new EventEmitter<CatalogRecord[]>()
-  @Output() sortByChange = new EventEmitter<SortByField>()
-
-  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'
-  }
-
-  formatUserInfo(userInfo: string | unknown): string {
-    const infos = (typeof userInfo === 'string' ? userInfo : '').split('|')
-    if (infos && infos.length === 4) {
-      return `${infos[2]} ${infos[1]}`
-    }
-    return undefined
-  }
-
-  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
-  }
-
-  getBadgeColor(format: FileFormat): string {
-    return getBadgeColor(format)
-  }
-
-  private getOrderForColumn(col: string): 'asc' | 'desc' | null {
-    if (!this.sortBy) {
-      return null
-    }
-    let order: 'asc' | 'desc' | null = null
-    const sortedArray = Array.isArray(this.sortBy[0])
-      ? this.sortBy
-      : [this.sortBy]
-    sortedArray.forEach((sortedCol) => {
-      if (sortedCol[1] === col) {
-        order = sortedCol[0]
-      }
-    })
-    return order
-  }
-
-  setSortBy(col: string): void {
-    const sortOrder = this.getOrderForColumn(col)
-    let newOrder
-    if (sortOrder) {
-      newOrder = sortOrder === 'asc' ? 'desc' : 'asc'
-    } else {
-      newOrder = 'asc'
-    }
-    this.sortByChange.emit([newOrder, col])
-    this.sortBy = [newOrder, col]
-  }
-
-  isSortedBy(col: string, order: 'asc' | 'desc'): boolean {
-    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
-  }
-}