robbond/pedwfrontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

portal ui enhancements

Browse Source
This commit is contained in:
robbond
2025-02-05 11:16:48 +00:00
parent 37b2e1c734
commit 60f04787b6
7 changed files with 187 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/myportal/awaitingsubmissionfromblob.js
+52 -48
View File
@@ -159,15 +159,47 @@ const AwaitingSubmissionFromBlob = (props) => {
} }
</Link> </Link>
)} )}
{!showTopThreeArr[key].hasOwnProperty(
"appealComplete"
) && (
<div className="deleteCase">
<button
title={t(
"case:do-you-want-to-delete-case-label"
)}
className=" cardModuleRemoveCase govuk-link govuk-link--no-underline govuk-link--inverse "
onClick={() => {
confirm(
t(
"case:do-you-want-to-delete-case-label"
) +
showTopThreeArr[key]
.ticketnumber +
"?\n" +
t(
"case:do-you-want-to-delete-case-disclaimer-label"
)
) &&
deleteCaseItem(
props.containerID,
showTopThreeArr[key]
.ticketnumber
);
}}
>
&mdash;
</button>
</div>
)}
</div> </div>
<div> <div className="cardModuleReference">
<b>{t("myportal:lpa-reference-label")}:</b>{" "} <b>{t("myportal:lpa-reference-label")}:</b>{" "}
{ {
showTopThreeArr[key] showTopThreeArr[key]
.pinswg_lpaapplicationreference .pinswg_lpaapplicationreference
} }
</div> </div>
<div> <div className="cardModuleReference">
<b>{t("myportal:appeal-type-label")}:</b>{" "} <b>{t("myportal:appeal-type-label")}:</b>{" "}
{router.locale == "cy" {router.locale == "cy"
? jsonpath( ? jsonpath(
@@ -184,7 +216,7 @@ const AwaitingSubmissionFromBlob = (props) => {
.pinswg_appealcasetype .pinswg_appealcasetype
).value || ""} ).value || ""}
</div> </div>
<div className="carModuleAddress"> <div className="cardModuleReference">
<b>{t("myportal:case-address")}:</b>{" "} <b>{t("myportal:case-address")}:</b>{" "}
{_.isEmpty(showTopThreeArr) {_.isEmpty(showTopThreeArr)
? t("myportal:case-address-not-entered") ? t("myportal:case-address-not-entered")
@@ -218,7 +250,7 @@ const AwaitingSubmissionFromBlob = (props) => {
</div> </div>
{showTopThreeArr[key].pinswg_appellantagent != {showTopThreeArr[key].pinswg_appellantagent !=
null && ( null && (
<div> <div className="cardModuleReference">
{showTopThreeArr[key] {showTopThreeArr[key]
.pinswg_appellantagent != .pinswg_appellantagent !=
846040000 && ( 846040000 && (
@@ -244,7 +276,7 @@ const AwaitingSubmissionFromBlob = (props) => {
)} )}
{showTopThreeArr[key].pinswg_appellantagent != {showTopThreeArr[key].pinswg_appellantagent !=
846040000 && ( 846040000 && (
<div> <div className="cardModuleReference">
<b> <b>
{t("myportal:on-behalf-of-label")}:{" "} {t("myportal:on-behalf-of-label")}:{" "}
</b> </b>
@@ -255,17 +287,21 @@ const AwaitingSubmissionFromBlob = (props) => {
.pinswg_appellantlastname} .pinswg_appellantlastname}
</div> </div>
)} )}
{router.locale == "cy" <div className="cardModuleReference">
? jsonpath( <b>LPA:</b>
'$..[?(@.value=="' + {router.locale == "cy"
showTopThreeArr[key][ ? jsonpath(
"pinswg_lpaname" '$..[?(@.value=="' +
] + showTopThreeArr[key][
'")].value_cy', "pinswg_lpaname"
transLookup ] +
) '")].value_cy',
: showTopThreeArr[key]["pinswg_lpaname"] || transLookup
""} )
: showTopThreeArr[key][
"pinswg_lpaname"
] || ""}
</div>
<div className="cardModuleReference"> <div className="cardModuleReference">
<b>{t("myportal:date-raised")}:</b> <b>{t("myportal:date-raised")}:</b>
{" "} {" "}
@@ -285,38 +321,6 @@ const AwaitingSubmissionFromBlob = (props) => {
</div> </div>
)} )}
</div> </div>
{!showTopThreeArr[key].hasOwnProperty(
"appealComplete"
) && (
<div className="">
<button
title={t(
"case:do-you-want-to-delete-case-label"
)}
className=" cardModuleRemoveCase govuk-link govuk-link--no-underline govuk-link--inverse "
onClick={() => {
confirm(
t(
"case:do-you-want-to-delete-case-label"
) +
showTopThreeArr[key]
.ticketnumber +
"?\n" +
t(
"case:do-you-want-to-delete-case-disclaimer-label"
)
) &&
deleteCaseItem(
props.containerID,
showTopThreeArr[key]
.ticketnumber
);
}}
>
&mdash;
</button>
</div>
)}
</div> </div>
); );
})} })}
components/myportal/topthree.js
+77 -18
View File
@@ -266,8 +266,64 @@ const TopThree = (props) => {
]}{" "} ]}{" "}
</Link> </Link>
)} )}
{topThreeType == "watchedCases" && !props.myReps && (
<div className="deleteCase">
<button
title={t(
"case:you-have-stopped-watching-label"
)}
className=" cardModuleRemoveCase govuk-link govuk-link--no-underline govuk-link--inverse "
onClick={() => {
confirm(
t(
"case:you-have-stopped-watching-label"
) +
showTopThreeArr[key][
"_pinswg_watchedcase_value@OData.Community.Display.V1.FormattedValue"
]
) &&
deleteItem(
showTopThreeArr[key]
.pinswg_watchlistid,
"watchedCases"
);
}}
>
&mdash;
</button>
</div>
)}
{topThreeType == "awaitingSubmission" && (
<div className="deleteCase">
<button
title={t(
"case:do-you-want-to-delete-case-label"
)}
className=" cardModuleRemoveCase govuk-link govuk-link--no-underline govuk-link--inverse "
onClick={() => {
confirm(
t(
"case:do-you-want-to-delete-case-label"
) +
showTopThreeArr[key]
.ticketnumber +
"?\n" +
t(
"case:do-you-want-to-delete-case-disclaimer-label"
)
) &&
deleteItem(
showTopThreeArr[key].incidentid,
"awaitingSubmission"
);
}}
>
&mdash;
</button>
</div>
)}
</div> </div>
<div> <div className="cardModuleReference">
<b>{t("myportal:appeal-type-label")}:</b>{" "} <b>{t("myportal:appeal-type-label")}:</b>{" "}
{router.locale == "cy" {router.locale == "cy"
? jsonpath( ? jsonpath(
@@ -284,7 +340,7 @@ const TopThree = (props) => {
</div> </div>
{/* )} */} {/* )} */}
{/* {topThreeType != "awaitingSubmission" ? ( */} {/* {topThreeType != "awaitingSubmission" ? ( */}
<div className="carModuleAddress"> <div className="cardModuleReference">
<b>{t("myportal:case-address")}:</b>{" "} <b>{t("myportal:case-address")}:</b>{" "}
{_.isEmpty(showTopThreeArr[key]) {_.isEmpty(showTopThreeArr[key])
? t("myportal:case-address-not-entered") ? t("myportal:case-address-not-entered")
@@ -311,7 +367,7 @@ const TopThree = (props) => {
: "")} : "")}
</div> </div>
{showTopThreeArr[key].pinswg_appellantagent != null && ( {showTopThreeArr[key].pinswg_appellantagent != null && (
<div> <div className="cardModuleReference">
{showTopThreeArr[key].pinswg_appellantagent != {showTopThreeArr[key].pinswg_appellantagent !=
846040000 && ( 846040000 && (
<b>{t("myportal:raised-by-label")}: </b> <b>{t("myportal:raised-by-label")}: </b>
@@ -330,25 +386,28 @@ const TopThree = (props) => {
</div> </div>
)} )}
{showTopThreeArr[key].pinswg_appellantfirstname != null && ( {showTopThreeArr[key].pinswg_appellantfirstname != null && (
<div> <div className="cardModuleReference">
<b>{t("myportal:on-behalf-of-label")}: </b> <b>{t("myportal:on-behalf-of-label")}: </b>
{showTopThreeArr[key].pinswg_appellantfirstname + {showTopThreeArr[key].pinswg_appellantfirstname +
" " + " " +
showTopThreeArr[key].pinswg_appellantlastname} showTopThreeArr[key].pinswg_appellantlastname}
</div> </div>
)} )}
{router.locale == "cy" <div className="cardModuleReference">
? jsonpath( <b>LPA:</b>
'$..[?(@.value=="' + {router.locale == "cy"
showTopThreeArr[key][ ? jsonpath(
"_pinswg_associatedlpa_value@OData.Community.Display.V1.FormattedValue" '$..[?(@.value=="' +
] + showTopThreeArr[key][
'")].value_cy', "_pinswg_associatedlpa_value@OData.Community.Display.V1.FormattedValue"
transLookup ] +
) '")].value_cy',
: showTopThreeArr[key][ transLookup
"_pinswg_associatedlpa_value@OData.Community.Display.V1.FormattedValue" )
] || ""} : showTopThreeArr[key][
"_pinswg_associatedlpa_value@OData.Community.Display.V1.FormattedValue"
] || ""}
</div>
{topThreeType == "awaitingSubmission" ? ( {topThreeType == "awaitingSubmission" ? (
<div className="carModuleAddress"> <div className="carModuleAddress">
Case Incomplete, not submitted Case Incomplete, not submitted
@@ -387,7 +446,7 @@ const TopThree = (props) => {
</div> </div>
)} )}
</div> </div>
{topThreeType == "watchedCases" && !props.myReps && ( {/* {topThreeType == "watchedCases" && !props.myReps && (
<div className=""> <div className="">
<button <button
title={t("case:you-have-stopped-watching-label")} title={t("case:you-have-stopped-watching-label")}
@@ -432,7 +491,7 @@ const TopThree = (props) => {
&mdash; &mdash;
</button> </button>
</div> </div>
)} )} */}
</div> </div>
); );
}); });
components/myportal/topthree_reps.js
+35 -25
View File
@@ -228,6 +228,41 @@ const TopThree = (props) => {
{showTopThreeArr[key].pinswg_name} {showTopThreeArr[key].pinswg_name}
</Link> </Link>
)} )}
{!showTopThreeArr[key].hasOwnProperty(
"repComplete"
) && (
<div className="deleteCase">
<button
title={t(
"case:do-you-want-to-delete-case-label"
)}
className=" cardModuleRemoveCase govuk-link govuk-link--no-underline govuk-link--inverse "
onClick={() => {
confirm(
t(
"case:do-you-want-to-delete-case-label"
) +
showTopThreeArr[key]
.pinswg_name +
"?\n" +
t(
"case:do-you-want-to-delete-case-disclaimer-label"
)
) &&
deleteRepItem(
props.accountDetails
.containerID,
showTopThreeArr[key]
.pinswg_name,
showTopThreeArr[key]
.repfile_name
);
}}
>
&mdash;
</button>
</div>
)}
</div> </div>
<div className="cardModuleReference"> <div className="cardModuleReference">
<b>{t("myportal:representation-type")}:</b> <b>{t("myportal:representation-type")}:</b>
@@ -287,31 +322,6 @@ const TopThree = (props) => {
</div> </div>
)} )}
</div> </div>
{!showTopThreeArr[key].hasOwnProperty("repComplete") && (
<div className="">
<button
title={t("case:do-you-want-to-delete-case-label")}
className=" cardModuleRemoveCase govuk-link govuk-link--no-underline govuk-link--inverse "
onClick={() => {
confirm(
t("case:do-you-want-to-delete-case-label") +
showTopThreeArr[key].pinswg_name +
"?\n" +
t(
"case:do-you-want-to-delete-case-disclaimer-label"
)
) &&
deleteRepItem(
props.accountDetails.containerID,
showTopThreeArr[key].pinswg_name,
showTopThreeArr[key].repfile_name
);
}}
>
&mdash;
</button>
</div>
)}
</div> </div>
); );
}); });
locales/en/myportal.json
+1 -1
View File
@@ -43,7 +43,7 @@
"norecords-awaiting-submissions": "You have no awaiting submissions", "norecords-awaiting-submissions": "You have no awaiting submissions",
"on-behalf-of-label": "On behalf of", "on-behalf-of-label": "On behalf of",
"appeal-type-label": "Appeal type", "appeal-type-label": "Appeal type",
"lpa-reference-label": "LPA reference number", "lpa-reference-label": "LPA reference",
"raised-by-label": "Raised by", "raised-by-label": "Raised by",
"representation-id": "Representation ID", "representation-id": "Representation ID",
"representation-type": "Representation type", "representation-type": "Representation type",
locales/en/search.json
+1 -1
View File
@@ -8,7 +8,7 @@
"county-label": "County", "county-label": "County",
"postcode-label": "Postcode", "postcode-label": "Postcode",
"lpa-label": "Local Planning Authority", "lpa-label": "Local Planning Authority",
"lpa-reference-label": "LPA reference number", "lpa-reference-label": "LPA reference",
"appealtype-label": "Select a case type", "appealtype-label": "Select a case type",
"case-status-label": "Case Status", "case-status-label": "Case Status",
"case-type-label": "Case type", "case-type-label": "Case type",
styles/sass/patterns/_card.scss
+18 -4
View File
@@ -9,7 +9,7 @@
margin-bottom: 2em; margin-bottom: 2em;
} }
@media screen and (min-width: 600px) and (max-width: 900px) { @media screen and (min-width: 769px) and (max-width: 900px) {
.card { .card {
flex-basis: 45.99%; flex-basis: 45.99%;
@@ -252,21 +252,35 @@ div.cardModuleItem:last-of-type {
.cardModuleItem { .cardModuleItem {
display: flex; display: flex;
padding: 10px 10px 10px 0; padding: 10px 0px 10px 0;
border-bottom: 1px solid lightgrey; border-bottom: 1px solid lightgrey;
.cardModuleDetails { .cardModuleDetails {
width: 95%; width: 100%;
} }
.cardModuleReference { .cardModuleReference {
display: flex; display: flex;
justify-content: flex-start;
line-height: 1.5;
b { b {
min-width: 122px; @media screen and (max-width: 600px) {
min-width: 120px;
margin-right: 3px;
}
@media screen and (min-width: 769px) {
min-width: 160px;
}
margin-right: 10px; margin-right: 10px;
} }
.deleteCase {
margin-left: auto
}
} }
styles/sass/welshgov/_application.scss
+3 -1
View File
@@ -379,7 +379,9 @@ a.longLinkBreak {
} }
} }
.govuk-width-container {
max-width: 1000px;
}
.wgForm { .wgForm {
background: $lightgrey_offwhite; background: $lightgrey_offwhite;