feat: Implement tasks feature using NGRX signals and remove the old counter store, alongside general project configuration and skill documentation updates.
continuous-integration/drone/pr Build is passing
continuous-integration/drone/pr Build is passing
This commit is contained in:
Dennis Hundertmark
+4
-16
@@ -1,19 +1,7 @@
|
||||
import {
|
||||
ApplicationConfig,
|
||||
provideBrowserGlobalErrorListeners,
|
||||
isDevMode,
|
||||
} from "@angular/core";
|
||||
import { provideRouter } from "@angular/router";
|
||||
|
||||
import { routes } from "./app.routes";
|
||||
import { provideStore } from "@ngrx/store";
|
||||
import { provideStoreDevtools } from "@ngrx/store-devtools";
|
||||
import { ApplicationConfig, provideBrowserGlobalErrorListeners } from '@angular/core';
|
||||
import { provideRouter } from '@angular/router';
|
||||
import { routes } from './app.routes';
|
||||
|
||||
export const appConfig: ApplicationConfig = {
|
||||
providers: [
|
||||
provideBrowserGlobalErrorListeners(),
|
||||
provideRouter(routes),
|
||||
provideStore(),
|
||||
provideStoreDevtools({ maxAge: 25, logOnly: !isDevMode() }),
|
||||
],
|
||||
providers: [provideBrowserGlobalErrorListeners(), provideRouter(routes)],
|
||||
};
|
||||
|
||||
+151
@@ -0,0 +1,151 @@
|
||||
:host {
|
||||
--page-ink: #13262f;
|
||||
--page-muted: #5f7278;
|
||||
--page-line: rgba(19, 38, 47, 0.1);
|
||||
--page-panel: rgba(255, 255, 255, 0.74);
|
||||
--page-panel-strong: rgba(255, 255, 255, 0.9);
|
||||
--page-accent: #0f5d66;
|
||||
--page-accent-strong: #0c3d49;
|
||||
--page-glow: #d7f0eb;
|
||||
display: block;
|
||||
min-height: 100vh;
|
||||
background:
|
||||
radial-gradient(circle at top left, rgba(255, 204, 112, 0.16), transparent 24%),
|
||||
radial-gradient(circle at 85% 18%, rgba(76, 161, 175, 0.18), transparent 22%),
|
||||
linear-gradient(180deg, #f4efe6, #edf2f0 38%, #f8fbfb);
|
||||
color: var(--page-ink);
|
||||
}
|
||||
|
||||
.shell {
|
||||
width: min(72rem, calc(100% - 2rem));
|
||||
margin: 0 auto;
|
||||
padding: 1.75rem 0 3.5rem;
|
||||
}
|
||||
|
||||
.shell-header {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
gap: 1.25rem;
|
||||
align-items: end;
|
||||
margin-bottom: 1.8rem;
|
||||
padding: 1.35rem 1.5rem;
|
||||
border: 1px solid var(--page-line);
|
||||
border-radius: 1.6rem;
|
||||
background: linear-gradient(180deg, var(--page-panel-strong), var(--page-panel));
|
||||
box-shadow:
|
||||
0 24px 60px rgba(29, 52, 58, 0.08),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.8);
|
||||
backdrop-filter: blur(18px);
|
||||
}
|
||||
|
||||
.brand-block {
|
||||
display: grid;
|
||||
gap: 0.55rem;
|
||||
}
|
||||
|
||||
.brand-kicker {
|
||||
margin: 0;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.16em;
|
||||
text-transform: uppercase;
|
||||
color: var(--page-muted);
|
||||
}
|
||||
|
||||
.brand-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 0.9rem;
|
||||
}
|
||||
|
||||
.shell-header h1 {
|
||||
margin: 0;
|
||||
font-size: clamp(2rem, 4vw, 3rem);
|
||||
line-height: 0.98;
|
||||
}
|
||||
|
||||
.version-pill {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 2.25rem;
|
||||
padding: 0.35rem 0.8rem;
|
||||
border-radius: 999px;
|
||||
background: linear-gradient(135deg, #d9edea, #f6d9b6);
|
||||
color: var(--page-accent-strong);
|
||||
font-size: 0.78rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.04em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.brand-copy {
|
||||
max-width: 40rem;
|
||||
margin: 0;
|
||||
color: var(--page-muted);
|
||||
font-size: 0.98rem;
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
nav a {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 0.7rem 1rem;
|
||||
border: 1px solid rgba(15, 93, 102, 0.12);
|
||||
border-radius: 999px;
|
||||
background: rgba(255, 255, 255, 0.76);
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
font-weight: 600;
|
||||
box-shadow: 0 10px 24px rgba(20, 38, 44, 0.06);
|
||||
transition:
|
||||
transform 180ms ease,
|
||||
background-color 180ms ease,
|
||||
color 180ms ease,
|
||||
border-color 180ms ease;
|
||||
}
|
||||
|
||||
nav a:hover {
|
||||
transform: translateY(-1px);
|
||||
border-color: rgba(15, 93, 102, 0.28);
|
||||
}
|
||||
|
||||
nav a.active {
|
||||
background: var(--page-accent-strong);
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
main {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
main::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: -1rem auto auto -1rem;
|
||||
width: 10rem;
|
||||
height: 10rem;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(circle, var(--page-glow), transparent 70%);
|
||||
filter: blur(14px);
|
||||
opacity: 0.65;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
.shell {
|
||||
width: min(72rem, calc(100% - 1rem));
|
||||
padding-top: 1rem;
|
||||
}
|
||||
|
||||
.shell-header {
|
||||
padding: 1.1rem 1rem;
|
||||
border-radius: 1.2rem;
|
||||
}
|
||||
|
||||
.brand-copy {
|
||||
font-size: 0.92rem;
|
||||
}
|
||||
}
|
||||
|
||||
+27
-4
@@ -1,4 +1,27 @@
|
||||
<h2>Counter: {{ store.count() }}</h2>
|
||||
<button (click)="store.increment()">Increment</button>
|
||||
<button (click)="store.decrement()">Decrement</button>
|
||||
<button (click)="store.reset()">Reset</button>
|
||||
<div class="shell">
|
||||
<header class="shell-header">
|
||||
<div class="brand-block">
|
||||
<p class="brand-kicker">Angular + NgRx Signals</p>
|
||||
<div class="brand-row">
|
||||
<h1>NGRX Playground</h1>
|
||||
<span class="version-pill">Signal Store</span>
|
||||
</div>
|
||||
<p class="brand-copy">
|
||||
Feature-first state architecture with persistence, derived state,
|
||||
and production-ready debugging.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<nav aria-label="Primary">
|
||||
<a
|
||||
routerLink="/tasks"
|
||||
routerLinkActive="active"
|
||||
>Tasks</a
|
||||
>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<router-outlet />
|
||||
</main>
|
||||
</div>
|
||||
|
||||
+16
-2
@@ -1,3 +1,17 @@
|
||||
import { Routes } from "@angular/router";
|
||||
import { Routes } from '@angular/router';
|
||||
|
||||
export const routes: Routes = [];
|
||||
export const routes: Routes = [
|
||||
{
|
||||
path: '',
|
||||
pathMatch: 'full',
|
||||
redirectTo: 'tasks',
|
||||
},
|
||||
{
|
||||
path: 'tasks',
|
||||
loadComponent: () => import('./features/tasks/feature/tasks-page.component').then((module) => module.TasksPageComponent),
|
||||
},
|
||||
{
|
||||
path: '**',
|
||||
redirectTo: 'tasks',
|
||||
},
|
||||
];
|
||||
|
||||
+22
-21
@@ -1,25 +1,26 @@
|
||||
import { TestBed } from "@angular/core/testing";
|
||||
import { App } from "./app";
|
||||
import { TestBed } from '@angular/core/testing';
|
||||
import { appConfig } from './app.config';
|
||||
import { App } from './app';
|
||||
|
||||
describe("App", () => {
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [App],
|
||||
}).compileComponents();
|
||||
});
|
||||
describe('App', () => {
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [App],
|
||||
providers: appConfig.providers,
|
||||
}).compileComponents();
|
||||
});
|
||||
|
||||
it("should create the app", () => {
|
||||
const fixture = TestBed.createComponent(App);
|
||||
const app = fixture.componentInstance;
|
||||
expect(app).toBeTruthy();
|
||||
});
|
||||
it('should create the app', () => {
|
||||
const fixture = TestBed.createComponent(App);
|
||||
const app = fixture.componentInstance;
|
||||
expect(app).toBeTruthy();
|
||||
});
|
||||
|
||||
it("should render title", async () => {
|
||||
const fixture = TestBed.createComponent(App);
|
||||
await fixture.whenStable();
|
||||
const compiled = fixture.nativeElement as HTMLElement;
|
||||
expect(compiled.querySelector("h1")?.textContent).toContain(
|
||||
"Hello, ngrx-playground",
|
||||
);
|
||||
});
|
||||
it('should render title', async () => {
|
||||
const fixture = TestBed.createComponent(App);
|
||||
await fixture.whenStable();
|
||||
fixture.detectChanges();
|
||||
const compiled = fixture.nativeElement as HTMLElement;
|
||||
expect(compiled.querySelector('h1')?.textContent).toContain('NGRX Playground');
|
||||
});
|
||||
});
|
||||
|
||||
+8
-8
@@ -1,11 +1,11 @@
|
||||
import { Component, inject } from "@angular/core";
|
||||
import { CounterStore } from "./core/counter.store";
|
||||
import { ChangeDetectionStrategy, Component } from '@angular/core';
|
||||
import { RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router';
|
||||
|
||||
@Component({
|
||||
selector: "app-root",
|
||||
templateUrl: "./app.html",
|
||||
styleUrl: "./app.css",
|
||||
selector: 'app-root',
|
||||
imports: [RouterOutlet, RouterLink, RouterLinkActive],
|
||||
templateUrl: './app.html',
|
||||
styleUrl: './app.css',
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
})
|
||||
export class App {
|
||||
readonly store = inject(CounterStore);
|
||||
}
|
||||
export class App {}
|
||||
|
||||
@@ -1,31 +0,0 @@
|
||||
import { signalStore, withState, withMethods, patchState } from "@ngrx/signals";
|
||||
|
||||
// Define the shape of the state
|
||||
export interface CounterState {
|
||||
count: number;
|
||||
}
|
||||
|
||||
// Set the initial state
|
||||
const initialState: CounterState = {
|
||||
count: 0,
|
||||
};
|
||||
|
||||
// Create the SignalStore
|
||||
export const CounterStore = signalStore(
|
||||
{ providedIn: "root" }, // Makes the store available app-wide
|
||||
withState(initialState), // Adds the state to the store
|
||||
|
||||
// Adds methods to update the state
|
||||
withMethods((store) => ({
|
||||
increment() {
|
||||
// Use patchState to immutably update the state
|
||||
patchState(store, { count: store.count() + 1 });
|
||||
},
|
||||
decrement() {
|
||||
patchState(store, { count: store.count() - 1 });
|
||||
},
|
||||
reset() {
|
||||
patchState(store, initialState);
|
||||
},
|
||||
})),
|
||||
);
|
||||
@@ -0,0 +1,10 @@
|
||||
export type TaskPriority = 'low' | 'medium' | 'high';
|
||||
export type TaskFilter = 'all' | 'active' | 'completed';
|
||||
|
||||
export interface Task {
|
||||
id: string;
|
||||
title: string;
|
||||
completed: boolean;
|
||||
priority: TaskPriority;
|
||||
updatedAt: string;
|
||||
}
|
||||
@@ -0,0 +1,82 @@
|
||||
import { Injectable } from '@angular/core';
|
||||
import { Observable, delay, of, throwError } from 'rxjs';
|
||||
import { Task, TaskPriority } from './task.model';
|
||||
|
||||
const NETWORK_DELAY_MS = 250;
|
||||
|
||||
@Injectable({ providedIn: 'root' })
|
||||
export class TasksApiService {
|
||||
private tasks: Task[] = [
|
||||
{
|
||||
id: 'task-1',
|
||||
title: 'Review signal store conventions',
|
||||
completed: true,
|
||||
priority: 'high',
|
||||
updatedAt: '2026-03-08T08:00:00.000Z',
|
||||
},
|
||||
{
|
||||
id: 'task-2',
|
||||
title: 'Document persistence boundaries',
|
||||
completed: false,
|
||||
priority: 'medium',
|
||||
updatedAt: '2026-03-08T08:02:00.000Z',
|
||||
},
|
||||
{
|
||||
id: 'task-3',
|
||||
title: 'Prepare lazy-loaded feature shell',
|
||||
completed: false,
|
||||
priority: 'low',
|
||||
updatedAt: '2026-03-08T08:05:00.000Z',
|
||||
},
|
||||
];
|
||||
|
||||
getTasks(): Observable<Task[]> {
|
||||
return of(this.tasks).pipe(delay(NETWORK_DELAY_MS));
|
||||
}
|
||||
|
||||
createTask(title: string, priority: TaskPriority): Observable<Task> {
|
||||
const trimmedTitle = title.trim();
|
||||
|
||||
if (!trimmedTitle) {
|
||||
return throwError(() => new Error('Task title cannot be empty.'));
|
||||
}
|
||||
|
||||
const task: Task = {
|
||||
id: crypto.randomUUID(),
|
||||
title: trimmedTitle,
|
||||
completed: false,
|
||||
priority,
|
||||
updatedAt: new Date().toISOString(),
|
||||
};
|
||||
|
||||
this.tasks = [task, ...this.tasks];
|
||||
|
||||
return of(task).pipe(delay(NETWORK_DELAY_MS));
|
||||
}
|
||||
|
||||
toggleTask(taskId: string): Observable<Task> {
|
||||
const task = this.tasks.find((item) => item.id === taskId);
|
||||
|
||||
if (!task) {
|
||||
return throwError(() => new Error('Task not found.'));
|
||||
}
|
||||
|
||||
const updatedTask: Task = {
|
||||
...task,
|
||||
completed: !task.completed,
|
||||
updatedAt: new Date().toISOString(),
|
||||
};
|
||||
|
||||
this.tasks = this.tasks.map((item) => (item.id === taskId ? updatedTask : item));
|
||||
|
||||
return of(updatedTask).pipe(delay(NETWORK_DELAY_MS));
|
||||
}
|
||||
|
||||
archiveCompleted(): Observable<string[]> {
|
||||
const archivedIds = this.tasks.filter((task) => task.completed).map((task) => task.id);
|
||||
|
||||
this.tasks = this.tasks.filter((task) => !task.completed);
|
||||
|
||||
return of(archivedIds).pipe(delay(NETWORK_DELAY_MS));
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,221 @@
|
||||
import { computed, inject } from '@angular/core';
|
||||
import {
|
||||
addEntity,
|
||||
removeEntities,
|
||||
setAllEntities,
|
||||
updateEntity,
|
||||
withEntities,
|
||||
} from '@ngrx/signals/entities';
|
||||
import {
|
||||
signalStore,
|
||||
withComputed,
|
||||
withHooks,
|
||||
withMethods,
|
||||
withState,
|
||||
} from '@ngrx/signals';
|
||||
import { rxMethod } from '@ngrx/signals/rxjs-interop';
|
||||
import {
|
||||
setError,
|
||||
setLoaded,
|
||||
setLoading,
|
||||
updateState,
|
||||
withCallState,
|
||||
withDevtools,
|
||||
withLocalStorage,
|
||||
withStorageSync,
|
||||
} from '@angular-architects/ngrx-toolkit';
|
||||
import { EMPTY, pipe } from 'rxjs';
|
||||
import { catchError, switchMap, tap } from 'rxjs/operators';
|
||||
import { Task, TaskFilter, TaskPriority } from './task.model';
|
||||
import { TasksApiService } from './tasks-api.service';
|
||||
|
||||
interface TasksState {
|
||||
filter: TaskFilter;
|
||||
draftPriority: TaskPriority;
|
||||
searchTerm: string;
|
||||
lastSyncedAt: string | null;
|
||||
}
|
||||
|
||||
const initialState: TasksState = {
|
||||
filter: 'all',
|
||||
draftPriority: 'medium',
|
||||
searchTerm: '',
|
||||
lastSyncedAt: null,
|
||||
};
|
||||
|
||||
function matchesFilter(task: Task, filter: TaskFilter): boolean {
|
||||
switch (filter) {
|
||||
case 'active':
|
||||
return !task.completed;
|
||||
case 'completed':
|
||||
return task.completed;
|
||||
default:
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
export const TasksStore = signalStore(
|
||||
{ providedIn: 'root' },
|
||||
withState(initialState),
|
||||
withEntities<Task>(),
|
||||
withCallState(),
|
||||
withDevtools('tasks-store'),
|
||||
withStorageSync(
|
||||
{
|
||||
key: 'ngrx-playground.tasks',
|
||||
select: (state) => ({
|
||||
ids: state.ids,
|
||||
entityMap: state.entityMap,
|
||||
filter: state.filter,
|
||||
draftPriority: state.draftPriority,
|
||||
searchTerm: state.searchTerm,
|
||||
lastSyncedAt: state.lastSyncedAt,
|
||||
}),
|
||||
},
|
||||
withLocalStorage(),
|
||||
),
|
||||
withComputed((store) => ({
|
||||
filteredTasks: computed(() => {
|
||||
const normalizedSearch = store.searchTerm().trim().toLowerCase();
|
||||
|
||||
return store.entities().filter((task) => {
|
||||
const matchesText = normalizedSearch.length === 0 || task.title.toLowerCase().includes(normalizedSearch);
|
||||
|
||||
return matchesFilter(task, store.filter()) && matchesText;
|
||||
});
|
||||
}),
|
||||
totalCount: computed(() => store.entities().length),
|
||||
activeCount: computed(() => store.entities().filter((task) => !task.completed).length),
|
||||
completedCount: computed(() => store.entities().filter((task) => task.completed).length),
|
||||
hasCompletedTasks: computed(() => store.entities().some((task) => task.completed)),
|
||||
emptyStateMessage: computed(() => {
|
||||
if (store.loading()) {
|
||||
return 'Loading tasks...';
|
||||
}
|
||||
|
||||
if (store.error()) {
|
||||
return 'The task list could not be refreshed.';
|
||||
}
|
||||
|
||||
if (store.entities().length === 0) {
|
||||
return 'No tasks saved yet. Create the first one.';
|
||||
}
|
||||
|
||||
return 'No tasks match the current filters.';
|
||||
}),
|
||||
lastSyncedLabel: computed(() => {
|
||||
const value = store.lastSyncedAt();
|
||||
return value ? new Date(value).toLocaleTimeString('en-US') : 'Never';
|
||||
}),
|
||||
})),
|
||||
methodsStore(),
|
||||
withHooks({
|
||||
onInit(store) {
|
||||
if (store.entities().length === 0) {
|
||||
store.loadTasks();
|
||||
}
|
||||
},
|
||||
}),
|
||||
);
|
||||
|
||||
function methodsStore() {
|
||||
return withMethods((store, api = inject(TasksApiService)) => ({
|
||||
loadTasks: rxMethod<void>(
|
||||
pipe(
|
||||
tap(() => updateState(store, 'tasks load started', setLoading())),
|
||||
switchMap(() =>
|
||||
api.getTasks().pipe(
|
||||
tap((tasks) =>
|
||||
updateState(
|
||||
store,
|
||||
'tasks load succeeded',
|
||||
setAllEntities(tasks),
|
||||
{ lastSyncedAt: new Date().toISOString() },
|
||||
setLoaded(),
|
||||
),
|
||||
),
|
||||
catchError((error: unknown) => {
|
||||
updateState(store, 'tasks load failed', setError(error));
|
||||
return EMPTY;
|
||||
}),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
|
||||
createTask: rxMethod<{ title: string; priority: TaskPriority }>(
|
||||
pipe(
|
||||
tap(() => updateState(store, 'task create started', setLoading())),
|
||||
switchMap(({ title, priority }) =>
|
||||
api.createTask(title, priority).pipe(
|
||||
tap((task) =>
|
||||
updateState(store, 'task create succeeded', addEntity(task), { lastSyncedAt: task.updatedAt }, setLoaded()),
|
||||
),
|
||||
catchError((error: unknown) => {
|
||||
updateState(store, 'task create failed', setError(error));
|
||||
return EMPTY;
|
||||
}),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
|
||||
toggleTask: rxMethod<string>(
|
||||
pipe(
|
||||
tap(() => updateState(store, 'task toggle started', setLoading())),
|
||||
switchMap((taskId) =>
|
||||
api.toggleTask(taskId).pipe(
|
||||
tap((task) =>
|
||||
updateState(
|
||||
store,
|
||||
'task toggle succeeded',
|
||||
updateEntity({ id: task.id, changes: task }),
|
||||
{ lastSyncedAt: task.updatedAt },
|
||||
setLoaded(),
|
||||
),
|
||||
),
|
||||
catchError((error: unknown) => {
|
||||
updateState(store, 'task toggle failed', setError(error));
|
||||
return EMPTY;
|
||||
}),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
|
||||
archiveCompleted: rxMethod<void>(
|
||||
pipe(
|
||||
tap(() => updateState(store, 'completed tasks archive started', setLoading())),
|
||||
switchMap(() =>
|
||||
api.archiveCompleted().pipe(
|
||||
tap((archivedIds) =>
|
||||
updateState(
|
||||
store,
|
||||
'completed tasks archive succeeded',
|
||||
removeEntities(archivedIds),
|
||||
{ lastSyncedAt: new Date().toISOString() },
|
||||
setLoaded(),
|
||||
),
|
||||
),
|
||||
catchError((error: unknown) => {
|
||||
updateState(store, 'completed tasks archive failed', setError(error));
|
||||
return EMPTY;
|
||||
}),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
|
||||
setFilter(filter: TaskFilter): void {
|
||||
updateState(store, 'task filter changed', { filter });
|
||||
},
|
||||
|
||||
setDraftPriority(priority: TaskPriority): void {
|
||||
updateState(store, 'task priority draft changed', { draftPriority: priority });
|
||||
},
|
||||
|
||||
setSearchTerm(searchTerm: string): void {
|
||||
updateState(store, 'task search changed', { searchTerm });
|
||||
},
|
||||
}));
|
||||
}
|
||||
@@ -0,0 +1,440 @@
|
||||
:host {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.tasks-page {
|
||||
display: grid;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.hero {
|
||||
display: grid;
|
||||
gap: 1.75rem;
|
||||
padding: 2rem;
|
||||
border: 1px solid rgba(214, 230, 230, 0.32);
|
||||
border-radius: 1.8rem;
|
||||
background:
|
||||
linear-gradient(120deg, rgba(255, 255, 255, 0.08), transparent 32%),
|
||||
radial-gradient(circle at top right, rgba(255, 196, 93, 0.34), transparent 28%),
|
||||
linear-gradient(135deg, #102d3a, #11495b 56%, #2f7a72);
|
||||
color: #f6fbff;
|
||||
box-shadow:
|
||||
0 34px 70px rgba(19, 43, 49, 0.18),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.hero-copy {
|
||||
display: grid;
|
||||
gap: 0.8rem;
|
||||
}
|
||||
|
||||
.hero-badges {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.75rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
margin: 0;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.14em;
|
||||
text-transform: uppercase;
|
||||
color: rgba(246, 251, 255, 0.8);
|
||||
}
|
||||
|
||||
.hero-chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
min-height: 2rem;
|
||||
padding: 0.25rem 0.75rem;
|
||||
border-radius: 999px;
|
||||
background: rgba(255, 255, 255, 0.14);
|
||||
font-size: 0.78rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
.hero h1,
|
||||
.hero .lead {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.hero h1 {
|
||||
font-size: clamp(2rem, 5vw, 3.4rem);
|
||||
line-height: 0.95;
|
||||
}
|
||||
|
||||
.lead {
|
||||
max-width: 44rem;
|
||||
color: rgba(246, 251, 255, 0.84);
|
||||
font-size: 1rem;
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
.summary-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
|
||||
gap: 0.9rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.summary-grid div {
|
||||
padding: 1rem 1.1rem;
|
||||
border: 1px solid rgba(255, 255, 255, 0.12);
|
||||
border-radius: 1.15rem;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
backdrop-filter: blur(8px);
|
||||
}
|
||||
|
||||
.summary-grid dt {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
color: rgba(246, 251, 255, 0.74);
|
||||
}
|
||||
|
||||
.summary-grid dd {
|
||||
margin: 0.35rem 0 0;
|
||||
font-size: 1.7rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.workspace {
|
||||
display: grid;
|
||||
gap: 1.1rem;
|
||||
}
|
||||
|
||||
.composer,
|
||||
.toolbar,
|
||||
.task-card,
|
||||
.empty-state {
|
||||
padding: 1.2rem;
|
||||
border: 1px solid rgba(20, 54, 60, 0.08);
|
||||
border-radius: 1.35rem;
|
||||
background: rgba(255, 255, 255, 0.82);
|
||||
box-shadow:
|
||||
0 18px 40px rgba(18, 43, 48, 0.08),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.9);
|
||||
backdrop-filter: blur(14px);
|
||||
}
|
||||
|
||||
.composer,
|
||||
.toolbar {
|
||||
display: grid;
|
||||
gap: 1.1rem;
|
||||
}
|
||||
|
||||
.section-heading {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.7rem 1rem;
|
||||
justify-content: space-between;
|
||||
align-items: end;
|
||||
}
|
||||
|
||||
.section-heading h2,
|
||||
.section-note,
|
||||
.section-kicker {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.section-kicker {
|
||||
font-size: 0.76rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.14em;
|
||||
text-transform: uppercase;
|
||||
color: #5e787d;
|
||||
}
|
||||
|
||||
.section-heading h2 {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.section-note {
|
||||
max-width: 26rem;
|
||||
color: #678086;
|
||||
font-size: 0.92rem;
|
||||
}
|
||||
|
||||
.composer-grid,
|
||||
.toolbar-grid {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.composer label,
|
||||
.search {
|
||||
display: grid;
|
||||
gap: 0.45rem;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.composer span,
|
||||
.search span {
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
color: #35535b;
|
||||
}
|
||||
|
||||
input,
|
||||
select,
|
||||
button {
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
input,
|
||||
select {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 0.86rem 0.95rem;
|
||||
border: 1px solid rgba(35, 71, 78, 0.18);
|
||||
border-radius: 0.9rem;
|
||||
background: rgba(249, 251, 251, 0.92);
|
||||
color: #102932;
|
||||
transition:
|
||||
border-color 180ms ease,
|
||||
box-shadow 180ms ease,
|
||||
background-color 180ms ease;
|
||||
}
|
||||
|
||||
input:focus,
|
||||
select:focus {
|
||||
outline: none;
|
||||
border-color: rgba(17, 73, 91, 0.46);
|
||||
box-shadow: 0 0 0 4px rgba(17, 73, 91, 0.12);
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 0.78rem 1.08rem;
|
||||
border: 0;
|
||||
border-radius: 999px;
|
||||
background: #153f49;
|
||||
color: #ffffff;
|
||||
cursor: pointer;
|
||||
font-weight: 700;
|
||||
transition:
|
||||
transform 180ms ease,
|
||||
box-shadow 180ms ease,
|
||||
opacity 180ms ease,
|
||||
background-color 180ms ease;
|
||||
}
|
||||
|
||||
button:hover:not([disabled]) {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 10px 24px rgba(21, 63, 73, 0.2);
|
||||
}
|
||||
|
||||
button[disabled] {
|
||||
opacity: 0.55;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.primary-action {
|
||||
background: linear-gradient(135deg, #153f49, #23666b);
|
||||
}
|
||||
|
||||
.ghost-action {
|
||||
background: rgba(20, 54, 60, 0.08);
|
||||
color: #153f49;
|
||||
}
|
||||
|
||||
.filters,
|
||||
.toolbar-actions,
|
||||
.task-main,
|
||||
.task-status,
|
||||
.task-meta {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.75rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.filters button {
|
||||
background: rgba(20, 54, 60, 0.08);
|
||||
color: #15353a;
|
||||
}
|
||||
|
||||
.filters button.active {
|
||||
background: #153f49;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.toolbar-divider {
|
||||
width: 1px;
|
||||
min-height: 3.1rem;
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(19, 63, 73, 0),
|
||||
rgba(19, 63, 73, 0.18),
|
||||
rgba(19, 63, 73, 0)
|
||||
);
|
||||
}
|
||||
|
||||
.toolbar-actions {
|
||||
padding-left: 0.5rem;
|
||||
}
|
||||
|
||||
.task-list {
|
||||
display: grid;
|
||||
gap: 0.9rem;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.task-card.done {
|
||||
background: rgba(238, 247, 244, 0.92);
|
||||
}
|
||||
|
||||
.task-main {
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.task-status {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.task-copy {
|
||||
flex: 1 1 18rem;
|
||||
display: grid;
|
||||
gap: 0.45rem;
|
||||
}
|
||||
|
||||
.task-main h2,
|
||||
.feedback {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.task-main h2 {
|
||||
font-size: 1.02rem;
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
.task-meta {
|
||||
gap: 0.55rem;
|
||||
color: #5e767c;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.meta-pill {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
min-height: 1.75rem;
|
||||
padding: 0.2rem 0.65rem;
|
||||
border-radius: 999px;
|
||||
background: rgba(20, 54, 60, 0.08);
|
||||
color: #1b4a51;
|
||||
font-size: 0.76rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
}
|
||||
|
||||
.priority-mark {
|
||||
width: 0.8rem;
|
||||
height: 0.8rem;
|
||||
border-radius: 50%;
|
||||
background: #e2b34f;
|
||||
box-shadow: 0 0 0 5px rgba(226, 179, 79, 0.12);
|
||||
}
|
||||
|
||||
.priority-mark.high {
|
||||
background: #cf5b35;
|
||||
box-shadow: 0 0 0 5px rgba(207, 91, 53, 0.12);
|
||||
}
|
||||
|
||||
.priority-mark.medium {
|
||||
background: #d7a847;
|
||||
box-shadow: 0 0 0 5px rgba(215, 168, 71, 0.12);
|
||||
}
|
||||
|
||||
.priority-mark.low {
|
||||
background: #4f8b74;
|
||||
box-shadow: 0 0 0 5px rgba(79, 139, 116, 0.12);
|
||||
}
|
||||
|
||||
.toggle {
|
||||
min-width: 7.5rem;
|
||||
background: rgba(217, 93, 57, 0.12);
|
||||
color: #a94a2b;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.task-card.done .toggle {
|
||||
background: rgba(74, 130, 85, 0.14);
|
||||
color: #406c45;
|
||||
}
|
||||
|
||||
.feedback {
|
||||
padding: 0.95rem 1rem;
|
||||
border-radius: 1rem;
|
||||
background: rgba(233, 243, 245, 0.86);
|
||||
color: #24434c;
|
||||
}
|
||||
|
||||
.feedback.error {
|
||||
background: rgba(255, 233, 228, 0.9);
|
||||
color: #8d2d10;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
color: #4a6368;
|
||||
text-align: center;
|
||||
padding-block: 2rem;
|
||||
}
|
||||
|
||||
@media (min-width: 720px) {
|
||||
.composer-grid {
|
||||
grid-template-columns: minmax(0, 1fr) minmax(10rem, 12rem) auto;
|
||||
align-items: end;
|
||||
}
|
||||
|
||||
.toolbar-grid {
|
||||
grid-template-columns: minmax(16rem, 1.3fr) auto 1px auto;
|
||||
align-items: end;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 719px) {
|
||||
.hero,
|
||||
.composer,
|
||||
.toolbar,
|
||||
.task-card,
|
||||
.empty-state {
|
||||
padding: 1rem;
|
||||
border-radius: 1.15rem;
|
||||
}
|
||||
|
||||
.task-main {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.toolbar-actions {
|
||||
width: 100%;
|
||||
padding-left: 0;
|
||||
padding-top: 0.35rem;
|
||||
border-top: 1px solid rgba(19, 63, 73, 0.08);
|
||||
}
|
||||
|
||||
.toolbar-actions button {
|
||||
flex: 1 1 10rem;
|
||||
}
|
||||
|
||||
.toolbar-divider {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.composer-grid {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.composer-grid > * {
|
||||
min-width: 0;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,187 @@
|
||||
<section class="tasks-page">
|
||||
<header class="hero">
|
||||
<div class="hero-copy">
|
||||
<div class="hero-badges">
|
||||
<p class="eyebrow">Signal Store Feature</p>
|
||||
<span class="hero-chip">Devtools Connected</span>
|
||||
</div>
|
||||
<h1>Delivery Board</h1>
|
||||
<p class="lead">
|
||||
A realistic feature slice with entity state, asynchronous updates,
|
||||
persistence, and a clean operator flow for scalable Angular
|
||||
teams.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<dl class="summary-grid">
|
||||
<div>
|
||||
<dt>Total</dt>
|
||||
<dd>{{ store.totalCount() }}</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>Active</dt>
|
||||
<dd>{{ store.activeCount() }}</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>Completed</dt>
|
||||
<dd>{{ store.completedCount() }}</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>Synced</dt>
|
||||
<dd>{{ store.lastSyncedLabel() }}</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</header>
|
||||
|
||||
<section class="workspace">
|
||||
<form
|
||||
class="composer"
|
||||
(submit)="createTask(); $event.preventDefault()">
|
||||
<div class="section-heading">
|
||||
<div>
|
||||
<p class="section-kicker">Compose</p>
|
||||
<h2>Capture the next delivery item</h2>
|
||||
</div>
|
||||
<p class="section-note">
|
||||
Fast input for planning work without leaving the board.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="composer-grid">
|
||||
<label>
|
||||
<span>Task title</span>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Add a task with product value"
|
||||
[value]="draftTitle()"
|
||||
(input)="updateDraftTitle($event)" />
|
||||
</label>
|
||||
|
||||
<label>
|
||||
<span>Priority</span>
|
||||
<select
|
||||
[value]="store.draftPriority()"
|
||||
(change)="updateDraftPriority($event)">
|
||||
@for (priority of priorities; track priority) {
|
||||
<option [value]="priority">{{ priority }}</option>
|
||||
}
|
||||
</select>
|
||||
</label>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
class="primary-action"
|
||||
[disabled]="!canCreateTask()">
|
||||
Create task
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="toolbar">
|
||||
<div class="section-heading">
|
||||
<div>
|
||||
<p class="section-kicker">Refine</p>
|
||||
<h2>Focus the board</h2>
|
||||
</div>
|
||||
<p class="section-note">
|
||||
Search, segment, refresh, or archive completed work.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="toolbar-grid">
|
||||
<label class="search">
|
||||
<span>Search</span>
|
||||
<input
|
||||
type="search"
|
||||
placeholder="Filter tasks"
|
||||
[value]="store.searchTerm()"
|
||||
(input)="updateSearchTerm($event)" />
|
||||
</label>
|
||||
|
||||
<div
|
||||
class="filters"
|
||||
role="group"
|
||||
aria-label="Task filters">
|
||||
@for (filter of filters; track filter) {
|
||||
<button
|
||||
type="button"
|
||||
[class.active]="store.filter() === filter"
|
||||
(click)="store.setFilter(filter)">
|
||||
{{ filter }}
|
||||
</button>
|
||||
}
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="toolbar-divider"
|
||||
aria-hidden="true"></div>
|
||||
|
||||
<div
|
||||
class="toolbar-actions"
|
||||
role="group"
|
||||
aria-label="Task actions">
|
||||
<button
|
||||
type="button"
|
||||
class="ghost-action"
|
||||
(click)="store.loadTasks()">
|
||||
Refresh
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="primary-action"
|
||||
[disabled]="!store.hasCompletedTasks() || store.loading()"
|
||||
(click)="store.archiveCompleted()">
|
||||
Archive completed
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@if (store.error(); as errorMessage) {
|
||||
<p
|
||||
class="feedback error"
|
||||
role="alert">
|
||||
{{ errorMessage }}
|
||||
</p>
|
||||
}
|
||||
|
||||
@if (store.loading()) {
|
||||
<p class="feedback">Synchronizing tasks...</p>
|
||||
}
|
||||
|
||||
<ul class="task-list">
|
||||
@for (task of store.filteredTasks(); track task.id) {
|
||||
<li
|
||||
class="task-card"
|
||||
[class.done]="task.completed">
|
||||
<div class="task-main">
|
||||
<div class="task-status">
|
||||
<span
|
||||
class="priority-mark"
|
||||
[class.high]="task.priority === 'high'"
|
||||
[class.medium]="task.priority === 'medium'"
|
||||
[class.low]="task.priority === 'low'"></span>
|
||||
<button
|
||||
type="button"
|
||||
class="toggle"
|
||||
[attr.aria-pressed]="task.completed"
|
||||
(click)="store.toggleTask(task.id)">
|
||||
{{ task.completed ? 'Completed' : 'Open' }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="task-copy">
|
||||
<h2>{{ task.title }}</h2>
|
||||
<div class="task-meta">
|
||||
<span class="meta-pill">{{ task.priority }}</span>
|
||||
<span>Updated {{ task.updatedAt }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
} @empty {
|
||||
<li class="empty-state">{{ store.emptyStateMessage() }}</li>
|
||||
}
|
||||
</ul>
|
||||
</section>
|
||||
</section>
|
||||
@@ -0,0 +1,46 @@
|
||||
import { ChangeDetectionStrategy, Component, computed, inject, signal } from '@angular/core';
|
||||
import { TasksStore } from '../data-access/tasks.store';
|
||||
import { TaskFilter, TaskPriority } from '../data-access/task.model';
|
||||
|
||||
@Component({
|
||||
selector: 'app-tasks-page',
|
||||
templateUrl: './tasks-page.component.html',
|
||||
styleUrl: './tasks-page.component.css',
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
})
|
||||
export class TasksPageComponent {
|
||||
readonly store = inject(TasksStore);
|
||||
readonly draftTitle = signal('');
|
||||
readonly canCreateTask = computed(() => this.draftTitle().trim().length > 0 && !this.store.loading());
|
||||
readonly filters: TaskFilter[] = ['all', 'active', 'completed'];
|
||||
readonly priorities: TaskPriority[] = ['low', 'medium', 'high'];
|
||||
|
||||
createTask(): void {
|
||||
const title = this.draftTitle().trim();
|
||||
|
||||
if (!title) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.store.createTask({
|
||||
title,
|
||||
priority: this.store.draftPriority(),
|
||||
});
|
||||
this.draftTitle.set('');
|
||||
}
|
||||
|
||||
updateDraftTitle(event: Event): void {
|
||||
const element = event.target as HTMLInputElement;
|
||||
this.draftTitle.set(element.value);
|
||||
}
|
||||
|
||||
updateSearchTerm(event: Event): void {
|
||||
const element = event.target as HTMLInputElement;
|
||||
this.store.setSearchTerm(element.value);
|
||||
}
|
||||
|
||||
updateDraftPriority(event: Event): void {
|
||||
const element = event.target as HTMLSelectElement;
|
||||
this.store.setDraftPriority(element.value as TaskPriority);
|
||||
}
|
||||
}
|
||||
+15
-10
@@ -1,13 +1,18 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>NgrxPlayground</title>
|
||||
<base href="/" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<link rel="icon" type="image/x-icon" href="favicon.ico" />
|
||||
</head>
|
||||
<body>
|
||||
<app-root></app-root>
|
||||
</body>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>NgrxPlayground</title>
|
||||
<base href="/" />
|
||||
<meta
|
||||
name="viewport"
|
||||
content="width=device-width, initial-scale=1" />
|
||||
<link
|
||||
rel="icon"
|
||||
type="image/x-icon"
|
||||
href="favicon.ico" />
|
||||
</head>
|
||||
<body>
|
||||
<app-root></app-root>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+3
-3
@@ -1,5 +1,5 @@
|
||||
import { bootstrapApplication } from "@angular/platform-browser";
|
||||
import { appConfig } from "./app/app.config";
|
||||
import { App } from "./app/app";
|
||||
import { bootstrapApplication } from '@angular/platform-browser';
|
||||
import { appConfig } from './app/app.config';
|
||||
import { App } from './app/app';
|
||||
|
||||
bootstrapApplication(App, appConfig).catch((err) => console.error(err));
|
||||
|
||||
Reference in New Issue
Block a user