import { JSONPath as jsonpath } from "jsonpath-plus"; import _ from "lodash"; import useTranslation from "next-translate/useTranslation"; import Link from "next/link"; import { useRouter } from "next/router"; import { useCallback, useEffect, useState } from "react"; import { connect } from "react-redux"; import transLookup from "../../data/lookuptranslations.json"; import PaginationControl from "./pagination"; import { getBasicDNSSearchPaged } from "../../actions"; import GoogleMapReact from "google-map-react"; import { parseCookies } from "nookies"; import OSPoint from "ospoint"; import { createWatchedCases, deleteWatchedCases, getWatchedCasesProxy, } from "../../actions"; import { setCurrentPage, setCurrentReference, } from "../../store/currentView/action"; import { setSearchDetails, setSearchResults, } from "../../store/searchOutput/action"; import { setWatchedCases, setWatchedCasesDetails, } from "../../store/watchedCases/action"; import { getDetailsProxy, getSearchDetailsPaged } from "../utils"; const DNSSearchResults = (props) => { const { searchString, searchResultsObj, searchDetailsObj, setCurrentReference, setSearchResults, setSearchDetails, advancedSearch, setCurrentPage, dnsCoords, myportal, watchedCases, setWatchedCases, setWatchedCasesDetails, showMap, } = props; let { t } = useTranslation(); const router = useRouter(); const { locale } = router; var resultsArr = searchResultsObj.value || []; const [searchLoaded, setSearchLoaded] = useState(false); const [showSpinnerState, setShowSpinnerState] = useState(false); let dataArray = []; //push your Json Data in the array if (showMap == "true") { dnsCoords.map((item) => { let point = new OSPoint( item.pinswg_anticipatedgridreferencenorthingtext || 0, item.pinswg_anticipatedgridreferenceeastingtext || 0 ); let siteCoords = point.toOSGB36(); //console.log(siteCoords); //console.log(item); dataArray.push({ appellant: item[ "_pinswg_appellant_value@OData.Community.Display.V1.FormattedValue" ], name: item.pinswg_projectname, lat: parseFloat(siteCoords.latitude), lng: parseFloat(siteCoords.longitude), title: item.pinswg_name, }); }); } //console.log(dataArray); const ModelsMap = (map, maps) => { //instantiate array that will hold your Json Data //console.log("here"); var prev_infowindow = false; //Loop through the dataArray to create a marker per data using the coordinates in the json console.log(dataArray.length); for (let i = 0; i < dataArray.length; i++) { const infowindow = new google.maps.InfoWindow({ content: "
" + (_.isEmpty(dataArray[i].name) ? "" : dataArray[i].name.indexOf(";") > 0 ? router.locale == "cy" ? dataArray[i].name.split(";")[1] : dataArray[i].name.split(";")[0] : dataArray[i].name) + "
" + (dataArray[i].appellant != null ? "
" + dataArray[i].appellant + "
" : "") + "
" + dataArray[i].title + "
", }); let marker = new maps.Marker({ position: { lat: dataArray[i].lat, lng: dataArray[i].lng }, title: _.isEmpty(dataArray[i].name) ? "" : dataArray[i].name.indexOf(";") > 0 ? router.locale == "cy" ? dataArray[i].name.split(";")[1] : dataArray[i].name.split(";")[0] : dataArray[i].name, map, }); marker.addListener("click", () => { if (prev_infowindow) { prev_infowindow.close(); } prev_infowindow = infowindow; infowindow.open({ anchor: marker, map, shouldFocus: true, }); }); } }; let spinnerState = () => { showSpinnerState == true ? setShowSpinnerState(false) : setShowSpinnerState(true); }; const [orderByState, setOrderbyState] = useState("createdon"); const [fieldSortState, setfieldSortState] = useState("asc"); const [selectedOption, setSelectedOption] = useState(10); const cookies = parseCookies(); const selectWatchedCase = (loggedInUser, incidentID, appealType) => { let updateBody = { "pinswg_WatchedCase@odata.bind": "/incidents(" + incidentID + ")", "pinswg_Contact@odata.bind": "/contacts(" + loggedInUser + ")", "pinswg_appealcasetype": +appealType, }; createWatchedCases(updateBody) .then((data) => data) .then(() => { getWatchedCasesProxy(cookies.pinsUser).then((data) => { setWatchedCases(data), getDetailsProxy(data, "myWatchedCases").then((data) => { setWatchedCasesDetails(data); }); }); }); }; const isWatchedCase = (whichIncident) => { let isWatched = jsonpath( "$..value[?(@._pinswg_watchedcase_value=='" + whichIncident + "')]", watchedCases ); return isWatched; }; const deleteItem = (caseID, topThreeType) => { let cookies = parseCookies(); topThreeType == "watchedCases" && deleteWatchedCases(caseID) .then((data) => data) .then(() => { getWatchedCasesProxy(cookies.pinsUser).then((data) => { setWatchedCases(data), getDetailsProxy(data, "myWatchedCases").then( (data) => { setWatchedCasesDetails(data); } ); }); }); }; const ResultsView = (resultsArr) => { return (
{t("search:searchresults-site-address-label")}
Type
{showSpinnerState == true ? (
{t("common:spinner-fetching-data")} {
) : ( resultsArr.map((item, key) => { let detailsObj = jsonpath( '$..value[?(@.pinswg_name=="' + item.title + '")]', searchDetailsObj ); detailsObj = detailsObj[0]; var appType = router.locale == "cy" ? jsonpath( '$..[?(@.value=="' + item[ "pinswg_appealcasetype@OData.Community.Display.V1.FormattedValue" ] + '")].value_cy', transLookup ) : item[ "pinswg_appealcasetype@OData.Community.Display.V1.FormattedValue" ] || "N/A"; appType = appType == "Datblygiadau o Arwyddocâd Cenedlaethol" || appType == "Developments of National Significance" ? "DNS" : "SIPs"; return (
{ setCurrentReference({ "ticketnumber": item.ticketnumber, "currentReference": item.title, "currentType": "searchResultsObj", "incidentid": item.incidentid, "appealType": item.pinswg_appealcasetype, "showMap": showMap, }); }} > {t( "search:searchresults-case-reference-label" )} : {item.title}
{t( "search:searchresults-site-address-label" )} : {_.has( detailsObj, "pinswg_projectlocation" ) ? detailsObj.pinswg_projectlocation != null ? detailsObj.pinswg_projectlocation.indexOf( ";" ) < 0 ? detailsObj.pinswg_projectlocation : router.locale == "cy" ? detailsObj.pinswg_projectlocation.split( ";" )[1] : detailsObj.pinswg_projectlocation.split( ";" )[0] : "" : ""} {_.has( detailsObj, "pinswg_siteaddressline1" ) ? detailsObj.pinswg_siteaddressline1 : ""} {_.has( detailsObj, "pinswg_siteaddressline1" ) && detailsObj.pinswg_siteaddressline1 != null &&
} {_.has( detailsObj, "pinswg_siteaddressline2" ) ? detailsObj.pinswg_siteaddressline2 : ""} {_.has( detailsObj, "pinswg_siteaddressline2" ) && detailsObj.pinswg_siteaddressline2 != null &&
} {_.has( detailsObj, "pinswg_siteaddressline1" ) ? detailsObj.pinswg_siteaddresstown : ""} {_.has( detailsObj, "pinswg_siteaddresstown" ) && detailsObj.pinswg_siteaddresstown != null &&
} {_.has( detailsObj, "pinswg_siteaddressline1" ) ? detailsObj.pinswg_siteaddresscounty : ""} {_.has( detailsObj, "pinswg_siteaddresscounty" ) && detailsObj.pinswg_siteaddresscounty != null &&
} {_.has( detailsObj, "pinswg_siteaddressline1" ) ? detailsObj.pinswg_siteaddresspostcode : ""}
{t( "search:searchresults-applicant-label" )} : {_.has(detailsObj, [ "_pinswg_appellant_value@OData.Community.Display.V1.FormattedValue", ]) ? detailsObj[ "_pinswg_appellant_value@OData.Community.Display.V1.FormattedValue" ] : ""}
{t( "search:searchresults-authority-label" )} : {_.has(detailsObj, [ "_pinswg_associatedlpa_value@OData.Community.Display.V1.FormattedValue", ]) ? router.locale == "cy" ? jsonpath( '$..[?(@.value=="' + detailsObj[ "_pinswg_associatedlpa_value@OData.Community.Display.V1.FormattedValue" ] + '")].value_cy', transLookup ) : detailsObj[ "_pinswg_associatedlpa_value@OData.Community.Display.V1.FormattedValue" ] || "N/A" : ""}
{t( "search:searchresults-status-label" )} : {router.locale == "cy" ? jsonpath( '$..[?(@.value=="' + item[ "statuscode@OData.Community.Display.V1.FormattedValue" ] + '")].value_cy', transLookup ) : item[ "statuscode@OData.Community.Display.V1.FormattedValue" ] || "N/A"}
{t( "search:searchresults-status-label" )} : {appType}
{myportal == true && (
{isWatchedCase(item.incidentid) .length > 0 == true ? ( { confirm( t( "case:you-have-stopped-watching-label" ) + item.title + "?" ) && deleteItem( isWatchedCase( item.incidentid )[0] .pinswg_watchlistid, "watchedCases" ); }} title={t( "case:stop-watching-case-link" )} > ) : ( { confirm( t( "case:you-are-watching-label" ) + item.title + "?" ) && selectWatchedCase( cookies.pinsUser, item.incidentid, item.pinswg_appealcasetype ); }} title={t( "case:watch-this-case-link" )} > )}
)}
); }) )}
); }; const pagesCount = Math.ceil(searchResultsObj["@odata.count"] / 10); let currentPage = 0; currentPage = decodeURI(searchResultsObj["@odata.nextLink"]).split( "skiptoken=" )[1]; currentPage = typeof currentPage != "undefined" ? parseInt( decodeURI(currentPage) .split('pagenumber="')[1] .slice( 0, decodeURI(currentPage) .split('pagenumber="')[1] .indexOf('"') ) - 1 ) : pagesCount; const getSearchPageResults = useCallback( (pageNumber, orderBy, fieldSort) => { //console.log(advancedSearch, searchString, pageNumber); getBasicDNSSearchPaged( pageNumber, orderBy, fieldSort, selectedOption ) .then((data) => { return data; }) .then((data) => { setSearchResults(data); return getSearchDetailsPaged(data).then((data) => { setSearchDetails(data); setShowSpinnerState(false); }); }); }, [selectedOption, setSearchDetails, setSearchResults] ); const sortDataBy = (whichField) => { setOrderbyState(whichField); setfieldSortState("asc"); getSearchPageResults(1, whichField, fieldSortState); whichField == orderByState ? fieldSortState == "desc" ? setfieldSortState("asc") : setfieldSortState("desc") : setfieldSortState("asc"); setCurrentPage(1); setShowSpinnerState(true); }; useEffect(() => { if (searchLoaded) { if (selectedOption) { setShowSpinnerState(true); getSearchPageResults(1, orderByState, fieldSortState); } } else { setSearchLoaded(true); } }, [ selectedOption, fieldSortState, orderByState, searchLoaded, getSearchPageResults, ]); return ( <>

{t("dnsApplications:page-title")}

{t("dnsApplications:page-intro-paragraph-1")}

{t("dnsApplications:page-intro-list-item-1")}{" "} {t( "dnsApplications:page-intro-list-item-1-link" )}

{t("dnsApplications:page-intro-list-item-2")} {t( "dnsApplications:page-intro-list-item-2-link" )}

{showMap == "true" && (
ModelsMap(map, maps) } />
)}
{searchResultsObj["@odata.count"] > 5 && (
)} {resultsArr.length > 0 ? ( ResultsView(resultsArr) ) : (

{t("search:searchresults-no-records-label")}

)} ); }; const mapDispatchToProps = (dispatch) => { return { setCurrentReference: (currentReference) => { dispatch(setCurrentReference(currentReference)); }, setSearchResults: (searchResultsObj) => { dispatch(setSearchResults(searchResultsObj)); }, setSearchDetails: (searchDetailsObj) => { dispatch(setSearchDetails(searchDetailsObj)); }, setWatchedCases: (watchedCases) => { dispatch(setWatchedCases(watchedCases)); }, setWatchedCasesDetails: (watchedCasesDetails) => { dispatch(setWatchedCasesDetails(watchedCasesDetails)); }, setCurrentPage: (currentPage) => { dispatch(setCurrentPage(currentPage)); }, }; }; export default connect(null, mapDispatchToProps)(DNSSearchResults);