Projects Overview

[TanyaStere42]

Feature description and context

Why this feature? The current project overview page has an insanely long load time for the data that is presented. We can use this as a first implementation of a table if search is not accessible

Do any roles have different access/views?

• Definitely: researcher can see their own projects, admins can see all projects.
• Maybe: the project owner can see the edit project button. Note this does not need to live in the project overview page; it can be inside the project

What pages are impacted?

• replaces /projects/projectList.jsp

Feature sign-off requirements

Non-functional requirements

• All strings are wrapped and localized in the supported languages
• leverages components (data table) and styles

Functional requirements

• tab title: Wildbook - My Projects
• url: /react/project/myProjects
• only users who are signed in can see the projects page
• header "My Data>My Projects" links to react/project/myProjects
• when user click on New Project button, it links to /projects/createProject.jsp
• columns are "Project name" (string), "Project ID" (string), "Percent Identified" (float%), "Encounters" (integer)
• page title "Projects for [username]"

Design

• Figma link

Technical Notes

API from https://github.com/WildMeOrg/Wildbook/pull/705

Notes:

• table
  • the table should use table header, table rows components
  • the rows should alternate between grey [for odd rows] and white [for even rows]
  • the sort button in the header should be working. on clicking once, the column will be sorted in descending order. on clicking sort again and again, the sort should switch between ascending and descending
  • the sort icon should be highlighted in blue when it is active
  • when user applies sort on another column the sort for previous column will be removed
• pagination
  • by default, 10 rows will be shown
  • if user chooses any other values in pagination controls, table should update accordingly
  • user can go to any pages by typing in the page number
  • user can click on specific page numbers to go to that page
  • user can click on previous and next to go to respective pages
  • user can see how many items are there in the pagination
  • user can see how many pages are there in the pagination [6/10 page]

[maisie-fisher]

Hi! Can I work on this ticket?

[TanyaStere42]

absolutely!