Merge branch 'angular-architects:main' into main

Author: wolfmanfx

apps/demo/e2e/todo-entity-resource.spec.ts

@@ -0,0 +1,28 @@
+import { expect, test } from '@playwright/test';
+
+test.describe('withEntityResources - todos', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('');
+    await page.getByRole('link', { name: 'withEntityResources' }).click();
+  });
+
+  test('add one todo and remove another', async ({ page }) => {
+    await expect(page.getByRole('row', { name: 'Buy milk' })).toBeVisible();
+    await expect(page.getByRole('row', { name: 'Walk the dog' })).toBeVisible();
+
+    await page.locator('[data-id="todoer-new"]').click();
+    await page.locator('[data-id="todoer-new"]').fill('Read a book');
+    await page.locator('[data-id="todoer-add"]').click();
+
+    await expect(page.getByRole('row', { name: 'Read a book' })).toBeVisible();
+
+    await page
+      .getByRole('row', { name: 'Buy milk' })
+      .locator('[data-id="todoer-delete"]')
+      .click();
+
+    await expect(page.getByRole('row', { name: 'Buy milk' })).toHaveCount(0);
+    await expect(page.getByRole('row', { name: 'Read a book' })).toBeVisible();
+    await expect(page.getByRole('row', { name: 'Walk the dog' })).toBeVisible();
+  });
+});

apps/demo/src/app/app.component.html

@@ -1,8 +1,11 @@
 <mat-toolbar color="primary">
+  <button matIconButton (click)="drawer.toggle()">
+    <mat-icon>menu</mat-icon>
+  </button>
   <span>NgRx Toolkit Demo</span>
 </mat-toolbar>
 <mat-drawer-container class="container">
-  <mat-drawer mode="side" opened>
+  <mat-drawer mode="side" #drawer [opened]="opened()">
     <mat-nav-list>
       <a mat-list-item routerLink="/todo">DevTools</a>
       <a mat-list-item routerLink="/events-sample">Events + DevTools Sample</a>
@@ -29,6 +32,10 @@
       <a mat-list-item routerLink="/conditional">withConditional</a>
       <a mat-list-item routerLink="/mutation">withMutation</a>
       <a mat-list-item routerLink="/rx-mutation">rxMutation (without Store)</a>
+      <a mat-list-item routerLink="/todo-entity-resource"
+        >withEntityResources</a
+      >
+      <a mat-list-item routerLink="/with-resource">withResource</a>
     </mat-nav-list>
   </mat-drawer>
   <mat-drawer-content>

apps/demo/src/app/app.component.ts

@@ -1,16 +1,15 @@
-import { CommonModule } from '@angular/common';
-import { Component } from '@angular/core';
+import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
+import { Component, inject } from '@angular/core';
+import { toSignal } from '@angular/core/rxjs-interop';
+import { MatButtonModule } from '@angular/material/button';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatIconModule } from '@angular/material/icon';
 import { MatListModule } from '@angular/material/list';
-import {
-  MatDrawer,
-  MatDrawerContainer,
-  MatDrawerContent,
-} from '@angular/material/sidenav';
+import { MatSidenavModule } from '@angular/material/sidenav';
 import { MatTableModule } from '@angular/material/table';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import { RouterLink, RouterOutlet } from '@angular/router';
+import { map } from 'rxjs';
 
 @Component({
   selector: 'demo-root',
@@ -22,11 +21,9 @@ import { RouterLink, RouterOutlet } from '@angular/router';
     MatListModule,
     RouterLink,
     RouterOutlet,
-    CommonModule,
     MatToolbarModule,
-    MatDrawer,
-    MatDrawerContainer,
-    MatDrawerContent,
+    MatSidenavModule,
+    MatButtonModule,
   ],
   styles: `
     .container {
@@ -37,4 +34,18 @@ import { RouterLink, RouterOutlet } from '@angular/router';
     }
   `,
 })
-export class AppComponent {}
+export class AppComponent {
+  opened = toSignal(
+    inject(BreakpointObserver)
+      .observe([Breakpoints.XSmall, Breakpoints.Small])
+      .pipe(
+        map(
+          ({ breakpoints }) =>
+            !(
+              breakpoints[Breakpoints.XSmall] || breakpoints[Breakpoints.Small]
+            ),
+        ),
+      ),
+    { requireSync: true },
+  );
+}

apps/demo/src/app/app.config.ts

