Commit 5cf8c183 authored by nickstiffler's avatar nickstiffler Committed by Yannis Barlas

feat(submission form): add figure title

parent 4626bc6f
......@@ -297,6 +297,7 @@ const defaultValues = {
},
image: {},
imageCaption: '<p></p>',
imageTitle: '',
laboratory: {
name: '',
WBId: '',
......@@ -524,6 +525,7 @@ const initialValidations = {
if (!val) return false
return stripHTML(val).length > 0
}),
imageTitle: yup.string(),
laboratory: yup.object().shape({
name: yup.string(),
// .test(
......
......@@ -174,6 +174,7 @@ const mapProps = args => {
geneExpression,
image,
imageCaption,
imageTitle,
laboratory,
methods,
reagents,
......@@ -191,6 +192,7 @@ const mapProps = args => {
geneExpression,
image,
imageCaption,
imageTitle,
laboratory,
methods,
patternDescription,
......
......@@ -198,6 +198,7 @@ const DASHBOARD_MANUSCRIPTS = gql`
url
}
imageCaption
imageTitle
laboratory {
name
}
......
......@@ -50,6 +50,7 @@ const GET_MANUSCRIPT = gql`
url
}
imageCaption
imageTitle
laboratory {
name
WBId
......
......@@ -161,6 +161,18 @@ const InitialSubmission = props => {
values={values}
/>
<TextField
data-test-id="image-title"
error={get(errors, 'imageTitle')}
handleBlur={handleBlur}
handleChange={handleChange}
label="Image title"
name="imageTitle"
placeholder="The 'Figure 1' label will be added automatically"
touched={touched}
value={get(values, 'imageTitle')}
/>
<TextEditor
bold
data-test-id="image-caption"
......
......@@ -177,6 +177,7 @@ const defaultFormValues = {
},
image: {},
imageCaption: '<p></p>',
imageTitle: '',
laboratory: {
name: '',
WBId: '',
......
......@@ -27,6 +27,7 @@ const previewBaseFragment = gql`
url
}
imageCaption
imageTitle
laboratory {
name
WBId
......@@ -348,6 +349,7 @@ const MANUSCRIPT_SUBMISSION_FORM = gql`
url
}
imageCaption
imageTitle
laboratory {
name
WBId
......
......@@ -235,6 +235,7 @@ const permissions = {
'geneExpression',
'image',
'imageCaption',
'imageTitle',
'laboratory',
'methods',
'reagents',
......
......@@ -21,6 +21,7 @@ type ManuscriptVersion {
geneExpression: GeneExpression
image: File
imageCaption: String
imageTitle: String
laboratory: WBItem
methods: String
reagents: String
......@@ -51,6 +52,7 @@ input SubmissionFormInput {
id: ID!
image: FileInput
imageCaption: String
imageTitle: String
laboratory: WBItemInput
methods: String
reagents: String
......
......@@ -138,12 +138,12 @@ const fundingEl = funding =>
name: 'funding',
})
const imageEl = (imageSrc, imageCaption) => /* html */ `
const imageEl = (imageSrc, imageCaption, imageTitle) => /* html */ `
<div data-id="image-section">
<figure>
<img data-id="image" src="${imageSrc}" />
<figcaption>
Figure 1. ${imageCaption}
${imageTitle} ${imageCaption}
</figcaption>
</figure>
</div>
......@@ -186,7 +186,7 @@ const titleEl = title => /* html */ `
const createHTML = (manuscript, imageSrc) => `
${titleEl(manuscript.title)}
${authorsEl(manuscript.authors)}
${imageEl(imageSrc, manuscript.imageCaption)}
${imageEl(imageSrc, manuscript.imageCaption, manuscript.imageTitle)}
${descriptionEl(manuscript.patternDescription)}
${methodsEl(manuscript.methods)}
${reagentsEl(manuscript.reagents)}
......@@ -233,6 +233,7 @@ const schema = {
authors,
funding: stringNotEmpty,
imageCaption: stringNotEmpty,
imageTitle: stringNotEmpty,
patternDescription: stringNotEmpty,
title: stringNotEmpty,
},
......@@ -240,6 +241,7 @@ const schema = {
'authors',
'funding',
'imageCaption',
'imageTitle',
'patternDescription',
'title',
],
......
......@@ -47,6 +47,7 @@ class ManuscriptVersion extends BaseModel {
funding: stringNullable,
image: objectNullable,
imageCaption: stringNullable,
imageTitle: stringNullable,
laboratory: objectNullable,
methods: stringNullable,
reagents: stringNullable,
......
alter table only manuscript_versions
add column image_title text
;
......@@ -24,6 +24,7 @@ const captionStyles = css`
p {
display: inline-block;
margin-left: calc(${th('gridUnit')} / 2);
padding-top: calc(${th('gridUnit')} / 2);
text-align: justify;
......@@ -31,9 +32,9 @@ const captionStyles = css`
padding-top: 0;
&::before {
content: 'Figure 1:';
content: 'Figure 1.';
font-weight: bold;
margin-right: ${th('gridUnit')};
margin-right: calc(${th('gridUnit')} / 2);
}
}
}
......@@ -120,6 +121,8 @@ const Editor = props => {
previousValue,
showDiff,
showRemoved,
figureTitle,
previousFigureTitle,
value,
variant,
} = props
......@@ -131,6 +134,19 @@ const Editor = props => {
output = diffIt(previousValue, value, { isAdded, isRemoved, showRemoved })
}
let figureTitleOutput = stripHTML(figureTitle)
if (figureTitle) {
if (showDiff) {
figureTitleOutput = diffIt(previousFigureTitle, figureTitle, {
isAdded,
isRemoved,
showRemoved,
})
}
output = `<b>${figureTitleOutput}:</b> ${output}`
}
if (label)
return (
<div>
......@@ -149,6 +165,7 @@ const Editor = props => {
return (
<StyledEditor
figureTitle=""
key={uniqueId()}
onBlur={noop}
onChange={noop}
......@@ -172,6 +189,10 @@ Editor.propTypes = {
showDiff: PropTypes.bool,
/** Show diffs, but hide removed parts */
showRemoved: PropTypes.bool,
/** Figure title */
figureTitle: PropTypes.string,
/** Old Figure title */
previousFigureTitle: PropTypes.string,
/** Text that will be rendered. Not required as the preview could be partially complete. (eg. before submission) */
value: PropTypes.string,
/** Different style setups */
......@@ -185,6 +206,8 @@ Editor.defaultProps = {
previousValue: null,
showDiff: true,
showRemoved: true,
figureTitle: null,
previousFigureTitle: null,
value: null,
variant: null,
}
......
......@@ -47,6 +47,7 @@ const Manuscript = props => {
laboratory,
image,
imageCaption,
imageTitle,
methods,
patternDescription,
reagents,
......@@ -154,6 +155,8 @@ const Manuscript = props => {
/>
<Editor
figureTitle={imageTitle}
previousFigureTitle={get(previousVersion, 'imageTitle')}
previousValue={get(previousVersion, 'imageCaption')}
showDiff={showDiff}
showRemoved={showRemoved}
......@@ -357,6 +360,7 @@ Manuscript.propTypes = {
name: PropTypes.string,
url: PropTypes.string,
}),
imageTitle: PropTypes.string,
imageCaption: PropTypes.string,
laboratory: PropTypes.shape({
name: PropTypes.string,
......@@ -492,6 +496,7 @@ Manuscript.propTypes = {
url: PropTypes.string,
}),
imageCaption: PropTypes.string,
imageTitle: PropTypes.string,
laboratory: PropTypes.shape({
name: PropTypes.string,
}),
......
......@@ -16,6 +16,13 @@ export const CaptionVariant = () => (
<Editor value={`<p>${lorem.sentences(8)}</p>`} variant="caption" />
)
export const CaptionVariantWithTitle = () => (
<Editor
figureTitle={lorem.words(8)}
value={`<p>${lorem.sentences(8)}</p>`}
variant="caption"
/>
)
export const MetadataVariant = () => (
<Editor value={`<p>${lorem.sentence()}</p>`} variant="metadata" />
)
......
......@@ -144,6 +144,7 @@ const version = {
funding: lorem.words(3),
image: imageData,
imageCaption: lorem.sentences(8),
imageTitle: lorem.sentences(1),
laboratory: {
name: lorem.words(3),
},
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment