self-hosted/focalboard
1
0
Fork 0
mirror of https://github.com/mattermost/focalboard.git synced 2025-05-13 21:37:37 +02:00
Code Issues Releases Activity

A bit more translations and start using intl component

Browse Source
This commit is contained in:
Jesús Espino 2020-10-24 10:08:22 +02:00
parent 230b0a161c
commit 4be57d72b5
5 changed files with 52 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
webapp/i18n/en.json
View File

@ -14,11 +14,16 @@
"TableComponent.plus-new": "+ New", "TableComponent.plus-new": "+ New",
"TableComponent.random-icon": "Random", "TableComponent.random-icon": "Random",
"TableComponent.remove-icon": "Remove Icon", "TableComponent.remove-icon": "Remove Icon",
"ViewHeader.export-board-archive": "Export Board Archive",
"ViewHeader.export-csv": "Export to CSV",
"ViewHeader.filter": "Filter", "ViewHeader.filter": "Filter",
"ViewHeader.group-by": "Group by {property}", "ViewHeader.group-by": "Group by {property}",
"ViewHeader.new": "New", "ViewHeader.new": "New",
"ViewHeader.properties": "Properties", "ViewHeader.properties": "Properties",
"ViewHeader.search": "Search", "ViewHeader.search": "Search",
"ViewHeader.search-text": "Search text", "ViewHeader.search-text": "Search text",
"ViewHeader.sort": "Sort" "ViewHeader.sort": "Sort",
"ViewHeader.test-add-100-cards": "TEST: Add 100 cards",
"ViewHeader.test-add-1000-cards": "TEST: Add 1,000 cards",
"ViewHeader.test-randomize-icons": "TEST: Randomize icons"
} }

7
webapp/i18n/es.json
View File

@ -14,11 +14,16 @@
"TableComponent.plus-new": "+ Nueva", "TableComponent.plus-new": "+ Nueva",
"TableComponent.random-icon": "Aleatorio", "TableComponent.random-icon": "Aleatorio",
"TableComponent.remove-icon": "Quitar Icono", "TableComponent.remove-icon": "Quitar Icono",
"ViewHeader.export-board-archive": "Exportar Archivo del Panel",
"ViewHeader.export-csv": "Exportar a CSV",
"ViewHeader.filter": "Filtrar", "ViewHeader.filter": "Filtrar",
"ViewHeader.group-by": "Agrupar por {property}", "ViewHeader.group-by": "Agrupar por {property}",
"ViewHeader.new": "Nueva", "ViewHeader.new": "Nueva",
"ViewHeader.properties": "Propiedades", "ViewHeader.properties": "Propiedades",
"ViewHeader.search": "Buscar", "ViewHeader.search": "Buscar",
"ViewHeader.search-text": "Texto de búsqueda", "ViewHeader.search-text": "Texto de búsqueda",
"ViewHeader.sort": "Ordenar" "ViewHeader.sort": "Ordenar",
"ViewHeader.test-add-100-cards": "TEST: Añadir 100 tarjetas",
"ViewHeader.test-add-1000-cards": "TEST: Añadir 1,000 tarjetas",
"ViewHeader.test-randomize-icons": "TEST: Iconos aleatorios"
} }

15
webapp/package-lock.json generated
View File

@ -1464,6 +1464,15 @@
"@types/react": "*" "@types/react": "*"
} }
}, },
"@types/react-intl": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/@types/react-intl/-/react-intl-3.0.0.tgz",
"integrity": "sha512-k8F3d05XQGEqSWIfK97bBjZe4z9RruXU9Wa7OZ2iUC5pdeIpzuQDZe/9C2J3Xir5//ZtAkhcv08Wfx3n5TBTQg==",
"dev": true,
"requires": {
"react-intl": "*"
}
},
"@types/react-router": { "@types/react-router": {
"version": "5.1.8", "version": "5.1.8",
"resolved": "https://registry.npmjs.org/@types/react-router/-/react-router-5.1.8.tgz", "resolved": "https://registry.npmjs.org/@types/react-router/-/react-router-5.1.8.tgz",
@ -7428,12 +7437,6 @@
"integrity": "sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==", "integrity": "sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==",
"dev": true "dev": true
}, },
"json-loader": {
"version": "0.5.7",
"resolved": "https://registry.npmjs.org/json-loader/-/json-loader-0.5.7.tgz",
"integrity": "sha512-QLPs8Dj7lnf3e3QYS1zkCo+4ZwqOiF9d/nZnYozTISxXWCfNs9yuky5rJw4/W34s7POaNlbZmQGaB5NiXCbP4w==",
"dev": true
},
"json-parse-better-errors": { "json-parse-better-errors": {
"version": "1.0.2", "version": "1.0.2",
"resolved": "https://registry.npmjs.org/json-parse-better-errors/-/json-parse-better-errors-1.0.2.tgz", "resolved": "https://registry.npmjs.org/json-parse-better-errors/-/json-parse-better-errors-1.0.2.tgz",

1
webapp/package.json
View File

@ -34,6 +34,7 @@
"@types/marked": "^1.1.0", "@types/marked": "^1.1.0",
"@types/react": "^16.9.49", "@types/react": "^16.9.49",
"@types/react-dom": "^16.9.8", "@types/react-dom": "^16.9.8",
"@types/react-intl": "^3.0.0",
"@types/react-router-dom": "^5.1.6", "@types/react-router-dom": "^5.1.6",
"@typescript-eslint/eslint-plugin": "^4.4.1", "@typescript-eslint/eslint-plugin": "^4.4.1",
"@typescript-eslint/parser": "^4.4.1", "@typescript-eslint/parser": "^4.4.1",

61
webapp/src/components/viewHeader.tsx
View File

@ -1,12 +1,13 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information. // See LICENSE.txt for license information.
import React from 'react' import React from 'react'
import {FormattedMessage} from 'react-intl' import {injectIntl, IntlShape, FormattedMessage} from 'react-intl'
import {Archiver} from '../archiver' import {Archiver} from '../archiver'
import {ISortOption} from '../blocks/boardView' import {ISortOption} from '../blocks/boardView'
import {BlockIcons} from '../blockIcons' import {BlockIcons} from '../blockIcons'
import {MutableCard} from '../blocks/card' import {MutableCard} from '../blocks/card'
import {IPropertyTemplate} from '../blocks/board'
import {BoardTree} from '../viewModel/boardTree' import {BoardTree} from '../viewModel/boardTree'
import ViewMenu from '../components/viewMenu' import ViewMenu from '../components/viewMenu'
import {CsvExporter} from '../csvExporter' import {CsvExporter} from '../csvExporter'
@ -25,6 +26,7 @@ type Props = {
setSearchText: (text: string) => void setSearchText: (text: string) => void
addCard: (show: boolean) => void addCard: (show: boolean) => void
withGroupBy?: boolean withGroupBy?: boolean
intl: IntlShape
} }
type State = { type State = {
@ -32,7 +34,7 @@ type State = {
showFilter: boolean showFilter: boolean
} }
export default class ViewHeader extends React.Component<Props, State> { class ViewHeader extends React.Component<Props, State> {
private searchFieldRef = React.createRef<Editable>() private searchFieldRef = React.createRef<Editable>()
shouldComponentUpdate(): boolean { shouldComponentUpdate(): boolean {
@ -103,7 +105,7 @@ export default class ViewHeader extends React.Component<Props, State> {
} }
render(): JSX.Element { render(): JSX.Element {
const {boardTree, showView, withGroupBy} = this.props const {boardTree, showView, withGroupBy, intl} = this.props
const {board, activeView} = boardTree const {board, activeView} = boardTree
const hasFilter = activeView.filter && activeView.filter.filters?.length > 0 const hasFilter = activeView.filter && activeView.filter.filters?.length > 0
@ -141,20 +143,20 @@ export default class ViewHeader extends React.Component<Props, State> {
/> />
</div> </div>
<Menu> <Menu>
{boardTree.board.cardProperties.map((option) => ( {boardTree.board.cardProperties.map((option: IPropertyTemplate) => (
<Menu.Switch <Menu.Switch
key={option.id} key={option.id}
id={option.id} id={option.id}
name={option.name} name={option.name}
isOn={activeView.visiblePropertyIds.includes(option.id)} isOn={activeView.visiblePropertyIds.includes(option.id)}
onClick={(propertyId: string) => { onClick={(propertyId: string) => {
const property = boardTree.board.cardProperties.find((o) => o.id === propertyId) const property = boardTree.board.cardProperties.find((o: IPropertyTemplate) => o.id === propertyId)
Utils.assertValue(property) Utils.assertValue(property)
Utils.log(`Toggle property ${property.name}`) Utils.log(`Toggle property ${property.name}`)
let newVisiblePropertyIds = [] let newVisiblePropertyIds = []
if (activeView.visiblePropertyIds.includes(propertyId)) { if (activeView.visiblePropertyIds.includes(propertyId)) {
newVisiblePropertyIds = activeView.visiblePropertyIds.filter((o) => o !== propertyId) newVisiblePropertyIds = activeView.visiblePropertyIds.filter((o: string) => o !== propertyId)
} else { } else {
newVisiblePropertyIds = [...activeView.visiblePropertyIds, propertyId] newVisiblePropertyIds = [...activeView.visiblePropertyIds, propertyId]
} }
@ -186,7 +188,7 @@ export default class ViewHeader extends React.Component<Props, State> {
/> />
</div> </div>
<Menu> <Menu>
{boardTree.board.cardProperties.filter((o) => o.type === 'select').map((option) => ( {boardTree.board.cardProperties.filter((o: IPropertyTemplate) => o.type === 'select').map((option: IPropertyTemplate) => (
<Menu.Text <Menu.Text
key={option.id} key={option.id}
id={option.id} id={option.id}
@ -225,7 +227,7 @@ export default class ViewHeader extends React.Component<Props, State> {
/> />
</div> </div>
<Menu> <Menu>
{boardTree.board.cardProperties.map((option) => ( {boardTree.board.cardProperties.map((option: IPropertyTemplate) => (
<Menu.Text <Menu.Text
key={option.id} key={option.id}
id={option.id} id={option.id}
@ -250,25 +252,18 @@ export default class ViewHeader extends React.Component<Props, State> {
</Menu> </Menu>
</MenuWrapper> </MenuWrapper>
{this.state.isSearching && {this.state.isSearching &&
<FormattedMessage <Editable
id='ViewHeader.search-text' ref={this.searchFieldRef}
defaultMessage='Search text' text={boardTree.getSearchText()}
> placeholderText={intl.formatMessage({id: 'ViewHeader.search-text', defaultMessage: 'Search text'})}
{(placeholder: string) => ( style={{color: '#000000'}}
<Editable onChanged={(text) => {
ref={this.searchFieldRef} this.searchChanged(text)
text={boardTree.getSearchText()} }}
placeholderText={placeholder} onKeyDown={(e) => {
style={{color: '#000000'}} this.onSearchKeyDown(e)
onChanged={(text) => { }}
this.searchChanged(text) />}
}}
onKeyDown={(e) => {
this.onSearchKeyDown(e)
}}
/>
)}
</FormattedMessage>}
{!this.state.isSearching && {!this.state.isSearching &&
<div <div
className='octo-button' className='octo-button'
@ -286,27 +281,27 @@ export default class ViewHeader extends React.Component<Props, State> {
<Menu> <Menu>
<Menu.Text <Menu.Text
id='exportCsv' id='exportCsv'
name='Export to CSV' name={intl.formatMessage({id: 'ViewHeader.export-csv', defaultMessage: 'Export to CSV'})}
onClick={() => CsvExporter.exportTableCsv(boardTree)} onClick={() => CsvExporter.exportTableCsv(boardTree)}
/> />
<Menu.Text <Menu.Text
id='exportBoardArchive' id='exportBoardArchive'
name='Export board archive' name={intl.formatMessage({id: 'ViewHeader.export-board-archive', defaultMessage: 'Export Board Archive'})}
onClick={() => Archiver.exportBoardTree(boardTree)} onClick={() => Archiver.exportBoardTree(boardTree)}
/> />
<Menu.Text <Menu.Text
id='testAdd100Cards' id='testAdd100Cards'
name='TEST: Add 100 cards' name={intl.formatMessage({id: 'ViewHeader.test-add-100-cards', defaultMessage: 'TEST: Add 100 cards'})}
onClick={() => this.testAddCards(100)} onClick={() => this.testAddCards(100)}
/> />
<Menu.Text <Menu.Text
id='testAdd1000Cards' id='testAdd1000Cards'
name='TEST: Add 1,000 cards' name={intl.formatMessage({id: 'ViewHeader.test-add-1000-cards', defaultMessage: 'TEST: Add 1,000 cards'})}
onClick={() => this.testAddCards(1000)} onClick={() => this.testAddCards(1000)}
/> />
<Menu.Text <Menu.Text
id='testRandomizeIcons' id='testRandomizeIcons'
name='TEST: Randomize icons' name={intl.formatMessage({id: 'ViewHeader.test-randomize-icons', defaultMessage: 'TEST: Randomize icons'})}
onClick={() => this.testRandomizeIcons()} onClick={() => this.testRandomizeIcons()}
/> />
</Menu> </Menu>
@ -326,3 +321,5 @@ export default class ViewHeader extends React.Component<Props, State> {
) )
} }
} }
export default injectIntl(ViewHeader)