Updates in Internationalisation (#1708)

AOT-Technologies · Nov 13, 2023 · 7a59690 · 7a59690
1 parent ad54f3f
commit 7a59690
Show file tree

Hide file tree

Showing 6 changed files with 25 additions and 21 deletions.
diff --git a/forms-flow-web/src/components/Application/ApplicationFilter.js b/forms-flow-web/src/components/Application/ApplicationFilter.js
@@ -3,6 +3,7 @@ import { Col, Row } from "react-bootstrap";
 import DateRangePicker from "@wojtekmaj/react-daterange-picker";
 import { useDispatch, useSelector } from "react-redux";
 import { getAllApplications } from "../../apiManager/services/applicationServices";
+import { useTranslation } from "react-i18next";
 
 const ApplicationFilter = ({ setDisplayFilter,filterParams,setFilterParams }) => {
   const dispatch = useDispatch();
@@ -13,6 +14,7 @@ const ApplicationFilter = ({ setDisplayFilter,filterParams,setFilterParams }) =>
   const [lastModified,setLastModified] = useState(filterParams.modified || null);
   const pageNo = useSelector((state) => state.applications?.activePage);
   const limit = useSelector((state) => state.applications?.countPerPage);
+  const { t } = useTranslation();
   const handleClick = (e) => {
     if (createSearchNode?.current?.contains(e.target)) {
       return;
@@ -85,7 +87,7 @@ const ApplicationFilter = ({ setDisplayFilter,filterParams,setFilterParams }) =>
       <div className="m-4 px-2">
         <Row className="mt-2">
           <Col>
-            <label>Submission Id</label>
+          <label>{t("Submission Id")}</label>
             <input
               className="form-control"
               placeholder=""
@@ -94,7 +96,7 @@ const ApplicationFilter = ({ setDisplayFilter,filterParams,setFilterParams }) =>
             />
           </Col>
           <Col>
-            <label>Form Title</label>
+          <label>{t("Form Title")}</label>
             <input
               className="form-control"
               placeholder=""
@@ -108,7 +110,7 @@ const ApplicationFilter = ({ setDisplayFilter,filterParams,setFilterParams }) =>
       <div className="m-4 px-2">
         <Row className="mt-2">
           <Col>
-            <label>Submission Status</label>
+          <label>{t("Submission Status")}</label>
             <input
               className="form-control"
               placeholder=""
@@ -117,7 +119,7 @@ const ApplicationFilter = ({ setDisplayFilter,filterParams,setFilterParams }) =>
             />
           </Col>
           <Col className="mr-2" >
-          <label>Modified Date</label>
+          <label>{t("Modified Date")}</label>
             <DateRangePicker
               onChange={(selectedRange) => {
                 onSetDateRange(selectedRange);
@@ -142,21 +144,21 @@ const ApplicationFilter = ({ setDisplayFilter,filterParams,setFilterParams }) =>
             className="text-danger small "
             onClick={() => clearAllFilters()}
           >
-            Clear All Filters
+             {t("Clear All Filters")}
           </span>
         </Col>
         <Col className="text-right">
           <button
             className="btn btn-light mr-1 "
             onClick={() => setDisplayFilter(false)}
           >
-            Cancel
+           {t("Cancel")}
           </button>
           <button
             className="btn btn-dark"
               onClick={() => applyFilters()}
           >
-            Show results
+            {t("Show results")}
           </button>
         </Col>
       </Row>

diff --git a/forms-flow-web/src/components/Application/ApplicationTable.js b/forms-flow-web/src/components/Application/ApplicationTable.js
@@ -203,7 +203,7 @@ const ApplicationTable = () => {
           <span className="ml-2">
             {t("Showing")} {(limit * pageNo ) - (limit - 1)} {t("to")}{" "}
             {limit * pageNo > totalForms ? totalForms : limit * pageNo} {t("of")}{" "}
-            {totalForms} {t("Results")}
+            {totalForms} {t("results")}
           </span>
         </div>
         <div className="d-flex align-items-center">

diff --git a/forms-flow-web/src/components/Dashboard/Dashboard.js b/forms-flow-web/src/components/Dashboard/Dashboard.js
@@ -365,7 +365,7 @@ const Dashboard = React.memo(() => {
                   {numberofSubmissionListTo > totalItems
                     ? totalItems
                     : numberofSubmissionListTo}{" "}
-                  {t("of")} {totalItems}
+                  {t("of")} {totalItems} {t("results")}
                 </span>
           </div>
 

diff --git a/forms-flow-web/src/components/Draft/DraftFilter.js b/forms-flow-web/src/components/Draft/DraftFilter.js
@@ -3,6 +3,7 @@ import { Col, Row } from "react-bootstrap";
 import DateRangePicker from "@wojtekmaj/react-daterange-picker";
 import { useDispatch, useSelector } from "react-redux";
 import { fetchDrafts } from "../../apiManager/services/draftService";
+import { useTranslation } from "react-i18next";
 
 const DraftFilter = ({ setDisplayFilter, filterParams, setFilterParams }) => {
   const dispatch = useDispatch();
@@ -14,6 +15,7 @@ const DraftFilter = ({ setDisplayFilter, filterParams, setFilterParams }) => {
   );
   const pageNo = useSelector((state) => state.draft?.activePage);
   const limit = useSelector((state) => state.draft?.countPerPage);
+  const { t } = useTranslation();
   const handleClick = (e) => {
     if (createSearchNode?.current?.contains(e.target)) {
       return;
@@ -83,7 +85,7 @@ const DraftFilter = ({ setDisplayFilter, filterParams, setFilterParams }) => {
       <div className="m-4 px-2">
         <Row className="mt-2">
           <Col>
-            <label>Draft Id</label>
+          <label>{t("Draft Id")}</label>
             <input
               className="form-control"
               placeholder=""
@@ -92,7 +94,7 @@ const DraftFilter = ({ setDisplayFilter, filterParams, setFilterParams }) => {
             />
           </Col>
           <Col>
-            <label>Draft Name</label>
+          <label>{t("Draft Name")}</label>
             <input
               className="form-control"
               placeholder=""
@@ -105,7 +107,7 @@ const DraftFilter = ({ setDisplayFilter, filterParams, setFilterParams }) => {
       <hr className="m-0 w-100" />
       <div className="ml-3 d-flex flex-column col-4">
 
-          <label>Modified Date</label>
+      <label>{t("Modified Date")}</label>
             <DateRangePicker
               onChange={(selectedRange) => {
                 onSetDateRange(selectedRange);
@@ -129,18 +131,18 @@ const DraftFilter = ({ setDisplayFilter, filterParams, setFilterParams }) => {
             className="text-danger small "
             onClick={() => clearAllFilters()}
           >
-            Clear All Filters
+           {t("Clear All Filters")}
           </span>
         </Col>
         <Col className="text-right">
           <button
             className="btn btn-light mr-1 "
             onClick={() => setDisplayFilter(false)}
           >
-            Cancel
+            {t("Cancel")}
           </button>
           <button className="btn btn-dark" onClick={() => applyFilters()}>
-            Show results
+          {t("Show results")}
           </button>
         </Col>
       </Row>

diff --git a/forms-flow-web/src/components/Draft/DraftTable.js b/forms-flow-web/src/components/Draft/DraftTable.js
@@ -171,9 +171,9 @@ const DraftTable = () => {
             </Dropdown.Menu>
         </Dropdown>
           <span className="ml-2">
-            {t("Showing")} {(limit * pageNo) - (limit - 1)} {t("to")}{" "}
+            {t("Showing")} {(limit * pageNo ) - (limit - 1)} {t("to")}{" "}
             {limit * pageNo > totalForms ? totalForms : limit * pageNo} {t("of")}{" "}
-            {totalForms} {t("Results")}
+            {totalForms} {t("results")}
           </span>
         </div>
 

diff --git a/forms-flow-web/src/components/Form/constants/FormTable.js b/forms-flow-web/src/components/Form/constants/FormTable.js
@@ -298,13 +298,13 @@ function FormTable() {
                       )}
                       <td>{HelperServices?.getLocaldate(e.created)}</td>
                       <td>{_.capitalize(e.formType)}</td>
-                      <td>{e.anonymous ? "Anonymous" : "Private"}</td>
+                      <td>{e.anonymous ? t("Anonymous") : t("Private")}</td>
                       <td>
                         {" "}
                         <button 
                           className={`btn ${e.status === 'active' ? 'published-forms-label' : 'unpublished-forms-label'}`}
                         >
-                          {e.status === 'active' ? "Published" : "Unpublished"}
+                          {e.status === 'active' ? t("Published") : t("Unpublished")}
                         </button>
                       </td>
 
@@ -323,7 +323,7 @@ function FormTable() {
                           <Dropdown className="shadow position-absolute bg-white" style={{zIndex:99}}>
                             <Dropdown.Item onClick={() => deleteForms(e)}>
                               <i className="fa fa-trash mr-2 text-danger" />
-                              Delete
+                              {t("Delete")}
                             </Dropdown.Item>
                            {(userRoles.includes(STAFF_REVIEWER) || userRoles.includes(CLIENT))?(
                              <Dropdown.Item onClick={() => {console.log(e);submitNewForm(e?._id)}}>
@@ -374,7 +374,7 @@ function FormTable() {
             <span className="ml-2">
               {t("Showing")} {limit * pageNo - (limit - 1)} {t("to")}{" "}
               {limit * pageNo > totalForms ? totalForms : limit * pageNo}{" "}
-              {t("of")} {totalForms} {t("Results")}
+              {t("of")} {totalForms} {t("results")}
             </span>
           </div>
           <div className="d-flex align-items-center">