geonetwork-ui 2.3.2 → 2.4.0-alpha.1

package/src/libs/{feature → ui}/search/src/lib/results-table/results-table.component.html

@@ -1,13 +1,13 @@
 <gn-ui-interactive-table
-  [items]="records$ | async"
+  [items]="records"
   (itemClick)="handleRecordClick($event)"
 >
   <!-- SELECTED COLUMN -->
   <gn-ui-interactive-table-column>
     <ng-template #header>
       <gn-ui-checkbox
-        [checked]="isAllSelected() | async"
-        [indeterminate]="isSomeSelected() | async"
+        [checked]="isAllSelected()"
+        [indeterminate]="isSomeSelected()"
         (changed)="toggleSelectAll()"
         type="default"
         class="-m-2 mr-3"
@@ -16,7 +16,7 @@
     </ng-template>
     <ng-template #cell let-item>
       <gn-ui-checkbox
-        [checked]="isChecked(item) | async"
+        [checked]="isChecked(item)"
         (changed)="handleRecordSelectedChange($event, item)"
         class="-m-2"
         type="default"
@@ -27,14 +27,27 @@
   <!-- TITLE COLUMN -->
   <gn-ui-interactive-table-column
     [sortable]="true"
-    [activeSort]="isSortedBy('resourceTitleObject.default.keyword') | async"
+    [grow]="true"
+    [activeSort]="isSortedBy('resourceTitleObject.default.keyword')"
     (sortChange)="setSortBy('resourceTitleObject.default.keyword', $event)"
   >
     <ng-template #header>
       <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 font-semibold">
