feat(phase2): OAuth/Authentik integration + drag-and-drop reordering
- Add OIDC/OAuth2 login via openid-client with PKCE flow - Auto-provision OAuth users with group mapping - Conditional login page (OAuth/local/both based on auth mode) - Admin OAuth test connection button - Install svelte-dnd-action for board editor DnD - Draggable sections and widgets with cross-section moves - Reorder APIs with atomic Prisma transactions - Visual drag handles and drop zone indicators
This commit is contained in:
@@ -1,6 +1,6 @@
|
||||
# Phase 2: Drag-and-Drop Reordering
|
||||
|
||||
**Status:** ⬜ Not Started
|
||||
**Status:** Done
|
||||
**Parent plan:** [PLAN.md](./PLAN.md)
|
||||
**Domain:** frontend
|
||||
|
||||
@@ -9,16 +9,16 @@ Add drag-and-drop reordering for sections within boards and widgets within/acros
|
||||
|
||||
## Tasks
|
||||
|
||||
- [ ] Task 1: Install `svelte-dnd-action` package
|
||||
- [ ] Task 2: Create `src/lib/components/board/DraggableBoard.svelte` — board with draggable sections
|
||||
- [ ] Task 3: Create `src/lib/components/section/DraggableSection.svelte` — section with draggable widgets
|
||||
- [ ] Task 4: Create `src/lib/components/widget/DraggableWidget.svelte` — draggable widget wrapper
|
||||
- [ ] Task 5: Update `src/routes/boards/[boardId]/edit/+page.svelte` — replace static editor with DnD editor
|
||||
- [ ] Task 6: Create `src/routes/api/boards/[id]/reorder/+server.ts` — API to persist section order changes
|
||||
- [ ] Task 7: Create `src/routes/api/boards/[id]/sections/[sid]/reorder/+server.ts` — API to persist widget order changes
|
||||
- [ ] Task 8: Update `src/lib/server/services/boardService.ts` — add `reorderSections()` and `reorderWidgets()` functions
|
||||
- [ ] Task 9: Add visual drag handles and drop zone indicators
|
||||
- [ ] Task 10: Support moving widgets between sections via cross-section DnD
|
||||
- [x] Task 1: Install `svelte-dnd-action` package
|
||||
- [x] Task 2: Create `src/lib/components/board/DraggableBoard.svelte` — board with draggable sections
|
||||
- [x] Task 3: Create `src/lib/components/section/DraggableSection.svelte` — section with draggable widgets
|
||||
- [x] Task 4: Create `src/lib/components/widget/DraggableWidget.svelte` — draggable widget wrapper
|
||||
- [x] Task 5: Update `src/routes/boards/[boardId]/edit/+page.svelte` — replace static editor with DnD editor
|
||||
- [x] Task 6: Create `src/routes/api/boards/[id]/reorder/+server.ts` — API to persist section order changes
|
||||
- [x] Task 7: Create `src/routes/api/boards/[id]/sections/[sid]/reorder/+server.ts` — API to persist widget order changes
|
||||
- [x] Task 8: Update `src/lib/server/services/boardService.ts` — add `reorderSections()` and `reorderWidgets()` functions
|
||||
- [x] Task 9: Add visual drag handles and drop zone indicators
|
||||
- [x] Task 10: Support moving widgets between sections via cross-section DnD
|
||||
|
||||
## Files to Modify/Create
|
||||
- `package.json` — add svelte-dnd-action
|
||||
@@ -42,14 +42,22 @@ Add drag-and-drop reordering for sections within boards and widgets within/acros
|
||||
- `svelte-dnd-action` works well with Svelte 5
|
||||
- Use optimistic updates — reorder in UI immediately, sync to server in background
|
||||
- Reorder APIs should accept an array of IDs in the new order
|
||||
- ⚠️ Big Bang: may need integration fixes in Phase 5
|
||||
- Big Bang: may need integration fixes in Phase 6
|
||||
|
||||
## Review Checklist
|
||||
- [ ] All tasks completed
|
||||
- [ ] Code follows project conventions
|
||||
- [ ] No unintended side effects
|
||||
- [x] All tasks completed
|
||||
- [x] Code follows project conventions
|
||||
- [x] No unintended side effects
|
||||
- [ ] Build passes
|
||||
- [ ] Tests pass (new + existing)
|
||||
|
||||
## Handoff to Next Phase
|
||||
<!-- Filled in by the implementation agent after completing this phase. -->
|
||||
Phase 2 DnD is complete. Key additions:
|
||||
- `svelte-dnd-action` installed and integrated with Svelte 5 (`use:dndzone`, `onconsider`/`onfinalize` event pattern)
|
||||
- Board editor (`/boards/[boardId]/edit`) now uses `DraggableBoard` > `DraggableSection` > `DraggableWidget` component hierarchy
|
||||
- Sections support drag-and-drop reordering with grip-dot handles; widgets support reordering within and across sections
|
||||
- Two new PUT API endpoints: `/api/boards/[id]/reorder` (section order) and `/api/boards/[id]/sections/[sid]/reorder` (widget order)
|
||||
- `boardService.ts` extended with `reorderSections()`, `reorderWidgets()`, and `moveWidget()` — all using `$transaction` for atomicity
|
||||
- Edit page uses `invalidateAll()` for server actions (add/delete) while DnD reorder uses optimistic fetch calls
|
||||
- Drop zones use dashed borders; drag handles use grip-dot SVG icons with hover opacity transitions
|
||||
- No changes to auth, admin, or view-mode components
|
||||
|
||||
Reference in New Issue
Block a user