feat: implement todo backend mock service and update api interceptor

- added TodoBackendMockService to handle CRUD operations for todos
- modified apiInterceptor to route requests to the mock service
- updated BasicComponent to utilize the new restResource API
- improved loading indicators in the template using Angular signals

Author: tomastrajan

.github/copilot-instructions.md

@@ -0,0 +1,12 @@
+# Project Guidelines
+
+Follow modern Angular syntax and best practices like
+
+* use zone-less change detection and OnPush components
+* when changing something, always perform immutable update and use immutable array APIs
+* make sure to keep components as lean as possible and move any real logic to services
+* always use new Angular control flow with @if, @else, @for, @switch, @case, @let and never use `ngIf`, `ngFor`, `ngSwitch`, and directives where new Angular control flow can be used
+* use signals to consume data in template exclusively, this means there won't be any `async` pipes in the template
+* use Angular signals and signal-based APIs, eg `viewChild` instead of `@ViewChild` or `output` instead of `@Output`
+* use Angular schematics using `ng generate` to generate new files, that way you will follow prescribed conventions from angular.json
+* always escape characters like `@` in the template with `@` because this is now Angular reserved character

.github/git-commit-instructions.md

@@ -0,0 +1,9 @@
+use conventional commit, feat, fix, chore, test, docs, refactor, perf, style, ci, build, revert
+
+main point in the main message, keep it short, the code changes always have precedence over other changes like style or documentation,
+the main commit message has to always be about the changes to the code wich affects real functionality, NOT docs, or AI guidelines, or other non-code changes
+
+if meaningful, highlight the most impactful changes in the commit body or explain why the change was made, if not obvious
+other changes like style, guidelines, refactors can be in the commit body
+
+always use lowercase for everything besides abbreviation like API, UI, or names like Angular, RxJS, etc.

projects/showcase/src/app/core/interceptors/api.interceptor.ts

@@ -1,12 +1,23 @@
+import { inject, isDevMode } from '@angular/core';
 import { HttpInterceptorFn } from '@angular/common/http';
+import { delay } from 'rxjs';
+
+import { TodoBackendMockService } from '../mock/todo-backend-mock.service';
 
 export const apiInterceptor: HttpInterceptorFn = (req, next) => {
+  const todoBackendMock = inject(TodoBackendMockService);
   if (req.url.includes('assets')) {
     return next(req);
   } else {
     req = req.clone({
       url: `https://681db05cf74de1d219b09e9c.mockapi.io/api/v1/` + req.url,
     });
-    return next(req);
+    if (false) {
+      // hit real server in dev mode
+      return next(req);
+    } else {
+      // hit mock todo server in prod mode so every visitor gets their own todo data
+      return todoBackendMock.handleRequest(req).pipe(delay(250));
+    }
   }
 };

projects/showcase/src/app/core/mock/todo-backend-mock.service.ts

@@ -0,0 +1,108 @@
+import { Injectable } from '@angular/core';
+import { HttpRequest, HttpResponse } from '@angular/common/http';
+import { Observable, of } from 'rxjs';
+
+import { Todo } from '../../model/todo.model';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class TodoBackendMockService {
+  todos: Todo[] = [
+    {
+      id: '7073bc48-5372-40f0-8d76-99c54c5cd7bd',
+      description: 'Learn Angular',
+      completed: true,
+      createdAt: new Date().toISOString(),
+    },
+    {
+      id: 'b1c2d3e4-f5a6-7b8c-9d0e-f1a2b3c4d5e6',
+      description: 'Understand Angular Signals',
+      completed: true,
+      createdAt: new Date().toISOString(),
+    },
+    {
+      id: 'f7e8d9c0-b1a2-3c4d-5e6f-7g8h9i0j1k2l',
+      description: 'Lern about Angular resource',
+      completed: false,
+      createdAt: new Date().toISOString(),
+    },
+    {
+      id: '12345678-90ab-cdef-ghij-klmnopqrstuv',
+      description: 'Use restResource',
+      completed: false,
+      createdAt: new Date().toISOString(),
+    }
+  ];
+
+  // a method which handles http requests and performs crud on the resource based on which HTTP method is used and payload
+  handleRequest(request: HttpRequest<unknown>): Observable<HttpResponse<any>> {
+    const { method, url, body } = request;
+    const urlParts = url.split('/');
+    const id = urlParts[urlParts.length - 1];
+
+    // Helper to ensure immutability
+    const clone = <T>(data: T): T => JSON.parse(JSON.stringify(data));
+
+    // GET /todos
+    if (method === 'GET' && url.endsWith('/todos')) {
+      return of(new HttpResponse({ status: 200, body: clone(this.todos) }));
+    }
+
+    // GET /todos/:id
+    if (method === 'GET' && url.includes('/todos/')) {
+      const todo = this.todos.find(t => t.id === id);
+      if (todo) {
+        return of(new HttpResponse({ status: 200, body: clone(todo) }));
+      }
+      return of(new HttpResponse({ status: 404, body: { message: 'Todo not found' } }));
+    }
+
+    // POST /todos
+    if (method === 'POST' && url.endsWith('/todos')) {
+      const newTodo = body as Partial<Todo>;
+      if (!newTodo.description) {
+        return of(new HttpResponse({ status: 400, body: { message: 'Description is required' } }));
+      }
+      const todo: Todo = {
+        id: crypto.randomUUID(),
+        description: newTodo.description,
+        completed: newTodo.completed || false,
+        createdAt: new Date().toISOString(),
+      };
+      this.todos = [...this.todos, todo];
+      return of(new HttpResponse({ status: 201, body: clone(todo) }));
+    }
+
+    // PUT /todos/:id
+    if (method === 'PUT' && url.includes('/todos/')) {
+      const index = this.todos.findIndex(t => t.id === id);
+      if (index > -1) {
+        const updatedTodo = { ...this.todos[index], ...(body as Partial<Todo>) };
+        this.todos = [
+          ...this.todos.slice(0, index),
+          updatedTodo,
+          ...this.todos.slice(index + 1),
+        ];
+        return of(new HttpResponse({ status: 200, body: clone(updatedTodo) }));
+      }
+      return of(new HttpResponse({ status: 404, body: { message: 'Todo not found' } }));
+    }
+
+    // DELETE /todos/:id
+    if (method === 'DELETE' && url.includes('/todos/')) {
+      const index = this.todos.findIndex(t => t.id === id);
+      if (index > -1) {
+        this.todos = [
+          ...this.todos.slice(0, index),
+          ...this.todos.slice(index + 1),
+        ];
+        return of(new HttpResponse({ status: 204 })); // No Content
+      }
+      return of(new HttpResponse({ status: 404, body: { message: 'Todo not found' } }));
+    }
+
+    // Fallback for unhandled routes/methods
+    return of(new HttpResponse({ status: 404, body: { message: 'Not Found' } }));
+  }
+}

