@flusys/ng-task-manager 1.2.0-rc.1

package/README.md

@@ -0,0 +1,276 @@
+# @flusys/ng-task-manager
+
+Task management UI for FLUSYS Angular applications — dynamic kanban boards, drag-and-drop list reordering, real-time collaboration via Socket.IO, board-scoped member assignment, and a signal-based reactive state layer.
+
+[![npm version](https://img.shields.io/npm/v/@flusys/ng-task-manager.svg)](https://www.npmjs.com/package/@flusys/ng-task-manager)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+
+---
+
+## Installation
+
+```bash
+npm install @flusys/ng-task-manager @angular/cdk socket.io-client
+```
+
+---
+
+## 1. Add Routes
+
+```typescript
+// app.routes.ts
+import { TASK_MANAGER_ROUTES } from '@flusys/ng-task-manager';
+
+export const routes: Routes = [
+  {
+    path: 'task-manager',
+    children: TASK_MANAGER_ROUTES,
+  },
+];
+```
+
+| Path | Page |
+|---|---|
+| `/task-manager` | `BoardListPage` — grid of all boards |
+| `/task-manager/board/:boardId` | `BoardViewPage` — kanban board with drag-drop |
+
+Both pages are lazy-loaded via `loadComponent`.
+
+---
+
+## 2. Add Menu Item
+
+```typescript
+// app-menu.config.ts
+{
+  id: 'task-manager',
+  labelKey: 'menu.task.manager',
+  icon: 'check-square',
+  iconType: 1,
+  routerLink: ['/task-manager'],
+}
+```
+
+---
+
+## 3. State Service
+
+`TaskBoardStateService` is the single source of truth for an open board. It manages all signal state and handles real-time events from the WebSocket.
+
+```typescript
+import { TaskBoardStateService } from '@flusys/ng-task-manager';
+
+@Component({ ... })
+export class MyComponent {
+  private readonly state = inject(TaskBoardStateService);
+
+  // Open a board (loads lists, tasks, labels, members; joins socket room)
+  ngOnInit(): void {
+    this.state.openBoard(this.boardId);
+  }
+
+  // Close a board (leaves socket room, clears state)
+  ngOnDestroy(): void {
+    this.state.closeBoard();
+  }
+
+  // Reactive signals
+  readonly board       = this.state.board;           // Signal<ITaskBoard | null>
+  readonly lists       = this.state.lists;           // Signal<ITaskList[]>
+  readonly tasks       = this.state.tasks;           // Signal<ITask[]>
+  readonly labels      = this.state.labels;          // Signal<ITaskLabel[]>
+  readonly members     = this.state.members;         // Signal<ITaskBoardMember[]>
+  readonly isLoading   = this.state.isLoading;       // Signal<boolean>
+
+  // Computed helpers
+  readonly tasksByList     = this.state.tasksByList;     // Signal<Map<listId, ITask[]>>
+  readonly listsWithTasks  = this.state.listsWithTasks;  // Signal<Array<ITaskList & { tasks: ITask[] }>>
+}
+```
+
+### Real-time event handling
+
+`TaskBoardStateService` subscribes to `board:event` socket events automatically when `openBoard()` is called. All 8 event types update signal state in-place without a full reload:
+
+| Event type | Effect |
+|---|---|
+| `task:created` | Appended to `tasks` signal |
+| `task:updated` | Replaced in `tasks` by id |
+| `task:moved` | `listId` and `position` updated in-place |
+| `task:deleted` | Removed from `tasks` |
+| `list:created` | Appended to `lists` signal |
+| `list:updated` | Replaced in `lists` by id |
+| `list:deleted` | Removed from `lists` |
+| `list:reordered` | Lists re-sorted by new position values |
+
+---
+
+## 4. Socket Service
+
+`TaskBoardSocketService` manages the Socket.IO connection to the `/task-boards` namespace.
+
+```typescript
+import { TaskBoardSocketService } from '@flusys/ng-task-manager';
+
+@Injectable({ providedIn: 'root' })
+export class MyService {
+  private readonly socket = inject(TaskBoardSocketService);
+
+  connect(accessToken: string): void {
+    this.socket.connect(accessToken); // connects with JWT auth
+  }
+
+  joinBoard(boardId: string): void {
+    this.socket.joinBoard(boardId);   // emits board:join
+  }
+
+  leaveBoard(boardId: string): void {
+    this.socket.leaveBoard(boardId);  // emits board:leave
+  }
+
+  // Observable<IBoardSocketEvent>
+  readonly events$ = this.socket.onBoardEvent;
+
+  // Signal<boolean>
+  readonly connected = this.socket.isConnected;
+}
+```
+
+---
+
+## 5. API Services
+
+| Service | Base path | Key methods |
+|---|---|---|
+| `TaskBoardApiService` | `/board` | `getAll()`, `insert()`, `update()`, `delete()`, `getMembers()`, `addMember()`, `removeMember()` |
+| `TaskApiService` | `/task` | `getBoardTasks()`, `insert()`, `update()`, `delete()`, `moveTask()`, `assignTask()` |
+| `TaskListApiService` | `/task-list` | `getBoardLists()`, `insert()`, `update()`, `delete()`, `reorder()` |
+| `TaskLabelApiService` | `/task-label` | `getBoardLabels()`, `insert()`, `update()`, `delete()` |
+| `TaskCommentApiService` | `/task-comment` | `getTaskComments()`, `insert()`, `update()`, `delete()` |
+
+All services extend `ApiResourceService` and use the POST-only RPC convention.
+
+---
+
+## 6. Components
+
+### `TaskCardComponent`
+
+Kanban card displayed inside each list column.
+
+```html
+<task-card [task]="task" (cardClick)="openDetail($event)" />
+```
+
+| Input | Type | Description |
+|---|---|---|
+| `task` | `ITask` | Task data to render |
+
+| Output | Type | Description |
+|---|---|---|
+| `cardClick` | `ITask` | Emitted when the card is clicked |
+
+Displays: label color bars, priority badge, due date, assignee avatar placeholder.
+
+---
+
+### `TaskFormDialogComponent`
+
+Custom Dialog for creating and editing tasks.
+
+```html
+<task-form-dialog
+  [(visible)]="showForm"
+  [boardId]="boardId"
+  [listId]="selectedListId"
+  [members]="state.members()"
+  [labels]="state.labels()"
+  (saved)="onTaskSaved($event)"
+/>
+```
+
+| Input | Type | Description |
+|---|---|---|
+| `visible` | `boolean` (model) | Controls dialog open/close |
+| `task` | `ITask \| null` | Pass existing task to edit; omit to create |
+| `boardId` | `string` | Board context |
+| `listId` | `string` | Default list for new tasks |
+| `members` | `ITaskBoardMember[]` | Assignee dropdown — board members only |
+| `labels` | `ITaskLabel[]` | Multi-select label options |
+
+| Output | Type | Description |
+|---|---|---|
+| `saved` | `ITask` | Emitted after successful create or update |
+
+---
+
+### `TaskDetailPanelComponent`
+
+Custom Drawer (right panel, 480 px) showing full task details and threaded comments.
+
+```html
+<task-detail-panel
+  [(visible)]="showDetail"
+  [task]="selectedTask"
+  [boardId]="boardId"
+/>
+```
+
+| Input | Type | Description |
+|---|---|---|
+| `visible` | `boolean` (model) | Controls panel open/close |
+| `task` | `ITask \| null` | Task to display |
+| `boardId` | `string` | Used to load comments |
+
+---
+
+## 7. Pages
+
+### `BoardListPage`
+
+Grid view of all boards the user has access to. Provides a "Create Board" action that opens an inline dialog.
+
+Route: `/task-manager`
+
+### `BoardViewPage`
+
+Full kanban board. Receives `boardId` via route input binding (`withComponentInputBinding()`).
+
+- Lists rendered as columns, tasks as draggable cards (Angular CDK DragDrop)
+- Dragging a card between columns calls `TaskApiService.moveTask()`
+- Real-time updates applied by `TaskBoardStateService.handleBoardEvent()`
+- "Add List" creates a new dynamic list column
+- Clicking a card opens `TaskDetailPanelComponent`
+- "Add Task" opens `TaskFormDialogComponent`
+
+Route: `/task-manager/board/:boardId`
+
+---
+
+## 8. Interfaces
+
+```typescript
+import type {
+  ITaskBoard,
+  ITaskBoardMember,
+  ITaskList,
+  ITask,
+  ITaskLabel,
+  ITaskComment,
+  ITaskActivity,
+  IBoardSocketEvent,
+  BoardMemberRole,
+  TaskPriority,
+} from '@flusys/ng-task-manager';
+```
+
+| Type | Values |
+|---|---|
+| `BoardMemberRole` | `'OWNER' \| 'ADMIN' \| 'MEMBER' \| 'VIEWER'` |
+| `TaskPriority` | `'LOW' \| 'MEDIUM' \| 'HIGH' \| 'URGENT'` |
+
+---
+
+## License
+
+MIT © FLUSYS