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?