Coding guidelines

Dates

All date formatting in the application should use the DateService provided by @geonetwork-ui/util/shared. This ensures consistent date formatting across the application and simplifies localization.

Using DateService

First, inject the DateService in your component or service:

import { DateService } from '@geonetwork-ui/util/shared'

constructor(private dateService: DateService) {}

Formatting dates

Use the formatDate method for date-only formatting:

// Formats to localized date (e.g., "01/15/2023")
const formattedDate = this.dateService.formatDate(myDate)

Use the formatDateTime method when you need to include the time component:

// Formats to localized date and time (e.g., "01/15/2023 14:30:45")
const formattedDateTime = this.dateService.formatDateTime(myDate)

Use the formatRelativeDateTime method for relative time formatting:

// Formats to relative time (e.g., "2 days ago", "in 3 months")
// Note: This method returns a Promise
const relativeDate = await this.dateService.formatRelativeDateTime(myDate)

Displaying humanized dates

Use GnUiHumanizeDateDirective to show relative dates (e.g., "2 days ago") with tooltips for exact datetimes. Import the directive:

import { GnUiHumanizeDateDirective } from '@geonetwork-ui/util/shared'

Then use it in your template:

<p [gnUiHumanizeDate]="metadata.resourceCreated"></p>

Best practices

• Never use direct JavaScript Date formatting methods or third-party libraries for date formatting
• Always use the DateService methods for consistency
• Consider time zones when working with dates, especially in global applications
• For date manipulation (not formatting), consider using the utility methods provided by the DateService

Event handling

Stopping click event propagation

In order to stop click event propagation you should use propagateToDocumentOnly from @geonetwork-ui/util/shared instead of event.stopPropagation to ensure that the document receives the event.

import { propagateToDocumentOnly } from '@geonetwork-ui/util/shared'

// ...

handleClick(event: Event) {
  // do stuff
  event.preventDefault()
  propagateToDocumentOnly(event)
}

This guarantees that the document will still receive the event so that components such as dropdowns can react to a click outside and close.