●
LIVE DEMO
Generated using
Instruct UI - An AI for Blazor UI Generation
## What's implemented
- Form-based task create/edit panel with DataAnnotations validation (EditForm, DataAnnotationsValidator, ValidationMessage)
- Task table with row coloring, status badges, and action buttons (edit, complete, delete)
- Right-side drawer with column filters and live search (title, assignee, priority, status, due date)
- Client-side sample data seeding, reset, and simple ordering (urgent first, then due date)
## Key components
- EditForm, DataAnnotationsValidator, InputText, InputTextArea, InputSelect, InputDate, InputCheckbox, ValidationMessage
- Table markup (<table>), badges, Bootstrap buttons and FontAwesome icons
- @bind-Value and @bind-Value:event=\"oninput\" for live search
## How it works
- Model binding uses TaskModel annotated with DataAnnotations; HandleValidSubmit performs create and update flows
- FilteredTasks is a computed IEnumerable that applies searchText, filterAssignee, filterPriority, filterStatus, and due date ranges, then orders results
- UI state flags (showAddForm, isEditing, showRightDrawer) control form visibility and drawer behavior
- Actions mutate an in-memory tasks list; RefreshSampleData reseeds sample data for demo
## Styling
- Uses Bootstrap classes (container, row, col-*, btn, form-control, form-select) and component-scoped CSS in MyPorter.razor.css
- .table-primary header, .table-danger and .table-success row states for urgent/completed tasks
- Right-side drawer positioned with fixed layout; responsiveness relies on Bootstrap grid and a media query in the scoped CSS
## Reuse steps
1. Add the Razor component and TaskModel to a Blazor project (no third-party component libraries required).
2. Ensure Bootstrap and FontAwesome are included in the host (wwwroot/index.html or _Layout.cshtml).
3. Keep DataAnnotations on TaskModel and import System.ComponentModel.DataAnnotations.
4. Replace the seeded list with a service (e.g., ITaskService) and register it in Program.cs to persist tasks.
5. Extract the form and drawer into child components and add server-side filtering/paging as needed.
## Limitations & next steps
- Single-page demo with in-memory data; persistence, authentication, and server APIs are not implemented.
- Add server-side paging, API integration, optimistic updates, and unit tests for FilteredTasks logic.
- Improve accessibility: ARIA labels for controls, keyboard focus handling for the drawer, and form error summary.