Develop To Staging

[shweta2101]

PR Summary

This PR implements the end-to-end user flows for Workspace Projects under the TDEI Tasking Manager. It establishes:

1. Projects Directory View (Grid/List directory of active and draft projects).
2. Project Creation Wizard (A multi-step setup flow featuring GeoJSON uploads, interactive AOI drawing, dynamic task grid generation, and validator assignment).
3. Project Details Dashboard (Tabs for Overview, Tasks list, and Contributions, driven by an interactive MapLibre map).
4. Task Mapping Editor (An interactive editor screen wrapping changeset submissions, locking controls, and peer review submissions).
5. Granular Project-Level Access Controls (Explicit role delegation for Leads, Validators, and Contributors).

Key Features & Changes Implemented

1. Project Directory Page (Dashboard)

• Components: [ProjectCard.vue], [ProjectListRow.vue], [StatusBadge.vue]
• Pages: [index.vue (Workspace Projects)]
• Details:
  • Displays all projects in a workspace with card (grid) and row (list) layouts.
  • Supports real-time text searches, sorting (by update time, name, or status), and cursor-based pagination.
  • Filters projects dynamically by status (Draft, In Progress, Completed).

2. Multi-Step Project Wizard

• Components: [Stepper.vue], [AoiGeometryMap.vue], [AssignUsersField.vue], [RichTextEditor.vue]
• Pages: [create.vue (Project Wizard)]
• Steps Included:
  • Step 1 (Project Details): Defines name, description, and TMS Imagery URL.
  • Step 2 (Area of Interest - AOI): Provides draw controls (polygons/rectangles) and supports uploading GeoJSON/Shapefiles with dynamic KM² area calculations.
  • Step 3 (Settings & Task Generation): Defines task bounding sizes (dynamic grid calculation), task lock timeouts, and peer review settings. Enables assigning workspace members as project-level validators.
  • Step 4 (Review & Launch): Displays a full visual review card of setup variables before publishing to the backend. Includes an HTML-sanitized rendering of markdown instructions.

3. Project Detail Page & Interactive Map

• Components: [ProjectMap.vue], [TasksTab.vue], [ContributionsTab.vue], [TaskSetupPanel.vue]
• Pages: [index.vue (Project Detail)]
• Details:
  • Integrates a MapLibre GL map that dynamically loads task grids and status-colored polygons.
  • Implements z-index sorting on map rendering so the selected task is drawn on top.
  • Adjusts opacity contrast
  • Connects the sidebar Task List selection with the interactive map selection.

4. Task Mapping Editor

• Pages: [editor.vue (Task Editor)]
• Details:
  • Integrates changeset tracking using the Rapid editor wrapper.
  • Implements lock status handling (lock, force unlock, task timeout timer).
  • Implements changeset submission checks and feedback forms (rejection categories/notes).

5. Access Control & Contributor Roles

• Details:
  • Restricts access using an effective role precedence model: Workspace Lead (always has owner/lead controls), Project Lead, Validator, or Mapper.
  • Enables Project/Workspace Leads to delegate project roles, manage contributors list with search, filter, pagination, and update permissions dynamically.

---

Testing Scenarios

1. Project Directory & Layouts

1. Navigate to /workspace/:id/projects.
2. Toggle between grid and list layouts. Ensure column headers, labels, and status badges align properly.
3. Test search filter input and status dropdown options to confirm correct filtering of projects.

2. Project Creation Stepper

1. Click Create Project to launch the wizard.
2. Complete Step 1 (Details).
3. On Step 2 (AOI), upload a valid GeoJSON file or draw a polygon on the map. Verify that the map updates with the geometry and computes the correct area.
4. On Step 3, drag/adjust the grid size and verify task grid generation visual previews.
5. Launch the project, and ensure the draft is cleared and redirected to the detail page.

3. Task Mapping & Lock Verification

1. On the Project details page, click on a task polygon in the map or choose a task from the list.
2. Verify that the task is highlighted with a thick dark border and high opacity contrast.
3. Click Lock Task, and confirm that a lock icon appears on the map task center and the panel shows the task timer.
4. Access the task editor at /workspace/:id/projects/:projectId/tasks/:taskId/editor to verify the Rapid integration and changeset submission controls.

---

Screenshots:

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 95a8ab15-b0cb-4e49-9f13-d17a3af12710

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}