diff --git a/src/projects-browser/Filters.jsx b/src/projects-browser/Filters.jsx index 7f1d70b..5d2c12a 100644 --- a/src/projects-browser/Filters.jsx +++ b/src/projects-browser/Filters.jsx @@ -1,13 +1,14 @@ import { useRef, useState } from "react"; import { useDispatch, useSelector } from "react-redux"; import Select from "react-select"; -import { selectFilters, selectTypeLists } from "./helpers/browserSlice"; +import { selectFilters, selectIsFiltered, selectTypeLists } from "./helpers/browserSlice"; import { getProjects, setShowPagination, resetFilters, toggleAllFos, toggleFos, + toggleListFiltered, updateFilter, updatePageData, } from "./helpers/browserSlice"; @@ -17,6 +18,8 @@ const Filters = () => { const dispatch = useDispatch(); const filters = useSelector(selectFilters); const typeLists = useSelector(selectTypeLists); + const filtered = useSelector(selectIsFiltered); + const orgList = typeLists.orgs.map((org) => { return { label: org, @@ -25,7 +28,6 @@ const Filters = () => { }); const selectRef = useRef(); const [orgValue, setOrgValue] = useState(null); - const [filtered, setFiltered] = useState(false); const fosSelectListStyle = { height: "200px", overflowX: "auto", @@ -56,6 +58,10 @@ const Filters = () => { } }; + const setFiltered = (b) => { + dispatch( toggleListFiltered(b) ); + } + const updateOrgs = (opt) => { setOrgValue(opt); dispatch(updateFilter({ name: "org", value: opt.value })); @@ -63,7 +69,11 @@ const Filters = () => { const buttonDisabled = () => { return ( - filters.org == "" && filters.allocationType == "" && filters.allFosToggled && filters.resource == "" + filters.org == "" + && filters.allocationType == "" + && filters.allFosToggled + && filters.resource == "" + && filters.requestNumber == "" ); }; @@ -170,6 +180,21 @@ const Filters = () => { +
+ Request Number +
+
+ handleFilterChange(e)} + /> +
+
+ + + ) + } + + return <> } return (
- {requestNumber()} {project.requestTitle}
- {project.pi} ({project.piInstitution}) +
+
+ {requestNumber()} {project.requestTitle}
+ {project.pi} ({project.piInstitution}) +
+
+ { requestNumberLink() } +
+
@@ -68,7 +128,7 @@ const Project = ({ project }) => {
- + Resources diff --git a/src/projects-browser/Project.module.scss b/src/projects-browser/Project.module.scss index 7922456..93345f6 100644 --- a/src/projects-browser/Project.module.scss +++ b/src/projects-browser/Project.module.scss @@ -2,3 +2,14 @@ white-space: pre-wrap; padding: 5px; } + +.plainButton { + background: none; + border: none; + color: #fff; +} + +.plainButton:hover { + background: none; + text-decoration: underline; +} diff --git a/src/projects-browser/helpers/browserSlice.js b/src/projects-browser/helpers/browserSlice.js index 3f313d7..5e0a8b3 100644 --- a/src/projects-browser/helpers/browserSlice.js +++ b/src/projects-browser/helpers/browserSlice.js @@ -4,6 +4,12 @@ import { initialState } from "./initialState"; export const initApp = createAsyncThunk( 'projectsBrowser/initApp', async(args, { getState, dispatch }) => { + const queryString = window.location.search; + const urlParams = new URLSearchParams(queryString); + if(urlParams.has('_requestNumber')){ + dispatch( updateFilter({ name: 'requestNumber', value: urlParams.get('_requestNumber')}) ) + dispatch( toggleListFiltered(true) ); + } await dispatch( getFilters() ); await dispatch( getProjects() ); dispatch( filterCleanup() ); @@ -44,28 +50,35 @@ export const getFilters = createAsyncThunk( export const getProjects = createAsyncThunk( 'projectsBrowser/getProjects', - async (args, { getState }) => { + async (args, { getState, dispatch }) => { const state = getState().projectsBrowser; const filters = state.filters; + const typeLists = state.typeLists; const fosList = typeLists.fosTypes.filter((fos) => fos.checked) let url = `${state.apiUrl}?page=${state.pageData.current_page}`; - if(fosList.length != typeLists.fosTypes.length){ - url += `&fos=${fosList.map((fos) => fos.fosTypeId).join(',')}`; - } + if(filters.requestNumber != ''){ + url += `&request_number=${filters.requestNumber}`; + dispatch( toggleSingleEntry(true) ); + } else { + dispatch( toggleSingleEntry(false) ); + if(fosList.length != typeLists.fosTypes.length){ + url += `&fos=${fosList.map((fos) => fos.fosTypeId).join(',')}`; + } - if(filters.org != '' && filters.org != '-- ALL --'){ - url += `&org=${encodeURIComponent(filters.org)}`; - } + if(filters.org != '' && filters.org != '-- ALL --'){ + url += `&org=${encodeURIComponent(filters.org)}`; + } - if(filters.allocationType != ''){ - url += `&allocation_type=${filters.allocationType}`; - } + if(filters.allocationType != ''){ + url += `&allocation_type=${filters.allocationType}`; + } - if(filters.resource != ''){ - url += `&resources=${filters.resource}`; + if(filters.resource != ''){ + url += `&resources=${filters.resource}`; + } } const response = await fetch(url); @@ -85,7 +98,8 @@ export const browserSlice = createSlice({ org: '', allocationType: '', allFosToggled: false, - resource: '' + resource: '', + requestNumber: '' } browserSlice.caseReducers.toggleAllFos(state); @@ -118,6 +132,12 @@ export const browserSlice = createSlice({ state.filters.allFosToggled = true; } }, + toggleListFiltered: (state, { payload }) => { + state.listIsFiltered = payload; + }, + toggleSingleEntry: (state, { payload }) => { + state.singleEntry = payload; + }, updateFilter: (state, { payload }) => { state.filters[payload.name] = payload.value; }, @@ -166,6 +186,8 @@ export const { setTypeLists, toggleAllFos, toggleFos, + toggleListFiltered, + toggleSingleEntry, updateFilter, updatePageData, } = browserSlice.actions; @@ -173,6 +195,8 @@ export const { export const selectFilters = (state) => state.projectsBrowser.filters; export const selectFiltersLoaded = (state) => state.projectsBrowser.filtersLoaded; export const selectFosTypes = (state) => state.projectsBrowser.fosTypes; +export const selectIsFiltered = (state) => state.projectsBrowser.listIsFiltered; +export const selectIsSingleEntry = (state) => state.projectsBrowser.singleEntry; export const selectProjectsLoaded = (state) => state.projectsBrowser.projectsLoaded; export const selectPageData = (state) => state.projectsBrowser.pageData; export const selectPages = (state) => state.projectsBrowser.selectPages; diff --git a/src/projects-browser/helpers/initialState.js b/src/projects-browser/helpers/initialState.js index 815c679..3911aa6 100644 --- a/src/projects-browser/helpers/initialState.js +++ b/src/projects-browser/helpers/initialState.js @@ -1,15 +1,18 @@ export const initialState = { apiUrl: null, + listIsFiltered: false, pages: 1, projects: [], projectsLoaded: false, filtersLoaded: true, showPagination: false, + singleEntry: false, filters: { org: '', allocationType: '', allFosToggled: true, - resource: '' + resource: '', + requestNumber: '', }, pageData: { current_page: 1,