added translation lookups for appeal forms
This commit is contained in:
@@ -551,13 +551,13 @@ const Breadcrumbs = (props) => {
|
||||
<li className="govuk-breadcrumbs__list-item">
|
||||
<Link
|
||||
href={
|
||||
router.locale != "en"
|
||||
? router.locale + "/newappeal"
|
||||
router.locale == "cy"
|
||||
? router.locale + "/apêlnewydd"
|
||||
: "/newappeal"
|
||||
}
|
||||
>
|
||||
<a className="govuk-breadcrumbs__link">
|
||||
New Appeal
|
||||
{t("common:breadcrumb-new-appeal")}
|
||||
</a>
|
||||
</Link>
|
||||
</li>
|
||||
|
||||
@@ -1,11 +1,14 @@
|
||||
import useSWR from "swr";
|
||||
import { Field, reduxForm } from "redux-form";
|
||||
import router from "next/router";
|
||||
import { useRouter } from "next/router";
|
||||
import DatePicker from "react-datepicker";
|
||||
import React, { useState } from "react";
|
||||
import "react-datepicker/dist/react-datepicker.css";
|
||||
import moment from "moment";
|
||||
import jsonpath from "jsonpath";
|
||||
import fieldLookup from "../../data/crmfieldlookuptranslations.json";
|
||||
import pickListLookup from "../../data/picklistLookups.json";
|
||||
import useTranslation from "next-translate/useTranslation";
|
||||
|
||||
const RenderTextfield = ({
|
||||
id,
|
||||
@@ -29,7 +32,7 @@ const RenderTextfield = ({
|
||||
}
|
||||
>
|
||||
<label className="govuk-label " htmlFor={id} id={id + "_label"}>
|
||||
{label}
|
||||
{fieldsTranslations(label)}
|
||||
</label>
|
||||
{touched && error && (
|
||||
<span id={id + "-error"} className="govuk-error-message">
|
||||
@@ -103,7 +106,7 @@ export function MultiLinefield(props) {
|
||||
<div className="govuk-form-group">
|
||||
<h1 className="govuk-label-wrapper">
|
||||
<label className="govuk-label" htmlFor={props.name}>
|
||||
{props.label}
|
||||
{fieldsTranslations(props.label)}
|
||||
</label>
|
||||
</h1>
|
||||
<div
|
||||
@@ -156,7 +159,7 @@ const RenderDatePicker = ({
|
||||
className="govuk-fieldset__heading"
|
||||
id={id + "_label"}
|
||||
>
|
||||
{label}
|
||||
{fieldsTranslations(label)}
|
||||
</label>
|
||||
</legend>
|
||||
{touched && error && (
|
||||
@@ -209,14 +212,14 @@ export function DateField(props) {
|
||||
<fieldset
|
||||
className="govuk-fieldset"
|
||||
role="group"
|
||||
aria-describedby="dob-hint"
|
||||
aria-describedby={name + "-hint"}
|
||||
>
|
||||
<legend className="govuk-fieldset__legend govuk-fieldset__legend--s govuk-!-font-weight-regular">
|
||||
<label className="govuk-fieldset__heading">
|
||||
{props.label}
|
||||
{fieldsTranslations(props.label)}
|
||||
</label>
|
||||
</legend>
|
||||
<div className="govuk-date-input" id="dob">
|
||||
<div className="govuk-date-input" id={name}>
|
||||
<div className="govuk-date-input__item">
|
||||
<div className="govuk-form-group">
|
||||
<label
|
||||
@@ -309,7 +312,7 @@ const RenderYesNo = ({
|
||||
className="govuk-fieldset__heading govuk-body-m"
|
||||
id={id + "_label"}
|
||||
>
|
||||
{label}
|
||||
{fieldsTranslations(label)}
|
||||
</label>
|
||||
</legend>
|
||||
{touched && error && (
|
||||
@@ -354,8 +357,10 @@ const RenderYesNo = ({
|
||||
};
|
||||
|
||||
export function YesNofield(props) {
|
||||
const router = useRouter();
|
||||
|
||||
const { name, label } = props;
|
||||
const yesNo = ["Yes", "No"];
|
||||
const yesNo = router.locale == "cy" ? ["Ydw", "Na"] : ["Yes", "No"];
|
||||
const required = (value) => (value ? undefined : "Required");
|
||||
|
||||
return (
|
||||
@@ -381,6 +386,8 @@ const RenderPickList = ({
|
||||
input,
|
||||
meta: { touched, errorStr },
|
||||
}) => {
|
||||
let { t } = useTranslation();
|
||||
|
||||
var dropdownObj = jsonpath.query(
|
||||
picklistData,
|
||||
"$..value[?(@.LogicalName=='" + datafieldname + "')]..Options"
|
||||
@@ -389,11 +396,13 @@ const RenderPickList = ({
|
||||
return (
|
||||
<div>
|
||||
<select {...input} className="govuk-select " id={name} name={name}>
|
||||
<option>Select...</option>
|
||||
<option>{t("newappeal:select-default")}</option>
|
||||
{Object.keys(dropdownObj).map((key, index) => {
|
||||
return (
|
||||
<option key={key} value={dropdownObj[key].Value}>
|
||||
{dropdownObj[key].Label.LocalizedLabels[0].Label}
|
||||
{pickListTranslations(
|
||||
dropdownObj[key].Label.LocalizedLabels[0].Label
|
||||
)}
|
||||
</option>
|
||||
);
|
||||
})}
|
||||
@@ -410,7 +419,7 @@ export function PickList(props) {
|
||||
return (
|
||||
<div className="govuk-form-group">
|
||||
<label className="govuk-label govuk-body-m" htmlFor={props.name}>
|
||||
{props.label}
|
||||
{fieldsTranslations(label)}
|
||||
</label>
|
||||
<Field
|
||||
name={props.name}
|
||||
@@ -428,7 +437,7 @@ export function NumericField(props) {
|
||||
return (
|
||||
<div className="govuk-form-group">
|
||||
<label className="govuk-label" htmlFor={props.name}>
|
||||
{props.label}
|
||||
{fieldsTranslations(props.label)}
|
||||
</label>
|
||||
<Field
|
||||
name={props.name}
|
||||
@@ -452,7 +461,7 @@ export function DecimalField(props) {
|
||||
return (
|
||||
<div className="govuk-form-group">
|
||||
<label className="govuk-label" htmlFor={props.name}>
|
||||
{props.label}
|
||||
{fieldsTranslations(props.label)}
|
||||
</label>
|
||||
<Field
|
||||
name={props.name}
|
||||
@@ -478,7 +487,7 @@ export function ReadOnlyfield(props) {
|
||||
return (
|
||||
<div className="govuk-form-group">
|
||||
<label className="govuk-label " htmlFor={props.name}>
|
||||
{props.label}
|
||||
{fieldsTranslations(props.label)}
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
@@ -492,3 +501,38 @@ export function ReadOnlyfield(props) {
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const fieldsTranslations = (label) => {
|
||||
let { t } = useTranslation();
|
||||
const router = useRouter();
|
||||
const { locale } = router;
|
||||
const { appealtypes } = router.query;
|
||||
|
||||
let formObj = jsonpath.query(fieldLookup, "$['" + appealtypes + "']");
|
||||
|
||||
let labelTrans =
|
||||
router.locale == "cy"
|
||||
? jsonpath.query(
|
||||
formObj,
|
||||
"$..[?(@.value=='" + label + "')].value_cy"
|
||||
)
|
||||
: label;
|
||||
return labelTrans;
|
||||
};
|
||||
|
||||
const pickListTranslations = (optionValue) => {
|
||||
let { t } = useTranslation();
|
||||
const router = useRouter();
|
||||
const { locale } = router;
|
||||
const { appealtypes } = router.query;
|
||||
//console.log(optionValue);
|
||||
let optionTrans =
|
||||
router.locale == "cy"
|
||||
? jsonpath.query(
|
||||
pickListLookup,
|
||||
'$..[?(@.value=="' + optionValue + '")].value_cy'
|
||||
)
|
||||
: optionValue;
|
||||
//console.log(optionTrans, optionValue);
|
||||
return optionTrans;
|
||||
};
|
||||
|
||||
@@ -20,7 +20,11 @@ export default function MakeNewAppeal() {
|
||||
{t("myportal:makenewappeal-card-paragraph-two")}
|
||||
</p>
|
||||
<div>
|
||||
<Link href="/newappeal">
|
||||
<Link
|
||||
href={
|
||||
router.locale == "cy" ? "/apelnewydd" : "/newappeal"
|
||||
}
|
||||
>
|
||||
<a className="govuk-button">
|
||||
{t("myportal:makenewappeal-card-button-label")}
|
||||
</a>
|
||||
|
||||
@@ -88,7 +88,7 @@ const TopThree = (props) => {
|
||||
: "/myportal/representation"
|
||||
: router.locale == "cy"
|
||||
? "/fymhorth/achos"
|
||||
: "/myportal//case"
|
||||
: "/myportal/case"
|
||||
}
|
||||
>
|
||||
<a
|
||||
|
||||
@@ -5,6 +5,8 @@ import xpath from "xpath";
|
||||
import jsonpath from "jsonpath";
|
||||
import BuildCheckField from "./buildCheckfield";
|
||||
import { useSelector, shallowEqual, connect } from "react-redux";
|
||||
import fieldLookup from "../../data/crmfieldlookuptranslations.json";
|
||||
|
||||
import {
|
||||
setCaseReference,
|
||||
setCurrentSection,
|
||||
@@ -51,6 +53,24 @@ let BuildCheckRow = (props) => {
|
||||
return dateString;
|
||||
}
|
||||
|
||||
const fieldsTranslations = (label) => {
|
||||
let { t } = useTranslation();
|
||||
const router = useRouter();
|
||||
const { locale } = router;
|
||||
const { appealtypes } = router.query;
|
||||
|
||||
let formObj = jsonpath.query(fieldLookup, "$['" + appealtypes + "']");
|
||||
|
||||
let labelTrans =
|
||||
router.locale == "cy"
|
||||
? jsonpath.query(
|
||||
formObj,
|
||||
"$..[?(@.value=='" + label + "')].value_cy"
|
||||
)
|
||||
: label;
|
||||
return labelTrans;
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
{Object.keys(rowXML).map((key, index) => {
|
||||
@@ -75,7 +95,7 @@ let BuildCheckRow = (props) => {
|
||||
return (
|
||||
<div className="govuk-summary-list__row" key={key}>
|
||||
<dt className="govuk-summary-list__key">
|
||||
{rows[0].value}
|
||||
{fieldsTranslations(rows[0].value)}
|
||||
</dt>
|
||||
<dd className="govuk-summary-list__value">
|
||||
{fieldtype[0].value ==
|
||||
@@ -98,10 +118,10 @@ let BuildCheckRow = (props) => {
|
||||
updateCurrentSection(whichSection);
|
||||
}}
|
||||
>
|
||||
Change
|
||||
{t("newappeal:change-link-label")}
|
||||
<span className="govuk-visually-hidden">
|
||||
{" "}
|
||||
name
|
||||
{fieldsTranslations(rows[0].value)}
|
||||
</span>
|
||||
</a>
|
||||
</dd>
|
||||
|
||||
@@ -88,7 +88,7 @@ let BuildCheckSection = (props) => {
|
||||
data-module="govuk-button"
|
||||
onClick={() => setCurrentSection(9999)}
|
||||
>
|
||||
Submit appeal
|
||||
{t("newappeal:submit-appeal-button")}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -245,7 +245,8 @@ let CreateCase = (props) => {
|
||||
);
|
||||
|
||||
router.replace(
|
||||
"/newappeal/" +
|
||||
(router.locale = "cy" ? "/apelnewydd" : "/newappeal") +
|
||||
"/" +
|
||||
appTypeCollection +
|
||||
"?lpa=" +
|
||||
values.lpaTypes +
|
||||
|
||||
Reference in New Issue
Block a user