projects/showcase/src/app/feature/example/basic/basic.component.ts

@@ -1,9 +1,9 @@
-import { ChangeDetectionStrategy, Component, signal } from '@angular/core'; // Removed inject
-
+import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import { MatFormField, MatInput } from '@angular/material/input';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 
-import { restResource } from '@angular-experts/resource'; // Added back
+import { restResource } from '@angular-experts/resource';
+
 import { Todo } from '../../../model/todo.model';
 import { TodoItemComponent } from '../../../ui/todo-item/todo-item.component';
 import { TodoSkeletonComponent } from '../../../ui/todo-skeleton/todo-skeleton.component';
@@ -13,15 +13,23 @@ import { TodoSkeletonComponent } from '../../../ui/todo-skeleton/todo-skeleton.c
   imports: [
     MatInput,
     MatFormField,
+    MatProgressSpinnerModule,
     TodoItemComponent,
     TodoSkeletonComponent,
-    MatProgressSpinnerModule,
   ],
   template: `
     <h2>Basic</h2>
     <div class="mt-8 flex flex-col gap-8">
       <div class="flex flex-col gap-4">
-        <h3>Todo list</h3>
+        <div class="flex items-center justify-between">
+          <h3>Todo list</h3>
+          @if (todos.loading()) {
+            <mat-progress-spinner
+              diameter="32"
+              mode="indeterminate"
+            ></mat-progress-spinner>
+          }
+        </div>
 
         <mat-form-field appearance="outline">
           <input
@@ -36,18 +44,6 @@ import { TodoSkeletonComponent } from '../../../ui/todo-skeleton/todo-skeleton.c
         </mat-form-field>
 
         <div class="relative flex flex-col gap-4">
-          <!-- Spinner for non-initial loads -->
-          @if (todos.loading() && !todos.loadingInitial()) {
-            <div
-              class="bg-opacity-50 absolute inset-0 z-10 flex items-center justify-center bg-white"
-            >
-              <mat-progress-spinner
-                diameter="24"
-                mode="indeterminate"
-              ></mat-progress-spinner>
-            </div>
-          }
-
           @if (todos.loadingInitial()) {
             <showcase-todo-skeleton [repeat]="4" />
           } @else {
@@ -76,27 +72,22 @@ import { TodoSkeletonComponent } from '../../../ui/todo-skeleton/todo-skeleton.c
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class BasicComponent {
-  todos = restResource<Todo, string>('todos', {
-    // Added back local restResource
-    create: {
-      strategy: 'incremental',
-    },
-  });
+  todos = restResource<Todo, string>('todos');
   newTodo = signal('');
 
   createTodo() {
     const newTodoValue = this.newTodo();
     if (newTodoValue.length > 0) {
-      this.todos.create({ description: newTodoValue, completed: false }); // Changed to todos.create
+      this.todos.create({ description: newTodoValue, completed: false });
     }
     this.newTodo.set('');
   }
 
   handleToggle(todo: Todo) {
-    this.todos.update({ ...todo, completed: !todo.completed }); // Changed to todos.update
+    this.todos.update({ ...todo, completed: !todo.completed });
   }
 
   handleRemove(todo: Todo) {
-    this.todos.remove(todo); // Changed to todos.remove
+    this.todos.remove(todo);
   }
 }