Skip to content

Commit

Permalink
Merge branch 'add-i18n' into add-i18n-b
Browse files Browse the repository at this point in the history
  • Loading branch information
@rboixaderg
rboixaderg committed Jan 5, 2024
2 parents c68cf10 + fffa2a3 commit 6d5bd21
Show file tree
Hide file tree
Showing 51 changed files with 5,152 additions and 312 deletions.
11 changes: 11 additions & 0 deletions .babelrc
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
{
"plugins": [
[
"formatjs",
{
"idInterpolationPattern": "[sha512:contenthash:base64:6]",
"ast": true
}
]
]
}
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@
- Add filter schema to registry to create dynamic filters in items tab
- Render text value instead of key value in vocabulary select
- Create scale images in IImageAttachment behavior
- Add i18n ( english, catalan, spanish)


0.23.1
Expand Down
11 changes: 10 additions & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@
"jwt-decode": "3.1.2",
"prop-types": "15.7.2",
"react-beautiful-dnd": "13.1.1",
"react-intl": "6.5.5",
"react-useportal": "1.0.19",
"uuid": "9.0.1"
},
Expand All @@ -29,9 +30,11 @@
"devDependencies": {
"@babel/cli": "7.12.10",
"@babel/core": "7.12.10",
"@formatjs/cli": "^6.2.4",
"@testing-library/jest-dom": "5.11.6",
"@testing-library/react": "11.2.2",
"@testing-library/user-event": "12.6.0",
"babel-plugin-formatjs": "^10.5.10",
"husky": "4.3.6",
"microbundle": "0.13.0",
"prettier": "2.2.1",
Expand All @@ -47,7 +50,13 @@
"build:js": "rm -rf ./dist && microbundle --jsx React.createElement --no-compress --sourcemap",
"build:css": "rm -rf ./dist/css && mkdir ./dist/css && sass ./src/guillo-gmi/scss/styles.sass ./dist/css/style.css",
"prepublish": "yarn build",
"test": "vitest run"
"test": "vitest run",
"intl-extract": "formatjs extract 'src/**/*.js' --out-file src/guillo-gmi/locales/en.json --id-interpolation-pattern '[sha512:contenthash:base64:6]'",
"intl-compile-en": "formatjs compile src/guillo-gmi/locales/en.json --ast --out-file src/guillo-gmi/locales/compiled/en.json",
"intl-compile-ca": "formatjs compile src/guillo-gmi/locales/ca.json --ast --out-file src/guillo-gmi/locales/compiled/ca.json",
"intl-compile-es": "formatjs compile src/guillo-gmi/locales/es.json --ast --out-file src/guillo-gmi/locales/compiled/es.json",
"intl-compile": "npm run intl-compile-en && npm run intl-compile-es && npm run intl-compile-ca"

},
"eslintConfig": {
"extends": "react-app"
Expand Down
5 changes: 4 additions & 1 deletion src/guillo-gmi/components/behavior_view.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
import React from 'react'
import { useTraversal } from '../contexts'
import { get } from '../lib/utils'
import { useIntl } from 'react-intl'
import { genericMessages } from '../locales/generic_messages'

export function BehaviorsView({ context, schema }) {
const Ctx = useTraversal()
Expand Down Expand Up @@ -34,9 +36,10 @@ export function BehaviorsView({ context, schema }) {
}

export function BehaviorNotImplemented() {
const intl = useIntl()
return (
<tr>
<td colSpan="3">Not Implemented</td>
<td colSpan="3">{intl.formatMessage(genericMessages.not_implemented)}</td>
</tr>
)
}
33 changes: 23 additions & 10 deletions src/guillo-gmi/components/behaviors/iimageattachment.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,16 @@ import { Delete } from '../ui'
import { Button } from '../input/button'
import { FileUpload } from '../input/upload'
import { Confirm } from '../../components/modal'
import { useIntl } from 'react-intl'
import {
genericFileMessages,
genericMessages,
} from '../../locales/generic_messages'

const _sizesImages = ['large', 'preview', 'mini', 'thumb']

export function IImageAttachment({ properties, values }) {
const intl = useIntl()
const cfg = useConfig()
const Ctx = useTraversal()
const modifyContent = Ctx.hasPerm('guillotina.ModifyContent')
Expand All @@ -22,13 +28,12 @@ export function IImageAttachment({ properties, values }) {

const uploadFile = async (ev) => {
ev.preventDefault()

setLoading(true)
setError(undefined)
const endpoint = `${Ctx.path}@upload/image`
const req = await Ctx.client.upload(endpoint, file)
if (req.status !== 200) {
setError('Failed to upload file')
setError(intl.formatMessage(genericFileMessages.error_upload_file))
setLoading(false)
return
}
Expand All @@ -44,15 +49,19 @@ export function IImageAttachment({ properties, values }) {
}

if (hasError) {
setError(`Failed to upload file ${endpointSize}`)
setError(
intl.formatMessage(genericFileMessages.error_upload_file_size, {
size: sizesImages[i],
})
)
setLoading(false)
return
}
}

setFile(undefined)
setLoading(false)
Ctx.flash(`Image uploaded!`, 'success')
Ctx.flash(intl.formatMessage(genericFileMessages.image_uploaded), 'success')
Ctx.refresh()
}

Expand All @@ -62,12 +71,12 @@ export function IImageAttachment({ properties, values }) {
const endpoint = `${Ctx.path}@delete/image`
const req = await Ctx.client.delete(endpoint, file)
if (req.status !== 200) {
setError('Failed to delete file')
setError(intl.formatMessage(genericFileMessages.failed_delete_file))
setLoading(false)
return
}
setLoading(false)
Ctx.flash(`Image deleted!`, 'success')
Ctx.flash(intl.formatMessage(genericFileMessages.image_deleted), 'success')
Ctx.refresh()
}

Expand All @@ -81,12 +90,14 @@ export function IImageAttachment({ properties, values }) {
loading={loading}
onCancel={() => setShowConfirmToDelete(false)}
onConfirm={() => deleteFile()}
message={`Are you sure to remove the image?`}
message={intl.formatMessage(
genericFileMessages.confirm_message_delete_image
)}
/>
)}
{values['image'] && (
<tr>
<td key={1}>Image</td>
<td key={1}>{intl.formatMessage(genericMessages.image)}</td>
<td key={2}>
<div className="is-flex is-align-items-center">
<EditableField
Expand All @@ -111,7 +122,9 @@ export function IImageAttachment({ properties, values }) {
{modifyContent && (
<tr>
<td colSpan={2}>
<label className="label">Upload an image</label>
<label className="label">
{intl.formatMessage(genericFileMessages.upload_an_image)}
</label>
<form
className="is-flex is-align-items-center"
style={{ gap: '15px' }}
Expand All @@ -128,7 +141,7 @@ export function IImageAttachment({ properties, values }) {
onClick={uploadFile}
disabled={!file}
>
Upload
{intl.formatMessage(genericMessages.upload)}
</Button>
</div>
</form>
Expand Down
33 changes: 24 additions & 9 deletions src/guillo-gmi/components/behaviors/imultiattachment.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,14 @@ import { EditableField } from '../fields/editableField'
import { Delete } from '../ui'
import { Confirm } from '../../components/modal'
import { Table } from '../ui'
import { useIntl } from 'react-intl'
import {
genericFileMessages,
genericMessages,
} from '../../locales/generic_messages'

export function IMultiAttachment({ properties, values }) {
const intl = useIntl()
const [fileKey, setFileKey] = useState('')
const [file, setFile] = useState()
const [fileKeyToDelete, setFileKeyToDelete] = useState(undefined)
Expand All @@ -23,22 +29,22 @@ export function IMultiAttachment({ properties, values }) {
const uploadFile = async (ev) => {
ev.preventDefault()
if (!fileKey && !file) {
setError('Provide a file and a key name')
setError(intl.formatMessage(genericFileMessages.error_file_key_name))
return
}
setLoading(true)
setError(undefined)
const endpoint = `${Ctx.path}@upload/files/${fileKey}`
const req = await Ctx.client.upload(endpoint, file)
if (req.status !== 200) {
setError('Failed to upload file')
setError(intl.formatMessage(genericFileMessages.error_upload_file))
setLoading(false)
return
}
setFileKey('')
setFile(undefined)
setLoading(false)
Ctx.flash(`${fileKey} uploaded!`, 'success')
Ctx.flash(intl.formatMessage(genericFileMessages.file_uploaded), 'success')
Ctx.refresh()
}

Expand All @@ -48,12 +54,12 @@ export function IMultiAttachment({ properties, values }) {
const endpoint = `${Ctx.path}@delete/files/${fileKeyToDelete}`
const req = await Ctx.client.delete(endpoint, file)
if (req.status !== 200) {
setError('Failed to delete file')
setError(intl.formatMessage(genericFileMessages.failed_delete_file))
setLoading(false)
return
}
setLoading(false)
Ctx.flash(`${fileKeyToDelete} delete!`, 'success')
setError(intl.formatMessage(genericFileMessages.failed_delete_file))
Ctx.refresh()
}

Expand All @@ -67,7 +73,12 @@ export function IMultiAttachment({ properties, values }) {
loading={loading}
onCancel={() => setFileKeyToDelete(undefined)}
onConfirm={() => deleteFile(fileKeyToDelete)}
message={`Are you sure to remove: ${fileKeyToDelete}?`}
message={
(intl.formatMessage(
genericFileMessages.confirm_message_delete_file
),
{ fileKeyToDelete })
}
/>
)}

Expand Down Expand Up @@ -97,13 +108,17 @@ export function IMultiAttachment({ properties, values }) {
))}
{Object.keys(values['files']).length === 0 && (
<tr>
<td colSpan={2}>No files uploaded</td>
<td colSpan={2}>
{intl.formatMessage(genericFileMessages.no_files_uploaded)}
</td>
</tr>
)}
{modifyContent && (
<tr>
<td colSpan={2}>
<label className="label">Upload a file</label>
<label className="label">
{intl.formatMessage(genericFileMessages.upload_a_file)}
</label>
<form className="columns">
<div className="column is-4">
<Input
Expand All @@ -127,7 +142,7 @@ export function IMultiAttachment({ properties, values }) {
onClick={uploadFile}
disabled={!fileKey && !file}
>
Upload
{intl.formatMessage(genericMessages.upload)}
</Button>
</div>
</form>
Expand Down
40 changes: 30 additions & 10 deletions src/guillo-gmi/components/behaviors/imultiimageattachment.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,16 @@ import { EditableField } from '../fields/editableField'
import { useConfig } from '../../hooks/useConfig'
import { Table } from '../ui'
import { Input } from '../input/input'
import { useIntl } from 'react-intl'
import {
genericFileMessages,
genericMessages,
} from '../../locales/generic_messages'

const _sizesImages = ['large', 'preview', 'mini', 'thumb']

export function IMultiImageAttachment({ properties, values }) {
const intl = useIntl()
const cfg = useConfig()
const [fileKey, setFileKey] = useState('')
const [file, setFile] = useState(null)
Expand All @@ -27,15 +33,15 @@ export function IMultiImageAttachment({ properties, values }) {
const uploadFile = async (ev) => {
ev.preventDefault()
if (!fileKey && !file) {
setError('Provide a file and a key name')
setError(intl.formatMessage(genericFileMessages.error_file_key_name))
return
}
setLoading(true)
setError(undefined)
const endpoint = `${Ctx.path}@upload/images/${fileKey}`
const req = await Ctx.client.upload(endpoint, file)
if (req.status !== 200) {
setError('Failed to upload file')
setError(intl.formatMessage(genericFileMessages.error_upload_file))
setLoading(false)
return
}
Expand All @@ -51,7 +57,11 @@ export function IMultiImageAttachment({ properties, values }) {
}

if (hasError) {
setError(`Failed to upload file ${endpointSize}`)
setError(
intl.formatMessage(genericFileMessages.error_upload_file_size, {
size: sizesImages[i],
})
)
setLoading(false)
return
}
Expand All @@ -60,7 +70,7 @@ export function IMultiImageAttachment({ properties, values }) {
setFileKey('')
setFile(undefined)
setLoading(false)
Ctx.flash(`${fileKey} uploaded!`, 'success')
Ctx.flash(intl.formatMessage(genericFileMessages.image_uploaded), 'success')
Ctx.refresh()
}

Expand All @@ -70,12 +80,12 @@ export function IMultiImageAttachment({ properties, values }) {
const endpoint = `${Ctx.path}@delete/images/${fileKeyToDelete}`
const req = await Ctx.client.delete(endpoint, file)
if (req.status !== 200) {
setError('Failed to delete file')
setError(intl.formatMessage(genericFileMessages.failed_delete_file))
setLoading(false)
return
}
setLoading(false)
Ctx.flash(`${fileKeyToDelete} delete!`, 'success')
Ctx.flash(intl.formatMessage(genericFileMessages.image_deleted), 'success')
Ctx.refresh()
}

Expand All @@ -89,7 +99,12 @@ export function IMultiImageAttachment({ properties, values }) {
loading={loading}
onCancel={() => setFileKeyToDelete(undefined)}
onConfirm={() => deleteFile()}
message={`Are you sure to remove: ${fileKeyToDelete}?`}
message={
(intl.formatMessage(
genericFileMessages.confirm_message_delete_file
),
{ fileKeyToDelete })
}
/>
)}

Expand Down Expand Up @@ -120,13 +135,18 @@ export function IMultiImageAttachment({ properties, values }) {
))}
{Object.keys(values['images']).length === 0 && (
<tr>
<td colSpan={2}>No images uploaded</td>
<td colSpan={2}>
{intl.formatMessage(genericFileMessages.no_images_uploaded)}
</td>
</tr>
)}
{modifyContent && (
<tr>
<td colSpan={2}>
<label className="label">Upload an image</label>
<label className="label">
{' '}
{intl.formatMessage(genericFileMessages.upload_an_image)}
</label>
<form className="columns" data-test="formMultiimageAttachmentTest">
<div className="column is-4">
<Input
Expand All @@ -150,7 +170,7 @@ export function IMultiImageAttachment({ properties, values }) {
onClick={uploadFile}
disabled={!fileKey && !file}
>
Upload
{intl.formatMessage(genericMessages.upload)}
</Button>
</div>
</form>
Expand Down
Loading

0 comments on commit 6d5bd21

Please sign in to comment.