Implement "Move to Trash" and "Remove from Trash" Project Features

[entrotech]

Dependency

• Design Mock-up: Allow users to delete/hide projects #1383

Overview

We want users to be able to "move to trash" (and "restore from trash") projects that they own. This allows users to remove projects. Filtering requirements for the My Project page are TBD, but should, by default not list projects in the trash, but have the option to include them on the grid, in case the user wants to remove them from the trash. A separate issue will address how projects are permanently deleted - possibly by allowing the user to "empty the trash" or implementing a system that automatically deletes projects from the trash after a specified number of days.

Action Items

• Create a database migration script that adds a dateTrashed column to the Project table in the database. This column will be normally be null, but have the UTC datetime that the project was trashed for projects in the trash. there is no need to record which user hid or unhide the project, since it is the same as the createdBy user.
• Create a stored procedure called Project_Trash with parameters [id] int, trash bool and loginId int. The array of ids identifies the projects to update. the trash parameter indicates whether to trash (true) or untrash(false) the project(s), and the loginId must match the loginId column of each or the update should fail and return an error code indicating that the operation is unauthorized.
• Create a Web API endpoint with the path /api/projects/trash and body object. The request body should contain properties ids (an array of integers) and trash boolean. (The loginId parameter for the user should be extracted from the JSON Web token, to avoid tampering.) Add the appropriate methods to the project.controller.js, project.routes.js, project.service.js methods to implement the endpoint and call the stored procedure. This ensures that the request is coming from a logged in user and reliably determines the loginId of the user.
• At this time, it's not determined how many different places in the UI that the trash feature may be called. We can start by implementing the feature from the "More..." menu that appears on individual lines of the My Project page design. If the project is already in the trash, the menu choice should be to "Restore from Trash", if the project is not in the trash), the menu choice should be "Delete"
  

(This screenshot shows the TEMPORARY implementation of the My Projects Page, which includes icons to indicate if a project is hidden, trashed or snapshotted, since we need a visual indication of the project statuses until we can implement the desired filtering for the My Projects page.)

• You will need to create a client-side service to call the Web API endpoint.
• You will need to wire-up the delete/undelete context menu item to call the client-side service.
• When deleting, be sure to call the existing Delete modal dialog. Talk with the PMs about how the wording should be changed, since the delete is no longer immediate or permanent. I would prefer that we use the word Trash, instead of delete, since that seems to be what most applications do if an item is not deleted immediately.
• We anticipate that it might also be desirable for users to be able to trash/untrash multiple projects at once (hence the above convention to pass an array of (project) ids to the web api endpoint. To do this the selected projects must all have the same trash vs not in trash status, so the same operation will be performed on all selected projects. This is NOT part of this issue.
• It may also be desirable to show somewhere on the Project Wizard if a project is in the trash and maybe to provide a button to trash/untrash from the wizard. This is NOT part of this issue.

Resources/Instructions

• Related Design Issue Design Mock-up: Allow users to delete/hide projects #1383
• My Project Page Design Issue Design Mock ups for my project page #1386
• Create a more modal on my projects page #1388
  Icons to use:
  font-awesome free solid icons trash and trash-restore for "Move to Trash" and "Restore from Trash", respectively.

[kianadk]

@entrotech could you please add me to the team gdrive so i can grab the .env file?

[Biuwa]

@kianadk
Please provide update

Progress: "What is the current status of your project? What have you completed and what is left to do?"
Blockers: "Difficulties or errors encountered."
Availability: "How much time will you have this week to work on this issue?"
ETA: "When do you expect this issue to be completed?"
Pictures (if necessary): "Add any pictures that will help illustrate what you are working on.

[kianadk]

@Biuwa I've decided I need to step away from this project, I underestimated the time I had available to work on it. I'll unassign myself from the issue. Apologies for any inconvenience

[joelfuelling]

Clarifying Questions for PM/UX team:

1 - Is the wording below acceptable for the "Trash project" confirmation warning?

2 - From the context menu (screenshot below), are the existing terms 'Move to Trash' and 'Remove from Trash' sufficient?

3 - The default text color is currently red when it's not in the trash. What would be an ideal color for when it is in the trash?

Dev Team

I created a separate 'Trash' component mirroring the Delete component, so I could recreate the process as much to understand more of the process flow. That being said, I was a bit confused as if the end goal is to have the Delete functionality "built into" the projectTrashed (happens at the end of the grace period), or if there would be a separate delete component, or both? I got a bit caught up in parts of the structure which slowed me down but I would like to better understand the end goal for this portion!

Currently, I'm getting "TypeError: axios__WEBPACK_IMPORTED_MODULE_0___default(...).trash is not a function" when I click the 'Trach' button to alter the project.dateTrashed attribute, but I'm still working through it.

[Biuwa]

Red Hex Code is: B64E38
Change move to thrash to Delete

[Noushie]

View in Figma here

Deletion Modal:

Recovery Option:

Recovery Modal:

[Biuwa]

Please provide an update:

1. Progress(What is the current status of your project? What have you completed, and what is left to do):
2. Blockers(Difficulties or errors encountered):
3. Availability(How much time will you have this week to work on this issue):
4. ETA(When do you expect this issue to be completed):
5. Pictures (if necessary)(Add any pictures that will help illustrate what you are working on):