@indexeddb-orm/idb-orm 0.0.1

package/angular-demo-app/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "angular-demo-app",
+  "version": "0.0.0",
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "build": "ng build",
+    "watch": "ng build --watch --configuration development",
+    "test": "ng test"
+  },
+  "private": true,
+  "dependencies": {
+    "@angular/animations": "^17.0.0",
+    "@angular/cdk": "^17.0.0",
+    "@angular/common": "^17.0.0",
+    "@angular/compiler": "^17.0.0",
+    "@angular/core": "^17.0.0",
+    "@angular/forms": "^17.0.0",
+    "@angular/material": "^17.0.0",
+    "@angular/platform-browser": "^17.0.0",
+    "@angular/platform-browser-dynamic": "^17.0.0",
+    "@angular/router": "^17.0.0",
+    "idb-orm": "^0.0.1",
+    "rxjs": "~7.8.0",
+    "tslib": "^2.3.0",
+    "zone.js": "~0.14.0"
+  },
+  "devDependencies": {
+    "@angular-devkit/build-angular": "^17.0.0",
+    "@angular/cli": "^17.0.0",
+    "@angular/compiler-cli": "^17.0.0",
+    "@types/jasmine": "~5.1.0",
+    "jasmine-core": "~5.1.0",
+    "karma": "~6.4.0",
+    "karma-chrome-launcher": "~3.2.0",
+    "karma-coverage": "~2.2.0",
+    "karma-jasmine": "~5.1.0",
+    "karma-jasmine-html-reporter": "~2.1.0",
+    "typescript": "~5.2.0"
+  }
+}

package/angular-demo-app/src/app/app.component.ts

