Add completion date "Bulk Edit" UI

[NoopDog]

Need

For planning and staffing purposes, we need to specify the quarter in which we would like certain tasks to be completed.

Figma

Approach

1. Configure that bulk edits are allowed on an entity

2. If any bulk edits are allowed on an entity the side checkboxes apper.

3. If the check box is selected the edit drop-down appears with just a single value, "Target Completion"

4. Selecting target completion shows the "Edit target completion" modal with "Quarter" and a list of quarters e.g. Q2 2024, Q4 2024, Q4 2024, Q1 2025. Always show the next year's worth of quarters.

5. Hitting save does a PUT request to the endpoint defined below.

6. The model backing the page is optimistically updated when the dates are changed, and the checkboxes are left selected. (lets discuss this @frano-m as the description below talks about updating the local entities with the response)

7. The top level check box is either checked or "-." Selecting it again clears the selected checkboxes.

8. Selecting the top-level box when it is cleared selects all tasks in the current filter results.

9. Individual boxes can be deselected; when this happens, the top-level check box goes from checked to "-."

10. If an individual check box is selected, then the top-level checkbox goes to "-."

11. If al individual checkboxes are selected the top level box selected as well.

Front-End Developer Notes: Updating targetCompletion Date for Tasks

The below is from a ChatGPT conversation.

API Details

• Endpoint: /api/tasks/completionDates

• Method: PATCH

• Request Body:

  {
  "taskIds": ["id1", "id2", "id3"],
  "targetCompletion": "2024-05-17T10:00:00Z"
  }

• Response Status Codes:

  • 200 OK: The update is successful, and the response includes the updated entities.
  • 400 Bad Request: The request is malformed or contains invalid data.
  • 404 Not Found: One or more of the specified task IDs do not exist.

• Response Body (200 OK):

  [
  {
    "id": "id1",
    "targetCompletion": "2024-05-17T10:00:00Z",
    "updatedAt": "2024-05-17T12:00:00Z",
    "otherField1": "value1",
    "otherField2": "value2"
  },
  {
    "id": "id2",
    "targetCompletion": "2024-05-17T10:00:00Z",
    "updatedAt": "2024-05-17T12:00:00Z",
    "otherField1": "value1",
    "otherField2": "value2"
  },
  {
    "id": "id3",
    "targetCompletion": "2024-05-17T10:00:00Z",
    "updatedAt": "2024-05-17T12:00:00Z",
    "otherField1": "value1",
    "otherField2": "value2"
  }
  ]

We want to return the full updated task objects in the response. Use these to modify the local task list data.

• Date Format: The targetCompletion date should be in ISO 8601 format: YYYY-MM-DDTHH:MM:SS.SSSZ
  • Example: 2024-05-17T10:00:00Z

TypeScript Code

The front-end code will need to take in the user-selected month or quarter and convert it to a date string that is the last moment in that month or quarter in GMT. Below is the TypeScript code using the date-fns library to achieve this:

1. Install date-fns Library:

   npm install date-fns

2. TypeScript Code:

   import { endOfMonth, endOfQuarter, format } from 'date-fns';
   
   function getLastMomentOfMonth(month: string, year: number): string {
    const date = new Date(`${year}-${month}-01T00:00:00Z`);
    const lastMoment = endOfMonth(date);
    return format(lastMoment, "yyyy-MM-dd'T'HH:mm:ss.SSSX");
   }
   
   function getLastMomentOfQuarter(quarter: string, year: number): string {
    let month: number;
    switch (quarter) {
      case 'Q1':
        month = 3;
        break;
      case 'Q2':
        month = 6;
        break;
      case 'Q3':
        month = 9;
        break;
      case 'Q4':
        month = 12;
        break;
      default:
        throw new Error('Invalid quarter');
    }
    const date = new Date(`${year}-${month}-01T00:00:00Z`);
    const lastMoment = endOfQuarter(date);
    return format(lastMoment, "yyyy-MM-dd'T'HH:mm:ss.SSSX");
   }
   
   // Example usage:
   const lastMomentOfJuly2024 = getLastMomentOfMonth('07', 2024);
   console.log(lastMomentOfJuly2024); // Output: 2024-07-31T23:59:59.999Z
   
   const lastMomentOfQ32024 = getLastMomentOfQuarter('Q3', 2024);
   console.log(lastMomentOfQ32024); // Output: 2024-09-30T23:59:59.999Z

3. Integration Notes:

   • Use the provided TypeScript functions to convert the selected month or quarter into a date string representing the last moment of that period in GMT.
   • Send the converted targetCompletion date along with the task IDs to the backend API endpoint /api/tasks/completionDates.

This approach ensures the backend receives the targetCompletion date in the correct format, representing the last moment of the selected month or quarter in GMT.

[NoopDog]

I should add, this is only accessible by CONTENT_ADMINS. Others can't see the controls.