@aiao/rxdb-angular 0.0.3 → 0.0.7

package/src/devtools/entity-table-item.ts

@@ -0,0 +1,47 @@
+import { JsonPipe } from '@angular/common';
+import { afterNextRender, Component, ElementRef, inject, input } from '@angular/core';
+import { RxDBEntityChangeDirective } from '../rxdb-change-detector.directive';
+import { ScrollAdvancedCalcService } from './scroll-advanced-calc.service';
+
+@Component({
+  selector: 'rxdb-entity-item',
+  template: `
+    @let item = entity();
+    @let i = index();
+
+    <pre class="text-xs" [class.bg-base-100]="i % 2 === 0" [rxdbChangeDetector]="item">
+    {{ item | json }}
+    </pre
+    >
+  `,
+  imports: [JsonPipe, RxDBEntityChangeDirective],
+  styles: [
+    `
+      :host {
+        display: block;
+        min-height: 150px;
+      }
+    `
+  ]
+})
+export class RxDBEntityTableItem {
+  readonly #calcService = inject(ScrollAdvancedCalcService);
+  readonly #el = inject(ElementRef);
+  readonly entity = input.required<any>();
+  readonly index = input.required<number>();
+
+  constructor() {
+    afterNextRender(() => {
+      const item = this.entity();
+      this.#calcService.cacheCalcDynamic.update(cache => {
+        if (!cache.some(c => c.trackId === item.id)) {
+          cache.push({
+            trackId: item.id,
+            itemSize: this.#el.nativeElement.getBoundingClientRect().height
+          });
+        }
+        return cache;
+      });
+    });
+  }
+}

package/src/devtools/entity-table-tools.html

@@ -0,0 +1,56 @@
+@let entity_meta_tree = $entity_meta_tree();
+@let current_entity_meta = $current_entity_meta();
+
+<div class="bg-base-200 overflow-y-auto">
+  <ul class="menu menu-xs rounded-box w-30 p-0">
+    @for (ns of entity_meta_tree; track $index) {
+      <li>
+        <details open>
+          <summary>{{ ns.namespace }}</summary>
+          <ul>
+            @for (entity of ns.entities; track entity.name) {
+              <li>
+                <a
+                  [class.menu-active]="current_entity_meta === entity"
+                  (click)="$current_entity_meta.set(entity)"
+                  aria-hidden="true"
+                >
+                  {{ entity.name }}
+                </a>
+              </li>
+            }
+          </ul>
+        </details>
+      </li>
+    }
+  </ul>
+</div>
+
+<div class="relative flex-1 overflow-hidden">
+  <div class="tabs tabs-border tabs-xs bg-base-300 h-full">
+    <input class="tab" aria-label="Data" checked="checked" name="my_tabs_2" type="radio" />
+    <div class="tab-content h-full overflow-hidden">
+      <cdk-virtual-scroll-viewport
+        class="tab-content h-full"
+        [itemDynamicSizes]="dynamicSize()"
+        maxBufferPx="1350"
+        minBufferPx="900"
+        rdlaboFixVirtualScrollElement
+      >
+        @defer (on viewport) {
+          <ng-container *cdkVirtualFor="let item of $entity_all_data(); let i = index; trackBy: trackByFn">
+            <rxdb-entity-item [entity]="item" [index]="i"></rxdb-entity-item>
+          </ng-container>
+        } @placeholder {
+          <div class="h-40"></div>
+        }
+      </cdk-virtual-scroll-viewport>
+    </div>
+    <input class="tab" aria-label="Metadata" name="my_tabs_2" type="radio" />
+    <div class="tab-content h-full overflow-y-auto">
+      @if (current_entity_meta) {
+        <ao-code-editor [theme]="theme()" [value]="current_entity_meta | json" language="json"></ao-code-editor>
+      }
+    </div>
+  </div>
+</div>

package/src/devtools/entity-table-tools.scss

