Merged PR 2377: added enlarge map view on dnsapplication list

added enlarge map view on dnsapplication list

Related work items: #23774

components/dnssearchresults.js

@@ -11,6 +11,7 @@ export default function Search(props) {
         watchedCases,
         showMap,
         showLoginCheck,
+        mapTarget
     } = props;
     let { t } = useTranslation();
 
@@ -48,6 +49,7 @@ export default function Search(props) {
                                 watchedCases={watchedCases}
                                 showMap={showMap}
                                 showLoginCheck={showLoginCheck}
+                                mapTarget={mapTarget}
                             />
                         </div>
                     </div>

components/search/dnssearchresults.js

@@ -53,7 +53,8 @@ const DNSSearchResults = (props) => {
         setWatchedCases,
         setWatchedCasesDetails,
         showMap,
-        showLoginCheck
+        showLoginCheck,
+        mapTarget
     } = props;
     let { t } = useTranslation();
 
@@ -65,6 +66,7 @@ const DNSSearchResults = (props) => {
 
     const [searchLoaded, setSearchLoaded] = useState(false);
     const [showSpinnerState, setShowSpinnerState] = useState(false);
+    const [isMapExpanded, setIsMapExpanded] = useState(false);
 
     // let dataArray = [];
     // //push your Json Data in the array
@@ -907,9 +909,30 @@ const DNSSearchResults = (props) => {
         <>
             <div className="govuk-grid-row">
                 <div className="flex-container grid-row govuk-body case">
+                    {showMap == "true" && isMapExpanded && (
+                        <div className="govuk-grid-column-full">
+                            <div className="map-container map-container--expanded">
+                                <iframe
+                                    src={`https://datamap.gov.wales/maps/${mapTarget}/embed?center=-3.6553189192727347,52.214962933659415&zoom=2#/`}
+                                    width="100%"
+                                    height="600"
+                                    frameBorder="0"
+                                    title="Map"
+                                />
+                                <button
+                                    type="button"
+                                    className="govuk-link map-expand-link"
+                                    onClick={() => setIsMapExpanded(false)}
+                                >
+                                    Reduce map
+                                </button>
+                            </div>
+                        </div>
+                    )}
+
                     <div
                         className={
-                            showMap == "true"
+                            showMap == "true" && !isMapExpanded
                                 ? "govuk-grid-column-one-half"
                                 : "govuk-grid-column-two-thirds"
                         }
@@ -965,50 +988,30 @@ const DNSSearchResults = (props) => {
                         </p>
                     </div>
 
-                    {showMap == "true" && (
+                    {showMap == "true" && !isMapExpanded && (
                         <div className="govuk-grid-column-one-half">
-                            <div
+                            <div className="map-container">
-                            // style={{
-                            //     height: "45vh",
-                            //     width: "100%",
-                            // }}
-                            >
-                                {/* <GoogleMapReact
-                                    options={function (maps) {
-                                        return {
-                                            overviewMapControl: true,
-                                            mapTypeControl: true,
-                                        };
-                                    }}
-                                    bootstrapURLKeys={{
-                                        key: "AIzaSyCzeVrHt544bp_72YCFkw21eDsmI2JEsQo",
-                                    }}
-                                    defaultCenter={{
-                                        id: "",
-                                        lat: 52.412272,
-                                        lng: -3.437989,
-                                    }}
-                                    defaultZoom={7}
-                                    onGoogleApiLoaded={({ map, maps }) =>
-                                        ModelsMap(map, maps)
-                                    }
-                                /> */}
-
                                 <iframe
-                                    src={
+                                    src={`https://datamap.gov.wales/maps/${mapTarget}/embed?center=-3.6553189192727347,52.214962933659415&zoom=2#/`}
-                                        "https://datamap.gov.wales/maps/pedw-dev/embed?center=-3.6553189192727347,52.214962933659415&zoom=2#/"
+                                    width="100%"
-                                    }
+                                    height="500"
-                                    //src={"https://datamap.gov.wales/maps/pedw-dev/embed#/"}
+                                    frameBorder="0"
-                                    width={"100%"}
+                                    title="Map"
-                                    style={{ maxHeight: "400px" }}
+                                />
-                                    height={"500px"}
-                                    className={"mappingFrame"}
-                                ></iframe>
                             </div>
+
+                            <button
+                                type="button "
+                                className="govuk-link map-expand-link mapSizeButton"
+                                onClick={() => setIsMapExpanded(true)}
+                            >
+                                Enlarge map
+                            </button>
                         </div>
                     )}
                 </div>
             </div>
+
             {searchResultsObj["@odata.count"] > 5 && (
                 <div id="recordCountSelect" className="govuk-grid-row">
                     <div className="govuk-form-group">

lib/domain/representation-policy/resolveRepresentationWindow.js

@@ -28,6 +28,8 @@ export function isRepresentationWindowClosed(
 }
 
 export function resolveRepresentationWindow(caseDetails, DateCtor = Date) {
+    caseDetails = caseDetails || {};
+
     const hasStartDate =
         Object.prototype.hasOwnProperty.call(caseDetails, "pinswg_startdate") ||
         Object.prototype.hasOwnProperty.call(

pages/dnsapplications.js

@@ -23,7 +23,7 @@ import { wrapper } from "../store/store";
 import ServiceBanner from "../components/servicebanner";
 
 const Home = (props) => {
-    const { footerLinks, pages, showMap, showLoginCheck } = props;
+    const { footerLinks, pages, showMap, showLoginCheck, mapTarget } = props;
     let { t, lang } = useTranslation();
 
     const router = useRouter();
@@ -109,6 +109,7 @@ const Home = (props) => {
                         searchString="DNS"
                         searchResultsObj={props.searchResultsObj}
                         showLoginCheck={showLoginCheck}
+                        mapTarget={mapTarget}
                     />
                 </div>
                 <Footer footerLinks={footerLinks} ticketnumber={props} />
@@ -140,6 +141,7 @@ export const getServerSideProps = wrapper.getServerSideProps(
 
             const showLoginCheck = process.env.SHOWLOGIN || false;
             const showMapCheck = process.env.SHOWMAPS || false;
+            const mapTarget = process.env.MAP_TARGET || "pedw-dev";
 
             // if (_.has(searchResultsObj, "status") == true) {
             //     return {
@@ -166,7 +168,8 @@ export const getServerSideProps = wrapper.getServerSideProps(
             return {
                 props: {
                     showMap: showMapCheck,
-                    showLoginCheck: showLoginCheck
+                    showLoginCheck: showLoginCheck,
+                    mapTarget: mapTarget
                 }
             };
         }

pages/myportal/dnsapplications.js

@@ -40,7 +40,7 @@ import { getSession } from "next-auth/react";
 import ServiceBanner from "../../components/myportal/servicebanner";
 
 const Home = (props) => {
-    const { footerLinks, pages, watchedCases, showMap } = props;
+    const { footerLinks, pages, watchedCases, showMap, mapTarget } = props;
     let { t, lang } = useTranslation();
 
     const router = useRouter();
@@ -127,6 +127,7 @@ const Home = (props) => {
                         searchResultsObj={props.searchResultsObj}
                         myportal={true}
                         watchedCases={watchedCases}
+                        mapTarget={mapTarget}
                     />
                 </div>
                 <Footer footerLinks={footerLinks} ticketnumber={props} />
@@ -174,6 +175,7 @@ export const getServerSideProps = wrapper.getServerSideProps(
             //         : searchResultsObj;
 
             const showMapCheck = process.env.SHOWMAPS || false;
+            const mapTarget = process.env.MAP_TARGET || "pedw-dev";
 
             const watchedCasesDetails = await getDetails(
                 watchedCases,
@@ -190,7 +192,7 @@ export const getServerSideProps = wrapper.getServerSideProps(
             store.dispatch(setAccountDetails(accountDetails));
 
             return {
-                props: { showMap: showMapCheck }
+                props: { showMap: showMapCheck, mapTarget: mapTarget }
             };
         }
     }

styles/sass/welshgov/_application.scss

@@ -3543,4 +3543,21 @@ ul.subFieldList {
     font-weight: normal;
     text-decoration: none;
     white-space: nowrap;
+}
+
+
+
+.map-container {
+    width: 100%;
+}
+
+.map-container--expanded {
+    margin-bottom: 30px;
+}
+
+.map-expand-link {
+    background: none;
+    border: 0;
+    padding: 0;
+    cursor: pointer;
 }