Skip to content

Commit

Permalink
improve layout
Browse files Browse the repository at this point in the history
  • Loading branch information
@BulotF
BulotF committed Sep 15, 2023
1 parent 63a8692 commit 5ba0a79
Show file tree
Hide file tree
Showing 4 changed files with 124 additions and 101 deletions.
28 changes: 26 additions & 2 deletions src/constants/dictionary.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -729,8 +729,8 @@ const dictionary = {
en: 'The component collection mode (sequence, subsequence or question) must be included in the questionnaire collection mode',
},
duplicateVariablesComment: {
fr: 'Certaines variables de votre questionnaire sont présentes plusieurs fois. Pour identifier lesquelles, cliquez sur le bouton ci-dessous :',
en: 'Some variables in your questionnaire appear more than once. To identify which ones, click on the button below:',
fr: 'Certaines variables de votre questionnaire sont présentes plusieurs fois.',
en: 'Some variables in your questionnaire appear more than once.',
},
showErrorDuplicateVariables: {
fr: 'Voir les variables en doublon',
Expand All @@ -740,6 +740,30 @@ const dictionary = {
fr: 'Variables en doublon',
en: 'Duplicate variables',
},
duplicateVariablesHeader: {
fr: 'Variables',
en: 'Variables',
},
duplicateVariablesSource: {
fr: 'Origine',
en: 'Origin',
},
currentQuestionnaire: {
fr: 'Questionnaire courant',
en: 'Current questionnaire',
},
CollectedVariableType: {
fr: 'Collecté',
en: 'Collected',
},
CalculatedVariableType: {
fr: 'Calculé',
en: 'Calculated',
},
ExternalVariableType: {
fr: 'Externe',
en: 'External',
},
failMessage: {
en: 'Error message',
fr: "Message d'erreur",
Expand Down
56 changes: 23 additions & 33 deletions src/layout/duplicate-variables/components/duplicate-variables.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,42 +40,32 @@ export function DuplicateVariables({
<h3>{Dictionary.duplicateVariables}</h3>
<div>
<div className="duplicate-variables_header">
<div>Variables</div>
<div>
<div>Questionnaire</div>
<div>Collectée</div>
<div>Calculée</div>
<div>Externe</div>
</div>
<div>{Dictionary.duplicateVariablesHeader}</div>
<div>{Dictionary.duplicateVariablesSource}</div>
</div>
<div className="duplicate-variables_body">
{Object.values(questDuplicateVariables).map(duplicated => (
<div className="duplicate-variables_row" key={duplicated.variable}>
<div>{duplicated.variable}</div>
<div className="duplicate-variables_questionnaire">
{(duplicated.isCollected ||
duplicated.isExternal ||
duplicated.isCalculated) && (
<div className="duplicate-variables_use" key="current">
<div>Questionnaire courant</div>
<div>{duplicated.isCollected ? 'X' : ' '}</div>
<div>{duplicated.isCalculated ? 'X' : ' '}</div>
<div>{duplicated.isExternal ? 'X' : ' '}</div>
</div>
)}
{Object.entries(duplicated.referenced).map(
([extKey, extValue]) => (
<div className="duplicate-variables_use" key={extKey}>
<div>{extKey}</div>
<div>{extValue.isCollected ? 'X' : ' '}</div>
<div>{extValue.isCalculated ? 'X' : ' '}</div>
<div>{extValue.isExternal ? 'X' : ' '}</div>
</div>
),
)}
{questDuplicateVariables
.sort(
(a, b) =>
a.variableName > b.variableName ||
(a.variableName === b.variableName &&
a.questionnaire > b.questionnaire) ||
(a.variableName === b.variableName &&
a.questionnaire === b.questionnaire &&
a.variableType > b.variableType),
)
.map(duplicateVariable => (
<div className="duplicate-variables_row">
<div>{duplicateVariable.variableName}</div>
<div>
{duplicateVariable.questionnaire === 'current'
? Dictionary.currentQuestionnaire
: duplicateVariable.questionnaire}
{' ('}
{Dictionary[duplicateVariable.variableType]})
</div>
</div>
</div>
))}
))}
</div>
</div>
</div>
Expand Down
104 changes: 62 additions & 42 deletions src/layout/duplicate-variables/utils/duplicate-variables-utils.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,46 +26,66 @@ export function questionnaireDuplicateVariables(
),
),
];
const duplicates = duplicateVariables.map(duplicateVariable => ({
variable: duplicateVariable,
isCollected: Object.values(collectedVariableByQuestion).some(
question =>
typeof question === 'object' &&
Object.values(question).some(
variable => variable.name === duplicateVariable,
),
),
isExternal: Object.values(activeExternalVariablesById).some(
element => element.name === duplicateVariable,
),
isCalculated: Object.values(activeCalculatedVariablesById).some(
element => element.name === duplicateVariable,
),
referenced: Object.values(externalQuestionnairesVariables)
.filter(questionnaire =>
externalQuestionnaires.includes(questionnaire.id),
)
.reduce((acc, quest) => {
const referencedQuestionnaireVariables = Object.values(
quest.variables,
).filter(variable => variable.Name === duplicateVariable);
if (referencedQuestionnaireVariables.length === 0) return acc;
const qRefName = activeComponentsById[quest.id]?.name;
return {
...acc,
[qRefName]: {
isCollected: referencedQuestionnaireVariables.some(
({ type }) => type === 'CollectedVariableType',
),
isExternal: referencedQuestionnaireVariables.some(
({ type }) => type === 'ExternalVariableType',
),
isCalculated: referencedQuestionnaireVariables.some(
({ type }) => type === 'CalculatedVariableType',
),
},
};
}, {}),
}));
return duplicates;
const currentDuplicateCollected = Object.values(
collectedVariableByQuestion,
).reduce(
(accQuest, question) => [
...accQuest,
...Object.values(question).reduce(
(accVar, variable) =>
duplicateVariables.includes(variable.name)
? [
...accVar,
{
questionnaire: 'current',
variableName: variable.name,
variableType: 'CollectedVariableType',
},
]
: accVar,
[],
),
],
[],
);
const currentDuplicateExternal = Object.values(activeExternalVariablesById)
.filter(variable => duplicateVariables.includes(variable.name))
.map(variable => ({
questionnaire: 'current',
variableName: variable.name,
variableType: 'ExternalVariableType',
}));
const currentDuplicateCalculated = Object.values(
activeCalculatedVariablesById,
)
.filter(variable => duplicateVariables.includes(variable.name))
.map(variable => ({
questionnaire: 'current',
variableName: variable.name,
variableType: 'CalculatedVariableType',
}));
const externalQuestionnaireDuplicate = Object.values(
externalQuestionnairesVariables,
)
.filter(questionnaire => externalQuestionnaires.includes(questionnaire.id))
.reduce((accQuest, quest) => {
const qRefName = activeComponentsById[quest.id]?.name;
return [
...accQuest,
...Object.values(quest.variables)
.filter(variable => duplicateVariables.includes(variable.Name))
.map(variable => ({
questionnaire: qRefName,
variableName: variable.Name,
variableType: variable.type,
})),
];
}, []);

return [
...currentDuplicateCollected,
...currentDuplicateExternal,
...currentDuplicateCalculated,
...externalQuestionnaireDuplicate,
];
}
37 changes: 13 additions & 24 deletions src/widgets/visualize-dropdown/components/visualize-dropdown.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -125,25 +125,15 @@ function VisualizeDropdown({
</button>

<ul className={classDropDownList}>
{componentId === '' && hasQuestionnaireDuplicateVariables ? (
<Link
className="btn-white"
style={{ color: 'red' }}
to={`/questionnaire/${questionnaire?.id}/duplicate-variables`}
>
{Dictionary.showErrorDuplicateVariables}
</Link>
) : (
links.map(link => {
return (
<li key={link.actionLabel}>
<a href="#" onClick={e => visualize(e, link.actionType)}>
{link.actionLabel}
</a>
</li>
);
})
)}
{links.map(link => {
return (
<li key={link.actionLabel}>
<a href="#" onClick={e => visualize(e, link.actionType)}>
{link.actionLabel}
</a>
</li>
);
})}
</ul>
<ReactModal
isOpen={
Expand All @@ -153,11 +143,10 @@ function VisualizeDropdown({
style={customModalStyles}
>
<p>{Dictionary.duplicateVariablesComment}</p>
<Link
className="btn-grey"
to={`/questionnaire/${questionnaire?.id}/duplicate-variables`}
>
{Dictionary.showErrorDuplicateVariables}
<Link to={`/questionnaire/${questionnaire?.id}/duplicate-variables`}>
<button style={{ color: 'black' }}>
{Dictionary.showErrorDuplicateVariables}
</button>
</Link>
<button onClick={handleCloseModal}>{Dictionary.close}</button>
</ReactModal>
Expand Down

0 comments on commit 5ba0a79

Please sign in to comment.