archive/bramw_baserow
1
0
Fork 0
mirror of https://gitlab.com/bramw/baserow.git synced 2025-04-17 18:32:35 +00:00
Code Issues Projects Releases Wiki Activity

Table translations

Browse source
This commit is contained in:
Bram Wiepjes 2021-10-27 11:18:26 +00:00
parent 21dbaccafa
commit a6cd9e10e7
11 changed files with 284 additions and 66 deletions

7
web-frontend/locales/en.js
View file

@ -2,6 +2,7 @@ export default {
common: {
yes: 'yes',
no: 'no',
wrong: 'Something went wrong',
},
action: {
upload: 'Upload',
@ -144,6 +145,12 @@ export default {
field: 'field',
row: 'row',
},
importerType: {
csv: 'Import a CSV file',
paste: 'Paste table data',
xml: 'Import an XML file',
json: 'Import a JSON file',
},
exporterType: {
csv: 'Export to CSV',
},

7
web-frontend/locales/fr.js
View file

@ -2,6 +2,7 @@ export default {
common: {
yes: 'oui',
no: 'non',
wrong: 'Une erreur est survenue',
},
action: {
upload: 'Envoyer',
@ -146,6 +147,12 @@ export default {
field: 'champ',
row: 'ligne',
},
importerType: {
csv: 'Importer un fichier CSV',
paste: 'Coller des données tabulaires',
xml: 'Importer un fichier XML',
json: 'Importer un fichier JSON',
},
exporterType: {
csv: 'Exporter vers CSV',
},

31
web-frontend/modules/database/components/table/CreateTableModal.vue
View file

@ -1,11 +1,11 @@
<template>
<Modal>
<h2 class="box__title">Create new table</h2>
<h2 class="box__title">{{ $t('createTableModal.title') }}</h2>
<Error :error="error"></Error>
<TableForm ref="tableForm" @submitted="submitted">
<div class="control">
<label class="control__label">
Would you like to import existing data?
{{ $t('createTableModal.importLabel') }}
</label>
<div class="control__elements">
<ul class="choice-items">
@ -16,7 +16,7 @@
@click="importer = ''"
>
<i class="choice-items__icon fas fa-clone"></i>
Start with a new table
{{ $t('createTableModal.newTable') }}
</a>
</li>
<li v-for="importerType in importerTypes" :key="importerType.type">
@ -29,7 +29,7 @@
class="choice-items__icon fas"
:class="'fa-' + importerType.iconClass"
></i>
{{ importerType.name }}
{{ importerType.getName() }}
</a>
</li>
</ul>
@ -43,7 +43,7 @@
:class="{ 'button--loading': loading }"
:disabled="loading"
>
Add table
{{ $t('createTableModal.addButton') }}
</button>
</div>
</div>
@ -136,3 +136,24 @@ export default {
},
}
</script>
<i18n>
{
"en": {
"createTableModal": {
"title": "Create new table",
"importLabel": "Would you like to import existing data?",
"newTable": "Start with a new table",
"addButton": "Add table"
}
},
"fr": {
"createTableModal": {
"title": "Créer une nouvelle table",
"importLabel": "Souhaitez-vous importer des données existantes ?",
"newTable": "Commencer avec une table vide",
"addButton": "Ajouter la table"
}
}
}
</i18n>

81
web-frontend/modules/database/components/table/TableCSVImporter.vue
View file

@ -1,11 +1,11 @@
<template>
<div>
<div class="control">
<label class="control__label">Choose CSV file</label>
<label class="control__label">{{
$t('tableCSVImporter.chooseFileLabel')
}}</label>
<div class="control__description">
You can import an existing CSV by uploading the .CSV file with tabular
data. Most spreadsheet applications will allow you to export your
spreadsheet as a .CSV file.
{{ $t('tableCSVImporter.chooseFileDescription') }}
</div>
<div class="control__elements">
<div class="file-upload">
@ -21,19 +21,21 @@
@click.prevent="$refs.file.click($event)"
>
<i class="fas fa-cloud-upload-alt"></i>
Choose CSV file
{{ $t('tableCSVImporter.chooseFile') }}
</a>
<div class="file-upload__file">{{ filename }}</div>
</div>
<div v-if="$v.filename.$error" class="error">
This field is required.
{{ $t('error.requiredField') }}
</div>
</div>
</div>
<div v-if="filename !== ''" class="row">
<div class="col col-4">
<div class="control">
<label class="control__label">Column separator</label>
<label class="control__label">{{
$t('tableCSVImporter.columnSeparator')
}}</label>
<div class="control__elements">
<Dropdown v-model="columnSeparator" @input="reload()">
<DropdownItem name="auto detect" value="auto"></DropdownItem>
@ -42,11 +44,11 @@
<DropdownItem name="|" value="|"></DropdownItem>
<DropdownItem name="<tab>" value="\t"></DropdownItem>
<DropdownItem
name="record separator (30)"
:name="$t('tableCSVImporter.recordSeparator') + ' (30)'"
:value="String.fromCharCode(30)"
></DropdownItem>
<DropdownItem
name="unit separator (31)"
:name="$t('tableCSVImporter.unitSeparator') + ' (31)'"
:value="String.fromCharCode(31)"
></DropdownItem>
</Dropdown>
@ -55,7 +57,9 @@
</div>
<div class="col col-8">
<div class="control">
<label class="control__label">Encoding</label>
<label class="control__label">{{
$t('tableCSVImporter.encoding')
}}</label>
<div class="control__elements">
<CharsetDropdown
v-model="encoding"
@ -68,11 +72,13 @@
<div v-if="filename !== ''" class="row">
<div class="col col-6">
<div class="control">
<label class="control__label">First row is header</label>
<label class="control__label">{{
$t('tableCSVImporter.firstRowHeader')
}}</label>
<div class="control__elements">
<Checkbox v-model="values.firstRowHeader" @input="reload()"
>yes</Checkbox
>
<Checkbox v-model="values.firstRowHeader" @input="reload()">{{
$t('common.yes')
}}</Checkbox>
</div>
</div>
</div>
@ -84,7 +90,7 @@
<div class="alert__icon">
<i class="fas fa-exclamation"></i>
</div>
<div class="alert__title">Something went wrong</div>
<div class="alert__title">{{ $t('common.wrong') }}</div>
<p class="alert__content">
{{ error }}
</p>
@ -148,7 +154,9 @@ export default {
if (file.size > maxSize) {
this.filename = ''
this.values.data = ''
this.error = 'The maximum file size is 15MB.'
this.error = this.$t('tableCSVImporter.limitFileSize', {
limit: 15,
})
this.preview = {}
this.$emit('input', this.value)
} else {
@ -174,7 +182,9 @@ export default {
const count = decodedData.split(/\r\n|\r|\n/).length
if (limit !== null && count > limit) {
this.values.data = ''
this.error = `It is not possible to import more than ${limit} rows.`
this.error = this.$t('tableCSVImporter.limitError', {
limit,
})
this.preview = {}
return
}
@ -186,7 +196,7 @@ export default {
// We need at least a single entry otherwise the user has probably chosen
// a wrong file.
this.values.data = ''
this.error = 'This CSV file is empty.'
this.error = this.$i18n.$t('tableCSVImporter.emptyCSV')
this.preview = {}
} else {
// If parsed successfully and it is not empty then the initial data can be
@ -213,3 +223,38 @@ export default {
},
}
</script>
<i18n>
{
"en": {
"tableCSVImporter": {
"chooseFileLabel": "Choose CSV file",
"chooseFileDescription": "You can import an existing CSV by uploading the .CSV file with tabular data. Most spreadsheet applications will allow you to export your spreadsheet as a .CSV file.",
"chooseFile": "Choose CSV file",
"columnSeparator": "Column separator",
"recordSeparator": "record separator",
"unitSeparator": "unit separator",
"encoding": "Encoding",
"firstRowHeader": "First row is header",
"limitFileSize": "The maximum file size is {limit}MB.",
"limitError": "It is not possible to import more than {limit} rows.",
"emptyCSV": "This CSV file is empty."
}
},
"fr": {
"tableCSVImporter": {
"chooseFileLabel": "Choisissez un fichier CSV",
"chooseFileDescription": "Vous pouvez importer un CSV existant en envoyant un fichier .CSV avec des données tabulaires. La plupart des tableurs sont capables de réaliser un export au format CSV.",
"chooseFile": "Choisir un fichier CSV",
"columnSeparator": "Sép. de colonne",
"recordSeparator": "Sép. d'enregistrement",
"unitSeparator": "séparateur d'unité",
"encoding": "Encodage",
"firstRowHeader": "La première ligne est l'entête",
"limitFileSize": "La taille maximum du fichier est de {limit}Mo.",
"limitError": "Il n'est pas possible d'importer plus de {limit} lignes.",
"emptyCSV": "Ce fichier CSV est vide."
}
}
}
</i18n>

19
web-frontend/modules/database/components/table/TableForm.vue
View file

@ -3,7 +3,7 @@
<div class="control">
<label class="control__label">
<i class="fas fa-font"></i>
Name
{{ $t('tableForm.name') }}
</label>
<div class="control__elements">
<input
@ -15,7 +15,7 @@
@blur="$v.values.name.$touch()"
/>
<div v-if="$v.values.name.$error" class="error">
This field is required.
{{ $t('error.requiredField') }}
</div>
</div>
</div>
@ -48,3 +48,18 @@ export default {
},
}
</script>
<i18n>
{
"en": {
"tableForm": {
"name": "Name"
}
},
"fr": {
"tableForm": {
"name": "Nom"
}
}
}
</i18n>

25
web-frontend/modules/database/components/table/TableImporterPreview.vue
View file

@ -1,6 +1,6 @@
<template>
<div class="control mt-3">
<label class="control__label">Quick preview</label>
<label class="control__label">{{ $t('tableImporterPreview.label') }}</label>
<div class="control__elements">
<div class="table-preview__container">
<div class="table-preview">
@ -27,7 +27,11 @@
</div>
</div>
<div v-if="preview.remaining > 0" class="table-preview__more">
{{ preview.remaining }} other rows
{{
$t('tableImporterPreview.remaining', {
remaining: preview.remaining,
})
}}
</div>
</div>
</div>
@ -45,3 +49,20 @@ export default {
},
}
</script>
<i18n>
{
"en": {
"tableImporterPreview": {
"label": "Quick preview",
"remaining": "{remaining} other rows"
}
},
"fr": {
"tableImporterPreview": {
"label": "Aperçu",
"remaining": "{remaining} autres lignes"
}
}
}
</i18n>

64
web-frontend/modules/database/components/table/TableJSONImporter.vue
View file

@ -1,10 +1,11 @@
<template>
<div>
<div class="control">
<label class="control__label">Choose JSON file</label>
<label class="control__label">{{
$t('tableJSONImporter.fileLabel')
}}</label>
<div class="control__description">
You can import an existing JSON file by uploading the .json file with
tabular data, i.e.:
{{ $t('tableJSONImporter.fileDescription') }}
<pre>
[
{
@ -36,17 +37,19 @@
@click.prevent="$refs.file.click($event)"
>
<i class="fas fa-cloud-upload-alt"></i>
Choose JSON file
{{ $t('tableJSONImporter.chooseButton') }}
</a>
<div class="file-upload__file">{{ filename }}</div>
</div>
<div v-if="$v.filename.$error" class="error">
This field is required.
{{ $t('error.fieldRequired') }}
</div>
</div>
</div>
<div v-if="filename !== ''" class="control">
<label class="control__label">Encoding</label>
<label class="control__label">{{
$t('tableJSONImporter.encodingLabel')
}}</label>
<div class="control__elements">
<CharsetDropdown v-model="encoding" @input="reload()"></CharsetDropdown>
</div>
@ -55,7 +58,7 @@
<div class="alert__icon">
<i class="fas fa-exclamation"></i>
</div>
<div class="alert__title">Something went wrong</div>
<div class="alert__title">{{ $t('common.wrong') }}</div>
<p class="alert__content">
{{ error }}
</p>
@ -117,7 +120,9 @@ export default {
if (file.size > maxSize) {
this.filename = ''
this.values.data = ''
this.error = 'The maximum file size is 15MB.'
this.error = this.$t('tableJSONImporter.limitFileSize', {
limit: 15,
})
this.preview = {}
this.$emit('input', this.value)
} else {
@ -139,21 +144,23 @@ export default {
json = JSON.parse(decoded)
} catch (error) {
this.values.data = ''
this.error = `Error occured while parsing JSON: ${error.message}`
this.error = this.$t('tableJSONImporter.processingError', {
error: error.message,
})
this.preview = {}
return
}
if (json.length === 0) {
this.values.data = ''
this.error = 'This JSON file is empty.'
this.error = this.$t('tableJSONImporter.emptyError')
this.preview = {}
return
}
if (!Array.isArray(json)) {
this.values.data = ''
this.error = `The JSON file is not an array.`
this.error = this.$t('tableJSONImporter.arrayError')
this.preview = {}
return
}
@ -161,7 +168,9 @@ export default {
const limit = this.$env.INITIAL_TABLE_DATA_LIMIT
if (limit !== null && json.length > limit - 1) {
this.values.data = ''
this.error = `It is not possible to import more than ${limit} rows.`
this.error = this.error = this.$t('tableJSONImporter.limitError', {
limit,
})
this.preview = {}
return
}
@ -198,3 +207,34 @@ export default {
},
}
</script>
<i18n>
{
"en": {
"tableJSONImporter": {
"fileLabel": "Choose JSON file",
"fileDescription": "You can import an existing JSON file by uploading the .json file with tabular data, i.e.:",
"chooseButton": "Choose JSON file",
"encodingLabel": "Encoding",
"processingError": "Error occurred while parsing JSON: {error}",
"arrayError": "The JSON file is not an array.",
"emptyError": "This JSON file is empty.",
"limitFileSize": "The maximum file size is {limit}MB.",
"limitError": "It is not possible to import more than {limit} rows."
}
},
"fr": {
"tableJSONImporter": {
"fileLabel": "Choisissez un fichier JSON",
"fileDescription": "Vous pouvez importer un JSON existant en envoyant un fichier .json contenant des données tabulaires, c'est-à-dire :",
"chooseButton": "Choisir un fichier JSON",
"encodingLabel": "Encodage",
"processingError": "Une erreur est survenue lors du traitement du JSON : {error}",
"arrayError": "Ce fichier JSON n'est pas un tableau.",
"emptyError": "Ce fichier JSON est vide.",
"limitFileSize": "La taille maximum de fichier est de {limit}Mo.",
"limitError": "Il n'est pas possible d'importer plus de {limit} lignes."
}
}
}
</i18n>

47
web-frontend/modules/database/components/table/TablePasteImporter.vue
View file

@ -1,9 +1,11 @@
<template>
<div>
<div class="control">
<label class="control__label">Paste the table data</label>
<label class="control__label">{{
$t('tablePasteImporter.pasteLabel')
}}</label>
<div class="control__description">
You can copy the cells from a spreadsheet and paste them below.
{{ $t('tablePasteImporter.pasteDescription') }}
</div>
<div class="control__elements">
<textarea
@ -12,23 +14,25 @@
@input="changed($event.target.value)"
></textarea>
<div v-if="$v.content.$error" class="error">
This field is required.
{{ $t('error.fieldRequired') }}
</div>
</div>
</div>
<div class="control">
<label class="control__label">First row is header</label>
<label class="control__label">{{
$t('tablePasteImporter.firstRowHeader')
}}</label>
<div class="control__elements">
<Checkbox v-model="values.firstRowHeader" @input="reload()"
>yes</Checkbox
>
<Checkbox v-model="values.firstRowHeader" @input="reload()">{{
$t('common.yes')
}}</Checkbox>
</div>
</div>
<div v-if="error !== ''" class="alert alert--error alert--has-icon">
<div class="alert__icon">
<i class="fas fa-exclamation"></i>
</div>
<div class="alert__title">Something went wrong</div>
<div class="alert__title">{{ $t('common.wrong') }}</div>
<p class="alert__content">
{{ error }}
</p>
@ -83,11 +87,13 @@ export default {
return
}
const limit = this.$env.INITIAL_TABLE_DATA_LIMIT
const limit = this.$env.INITIAL_TABLE_DATA_LIMIT || 1
const count = this.content.split(/\r\n|\r|\n/).length
if (limit !== null && count > limit) {
this.values.data = ''
this.error = `It is not possible to import more than ${limit} rows.`
this.error = this.$t('tablePasteImporter.limitError', {
limit,
})
this.preview = {}
this.$emit('input', this.value)
return
@ -121,3 +127,24 @@ export default {
},
}
</script>
<i18n>
{
"en": {
"tablePasteImporter": {
"pasteLabel": "Paste the table data",
"pasteDescription": "You can copy the cells from a spreadsheet and paste them below.",
"firstRowHeader": "First row is header",
"limitError": "It is not possible to import more than {limit} rows."
}
},
"fr": {
"tablePasteImporter": {
"pasteLabel": "Collez les données tabulaires",
"pasteDescription": "Vous pouvez copier les lignes provenant d'un tableur et les coller ci-dessous.",
"firstRowHeader": "La première ligne est l'entête",
"limitError": "Il n'est pas possible d'importer plus de {limit} lignes."
}
}
}
</i18n>

52
web-frontend/modules/database/components/table/TableXMLImporter.vue
View file

@ -1,10 +1,11 @@
<template>
<div>
<div class="control">
<label class="control__label">Choose XML file</label>
<label class="control__label">{{
$t('tableXMLImporter.fileLabel')
}}</label>
<div class="control__description">
You can import an existing XML by uploading the .XML file with tabular
data, i.e.:
{{ $t('tableXMLImporter.fileDescription') }}
<pre>
&lt;notes&gt;
&lt;note&gt;
@ -37,12 +38,12 @@
@click.prevent="$refs.file.click($event)"
>
<i class="fas fa-cloud-upload-alt"></i>
Choose XML file
{{ $t('tableXMLImporter.chooseButton') }}
</a>
<div class="file-upload__file">{{ filename }}</div>
</div>
<div v-if="$v.filename.$error" class="error">
This field is required.
{{ $t('error.fieldRequired') }}
</div>
</div>
</div>
@ -50,7 +51,7 @@
<div class="alert__icon">
<i class="fas fa-exclamation"></i>
</div>
<div class="alert__title">Something went wrong</div>
<div class="alert__title">{{ $t('common.wrong') }}</div>
<p class="alert__content">
{{ error }}
</p>
@ -111,7 +112,9 @@ export default {
if (file.size > maxSize) {
this.filename = ''
this.values.data = ''
this.error = 'The maximum file size is 15MB.'
this.error = this.$t('tableXMLImporter.limitFileSize', {
limit: 15,
})
this.preview = {}
} else {
this.filename = file.name
@ -128,14 +131,16 @@ export default {
if (errors.length > 0) {
this.values.data = ''
this.error = `Error occured while processing XML: ${errors.join('\n')}`
this.error = this.$t('tableXMLImporter.processingError', {
errors: errors.join('\n'),
})
this.preview = {}
return
}
if (xmlData.length === 0) {
this.values.data = ''
this.error = 'This XML file is empty.'
this.error = this.$t('tableXMLImporter.emptyError')
this.preview = {}
return
}
@ -149,7 +154,7 @@ export default {
const limit = this.$env.INITIAL_TABLE_DATA_LIMIT
if (limit !== null && xmlData.length > limit) {
this.values.data = ''
this.error = `It is not possible to import more than ${limit} rows.`
this.error = this.$t('tableXMLImporter.limitError', { limit })
this.preview = {}
return
}
@ -165,3 +170,30 @@ export default {
},
}
</script>
<i18n>
{
"en": {
"tableXMLImporter": {
"fileLabel": "Choose XML file",
"fileDescription": "You can import an existing XML by uploading the .XML file with tabular data, i.e.:",
"chooseButton": "Choose XML file",
"processingError": "Error occurred while processing XML: {errors}",
"emptyError": "This XML file is empty.",
"limitFileSize": "The maximum file size is {limit}MB.",
"limitError": "It is not possible to import more than {limit} rows."
}
},
"fr": {
"tableXMLImporter": {
"fileLabel": "Choisissez un fichier XML",
"fileDescription": "Vous pouvez importer un XML existant en envoyant un fichier .XML contenant des données tabulaires, c'est-à-dire :",
"chooseButton": "Choisir un fichier XML",
"processingError": "Une erreur est survenue lors du traitement du XML : {errors}",
"emptyError": "Ce fichier XML est vide",
"limitFileSize": "La taille maximum du fichier est de {limit}Mo.",
"limitError": "Il n'est pas possible d'importer plus de {limit} lignes."
}
}
}
</i18n>

2
web-frontend/modules/database/formula/autocompleter/formulaAutocompleter.js
View file

@ -392,7 +392,7 @@ function _fieldNameToStringLiteral(doubleQuote, fieldName) {
* @param fieldCandidate The best autocomplete candidate for a field.
* @returns {{newCursorPosition: *, autocompletedFormula: string}|{newCursorPosition, autocompletedFormula}}
* Returns a formula which has had an autocompletion done if one made sense and a
* new location to move the cursor to in the formula. If no autocompletion occured
* new location to move the cursor to in the formula. If no autocompletion occurred
* then the same formula and location will be returned.
*/
export function autocompleteFormula(

15
web-frontend/modules/database/importerTypes.js
View file

@ -35,7 +35,6 @@ export class ImporterType extends Registerable {
super(...args)
this.type = this.getType()
this.iconClass = this.getIconClass()
this.name = this.getName()
if (this.type === null) {
throw new Error('The type name of an importer type must be set.')
@ -46,7 +45,7 @@ export class ImporterType extends Registerable {
return {
type: this.type,
iconClass: this.iconClass,
name: this.name,
name: this.getName(),
}
}
}
@ -61,7 +60,8 @@ export class CSVImporterType extends ImporterType {
}
getName() {
return 'Import a CSV file'
const { i18n } = this.app
return i18n.t('importerType.csv')
}
getFormComponent() {
@ -79,7 +79,8 @@ export class PasteImporterType extends ImporterType {
}
getName() {
return 'Paste table data'
const { i18n } = this.app
return i18n.t('importerType.paste')
}
getFormComponent() {
@ -97,7 +98,8 @@ export class XMLImporterType extends ImporterType {
}
getName() {
return 'Import an XML file'
const { i18n } = this.app
return i18n.t('importerType.xml')
}
getFormComponent() {
@ -115,7 +117,8 @@ export class JSONImporterType extends ImporterType {
}
getName() {
return 'Import a JSON file'
const { i18n } = this.app
return i18n.t('importerType.json')
}
getFormComponent() {