@@ -0,0 +1,8 @@
+:host {
+  @apply flex h-full w-full overflow-hidden;
+}
+
+.menu :where(li ul) {
+  margin-inline-start: calc(0.25rem * 2);
+  padding-inline-start: calc(0.25rem * 0);
+}

package/src/devtools/entity-table-tools.ts

@@ -0,0 +1,153 @@
+import { CodeEditor } from '@aiao/code-editor-angular';
+import { EntityMetadata, EntityType, getEntityMetadata, RxDB } from '@aiao/rxdb';
+import { nextMacroTask } from '@aiao/utils';
+import { ObserversModule } from '@angular/cdk/observers';
+import { CdkVirtualForOf, CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
+import { CommonModule } from '@angular/common';
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  computed,
+  effect,
+  inject,
+  input,
+  OnInit,
+  signal,
+  viewChild
+} from '@angular/core';
+import { toObservable, toSignal } from '@angular/core/rxjs-interop';
+import {
+  CdkDynamicSizeVirtualScroll,
+  DynamicSizeVirtualScrollService,
+  itemDynamicSize
+} from '@rdlabo/ngx-cdk-scroll-strategies';
+import { LucideAngularModule } from 'lucide-angular';
+import { of, switchMap } from 'rxjs';
+import { RxDBEntityTableItem } from './entity-table-item';
+import { ScrollAdvancedCalcService } from './scroll-advanced-calc.service';
+
+interface EntityTreeItem {
+  namespace: string;
+  entities: EntityMetadata[];
+}
+(BigInt.prototype as any)['toJSON'] = function () {
+  return Number(this);
+};
+@Component({
+  selector: 'rxdb-entity-table-tools',
+  imports: [
+    LucideAngularModule,
+    CommonModule,
+    RxDBEntityTableItem,
+    CodeEditor,
+    ObserversModule,
+    CdkVirtualForOf,
+    CdkVirtualScrollViewport,
+    CdkDynamicSizeVirtualScroll
+  ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  styleUrls: ['./entity-table-tools.scss'],
+  templateUrl: './entity-table-tools.html'
+})
+export class RxDBEntityTableTools implements OnInit {
+  #rxdb = inject(RxDB);
+  #entity_metadata_map = new Map<EntityMetadata, EntityType>();
+  #scroll = inject(DynamicSizeVirtualScrollService);
+  #calcService = inject(ScrollAdvancedCalcService);
+  #latestScrollOffset = 0;
+
+  virtualScroll = viewChild(CdkVirtualScrollViewport);
+
+  dynamicSize = computed<itemDynamicSize[]>(() => {
+    const size = this.#calcService.changeItemsToDynamicItemSize(
+      this.$entity_all_data() as any,
+      this.#calcService.cacheCalcDynamic(),
+      this.virtualScroll()
+    );
+    return size;
+  });
+
+  cdr = inject(ChangeDetectorRef);
+  theme = input<'light' | 'dark'>('light');
+
+  $entity_meta_tree = signal<EntityTreeItem[]>([]);
+  $current_entity_meta = signal<EntityMetadata | null>(null);
+
+  current_entity_meta$ = toObservable(this.$current_entity_meta);
+
+  entity_all_data$ = this.current_entity_meta$.pipe(
+    switchMap(meta => {
+      if (meta) {
+        const entity = this.#entity_metadata_map.get(meta)!;
+        return this.#rxdb.entityManager.getRepository(entity).findAll({
+          where: {
+            combinator: 'and',
+            rules: []
+          },
+          orderBy: [
+            {
+              field: 'id',
+              sort: 'desc'
+            }
+          ]
+        });
+      } else {
+        return of([]);
+      }
+    })
+  );
+
+  $entity_all_data = toSignal(this.entity_all_data$);
+  constructor() {
+    effect(() => {
+      this.$current_entity_meta();
+      nextMacroTask(() => {
+        this.#calcService.beforeCacheCalcDynamicSize.set(0);
+        this.#calcService.cacheCalcDynamic.set([]);
+        this.virtualScroll()?.scrollTo({
+          top: 0
+        });
+      });
+    });
+  }
+  trackByFn = (_: number, item: any) => {
+    let track_id = item.id;
+    if (item.updatedAt) {
+      track_id += (item.updatedAt as Date).getTime();
+    }
+    return track_id;
+  };
+
+  ngOnInit(): void {
+    this.#scroll.onInit(this.virtualScroll()!, this.#latestScrollOffset);
+    this.virtualScroll()?.scrolledIndexChange.subscribe(() => {
+      if (this.#calcService.beforeCacheCalcDynamicSize() !== this.#calcService.cacheCalcDynamic().length) {
+        this.#calcService.cacheCalcDynamic.update(cache => [...cache]);
+        this.#calcService.beforeCacheCalcDynamicSize.set(this.#calcService.cacheCalcDynamic().length);
+      }
+    });
+
+    const entity_meta_tree: EntityTreeItem[] = [];
+    let rxdb_change_meta: any;
+    this.#rxdb.config.entities.forEach(entity => {
+      const meta = getEntityMetadata(entity);
+      this.#entity_metadata_map.set(meta, entity);
+      if (meta.name === 'RxDBChange') {
+        rxdb_change_meta = meta;
+      }
+      const namespace = meta.namespace;
+      const existing = entity_meta_tree.find(item => item.namespace === namespace);
+      if (existing) {
+        existing.entities.push(meta);
+      } else {
+        entity_meta_tree.push({
+          namespace,
+          entities: [meta]
+        });
+      }
+    });
+    this.$entity_meta_tree.set(entity_meta_tree);
+    this.$current_entity_meta.set(rxdb_change_meta);
+  }
+}

package/src/devtools/event-tools.html

@@ -0,0 +1,15 @@
+@let events = $events();
+
+<div class="bg-base-300 w-full text-xs">
+  <button class="btn btn-xs" (click)="clear()">clear</button>
+  <span>{{ events.length }}</span>
+</div>
+<div class="bg-base-300 relative flex-1 overflow-y-auto">
+  @for (item of events; track item) {
+    @defer (on viewport) {
+      <pre class="text-xs" [class.bg-base-100]="$index % 2 === 0" animate.enter="fade-in">{{ item | json }}</pre>
+    } @placeholder {
+      <div class="h-40">loading...</div>
+    }
+  }
+</div>

package/src/devtools/event-tools.scss

@@ -0,0 +1,18 @@
+:host {
+  @apply flex h-full w-full flex-col overflow-hidden;
+}
+
+.fade-in {
+  animation: fadeIn 0.3s ease-out;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateX(100px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}

package/src/devtools/event-tools.ts

@@ -0,0 +1,45 @@
+import {
+  ENTITY_LOCAL_CREATE_EVENT,
+  ENTITY_LOCAL_NEW_EVENT,
+  ENTITY_LOCAL_REMOVE_EVENT,
+  ENTITY_LOCAL_UPDATE_EVENT,
+  RxDB,
+  RxDBEvent,
+  TRANSACTION_BEGIN,
+  TRANSACTION_COMMIT,
+  TRANSACTION_ROLLBACK
+} from '@aiao/rxdb';
+import { JsonPipe } from '@angular/common';
+import { ChangeDetectionStrategy, Component, inject, OnInit, signal } from '@angular/core';
+import { LucideAngularModule } from 'lucide-angular';
+
+@Component({
+  selector: 'rxdb-event-tools',
+  imports: [LucideAngularModule, JsonPipe],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  styleUrls: ['./event-tools.scss'],
+  templateUrl: './event-tools.html'
+})
+export class RxDBEventTools implements OnInit {
+  #rxdb = inject(RxDB);
+
+  $events = signal<RxDBEvent[]>([]);
+
+  ngOnInit(): void {
+    this.#rxdb.addEventListener(ENTITY_LOCAL_NEW_EVENT, this.handler);
+    this.#rxdb.addEventListener(ENTITY_LOCAL_CREATE_EVENT, this.handler);
+    this.#rxdb.addEventListener(ENTITY_LOCAL_UPDATE_EVENT, this.handler);
+    this.#rxdb.addEventListener(ENTITY_LOCAL_REMOVE_EVENT, this.handler);
+    this.#rxdb.addEventListener(TRANSACTION_BEGIN, this.handler);
+    this.#rxdb.addEventListener(TRANSACTION_COMMIT, this.handler);
+    this.#rxdb.addEventListener(TRANSACTION_ROLLBACK, this.handler);
+  }
+
+  handler = (event: RxDBEvent) => {
+    this.$events.update(events => [event, ...events]);
+  };
+
+  clear() {
+    this.$events.set([]);
+  }
+}

package/src/devtools/scroll-advanced-calc.service.ts

@@ -0,0 +1,41 @@
+import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
+import { Injectable, signal } from '@angular/core';
+import { itemDynamicSize } from '@rdlabo/ngx-cdk-scroll-strategies';
+
+export interface ScrollAdvancedItem {
+  id: string;
+}
+
+export interface DynamicSizeCache {
+  trackId: number | string;
+  itemSize: number;
+}
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ScrollAdvancedCalcService {
+  readonly cacheCalcDynamic = signal<DynamicSizeCache[]>([]);
+  readonly beforeCacheCalcDynamicSize = signal<number>(0);
+
+  changeItemsToDynamicItemSize(
+    items: ScrollAdvancedItem[],
+    dynamicSizeCache: DynamicSizeCache[],
+    virtualScroll: CdkVirtualScrollViewport | undefined
+  ): itemDynamicSize[] {
+    if (virtualScroll === undefined) {
+      return [];
+    }
+    return (
+      items?.map(item => {
+        const cacheSize = dynamicSizeCache.find(cache => cache.trackId === item.id)?.itemSize;
+        const itemSize = cacheSize || 150;
+        return {
+          itemSize: Math.ceil(itemSize),
+          trackId: item.id,
+          source: cacheSize !== undefined ? 'cache' : 'temporary'
+        };
+      }) || []
+    );
+  }
+}

package/src/devtools/settings.html

@@ -0,0 +1,46 @@
+<div class="p-2">
+  <fieldset class="fieldset">
+    <legend class="fieldset-legend">Side</legend>
+    <div class="join" id="side">
+      <button
+        class="btn join-item btn-xs btn-ghost"
+        id="panel-left"
+        (click)="sideChange.emit('left')"
+        aria-hidden="true"
+      >
+        <lucide-icon [img]="PanelLeft" size="16"></lucide-icon>
+      </button>
+      <button
+        class="btn join-item btn-xs btn-ghost"
+        id="panel-bottom"
+        (click)="sideChange.emit('bottom')"
+        aria-hidden="true"
+      >
+        <lucide-icon [img]="PanelBottom" size="16"></lucide-icon>
+      </button>
+      <button
+        class="btn join-item btn-xs btn-ghost"
+        id="panel-right"
+        (click)="sideChange.emit('right')"
+        aria-hidden="true"
+      >
+        <lucide-icon [img]="PanelRight" size="16"></lucide-icon>
+      </button>
+    </div>
+  </fieldset>
+
+  <fieldset class="fieldset">
+    <legend class="fieldset-legend">tools</legend>
+    <div class="flex gap-2 p-2">
+      <button class="btn btn-xs" (click)="delete_db()">delete_db</button>
+    </div>
+  </fieldset>
+</div>
+
+<ng-template #message let-message="message">
+  <div class="toast toast-top toast-center">
+    <div class="alert alert-error">
+      <span>{{ message }}</span>
+    </div>
+  </div>
+</ng-template>

package/src/devtools/settings.scss

@@ -0,0 +1,19 @@
+:host {
+  @apply flex h-full w-full flex-col overflow-hidden;
+}
+
+:has(rxdb-devtools.right) :host {
+  #panel-right {
+    color: var(--color-primary);
+  }
+}
+:has(rxdb-devtools.left) :host {
+  #panel-left {
+    color: var(--color-primary);
+  }
+}
+:has(rxdb-devtools.bottom) :host {
+  #panel-bottom {
+    color: var(--color-primary);
+  }
+}

