curo1305
105 lines
4.5 KiB
Markdown
105 lines
4.5 KiB
Markdown
---
|
|
phase: 04-folders-sharing-quotas-document-ux
|
|
plan: "08"
|
|
subsystem: frontend-data-layer
|
|
tags: [api-client, pinia, vue-router, folders, shares, preferences, search]
|
|
dependency_graph:
|
|
requires: ["04-07"]
|
|
provides: ["frontend-data-contracts-for-04-09"]
|
|
affects: ["frontend/src/api/client.js", "frontend/src/stores/folders.js", "frontend/src/stores/documents.js", "frontend/src/router/index.js"]
|
|
tech_stack:
|
|
added: []
|
|
patterns: ["Pinia Composition API store", "debounced watcher without lodash", "lazy route imports"]
|
|
key_files:
|
|
created:
|
|
- frontend/src/stores/folders.js
|
|
modified:
|
|
- frontend/src/api/client.js
|
|
- frontend/src/stores/documents.js
|
|
- frontend/src/router/index.js
|
|
decisions:
|
|
- "listDocuments extended in-place (not replaced) to preserve backward compatibility with existing callers"
|
|
- "getDocumentContentUrl returns a plain string (no fetch) for use as iframe src or window.open target"
|
|
- "searchQuery watcher enforces 2-char minimum before API call — shorter inputs restore full list without hitting backend"
|
|
- "New routes use same implicit beforeEach auth guard as existing routes (check !meta.public && !accessToken)"
|
|
metrics:
|
|
duration: "12 minutes"
|
|
completed: "2026-05-25"
|
|
tasks_completed: 2
|
|
tasks_total: 2
|
|
files_changed: 4
|
|
---
|
|
|
|
# Phase 4 Plan 08: Frontend Data Layer Summary
|
|
|
|
**One-liner:** Wired all Phase 4 backend endpoints to the frontend via 13 new API client functions, a new useFoldersStore (Pinia Composition API), extended useDocumentsStore with folder/search/sort/share state, and two new authenticated routes.
|
|
|
|
## Tasks Completed
|
|
|
|
| # | Task | Commit | Files |
|
|
|---|------|--------|-------|
|
|
| 1 | Add Phase 4 API functions to client.js and create folders store | 5417f26 | frontend/src/api/client.js, frontend/src/stores/folders.js |
|
|
| 2 | Extend documents store with folder/search/share actions + add Vue Router routes | 5417f26 | frontend/src/stores/documents.js, frontend/src/router/index.js |
|
|
|
|
## What Was Built
|
|
|
|
### API Client Extensions (frontend/src/api/client.js)
|
|
|
|
**`listDocuments` updated** to accept `folderId`, `q`, `sort`, `order` params — passed via `URLSearchParams` when non-null/non-empty.
|
|
|
|
**13 new functions added:**
|
|
|
|
| Group | Functions |
|
|
|-------|-----------|
|
|
| Folders | `listFolders`, `createFolder`, `getFolder`, `renameFolder`, `deleteFolder`, `moveDocument` |
|
|
| Shares | `createShare`, `listShares`, `deleteShare`, `getSharedWithMe` |
|
|
| Preferences | `getMyPreferences`, `updateMyPreferences` |
|
|
| Proxy URL | `getDocumentContentUrl` |
|
|
|
|
### Folders Store (frontend/src/stores/folders.js)
|
|
|
|
New Pinia Composition API store (`useFoldersStore`) following the exact `useTopicsStore` pattern:
|
|
- State: `folders`, `currentFolderId`, `breadcrumb`, `loading`, `error`
|
|
- Actions: `fetchFolders`, `createFolder`, `renameFolder`, `deleteFolder`, `navigateTo`
|
|
- `navigateTo` fetches folder detail for breadcrumb population; handles null (root) cleanly
|
|
|
|
### Documents Store Extensions (frontend/src/stores/documents.js)
|
|
|
|
- Added `watch` import from 'vue'
|
|
- New state refs: `currentFolderId`, `searchQuery`, `sortField`, `sortOrder`
|
|
- `fetchDocuments` extended to accept and pass `folderId`, `q`, `sort`, `order` to `api.listDocuments`
|
|
- Debounced `searchQuery` watcher: 300ms delay, 2-char minimum (T-04-08-03 mitigated)
|
|
- New share actions: `shareDocument`, `revokeShare`, `listShares`
|
|
- Return statement extended with all new state and actions
|
|
|
|
### Router Routes (frontend/src/router/index.js)
|
|
|
|
Two new lazy-loaded authenticated routes appended:
|
|
- `/folders/:folderId` → `FolderView.vue` (named `folder`)
|
|
- `/shared` → `SharedView.vue` (named `shared`)
|
|
|
|
Both use `meta: { requiresAuth: true }` and are guarded by the existing `beforeEach` hook.
|
|
|
|
## Deviations from Plan
|
|
|
|
None — plan executed exactly as written.
|
|
|
|
## Threat Mitigations Applied
|
|
|
|
| Threat | Mitigation |
|
|
|--------|-----------|
|
|
| T-04-08-01 — unguarded routes | Both new routes have `meta: { requiresAuth: true }` |
|
|
| T-04-08-03 — premature search | `searchQuery` watcher checks `newVal.length < 2` before firing API call |
|
|
|
|
## Known Stubs
|
|
|
|
None. This plan creates data layer only — no UI components with rendering stubs.
|
|
|
|
## Self-Check: PASSED
|
|
|
|
- `frontend/src/api/client.js` — FOUND, 45 export functions (13 new)
|
|
- `frontend/src/stores/folders.js` — FOUND, exports `useFoldersStore`
|
|
- `frontend/src/stores/documents.js` — FOUND, contains all new refs and actions
|
|
- `frontend/src/router/index.js` — FOUND, contains `/folders/:folderId` and `/shared` routes
|
|
- Commit `5417f26` — FOUND in git log
|