luisgulo/focalboard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Translate date and datetime with React Translator (#350)

Browse source
This commit is contained in:
Simon Leblanc 2021-04-28 15:30:18 +02:00 committed by GitHub
parent 2e143b63b5
commit a918af6200
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 26 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
webapp/src/components/propertyValueElement.tsx
View file

@ -2,6 +2,7 @@
// See LICENSE.txt for license information.
import React, {useState} from 'react'
import {injectIntl, IntlShape} from 'react-intl'
import {IPropertyOption, IPropertyTemplate, PropertyType} from '../blocks/board'
import {Card} from '../blocks/card'
@ -19,14 +20,15 @@ type Props = {
card: Card
propertyTemplate: IPropertyTemplate
emptyDisplayValue: string
intl: IntlShape
}
const PropertyValueElement = (props:Props): JSX.Element => {
const [value, setValue] = useState(props.card.properties[props.propertyTemplate.id])
const {card, propertyTemplate, readOnly, emptyDisplayValue, boardTree} = props
const {card, propertyTemplate, readOnly, emptyDisplayValue, boardTree, intl} = props
const propertyValue = card.properties[propertyTemplate.id]
const displayValue = OctoUtils.propertyDisplayValue(card, propertyValue, propertyTemplate)
const displayValue = OctoUtils.propertyDisplayValue(card, propertyValue, propertyTemplate, intl)
const finalDisplayValue = displayValue || emptyDisplayValue
const validateProp = (propType: string, val: string): boolean => {
@ -122,4 +124,4 @@ const PropertyValueElement = (props:Props): JSX.Element => {
return <div className='octo-propertyvalue'>{finalDisplayValue}</div>
}
export default PropertyValueElement
export default injectIntl(PropertyValueElement)

2
webapp/src/components/viewHeader/viewHeaderActionsMenu.tsx
View file

@ -74,7 +74,7 @@ type Props = {
function onExportCsvTrigger(boardTree: BoardTree, intl: IntlShape) {
try {
CsvExporter.exportTableCsv(boardTree)
CsvExporter.exportTableCsv(boardTree, intl)
const exportCompleteMessage = intl.formatMessage({
id: 'ViewHeader.export-complete',
defaultMessage: 'Export complete!',

10
webapp/src/csvExporter.ts
View file

@ -1,12 +1,14 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import {IntlShape} from 'react-intl'
import {BoardView} from './blocks/boardView'
import {BoardTree} from './viewModel/boardTree'
import {OctoUtils} from './octoUtils'
import {Utils} from './utils'
class CsvExporter {
static exportTableCsv(boardTree: BoardTree, view?: BoardView): void {
static exportTableCsv(boardTree: BoardTree, intl: IntlShape, view?: BoardView): void {
const {activeView} = boardTree
const viewToExport = view ?? activeView
@ -14,7 +16,7 @@ class CsvExporter {
return
}
const rows = CsvExporter.generateTableArray(boardTree, viewToExport)
const rows = CsvExporter.generateTableArray(boardTree, viewToExport, intl)
let csvContent = 'data:text/csv;charset=utf-8,'
@ -40,7 +42,7 @@ class CsvExporter {
return text.replace(/"/g, '""')
}
private static generateTableArray(boardTree: BoardTree, viewToExport: BoardView): string[][] {
private static generateTableArray(boardTree: BoardTree, viewToExport: BoardView, intl: IntlShape): string[][] {
const {board, cards} = boardTree
const rows: string[][] = []
@ -60,7 +62,7 @@ class CsvExporter {
row.push(`"${this.encodeText(card.title)}"`)
visibleProperties.forEach((template) => {
const propertyValue = card.properties[template.id]
const displayValue = OctoUtils.propertyDisplayValue(card, propertyValue, template) || ''
const displayValue = OctoUtils.propertyDisplayValue(card, propertyValue, template, intl) || ''
if (template.type === 'number') {
const numericValue = propertyValue ? Number(propertyValue).toString() : ''
row.push(numericValue)

6
webapp/src/octoUtils.tsx
View file

@ -16,7 +16,7 @@ import {FilterCondition} from './blocks/filterClause'
import {Utils} from './utils'
class OctoUtils {
static propertyDisplayValue(block: IBlock, propertyValue: string | undefined, propertyTemplate: IPropertyTemplate): string | undefined {
static propertyDisplayValue(block: IBlock, propertyValue: string | undefined, propertyTemplate: IPropertyTemplate, intl: IntlShape): string | undefined {
let displayValue: string | undefined
switch (propertyTemplate.type) {
case 'select': {
@ -31,11 +31,11 @@ class OctoUtils {
break
}
case 'createdTime': {
displayValue = Utils.displayDateTime(new Date(block.createAt))
displayValue = Utils.displayDateTime(new Date(block.createAt), intl)
break
}
case 'updatedTime': {
displayValue = Utils.displayDateTime(new Date(block.updateAt))
displayValue = Utils.displayDateTime(new Date(block.updateAt), intl)
break
}
default:

25
webapp/src/utils.ts
View file

@ -1,6 +1,7 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import marked from 'marked'
import {IntlShape} from 'react-intl'
declare global {
interface Window {
@ -55,24 +56,20 @@ class Utils {
// Date and Time
static displayDate(date: Date): string {
const dateTimeFormat = new Intl.DateTimeFormat('en', {year: 'numeric', month: 'short', day: '2-digit'})
const text = dateTimeFormat.format(date)
static displayDate(date: Date, intl: IntlShape): string {
const text = intl.formatDate(date, {year: 'numeric', month: 'short', day: '2-digit'})
return text
}
static displayDateTime(date: Date): string {
const dateTimeFormat = new Intl.DateTimeFormat(
'en',
{
year: 'numeric',
month: 'short',
day: '2-digit',
hour: 'numeric',
minute: 'numeric',
})
const text = dateTimeFormat.format(date)
static displayDateTime(date: Date, intl: IntlShape): string {
const text = intl.formatDate(date, {
year: 'numeric',
month: 'short',
day: '2-digit',
hour: 'numeric',
minute: 'numeric',
})
return text
}