+        <span class="overflow-hidden text-ellipsis">{{ item.title }}</span>
+        <gn-ui-badge
+          *ngIf="hasDraft(item)"
+          [style.--gn-ui-badge-padding]="'0.2em 0.6em'"
+          [style.--gn-ui-badge-text-size]="'12px'"
+          [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>
 
@@ -45,25 +58,25 @@
     </ng-template>
     <ng-template #cell let-item>
       <div
-        class="flex justify-start items-center gap-2"
+        class="flex justify-start items-center gap-2 font-medium"
         *ngIf="getRecordFormats(item) as formats"
         [title]="formats.join(', ')"
       >
         <span
-          class="badge-btn min-w-[45px] text-sm text-white px-2 shrink-0"
+          class="badge-btn min-w-[45px] text-xs text-white px-2 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 shrink-0"
+          class="badge-btn min-w-[45px] text-xs text-white px-2 shrink-0"
           [style.background-color]="getBadgeColor(formats[1])"
           *ngIf="formats[1]"
         >
           {{ formats[1] }}
         </span>
-        <div class="shrink-0" *ngIf="formats.slice(2).length > 0">
+        <div class="shrink-0 text-xs" *ngIf="formats.slice(2).length > 0">
           <span>+{{ formats.slice(2).length }}</span>
         </div>
       </div>
@@ -74,7 +87,7 @@
   <!-- OWNER COLUMN -->
   <gn-ui-interactive-table-column
     [sortable]="true"
-    [activeSort]="isSortedBy('recordOwner') | async"
+    [activeSort]="isSortedBy('recordOwner')"
     (sortChange)="setSortBy('recordOwner', $event)"
   >
     <ng-template #header>
@@ -82,7 +95,7 @@
     </ng-template>
     <ng-template #cell let-item>
       <mat-icon class="material-symbols-outlined">person</mat-icon>
-      <span>{{ formatUserInfo(item.extras?.ownerInfo) }}</span>
+      <span class="text-xs">{{ formatUserInfo(item.extras?.ownerInfo) }}</span>
     </ng-template>
   </gn-ui-interactive-table-column>
 
@@ -92,21 +105,44 @@
       <span translate>record.metadata.status</span>
     </ng-template>
     <ng-template #cell let-item>
-      {{ item.status }}
+      <span class="text-xs">
+        {{
+          (isUnsavedDraft(item)
+            ? 'record.metadata.status.notPublished'
+            : 'record.metadata.status.published'
+          ) | translate
+        }}</span
+      >
     </ng-template>
   </gn-ui-interactive-table-column>
 
   <!-- UPDATE DATE COLUMN -->
   <gn-ui-interactive-table-column
     [sortable]="true"
-    [activeSort]="isSortedBy('changeDate') | async"
+    [activeSort]="isSortedBy('changeDate')"
     (sortChange)="setSortBy('changeDate', $event)"
   >
     <ng-template #header>
       <span translate>record.metadata.updatedOn</span>
     </ng-template>
     <ng-template #cell let-item>
-      {{ dateToString(item.recordUpdated) }}
+      <div class="flex justify-center w-full text-xs">
+        {{ isUnsavedDraft(item) ? '-' : dateToString(item.recordUpdated) }}
+      </div>
+    </ng-template>
+  </gn-ui-interactive-table-column>
+
+  <!-- ACTION MENU COLUMN -->
+  <gn-ui-interactive-table-column>
+    <ng-template #header> </ng-template>
+    <ng-template #cell let-item>
+      <gn-ui-action-menu
+        [canDuplicate]="canDuplicate(item)"
+        [canDelete]="canDelete(item)"
+        (duplicate)="handleDuplicate(item)"
+        (delete)="handleDelete(item)"
+      >
+      </gn-ui-action-menu>
     </ng-template>
   </gn-ui-interactive-table-column>
 </gn-ui-interactive-table>

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

@@ -0,0 +1,151 @@
+import { CommonModule } from '@angular/common'
+import { Component, EventEmitter, Input, Output } from '@angular/core'
+import { MatIconModule } from '@angular/material/icon'
+import { CatalogRecord } from '../../../../../../libs/common/domain/src/lib/model/record'
+import {
+  FieldSort,
+  SortByField,
+} from '../../../../../../libs/common/domain/src/lib/model/search'
+import { BadgeComponent, UiInputsModule } from '../../../../../../libs/ui/inputs/src'
+import {
+  InteractiveTableColumnComponent,
+  InteractiveTableComponent,
+} from '../../../../../../libs/ui/layout/src'
+import {
+  FileFormat,
+  getBadgeColor,
+  getFileFormat,
+  getFormatPriority,
+} from '../../../../../../libs/util/shared/src'
+import { TranslateModule } from '@ngx-translate/core'
+import { ActionMenuComponent } from './action-menu/action-menu.component'
+
+@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,
+    BadgeComponent,
+    ActionMenuComponent,
+  ],
+})
+export class ResultsTableComponent {
+  @Input() records: CatalogRecord[] = []
+  @Input() selectedRecordsIdentifiers: string[] = []
+  @Input() sortOrder: SortByField = null
+  @Input() hasDraft: (record: CatalogRecord) => boolean = () => false
+  @Input() canDuplicate: (record: CatalogRecord) => boolean = () => true
+  @Input() isUnsavedDraft: (record: CatalogRecord) => boolean = () => true
+  @Input() canDelete: (record: CatalogRecord) => boolean = () => true
+
+  // emits the column (field) as well as the order
+  @Output() sortByChange = new EventEmitter<[string, 'asc' | 'desc']>()
+  @Output() recordClick = new EventEmitter<CatalogRecord>()
+  @Output() duplicateRecord = new EventEmitter<CatalogRecord>()
+  @Output() deleteRecord = new EventEmitter<CatalogRecord>()
+  @Output() recordsSelectedChange = new EventEmitter<
+    [CatalogRecord[], boolean]
+  >()
+
+  dateToString(date: Date): string {
+    return date?.toLocaleDateString(undefined, {
+      year: 'numeric',
+      month: 'long',
+      day: 'numeric',
+      timeZone: 'UTC',
+    })
+  }
+
+  getRecordFormats(record: CatalogRecord): FileFormat[] {
+    if (record.kind === 'service' || !('onlineResources' in record)) {
+      return []
+    }
+    const formats = Array.from(
+      new Set(
+        record.onlineResources.map((onlineResource) =>
+          getFileFormat(onlineResource)
+        )
+      )
+    ).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)
+  }
+
+  handleDuplicate(item: unknown) {
+    this.duplicateRecord.emit(item as CatalogRecord)
+  }
+
+  handleDelete(item: unknown) {
+    this.deleteRecord.emit(item as CatalogRecord)
+  }
+
+  setSortBy(col: string, order: 'asc' | 'desc') {
+    this.sortByChange.emit([col, order])
+  }
+
+  isSortedBy(col: string): 'desc' | 'asc' | null {
+    if (!this.sortOrder) {
+      return null
+    }
+    const sortArray = Array.isArray(this.sortOrder[0])
+      ? (this.sortOrder as FieldSort[])
+      : ([this.sortOrder] as FieldSort[])
+    for (const sort of sortArray) {
+      if (sort[1] === col) {
+        return sort[0]
+      }
+    }
+    return null
+  }
+
+  isChecked(record: CatalogRecord): boolean {
+    return this.selectedRecordsIdentifiers.includes(record.uniqueIdentifier)
+  }
+
+  handleRecordSelectedChange(selected: boolean, record: CatalogRecord) {
+    this.recordsSelectedChange.emit([[record], selected])
+  }
+
+  async toggleSelectAll() {
+    this.recordsSelectedChange.emit([this.records, !this.isAllSelected()])
+  }
+
+  isAllSelected(): boolean {
+    return this.records.every((record) =>
+      this.selectedRecordsIdentifiers.includes(record.uniqueIdentifier)
+    )
+  }
+
+  isSomeSelected(): boolean {
+    const allSelected = this.records.every((record) =>
+      this.selectedRecordsIdentifiers.includes(record.uniqueIdentifier)
+    )
+    const someSelected = this.records.some((record) =>
+      this.selectedRecordsIdentifiers.includes(record.uniqueIdentifier)
+    )
+    return !allSelected && someSelected
+  }
+}

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

