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

updated admin tabs and filtering

Browse Source
This commit is contained in:
robbond
2025-09-23 12:44:21 +01:00
parent c5d3792048
commit cb948a160b
5 changed files with 299 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files
actions/index.js
+20 -1
View File
@@ -2144,8 +2144,25 @@ export const getNewDocumentsPaged = async (
fieldSort, fieldSort,
showNumberOfRecords, showNumberOfRecords,
documentType, documentType,
documentOrigin,
selectedWeeks selectedWeeks
) => { ) => {
console.log(
"/api/admin/getlatestdocuments_api?pageNumber=" +
pageNumber +
"&orderby=" +
orderBy +
"&fieldSort=" +
fieldSort +
"&showNumberOfRecords=" +
showNumberOfRecords +
"&documentType=" +
documentType +
"&numberWeeks=" +
selectedWeeks +
"&documentOrigin=" +
documentOrigin
);
return axios return axios
.get( .get(
"/api/admin/getlatestdocuments_api?pageNumber=" + "/api/admin/getlatestdocuments_api?pageNumber=" +
@@ -2159,7 +2176,9 @@ export const getNewDocumentsPaged = async (
"&documentType=" + "&documentType=" +
documentType + documentType +
"&numberWeeks=" + "&numberWeeks=" +
selectedWeeks selectedWeeks +
"&documentOrigin=" +
documentOrigin
) )
.then((res) => { .then((res) => {
return res.data; return res.data;
components/admin/tabs/accounts.js
+2
View File
@@ -26,6 +26,8 @@ export default function AccountsTab({ userData }) {
> >
{user.email} {user.email}
</Link> </Link>
<br />
{user.id}
</dd> </dd>
<dd className="govuk-summary-list__value govuk-!-font-size-16 "> <dd className="govuk-summary-list__value govuk-!-font-size-16 ">
Last accessed: {user.created} Last accessed: {user.created}
components/admin/tabs/documents.js
+215 -48
View File
@@ -7,6 +7,9 @@ import { connect } from "react-redux";
import transLookup from "../../../data/lookuptranslations.json"; import transLookup from "../../../data/lookuptranslations.json";
import { formatDates } from "../../utils"; import { formatDates } from "../../utils";
import PaginationControl from "../../../components/case/pagination"; import PaginationControl from "../../../components/case/pagination";
import DocumentLink from "../../utils/downloads";
import { useDownloadQueue } from "../../utils/downloadmanager";
import { sendGAEvent } from "@next/third-parties/google"; import { sendGAEvent } from "@next/third-parties/google";
import { import {
@@ -170,6 +173,21 @@ const getDocumentTypes = [
}, },
]; ];
const getOrigin = [
{
"Value": 846040000,
"Label": "MDU",
},
{
"Value": 846040001,
"Label": "Portal",
},
{
"Value": 846040002,
"Label": "Manual",
},
];
const DocumentsTab = (props) => { const DocumentsTab = (props) => {
let { t, lang } = useTranslation(); let { t, lang } = useTranslation();
const firstRender = useRef(false); const firstRender = useRef(false);
@@ -189,12 +207,15 @@ const DocumentsTab = (props) => {
const { locale } = router; const { locale } = router;
var documentDetailsArr = documentDetailsObj || []; var documentDetailsArr = documentDetailsObj || [];
const { startDownload, getStatus } = useDownloadQueue(3);
const [selectedOption, setSelectedOption] = useState(10); const [selectedOption, setSelectedOption] = useState(10);
const [selectedWeeks, setSelectedWeeks] = useState(1); const [selectedWeeks, setSelectedWeeks] = useState(1);
const [documentTypes, setDocumentTypes] = useState(getDocumentTypes); const [documentTypes, setDocumentTypes] = useState(getDocumentTypes);
const [documentOrigin, setDocumentOrigin] = useState(getOrigin);
const [selectedDocumentType, setSelectedDocumentType] = useState("all"); const [selectedDocumentType, setSelectedDocumentType] = useState("all");
const [selectedDocumentOrigin, setSelectedDocumentOrigin] = useState("all");
const [selectAll, setSelectAll] = useState(false); const [selectAll, setSelectAll] = useState(false);
const [selectOriginAll, setSelectOriginAll] = useState(false);
const [checkedItems, setCheckedItems] = useState( const [checkedItems, setCheckedItems] = useState(
documentTypes.reduce((acc, item) => { documentTypes.reduce((acc, item) => {
@@ -203,6 +224,13 @@ const DocumentsTab = (props) => {
}, {}) }, {})
); );
const [checkedOriginItems, setCheckedOriginItems] = useState(
documentOrigin.reduce((acc, item) => {
acc[item.pinswg_origin] = false;
return acc;
}, {})
);
const handleCheckboxChange = (e) => { const handleCheckboxChange = (e) => {
const { name, checked } = e.target; const { name, checked } = e.target;
@@ -213,6 +241,16 @@ const DocumentsTab = (props) => {
setSelectAll(false); setSelectAll(false);
}; };
const handleCheckboxOriginChange = (e) => {
const { name, checked } = e.target;
setCheckedOriginItems((prev) => ({
...prev,
[name]: checked,
}));
setSelectOriginAll(false);
};
const handleSelectAllChange = (e) => { const handleSelectAllChange = (e) => {
const { checked } = e.target; const { checked } = e.target;
setSelectAll(checked); // Set the 'Select All' state setSelectAll(checked); // Set the 'Select All' state
@@ -230,16 +268,42 @@ const DocumentsTab = (props) => {
} }
}; };
const handleSelectOriginAllChange = (e) => {
const { checked } = e.target;
setSelectOriginAll(checked); // Set the 'Select All' state
if (checked) {
// If 'Select All' is checked, check all the other checkboxes
setCheckedOriginItems(
documentOrigin.reduce((acc, item) => {
acc[item.pinswg_origin] = true;
return acc;
}, {})
);
} else {
clearCheckboxes();
}
};
const clearCheckboxes = () => { const clearCheckboxes = () => {
setSelectAll(false); setSelectAll(false);
setSelectOriginAll(false);
setCheckedItems( setCheckedItems(
documentTypes.reduce((acc, item) => { documentTypes.reduce((acc, item) => {
acc[item.pinswg_isharedocumentlocations] = false; acc[item.pinswg_isharedocumentlocations] = false;
return acc; return acc;
}, {}), }, {}),
setSelectedDocumentType("all"), setSelectedDocumentType("all"),
setCurrentPage(1) setCurrentPage(1)
); );
setCheckedOriginItems(
documentOrigin.reduce((acc, item) => {
acc["origin_" + item.pinswg_origin] = false;
return acc;
}, {}),
setSelectedDocumentOrigin("all")
);
}; };
let ShowDocLinks = false; let ShowDocLinks = false;
let checkShowDocLinks = docsOffline != false ? true : false; let checkShowDocLinks = docsOffline != false ? true : false;
@@ -314,6 +378,9 @@ const DocumentsTab = (props) => {
{t("search:clear-filter-button-label")} {t("search:clear-filter-button-label")}
</button> </button>
</div> </div>
<h4 className="govuk-body govuk-!-font-size-14 govuk-!-margin-bottom-0">
Document Type
</h4>
<div className="govuk-checkboxes govuk-checkboxes--small"> <div className="govuk-checkboxes govuk-checkboxes--small">
{" "} {" "}
<> <>
@@ -335,17 +402,6 @@ const DocumentsTab = (props) => {
{router.locale == "cy" {router.locale == "cy"
? "Pawb" ? "Pawb"
: "All"}{" "} : "All"}{" "}
- (
{documentTypes.reduce(
(accumulator, currentItem) => {
return (
accumulator +
currentItem.count
);
},
0
)}
)
</label> </label>
</div> </div>
</> </>
@@ -389,17 +445,105 @@ const DocumentsTab = (props) => {
); );
})} })}
</div>{" "} </div>{" "}
<h4 className="govuk-body govuk-!-font-size-14 govuk-!-margin-bottom-0">
Document Origin
</h4>
<div className="govuk-checkboxes govuk-checkboxes_short govuk-checkboxes--small">
{" "}
<>
<div className="govuk-checkboxes__item">
<input
className="govuk-checkboxes__input"
type="checkbox"
id={"all_" + "_" + 0}
key={0}
name={"all_" + "_" + 0}
checked={selectOriginAll}
value={"all"}
onChange={
handleSelectOriginAllChange
}
/>
<label
className="govuk-label-s govuk-checkboxes__label"
htmlFor={"all" + "__" + 0}
>
{router.locale == "cy"
? "Pawb"
: "All"}{" "}
</label>
</div>
</>
{documentOrigin.map((item, key) => {
return (
<div
className="govuk-checkboxes__item"
key={key}
>
<input
className="govuk-checkboxes__input"
type="checkbox"
id={"origin_" + item.Value}
key={key}
value={"origin_" + item.Value}
name={"origin_" + item.Value}
checked={
checkedOriginItems[
"origin_" + item.Value
]
}
onChange={
handleCheckboxOriginChange
}
/>
<label
className="govuk-label-s govuk-checkboxes__label"
htmlFor={"origin_" + item.Value}
>
{router.locale == "cy"
? jsonpath({
path:
'$..[?(@ && @.value=="' +
item.Label +
'")].value_cy',
json: transLookup,
eval: true,
})
: item.Label ||
t(
"case:summary-no-date-entered-label"
)}{" "}
</label>
</div>
);
})}
</div>{" "}
<div> <div>
<button <button
className="govuk-button " className="govuk-button "
type="button" type="button"
onClick={(e) => { onClick={(e) => {
const data = [ const checkedValues = [
...document.querySelectorAll( ...document.querySelectorAll(
".govuk-checkboxes__input:checked" ".govuk-checkboxes__input:checked"
), ),
].map((e) => e.value); ].map((e) => e.value);
setSelectedDocumentType(data);
const origins = checkedValues
.filter((val) =>
val.startsWith("origin_")
)
.map((val) =>
val.replace(/^origin_/, "")
); // strip prefix
const types = checkedValues.filter(
(val) => !val.startsWith("origin_")
);
setSelectedDocumentType(types);
setSelectedDocumentOrigin(origins);
setCurrentPage(1); setCurrentPage(1);
}} }}
> >
@@ -610,43 +754,63 @@ const DocumentsTab = (props) => {
{!ShowDocLinks ? ( {!ShowDocLinks ? (
detailsObj.pinswg_publishtoweb ? ( detailsObj.pinswg_publishtoweb ? (
<Link // <Link
scroll={ // scroll={
false // false
// }
// href={
// detailsObj.pinswg_hashlink
// }
// key={key}
// onClick={() => {
// toggleDownLoadLink(
// key
// ),
// sendGAEvent(
// "event",
// "DownloadedFile",
// {
// caseReference:
// props.caseReference,
// filename:
// detailsObj.pinswg_name,
// }
// );
// }}
// >
// <span className="results-visually-hidden">
// {t(
// "case:documents-name-label"
// )}
// :
// </span>
// {_.has(
// detailsObj,
// "pinswg_name"
// )
// ? detailsObj.pinswg_name
// : ""}
// </Link>
<DocumentLink
key={
detailsObj.pinswg_documentid
} }
href={ id={
detailsObj.pinswg_hashlink detailsObj.pinswg_documentid
} }
key={key} detailsObj={
onClick={() => { detailsObj
toggleDownLoadLink(
key
),
sendGAEvent(
"event",
"DownloadedFile",
{
caseReference:
props.caseReference,
filename:
detailsObj.pinswg_name,
} }
); caseReference={
}} caseReference
> }
<span className="results-visually-hidden"> startDownload={
{t( startDownload
"case:documents-name-label" }
)} getStatus={
: getStatus
</span> }
{_.has( />
detailsObj,
"pinswg_name"
)
? detailsObj.pinswg_name
: ""}
</Link>
) : ( ) : (
<> <>
<span className="results-visually-hidden"> <span className="results-visually-hidden">
@@ -797,6 +961,7 @@ const DocumentsTab = (props) => {
fieldSort, fieldSort,
selectedOption, selectedOption,
selectedDocumentType, selectedDocumentType,
selectedDocumentOrigin,
selectedWeeks selectedWeeks
) )
.then((data) => data) .then((data) => data)
@@ -810,6 +975,7 @@ const DocumentsTab = (props) => {
selectedOption, selectedOption,
selectedDocumentType, selectedDocumentType,
selectedWeeks, selectedWeeks,
selectedDocumentOrigin,
props.setDocumentDetails, props.setDocumentDetails,
] ]
); );
@@ -942,6 +1108,7 @@ const DocumentsTab = (props) => {
fieldSortState, fieldSortState,
orderByState, orderByState,
getDocumentTypes, getDocumentTypes,
getOrigin,
getDocumentResults, getDocumentResults,
lang, lang,
selectedWeeks, selectedWeeks,
pages/admin/index.js
+36 -35
View File
@@ -54,10 +54,10 @@ const StoragePage = (props) => {
{/* Tabs */} {/* Tabs */}
<ul className="govuk-tabs__list"> <ul className="govuk-tabs__list">
{[ {[
"documents",
"appeals",
"storage", "storage",
"accounts", "accounts",
"appeals",
"documents",
].map((tab) => ( ].map((tab) => (
<li <li
key={tab} key={tab}
@@ -76,20 +76,50 @@ const StoragePage = (props) => {
props.setCurrentPage(1); props.setCurrentPage(1);
}} }}
> >
{" "}
{tab === "documents" &&
"Latest Documents"}
{tab === "appeals" &&
"Latest Appeals"}
{tab === "storage" && {tab === "storage" &&
"Storage Account"} "Storage Account"}
{tab === "accounts" && {tab === "accounts" &&
"User Accounts"} "User Accounts"}
{tab === "appeals" &&
"Latest Appeals"}
{tab === "documents" &&
"Latest Documents"}
</a> </a>
</li> </li>
))} ))}
</ul> </ul>
{/* Panels */} {/* Panels */}
<div
className={
whichTab === "documents"
? "govuk-tabs__panel"
: "govuk-tabs__panel govuk-tabs__panel--hidden"
}
>
<DocumentsTab
documentDetailsObj={
props.searchResultsObj
.documentDetailsObj
}
docsOffline={docsOffline}
showFilteredDocs={props.showFilteredDocs}
/>
</div>
<div
className={
whichTab === "appeals"
? "govuk-tabs__panel"
: "govuk-tabs__panel govuk-tabs__panel--hidden"
}
>
<AppealsTab
searchResultsObj={searchResultsObj}
/>
</div>
<div <div
className={ className={
whichTab === "storage" whichTab === "storage"
@@ -112,35 +142,6 @@ const StoragePage = (props) => {
> >
<AccountsTab userData={userData} /> <AccountsTab userData={userData} />
</div> </div>
<div
className={
whichTab === "appeals"
? "govuk-tabs__panel"
: "govuk-tabs__panel govuk-tabs__panel--hidden"
}
>
<AppealsTab
searchResultsObj={searchResultsObj}
/>
</div>
<div
className={
whichTab === "documents"
? "govuk-tabs__panel"
: "govuk-tabs__panel govuk-tabs__panel--hidden"
}
>
<DocumentsTab
documentDetailsObj={
props.searchResultsObj
.documentDetailsObj
}
docsOffline={docsOffline}
showFilteredDocs={props.showFilteredDocs}
/>
</div>
</div> </div>
</div> </div>
</div> </div>
pages/api/admin/getlatestdocuments_api.js
+25 -1
View File
@@ -64,9 +64,11 @@ export default async function ApiProxy(req, res) {
var fieldSort = req.query.fieldSort || "desc"; var fieldSort = req.query.fieldSort || "desc";
var showNumberOfRecords = req.query.showNumberOfRecords || 10; var showNumberOfRecords = req.query.showNumberOfRecords || 10;
var documentType = req.query.documentType || "all"; var documentType = req.query.documentType || "all";
var documentOrigin = req.query.documentOrigin || "all";
var numberOfWeeks = req.query.numberWeeks || 1; var numberOfWeeks = req.query.numberWeeks || 1;
var docTypeQueryString = ""; var docTypeQueryString = "";
var docOriginQueryString = "";
if (documentType != "all") { if (documentType != "all") {
if (documentType.indexOf(",") >= 0) { if (documentType.indexOf(",") >= 0) {
@@ -91,6 +93,27 @@ export default async function ApiProxy(req, res) {
} }
} }
if (documentOrigin != "all") {
if (documentOrigin.indexOf(",") >= 0) {
const documentOriginArr = documentOrigin.split(",");
docOriginQueryString = " and (";
documentOriginArr.forEach(function (item, index) {
console.log(item, index);
if (item != "all") {
docOriginQueryString += " pinswg_origin eq " + item;
docOriginQueryString +=
index < documentOriginArr.length - 1 ? " or " : "";
}
});
docOriginQueryString += " )";
} else {
docOriginQueryString += " and pinswg_origin eq " + documentOrigin;
}
}
function daysAgoISO(days) { function daysAgoISO(days) {
const today = new Date(); const today = new Date();
const resultDate = new Date(today); const resultDate = new Date(today);
@@ -103,6 +126,7 @@ export default async function ApiProxy(req, res) {
"pinswg_documents?$select=pinswg_name,createdon,pinswg_publishtoweb,_pinswg_documentids_value,pinswg_isharedocumentlocations,pinswg_isharedocumentreference,pinswg_uploadurl,pinswg_uploadstatus,pinswg_origin&$filter=createdon ge " + "pinswg_documents?$select=pinswg_name,createdon,pinswg_publishtoweb,_pinswg_documentids_value,pinswg_isharedocumentlocations,pinswg_isharedocumentreference,pinswg_uploadurl,pinswg_uploadstatus,pinswg_origin&$filter=createdon ge " +
daysAgoISO(numberOfWeeks) + daysAgoISO(numberOfWeeks) +
docTypeQueryString + docTypeQueryString +
docOriginQueryString +
"&$orderby=" + "&$orderby=" +
orderby + orderby +
" " + " " +
@@ -115,7 +139,7 @@ export default async function ApiProxy(req, res) {
console.log( console.log(
"\n==========================================\n", "\n==========================================\n",
"\nnew docs search ", "\nnew docs search---- ",
"\n\nQuery url: " + queryUrl, "\n\nQuery url: " + queryUrl,
"\n\nRelay link: " + WEBAPI_URL + queryUrl + hashAPIPath(queryUrl), "\n\nRelay link: " + WEBAPI_URL + queryUrl + hashAPIPath(queryUrl),
"\n==========================================\n" "\n==========================================\n"