Refactor collaborative code

Author: Developer

app/assets/builds/application.js

@@ -0,0 +1,52 @@
+import { createConsumer } from "@rails/actioncable"
+
+export class ActionCableManager {
+  constructor(controller) {
+    this.controller = controller
+    this.subscription = null
+  }
+
+  connect() {
+    this.subscription = createConsumer().subscriptions.create("CollaborativeStreamsChannel", {
+      received: (data) => this.handleMessage(data),
+      connected: () => console.log("Connected to CollaborativeStreamsChannel"),
+      disconnected: () => console.log("Disconnected from CollaborativeStreamsChannel")
+    })
+  }
+
+  disconnect() {
+    if (this.subscription) {
+      this.subscription.unsubscribe()
+      this.subscription = null
+    }
+  }
+
+  perform(action, data) {
+    if (this.subscription) {
+      this.subscription.perform(action, data)
+    }
+  }
+
+  handleMessage(data) {
+    switch(data.action) {
+      case 'active_users_list':
+        this.controller.collaborationManager.setActiveUsers(data.users)
+        break
+      case 'user_joined':
+        this.controller.collaborationManager.addUser(data.user_id, data.user_name, data.user_color)
+        break
+      case 'user_left':
+        this.controller.collaborationManager.removeUser(data.user_id)
+        break
+      case 'cell_locked':
+        this.controller.cellRenderer.showCellLocked(data.cell_id, data.user_id, data.user_name, data.user_color)
+        break
+      case 'cell_unlocked':
+        this.controller.cellRenderer.hideCellLocked(data.cell_id)
+        break
+      case 'cell_updated':
+        this.controller.cellRenderer.updateCell(data.cell_id, data.field, data.value, data.stream_id)
+        break
+    }
+  }
+}

app/assets/builds/application.js.map

