Merge pull request #64 from SocialGouv/feat-traduction-rtl

feat(traduction): adaptation rtl
SocialGouv · Feb 10, 2022 · 5d145da · 5d145da
2 parents b9e57f6 + 89ce1c5
commit 5d145da
Show file tree

Hide file tree

Showing 9 changed files with 243 additions and 121 deletions.
diff --git a/apollo-client.js b/apollo-client.js
@@ -47,6 +47,20 @@ export const QUESTIONNAIRE_EPDS_TRADUCTION = gql`
   }
 `
 
+export const LABELS_EPDS_TRADUCTION = gql`
+  query LabelsEpdsTraductions($locale: String) {
+    labelsEpdsTraductions(where: { langue: { identifiant: $locale } }) {
+      langue {
+        identifiant
+      }
+      labels {
+        label
+        texte
+      }
+    }
+  }
+`
+
 export const GET_LOCALES = gql`
   query Locales {
     locales {
@@ -57,6 +71,7 @@ export const GET_LOCALES = gql`
       drapeau {
         url
       }
+      sens_lecture_droite_vers_gauche
     }
   }
 `

diff --git a/package.json b/package.json
@@ -21,7 +21,7 @@
     "next": "^11.1.3",
     "next-i18next": "^10.0.0",
     "react": "17.0.2",
-    "react-bootstrap": "^2.0.0",
+    "react-bootstrap": "^1.6.4",
     "react-bootstrap-icons": "^1.5.0",
     "react-dom": "17.0.2",
     "react-leaflet": "^3.2.2",

diff --git a/pages/questionnaire-epds.js b/pages/questionnaire-epds.js
@@ -17,6 +17,7 @@ import { Check2Circle } from "react-bootstrap-icons"
 import {
   client,
   EPDS_ADD_RESPONSE,
+  LABELS_EPDS_TRADUCTION,
   QUESTIONNAIRE_EPDS,
   QUESTIONNAIRE_EPDS_TRADUCTION,
 } from "../apollo-client"
@@ -35,6 +36,7 @@ import {
   STORAGE_RESULTS_BOARD_TRANSLATED,
 } from "../src/constants/constants"
 import { ChooseEpdsLocale } from "../src/modal/ChooseEpdsLocale"
+import { convertArrayLabelsToObject } from "../src/constants/utils"
 
 export default function QuestionnaireEPDS({ questionsEpds, resultsBoard }) {
   const { t } = useTranslation("questionnaire-epds")
@@ -48,11 +50,14 @@ export default function QuestionnaireEPDS({ questionsEpds, resultsBoard }) {
 
   const [showSelectLocal, setShowSelectLocal] = React.useState(true)
   const [localeSelected, setLocaleSelected] = React.useState()
+  const [isFR, setFR] = React.useState(true)
+  const [isRTL, setRTL] = React.useState(false)
+
   const [updatedQuestionsEpds, setUpdatedQuestionsEpds] =
     React.useState(questionsEpds)
   const [resultsBoardTranslated, setResultsBoardTranslated] =
     React.useState(resultsBoard)
-  const [isFR, setFR] = React.useState(true)
+  const [labelsTranslated, setLabelsTranslated] = React.useState()
 
   checkQuestionsOrder(questionsEpds)
 
@@ -88,6 +93,19 @@ export default function QuestionnaireEPDS({ questionsEpds, resultsBoard }) {
     },
   })
 
+  const [getLabelsTranslationsQuery] = useLazyQuery(LABELS_EPDS_TRADUCTION, {
+    client: client,
+    onCompleted: (data) => {
+      const labelsData = data.labelsEpdsTraductions[0]?.labels
+
+      const labels = convertArrayLabelsToObject(labelsData)
+      setLabelsTranslated(labels)
+    },
+    onError: (err) => {
+      console.warn(err)
+    },
+  })
+
   const nextPage = async (event) => {
     localStorage.setItem(
       STORAGE_TOTAL_SCORE,
@@ -152,10 +170,14 @@ export default function QuestionnaireEPDS({ questionsEpds, resultsBoard }) {
           setFR(true)
         } else {
           setFR(false)
+          await getLabelsTranslationsQuery({
+            variables: { locale: localeSelected.identifiant },
+          })
           await getTranslationsQuery({
             variables: { locale: localeSelected.identifiant },
           })
         }
+        setRTL(localeSelected?.sens_lecture_droite_vers_gauche)
       }
     }
 
@@ -187,17 +209,27 @@ export default function QuestionnaireEPDS({ questionsEpds, resultsBoard }) {
         className="page-content questionnaire-content"
         style={{ alignItems: "center" }}
       >
-        <div className="questionnaire">
-          {t("introduction1")}
-          <span className="font-weight-bold">{t("introduction2")}</span>
-          {t("introduction3")}
+        <div
+          className={`questionnaire ${isRTL ? "font-size-rtl" : ""}`}
+          dir={isRTL ? "rtl" : "ltr"}
+        >
+          {labelsTranslated?.consigne ? (
+            labelsTranslated?.consigne
+          ) : (
+            <>
+              {t("introduction1")}
+              <span className="font-weight-bold">{t("introduction2")}</span>
+              {t("introduction3")}
+            </>
+          )}
         </div>
 
         <QuestionsCarousel
           questions={updatedQuestionsEpds}
           refForOnClick={ref}
           resultsBoard={isFR ? resultsBoard : resultsBoardTranslated}
           setEnabledNextButton={setEnabledNextButton}
+          locale={localeSelected}
         />
         <PreviousAndNextButton
           translation={t}
@@ -236,6 +268,7 @@ const QuestionsCarousel = ({
   refForOnClick,
   resultsBoard,
   setEnabledNextButton,
+  locale,
 }) => (
   <Carousel
     interval={null}
@@ -252,6 +285,7 @@ const QuestionsCarousel = ({
             question={question}
             resultsBoard={resultsBoard}
             setEnabledNextButton={setEnabledNextButton}
+            isRTL={locale?.sens_lecture_droite_vers_gauche}
           />
         </Carousel.Item>
       )
@@ -269,7 +303,7 @@ const buildResultsBoardInFrench = async (
   results,
   localeSelected
 ) => {
-  /* Lorsque l'on utilisera uniiquement la collection Question_EPDS_Traduction, 
+  /* Lorsque l'on utilisera uniquement la collection Question_EPDS_Traduction, 
   il faudra adapter la fonction de récupération du questionnaire en français */
 
   if (
@@ -466,6 +500,7 @@ const ComprendreTestStyle = () => (
     .questionnaire {
       margin-top: 20px;
       font-style: italic;
+      text-align: start;
     }
 
     .questionnaire-buttons {

diff --git a/src/components/EpdsQuestion.js b/src/components/EpdsQuestion.js
@@ -1,12 +1,19 @@
 import React from "react"
 
-export function EpdsQuestion({ question, resultsBoard, setEnabledNextButton }) {
+export function EpdsQuestion({
+  question,
+  resultsBoard,
+  setEnabledNextButton,
+  isRTL = false,
+}) {
   const prefix = "q" + question.ordre
   const radio1Id = prefix + "-radio1"
   const radio2Id = prefix + "-radio2"
   const radio3Id = prefix + "-radio3"
   const radio4Id = prefix + "-radio4"
 
+  const readingDirection = isRTL ? "rtl" : "ltr"
+
   const arrayResponses = [
     { libelle: question.reponse_1_libelle, points: question.reponse_1_points },
     { libelle: question.reponse_2_libelle, points: question.reponse_2_points },
@@ -28,41 +35,58 @@ export function EpdsQuestion({ question, resultsBoard, setEnabledNextButton }) {
   }
 
   return (
-    <div style={{ marginTop: 50 }}>
+    <div
+      style={{ marginTop: 50, textAlign: isRTL ? "right" : "left" }}
+      dir={readingDirection}
+    >
       <form className="fr-form-group">
         <fieldset className="fr-fieldset">
           <legend
-            className="fr-fieldset__legend fr-text--regular epds-question"
+            className={`fr-fieldset__legend fr-text--regular epds-question ${
+              isRTL ? "font-size-rtl" : ""
+            }`}
             id="radio-legend"
           >
             {question.libelle}
           </legend>
           <div
-            className="fr-fieldset__content"
+            className={`fr-fieldset__content ${isRTL ? "input-revert" : ""}`}
             style={{ marginTop: "10px" }}
             onChange={handleChange}
           >
             <div className="fr-radio-group">
               <input type="radio" id={radio1Id} name="radio" />
-              <label className="fr-label" htmlFor={radio1Id}>
+              <label
+                className={`fr-label ${isRTL ? "font-size-rtl" : ""}`}
+                htmlFor={radio1Id}
+              >
                 {question.reponse_1_libelle}
               </label>
             </div>
             <div className="fr-radio-group">
               <input type="radio" id={radio2Id} name="radio" />
-              <label className="fr-label" htmlFor={radio2Id}>
+              <label
+                className={`fr-label ${isRTL ? "font-size-rtl" : ""}`}
+                htmlFor={radio2Id}
+              >
                 {question.reponse_2_libelle}
               </label>
             </div>
             <div className="fr-radio-group">
               <input type="radio" id={radio3Id} name="radio" />
-              <label className="fr-label" htmlFor={radio3Id}>
+              <label
+                className={`fr-label ${isRTL ? "font-size-rtl" : ""}`}
+                htmlFor={radio3Id}
+              >
                 {question.reponse_3_libelle}
               </label>
             </div>
             <div className="fr-radio-group">
               <input type="radio" id={radio4Id} name="radio" />
-              <label className="fr-label" htmlFor={radio4Id}>
+              <label
+                className={`fr-label ${isRTL ? "font-size-rtl" : ""}`}
+                htmlFor={radio4Id}
+              >
                 {question.reponse_4_libelle}
               </label>
             </div>
@@ -82,5 +106,10 @@ const EpdsStyle = () => (
       font-size: 16px;
       line-height: 24px;
     }
+
+    .input-revert .fr-radio-group input[type="radio"] + label:before {
+      position: revert !important;
+      margin: 0 0 0 20px !important;
+    }
   `}</style>
 )
