From b95c2db87d750fa8e45c812fc9e3edb17b710155 Mon Sep 17 00:00:00 2001 From: dalemcgrew Date: Sat, 15 Feb 2025 07:13:03 -0800 Subject: [PATCH] Got setShowHeaderFooter working, so we can turn off header (or parts of the header) for certain pages. Turned header logo back on. Reactivated team search. Moved access to AnswerQuestions outside of sign in. Made it possible to click header tabs to get back to section pages (e.g. SystemSettings) --- src/App.jsx | 9 ++- src/js/components/Navigation/Header.jsx | 2 +- src/js/components/Navigation/HeaderBar.jsx | 75 ++++++++++++++----- .../components/Navigation/HeaderBarLogo.jsx | 10 +-- .../Team/AddTeamDrawerMainContent.jsx | 62 ++++++++++----- src/js/pages/AnswerQuestions.jsx | 10 ++- src/js/pages/Login.jsx | 6 +- src/js/pages/Teams.jsx | 2 +- 8 files changed, 122 insertions(+), 54 deletions(-) diff --git a/src/App.jsx b/src/App.jsx index e8e3f1a..b15292a 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -34,7 +34,7 @@ const Teams = React.lazy(() => import(/* webpackChunkName: 'Teams' */ './js/page function App () { renderLog('App'); - const [hideHeader] = useState(false); + const [hideHeader, setHideHeader] = useState(false); const [showDevtools] = useState(webAppConfig.ENABLE_REACT_QUERY_TOOLS !== undefined ? webAppConfig.ENABLE_REACT_QUERY_TOOLS : true); @@ -60,6 +60,11 @@ function App () { }; }, []); + const setShowHeaderFooter = (showHeaderFooter) => { + console.log('--------- setShowHeaderFooter: ', showHeaderFooter); + setHideHeader(!showHeaderFooter); + }; + return ( <> @@ -73,10 +78,10 @@ function App () { } /> } /> + } /> }> } /> } /> - } /> } /> } /> } /> diff --git a/src/js/components/Navigation/Header.jsx b/src/js/components/Navigation/Header.jsx index 186b3f5..6ea711a 100644 --- a/src/js/components/Navigation/Header.jsx +++ b/src/js/components/Navigation/Header.jsx @@ -16,7 +16,7 @@ const Header = ({ hideHeader }) => {
- +
diff --git a/src/js/components/Navigation/HeaderBar.jsx b/src/js/components/Navigation/HeaderBar.jsx index d7f0754..2b34d0f 100644 --- a/src/js/components/Navigation/HeaderBar.jsx +++ b/src/js/components/Navigation/HeaderBar.jsx @@ -1,5 +1,6 @@ import { Button, Tab, Tabs } from '@mui/material'; import { withStyles } from '@mui/styles'; +import PropTypes from 'prop-types'; import React, { useEffect, useState } from 'react'; import { useNavigate } from 'react-router'; import styled from 'styled-components'; @@ -16,7 +17,7 @@ import HeaderBarLogo from './HeaderBarLogo'; // eslint-disable-next-line no-unused-vars -const HeaderBar = (classes) => { +const HeaderBar = ({ hideTabs }) => { renderLog('HeaderBar'); const navigate = useNavigate(); const { setAppContextValue, getAppContextValue } = useConnectAppContext(); @@ -24,7 +25,7 @@ const HeaderBar = (classes) => { const [scrolledDown] = useState(false); const [tabsValue, setTabsValue] = useState('1'); - const [showTabs] = useState(true); + const [showTabs, setShowTabs] = useState(true); const [isAuthenticated, setIsAuthenticated] = useState(false); const isAuth = getAppContextValue('isAuthenticated'); @@ -71,23 +72,50 @@ const HeaderBar = (classes) => { const handleTabChange = (event, newValue) => { // console.log(`handleTabChange newValue: ${newValue}`); // setTabsValue(newValue); - switch (newValue) { - case '1': - navigate('/tasks'); - break; - case '2': - navigate('/teams'); - break; - case '3': - navigate('/system-settings'); - break; - default: - navigate('/tasks'); - break; + if (newValue) { + switch (newValue) { + case '1': + navigate('/tasks'); + break; + case '2': + navigate('/teams'); + break; + case '3': + navigate('/system-settings'); + break; + default: + navigate('/tasks'); + break; + } + initializeTabValue(); + } + }; + + const handleTabChangeClick = (newValue) => { + // console.log(`handleTabChangeClick newValue: ${newValue}`); + // setTabsValue(newValue); + if (newValue) { + switch (newValue) { + case '1': + navigate('/tasks'); + break; + case '2': + navigate('/teams'); + break; + case '3': + navigate('/system-settings'); + break; + default: + navigate('/tasks'); + break; + } } - initializeTabValue(); }; + useEffect(() => { + setShowTabs(!hideTabs); + }, [hideTabs]); + useEffect(() => { initializeTabValue(); }, []); @@ -104,10 +132,14 @@ const HeaderBar = (classes) => { {showTabs && ( - - - - + + handleTabChangeClick('1')} /> + handleTabChangeClick('2')} /> + handleTabChangeClick('3')} /> )} @@ -128,6 +160,9 @@ const HeaderBar = (classes) => { ); }; +HeaderBar.propTypes = { + hideTabs: PropTypes.bool, +}; const styles = (theme) => ({ ballotButtonIconRoot: { diff --git a/src/js/components/Navigation/HeaderBarLogo.jsx b/src/js/components/Navigation/HeaderBarLogo.jsx index 2d90bab..a3c6580 100644 --- a/src/js/components/Navigation/HeaderBarLogo.jsx +++ b/src/js/components/Navigation/HeaderBarLogo.jsx @@ -1,6 +1,6 @@ import PropTypes from 'prop-types'; import React from 'react'; -// import { Link } from 'react-router'; +import { Link } from 'react-router'; import styled from 'styled-components'; import normalizedImagePath from '../../common/utils/normalizedImagePath'; import HeaderLogoImage from './HeaderLogoImage'; @@ -15,11 +15,9 @@ const HeaderBarLogo = ({ light, linkOff }) => ( {linkOff ? ( ) : ( - // Hack 1/14/25 - <> - // - // - // + + + )} diff --git a/src/js/components/Team/AddTeamDrawerMainContent.jsx b/src/js/components/Team/AddTeamDrawerMainContent.jsx index 343997f..3db5228 100644 --- a/src/js/components/Team/AddTeamDrawerMainContent.jsx +++ b/src/js/components/Team/AddTeamDrawerMainContent.jsx @@ -5,44 +5,63 @@ import styled from 'styled-components'; import SearchBar2024 from '../../common/components/Search/SearchBar2024'; import { renderLog } from '../../common/utils/logging'; import AddTeamForm from './AddTeamForm'; +import { useConnectAppContext } from '../../contexts/ConnectAppContext'; // eslint-disable-next-line no-unused-vars const AddTeamDrawerMainContent = ({ classes }) => { // classes, teamId renderLog('AddTeamDrawerMainContent'); // Set LOG_RENDER_EVENTS to log all renders - // eslint-disable-next-line no-unused-vars - const [personSearchResultsList, setPersonSearchResultsList] = useState([]); + const { apiDataCache } = useConnectAppContext(); + const { allTeamsCache } = apiDataCache; - // TODO: 12/6/25, temporarily removed to simplify debug - // const searchFunction = (incomingSearchText) => { - // let searchingJustStarted = false; - // if (searchText.length === 0 && incomingSearchText.length > 0) { - // searchingJustStarted = true; - // } - // const isSearching = (incomingSearchText && incomingSearchText.length > 0); - // const teamIdTemp = AppObservableStore.getGlobalVariableState('addPersonDrawerTeamId'); - // if (apiCalming(`addPersonToTeamSearch-${teamIdTemp}-${incomingSearchText}`, 60000)) { // Only once per 60 seconds - // PersonActions.capturePersonListRetrieveData(incomingSearchText); - // } - // setSearchText(incomingSearchText); - // }; + const [allTeamsList] = useState(Object.values(allTeamsCache)); + const [teamSearchResultsList, setTeamSearchResultsList] = useState([]); + + const searchFunction = (incomingSearchText) => { + // console.log('AddTeamDrawerMainContent searchFunction incomingSearchText: ', incomingSearchText); + const isSearching = (incomingSearchText && incomingSearchText.length > 0); + if (isSearching) { + const isMatch = (team) => { + if (team) { + if (team.teamName && team.teamName.toLowerCase().includes(incomingSearchText.toLowerCase())) return true; + if (team.description && team.description.toLowerCase().includes(incomingSearchText.toLowerCase())) return true; + } + return false; + }; + const matchingTeams = allTeamsList ? allTeamsList.filter((team) => isMatch(team)) : []; + if (matchingTeams && matchingTeams.length > 0) { + setTeamSearchResultsList(matchingTeams); + } else { + setTeamSearchResultsList([]); + } + } else { + setTeamSearchResultsList([]); + } + }; const clearFunction = () => { - setPersonSearchResultsList([]); - // TODO setSearchText(''); + setTeamSearchResultsList([]); }; return ( console.log('searchFunction in AddTeamDrawerMainContent')} + placeholder="Search existing teams" + searchFunction={searchFunction} clearFunction={clearFunction} searchUpdateDelayTime={250} /> + {teamSearchResultsList.length > 0 && ( + <> + {teamSearchResultsList.map((team) => ( + + {team.teamName} + // eslint-disable-line react/no-array-index-key + ))} + + )} @@ -67,4 +86,7 @@ const SearchBarWrapper = styled('div')` margin-bottom: 16px; `; +const TeamItem = styled('div')` +`; + export default withStyles(styles)(AddTeamDrawerMainContent); diff --git a/src/js/pages/AnswerQuestions.jsx b/src/js/pages/AnswerQuestions.jsx index 80bf086..801580e 100644 --- a/src/js/pages/AnswerQuestions.jsx +++ b/src/js/pages/AnswerQuestions.jsx @@ -25,7 +25,7 @@ import { import convertToInteger from '../common/utils/convertToInteger'; -const AnswerQuestions = ({ classes }) => { +const AnswerQuestions = ({ classes, setShowHeaderFooter }) => { renderLog('AnswerQuestions'); // Set LOG_RENDER_EVENTS to log all renders const { apiDataCache } = useConnectAppContext(); const { allAnswersCache, allPeopleCache, allQuestionnairesCache, allQuestionsCache } = apiDataCache; @@ -89,6 +89,13 @@ const AnswerQuestions = ({ classes }) => { } }, [allQuestionsCache, questionnaireId]); + useEffect(() => { + setShowHeaderFooter(false); + return () => { + setShowHeaderFooter(true); + }; + }, []); + const allRequiredFieldsHaveValue = (inputValuesRevised) => { let requiredValueMissing = false; questionList.forEach((question) => { @@ -293,6 +300,7 @@ const AnswerQuestions = ({ classes }) => { }; AnswerQuestions.propTypes = { classes: PropTypes.object.isRequired, + setShowHeaderFooter: PropTypes.func.isRequired, }; const styles = (theme) => ({ diff --git a/src/js/pages/Login.jsx b/src/js/pages/Login.jsx index 96828f2..a147acf 100644 --- a/src/js/pages/Login.jsx +++ b/src/js/pages/Login.jsx @@ -286,7 +286,7 @@ const Login = ({ classes }) => { > Sign In - Forgot your password? + Forgot your password?