updated admin tabs and filtering
This commit is contained in:
@@ -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,
|
||||
|
||||
Reference in New Issue
Block a user