@indexeddb-orm/idb-orm 0.0.1

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

@@ -0,0 +1,202 @@
+import { CommonModule } from '@angular/common';
+import {
+ Component, Input,
+} 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 { UserEntity } from '../../entities/user.entity';
+import { MainInfoComponent } from './main-info.component';
+
+@Component({
+  selector: 'app-actions',
+  standalone: true,
+  imports: [
+    CommonModule,
+    MatButtonModule,
+    MatCardModule,
+    MatIconModule,
+    MatListModule,
+    MainInfoComponent,
+  ],
+  template: `
+    <app-main-info></app-main-info>
+
+    <div class="admin-section">
+      <h2 class="section-title">Admin Actions</h2>
+      <div class="actions-grid">
+        <button mat-stroked-button (click)="addUser()" class="action-button">
+          <mat-icon>person_add</mat-icon>
+          Add User
+        </button>
+
+        <button mat-stroked-button (click)=
+        "testZodValidation()" class="action-button">
+          <mat-icon>science</mat-icon>
+          Test Zod
+        </button>
+
+        <button mat-stroked-button (click)=
+        "testSchemaMigration()" class="action-button">
+          <mat-icon>storage</mat-icon>
+          Schema
+        </button>
+
+        <button mat-stroked-button (click)="toggleAutoReset()" class="action-button">
+          <mat-icon>settings</mat-icon>
+          Auto-Reset
+        </button>
+
+        <button mat-stroked-button (click)="testRelations()" class="action-button">
+          <mat-icon>link</mat-icon>
+          Relations
+        </button>
+
+        <button mat-stroked-button (click)=
+        "testTransactions()" class="action-button">
+          <mat-icon>speed</mat-icon>
+          Transactions
+        </button>
+
+        <button mat-stroked-button (click)=
+        "testCompoundIndexes()" class="action-button">
+          <mat-icon>search</mat-icon>
+          Indexes
+        </button>
+
+        <button mat-stroked-button (click)=
+        "testAggregations()" class="action-button">
+          <mat-icon>assessment</mat-icon>
+          Aggregations
+        </button>
+
+        <button mat-stroked-button (click)=
+        "clearAll()" class="action-button clear-button">
+          <mat-icon>delete_sweep</mat-icon>
+          Clear All
+        </button>
+      </div>
+    </div>
+
+    <div class="users-section" *ngIf="users.length > 0">
+      <h3 class="users-title">Users ({{ users.length }})</h3>
+      <div class="users-list">
+        <div class="user-card" *ngFor="let user of users">
+          <strong>{{ user.name }}</strong> ({{ user.email }})<br />
+          Age: {{ user.age }}, Tags: {{ user.tags?.join(', ') || 'none' }}
+        </div>
+      </div>
+    </div>
+  `,
+  styles: [`
+    .admin-section {
+      margin-bottom: 16px;
+    }
+
+    .section-title {
+      font-size: 1.5rem;
+      font-weight: 400;
+      margin: 0 0 16px 0;
+      color: rgba(0, 0, 0, 0.87);
+    }
+
+    .actions-grid {
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+      grid-template-rows: repeat(5, auto);
+      gap: 8px;
+      margin-bottom: 16px;
+    }
+
+    @media (min-width: 600px) {
+      .actions-grid {
+        grid-template-columns: repeat(3, 1fr);
+        grid-template-rows: repeat(3, auto);
+      }
+    }
+
+    @media (min-width: 960px) {
+      .actions-grid {
+        grid-template-columns: repeat(4, 1fr);
+        grid-template-rows: repeat(3, auto);
+      }
+    }
+
+    @media (min-width: 1200px) {
+      .actions-grid {
+        grid-template-columns: repeat(5, 1fr);
+        grid-template-rows: repeat(2, auto);
+      }
+    }
+
+    .action-button {
+      text-transform: none !important;
+      font-size: 0.875rem;
+      padding: 8px 16px;
+      border: 1px solid rgba(0, 0, 0, 0.23);
+      background-color: transparent;
+      color: rgba(0, 0, 0, 0.87);
+    }
+
+    .action-button:hover {
+      background-color: rgba(0, 0, 0, 0.04);
+    }
+
+    .clear-button {
+      grid-column: 1 / -1;
+    }
+
+    @media (min-width: 600px) {
+      .clear-button {
+        grid-column: auto;
+      }
+    }
+
+    @media (max-width: 600px) {
+      .action-button {
+        font-size: 0.75rem;
+        padding: 8px 12px;
+      }
+    }
+
+    .users-section {
+      margin-top: 24px;
+    }
+
+    .users-title {
+      font-size: 1.25rem;
+      font-weight: 500;
+      margin: 0 0 16px 0;
+      color: rgba(0, 0, 0, 0.87);
+    }
+
+    .users-list {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+    }
+
+    .user-card {
+      padding: 12px;
+      border: 1px solid rgba(0, 0, 0, 0.23);
+      border-radius: 4px;
+      background-color: #fff;
+      font-size: 0.875rem;
+      line-height: 1.5;
+    }
+  `],
+})
+export class ActionsComponent {
+  @Input() users: UserEntity[] = [];
+  @Input() addUser!: () => void;
+  @Input() testZodValidation!: () => void;
+  @Input() testSchemaMigration!: () => void;
+  @Input() toggleAutoReset!: () => void;
+  @Input() testRelations!: () => void;
+  @Input() testTransactions!: () => void;
+  @Input() testCompoundIndexes!: () => void;
+  @Input() testAggregations!: () => void;
+  @Input() clearAll!: () => void;
+}

