fix: improve change detection & fix multi-tabs demo example (#56)

* dev: fixes & improvements

- update rxdb to latest
- bump Angular peerDep to min 14
- fix rxjs peerDep
- improve change detection by introducing internal ticks with zone/zoneless to eliminate a need for custom async pipe for Angular with RxDB  
- fix multi-tabs demo example
// Collection
- use angular inject for DI in collection service (min 14)
- improve typings & work with local documents, return json instead doc instance
- persist/restore local doc to/from URL via angular router
- simplify examples with this new local persist
- fix usage of local docs in signals (filter example)
- update Readme, simplify demo file structure

.github/workflows/main.yaml

@@ -3,8 +3,8 @@ name: Build, Test & Deploy demo
 # Controls when the action will run.
 on:
   # Triggers the workflow on push or pull request events but only for the master branch
-  push:
-    branches: [master]
+  # push:
+  #   branches: [master]
   pull_request:
     branches: [master]
     types: [opened, synchronize, reopened]

README.md

@@ -1,10 +1,10 @@
 # @ngx-odm/rxdb
 
-> Angular 10+ wrapper for **RxDB** - A realtime Database for the Web
+> Angular 14+ wrapper for **RxDB** - A realtime Database for the Web
 
 ## Demo
 
-![Example screenshot](examples/demo/src/assets/images/screenshot.png)
+![Example Screencast](examples/screencast.gif)
 
 [demo](https://voznik.github.io/ngx-odm/) - based on TodoMVC
 
@@ -36,7 +36,7 @@ If you don't want to setup RxDB manually in your next Angular project - just imp
 
 ## Technologies
 
-| RxDB                                                                                                     | Angular 10+                                                                                   |
+| RxDB                                                                                                     | Angular 14+                                                                                   |
 | -------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------- |
 | [![RxDB](https://cdn.rawgit.com/pubkey/rxdb/ba7c9b80/docs/files/logo/logo_text.svg)](https://rxdb.info/) | [![Angular](https://angular.io/assets/images/logos/angular/angular.svg)](https://angular.io/) |
 
@@ -149,7 +149,7 @@ export class TodosService {
 
   // remove many dcouments by qeury
   removeCompletedTodos(): void {
-    cthis.collectionService.removeBulk({ selector: { completed: true } });
+    this.collectionService.removeBulk({ selector: { completed: true } });
   }
   // ...
 }

examples/demo/src/app/todos/todos.component.css

@@ -0,0 +1,19 @@
+.clear-completed:disabled {
+  color: #999;
+  cursor: not-allowed;
+  text-decoration: none;
+}
+
+.todo-list li label+.last-modified {
+  position: absolute;
+  bottom: 4px;
+  right: 24px;
+  display: none;
+  font-size: small;
+  color: #999;
+  text-decoration: none !important;
+}
+
+.todo-list li:hover label:not(.editing)+.last-modified {
+  display: block;
+}

examples/demo/src/app/todos/components/todos/todos.component.html → examples/demo/src/app/todos/todos.component.html

@@ -1,4 +1,3 @@
-<!-- https://angular.io/guide/template-typecheck#disabling-type-checking-using-any -->
 <section
   class="todoapp"
   *ngrxLet="{
@@ -14,9 +13,8 @@ <h1>todos</h1>
       placeholder="What needs to be done?"
       autofocus=""
       [(ngModel)]="todosService.newTodo"
-      (keyup)="todosService.newTodoChange($any($event.target).value)"
-      (keyup.enter)="todosService.add()"
-      (keyup.escape)="todosService.newTodoClear()"
+      (keyup.enter)="todosService.addTodo()"
+      (keyup.escape)="todosService.newTodo = ''"
     />
   </header>
   <main class="main">
@@ -33,30 +31,27 @@ <h1>todos</h1>
       <li
         *ngFor="let todo of $.todos | byStatus: $.filter; trackBy: trackByFn"
         [class.completed]="todo.completed"
-        [class.editing]="todosService.isEditing === todo.id"
       >
         <div class="view">
           <input
             class="toggle"
-            [class.editing]="todosService.isEditing"
+            [class.editing]="todosService.current?.id === todo.id"
             type="checkbox"
             [checked]="todo.completed"
-            (change)="todosService.toggle(todo)"
+            (change)="todosService.toggleTodo(todo)"
           />
-          <label (dblclick)="todosService.editTodo(todo, editInput)">
+          <label
+            [class.editing]="todosService.current?.id === todo.id"
+            (dblclick)="todosService.setEditinigTodo(todo, $event, true)"
+            (blur)="todosService.setEditinigTodo(todo, $event, false)"
+            (keyup)="$event.preventDefault()"
+            (keydown.escape)="todosService.setEditinigTodo(todo, $event, false)"
+            (keydown.enter)="todosService.updateEditingTodo(todo, $event)"
+          >
             {{ todo.title }}
           </label>
           <button class="destroy" (click)="todosService.removeTodo(todo)"></button>
         </div>
-        <input
-          class="edit"
-          [hidden]="!todosService.isEditing"
-          [value]="todo.title"
-          #editInput
-          (blur)="todosService.stopEditing()"
-          (keyup.enter)="todosService.updateEditingTodo(todo, editInput.value)"
-          (keyup.escape)="todosService.stopEditing()"
-        />
       </li>
     </ul>
   </main>
@@ -103,11 +98,11 @@ <h1>todos</h1>
     </ul>
     <button
       class="clear-completed"
-      [disabled]="!$.todos?.length || remainig === $.todos?.length"
+      [disabled]="!$.count || remainig === $.count"
       (click)="todosService.removeCompletedTodos()"
       style="z-index: 3"
     >
-      Clear completed ({{ $.todos?.length - remainig }})
+      Clear completed ({{ $.count - remainig }})
     </button>
   </footer>
 </section>