Task assignment #89

hc00364289 · 2020-11-10T11:45:55Z

@zlavergne :pull request is ready,request you review it and merge it accordingly.

zlavergne

For now I just did the backend parts of the review. I'll do the frontend once all the comments are addressed as it'll be easier for me to review.

Overall, the code is good. Most things are due to the TM3->TM4 refactor and they're in different places.

There is supposed to be project level setting for enforcing task assignment that's missing; refer to (hotosm/tasking-manager@ef335b4#diff-2587407fc1a2b17abe14008d9bd0cd5b6c7ad8f0ec2321a0ba999f10ed56e32b) for that implementation.

Also, please include the migration file. Those should be committed too.

I'm set to do the front end review as soon as these items are addressed.

backend/services/mapping_service.py

backend/__init__.py

backend/api/users/resources.py

backend/models/postgis/task.py

backend/services/mapping_service.py

backend/services/validator_service.py

zlavergne

In addition to the inline comments; there is a missing UI feature on the map. In the TM3 version, we used colored user-like icons on the task to show if it is assigned and if it assigned to you, it was a green logo. In TM4, let's use the same profile picture like the rest of the app. And if it's assigned to the logged in user, put a green score around the icon.

zlavergne · 2020-12-18T01:31:53Z

frontend/src/components/contributions/myTasksNav.js

+          to="?status=Assigned"
+          className={`di mh1 ${isActiveButton('Assigned', contributionsQuery)} ${linkCombo}`}
+        >
+          Tasks Assign to You


We need theses strings to be included the same way they are in the other <Link> elements. You'll have to add a new object in the messages.js file in this directory then use it here.

We'll want to be sure to do this for all strings throughout the app to ensure they're translatable

Suggested change

Tasks Assign to You

Tasks Assigned to You

Objects has been added in messages.js

zlavergne · 2021-01-13T01:25:23Z

frontend/src/components/contributions/taskResults.js

+
+      {state.isError && isAssignedFound && (
+        <div className="bg-tan pa4 mt3">
+          <DataTableExtensions {...tableData} print={false}>
+            <DataTable
+              title="Tasks Assigned to you "
+              columns={columns}
+              data={data}
+              defaultSortField="title"
+              pagination
+              highlightOnHover
+              customStyles={customStyles}
+            />
+          </DataTableExtensions>
+        </div>
+      )}
+      {!state.isError && (
+        <div className={`cf db`}>
+          <ReactPlaceholder ready={!state.isLoading} type="media" rows={10}>
+            <TaskCards pageOfCards={state.tasks} />
+          </ReactPlaceholder>
+        </div>
+      )}


For these front end elements; let's not use the Data Table and instead follow the existing card style components they already use. Like this:

Replaced data table with Task card

zlavergne · 2021-01-13T01:28:11Z

frontend/src/components/contributions/taskResults.js

+  const columns = [
+    {
+      name: 'Project Name',
+      selector: 'projectName',
+      sortable: true,
+      grow: 2,
+      minWidth: '300px',
+    },
+    {
+      name: 'Project',
+      selector: 'project',
+      sortable: true,
+      grow: 2,
+      minWidth: '100px',
+    },
+    {
+      name: 'Task Id',
+      selector: 'taskId',
+      sortable: true,
+      grow: 2,
+      minWidth: '100px',
+      cell: (row) => (
+        <Link to={`/projects/${row.project}/tasks?page=1&search=${row.taskId}`}>
+          {' '}
+          {row.taskId}{' '}
+        </Link>
+      ),
+    },
+    {
+      name: 'Status',
+      selector: 'status',
+      sortable: true,
+      grow: 2,
+      minWidth: '200px',
+    },
+    {
+      name: 'Project State',
+      selector: 'projectState',
+      sortable: true,
+      grow: 2,
+      minWidth: '200px',
+    },
+  ];
+  const tableData = {
+    columns,
+    data,
+  };
+  const customStyles = {
+    headCells: {
+      style: {
+        fontSize: '15px',
+        fontWeight: 'bold',
+      },
+    },
+
+    cells: {
+      style: {
+        fontSize: '14px',
+      },
+    },
+  };


Similar to below; let's not use the data table and instead use the existing card style components down below. So this can be removed

Replaced data table with Task card

zlavergne · 2021-01-13T01:35:53Z

frontend/src/components/contributions/taskResults.js

+  let isAssigned = state.statusCode;
+  let isAssignedFound;
+  if (isAssigned) {
+    isAssignedFound = isAssigned.indexOf('ASSIGNED') !== -1 ? true : false; //true
+  }
+
+  const [userData, setUserData] = useState({});
+
+  const token = useSelector((state) => state.auth.get('token'));
+  const userDetails = useSelector((state) => state.auth.get('userDetails'));
+  const userName = userDetails.username;
+
+  useEffect(() => {
+    getTasks();
+  }, []);
+
+  const getTasks = async () => {
+    //  const response = await fetchLocalJSONAPI(`user/${userName}/assigned-tasks/?closed=false`, token);
+    const response = await fetchLocalJSONAPI(
+      `user/${userName}/assigned-tasks/?pageSize=1000&closed=false`,
+      token,
+    );
+    const jsonData = await response.assignedTasks;
+    setUserData(jsonData);
+  };
+  let data = [];
+
+  for (var i = 0; i < userData.length; i++) {
+    var obj = {};
+    obj.id = i + 1;
+    obj.projectName = userData[i].projectName;
+    obj.project = userData[i].projectId;
+    obj.taskId = userData[i].taskId;
+    obj.status = userData[i].taskStatus;
+
+    obj.projectState = userData[i].taskStatus;
+    data.push(obj);
+  }


