More complete task-status-list-retrieve check in.

src/js/actions/TaskActions.js

@@ -56,13 +56,25 @@ export default {
     Dispatcher.loadEndpoint('task-group-save', data);
   },
 
-  taskSave (taskGroupId = -1, taskDefinitionId = -1, incomingData = {}) {
-    // console.log('TaskActions, taskSave taskDefinitionId:', taskDefinitionId, ', incomingData:', incomingData);
+  taskSave (personId = -1, taskDefinitionId = -1, taskGroupId = -1, incomingData = {}) {
+    // console.log('TaskActions, taskSave personId:', personId, ', taskDefinitionId:', taskDefinitionId, ', ', taskGroupId:', taskGroupId, ', incomingData:', incomingData);
     const data = {
+      personId,
       taskDefinitionId,
       taskGroupId,
       ...incomingData,
     };
     Dispatcher.loadEndpoint('task-save', data);
   },
+
+  taskStatusListRetrieve (personIdList = []) {
+    // console.log('TaskActions, taskStatusListRetrieve personIdList:', personIdList);
+    if (personIdList) {
+      Dispatcher.loadEndpoint('task-status-list-retrieve', {
+        personIdList,
+      });
+    } else {
+      Dispatcher.loadEndpoint('task-status-list-retrieve');
+    }
+  },
 };

src/js/common/components/Search/SearchBase.jsx

@@ -4,8 +4,8 @@ import styled from 'styled-components';
 import colors from '../Style/Colors';
 import normalizedImagePath from '../../utils/normalizedImagePath';
 