@@ -1,7 +1,7 @@
 export * from './lib/ui-widgets.module'
 export * from './lib/progress-bar/progress-bar.component'
+export * from './lib/popover/popover.component'
 export * from './lib/loading-mask/loading-mask.component'
-export * from './lib/badge/badge.component'
 export * from './lib/color-scale/color-scale.component'
 export * from './lib/popup-alert/popup-alert.component'
 export * from './lib/spinning-loader/spinning-loader.component'

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

@@ -0,0 +1,3 @@
+<span #popoverContent>
+  <ng-content></ng-content>
+</span>

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

@@ -0,0 +1,85 @@
+import { CommonModule } from '@angular/common'
+import {
+  Component,
+  AfterViewInit,
+  ElementRef,
+  Input,
+  ViewChild,
+  OnDestroy,
+  OnChanges,
+  SimpleChanges,
+  TemplateRef,
+  Renderer2,
+  ViewContainerRef,
+  EmbeddedViewRef,
+} from '@angular/core'
+import tippy, { Instance } from 'tippy.js'
+
+@Component({
+  selector: 'gn-ui-popover',
+  templateUrl: './popover.component.html',
+  styleUrls: ['./popover.component.css'],
+  standalone: true,
+  imports: [CommonModule],
+})
+export class PopoverComponent implements AfterViewInit, OnChanges, OnDestroy {
+  @ViewChild('popoverContent', { static: false }) popoverContent: ElementRef
+  @Input() content: string | TemplateRef<any>
+  @Input() theme: 'light' | 'light-border' | 'translucent' | 'material' | ''
+
+  private tippyInstance: Instance
+  private view: EmbeddedViewRef<any>
+
+  constructor(
+    private viewContainerRef: ViewContainerRef,
+    private renderer: Renderer2
+  ) {}
+
+  private getContent(): string | HTMLElement {
+    if (this.content instanceof TemplateRef) {
+      if (this.view) {
+        this.view.destroy()
+      }
+      this.view = this.viewContainerRef.createEmbeddedView(this.content)
+      this.view.detectChanges()
+      const wrapper = this.renderer.createElement('div') // Create a wrapper div
+      this.view.rootNodes.forEach((node) => {
+        this.renderer.appendChild(wrapper, node) // Append each root node to the wrapper
+      })
+      return wrapper
+    }
+    return this.content
+  }
+
+  ngAfterViewInit(): void {
+    this.tippyInstance = tippy(this.popoverContent.nativeElement as Element, {
+      content: this.getContent(),
+      allowHTML: true,
+      theme: this.theme,
+    })
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes['theme']) {
+      this.theme = changes['theme'].currentValue
+      if (this.tippyInstance) {
+        this.tippyInstance.setProps({ theme: this.theme })
+      }
+    }
+    if (changes['content']) {
+      this.content = changes['content'].currentValue
+      if (this.tippyInstance) {
+        this.tippyInstance.setContent(this.getContent())
+      }
+    }
+  }
+
+  ngOnDestroy(): void {
+    if (this.tippyInstance) {
+      this.tippyInstance.destroy()
+    }
+    if (this.view) {
+      this.view.destroy()
+    }
+  }
+}

package/src/libs/ui/widgets/src/lib/popup-alert/popup-alert.component.ts

@@ -7,12 +7,16 @@ import {
   OnInit,
   ViewChild,
 } from '@angular/core'