@@ -0,0 +1,481 @@
+import { BreakpointObserver } from '@angular/cdk/layout';
+import { CommonModule } from '@angular/common';
+import {
+ Component, OnDestroy,OnInit,
+} from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCardModule } from '@angular/material/card';
+import { MatIconModule } from '@angular/material/icon';
+import { MatListModule } from '@angular/material/list';
+import { MatSidenavModule } from '@angular/material/sidenav';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import {
+ Subject, takeUntil,
+} from 'rxjs';
+import { PostEntity } from 'src/entities/post.entity';
+import { ProfileEntity } from 'src/entities/profile.entity';
+import { UserEntity } from 'src/entities/user.entity';
+
+import { AppLogicService } from '../services/app-logic.service';
+import { CloudSyncService } from '../services/cloud-sync.service';
+import { LiveQueryService } from '../services/live-query.service';
+import { PostsLiveQueryService } from '../services/posts-live-query.service';
+import { TypeScriptDemoService } from '../services/typescript-demo.service';
+import { ActionsComponent } from './components/actions.component';
+import { CloudSyncDemoComponent } from './components/cloud-sync-demo.component';
+import { LiveQueryDemoComponent } from './components/live-query-demo.component';
+import { PostsLiveQueryDemoComponent } from './components/posts-live-query-demo.component';
+import { TypeScriptDemoComponent } from './components/typescript-demo.component';
+
+@Component({
+  selector: 'app-root',
+  standalone: true,
+  imports: [
+    CommonModule,
+    MatButtonModule,
+    MatCardModule,
+    MatIconModule,
+    MatSidenavModule,
+    MatToolbarModule,
+    MatListModule,
+    ActionsComponent,
+    LiveQueryDemoComponent,
+    TypeScriptDemoComponent,
+    PostsLiveQueryDemoComponent,
+    CloudSyncDemoComponent,
+  ],
+  template: `
+    <div class="app-container">
+      <!-- App Bar -->
+      <mat-toolbar color="primary" class="app-bar">
+        <button mat-icon-button
+                (click)="toggleMobileSidenav()"
+                class="mobile-menu-button">
+          <mat-icon>menu</mat-icon>
+        </button>
+        <span class="app-title">Dexie ORM Demo</span>
+        <span class="spacer"></span>
+      </mat-toolbar>
+
+      <div class="app-content">
+        <!-- Mobile Sidenav -->
+        <mat-sidenav-container class="mobile-sidenav-container">
+          <mat-sidenav #mobileSidenav
+                       mode="over"
+                       [opened]="mobileOpen"
+                       (openedChange)="mobileOpen = $event"
+                       class="mobile-sidenav">
+            <mat-nav-list>
+              <a mat-list-item (click)=
+              "setTabIndex(0); mobileSidenav.close()"
+              [class.active]="tabIndex === 0">
+                <mat-icon matListItemIcon>admin_panel_settings</mat-icon>
+                <span matListItemTitle>Admin</span>
+              </a>
+              <a mat-list-item (click)=
+              "setTabIndex(1); mobileSidenav.close()"
+              [class.active]="tabIndex === 1">
+                <mat-icon matListItemIcon>cloud_sync</mat-icon>
+                <span matListItemTitle>Cloud Sync</span>
+              </a>
+            </mat-nav-list>
+          </mat-sidenav>
+
+          <!-- Desktop Sidenav -->
+          <mat-sidenav #desktopSidenav
+                       mode="side"
+                       opened="true"
+                       class="desktop-sidenav">
+            <mat-nav-list>
+              <a mat-list-item (click)=
+              "setTabIndex(0)" [class.active]="tabIndex === 0">
+                <mat-icon matListItemIcon>admin_panel_settings</mat-icon>
+                <span matListItemTitle>Admin</span>
+              </a>
+              <a mat-list-item (click)=
+              "setTabIndex(1)" [class.active]="tabIndex === 1">
+                <mat-icon matListItemIcon>cloud_sync</mat-icon>
+                <span matListItemTitle>Cloud Sync</span>
+              </a>
+            </mat-nav-list>
+          </mat-sidenav>
+
+          <mat-sidenav-content class="main-content">
+            <!-- Admin Tab Content -->
+            <div *ngIf="tabIndex === 0" class="tab-content">
+              <app-actions
+                [users]="users"
+                [addUser]="addUser.bind(this)"
+                [testZodValidation]="testZodValidation.bind(this)"
+                [testSchemaMigration]="testSchemaMigration.bind(this)"
+                [toggleAutoReset]="toggleAutoReset.bind(this)"
+                [testRelations]="testRelations.bind(this)"
+                [testTransactions]="testTransactions.bind(this)"
+                [testCompoundIndexes]="testCompoundIndexes.bind(this)"
+                [testAggregations]="testAggregations.bind(this)"
+                [clearAll]="clearAll.bind(this)">
+              </app-actions>
+
+              <div class="section">
+                <app-live-query-demo
+                  [usersWithProfiles]="usersWithProfiles"
+                  [allUsers]="allUsers"
+                  [userStats]="userStats">
+                </app-live-query-demo>
+              </div>
+
+              <div class="section">
+                <app-typescript-demo
+                  [users]="typescriptUsers"
+                  [posts]="typescriptPosts"
+                  [profiles]="typescriptProfiles"
+                  [onUserClick]="onUserClick.bind(this)"
+                  [onPostClick]="onPostClick.bind(this)"
+                  [onProfileClick]="onProfileClick.bind(this)">
+                </app-typescript-demo>
+              </div>
+
+              <div class="section">
+                <app-posts-live-query-demo
+                  [allPosts]="allPosts"
+                  [topPosts]="topPosts"
+                  [publishedPosts]="publishedPosts"
+                  [postStats]="postStats"
+                  [addSamplePost]="addSamplePost.bind(this)">
+                </app-posts-live-query-demo>
+              </div>
+            </div>
+
+            <!-- Cloud Sync Tab Content -->
+            <div *ngIf="tabIndex === 1" class="tab-content">
+              <app-cloud-sync-demo
+                [syncStatus]="syncStatus"
+                [isLoading]="isLoading"
+                [handleManualSync]="handleManualSync.bind(this)"
+                [handleEnableCloudSync]="handleEnableCloudSync.bind(this)"
+                [handleDisableCloudSync]="handleDisableCloudSync.bind(this)"
+                [handleSyncTables]="handleSyncTables.bind(this)">
+              </app-cloud-sync-demo>
+            </div>
+          </mat-sidenav-content>
+        </mat-sidenav-container>
+      </div>
+    </div>
+  `,
+  styles: [`
+    .app-container {
+      display: flex;
+      flex-direction: column;
+      min-height: 100vh;
+    }
+
+    .app-bar {
+      position: sticky;
+      top: 0;
+      z-index: 1000;
+    }
+
+    .app-content {
+      display: flex;
+      flex: 1;
+    }
+
+    .mobile-sidenav-container {
+      display: flex;
+      flex: 1;
+      position: relative;
+    }
+
+    .mobile-sidenav {
+      display: block;
+      position: fixed;
+      top: 0;
+      left: 0;
+      height: 100vh;
+      z-index: 1000;
+      padding-top: 64px;
+    }
+
+    .desktop-sidenav {
+      display: none;
+    }
+
+    @media (min-width: 960px) {
+      .mobile-sidenav {
+        display: none;
+      }
+
+      .desktop-sidenav {
+        display: block;
+      }
+    }
+
+    .mobile-menu-button {
+      display: block;
+    }
+
+    @media (min-width: 960px) {
+      .mobile-menu-button {
+        display: none;
+      }
+    }
+
+    .spacer {
+      flex: 1 1 auto;
+    }
+
+    .main-content {
+      flex-grow: 1;
+      padding: 24px;
+      width: calc(100% - 240px);
+      max-width: 100%;
+    }
+
+    @media (max-width: 959px) {
+      .main-content {
+        width: 100%;
+        padding: 16px;
+      }
+    }
+
+    .tab-content {
+      max-width: 1200px;
+      margin: 0 auto;
+    }
+
+    .section {
+      margin-top: 24px;
+    }
+
+    .active {
+      background-color: rgba(0, 0, 0, 0.04);
+    }
+
+    mat-nav-list a {
+      text-decoration: none;
+      color: inherit;
+    }
+  `],
+})
+export class AppComponent implements OnInit, OnDestroy {
+  private destroy$ = new Subject<void>();
+
+  // App state
+  users: UserEntity[] = [];
+  tabIndex = 0;
+  mobileOpen = false;
+
+  // Live query data
+  usersWithProfiles: UserEntity[] = [];
+  allUsers: UserEntity[] = [];
+  userStats = { totalUsers: 0, adultUsers: 0, firstUser: '' };
+
+  // TypeScript demo data
+  typescriptUsers: UserEntity[] = [];
+  typescriptPosts: PostEntity[] = [];
+  typescriptProfiles: ProfileEntity[] = [];
+
+  // Posts live query data
+  allPosts: PostEntity[] = [];
+  topPosts: PostEntity[] = [];
+  publishedPosts: PostEntity[] = [];
+  postStats = { total: 0, published: 0, totalLikes: 0 };
+
+  // Cloud sync data
+  syncStatus: {
+    enabled: boolean;
+    isOnline?: boolean;
+    lastSync?: Date;
+  } = {
+    enabled: false,
+    isOnline: undefined,
+    lastSync: undefined,
+  };
+  isLoading = false;
+
+  constructor(
+    private _appLogicService: AppLogicService,
+    private _liveQueryService: LiveQueryService,
+    private _typescriptDemoService: TypeScriptDemoService,
+    private _postsLiveQueryService: PostsLiveQueryService,
+    private _cloudSyncService: CloudSyncService,
+    private _breakpointObserver: BreakpointObserver,
+  ) {}
+
+  ngOnInit(): void {
+    // Subscribe to app logic
+    this._appLogicService.users$.pipe(takeUntil(this.destroy$)).subscribe(users => {
+      this.users = users;
+    });
+
+    this._appLogicService
+    .tabIndex$.pipe(takeUntil(this.destroy$)).subscribe(index => {
+      this.tabIndex = index;
+    });
+
+    this._appLogicService
+    .mobileOpen$.pipe(takeUntil(this.destroy$)).subscribe(open => {
+      this.mobileOpen = open;
+    });
+
+    // Subscribe to live query service
+    this._liveQueryService.usersWithProfiles$
+    .pipe(takeUntil(this.destroy$)).subscribe(users => {
+      this.usersWithProfiles = users;
+    });
+
+    this._liveQueryService.allUsers$
+    .pipe(takeUntil(this.destroy$)).subscribe(users => {
+      this.allUsers = users;
+    });
+
+    this._liveQueryService.userStats$
+    .pipe(takeUntil(this.destroy$)).subscribe(stats => {
+      this.userStats = stats;
+    });
+
+    // Subscribe to TypeScript demo service
+    this._typescriptDemoService.users$
+    .pipe(takeUntil(this.destroy$)).subscribe(users => {
+      this.typescriptUsers = users;
+    });
+
+    this._typescriptDemoService.posts$
+    .pipe(takeUntil(this.destroy$)).subscribe(posts => {
+      this.typescriptPosts = posts;
+    });
+
+    this._typescriptDemoService.profiles$
+    .pipe(takeUntil(this.destroy$)).subscribe(profiles => {
+      this.typescriptProfiles = profiles;
+    });
+
+    // Subscribe to posts live query service
+    this._postsLiveQueryService.allPosts$
+    .pipe(takeUntil(this.destroy$)).subscribe(posts => {
+      this.allPosts = posts;
+    });
+
+    this._postsLiveQueryService.topPosts$
+    .pipe(takeUntil(this.destroy$)).subscribe(posts => {
+      this.topPosts = posts;
+    });
+
+    this._postsLiveQueryService.publishedPosts$
+    .pipe(takeUntil(this.destroy$)).subscribe(posts => {
+      this.publishedPosts = posts;
+    });
+
+    this._postsLiveQueryService.postStats$
+    .pipe(takeUntil(this.destroy$)).subscribe(stats => {
+      this.postStats = stats;
+    });
+
+    // Subscribe to cloud sync service
+    this._cloudSyncService.syncStatus$
+    .pipe(takeUntil(this.destroy$)).subscribe(status => {
+      this.syncStatus = status;
+    });
+
+    this._cloudSyncService.isLoading$
+    .pipe(takeUntil(this.destroy$)).subscribe(loading => {
+      this.isLoading = loading;
+    });
+  }
+
+  ngOnDestroy(): void {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+
+  // App logic methods
+  async addUser(): Promise<void> {
+    await this._appLogicService.addUser();
+    this.refreshAllData();
+  }
+
+  async testZodValidation(): Promise<void> {
+    await this._appLogicService.testZodValidation();
+  }
+
+  async testSchemaMigration(): Promise<void> {
+    await this._appLogicService.testSchemaMigration();
+  }
+
+  async testRelations(): Promise<void> {
+    await this._appLogicService.testRelations();
+    this.refreshAllData();
+  }
+
+  async testTransactions(): Promise<void> {
+    await this._appLogicService.testTransactions();
+    this.refreshAllData();
+  }
+
+  async testCompoundIndexes(): Promise<void> {
+    await this._appLogicService.testCompoundIndexes();
+  }
+
+  async testAggregations(): Promise<void> {
+    await this._appLogicService.testAggregations();
+  }
+
+  async clearAll(): Promise<void> {
+    await this._appLogicService.clearAll();
+    this.refreshAllData();
+  }
+
+  setTabIndex(index: number): void {
+    this._appLogicService.setTabIndex(index);
+  }
+
+  toggleMobileSidenav(): void {
+    this._appLogicService.toggleMobileOpen();
+  }
+
+  // TypeScript demo methods
+  onUserClick(user: UserEntity): void {
+    this._typescriptDemoService.onUserClick(user);
+  }
+
+  onPostClick(post: PostEntity): void {
+    this._typescriptDemoService.onPostClick(post);
+  }
+
+  onProfileClick(profile: ProfileEntity): void {
+    this._typescriptDemoService.onProfileClick(profile);
+  }
+
+  // Posts live query methods
+  async addSamplePost(): Promise<void> {
+    await this._postsLiveQueryService.addSamplePost();
+  }
+
+  // Cloud sync methods
+  async handleManualSync(): Promise<void> {
+    await this._cloudSyncService.handleManualSync();
+  }
+
+  async handleEnableCloudSync(): Promise<void> {
+    await this._cloudSyncService.handleEnableCloudSync();
+  }
+
+  async handleDisableCloudSync(): Promise<void> {
+    await this._cloudSyncService.handleDisableCloudSync();
+  }
+
+  async handleSyncTables(): Promise<void> {
+    await this._cloudSyncService.handleSyncTables();
+  }
+
+  async toggleAutoReset(): Promise<void> {
+    await this._appLogicService.toggleAutoReset();
+  }
+
+  // Helper method to refresh all data
+  private refreshAllData(): void {
+    this._liveQueryService.refresh();
+    this._typescriptDemoService.refresh();
+    this._postsLiveQueryService.refresh();
+  }
+}

package/angular-demo-app/src/app/app.routes.ts

@@ -0,0 +1,8 @@
+import { Routes } from '@angular/router';
+
+export const routes: Routes = [
+  { path: '', redirectTo: '/admin', pathMatch: 'full' },
+  { path: 'admin', component: undefined }, // Handled by tabs
+  { path: 'cloud-sync', component: undefined }, // Handled by tabs
+  { path: '**', redirectTo: '/admin' },
+];