Adding Questionnaires, Questions and Answers. Added SystemSettings page. Reorganized Drawers files. Added more edit and delete icons. Added ORGANIZATION_NAME to config-template.js.

package.json

@@ -141,7 +141,7 @@
     "react": "~17.0.2",
     "react-bootstrap": "^1.6.4",
     "react-confetti": "^6.1.0",
-    "react-copy-to-clipboard": "^5.0.3",
+    "react-copy-to-clipboard": "^5.1.0",
     "react-dom": "~17.0.2",
     "react-ga4": "^2.1.0",
     "react-google-autocomplete": "^2.6.1",

src/App.jsx

@@ -31,7 +31,10 @@ const FAQ = React.lazy(() => import(/* webpackChunkName: 'FAQ' */ './js/pages/FA
 const Footer = React.lazy(() => import(/* webpackChunkName: 'Footer' */ './js/components/Navigation/Footer'));
 const Header = React.lazy(() => import(/* webpackChunkName: 'Header' */ './js/components/Navigation/Header'));
 const PageNotFound = React.lazy(() => import(/* webpackChunkName: 'PageNotFound' */ './js/pages/PageNotFound'));
-const TeamMembers = React.lazy(() => import(/* webpackChunkName: 'TeamMembers' */ './js/pages/TeamMembers'));
+const AnswerQuestionsForm = React.lazy(() => import(/* webpackChunkName: 'AnswerQuestionsForm' */ './js/pages/AnswerQuestionsForm'));
+const QuestionnaireQuestionList = React.lazy(() => import(/* webpackChunkName: 'QuestionnaireQuestionList' */ './js/pages/SystemSettings/Questionnaire'));
+const SystemSettings = React.lazy(() => import(/* webpackChunkName: 'SystemSettings' */ './js/pages/SystemSettings/SystemSettings'));
+const TeamMembers = React.lazy(() => import(/* webpackChunkName: 'TeamMembers' */ './js/pages/TeamHome'));
 const Teams = React.lazy(() => import(/* webpackChunkName: 'Teams' */ './js/pages/Teams'));
 
 // There are just too many "prop spreadings" in the use of Route, if someone can figure out an alternative...
@@ -276,8 +279,11 @@ class App extends Component {
                 <Switch>
                   <PrivateRoute path="/faq" component={FAQ} isAuthenticated={localStorage.getItem('isAuthenticated')} />
                   <Route path="/login" exact><Login /></Route>
+                  <Route path="/q/:questionnaireId/:personId" exact component={AnswerQuestionsForm} />
+                  <Route path="/questionnaire/:questionnaireId" exact component={QuestionnaireQuestionList} />
+                  <Route path="/system-settings" exact component={SystemSettings} />
                   <Route path="/teams" exact component={Teams} />
-                  <Route path="/team-members/:teamId" exact component={TeamMembers} />
+                  <Route path="/team-home/:teamId" exact component={TeamMembers} />
                   <Route path="/" exact component={Teams} />
 
                   <Route path="*" component={PageNotFound} />

src/js/actions/QuestionnaireActions.js

@@ -0,0 +1,67 @@
+import Dispatcher from '../common/dispatcher/Dispatcher';
+
+export default {
+  questionListRetrieve (questionnaireId, searchText = '') {
+    // console.log('QuestionnaireActions, questionListRetrieve searchText:', searchText);
+    if (searchText) {
+      Dispatcher.loadEndpoint('question-list-retrieve', {
+        questionnaireId,
+        searchText,
+      });
+    } else {
+      Dispatcher.loadEndpoint('question-list-retrieve', {
+        questionnaireId,
+      });
+    }
+  },
+
+  questionnaireListRetrieve (searchText = '') {
+    // console.log('QuestionnaireActions, questionnaireListRetrieve searchText:', searchText);
+    if (searchText) {
+      Dispatcher.loadEndpoint('questionnaire-list-retrieve', {
+        searchText,
+      });
+    } else {
+      Dispatcher.loadEndpoint('questionnaire-list-retrieve');
+    }
+  },
+
+  questionnaireRetrieve (questionnaireId = '') {
+    // console.log('QuestionnaireActions, questionnaireRetrieve questionnaireId:', questionnaireId);
+    if (questionnaireId) {
+      Dispatcher.loadEndpoint('questionnaire-retrieve', {
+        questionnaireId,
+      });
+    } else {
+      Dispatcher.loadEndpoint('questionnaire-retrieve');
+    }
+  },
+
+  questionnaireAnswerListSave (questionnaireId = -1, personId = -1, incomingData = {}) {
+    const data = {
+      questionnaireId,
+      personId,
+      ...incomingData,
+    };
+    Dispatcher.loadEndpoint('answer-list-save', data);
+  },
+
+  questionnaireSave (questionnaireId = -1, incomingData = {}) {
+    // console.log('QuestionnaireActions, questionnaireSave questionnaireId:', questionnaireId, ', incomingData:', incomingData);
+    const data = {
+      questionnaireId,
+      ...incomingData,
+    };
+    Dispatcher.loadEndpoint('questionnaire-save', data);
+  },
+
+  questionSave (questionnaireId = -1, questionId = -1, incomingData = {}) {
+    // console.log('QuestionnaireActions, questionSave questionId:', questionId, ', incomingData:', incomingData);
+    const data = {
+      questionId,
+      questionnaireId,
+      ...incomingData,
+    };
+    Dispatcher.loadEndpoint('question-save', data);
+  },
+};

src/js/common/components/Style/DesignTokenColors.js

@@ -132,6 +132,10 @@ const DesignTokenColors = {
   alert300: primitiveColorNames.redUI300,
   alert400: primitiveColorNames.redUI400,
   alert500: primitiveColorNames.redUI500,
+  alert600: primitiveColorNames.redUI600,
+  alert700: primitiveColorNames.redUI700,
+  alert800: primitiveColorNames.redUI800,
+  alert900: primitiveColorNames.redUI900,
   avatarBlue900: primitiveColorNames.blueUI900,
   avatarGreen900: primitiveColorNames.greenUI900,
   avatarOrange900: primitiveColorNames.orangeUI900,
@@ -140,10 +144,6 @@ const DesignTokenColors = {
   avatarYellow800: primitiveColorNames.yellowUI800,
   avatarYellow900: primitiveColorNames.yellowUI900,
   avatarGray600: primitiveColorNames.grayUI600,
-  alert600: primitiveColorNames.redUI600,
-  alert700: primitiveColorNames.redUI700,
-  alert800: primitiveColorNames.redUI800,
-  alert900: primitiveColorNames.redUI900,
   caution50: primitiveColorNames.yellowUI50,
   caution100: primitiveColorNames.yellowUI100,
   caution200: primitiveColorNames.yellowUI200,

src/js/common/utils/convertToInteger.js

@@ -0,0 +1,3 @@
+export default function convertToInteger (incomingNumber) {
+  return parseInt(incomingNumber, 10) || 0;
+}

src/js/common/utils/prepareDataPackageFromAppObservableStore.js

@@ -6,8 +6,7 @@ export default function prepareDataPackageFromAppObservableStore (acceptedVariab
   for (let i = 0; i < acceptedVariables.length; i++) {
     // Ex/ emailPersonalToBeSaved and emailPersonalChanged
     // console.log(`prepareData: ${acceptedVariables[i]}ToBeSaved:`, AppObservableStore.getGlobalVariableState(`${acceptedVariables[i]}ToBeSaved`));
-    if (AppObservableStore.getGlobalVariableState(`${acceptedVariables[i]}ToBeSaved`) &&
-        AppObservableStore.getGlobalVariableState(`${acceptedVariables[i]}Changed`)) {
+    if (AppObservableStore.getGlobalVariableState(`${acceptedVariables[i]}Changed`)) {
       // If the value has changed, add it to the data dictionary
       if (AppObservableStore.getGlobalVariableState(`${acceptedVariables[i]}Changed`) === true) {
         data[`${acceptedVariables[i]}Changed`] = true;

src/js/components/Drawers/AddPersonDrawer.jsx

@@ -7,7 +7,7 @@ import AppObservableStore, { messageService } from '../../stores/AppObservableSt
 import PersonStore from '../../stores/PersonStore';
 import TeamStore from '../../stores/TeamStore';
 import { renderLog } from '../../common/utils/logging';
-import AddPersonDrawerMainContent from './AddPersonDrawerMainContent';
+import AddPersonDrawerMainContent from '../Person/AddPersonDrawerMainContent';
 
 
 const AddPersonDrawer = ({ classes }) => {  //  classes, teamId

src/js/components/Drawers/AddTeamDrawer.jsx

@@ -4,61 +4,40 @@ import PropTypes from 'prop-types';
 import { withStyles } from '@mui/styles';
 import DrawerTemplateA from './DrawerTemplateA';
 import { messageService } from '../../stores/AppObservableStore';
-// import TeamActions from '../actions/TeamActions';
+import PersonStore from '../../stores/PersonStore';
 import TeamStore from '../../stores/TeamStore';
-import SearchBar2024 from '../../common/components/Search/SearchBar2024';
 import { renderLog } from '../../common/utils/logging';
-import AddTeamForm from '../Team/AddTeamForm';
+import AddTeamDrawerMainContent from '../Team/AddTeamDrawerMainContent';
 
 
 const AddTeamDrawer = ({ classes }) => {  //  classes, teamId
   renderLog('AddTeamDrawer');  // Set LOG_RENDER_EVENTS to log all renders
-  const [mainContentJsx, setMainContentJsx] = React.useState(<></>);
   const [headerTitleJsx, setHeaderTitleJsx] = React.useState(<></>);
   const [headerFixedJsx, setHeaderFixedJsx] = React.useState(<></>);
-  const [searchText, setSearchText] = React.useState('');
 
   const onAppObservableStoreChange = () => {
   };
 
   const onRetrieveTeamChange = () => {
   };
 
-  const onTeamStoreChange = () => {
+  const onPersonStoreChange = () => {
     onRetrieveTeamChange();
   };
 
-  const searchFunction = (incomingSearchText) => {
-    setSearchText(incomingSearchText);
-  };
-
-  const clearFunction = () => {
-    setSearchText('');
+  const onTeamStoreChange = () => {
+    onRetrieveTeamChange();
   };
 
   React.useEffect(() => {
     const appStateSubscription = messageService.getMessage().subscribe(() => onAppObservableStoreChange());
     onAppObservableStoreChange();
-    const personStoreListener = TeamStore.addListener(onTeamStoreChange);
-    onTeamStoreChange();
+    const personStoreListener = PersonStore.addListener(onPersonStoreChange);
+    onPersonStoreChange();
     const teamStoreListener = TeamStore.addListener(onTeamStoreChange);
     onTeamStoreChange();
 
     setHeaderTitleJsx(<>Add Team</>);
-    const mainContentJsxTemp = (
-      <AddTeamDrawerWrapper>
-        <SearchBarWrapper>
-          <SearchBar2024
-            placeholder="Search by team name"
-            searchFunction={searchFunction}
-            clearFunction={clearFunction}
-            searchUpdateDelayTime={250}
-          />
-        </SearchBarWrapper>
-        <AddTeamForm />
-      </AddTeamDrawerWrapper>
-    );
-    setMainContentJsx(mainContentJsxTemp);
 
     return () => {
       appStateSubscription.unsubscribe();
@@ -71,7 +50,7 @@ const AddTeamDrawer = ({ classes }) => {  //  classes, teamId
     <DrawerTemplateA
       drawerId="addTeamDrawer"
       drawerOpenGlobalVariableName="addTeamDrawerOpen"
-      mainContentJsx={mainContentJsx}
+      mainContentJsx={<AddTeamDrawerMainContent />}
       headerTitleJsx={headerTitleJsx}
       headerFixedJsx={headerFixedJsx}
     />

src/js/components/Drawers/Drawers.jsx

@@ -1,48 +1,34 @@
-import React, { Suspense } from 'react';
+import React from 'react';
 import styled from 'styled-components';
-import PropTypes from 'prop-types';
 import { withStyles } from '@mui/styles';
 import AddPersonDrawer from './AddPersonDrawer';
+import EditQuestionnaireDrawer from './EditQuestionnaireDrawer';
 import AddTeamDrawer from './AddTeamDrawer';
 import EditPersonDrawer from './EditPersonDrawer';
-import { messageService } from '../../stores/AppObservableStore';
+import EditQuestionDrawer from './EditQuestionDrawer';
+import PersonProfileDrawer from './PersonProfileDrawer';
 import { renderLog } from '../../common/utils/logging';
 
 
 const Drawers = () => {  //  classes, teamId
   renderLog('Drawers');  // Set LOG_RENDER_EVENTS to log all renders
 
-  const onAppObservableStoreChange = () => {
-  };
-
-  React.useEffect(() => {
-    const appStateSubscription = messageService.getMessage().subscribe(() => onAppObservableStoreChange());
-    onAppObservableStoreChange();
-
-    return () => {
-      appStateSubscription.unsubscribe();
-    };
-  }, []);
-
   return (
-    <Suspense fallback={<></>}>
+    <DrawersWrapper>
+      <PersonProfileDrawer />
       <AddPersonDrawer />
       <AddTeamDrawer />
       <EditPersonDrawer />
-    </Suspense>
+      <EditQuestionDrawer />
+      <EditQuestionnaireDrawer />
+    </DrawersWrapper>
   );
 };
-Drawers.propTypes = {
-  match: PropTypes.object,
-};
 
 const styles = () => ({
 });
 
-const SearchBarWrapper = styled('div')`
-  // margin-top: 14px;
-  // margin-bottom: 8px;
-  width: 100%;
+const DrawersWrapper = styled('div')`
 `;
 
 export default withStyles(styles)(Drawers);

src/js/components/Drawers/EditPersonDrawer.jsx

@@ -7,7 +7,7 @@ import AppObservableStore, { messageService } from '../../stores/AppObservableSt
 import PersonStore from '../../stores/PersonStore';
 import TeamStore from '../../stores/TeamStore';
 import { renderLog } from '../../common/utils/logging';
-import EditPersonDrawerMainContent from './EditPersonDrawerMainContent';
+import EditPersonDrawerMainContent from '../Person/EditPersonDrawerMainContent';
 
 
 const EditPersonDrawer = ({ classes }) => {  //  classes, teamId

src/js/components/Drawers/EditQuestionDrawer.jsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import DrawerTemplateA from './DrawerTemplateA';
+import { renderLog } from '../../common/utils/logging';
+import EditQuestionDrawerMainContent from '../Questionnaire/EditQuestionDrawerMainContent';
+import AppObservableStore, { messageService } from '../../stores/AppObservableStore';
+
+
+const EditQuestionDrawer = () => {
+  renderLog('EditQuestionDrawer');  // Set LOG_RENDER_EVENTS to log all renders
+  const [headerTitleJsx, setHeaderTitleJsx] = React.useState(<></>);
+  const [headerFixedJsx, setHeaderFixedJsx] = React.useState(<></>);
+
+  const onAppObservableStoreChange = () => {
+    const questionIdTemp = AppObservableStore.getGlobalVariableState('editQuestionDrawerQuestionId');
+    if (questionIdTemp >= 0) {
+      setHeaderTitleJsx(<>Edit Question</>);
+    } else {
+      setHeaderTitleJsx(<>Add Question</>);
+    }
+  };
+
+  React.useEffect(() => {
+    const appStateSubscription = messageService.getMessage().subscribe(() => onAppObservableStoreChange());
+    onAppObservableStoreChange();
+
+    return () => {
+      appStateSubscription.unsubscribe();
+    };
+  }, []);
+
+  return (
+    <DrawerTemplateA
+      drawerId="editQuestionDrawer"
+      drawerOpenGlobalVariableName="editQuestionDrawerOpen"
+      mainContentJsx={<EditQuestionDrawerMainContent />}
+      headerTitleJsx={headerTitleJsx}
+      headerFixedJsx={headerFixedJsx}
+    />
+  );
+};
+EditQuestionDrawer.propTypes = {
+};
+
+export default EditQuestionDrawer;

src/js/components/Drawers/EditQuestionnaireDrawer.jsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import AppObservableStore, { messageService } from '../../stores/AppObservableStore';
+import DrawerTemplateA from './DrawerTemplateA';
+import { renderLog } from '../../common/utils/logging';
+import EditQuestionnaireDrawerMainContent from '../Questionnaire/EditQuestionnaireDrawerMainContent';
+
+
+const EditQuestionnaireDrawer = () => {
+  renderLog('EditQuestionnaireDrawer');  // Set LOG_RENDER_EVENTS to log all renders
+  const [headerTitleJsx, setHeaderTitleJsx] = React.useState(<></>);
+  const [headerFixedJsx, setHeaderFixedJsx] = React.useState(<></>);
+
+  const onAppObservableStoreChange = () => {
+    const questionnaireIdTemp = AppObservableStore.getGlobalVariableState('editQuestionnaireDrawerQuestionnaireId');
+    if (questionnaireIdTemp >= 0) {
+      setHeaderTitleJsx(<>Edit Questionnaire</>);
+    } else {
+      setHeaderTitleJsx(<>Add Questionnaire</>);
+    }
+  };
+
+  React.useEffect(() => {
+    const appStateSubscription = messageService.getMessage().subscribe(() => onAppObservableStoreChange());
+    onAppObservableStoreChange();
+
+    return () => {
+      appStateSubscription.unsubscribe();
+    };
+  }, []);
+
+  return (
+    <DrawerTemplateA
+      drawerId="editQuestionnaireDrawer"
+      drawerOpenGlobalVariableName="editQuestionnaireDrawerOpen"
+      mainContentJsx={<EditQuestionnaireDrawerMainContent />}
+      headerTitleJsx={headerTitleJsx}
+      headerFixedJsx={headerFixedJsx}
+    />
+  );
+};
+EditQuestionnaireDrawer.propTypes = {
+};
+
+export default EditQuestionnaireDrawer;