Implement Project Management UI (SZ-44)
rk@tigase.net opened 2 weeks ago

Overview

The backend implementation for Project Management is already complete (entity, DTOs, repository, service, controller).
This issue focuses exclusively on adding the corresponding UI functionality in sztab-ui, following the same stable patterns used for Git Repository Management.

The goal is to deliver a minimal but complete CRUD interface for Projects, without introducing canonical URLs, deep routing, or modal-driven entity navigation. Those enhancements will be handled later once Project, Branch, and Issue flows are complete.


Scope of This Issue

Frontend Deliverables

  1. Project List Page

    • Display a paginated list of Projects.
    • Columns should include:
      name, description, owner, gitRepo, startDate, endDate, and the number of issues (if available in the DTO).
    • “Delete” button must be disabled if the project has associated branches/issues.
  2. Create Project Modal

    • Fields:
      name, description, gitRepoId, ownerId, and optional date fields.
    • After creation:
      • Display a toast notification.
      • Refresh the list.
      • Close the modal.
  3. API Integration

    • Add the following to src/api/api.ts:
      • getProjectsPaged(page, size, sort, direction)
      • createProject(payload)
      • deleteProject(id)
  4. UI Consistency

    • Follow the layout conventions established during SZ-43:
      • add button in top-right header
      • same table styling
      • consistent toast usage
      • correct loading and error handling

Non-Goals (explicitly out of scope)

  • Canonical URLs for each project.
  • Entity-click modal navigation.
  • Edit project functionality.
  • Branch or Issue management UI (separate issues).
  • Visual grammar & branding work.

Acceptance Criteria

  • User can view the paginated list of projects.
  • User can create a project using a modal.
  • User can delete a project only if backend reports no dependent entities.
  • UI shows clear success and error toasts.
  • End-to-end functionality works via browser with the live backend.
  • Code follows conventions established during SZ-43.

Worklog

(To be updated during implementation.)

  • rk@tigase.net commented 2 weeks ago
    % git checkout -b feature/SZ-44-Implement-Project-Management-UI
    Switched to a new branch 'feature/SZ-44-Implement-Project-Management-UI'
    %
    
  • rk@tigase.net changed state to 'In Progress' 2 weeks ago
    Previous Value Current Value
    Open
    In Progress
  • rk@tigase.net commented 1 week ago

    Work Log — SZ-44: Implement Project Management UI

    2025-12-01

    09:30–11:00 (1.5h) — Initial UI wiring

    • Wired React components (Create/Edit modals) to backend DTOs.
    • Added Owner and GitRepo dropdowns.
    • Basic Project List loading and display working.

    11:00–12:00 (1h) — Investigating blank-screen regression

    • Project page went fully blank.
    • Traced crash to API mismatch: frontend expected arrays, backend returned Page<T>.

    12:00–13:30 (1.5h) — Fixing API modules

    • Repaired api/projects.ts, api/gitrepos.ts, api/users.ts.
    • Standardized all API calls to parse paginated responses.
    • Rebuilt DTOs and type imports.

    13:30–15:00 (1.5h) — Updating all consuming React pages

    • Updated ProjectsPage.tsx, GitReposPage.tsx, and UserListPage.tsx to match new paged API shapes.
    • Fixed type errors, state mismatches, and missing imports.

    15:00–16:00 (1h) — Full UI stabilization

    • Verified Create/Edit/Delete for Projects.
    • Verified Git Repo list and CRUD operations.
    • Verified Users list loads without errors.
    • Confirmed that no page shows blank-screen failures.

    16:00–17:00 (1h) — Build verification & clean-up

    • Ran npm run build to check production correctness.
    • Ensured no TypeScript compile errors.
    • Final consistency checks on dropdowns, timestamps, and DTOs.

    Total Time

    7 hours of actual engineering work

    Status

    SZ-44 is fully implemented, tested, and ready for merge. A follow-up task will be opened to replace browser-native confirm() with an in-app modal.

  • rk@tigase.net changed state to 'Closed' 1 week ago
    Previous Value Current Value
    In Progress
    Closed
  • rk@tigase.net referenced from other issue 1 week ago
issue 1 of 1
Type
New Feature
Priority
Normal
Assignee
Version
1.0
Sprints
n/a
Customer
n/a
Issue Votes (0)
Watchers (3)
Reference
SZ-44
Please wait...
Page is in error, reload to recover