@@ -1,15 +1,16 @@
 import { LayoutModule } from '@angular/cdk/layout';
-import { provideHttpClient } from '@angular/common/http';
+import { provideHttpClient, withInterceptors } from '@angular/common/http';
 import { ApplicationConfig, importProvidersFrom } from '@angular/core';
 import { provideAnimations } from '@angular/platform-browser/animations';
 import { provideRouter, withComponentInputBinding } from '@angular/router';
 import { appRoutes } from './app.routes';
+import { memoryHttpInterceptor } from './todo-entity-resource/memory-http.interceptor';
 
 export const appConfig: ApplicationConfig = {
   providers: [
     provideRouter(appRoutes, withComponentInputBinding()),
     provideAnimations(),
-    provideHttpClient(),
+    provideHttpClient(withInterceptors([memoryHttpInterceptor])),
     importProvidersFrom(LayoutModule),
   ],
 };

apps/demo/src/app/counter-rx-mutation/counter-rx-mutation.ts

@@ -16,6 +16,9 @@ export type CounterResponse = {
   json: { counter: number };
 };
 
+// TODO - rename this file to just be `mutations-functions-standalone` + class/selector etc??
+// And then the other folder to "store"
+// Or maybe put these all in one folder too while we are at it?
 @Component({
   selector: 'demo-counter-rx-mutation',
   imports: [CommonModule],

apps/demo/src/app/devtools/todo-store.ts

@@ -30,7 +30,14 @@ export const TodoStore = signalStore(
       },
 
       remove(id: number) {
-        updateState(store, 'remove todo', removeEntity(id));
+        updateState(
+          store,
+          'remove todo',
+          removeEntity(id),
+          ({ selectedIds }) => ({
+            selectedIds: selectedIds.filter((selectedId) => selectedId !== id),
+          }),
+        );
       },
 
       toggleFinished(id: number): void {

apps/demo/src/app/lazy-routes.ts

@@ -77,4 +77,18 @@ export const lazyRoutes: Route[] = [
         (m) => m.CounterRxMutation,
       ),
   },
+  {
+    path: 'todo-entity-resource',
+    loadComponent: () =>
+      import('./todo-entity-resource/todo-entity-resource.component').then(
+        (m) => m.TodoEntityResourceComponent,
+      ),
+  },
+  {
+    path: 'with-resource',
+    loadComponent: () =>
+      import('./with-resource/with-resource.component').then(
+        (m) => m.WithResourceComponent,
+      ),
+  },
 ];

apps/demo/src/app/todo-entity-resource/memory-http.interceptor.ts

@@ -0,0 +1,68 @@
+import {
+  HttpErrorResponse,
+  HttpEvent,
+  HttpInterceptorFn,
+  HttpRequest,
+  HttpResponse,
+} from '@angular/common/http';
+import {
+  EnvironmentInjector,
+  inject,
+  runInInjectionContext,
+} from '@angular/core';
+import { Observable, of, switchMap } from 'rxjs';
+import { Todo, TodoMemoryService } from './todo-memory.service';
+
+function respond<T>(req: HttpRequest<unknown>, body: T): HttpResponse<T> {
+  return new HttpResponse<T>({
+    url: req.url,
+    status: 200,
+    statusText: 'OK',
+    body,
+  });
+}
+
+export const memoryHttpInterceptor: HttpInterceptorFn = (
+  req,
+  next,
+): Observable<HttpEvent<unknown>> => {
+  const match = req.url.match(/\/memory\/(add|toggle|remove)(?:\/(\d+))?/);
+  if (!match) return next(req);
+
+  // Ensure we resolve service inside an injection context
+  const env = inject(EnvironmentInjector);
+  const svc = runInInjectionContext(env, () => inject(TodoMemoryService));
+
+  const action = match[1];
+  const idPart = match[2];
+
+  switch (action) {
+    case 'add': {
+      const todo = req.body as Todo;
+      return svc
+        .add(todo)
+        .pipe(switchMap((t) => of(respond(req, t) as HttpEvent<unknown>)));
+    }
+    case 'toggle': {
+      const id = Number(idPart);
+      const completed = (req.body as { completed: boolean }).completed;
+      return svc.toggle(id, completed).pipe(
+        switchMap((t) => {
+          if (t) {
+            return of(respond(req, t) as HttpEvent<unknown>);
+          }
+          const err = new HttpErrorResponse({ url: req.url, status: 404 });
+          throw err;
+        }),
+      );
+    }
+    case 'remove': {
+      const id = Number(idPart);
+      return svc
+        .remove(id)
+        .pipe(switchMap((ok) => of(respond(req, ok) as HttpEvent<unknown>)));
+    }
+    default:
+      return next(req);
+  }
+};

apps/demo/src/app/todo-entity-resource/todo-entity-resource.component.html

@@ -0,0 +1,60 @@
+<div class="toolbar">
+  <mat-form-field appearance="outline" class="filter">
+    <mat-label>Filter</mat-label>
+    <input
+      matInput
+      [ngModel]="store.filter()"
+      (ngModelChange)="store.setFilter($event)"
+      data-id="todoer-filter"
+      placeholder="Type to filter todos"
+    />
+  </mat-form-field>
+
+  <mat-form-field appearance="outline" class="new-item">
+    <mat-label>New todo</mat-label>
+    <input
+      matInput
+      [(ngModel)]="newTitle"
+      (keyup.enter)="add()"
+      data-id="todoer-new"
+      placeholder="New todo"
+    />
+  </mat-form-field>
+  <button
+    mat-raised-button
+    color="primary"
+    (click)="add()"
+    data-id="todoer-add"
+  >
+    Add
+  </button>
+</div>
+
+<mat-table [dataSource]="dataSource" class="mat-elevation-z8">
+  <ng-container matColumnDef="completed">
+    <mat-header-cell *matHeaderCellDef></mat-header-cell>
+    <mat-cell *matCellDef="let row" class="actions">
+      <mat-icon
+        (click)="store.toggleTodo({ id: row.id, completed: !row.completed })"
+        data-id="todoer-toggle"
+      >
+        {{ row.completed ? 'check_box' : 'check_box_outline_blank' }}
+      </mat-icon>
+      <mat-icon
+        color="warn"
+        (click)="store.removeTodo(row.id)"
+        data-id="todoer-delete"
+        aria-label="delete"
+        >delete</mat-icon
+      >
+    </mat-cell>
+  </ng-container>
+
+  <ng-container matColumnDef="title">
+    <mat-header-cell *matHeaderCellDef>Title</mat-header-cell>
+    <mat-cell *matCellDef="let element">{{ element.title }}</mat-cell>
+  </ng-container>
+
+  <mat-header-row *matHeaderRowDef="['completed', 'title']"></mat-header-row>
+  <mat-row *matRowDef="let row; columns: ['completed', 'title']"></mat-row>
+</mat-table>

apps/demo/src/app/todo-entity-resource/todo-entity-resource.component.ts

@@ -0,0 +1,55 @@
+import { CommonModule } from '@angular/common';
+import { Component, computed, effect, inject } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { MatIcon } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { MatListModule } from '@angular/material/list';
+import { MatTableDataSource, MatTableModule } from '@angular/material/table';
+import { TodoEntityResourceStore } from './todo-entity-resource.store';
+
+@Component({
+  selector: 'demo-todo-entity-resource',
+  standalone: true,
+  imports: [
+    CommonModule,
+    FormsModule,
+    MatIcon,
+    MatInputModule,
+    MatListModule,
+    MatTableModule,
+  ],
+  templateUrl: './todo-entity-resource.component.html',
+  styles: [],
+})
+export class TodoEntityResourceComponent {
+  protected readonly store = inject(TodoEntityResourceStore);
+  protected newTitle = '';
+  protected readonly dataSource = new MatTableDataSource<{
+    id: number;
+    title: string;
+    completed: boolean;
+  }>([]);
+  protected readonly filtered = computed(() =>
+    this.store.entities().filter((t) =>
+      (this.store.filter() || '')
+        .toLowerCase()
+        .split(/\s+/)
+        .filter((s) => s.length > 0)
+        .every((s) => t.title.toLowerCase().includes(s)),
+    ),
+  );
+  constructor() {
+    effect(() => {
+      this.dataSource.data = this.filtered();
+    });
+  }
+  trackById = (_: number, t: { id: number }) => t.id;
+  add() {
+    const title = this.newTitle.trim();
+    if (!title) return;
+    const ids = this.store.ids() as Array<number>;
+    const nextId = ids.length ? Math.max(...ids) + 1 : 1;
+    this.store.addTodo({ id: nextId, title, completed: false });
+    this.newTitle = '';
+  }
+}