@@ -0,0 +1,184 @@
+export class CellEditor {
+  constructor(controller) {
+    this.controller = controller
+    this.autosaveTimeout = null
+  }
+
+  handleCellClick(event) {
+    const cell = event.currentTarget
+    const cellId = cell.dataset.cellId
+    const isLocked = cell.dataset.locked === 'true'
+    const lockedBy = cell.dataset.lockedBy
+    const field = cell.dataset.field
+    const fieldType = cell.dataset.fieldType
+    
+    // Prevent editing if locked by another user
+    if (isLocked && lockedBy !== this.controller.currentUser) {
+      this.controller.messageDisplayManager.showLockedMessage(cell)
+      return
+    }
+    
+    // Request lock
+    this.controller.actionCableManager.perform('lock_cell', { cell_id: cellId })
+    
+    // Handle select fields differently
+    if (fieldType === 'select') {
+      this.controller.cellRenderer.showSelectDropdown(cell)
+    } else {
+      // For status field and other fields with special formatting, 
+      // replace content with plain text for editing
+      if (field === 'status') {
+        const currentValue = cell.dataset.originalValue || cell.textContent.trim()
+        cell.textContent = currentValue
+      }
+      
+      // Make cell editable
+      cell.contentEditable = true
+      cell.focus()
+      
+      // Select all text
+      const range = document.createRange()
+      range.selectNodeContents(cell)
+      const sel = window.getSelection()
+      sel.removeAllRanges()
+      sel.addRange(range)
+    }
+    
+    // Set edit timeout (30 seconds)
+    this.controller.editTimeoutManager.setEditTimeout(cellId)
+  }
+
+  handleCellBlur(event) {
+    const cell = event.currentTarget
+    const cellId = cell.dataset.cellId
+    const field = cell.dataset.field
+    
+    // Clear any pending autosave to prevent duplicate saves
+    if (this.autosaveTimeout) {
+      clearTimeout(this.autosaveTimeout)
+      this.autosaveTimeout = null
+    }
+    
+    // Check if we should skip saving (e.g., Escape was pressed)
+    if (cell.dataset.skipSave !== 'true') {
+      // Save changes
+      this.saveCell(cell)
+      // Note: saveCell will handle unlocking
+    } else {
+      // Just unlock without saving
+      this.controller.actionCableManager.perform('unlock_cell', { cell_id: cellId })
+      delete cell.dataset.skipSave
+    }
+    
+    // Make cell non-editable
+    cell.contentEditable = false
+    
+    // For status field, restore the formatted display with current value
+    if (field === 'status') {
+      this.controller.cellRenderer.formatStatusCell(cell)
+    }
+    
+    // Clear edit timeout
+    this.controller.editTimeoutManager.clearEditTimeout(cellId)
+  }
+
+  handleCellInput(event) {
+    const cell = event.currentTarget
+    const cellId = cell.dataset.cellId
+    
+    // Reset edit timeout on input
+    this.controller.editTimeoutManager.clearEditTimeout(cellId)
+    this.controller.editTimeoutManager.setEditTimeout(cellId)
+    
+    // Debounced autosave
+    clearTimeout(this.autosaveTimeout)
+    this.autosaveTimeout = setTimeout(() => {
+      this.saveCell(cell)
+    }, 1000)
+  }
+
+  handleCellKeydown(event) {
+    const cell = event.currentTarget
+    
+    if (event.key === 'Enter' && !event.shiftKey) {
+      event.preventDefault()
+      cell.blur()
+    } else if (event.key === 'Escape') {
+      event.preventDefault()
+      // Restore original value
+      const originalValue = cell.dataset.originalValue || ''
+      cell.textContent = originalValue
+      // Don't save changes
+      cell.dataset.skipSave = 'true'
+      cell.blur()
+    } else if (event.key === 'Tab') {
+      event.preventDefault()
+      // Save current cell
+      cell.blur()
+      
+      // Find next/previous editable cell
+      const allCells = this.controller.cellTargets
+      const currentIndex = allCells.indexOf(cell)
+      let nextIndex
+      
+      if (event.shiftKey) {
+        // Shift+Tab: go to previous cell
+        nextIndex = currentIndex - 1
+        if (nextIndex < 0) nextIndex = allCells.length - 1
+      } else {
+        // Tab: go to next cell
+        nextIndex = currentIndex + 1
+        if (nextIndex >= allCells.length) nextIndex = 0
+      }
+      
+      // Click on the next cell to edit it
+      if (allCells[nextIndex]) {
+        allCells[nextIndex].click()
+      }
+    }
+  }
+
+  saveCell(cell) {
+    const cellId = cell.dataset.cellId
+    const streamId = cell.dataset.streamId
+    const field = cell.dataset.field
+    const value = cell.textContent.trim()
+    const originalValue = cell.dataset.originalValue || ''
+    
+    console.log('saveCell called for field:', field, 'with value:', value)
+    
+    // Validate required data
+    if (!cellId || !streamId || !field) {
+      console.error('Missing required data for cell save:', { cellId, streamId, field })
+      return
+    }
+    
+    // Validate cell is still in correct position
+    const td = cell.closest('td')
+    const tr = td ? td.closest('tr') : null
+    if (!td || !tr) {
+      console.error('Cell is not in a valid table structure!', { cellId })
+      return
+    }
+    
+    // Only save if value changed
+    if (value !== originalValue) {
+      console.log('Saving cell:', { cellId, streamId, field, value, originalValue })
+      
+      this.controller.actionCableManager.perform('update_cell', {
+        cell_id: cellId,
+        stream_id: streamId,
+        field: field,
+        value: value
+      })
+      
+      // Update original value
+      cell.dataset.originalValue = value
+    } else {
+      console.log('No change detected, not saving:', { value, originalValue })
+    }
+    
+    // Unlock cell
+    this.controller.actionCableManager.perform('unlock_cell', { cell_id: cellId })
+  }
+}