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

wevote · Jan 14, 2025 · 07acb7f · 07acb7f
1 parent 7044eee
commit 07acb7f
Show file tree

Hide file tree

Showing 8 changed files with 233 additions and 100 deletions.
diff --git a/src/js/actions/TaskActions.js b/src/js/actions/TaskActions.js
@@ -56,9 +56,10 @@ 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,

diff --git a/src/js/common/components/Search/SearchBase.jsx b/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) {

diff --git a/src/js/components/Task/TaskListForPerson.jsx b/src/js/components/Task/TaskListForPerson.jsx
@@ -8,7 +8,7 @@ import TaskSummaryRow from './TaskSummaryRow';
 import { renderLog } from '../../common/utils/logging';
 
 
-const TaskListForPerson = ({ personId }) => {
+const TaskListForPerson = ({ personId, showCompletedTasks }) => {
   renderLog('TaskListForPerson');  // Set LOG_RENDER_EVENTS to log all renders
   const [taskList, setTaskList] = React.useState([]);
 
@@ -52,13 +52,21 @@ const TaskListForPerson = ({ personId }) => {
   return (
     <TaskListWrapper>
       {taskList.map((task, index) => (
-        <TaskSummaryRow personId={personId} taskDefinitionId={task.taskDefinitionId} rowNumberForDisplay={index + 1} />
+        <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')`

diff --git a/src/js/components/Task/TaskSummaryRow.jsx b/src/js/components/Task/TaskSummaryRow.jsx
@@ -1,128 +1,185 @@
-import React from 'react';
+import React, { Suspense } from 'react';
 import styled from 'styled-components';
 import PropTypes from 'prop-types';
-import { Delete, Edit } from '@mui/icons-material';
+import { Edit, Info, Launch } from '@mui/icons-material';
+import { Checkbox, FormControlLabel } from '@mui/material'; // FormLabel, Radio, RadioGroup,
+import Tooltip from '@mui/material/Tooltip';
 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 TaskActions from '../../actions/TaskActions';
+import TaskStore from '../../stores/TaskStore';
 import DesignTokenColors from '../../common/components/Style/DesignTokenColors';
 import { renderLog } from '../../common/utils/logging';
 
 
-const TaskSummaryRow = ({ personId, rowNumberForDisplay, taskDefinitionId }) => {
+const OpenExternalWebSite = React.lazy(() => import(/* webpackChunkName: 'OpenExternalWebSite' */ '../../common/components/Widgets/OpenExternalWebSite'));
+
+const TaskSummaryRow = (
+  { classes, hideIfCompleted, personId, rowNumberForDisplay, taskDefinitionId,
+    taskGroupId },
+) => {
   renderLog('TaskSummaryRow');  // Set LOG_RENDER_EVENTS to log all renders
   // const [person, setTask] = React.useState({});
 
-  // const editTaskClick = (personId, hasEditRights = true) => {
-  //   if (hasEditRights) {
-  //     AppObservableStore.setGlobalVariableState('editTaskDrawerOpen', true);
-  //     AppObservableStore.setGlobalVariableState('editTaskDrawerPersonId', personId);
-  //   }
-  // };
-
-  // const personProfileClick = (personId) => {
-  //   AppObservableStore.setGlobalVariableState('personProfileDrawerOpen', true);
-  //   AppObservableStore.setGlobalVariableState('personProfileDrawerPersonId', personId);
-  // };
+  const updateTaskFieldInstant = (event) => {
+    if (event.target.name) {
+      let newValue;
+      if (event.target.type === 'checkbox') {
+        newValue = event.target.checked;
+      } else {
+        newValue = event.target.value || '';
+      }
+      const data = {
+        doneByPersonIdChanged: true,
+        // doneByPersonIdToBeSaved: PersonStore.getSignedInPersonId(),
+        doneByPersonIdToBeSaved: 1, // hard-coded for testing
+        [`${event.target.name}Changed`]: true,
+        [`${event.target.name}ToBeSaved`]: newValue,
+      };
+      let taskGroupIdTemp = taskGroupId;
+      if (!taskGroupId) {
+        taskGroupIdTemp = TaskStore.getTaskGroupIdByTaskDefinitionId(taskDefinitionId);
+      }
+      if (taskGroupIdTemp >= 0) {
+        data.taskGroupIdChanged = true;
+        data.taskGroupIdToBeSaved = taskGroupIdTemp;
+      } else {
+        data.taskGroupIdChanged = false;
+      }
+      // console.log('== updateTaskFieldInstant Before taskSave data:', data);
+      TaskActions.taskSave(personId, taskDefinitionId, taskGroupIdTemp, data);
+    } else {
+      console.error('updateTaskFieldInstant Invalid event:', event);
+    }
+  };
 
   React.useEffect(() => {
   }, []);
 
   // const hasEditRights = true;
+  const task = TaskStore.getTask(personId, taskDefinitionId);
+  const taskDefinition = TaskStore.getTaskDefinitionById(taskDefinitionId);
   const taskId = `${personId}-${taskDefinitionId}`;
+  if (hideIfCompleted && task.statusDone) {
+    return null;
+  }
   return (
     <OneTaskWrapper key={`teamMember-${taskId}`}>
       {rowNumberForDisplay && (
         <TaskCell id={`index-personId-${taskId}`} width={15}>
           <GraySpan>
-            {rowNumberForDisplay}
+            &nbsp;&nbsp;
           </GraySpan>
         </TaskCell>
       )}
-      <TaskCell
-        id={`fullNamePreferred-personId-${taskId}`}
-        // onClick={() => personProfileClick(taskId)}
-        style={{
-          cursor: 'pointer',
-          textDecoration: 'underline',
-          color: DesignTokenColors.primary500,
-        }}
-        width={150}
-      >
-        Task-Name-Here
+      <TaskCell id={`taskName-${taskId}`} width={300}>
+        {taskDefinition.taskDescription ? (
+          <Tooltip arrow id={`taskDescription-${taskId}`} title={taskDefinition.taskDescription}>
+            <span>{taskDefinition.taskName}</span>
+          </Tooltip>
+        ) : (
+          <span>{taskDefinition.taskName}</span>
+        )}
       </TaskCell>
-      <TaskCell id={`location-personId-${taskId}`} smallFont width={125}>
-        Cell 2
-        {/* {TaskStore.getTaskById(taskId).location} */}
+      <TaskCell id={`statusDoneCell-${taskId}`} width={75}>
+        {task.statusDone ? (
+          <CheckboxDoneWrapper>
+            <Checkbox
+              id={`statusDoneCheckbox-${taskId}`}
+              checked
+              className={classes.checkboxDoneRoot}
+              color="primary"
+              disabled
+              name="statusDone"
+            />
+            <CheckboxDone>Done</CheckboxDone>
+          </CheckboxDoneWrapper>
+        ) : (
+          <CheckboxLabel
+            classes={{ label: classes.checkboxLabel }}
+            control={(
+              <Checkbox
+                id={`statusDoneCheckbox-${taskId}`}
+                className={classes.checkboxRoot}
+                color="primary"
+                name="statusDone"
+                onChange={updateTaskFieldInstant}
+              />
+            )}
+            label="Done?"
+          />
+        )}
       </TaskCell>
-      <TaskCell id={`jobTitle-personId-${taskId}`} smallestFont width={190}>
-        Cell 3
+      <TaskCell id={`taskInstructions-${taskId}`} width={24}>
+        {(taskDefinition.taskInstructions) && (
+          <Tooltip
+            arrow
+            enterTouchDelay={0} // show with click in mobile
+            id={`taskDescription-${taskId}`}
+            leaveTouchDelay={3000}
+            title={taskDefinition.taskInstructions}
+          >
+            <InfoStyled />
+          </Tooltip>
+        )}
+      </TaskCell>
+      <TaskCell id={`taskActionUrlDiv-${taskId}`} width={24}>
+        {(taskDefinition.taskActionUrl) && (
+          <Suspense fallback={<></>}>
+            <OpenExternalWebSite
+              linkIdAttribute={`taskActionUrl-${taskId}`}
+              url={taskDefinition.taskActionUrl}
+              target="_blank"
+              body={(
+                <Tooltip arrow id={`taskActionUrlTooltip-${taskId}`} title={taskDefinition.taskActionUrl}>
+                  <LaunchStyled />
+                </Tooltip>
+              )}
+            />
+          </Suspense>
+        )}
       </TaskCell>
-      {/* {hasEditRights ? (
-        <TaskCell
-          id={`editTask-personId-${taskId}`}
-          onClick={() => editTaskClick(taskId, hasEditRights)}
-          style={{ cursor: 'pointer' }}
-          width={20}
-        >
-          <EditStyled />
-        </TaskCell>
-      ) : (
-        <TaskCell
-          id={`editTask-personId-${taskId}`}
-          width={20}
-        >
-          &nbsp;
-        </TaskCell>
-      )} */}
-      {/* {teamId && (
-        <>
-          {hasEditRights ? (
-            <TaskCell
-              id={`removeMember-personId-${taskId}`}
-              onClick={() => TeamActions.removeTaskFromTeam(taskId, teamId)}
-              style={{ cursor: 'pointer' }}
-              width={20}
-            >
-              <DeleteStyled />
-            </TaskCell>
-          ) : (
-            <TaskCell
-              id={`removeMember-personId-${taskId}`}
-              width={20}
-            >
-              &nbsp;
-            </TaskCell>
-          )}
-        </>
-      )} */}
     </OneTaskWrapper>
   );
 };
 TaskSummaryRow.propTypes = {
+  classes: PropTypes.object.isRequired,
+  hideIfCompleted: PropTypes.bool,
   personId: PropTypes.number.isRequired,
   rowNumberForDisplay: PropTypes.number,
   taskDefinitionId: PropTypes.number.isRequired,
+  taskGroupId: PropTypes.number,
 };
 
-const styles = (theme) => ({
-  ballotButtonIconRoot: {
-    marginRight: 8,
+const styles = () => ({
+  checkboxDoneRoot: {
+    marginLeft: '-10px',
+    paddingTop: 0,
+    paddingBottom: 0,
+  },
+  checkboxRoot: {
+    paddingTop: 0,
+    paddingLeft: '9px',
+    paddingBottom: 0,
   },
-  addTeamButtonRoot: {
-    width: 120,
-    [theme.breakpoints.down('md')]: {
-      width: '100%',
-    },
+  checkboxLabel: {
+    marginLeft: '-6px',
+    marginTop: 2,
   },
 });
 
-const DeleteStyled = styled(Delete)`
-  color: ${DesignTokenColors.neutral200};
-  width: 20px;
-  height: 20px;
+const CheckboxDone = styled('div')`
+  color: ${DesignTokenColors.neutral300};
+  margin-left: -6px;
+`;
+
+const CheckboxDoneWrapper = styled('div')`
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+`;
+
+const CheckboxLabel = styled(FormControlLabel)`
+  margin-bottom: 0 !important;
 `;
 
 const EditStyled = styled(Edit)`
@@ -132,10 +189,24 @@ const EditStyled = styled(Edit)`
   width: 16px;
 `;
 
+const InfoStyled = styled(Info)`
+  color: ${DesignTokenColors.neutral300};
+  height: 20px;
+  margin-left: 2px;
+  width: 20px;
+`;
+
 const GraySpan = styled('span')`
   color: ${DesignTokenColors.neutral400};
 `;
 
+const LaunchStyled = styled(Launch)`
+  color: ${DesignTokenColors.primary500};
+  cursor: pointer;
+  width: 16px;
+  height: 16px;
+`;
+
 const OneTaskWrapper = styled('div')`
   display: flex;
   align-items: center;
@@ -149,7 +220,7 @@ const TaskCell = styled('div', {
   // border-bottom: 1px solid #ccc;
   ${(smallFont && !smallestFont) ? 'font-size: .9em;' : ''};
   ${(smallestFont && !smallFont) ? 'font-size: .8em;' : ''};
-  height: 22px;
+  height: 28px;
   ${width ? `max-width: ${width}px;` : ''};
   ${width ? `min-width: ${width}px;` : ''};
   overflow: hidden;

diff --git a/src/js/components/Team/TeamMemberList.jsx b/src/js/components/Team/TeamMemberList.jsx
@@ -34,7 +34,12 @@ const TeamMemberList = ({ teamId }) => {
   return (
     <TeamMembersWrapper>
       {teamMemberList.map((person, index) => (
-        <PersonSummaryRow person={person} rowNumberForDisplay={index + 1} teamId={teamId} />
+        <PersonSummaryRow
+          key={`teamMember-${teamId}-${person.id}`}
+          person={person}
+          rowNumberForDisplay={index + 1}
+          teamId={teamId}
+        />
       ))}
     </TeamMembersWrapper>
   );

diff --git a/src/js/pages/Tasks.jsx b/src/js/pages/Tasks.jsx
@@ -22,7 +22,7 @@ import { renderLog } from '../common/utils/logging';
 
 const Tasks = ({ classes, match }) => {  //  classes, teamId
   renderLog('Tasks');  // Set LOG_RENDER_EVENTS to log all renders
-  const [showCompletedTasks, setShowCompletedTasks] = React.useState(true);
+  const [showCompletedTasks, setShowCompletedTasks] = React.useState(false);
   const [personList, setPersonList] = React.useState([]);
   const [taskListDictByPersonId, setTaskListDictByPersonId] = React.useState({});
   const [teamCount, setTeamCount] = React.useState(0);
@@ -108,7 +108,7 @@ const Tasks = ({ classes, match }) => {  //  classes, teamId
         {personList.map((person, index) => (
           <OneTeamWrapper key={`team-${person.id}`}>
             <PersonSummaryRow person={person} />
-            <TaskListForPerson personId={person.id} />
+            <TaskListForPerson personId={person.id} showCompletedTasks={showCompletedTasks} />
           </OneTeamWrapper>
         ))}
       </PageContentContainer>