diff --git a/src/components/ResultsTab.js b/src/components/ResultsTab.js
@@ -3,10 +3,10 @@ import { LOCAL_IDENTIFIANT_FRANCAIS } from "../constants/constants"
 
 /**
  * @param {*} translation
- * @param {*} resultsId : ID des résulats
- * @param {*} locale : Locale FR, DE ...
- * @param {*} resultsBoard : Tableau des résulats en FR
- * @param {*} resultsBoardTranslated : Tableau des résulats si différent de FR
+ * @param {String} resultsId : ID des résulats
+ * @param {Object} locale : Locale FR, DE ...
+ * @param {Array} resultsBoard : Tableau des résulats en FR
+ * @param {Array} resultsBoardTranslated : Tableau des résulats si différent de FR
  * @returns Un tableau contenant les questions et réponses du questionnaire EPDS en FR et dans l'autre langue (si pas effectué en FR)
  */
 export function ResultsTab({
@@ -16,34 +16,32 @@ export function ResultsTab({
   resultsBoard,
   resultsBoardTranslated,
 }) {
+  const isRTL = locale?.sens_lecture_droite_vers_gauche
+
   const BuildDetailScore = ({ data, dataTranslated }) => (
-    <tr key={data.question}>
-      <td>
-        {dataTranslated &&
-        locale &&
-        locale.identifiant != LOCAL_IDENTIFIANT_FRANCAIS ? (
-          <div>
-            {dataTranslated.question}
-            <br />
-            -----
-          </div>
-        ) : null}
-        {data.question}
-      </td>
-      <td>
-        {dataTranslated &&
-        locale &&
-        locale.identifiant != LOCAL_IDENTIFIANT_FRANCAIS ? (
-          <div>
-            {dataTranslated.response}
-            <br />
-            -----
-          </div>
-        ) : null}
-        {data.response}
-      </td>
-      <td>{data.points}</td>
-    </tr>
+    <>
+      {dataTranslated &&
+      locale &&
+      locale.identifiant != LOCAL_IDENTIFIANT_FRANCAIS ? (
+        <>
+          <tr className={`tab-no-border ${isRTL ? "tab-rtl" : ""}`}>
+            <td>{dataTranslated.question}</td>
+            <td>{dataTranslated.response}</td>
+            <th rowSpan="2">{data.points}</th>
+          </tr>
+          <tr>
+            <td>{data.question}</td>
+            <td>{data.response}</td>
+          </tr>
+        </>
+      ) : (
+        <tr>
+          <td>{data.question}</td>
+          <td>{data.response}</td>
+          <td rowSpan="1">{data.points}</td>
+        </tr>
+      )}
+    </>
   )
 
   return (
@@ -81,6 +79,26 @@ export function ResultsTab({
           </tr>
         </tfoot>
       </table>
+
+      <ResultTabStyle />
     </div>
   )
 }
+
+const ResultTabStyle = () => (
+  <style jsx="true">{`
+    .tab-rtl td {
+      direction: rtl;
+      text-align: start;
+      font-size: 20px;
+    }
+
+    .tab-no-border td {
+      border-style: dashed !important;
+    }
+    .tab-no-border th {
+      font-weight: normal;
+      text-align: center;
+    }
+  `}</style>
+)
diff --git a/src/constants/utils.js b/src/constants/utils.js
@@ -5,3 +5,9 @@ export function getInLocalStorage(key) {
 export function jsonParse(data) {
   if (typeof data !== "undefined") return JSON.parse(data)
 }
+
+export function convertArrayLabelsToObject(data) {
+  const labels = {}
+  data?.forEach((item) => (labels[item.label.toLowerCase()] = item.texte))
+  return labels
+}
diff --git a/src/main.scss b/src/main.scss
@@ -115,6 +115,10 @@ td {
   }
 }
 
+.font-size-rtl {
+  font-size: 24px !important;
+}
+
 @media screen and (max-width: 450px){
   .page-content {
     margin-left: 0;