feat(with-storage-sync): indexeddb support

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

@@ -19,6 +19,9 @@
         >Redux Connector</a
       >
       <a mat-list-item routerLink="/todo-storage-sync">withStorageSync</a>
+      <a mat-list-item routerLink="/todo-indexeddb-sync"
+        >withStorageSync(IndexedDB)</a
+      >
       <a mat-list-item routerLink="/reset">withReset</a>
       <a mat-list-item routerLink="/immutable-state">withImmutableState</a>
       <a mat-list-item routerLink="/feature-factory">withFeatureFactory</a>

apps/demo/src/app/devtools/todo-detail.component.ts

@@ -1,13 +1,13 @@
 import { Component, effect, inject, input } from '@angular/core';
 import { MatCardModule } from '@angular/material/card';
-import { Todo } from './todo-store';
 import { patchState, signalStore, withHooks, withState } from '@ngrx/signals';
 import {
   renameDevtoolsName,
   withDevtools,
   withGlitchTracking,
   withMapper,
 } from '@angular-architects/ngrx-toolkit';
+import { Todo } from '../shared/todo.service';
 
 /**
  * This Store can be instantiated multiple times, if the user

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

@@ -12,17 +12,8 @@ import {
   withEntities,
 } from '@ngrx/signals/entities';
 import { updateState, withDevtools } from '@angular-architects/ngrx-toolkit';
-import { computed } from '@angular/core';
-
-export interface Todo {
-  id: number;
-  name: string;
-  finished: boolean;
-  description?: string;
-  deadline?: Date;
-}
-
-export type AddTodo = Omit<Todo, 'id'>;
+import { computed, inject } from '@angular/core';
+import { Todo, AddTodo, TodoService } from '../shared/todo.service';
 
 export const TodoStore = signalStore(
   { providedIn: 'root' },
@@ -72,41 +63,9 @@ export const TodoStore = signalStore(
     ),
   })),
   withHooks({
-    onInit: (store) => {
-      store.add({
-        name: 'Go for a Walk',
-        finished: false,
-        description:
-          'Go for a walk in the park to relax and enjoy nature. Walking is a great way to clear your mind and get some exercise. It can help reduce stress and improve your mood. Make sure to wear comfortable shoes and bring a bottle of water. Enjoy the fresh air and take in the scenery around you.',
-      });
-
-      store.add({
-        name: 'Read a Book',
-        finished: false,
-        description:
-          'Spend some time reading a book. It can be a novel, a non-fiction book, or any other genre you enjoy. Reading can help you relax and learn new things.',
-      });
-
-      store.add({
-        name: 'Write a Journal',
-        finished: false,
-        description:
-          'Take some time to write in your journal. Reflect on your day, your thoughts, and your feelings. Journaling can be a great way to process emotions and document your life.',
-      });
-
-      store.add({
-        name: 'Exercise',
-        finished: false,
-        description:
-          'Do some physical exercise. It can be a workout, a run, or any other form of exercise you enjoy. Exercise is important for maintaining physical and mental health.',
-      });
-
-      store.add({
-        name: 'Cook a Meal',
-        finished: false,
-        description:
-          'Prepare a meal for yourself or your family. Cooking can be a fun and rewarding activity. Try out a new recipe or make one of your favorite dishes.',
-      });
+    onInit: (store, todoService = inject(TodoService)) => {
+      const todos = todoService.getData();
+      todos.forEach((todo) => store.add(todo));
     },
   })
 );

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

@@ -3,9 +3,10 @@ import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatIconModule } from '@angular/material/icon';
 import { MatTableDataSource, MatTableModule } from '@angular/material/table';
 import { SelectionModel } from '@angular/cdk/collections';
-import { Todo, TodoStore } from './todo-store';
+import { TodoStore } from './todo-store';
 import { TodoDetailComponent } from './todo-detail.component';
 import { FormsModule } from '@angular/forms';
+import { Todo } from '../shared/todo.service';
 
 @Component({
   selector: 'demo-todo',

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

@@ -9,6 +9,7 @@ import { FlightSearchWithPaginationComponent } from './flight-search-with-pagina
 import { FlightSearchReducConnectorComponent } from './flight-search-redux-connector/flight-search.component';
 import { provideFlightStore } from './flight-search-redux-connector/+state/redux';
 import { TodoComponent } from './devtools/todo.component';
+import { TodoIndexeddbSyncComponent } from './todo-indexeddb-sync/todo-indexeddb-sync.component';
 
 export const lazyRoutes: Route[] = [
   { path: 'todo', component: TodoComponent },
@@ -28,6 +29,7 @@ export const lazyRoutes: Route[] = [
   },
   { path: 'flight-edit-dynamic/:id', component: FlightEditDynamicComponent },
   { path: 'todo-storage-sync', component: TodoStorageSyncComponent },
+  { path: 'todo-indexeddb-sync', component: TodoIndexeddbSyncComponent },
   {
     path: 'flight-search-redux-connector',
     providers: [provideFlightStore()],

apps/demo/src/app/shared/todo.service.ts

@@ -0,0 +1,49 @@
+import { Injectable } from '@angular/core';
+
+export interface Todo {
+  id: number;
+  name: string;
+  finished: boolean;
+  description?: string;
+  deadline?: Date;
+}
+
+export type AddTodo = Omit<Todo, 'id'>;
+
+@Injectable({ providedIn: 'root' })
+export class TodoService {
+  getData(): AddTodo[] {
+    return [
+      {
+        name: 'Go for a Walk',
+        finished: false,
+        description:
+          'Go for a walk in the park to relax and enjoy nature. Walking is a great way to clear your mind and get some exercise. It can help reduce stress and improve your mood. Make sure to wear comfortable shoes and bring a bottle of water. Enjoy the fresh air and take in the scenery around you.',
+      },
+      {
+        name: 'Read a Book',
+        finished: false,
+        description:
+          'Spend some time reading a book. It can be a novel, a non-fiction book, or any other genre you enjoy. Reading can help you relax and learn new things.',
+      },
+      {
+        name: 'Write a Journal',
+        finished: false,
+        description:
+          'Take some time to write in your journal. Reflect on your day, your thoughts, and your feelings. Journaling can be a great way to process emotions and document your life.',
+      },
+      {
+        name: 'Exercise',
+        finished: false,
+        description:
+          'Do some physical exercise. It can be a workout, a run, or any other form of exercise you enjoy. Exercise is important for maintaining physical and mental health.',
+      },
+      {
+        name: 'Cook a Meal',
+        finished: false,
+        description:
+          'Prepare a meal for yourself or your family. Cooking can be a fun and rewarding activity. Try out a new recipe or make one of your favorite dishes.',
+      },
+    ];
+  }
+}

apps/demo/src/app/todo-indexeddb-sync/synced-todo-store.ts

@@ -0,0 +1,54 @@
+import { getState, patchState, signalStore, withMethods } from '@ngrx/signals';
+import {
+  removeEntity,
+  setEntity,
+  updateEntity,
+  withEntities,
+} from '@ngrx/signals/entities';
+import { AddTodo, Todo, TodoService } from '../shared/todo.service';
+import {
+  withIndexeddb,
+  withStorageSync,
+} from '@angular-architects/ngrx-toolkit';
+import { inject } from '@angular/core';
+
+export const SyncedTodoStore = signalStore(
+  { providedIn: 'root' },
+  withEntities<Todo>(),
+  withStorageSync(
+    {
+      key: 'todos-indexeddb',
+    },
+    withIndexeddb()
+  ),
+  withMethods((store, todoService = inject(TodoService)) => {
+    let currentId = 0;
+    return {
+      add(todo: AddTodo) {
+        store.readFromStorage();
+        patchState(store, setEntity({ id: ++currentId, ...todo }));
+      },
+
+      remove(id: number) {
+        patchState(store, removeEntity(id));
+      },
+
+      toggleFinished(id: number): void {
+        const todo = store.entityMap()[id];
+        patchState(
+          store,
+          updateEntity({ id, changes: { finished: !todo.finished } })
+        );
+      },
+
+      reset() {
+        const state = getState(store);
+
+        state.ids.forEach((id) => this.remove(Number(id)));
+
+        const todos = todoService.getData();
+        todos.forEach((todo) => this.add(todo));
+      },
+    };
+  })
+);

apps/demo/src/app/todo-indexeddb-sync/todo-indexeddb-sync.component.html

@@ -0,0 +1,45 @@
+<h2>StorageType:IndexedDB</h2>
+<button (click)="onClickReset()" mat-flat-button>reset</button>
+<mat-table [dataSource]="dataSource" class="mat-elevation-z8">
+  <!-- Checkbox Column -->
+  <ng-container matColumnDef="finished">
+    <mat-header-cell *matHeaderCellDef></mat-header-cell>
+    <mat-cell *matCellDef="let row" class="actions">
+      <mat-checkbox
+        (change)="checkboxLabel(row)"
+        (click)="$event.stopPropagation()"
+        [checked]="row.finished"
+      >
+      </mat-checkbox>
+      <mat-icon (click)="removeTodo(row)">delete</mat-icon>
+    </mat-cell>
+  </ng-container>
+
+  <!-- Name Column -->
+  <ng-container matColumnDef="name">
+    <mat-header-cell *matHeaderCellDef>Name</mat-header-cell>
+    <mat-cell *matCellDef="let element">{{ element.name }}</mat-cell>
+  </ng-container>
+
+  <!-- Description Column -->
+  <ng-container matColumnDef="description">
+    <mat-header-cell *matHeaderCellDef>Description</mat-header-cell>
+    <mat-cell *matCellDef="let element">{{ element.description }}</mat-cell>
+  </ng-container>
+
+  <!-- Deadline Column -->
+  <ng-container matColumnDef="deadline">
+    <mat-header-cell *matHeaderCellDef mat-header-cell
+      >Deadline
+    </mat-header-cell>
+    <mat-cell *matCellDef="let element" mat-cell
+      >{{ element.deadline }}
+    </mat-cell>
+  </ng-container>
+
+  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+  <mat-row
+    (click)="selection.toggle(row)"
+    *matRowDef="let row; columns: displayedColumns"
+  ></mat-row>
+</mat-table>

apps/demo/src/app/todo-indexeddb-sync/todo-indexeddb-sync.component.ts

@@ -0,0 +1,41 @@
+import { Component, effect, inject } from '@angular/core';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatIconModule } from '@angular/material/icon';
+import { MatTableDataSource, MatTableModule } from '@angular/material/table';
+import { SyncedTodoStore } from './synced-todo-store';
+import { SelectionModel } from '@angular/cdk/collections';
+import { Todo } from '../shared/todo.service';
+import { MatButton } from '@angular/material/button';
+
+@Component({
+  selector: 'demo-todo-indexeddb-sync',
+  imports: [MatCheckboxModule, MatIconModule, MatTableModule, MatButton],
+  templateUrl: './todo-indexeddb-sync.component.html',
+  styleUrl: './todo-indexeddb-sync.component.scss',
+  standalone: true,
+})
+export class TodoIndexeddbSyncComponent {
+  todoStore = inject(SyncedTodoStore);
+
+  displayedColumns: string[] = ['finished', 'name', 'description', 'deadline'];
+  dataSource = new MatTableDataSource<Todo>([]);
+  selection = new SelectionModel<Todo>(true, []);
+
+  constructor() {
+    effect(() => {
+      this.dataSource.data = this.todoStore.entities();
+    });
+  }
+
+  checkboxLabel(todo: Todo) {
+    this.todoStore.toggleFinished(todo.id);
+  }
+
+  removeTodo(todo: Todo) {
+    this.todoStore.remove(todo.id);
+  }
+
+  onClickReset() {
+    this.todoStore.reset();
+  }
+}

apps/demo/src/app/todo-storage-sync/synced-todo-store.ts

@@ -1,20 +1,22 @@
-import { patchState, signalStore, withMethods } from '@ngrx/signals';
+import { getState, patchState, signalStore, withMethods } from '@ngrx/signals';
 import {
-  withEntities,
-  setEntity,
   removeEntity,
+  setEntity,
   updateEntity,
+  withEntities,
 } from '@ngrx/signals/entities';
-import { AddTodo, Todo } from '../devtools/todo-store';
-import { withStorageSync } from '@angular-architects/ngrx-toolkit';
+import {
+  withLocalStorage,
+  withStorageSync,
+} from '@angular-architects/ngrx-toolkit';
+import { AddTodo, Todo, TodoService } from '../shared/todo.service';
+import { inject } from '@angular/core';
 
 export const SyncedTodoStore = signalStore(
   { providedIn: 'root' },
   withEntities<Todo>(),
-  withStorageSync({
-    key: 'todos',
-  }),
-  withMethods((store) => {
+  withStorageSync('todos', withLocalStorage()),
+  withMethods((store, todoService = inject(TodoService)) => {
     let currentId = 0;
     return {
       add(todo: AddTodo) {
@@ -32,6 +34,15 @@ export const SyncedTodoStore = signalStore(
           updateEntity({ id, changes: { finished: !todo.finished } })
         );
       },
+
+      reset() {
+        const state = getState(store);
+
+        state.ids.forEach((id) => this.remove(Number(id)));
+
+        const todos = todoService.getData();
+        todos.forEach((todo) => this.add(todo));
+      },
     };
   })
 );

apps/demo/src/app/todo-storage-sync/todo-storage-sync.component.html

@@ -1,11 +1,13 @@
+<h2>StorageType:LocalStorage</h2>
+<button (click)="onClickReset()" mat-flat-button>reset</button>
 <mat-table [dataSource]="dataSource" class="mat-elevation-z8">
   <!-- Checkbox Column -->
   <ng-container matColumnDef="finished">
     <mat-header-cell *matHeaderCellDef></mat-header-cell>
     <mat-cell *matCellDef="let row" class="actions">
       <mat-checkbox
-        (click)="$event.stopPropagation()"
         (change)="checkboxLabel(row)"
+        (click)="$event.stopPropagation()"
         [checked]="row.finished"
       >
       </mat-checkbox>
@@ -27,17 +29,17 @@
 
   <!-- Deadline Column -->
   <ng-container matColumnDef="deadline">
-    <mat-header-cell mat-header-cell *matHeaderCellDef
-      >Deadline</mat-header-cell
-    >
-    <mat-cell mat-cell *matCellDef="let element">{{
-      element.deadline
-    }}</mat-cell>
+    <mat-header-cell *matHeaderCellDef mat-header-cell
+      >Deadline
+    </mat-header-cell>
+    <mat-cell *matCellDef="let element" mat-cell
+      >{{ element.deadline }}
+    </mat-cell>
   </ng-container>
 
   <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
   <mat-row
-    *matRowDef="let row; columns: displayedColumns"
     (click)="selection.toggle(row)"
+    *matRowDef="let row; columns: displayedColumns"
   ></mat-row>
 </mat-table>