updated admin tabs and filtering
This commit is contained in:
+20
-1
@@ -2144,8 +2144,25 @@ export const getNewDocumentsPaged = async (
|
||||
fieldSort,
|
||||
showNumberOfRecords,
|
||||
documentType,
|
||||
documentOrigin,
|
||||
selectedWeeks
|
||||
) => {
|
||||
console.log(
|
||||
"/api/admin/getlatestdocuments_api?pageNumber=" +
|
||||
pageNumber +
|
||||
"&orderby=" +
|
||||
orderBy +
|
||||
"&fieldSort=" +
|
||||
fieldSort +
|
||||
"&showNumberOfRecords=" +
|
||||
showNumberOfRecords +
|
||||
"&documentType=" +
|
||||
documentType +
|
||||
"&numberWeeks=" +
|
||||
selectedWeeks +
|
||||
"&documentOrigin=" +
|
||||
documentOrigin
|
||||
);
|
||||
return axios
|
||||
.get(
|
||||
"/api/admin/getlatestdocuments_api?pageNumber=" +
|
||||
@@ -2159,7 +2176,9 @@ export const getNewDocumentsPaged = async (
|
||||
"&documentType=" +
|
||||
documentType +
|
||||
"&numberWeeks=" +
|
||||
selectedWeeks
|
||||
selectedWeeks +
|
||||
"&documentOrigin=" +
|
||||
documentOrigin
|
||||
)
|
||||
.then((res) => {
|
||||
return res.data;
|
||||
|
||||
@@ -26,6 +26,8 @@ export default function AccountsTab({ userData }) {
|
||||
>
|
||||
{user.email}
|
||||
</Link>
|
||||
<br />
|
||||
{user.id}
|
||||
</dd>
|
||||
<dd className="govuk-summary-list__value govuk-!-font-size-16 ">
|
||||
Last accessed: {user.created}
|
||||
|
||||
@@ -7,6 +7,9 @@ import { connect } from "react-redux";
|
||||
import transLookup from "../../../data/lookuptranslations.json";
|
||||
import { formatDates } from "../../utils";
|
||||
import PaginationControl from "../../../components/case/pagination";
|
||||
import DocumentLink from "../../utils/downloads";
|
||||
import { useDownloadQueue } from "../../utils/downloadmanager";
|
||||
|
||||
import { sendGAEvent } from "@next/third-parties/google";
|
||||
|
||||
import {
|
||||
@@ -170,6 +173,21 @@ const getDocumentTypes = [
|
||||
},
|
||||
];
|
||||
|
||||
const getOrigin = [
|
||||
{
|
||||
"Value": 846040000,
|
||||
"Label": "MDU",
|
||||
},
|
||||
{
|
||||
"Value": 846040001,
|
||||
"Label": "Portal",
|
||||
},
|
||||
{
|
||||
"Value": 846040002,
|
||||
"Label": "Manual",
|
||||
},
|
||||
];
|
||||
|
||||
const DocumentsTab = (props) => {
|
||||
let { t, lang } = useTranslation();
|
||||
const firstRender = useRef(false);
|
||||
@@ -189,12 +207,15 @@ const DocumentsTab = (props) => {
|
||||
const { locale } = router;
|
||||
|
||||
var documentDetailsArr = documentDetailsObj || [];
|
||||
|
||||
const { startDownload, getStatus } = useDownloadQueue(3);
|
||||
const [selectedOption, setSelectedOption] = useState(10);
|
||||
const [selectedWeeks, setSelectedWeeks] = useState(1);
|
||||
const [documentTypes, setDocumentTypes] = useState(getDocumentTypes);
|
||||
const [documentOrigin, setDocumentOrigin] = useState(getOrigin);
|
||||
const [selectedDocumentType, setSelectedDocumentType] = useState("all");
|
||||
const [selectedDocumentOrigin, setSelectedDocumentOrigin] = useState("all");
|
||||
const [selectAll, setSelectAll] = useState(false);
|
||||
const [selectOriginAll, setSelectOriginAll] = useState(false);
|
||||
|
||||
const [checkedItems, setCheckedItems] = useState(
|
||||
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 { name, checked } = e.target;
|
||||
|
||||
@@ -213,6 +241,16 @@ const DocumentsTab = (props) => {
|
||||
setSelectAll(false);
|
||||
};
|
||||
|
||||
const handleCheckboxOriginChange = (e) => {
|
||||
const { name, checked } = e.target;
|
||||
|
||||
setCheckedOriginItems((prev) => ({
|
||||
...prev,
|
||||
[name]: checked,
|
||||
}));
|
||||
setSelectOriginAll(false);
|
||||
};
|
||||
|
||||
const handleSelectAllChange = (e) => {
|
||||
const { checked } = e.target;
|
||||
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 = () => {
|
||||
setSelectAll(false);
|
||||
setSelectOriginAll(false);
|
||||
setCheckedItems(
|
||||
documentTypes.reduce((acc, item) => {
|
||||
acc[item.pinswg_isharedocumentlocations] = false;
|
||||
return acc;
|
||||
}, {}),
|
||||
|
||||
setSelectedDocumentType("all"),
|
||||
setCurrentPage(1)
|
||||
);
|
||||
setCheckedOriginItems(
|
||||
documentOrigin.reduce((acc, item) => {
|
||||
acc["origin_" + item.pinswg_origin] = false;
|
||||
return acc;
|
||||
}, {}),
|
||||
setSelectedDocumentOrigin("all")
|
||||
);
|
||||
};
|
||||
let ShowDocLinks = false;
|
||||
let checkShowDocLinks = docsOffline != false ? true : false;
|
||||
@@ -314,6 +378,9 @@ const DocumentsTab = (props) => {
|
||||
{t("search:clear-filter-button-label")}
|
||||
</button>
|
||||
</div>
|
||||
<h4 className="govuk-body govuk-!-font-size-14 govuk-!-margin-bottom-0">
|
||||
Document Type
|
||||
</h4>
|
||||
<div className="govuk-checkboxes govuk-checkboxes--small">
|
||||
{" "}
|
||||
<>
|
||||
@@ -335,17 +402,6 @@ const DocumentsTab = (props) => {
|
||||
{router.locale == "cy"
|
||||
? "Pawb"
|
||||
: "All"}{" "}
|
||||
- (
|
||||
{documentTypes.reduce(
|
||||
(accumulator, currentItem) => {
|
||||
return (
|
||||
accumulator +
|
||||
currentItem.count
|
||||
);
|
||||
},
|
||||
0
|
||||
)}
|
||||
)
|
||||
</label>
|
||||
</div>
|
||||
</>
|
||||
@@ -389,17 +445,105 @@ const DocumentsTab = (props) => {
|
||||
);
|
||||
})}
|
||||
</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>
|
||||
<button
|
||||
className="govuk-button "
|
||||
type="button"
|
||||
onClick={(e) => {
|
||||
const data = [
|
||||
const checkedValues = [
|
||||
...document.querySelectorAll(
|
||||
".govuk-checkboxes__input:checked"
|
||||
),
|
||||
].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);
|
||||
}}
|
||||
>
|
||||
@@ -610,43 +754,63 @@ const DocumentsTab = (props) => {
|
||||
|
||||
{!ShowDocLinks ? (
|
||||
detailsObj.pinswg_publishtoweb ? (
|
||||
<Link
|
||||
scroll={
|
||||
false
|
||||
// <Link
|
||||
// scroll={
|
||||
// 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={
|
||||
detailsObj.pinswg_hashlink
|
||||
id={
|
||||
detailsObj.pinswg_documentid
|
||||
}
|
||||
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>
|
||||
detailsObj={
|
||||
detailsObj
|
||||
}
|
||||
caseReference={
|
||||
caseReference
|
||||
}
|
||||
startDownload={
|
||||
startDownload
|
||||
}
|
||||
getStatus={
|
||||
getStatus
|
||||
}
|
||||
/>
|
||||
) : (
|
||||
<>
|
||||
<span className="results-visually-hidden">
|
||||
@@ -797,6 +961,7 @@ const DocumentsTab = (props) => {
|
||||
fieldSort,
|
||||
selectedOption,
|
||||
selectedDocumentType,
|
||||
selectedDocumentOrigin,
|
||||
selectedWeeks
|
||||
)
|
||||
.then((data) => data)
|
||||
@@ -810,6 +975,7 @@ const DocumentsTab = (props) => {
|
||||
selectedOption,
|
||||
selectedDocumentType,
|
||||
selectedWeeks,
|
||||
selectedDocumentOrigin,
|
||||
props.setDocumentDetails,
|
||||
]
|
||||
);
|
||||
@@ -942,6 +1108,7 @@ const DocumentsTab = (props) => {
|
||||
fieldSortState,
|
||||
orderByState,
|
||||
getDocumentTypes,
|
||||
getOrigin,
|
||||
getDocumentResults,
|
||||
lang,
|
||||
selectedWeeks,
|
||||
|
||||
+36
-35
@@ -54,10 +54,10 @@ const StoragePage = (props) => {
|
||||
{/* Tabs */}
|
||||
<ul className="govuk-tabs__list">
|
||||
{[
|
||||
"documents",
|
||||
"appeals",
|
||||
"storage",
|
||||
"accounts",
|
||||
"appeals",
|
||||
"documents",
|
||||
].map((tab) => (
|
||||
<li
|
||||
key={tab}
|
||||
@@ -76,20 +76,50 @@ const StoragePage = (props) => {
|
||||
props.setCurrentPage(1);
|
||||
}}
|
||||
>
|
||||
{" "}
|
||||
{tab === "documents" &&
|
||||
"Latest Documents"}
|
||||
{tab === "appeals" &&
|
||||
"Latest Appeals"}
|
||||
{tab === "storage" &&
|
||||
"Storage Account"}
|
||||
{tab === "accounts" &&
|
||||
"User Accounts"}
|
||||
{tab === "appeals" &&
|
||||
"Latest Appeals"}
|
||||
{tab === "documents" &&
|
||||
"Latest Documents"}
|
||||
</a>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
|
||||
{/* 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
|
||||
className={
|
||||
whichTab === "storage"
|
||||
@@ -112,35 +142,6 @@ const StoragePage = (props) => {
|
||||
>
|
||||
<AccountsTab userData={userData} />
|
||||
</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>
|
||||
|
||||
@@ -64,9 +64,11 @@ export default async function ApiProxy(req, res) {
|
||||
var fieldSort = req.query.fieldSort || "desc";
|
||||
var showNumberOfRecords = req.query.showNumberOfRecords || 10;
|
||||
var documentType = req.query.documentType || "all";
|
||||
var documentOrigin = req.query.documentOrigin || "all";
|
||||
var numberOfWeeks = req.query.numberWeeks || 1;
|
||||
|
||||
var docTypeQueryString = "";
|
||||
var docOriginQueryString = "";
|
||||
|
||||
if (documentType != "all") {
|
||||
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) {
|
||||
const today = new Date();
|
||||
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 " +
|
||||
daysAgoISO(numberOfWeeks) +
|
||||
docTypeQueryString +
|
||||
docOriginQueryString +
|
||||
"&$orderby=" +
|
||||
orderby +
|
||||
" " +
|
||||
@@ -115,7 +139,7 @@ export default async function ApiProxy(req, res) {
|
||||
|
||||
console.log(
|
||||
"\n==========================================\n",
|
||||
"\nnew docs search ",
|
||||
"\nnew docs search---- ",
|
||||
"\n\nQuery url: " + queryUrl,
|
||||
"\n\nRelay link: " + WEBAPI_URL + queryUrl + hashAPIPath(queryUrl),
|
||||
"\n==========================================\n"
|
||||
|
||||
Reference in New Issue
Block a user