-const closeIcon = normalizedImagePath('../../../img/global/icons/cross.svg');
-const searchIcon = normalizedImagePath('../../../img/global/icons/search.svg');
+const closeIcon = normalizedImagePath('../../../img/global/svg-icons/cross.svg');
+const searchIcon = normalizedImagePath('../../../img/global/svg-icons/search.svg');
 
 class SearchBase extends React.Component {
   constructor (props) {

src/js/components/Navigation/TabWithPushHistory.jsx

@@ -15,9 +15,7 @@ export default function TabWithPushHistory (props) {
   const { classes, id, label, to, value, change: handleTabChange } = props;
 
   function handleClick () {
-    console.log(`TabWithPushHistory to: ${to}`);
     if (handleTabChange) {
-      console.log(`TabWithPushHistory value: ${value}`);
       handleTabChange(value);
     }
   }

src/js/components/Person/PersonHeader.jsx → src/js/components/Person/PersonSummaryHeader.jsx

@@ -1,44 +1,25 @@
 import React from 'react';
-import { Link } from 'react-router-dom';
 import styled from 'styled-components';
-import PropTypes from 'prop-types';
 import { renderLog } from '../../common/utils/logging';
-import PersonStore from '../../stores/PersonStore';
 
 
-const PersonHeader = ({ showHeaderLabels, person }) => {
+const PersonSummaryHeader = () => {
   renderLog('PersonHeader');  // Set LOG_RENDER_EVENTS to log all renders
 
   return (
     <OnePersonHeader>
       {/* Width (below) of this PersonHeaderCell comes from the combined widths of the first x columns in PersonMemberList */}
-      <PersonHeaderCell largeFont titleCell width={15 + 150 + 125}>
-        {person && (
-          <Link to={`/person-home/${person.id}`}>
-            {PersonStore.getFullNamePreferred(person.personId)}
-          </Link>
-        )}
+      <PersonHeaderCell largeFont titleCell width={150 + 125}>
+        &nbsp;
+      </PersonHeaderCell>
+      <PersonHeaderCell width={190}>
+        Title / Volunteering Love
       </PersonHeaderCell>
-      {showHeaderLabels && (
-        <PersonHeaderCell width={190}>
-          Title / Volunteering Love
-        </PersonHeaderCell>
-      )}
       {/* Edit icon */}
-      {showHeaderLabels && (
-        <PersonHeaderCell width={20} />
-      )}
-      {/* Delete icon */}
-      {showHeaderLabels && (
-        <PersonHeaderCell width={20} />
-      )}
+      <PersonHeaderCell width={20} />
     </OnePersonHeader>
   );
 };
-PersonHeader.propTypes = {
-  showHeaderLabels: PropTypes.bool,
-  person: PropTypes.object,
-};
 
 const OnePersonHeader = styled('div')`
   align-items: center;
@@ -62,4 +43,4 @@ const PersonHeaderCell = styled('div', {
   ${width ? `width: ${width}px;` : ''};
 `));
 
-export default PersonHeader;
+export default PersonSummaryHeader;

src/js/components/Person/PersonSummaryRow.jsx

@@ -0,0 +1,180 @@
+import React from 'react';
+import styled from 'styled-components';
+import PropTypes from 'prop-types';
+import { Delete, Edit } from '@mui/icons-material';
+import { withStyles } from '@mui/styles';
+import AppObservableStore, { messageService } from '../../stores/AppObservableStore';
+import PersonStore from '../../stores/PersonStore';
+import TeamActions from '../../actions/TeamActions';
+import TeamStore from '../../stores/TeamStore';
+import DesignTokenColors from '../../common/components/Style/DesignTokenColors';
+import { renderLog } from '../../common/utils/logging';
+
+
+const PersonSummaryRow = ({ person, rowNumberForDisplay, teamId }) => {
+  renderLog('PersonSummaryRow');  // Set LOG_RENDER_EVENTS to log all renders
+  // const [person, setPerson] = React.useState({});
+
+  const onAppObservableStoreChange = () => {
+  };
+
+  const onPersonStoreChange = () => {
+  };
+
+  const onTeamStoreChange = () => {
+  };
+
+  const editPersonClick = (personId, hasEditRights = true) => {
+    if (hasEditRights) {
+      AppObservableStore.setGlobalVariableState('editPersonDrawerOpen', true);
+      AppObservableStore.setGlobalVariableState('editPersonDrawerPersonId', personId);
+    }
+  };
+
+  const personProfileClick = (personId) => {
+    AppObservableStore.setGlobalVariableState('personProfileDrawerOpen', true);
+    AppObservableStore.setGlobalVariableState('personProfileDrawerPersonId', personId);
+  };
+
+  React.useEffect(() => {
+    // setTeamMemberList([]);
+    const appStateSubscription = messageService.getMessage().subscribe(() => onAppObservableStoreChange());
+    onAppObservableStoreChange();
+    const personStoreListener = PersonStore.addListener(onPersonStoreChange);
+    onPersonStoreChange();
+    const teamStoreListener = TeamStore.addListener(onTeamStoreChange);
+    onTeamStoreChange();
+
+    return () => {
+      appStateSubscription.unsubscribe();
+      personStoreListener.remove();
+      teamStoreListener.remove();
+    };
+  }, []);
+
+  const hasEditRights = true;
+  return (
+    <OnePersonWrapper key={`teamMember-${person.personId}`}>
+      {rowNumberForDisplay && (
+        <PersonCell id={`index-personId-${person.personId}`} width={15}>
+          <GraySpan>
+            {rowNumberForDisplay}
+          </GraySpan>
+        </PersonCell>
+      )}
+      <PersonCell
+        id={`fullNamePreferred-personId-${person.personId}`}
+        onClick={() => personProfileClick(person.personId)}
+        style={{
+          cursor: 'pointer',
+          textDecoration: 'underline',
+          color: DesignTokenColors.primary500,
+        }}
+        width={150}
+      >
+        {PersonStore.getFullNamePreferred(person.personId)}
+      </PersonCell>
+      <PersonCell id={`location-personId-${person.personId}`} smallFont width={125}>
+        {PersonStore.getPersonById(person.personId).location}
+      </PersonCell>
+      <PersonCell id={`jobTitle-personId-${person.personId}`} smallestFont width={190}>
+        {PersonStore.getPersonById(person.personId).jobTitle}
+      </PersonCell>
+      {hasEditRights ? (
+        <PersonCell
+          id={`editPerson-personId-${person.personId}`}
+          onClick={() => editPersonClick(person.personId, hasEditRights)}
+          style={{ cursor: 'pointer' }}
+          width={20}
+        >
+          <EditStyled />
+        </PersonCell>
+      ) : (
+        <PersonCell
+          id={`editPerson-personId-${person.personId}`}
+          width={20}
+        >
+          &nbsp;
+        </PersonCell>
+      )}
+      {teamId && (
+        <>
+          {hasEditRights ? (
+            <PersonCell
+              id={`removeMember-personId-${person.personId}`}
+              onClick={() => TeamActions.removePersonFromTeam(person.personId, teamId)}
+              style={{ cursor: 'pointer' }}
+              width={20}
+            >
+              <DeleteStyled />
+            </PersonCell>
+          ) : (
+            <PersonCell
+              id={`removeMember-personId-${person.personId}`}
+              width={20}
+            >
+              &nbsp;
+            </PersonCell>
+          )}
+        </>
+      )}
+    </OnePersonWrapper>
+  );
+};
+PersonSummaryRow.propTypes = {
+  person: PropTypes.object.isRequired,
+  rowNumberForDisplay: PropTypes.number,
+  teamId: PropTypes.number,
+};
+
+const styles = (theme) => ({
+  ballotButtonIconRoot: {
+    marginRight: 8,
+  },
+  addTeamButtonRoot: {
+    width: 120,
+    [theme.breakpoints.down('md')]: {
+      width: '100%',
+    },
+  },
+});
+
+const DeleteStyled = styled(Delete)`
+  color: ${DesignTokenColors.neutral200};
+  width: 20px;
+  height: 20px;
+`;
+
+const EditStyled = styled(Edit)`
+  color: ${DesignTokenColors.neutral100};
+  height: 16px;
+  margin-left: 2px;
+  width: 16px;
+`;
+
+const GraySpan = styled('span')`
+  color: ${DesignTokenColors.neutral400};
+`;
+
+const OnePersonWrapper = styled('div')`
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+`;
+
+const PersonCell = styled('div', {
+  shouldForwardProp: (prop) => !['smallFont', 'smallestFont', 'width'].includes(prop),
+})(({ smallFont, smallestFont, width }) => (`
+  align-content: center;
+  border-bottom: 1px solid #ccc;
+  ${(smallFont && !smallestFont) ? 'font-size: .9em;' : ''};
+  ${(smallestFont && !smallFont) ? 'font-size: .8em;' : ''};
+  height: 22px;
+  ${width ? `max-width: ${width}px;` : ''};
+  ${width ? `min-width: ${width}px;` : ''};
+  overflow: hidden;
+  white-space: nowrap;
+  ${width ? `width: ${width}px;` : ''};
+`));
+
+export default withStyles(styles)(PersonSummaryRow);

src/js/components/Task/TaskListForPerson.jsx

@@ -0,0 +1,76 @@
+import React from 'react';
+import styled from 'styled-components';
+import PropTypes from 'prop-types';
+import AppObservableStore, { messageService } from '../../stores/AppObservableStore';
+import PersonStore from '../../stores/PersonStore';
+import TaskStore from '../../stores/TaskStore';
+import TaskSummaryRow from './TaskSummaryRow';
+import { renderLog } from '../../common/utils/logging';
+
+
+const TaskListForPerson = ({ personId, showCompletedTasks }) => {
+  renderLog('TaskListForPerson');  // Set LOG_RENDER_EVENTS to log all renders
+  const [taskList, setTaskList] = React.useState([]);
+
+  const onAppObservableStoreChange = () => {
+  };
+
+  const onRetrieveTaskStatusListChange = () => {
+    const taskListTemp = TaskStore.getTaskListForPerson(personId);
+    setTaskList(taskListTemp);
+  };
+
+  const onPersonStoreChange = () => {
+    onRetrieveTaskStatusListChange();
+  };
+
+  const onTaskStoreChange = () => {
+    onRetrieveTaskStatusListChange();
+  };
+
+  React.useEffect(() => {
+    // setTaskListForPerson([]);
+    const appStateSubscription = messageService.getMessage().subscribe(() => onAppObservableStoreChange());
+    onAppObservableStoreChange();
+    const personStoreListener = PersonStore.addListener(onPersonStoreChange);
+    onPersonStoreChange();
+    const taskStoreListener = TaskStore.addListener(onTaskStoreChange);
+    onTaskStoreChange();
+
+    return () => {
+      appStateSubscription.unsubscribe();
+      personStoreListener.remove();
+      taskStoreListener.remove();
+    };
+  }, []);
+
+  React.useEffect(() => {
+    // console.log('useEffect personId changed:', personId);
+  }, [personId]);
+
+  // const taskList = TaskStore.getTaskListForPerson(personId);
+  return (
+    <TaskListWrapper>
+      {taskList.map((task, index) => (
+        <TaskSummaryRow
+          hideIfCompleted={!showCompletedTasks}
+          key={`taskSummaryRow-${task.personId}-${task.taskDefinitionId}`}
+          personId={personId}
+          taskDefinitionId={task.taskDefinitionId}
+          taskGroupId={task.taskGroupId}
+          rowNumberForDisplay={index + 1}
+        />
+      ))}
+    </TaskListWrapper>
+  );
+};
+TaskListForPerson.propTypes = {
+  personId: PropTypes.number.isRequired,
+  showCompletedTasks: PropTypes.bool,
+};
+
+const TaskListWrapper = styled('div')`
+  margin-bottom: 8px;
+`;
+
+export default TaskListForPerson;