Feature epic 3592: Implementation of Workspace Projects List, Project Creation Wizard, Task Editor, and Project-Level Access Control - #65
Conversation
Introduce a workspace projects feature: new page pages/workspace/[id]/projects.vue with grid/list views, search, status/sort filters, pagination, view toggle and create action. Add reusable AppSelect component and project presentation components (ProjectCard, ProjectListRow, StatusBadge) and related scoped SCSS. Add styles and utility classes in assets/scss/main.scss. Add mock API fixtures (mock-api/workspace-projects/page-1..3.json), new services (services/projects.ts, services/mock-workspace-projects.ts), update services/index.ts and workspaces service to wire clients, and add types/projects.ts. Also update dashboard toolbar to include a link to the new Projects page.
Add useProjectDisplay composable to centralize computed properties for projects (progressPercent, completedTaskCount, taskSummary, createdDate) and reduce duplication. Update ProjectCard.vue and ProjectListRow.vue to use the new composable. Also fix status label typo from "Inprogress" to "In Progress" in StatusBadge.vue and the status options in pages/workspace/[id]/projects.vue to keep UI text consistent.
Convert hard-coded px values to rem in main.scss for consistent, scalable typography and spacing (page headers, names, hints, and inline filters). Add unprefixed line-clamp properties alongside existing -webkit- prefixed rules in ProjectCard.vue to improve multi-line truncation for title and summary. Replace a computed wrapper with a plain typed array for statusOptions in pages/workspace/[id]/projects.vue to remove unnecessary reactivity for a static list.
Add SVG assets for project and status icons (project, completed, inprogress, draft) and switch UI to use them. ProjectCard now imports and displays project.svg (replacing the app-icon) and adjusts icon sizing/CSS. StatusBadge now imports and returns SVG sources instead of text glyphs and includes image sizing and subtle badge color/border tweaks. Also remove unused completedTaskCount destructuring from ProjectCard and ProjectListRow (cleanup).
Introduce a complete project creation wizard: adds MapPreview (maplibre-gl) and Stepper components, individual step components (Details, Area, Tasks, Settings, Review), and corresponding SVG assets for status icons. Adds a composable (useProjectWizard) to manage wizard state with localStorage persistence, step loading, navigation, and project creation flow (including name availability check). Includes a step configuration JSON, new project-wizard services and types, and a mock client for development. Also adds the create project page and moves projects list page to index.vue; updates services/index.ts accordingly. MapPreview supports styled feature layers and camera padding for responsive layout.
Multiple fixes and improvements across wizard, services, and UI: - components/AppSelect.vue: add optionRefs, set refs for options, clear refs when closed, and scroll active option into view on arrow key navigation. - composables/useProjectDisplay.ts: parse createdAt as Date before calling toLocaleDateString to avoid errors with string timestamps. - composables/useProjectWizard.ts: fix watch dependencies to include the draft ref directly. - pages/workspace/[id]/projects/create.vue: adjust map padding values. - services/index.ts: pass tdeiClient into ProjectWizardClient construction. - services/project-wizard-definitions.ts: add parseStepDefinitions to validate step config (ids and titles) and use it to derive STEP_DEFINITIONS and step list. - services/project-wizard.ts: inject TDEI client into ProjectWizardClient, expose auth, ensure cloned instances carry tdeiClient, set auth header, and refresh auth before requests by overriding _send. - services/projects.ts: ensure unknown statuses default to 'draft' and log a warning. These changes add configuration validation, proper auth handling for wizard requests, UI accessibility/keyboard behavior improvements, and minor bug fixes.
Introduce an interactive Area of Interest flow: add AoiGeometryMap component (maplibre-based) with drawing, vertex editing, preview and fit behavior; replace MapPreview with the new component. Add file import UI and drag/drop in AreaOfInterestStep, with upload/reset/draw actions, warnings and error messaging, plus new SVG icons and related styles. Update theme with danger color, clear sample features in step config and add localized content/labels and upload thresholds. Wire step events into project create page and add supporting AOI service/types/payload/definitions.
Render and manage draft polygon geometries in the project wizard map and centralize AOI logic into a composable. AoiGeometryMap.vue: add Polygon typing, new draft polygon fill/line layer ids and layer specs, include them when creating map layers, build draft polygon features from pending + preview vertices, call syncDraftPolygon on relevant events and emit update:aoi for draft polygons. Introduce composable useProjectWizardAoi.ts to encapsulate area import, draw-mode state, warnings, and helper actions. pages/workspace/[id]/projects/create.vue: replace in-component AOI handling with the new composable, removing duplicated import/parse/area logic.
Introduce task-generation features for the project wizard: add a new TasksGenerationStep UI with range control, generate/reset actions and summary display; add a composable (useProjectWizardTasks) to manage task preview, generation state and interactions; implement task preview generation logic and helpers in services/project-wizard-tasks (grid building, projection math, area normalization and simulated generation); extend types with task preview feature/summary definitions. Wire the preview grid into the AOI map by adding a new GeoJSON source and fill/line layers in AoiGeometryMap.vue and ensure map updates only after style load. Integrate the composable into the create project page, disable navigation while generating, initialize default task area in draft, and expose computed displayedTaskGrid for map rendering.
Introduce settings functionality for the project wizard: add AssignUsersField and RichTextEditor components, and a useProjectWizardSettings composable. SettingsStep.vue updated to include lock timeout, review toggle, validator assignment (uses AssignUsersField) and instructions (uses RichTextEditor with TipTap). The composable handles loading workspace users, maintaining selected validators in the draft, and exposes helpers to add/remove validators and update instructions/timeout/review flags. package.json updated to include TipTap editor dependencies and related services/types were extended to support workspace user listing and payload adjustments.
Add a review summary flow and status dialog for project creation. Introduces a new project-wizard-review service to build/sanitize review summaries, updates ReviewStep to display summary including rich text instructions, and extracts rich-text styles to global SCSS while adding URL validation in the RichTextEditor. Implement project creation result handling across the client, composables and pages (including a mock create implementation), adjust payload/role-assignment shapes, and add a reusable StatusDialog component to surface success/error outcomes and navigation actions.
Persist a created-project checkpoint in the wizard state and shift task generation to a post-creation flow. Added createdProject state to composables/useProjectWizard, prevented navigating back after creation, locked step selection, and updated UI labels/controls to reflect creation-first workflow. Moved task generation out of the local draft into useProjectWizardTasks and ProjectWizardClient (with mock implementation), added watches to reset/validate generated summaries, and updated dialogs to handle create vs. task-generation errors. Also reordered/cleaned step config, removed embedded tasks draft fields, hid review task count until generation, and improved AOI map viewport handling to avoid redundant camera moves by normalizing centers and applying tolerances. Files touched: components (map, stepper, steps), composables, services (client & mock), data config, pages, and types.
Switch clients and services to the tasking API and normalize request/response shapes to snake_case and new feature formats. Key changes: use taskingApiUrl when constructing workspace/project clients; implement ProjectWizardClient methods (list users, name check, create project, generate tasks) and normalize created project responses; add conversion utilities for task area <-> cell size and include generated task grid in task generation summary and types. Update front-end composables and pages to expose and prefer generatedTaskGrid, adjust AOI map layer styles/filters for generated grids, and add minor CSS fixes for ProjectCard layout. Update mock workspace-projects to normalize legacy fixtures to the new API shape and adjust pagination/sorting/query param names across WorkspaceProjectsClient and related types. Note: API field names and some types changed (e.g. ProjectWizardCreatePayload, workspace projects fields), so callers should use the new snake_case payloads and expect the updated response structures.
Show a "Project created successfully" callout in the Tasks step and pass a createdProjectName prop (falls back to draft name). Add clearPersistedState() in the project wizard composable (wraps clearStoredState) and use a new leaveWizard helper to clear persisted draft state before navigating away from the wizard. Replace several clearDraft() usages with clearPersistedState to ensure stored wizard state is removed when exiting.
…ther miscellaneous changes remove task generation from the project setup wizard and delete the old wizard-only task generation components/composables add a dedicated project details page for /projects/[projectId] with overview, instructions, tasks, and contributions tabs add zero-task task setup flow in the Tasks tab with separate generate and save steps persist generated grids through the task save API and refresh project state from real backend data add real map-based AOI and task grid rendering with selectable tasks, status colors, lock markers, and legend add task list selection/filtering UI and task setup panel styling updates replace mock project detail usage with real API-backed project data on the details page extend project and task typings plus project service methods to support AOI, task list, and task status normalization clean up service typing by removing any from the projects client override update env/package/config files required for the new tasking flow
Rapid simple integration done. This is WIP
add tasking API env flags and real-data config defaults update AOI upload warning threshold to 5000 square kilometers tighten project/task typings for API responses switch save-tasks CTA to a clearer non-download icon show 6 tasks per page and fix lock menu clipping in tasks list collapse long pagination ranges with ellipses for large task counts
…paces-projects-list
… deletion. Added contributors tab
- add project role resolution composable and project-role lookup support - gate project creation, contributor management, tabs, and task actions by user role - capture Rapid upload changeset IDs and submit them with completed mapping - switch workspace/project flows to the new tasking API env configuration - add frontend guidelines doc and minor project detail UI/map cleanup
|
Important Review skippedAuto reviews are disabled on base/target branches other than the default branch. Please check the settings in the CodeRabbit UI or the ⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
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. Comment |
|
Wow, cool! |
susrisha
left a comment
There was a problem hiding this comment.
Approving after testing the build locally
PR Summary
This PR implements the end-to-end user flows for Workspace Projects under the TDEI Tasking Manager. It establishes:
Key Features & Changes Implemented
1. Project Directory Page (Dashboard)
2. Multi-Step Project Wizard
3. Project Detail Page & Interactive Map
4. Task Mapping Editor
5. Access Control & Contributor Roles
Testing Scenarios
1. Project Directory & Layouts
/workspace/:id/projects.2. Project Creation Stepper
3. Task Mapping & Lock Verification
/workspace/:id/projects/:projectId/tasks/:taskId/editorto verify the Rapid integration and changeset submission controls.Screenshots: