@wakastellar/ui 1.0.12 → 2.1.0

package/src/components/DataTable/services/IndexedDBService.ts

@@ -0,0 +1,504 @@
+/**
+ * Service IndexedDB pour le mode offline du DataTable
+ * Gère le cache des données, la queue de synchronisation et les conflits
+ */
+
+// Types pour IndexedDB
+export interface CacheEntry<TData> {
+  id: string
+  tableId: string
+  data: TData[]
+  timestamp: Date
+  version: number
+}
+
+export interface SyncQueueItem<TData> {
+  id: string
+  tableId: string
+  rowId: string
+  type: "create" | "update" | "delete"
+  data: Partial<TData> | null
+  timestamp: Date
+  attempts: number
+  lastError?: string
+}
+
+export interface ConflictEntry<TData> {
+  id: string
+  tableId: string
+  rowId: string
+  localData: Partial<TData> | null
+  serverData: Partial<TData> | null
+  localTimestamp: Date
+  serverTimestamp: Date
+  type: "create" | "update" | "delete"
+}
+
+const DB_NAME = "wakastart-datatable"
+const DB_VERSION = 1
+
+const STORES = {
+  CACHE: "cache",
+  SYNC_QUEUE: "syncQueue",
+  CONFLICTS: "conflicts",
+} as const
+
+/**
+ * Service pour gérer IndexedDB
+ */
+export class IndexedDBService {
+  private db: IDBDatabase | null = null
+  private initPromise: Promise<void> | null = null
+
+  /**
+   * Initialise la connexion à IndexedDB
+   */
+  async init(): Promise<void> {
+    if (this.db) return
+
+    if (this.initPromise) {
+      return this.initPromise
+    }
+
+    this.initPromise = new Promise((resolve, reject) => {
+      if (!("indexedDB" in window)) {
+        reject(new Error("IndexedDB is not supported in this browser"))
+        return
+      }
+
+      const request = indexedDB.open(DB_NAME, DB_VERSION)
+
+      request.onerror = () => {
+        reject(request.error)
+      }
+
+      request.onsuccess = () => {
+        this.db = request.result
+        resolve()
+      }
+
+      request.onupgradeneeded = (event) => {
+        const db = (event.target as IDBOpenDBRequest).result
+
+        // Store pour le cache des données
+        if (!db.objectStoreNames.contains(STORES.CACHE)) {
+          const cacheStore = db.createObjectStore(STORES.CACHE, { keyPath: "id" })
+          cacheStore.createIndex("tableId", "tableId", { unique: false })
+          cacheStore.createIndex("timestamp", "timestamp", { unique: false })
+        }
+
+        // Store pour la queue de synchronisation
+        if (!db.objectStoreNames.contains(STORES.SYNC_QUEUE)) {
+          const syncStore = db.createObjectStore(STORES.SYNC_QUEUE, { keyPath: "id" })
+          syncStore.createIndex("tableId", "tableId", { unique: false })
+          syncStore.createIndex("timestamp", "timestamp", { unique: false })
+          syncStore.createIndex("rowId", "rowId", { unique: false })
+        }
+
+        // Store pour les conflits
+        if (!db.objectStoreNames.contains(STORES.CONFLICTS)) {
+          const conflictStore = db.createObjectStore(STORES.CONFLICTS, { keyPath: "id" })
+          conflictStore.createIndex("tableId", "tableId", { unique: false })
+          conflictStore.createIndex("rowId", "rowId", { unique: false })
+        }
+      }
+    })
+
+    return this.initPromise
+  }
+
+  /**
+   * Vérifie si IndexedDB est disponible
+   */
+  isAvailable(): boolean {
+    return "indexedDB" in window
+  }
+
+  /**
+   * Ferme la connexion
+   */
+  close(): void {
+    if (this.db) {
+      this.db.close()
+      this.db = null
+      this.initPromise = null
+    }
+  }
+
+  // ============ CACHE ============
+
+  /**
+   * Sauvegarde les données en cache
+   */
+  async cacheData<TData>(
+    tableId: string,
+    data: TData[],
+    version = 1
+  ): Promise<void> {
+    await this.init()
+    if (!this.db) throw new Error("Database not initialized")
+
+    const entry: CacheEntry<TData> = {
+      id: tableId,
+      tableId,
+      data,
+      timestamp: new Date(),
+      version,
+    }
+
+    return new Promise((resolve, reject) => {
+      const transaction = this.db!.transaction([STORES.CACHE], "readwrite")
+      const store = transaction.objectStore(STORES.CACHE)
+      const request = store.put(entry)
+
+      request.onsuccess = () => resolve()
+      request.onerror = () => reject(request.error)
+    })
+  }
+
+  /**
+   * Récupère les données du cache
+   */
+  async getCachedData<TData>(tableId: string): Promise<CacheEntry<TData> | null> {
+    await this.init()
+    if (!this.db) throw new Error("Database not initialized")
+
+    return new Promise((resolve, reject) => {
+      const transaction = this.db!.transaction([STORES.CACHE], "readonly")
+      const store = transaction.objectStore(STORES.CACHE)
+      const request = store.get(tableId)
+
+      request.onsuccess = () => resolve(request.result || null)
+      request.onerror = () => reject(request.error)
+    })
+  }
+
+  /**
+   * Supprime les données du cache
+   */
+  async clearCache(tableId: string): Promise<void> {
+    await this.init()
+    if (!this.db) throw new Error("Database not initialized")
+
+    return new Promise((resolve, reject) => {
+      const transaction = this.db!.transaction([STORES.CACHE], "readwrite")
+      const store = transaction.objectStore(STORES.CACHE)
+      const request = store.delete(tableId)
+
+      request.onsuccess = () => resolve()
+      request.onerror = () => reject(request.error)
+    })
+  }
+
+  /**
+   * Supprime les entrées de cache expirées
+   */
+  async cleanExpiredCache(maxAgeMs: number): Promise<number> {
+    await this.init()
+    if (!this.db) throw new Error("Database not initialized")
+
+    const cutoff = new Date(Date.now() - maxAgeMs)
+
+    return new Promise((resolve, reject) => {
+      const transaction = this.db!.transaction([STORES.CACHE], "readwrite")
+      const store = transaction.objectStore(STORES.CACHE)
+      const index = store.index("timestamp")
+      const range = IDBKeyRange.upperBound(cutoff)
+      const request = index.openCursor(range)
+
+      let deletedCount = 0
+
+      request.onsuccess = (event) => {
+        const cursor = (event.target as IDBRequest).result as IDBCursorWithValue | null
+        if (cursor) {
+          cursor.delete()
+          deletedCount++
+          cursor.continue()
+        } else {
+          resolve(deletedCount)
+        }
+      }
+
+      request.onerror = () => reject(request.error)
+    })
+  }
+
+  // ============ SYNC QUEUE ============
+
+  /**
+   * Ajoute un changement à la queue de synchronisation
+   */
+  async queueChange<TData>(
+    tableId: string,
+    rowId: string,
+    type: SyncQueueItem<TData>["type"],
+    data: Partial<TData> | null
+  ): Promise<string> {
+    await this.init()
+    if (!this.db) throw new Error("Database not initialized")
+
+    const id = `${tableId}_${rowId}_${Date.now()}`
+    const item: SyncQueueItem<TData> = {
+      id,
+      tableId,
+      rowId,
+      type,
+      data,
+      timestamp: new Date(),
+      attempts: 0,
+    }
+
+    return new Promise((resolve, reject) => {
+      const transaction = this.db!.transaction([STORES.SYNC_QUEUE], "readwrite")
+      const store = transaction.objectStore(STORES.SYNC_QUEUE)
+      const request = store.add(item)
+
+      request.onsuccess = () => resolve(id)
+      request.onerror = () => reject(request.error)
+    })
+  }
+
+  /**
+   * Récupère les changements en attente
+   */
+  async getPendingChanges<TData>(tableId: string): Promise<SyncQueueItem<TData>[]> {
+    await this.init()
+    if (!this.db) throw new Error("Database not initialized")
+
+    return new Promise((resolve, reject) => {
+      const transaction = this.db!.transaction([STORES.SYNC_QUEUE], "readonly")
+      const store = transaction.objectStore(STORES.SYNC_QUEUE)
+      const index = store.index("tableId")
+      const request = index.getAll(tableId)
+
+      request.onsuccess = () => {
+        const items = request.result as SyncQueueItem<TData>[]
+        // Trier par timestamp
+        items.sort((a, b) => new Date(a.timestamp).getTime() - new Date(b.timestamp).getTime())
+        resolve(items)
+      }
+      request.onerror = () => reject(request.error)
+    })
+  }
+
+  /**
+   * Compte les changements en attente
+   */
+  async countPendingChanges(tableId: string): Promise<number> {
+    await this.init()
+    if (!this.db) throw new Error("Database not initialized")
+
+    return new Promise((resolve, reject) => {
+      const transaction = this.db!.transaction([STORES.SYNC_QUEUE], "readonly")
+      const store = transaction.objectStore(STORES.SYNC_QUEUE)
+      const index = store.index("tableId")
+      const request = index.count(tableId)
+
+      request.onsuccess = () => resolve(request.result)
+      request.onerror = () => reject(request.error)
+    })
+  }
+
+  /**
+   * Marque un changement comme traité (le supprime)
+   */
+  async removeFromQueue(id: string): Promise<void> {
+    await this.init()
+    if (!this.db) throw new Error("Database not initialized")
+
+    return new Promise((resolve, reject) => {
+      const transaction = this.db!.transaction([STORES.SYNC_QUEUE], "readwrite")
+      const store = transaction.objectStore(STORES.SYNC_QUEUE)
+      const request = store.delete(id)
+
+      request.onsuccess = () => resolve()
+      request.onerror = () => reject(request.error)
+    })
+  }
+
+  /**
+   * Met à jour le nombre de tentatives d'un changement
+   */
+  async updateAttempts<TData>(id: string, error?: string): Promise<void> {
+    await this.init()
+    if (!this.db) throw new Error("Database not initialized")
+
+    return new Promise((resolve, reject) => {
+      const transaction = this.db!.transaction([STORES.SYNC_QUEUE], "readwrite")
+      const store = transaction.objectStore(STORES.SYNC_QUEUE)
+      const getRequest = store.get(id)
+
+      getRequest.onsuccess = () => {
+        const item = getRequest.result as SyncQueueItem<TData> | undefined
+        if (item) {
+          item.attempts++
+          if (error) item.lastError = error
+          const putRequest = store.put(item)
+          putRequest.onsuccess = () => resolve()
+          putRequest.onerror = () => reject(putRequest.error)
+        } else {
+          resolve()
+        }
+      }
+      getRequest.onerror = () => reject(getRequest.error)
+    })
+  }
+
+  /**
+   * Vide la queue de synchronisation
+   */
+  async clearQueue(tableId: string): Promise<void> {
+    await this.init()
+    if (!this.db) throw new Error("Database not initialized")
+
+    const items = await this.getPendingChanges(tableId)
+
+    return new Promise((resolve, reject) => {
+      const transaction = this.db!.transaction([STORES.SYNC_QUEUE], "readwrite")
+      const store = transaction.objectStore(STORES.SYNC_QUEUE)
+
+      let completed = 0
+      const total = items.length
+
+      if (total === 0) {
+        resolve()
+        return
+      }
+
+      items.forEach((item) => {
+        const request = store.delete(item.id)
+        request.onsuccess = () => {
+          completed++
+          if (completed === total) resolve()
+        }
+        request.onerror = () => reject(request.error)
+      })
+    })
+  }
+
+  // ============ CONFLICTS ============
+
+  /**
+   * Ajoute un conflit
+   */
+  async addConflict<TData>(conflict: Omit<ConflictEntry<TData>, "id">): Promise<string> {
+    await this.init()
+    if (!this.db) throw new Error("Database not initialized")
+
+    const id = `conflict_${conflict.tableId}_${conflict.rowId}_${Date.now()}`
+    const entry: ConflictEntry<TData> = { id, ...conflict }
+
+    return new Promise((resolve, reject) => {
+      const transaction = this.db!.transaction([STORES.CONFLICTS], "readwrite")
+      const store = transaction.objectStore(STORES.CONFLICTS)
+      const request = store.add(entry)
+
+      request.onsuccess = () => resolve(id)
+      request.onerror = () => reject(request.error)
+    })
+  }
+
+  /**
+   * Récupère les conflits d'une table
+   */
+  async getConflicts<TData>(tableId: string): Promise<ConflictEntry<TData>[]> {
+    await this.init()
+    if (!this.db) throw new Error("Database not initialized")
+
+    return new Promise((resolve, reject) => {
+      const transaction = this.db!.transaction([STORES.CONFLICTS], "readonly")
+      const store = transaction.objectStore(STORES.CONFLICTS)
+      const index = store.index("tableId")
+      const request = index.getAll(tableId)
+
+      request.onsuccess = () => resolve(request.result)
+      request.onerror = () => reject(request.error)
+    })
+  }
+
+  /**
+   * Supprime un conflit résolu
+   */
+  async resolveConflict(id: string): Promise<void> {
+    await this.init()
+    if (!this.db) throw new Error("Database not initialized")
+
+    return new Promise((resolve, reject) => {
+      const transaction = this.db!.transaction([STORES.CONFLICTS], "readwrite")
+      const store = transaction.objectStore(STORES.CONFLICTS)
+      const request = store.delete(id)
+
+      request.onsuccess = () => resolve()
+      request.onerror = () => reject(request.error)
+    })
+  }
+
+  /**
+   * Vide tous les conflits d'une table
+   */
+  async clearConflicts(tableId: string): Promise<void> {
+    await this.init()
+    if (!this.db) throw new Error("Database not initialized")
+
+    const conflicts = await this.getConflicts(tableId)
+
+    return new Promise((resolve, reject) => {
+      const transaction = this.db!.transaction([STORES.CONFLICTS], "readwrite")
+      const store = transaction.objectStore(STORES.CONFLICTS)
+
+      let completed = 0
+      const total = conflicts.length
+
+      if (total === 0) {
+        resolve()
+        return
+      }
+
+      conflicts.forEach((conflict) => {
+        const request = store.delete(conflict.id)
+        request.onsuccess = () => {
+          completed++
+          if (completed === total) resolve()
+        }
+        request.onerror = () => reject(request.error)
+      })
+    })
+  }
+
+  // ============ STATS ============
+
+  /**
+   * Obtient des statistiques sur la base de données
+   */
+  async getStats(tableId: string): Promise<{
+    cacheSize: number
+    pendingChanges: number
+    conflicts: number
+    lastCacheUpdate: Date | null
+  }> {
+    await this.init()
+
+    const cache = await this.getCachedData(tableId)
+    const pendingChanges = await this.countPendingChanges(tableId)
+    const conflicts = await this.getConflicts(tableId)
+
+    return {
+      cacheSize: cache?.data?.length ?? 0,
+      pendingChanges,
+      conflicts: conflicts.length,
+      lastCacheUpdate: cache?.timestamp ? new Date(cache.timestamp) : null,
+    }
+  }
+}
+
+// Singleton pour le service
+let instance: IndexedDBService | null = null
+
+export function getIndexedDBService(): IndexedDBService {
+  if (!instance) {
+    instance = new IndexedDBService()
+  }
+  return instance
+}
+
+export default IndexedDBService