package/angular-demo-app/src/app/components/cloud-sync-demo.component.ts

@@ -0,0 +1,296 @@
+import { CommonModule } from '@angular/common';
+import {
+ Component, Input,
+} from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCardModule } from '@angular/material/card';
+import { MatIconModule } from '@angular/material/icon';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+
+@Component({
+  selector: 'app-cloud-sync-demo',
+  standalone: true,
+  imports: [
+    CommonModule,
+    MatButtonModule,
+    MatCardModule,
+    MatIconModule,
+    MatProgressSpinnerModule,
+  ],
+  template: `
+    <div class="cloud-sync-container">
+      <h2>Cloud Sync Demo</h2>
+      <p class="demo-description">
+        <strong>Dexie Cloud Addon Integration:</strong> Cloud synchronization demo
+      </p>
+
+      <div class="sync-grid">
+        <div class="sync-status-section">
+          <h3 class="section-title">
+            <mat-icon color="primary" class="section-icon">cloud_sync</mat-icon>
+            Sync status
+          </h3>
+          <div class="status-display">
+            <p><strong>Enabled:</strong> {{ syncStatus.enabled ? 'Yes' : 'No' }}</p>
+            <p><strong>
+            Online:
+            </strong>
+            {{ syncStatus.isOnline !== undefined
+             ? (syncStatus.isOnline ? 'Yes' : 'No')
+             : 'Unknown' }}
+            </p>
+            <p><strong>Last sync:</strong> {{ syncStatus.lastSync
+            ? syncStatus.lastSync.toLocaleString()
+            : 'Never' }}</p>
+          </div>
+        </div>
+
+        <div class="sync-controls-section">
+          <h3 class="section-title">
+            <mat-icon color="primary" class="section-icon">settings</mat-icon>
+            Sync controls
+          </h3>
+          <div class="controls-container">
+            <button mat-stroked-button
+                    (click)="handleManualSync()"
+                    [disabled]="!syncStatus.enabled || isLoading"
+                    class="sync-button manual-sync">
+              {{ isLoading ? 'Syncing...' : 'Sync manually' }}
+            </button>
+
+            <button mat-stroked-button
+                    (click)="handleSyncTables()"
+                    [disabled]="!syncStatus.enabled || isLoading"
+                    class="sync-button sync-tables">
+              Sync tables (users, posts)
+            </button>
+
+            <button *ngIf="!syncStatus.enabled"
+                    mat-stroked-button
+                    (click)="handleEnableCloudSync()"
+                    [disabled]="isLoading"
+                    class="sync-button enable-sync">
+              Enable cloud sync
+            </button>
+
+            <button *ngIf="syncStatus.enabled"
+                    mat-stroked-button
+                    (click)="handleDisableCloudSync()"
+                    [disabled]="isLoading"
+                    class="sync-button disable-sync">
+              Disable cloud sync
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <div class="instructions-section">
+        <h4 class="instructions-title">
+          <mat-icon color="primary" class="section-icon">info</mat-icon>
+          Instructions:
+        </h4>
+        <ol class="instructions-list">
+          <li><strong>
+          Install dexie-cloud-addon:
+          </strong> <code>npm install dexie-cloud-addon</code></li>
+          <li><strong>
+          Configure database URL
+          </strong> in <code>demo-app/src/database/Database.ts</code></li>
+          <li><strong>Enable cloud sync</strong> using the button above</li>
+          <li><strong>Test sync</strong> – add data and verify it synchronizes</li>
+        </ol>
+      </div>
+
+      <div class="configuration-info">
+        <strong>
+        Configuration:
+        // </strong>
+        Cloud sync is configured in Database.ts with automatic sync every 30 seconds
+        .<br />
+        <strong>
+        Offline Support:
+        </strong> The app works offline and syncs when connection is restored.<br />
+        <strong>
+        Reactivity:
+        </strong> All changes are automatically synchronized with the cloud!
+      </div>
+    </div>
+  `,
+  styles: [`
+    .cloud-sync-container {
+      border: 2px solid #2196f3;
+      padding: 20px;
+      margin: 20px 0;
+      border-radius: 8px;
+      background-color: #e3f2fd;
+    }
+
+    .cloud-sync-container h2 {
+      margin: 0 0 8px 0;
+      font-size: 1.5rem;
+      font-weight: 400;
+      color: rgba(0, 0, 0, 0.87);
+    }
+
+    .demo-description {
+      color: #666;
+      margin: 0 0 20px 0;
+      font-size: 0.875rem;
+      line-height: 1.5;
+    }
+
+    .sync-grid {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 20px;
+      margin-bottom: 20px;
+    }
+
+    @media (max-width: 768px) {
+      .sync-grid {
+        grid-template-columns: 1fr;
+      }
+    }
+
+    .section-title {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      margin: 0 0 12px 0;
+      font-size: 1rem;
+      font-weight: 500;
+      color: rgba(0, 0, 0, 0.87);
+    }
+
+    .section-icon {
+      font-size: 20px;
+      width: 20px;
+      height: 20px;
+    }
+
+    .status-display {
+      background-color: white;
+      padding: 15px;
+      border-radius: 4px;
+      border: 1px solid #ddd;
+    }
+
+    .status-display p {
+      margin: 0 0 8px 0;
+      font-size: 0.875rem;
+      line-height: 1.5;
+    }
+
+    .status-display p:last-child {
+      margin-bottom: 0;
+    }
+
+    .controls-container {
+      display: flex;
+      flex-direction: column;
+      gap: 10px;
+    }
+
+    .sync-button {
+      padding: 10px 15px;
+      border: none;
+      border-radius: 4px;
+      cursor: pointer;
+      font-size: 0.875rem;
+      text-transform: none !important;
+    }
+
+    .manual-sync {
+      background-color: #4caf50;
+      color: white;
+    }
+
+    .manual-sync:disabled {
+      background-color: #ccc;
+      cursor: not-allowed;
+    }
+
+    .sync-tables {
+      background-color: #ff9800;
+      color: white;
+    }
+
+    .sync-tables:disabled {
+      background-color: #ccc;
+      cursor: not-allowed;
+    }
+
+    .enable-sync {
+      background-color: #2196f3;
+      color: white;
+    }
+
+    .disable-sync {
+      background-color: #f44336;
+      color: white;
+    }
+
+    .instructions-section {
+      background-color: #fff3e0;
+      padding: 15px;
+      border-radius: 4px;
+      border: 1px solid #ffb74d;
+      margin-bottom: 15px;
+    }
+
+    .instructions-title {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      margin: 0 0 16px 0;
+      font-size: 1rem;
+      font-weight: 500;
+      color: rgba(0, 0, 0, 0.87);
+    }
+
+    .instructions-list {
+      margin: 10px 0;
+      padding-left: 20px;
+    }
+
+    .instructions-list li {
+      margin-bottom: 8px;
+      font-size: 0.875rem;
+      line-height: 1.5;
+    }
+
+    .instructions-list code {
+      background-color: #f5f5f5;
+      padding: 2px 4px;
+      border-radius: 2px;
+      font-family: 'Courier New', monospace;
+      font-size: 0.8rem;
+    }
+
+    .configuration-info {
+      margin-top: 15px;
+      font-size: 0.9em;
+      color: #666;
+      background-color: #e8f5e8;
+      padding: 10px;
+      border-radius: 4px;
+      line-height: 1.5;
+    }
+  `],
+})
+export class CloudSyncDemoComponent {
+  @Input() syncStatus: {
+    enabled: boolean;
+    isOnline?: boolean;
+    lastSync?: Date;
+  } = {
+    enabled: false,
+    isOnline: undefined,
+    lastSync: undefined,
+  };
+  @Input() isLoading: boolean = false;
+  @Input() handleManualSync!: () => void;
+  @Input() handleEnableCloudSync!: () => void;
+  @Input() handleDisableCloudSync!: () => void;
+  @Input() handleSyncTables!: () => void;
+}