This file should be primarily for the rendering of components. Can these utilities be worked into a hook similarly to how the useTaskContributionAPI works with this component file.

This TaskResult component is sent a state variable in /src/views/contributions.js. That state variable is populated by the useTaskContributionAPI hook. It would probably be best if we can create a new hook, then add update the same state variable. We should be able to check the url params to determine which hook to set the state to.

Now new tabs are referring Hook in UseTaskContributionAPI

zlavergne · 2021-01-13T01:47:53Z

frontend/src/components/contributions/myTasksNav.js

@@ -88,6 +88,12 @@ export const MyTasksNav = props => {
        >
          <FormattedMessage {...messages.archived} />
        </Link>
+        <Link
+          to="?status=Assigned"


Can we use a different param than status since this isn't really a status. I think using assignment is fine for the param and the values can be ASSIGNED_TO or ASSIGNED_BY

Speaking of which, there should also be a "Tasks Assigned by You" filter that seems to be missing.

assignment has been added

zlavergne · 2021-01-13T02:13:11Z

frontend/src/components/taskSelection/index.js

+  const getUsers = useCallback((id) => {
+    fetchLocalJSONAPI(`users/`, token)
+      .then((res) => {
+        setUsers(res.users);
+      })
+      .catch((e) => console.log('call back failed in task index file' + e));
+  }, []);


This currently gets all the users in the system. We should restrict it to only get users who are allowed to work on the project. This may take adding an additional API to the existing backend, I'm not sure.

relevant api changes are done

zlavergne · 2021-01-13T02:17:22Z

frontend/src/components/taskSelection/taskList.js

+            <div className="pr2 dib v-mid" title={msg}>
+              <Popup
+                trigger={
+                  <ProfilePictureIcon


instead of using this icon, could you try using the user profile picture in the same place?

UserAvatar is not supported by Popup,so with help of buttons same look and feel has been developed and using inside Popup

hc00364289 added 5 commits November 4, 2020 17:22

Initial commit for UI components Task Assignment

8e1826c

removed unused code

2615e95

initial commit for api

d890622

UI Code formatting with prettier

995e8d4

API changes after flask8 format

7ed6bef

facebook-github-bot added the CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. label Nov 10, 2020

github-actions bot added Component: Frontend Component: Backend labels Nov 10, 2020

zlavergne self-assigned this Nov 18, 2020

zlavergne self-requested a review November 18, 2020 16:47

zlavergne linked an issue Nov 18, 2020 that may be closed by this pull request

Task Assignment #27

Open

zlavergne requested review from zlavergne and removed request for zlavergne November 18, 2020 17:03

zlavergne modified the milestone: FB Internal Release Nov 18, 2020

zlavergne suggested changes Dec 4, 2020

View reviewed changes

hc00364289 added 3 commits December 8, 2020 16:14

ui style refinements

07ed244

Code review changes for api

264336f

enforce assignment migration script

7a1623f

zlavergne suggested changes Jan 13, 2021

View reviewed changes

Zack LaVergne and others added 3 commits January 15, 2021 12:04

Add migration file for Task Assignment

81d804a

TA code review changes and Data table replacement changes

713edae

UI styel refinements

fa8f212

hc00364289 and others added 3 commits February 4, 2021 17:21

APi changes for PR code review

a52c4ca

removed unused

5b9a9be

Fix migrations files

f83da4e

zlavergne added the PRIORITY Work on these first label Nov 9, 2021

zlavergne added this to the Hi-Pri Features milestone Nov 9, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Task assignment #89

Task assignment #89

hc00364289 commented Nov 10, 2020

zlavergne left a comment •

edited

Loading

zlavergne left a comment

zlavergne Dec 18, 2020

zlavergne Dec 23, 2020

hc00364289 Feb 4, 2021

zlavergne Jan 13, 2021

hc00364289 Feb 4, 2021

zlavergne Jan 13, 2021

hc00364289 Feb 4, 2021

zlavergne Jan 13, 2021

hc00364289 Feb 4, 2021

zlavergne Jan 13, 2021

zlavergne Jan 13, 2021

hc00364289 Feb 4, 2021

zlavergne Jan 13, 2021

hc00364289 Feb 4, 2021

zlavergne Jan 13, 2021

hc00364289 Feb 4, 2021

Task assignment #89

Are you sure you want to change the base?

Task assignment #89

Conversation

hc00364289 commented Nov 10, 2020

zlavergne left a comment • edited Loading

Choose a reason for hiding this comment

zlavergne left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

zlavergne left a comment •

edited

Loading