package/src/devtools/settings.ts

@@ -0,0 +1,122 @@
+import { RxDB, RxDBEvent } from '@aiao/rxdb';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  inject,
+  output,
+  signal,
+  TemplateRef,
+  viewChild,
+  ViewContainerRef
+} from '@angular/core';
+import { LucideAngularModule, PanelBottom, PanelLeft, PanelRight } from 'lucide-angular';
+
+interface FileEntry {
+  name: string;
+  path: string;
+  type: 'file' | 'directory';
+  handle: FileSystemDirectoryHandle | FileSystemFileHandle;
+}
+
+@Component({
+  selector: 'rxdb-settings',
+  imports: [LucideAngularModule],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  styleUrls: ['./settings.scss'],
+  templateUrl: './settings.html'
+})
+export class RxDBSettings {
+  #viewContainerRef = inject(ViewContainerRef);
+  #rxdb = inject(RxDB);
+
+  protected readonly PanelLeft = PanelLeft;
+  protected readonly PanelBottom = PanelBottom;
+  protected readonly PanelRight = PanelRight;
+
+  messageTmp = viewChild<TemplateRef<any>>('message');
+
+  $events = signal<RxDBEvent[]>([]);
+
+  sideChange = output<'right' | 'left' | 'bottom'>();
+
+  async delete_db() {
+    try {
+      await this.#rxdb.disconnectAll();
+    } catch {
+      //
+    }
+
+    try {
+      const root = await navigator.storage.getDirectory();
+      const files = await this.listAllFiles(root, 1);
+      for (const entry of files) {
+        if (entry.type === 'file') {
+          await root.removeEntry(entry.name, { recursive: true });
+        }
+      }
+      await this.clean_indexedDB();
+      localStorage.clear();
+      // 使用 baseURI 跳转回首页，避免在子路由刷新时因服务器配置问题导致 404 fallback 到主站
+      window.location.href = document.baseURI;
+    } catch (error: Error | any) {
+      if (error && error.name === 'NoModificationAllowedError') {
+        const ref = this.#viewContainerRef.createEmbeddedView<{ message: string }>(this.messageTmp()!, {
+          message: '关闭数据库失败，请检查是否在多个浏览器 tab 中打开页面'
+        });
+        setTimeout(() => {
+          ref.destroy();
+        }, 3000);
+      }
+      console.error(error);
+    }
+  }
+
+  async clean_indexedDB() {
+    const dbList = indexedDB.databases ? await indexedDB.databases() : [];
+    if (dbList.length) {
+      await Promise.all(
+        dbList.map(({ name }) => {
+          return new Promise<void>((resolve, reject) => {
+            const request = indexedDB.deleteDatabase(name!);
+            request.onsuccess = () => resolve();
+            request.onerror = () => reject(request.error);
+            request.onblocked = () => resolve();
+          });
+        })
+      );
+    }
+  }
+
+  async listAllFiles(
+    directoryHandle: FileSystemDirectoryHandle | any,
+    maxDeep = Number.MAX_SAFE_INTEGER,
+    path = '',
+    currentDeep = 1
+  ) {
+    const entries: FileEntry[] = [];
+    for await (const [name, handle] of directoryHandle) {
+      const entryPath = path ? `${path}/${name}` : name;
+      if (handle.kind === 'file') {
+        entries.push({
+          name: name,
+          path: entryPath,
+          type: 'file',
+          handle: handle
+        });
+      } else if (handle.kind === 'directory') {
+        entries.push({
+          name: name,
+          path: entryPath,
+          type: 'directory',
+          handle: handle
+        });
+
+        if (currentDeep < maxDeep) {
+          const subEntries = await this.listAllFiles(handle, maxDeep, entryPath, currentDeep + 1);
+          entries.push(...subEntries);
+        }
+      }
+    }
+    return entries;
+  }
+}