+import { CommonModule } from '@angular/common'
+import { MatIconModule } from '@angular/material/icon'
 
 @Component({
   selector: 'gn-ui-popup-alert',
   templateUrl: './popup-alert.component.html',
   styleUrls: ['./popup-alert.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [CommonModule, MatIconModule],
 })
 export class PopupAlertComponent implements OnInit {
   @Input() icon: string

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

@@ -9,8 +9,6 @@ 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'
@@ -21,8 +19,6 @@ import { CommonModule } from '@angular/common'
     ProgressBarComponent,
     StepBarComponent,
     LoadingMaskComponent,
-    PopupAlertComponent,
-    BadgeComponent,
     SpinningLoaderComponent,
   ],
   imports: [
@@ -40,8 +36,6 @@ import { CommonModule } from '@angular/common'
     ProgressBarComponent,
     StepBarComponent,
     LoadingMaskComponent,
-    PopupAlertComponent,
-    BadgeComponent,
     SpinningLoaderComponent,
   ],
 })

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

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

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

@@ -1,6 +1,6 @@
 import { MapConfig } from './model'
 
-export const CONFIG_OK = `
+export const okAppConfigFixture = () => `
 [global]
 geonetwork4_api_url = "/geonetwork/srv/api"
 proxy_path = "/proxy/?url="
@@ -63,9 +63,9 @@ my.sample.text = "Un bon exemple de texte."
 "my.quoted.text" = 'du texte entre guillements.'
 `
 
-export const CONFIG_WITH_TRANSLATIONS = CONFIG_OK
+export const appConfigWithTranslationFixture = () => okAppConfigFixture()
 
-export const CONFIG_MINIMAL = `
+export const minimalAppConfigFixture = () => `
 [global]
 geonetwork4_api_url = "/geonetwork/srv/api"
 proxy_path = "/proxy/?url="
@@ -77,7 +77,7 @@ main_color = "#212029" # All-purpose text color
 background_color = "#fdfbff"
 `
 
-export const MAP_CONFIG_FIXTURE: MapConfig = {
+export const mapConfigFixture = (): MapConfig => ({
   MAX_ZOOM: 10,
   MAX_EXTENT: [-418263.418776, 5251529.591305, 961272.067714, 6706890.609855],
   DO_NOT_USE_DEFAULT_BASEMAP: false,
@@ -101,15 +101,15 @@ export const MAP_CONFIG_FIXTURE: MapConfig = {
       NAME: 'some_layername',
     },
   ],
-}
+})
 
-export const CONFIG_MALFORMED = `
+export const malformedConfigFixture = () => `
 {
   "I thought": "we were still doing json"
 }
 `
 
-export const CONFIG_MISSING_MANDATORY = `
+export const missingMandatoryConfigFixture = () => `
 [theme]
 primary_color = "#093564"
 secondary_color = "#c2e9dc"
@@ -117,7 +117,7 @@ background_color = "#fdfbff"
 main_font = 'sans-serif'
 `
 
-export const CONFIG_WRONG_LANGUAGE_CODE = `
+export const wrongLanguageCodeConfigFixture = () => `
 [global]
 geonetwork4_api_url = "/geonetwork/srv/api"
 proxy_path = "/proxy/?url="
@@ -132,7 +132,7 @@ main_color = "#212029" # All-purpose text color
 background_color = "#fdfbff"
 `
 
-export const CONFIG_UNRECOGNIZED_KEYS = `
+export const unrecognizedKeysConfigFixture = () => `
 [global]
 geonetwork4_api_url = "/geonetwork/srv/api"
 proxy_path = "/proxy/?url="

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

@@ -0,0 +1,31 @@
+import { LayerConfig } from './model'
+import { MapContextLayer } from '@geospatial-sdk/core'
+
+export function getMapContextLayerFromConfig(
+  config: LayerConfig
+): MapContextLayer {
+  switch (config.TYPE) {
+    case 'wms':
+      return {
+        type: 'wms',
+        url: config.URL,
+        name: config.NAME,
+      }
+    case 'wfs':
+      return {
+        type: 'wfs',
+        url: config.URL,
+        featureType: config.NAME,
+      }
+    case 'xyz':
+      return {
+        type: config.TYPE,
+        url: config.URL,
+      }
+    case 'geojson':
+      return {
+        type: config.TYPE,
+        ...(config.DATA ? { data: config.DATA } : { url: config.URL }),
+      }
+  }
+}

package/src/libs/util/shared/src/lib/links/link-classifier.service.ts

@@ -1,6 +1,7 @@
 import { Injectable } from '@angular/core'
-import { DatasetDistribution } from '../../../../../../libs/common/domain/src/lib/model/record'
+import { DatasetOnlineResource } from '../../../../../../libs/common/domain/src/lib/model/record'
 import { getFileFormat } from './link-utils'
+
 export enum LinkUsage {
   API = 'api',
   MAP_API = 'mapapi',
@@ -15,7 +16,7 @@ export enum LinkUsage {
   providedIn: 'root',
 })
 export class LinkClassifierService {
-  getUsagesForLink(link: DatasetDistribution): LinkUsage[] {
+  getUsagesForLink(link: DatasetOnlineResource): LinkUsage[] {
     switch (link.type) {
       case 'service': {
         switch (link.accessServiceProtocol) {
@@ -51,7 +52,7 @@ export class LinkClassifierService {
     }
   }
 
-  hasUsage(link: DatasetDistribution, usage: LinkUsage) {
+  hasUsage(link: DatasetOnlineResource, usage: LinkUsage) {
     return this.getUsagesForLink(link).indexOf(usage) > -1
   }
 }

package/src/libs/util/shared/src/lib/links/link-utils.ts

@@ -1,5 +1,5 @@
 import { marker } from '@biesbjerg/ngx-translate-extract-marker'
-import { DatasetDistribution } from '../../../../../../libs/common/domain/src/lib/model/record'
+import { DatasetOnlineResource } from '../../../../../../libs/common/domain/src/lib/model/record'
 
 marker('downloads.wfs.featuretype.not.found')
 
@@ -131,7 +131,7 @@ export function getFormatPriority(linkFormat: FileFormat): number {
   return 0
 }
 
-export function getLinkPriority(link: DatasetDistribution): number {
+export function getLinkPriority(link: DatasetOnlineResource): number {
   return getFormatPriority(getFileFormat(link))
 }
 
@@ -155,7 +155,7 @@ export function getFileFormatFromServiceOutput(
   return null
 }
 
-export function getFileFormat(link: DatasetDistribution): FileFormat {
+export function getFileFormat(link: DatasetOnlineResource): FileFormat {
   if ('mimeType' in link) {
     const mimeTypeFormat = mimeTypeToFormat(link.mimeType)
     if (mimeTypeFormat !== null) {
@@ -172,7 +172,7 @@ export function getFileFormat(link: DatasetDistribution): FileFormat {
 }
 
 export function isFormatInQueryParam(
-  link: DatasetDistribution,
+  link: DatasetOnlineResource,
   alias: string
 ): boolean {
   const queryParams = link.url.searchParams
@@ -194,7 +194,7 @@ export function mimeTypeToFormat(mimeType: string): FileFormat {
 }
 
 export function checkFileFormat(
-  link: DatasetDistribution,
+  link: DatasetOnlineResource,
   format: FileFormat
 ): boolean {
   return (
@@ -214,7 +214,7 @@ export function getBadgeColor(linkFormat: FileFormat): string {
   return 'var(--color-gray-700)' // Default color ?
 }
 
-export function getLinkLabel(link: DatasetDistribution): string {
+export function getLinkLabel(link: DatasetOnlineResource): string {
   let format = ''
   switch (link.type) {
     case 'service':

package/src/libs/util/shared/src/lib/services/theme.service.ts

@@ -109,6 +109,7 @@ export class ThemeService {
     applyColor('gray-700', scale(0.7))
     applyColor('gray-800', scale(0.8))
     applyColor('gray-900', scale(0.9))
+    applyColor('gray-950', scale(0.95))
 
     if (mainFont) {
       document.documentElement.style.setProperty(`--font-family-main`, mainFont)

package/src/libs/util/shared/src/lib/utils/bytes-convert.ts

@@ -1,3 +1,6 @@
-export function megabytesToBytes(megabytes) {
+export function megabytesToBytes(megabytes: number) {
   return megabytes * 1048576
 }
+export function bytesToMegabytes(bytes: number) {
+  return bytes / 1048576
+}

package/src/libs/util/shared/src/lib/utils/index.ts

@@ -3,6 +3,7 @@ export * from './event'
 export * from './fuzzy-filter'
 export * from './geojson'
 export * from './image-resize'
+export * from './no-duplicate-file-name'
 export * from './parse'
 export * from './remove-whitespace'
 export * from './sort-by'

package/src/libs/util/shared/src/lib/utils/no-duplicate-file-name.ts

@@ -0,0 +1,23 @@
+export function noDuplicateFileName(
+  fileName: string,
+  fileNameList: string[]
+): string {
+  if (fileNameList.includes(fileName)) {
+    const fileNameParts = fileName.split('.')
+    let extension = ''
+    let baseName = fileName
+
+    if (fileNameParts.length > 1) {
+      extension = fileNameParts.pop() as string
+      baseName = fileNameParts.join('.')
+    }
+
+    if (extension) {
+      fileName = `${baseName}_${Date.now()}.${extension}`
+    } else {
+      fileName = `${baseName}_${Date.now()}`
+    }
+  }
+
+  return fileName
+}