collavre 0.1.0

data/app/javascript/controllers/creatives/drag_drop_controller.js

@@ -0,0 +1,45 @@
+import { Controller } from '@hotwired/stimulus'
+import { initIndicator } from '../../creatives/drag_drop/indicator'
+import {
+  addGlobalListeners,
+  removeGlobalListeners,
+  handleDragStart,
+  handleDragOver,
+  handleDrop,
+  handleDragLeave,
+} from '../../creatives/drag_drop/event_handlers'
+
+let connectionCount = 0
+
+export default class extends Controller {
+  connect() {
+    if (connectionCount === 0) {
+      initIndicator()
+      addGlobalListeners()
+    }
+    connectionCount += 1
+  }
+
+  disconnect() {
+    connectionCount = Math.max(0, connectionCount - 1)
+    if (connectionCount === 0) {
+      removeGlobalListeners()
+    }
+  }
+
+  start(event) {
+    handleDragStart(event)
+  }
+
+  over(event) {
+    handleDragOver(event)
+  }
+
+  drop(event) {
+    handleDrop(event)
+  }
+
+  leave(event) {
+    handleDragLeave(event)
+  }
+}

data/app/javascript/controllers/creatives/expansion_controller.js

@@ -0,0 +1,222 @@
+import { Controller } from '@hotwired/stimulus'
+import csrfFetch from '../../lib/api/csrf_fetch'
+import { renderCreativeTree, dispatchCreativeTreeUpdated } from '../../creatives/tree_renderer'
+
+export default class extends Controller {
+  static targets = ['expand']
+
+  connect() {
+    this.allExpanded = false
+    this.currentCreativeId = null
+    this.handleToggleEvent = this.handleToggleEvent.bind(this)
+    this.handleTreeUpdated = this.handleTreeUpdated.bind(this)
+    this.element.addEventListener('creative-toggle-click', this.handleToggleEvent)
+    this.element.addEventListener('creative-tree:updated', this.handleTreeUpdated)
+    this.setup()
+  }
+
+  disconnect() {
+    this.element.removeEventListener('creative-toggle-click', this.handleToggleEvent)
+    this.element.removeEventListener('creative-tree:updated', this.handleTreeUpdated)
+  }
+
+  toggleAll(event) {
+    event.preventDefault()
+    this.allExpanded = !this.allExpanded
+    const rows = this.element.querySelectorAll('creative-tree-row')
+    rows.forEach((row) => {
+      if (this.allExpanded) {
+        this.expandRow(row, { persist: false })
+      } else {
+        this.collapseRow(row, { persist: false })
+      }
+    })
+    this.updateExpandButton()
+  }
+
+  handleToggleEvent(event) {
+    const row = event.detail?.component
+    if (!row) return
+    this.toggleRow(row)
+  }
+
+  handleTreeUpdated(event) {
+    const container =
+      event?.target && typeof event.target.querySelectorAll === 'function'
+        ? event.target
+        : this.element
+    this.initializeRows(container || this.element)
+  }
+
+  setup() {
+    this.currentCreativeId = this.computeCurrentCreativeId()
+    this.allExpanded = false
+    this.updateExpandButton()
+    this.initializeRows(this.element)
+  }
+
+  computeCurrentCreativeId() {
+    // Try URL path first: /creatives/:id
+    const match = window.location.pathname.match(/\/creatives\/(\d+)/)
+    let id = match ? match[1] : null
+
+    // Try URL params: ?id=...
+    if (!id) {
+      const params = new URLSearchParams(window.location.search)
+      id = params.get('id')
+    }
+
+    // Fallback: get ID from title row element
+    if (!id) {
+      const titleRow = this.element.querySelector('creative-tree-row[is-title]')
+      id = titleRow?.getAttribute('creative-id')
+    }
+
+    return id
+  }
+
+  updateExpandButton() {
+    if (!this.hasExpandTarget) return
+    const button = this.expandTarget
+    const icon = button.querySelector('span')
+    if (icon) {
+      icon.textContent = this.allExpanded ? '▶' : '▼'
+    }
+    const expandText = button.dataset.expandText
+    const collapseText = button.dataset.collapseText
+    button.ariaLabel = this.allExpanded ? collapseText : expandText
+  }
+
+  toggleRow(row) {
+    if (row.expanded) {
+      this.collapseRow(row)
+    } else {
+      this.expandRow(row)
+    }
+  }
+
+  expandRow(row, { persist = true } = {}) {
+    const creativeId = this.rowCreativeId(row)
+    const childrenDiv = this.childrenContainerFor(row)
+    this.ensureLoaded(row, childrenDiv).then((hasChildren) => {
+      if (!hasChildren || !childrenDiv) {
+        this.collapseRow(row, { persist: false })
+        return
+      }
+      childrenDiv.style.display = ''
+      childrenDiv.dataset.expanded = 'true'
+      row.expanded = true
+      if (persist) this.saveExpansionState(creativeId, true)
+    })
+  }
+
+  collapseRow(row, { persist = true } = {}) {
+    const creativeId = this.rowCreativeId(row)
+    const childrenDiv = this.childrenContainerFor(row)
+    if (childrenDiv) {
+      childrenDiv.style.display = 'none'
+      childrenDiv.dataset.expanded = 'false'
+    }
+    row.expanded = false
+    if (persist) this.saveExpansionState(creativeId, false)
+  }
+
+  ensureLoaded(row, childrenDiv) {
+    if (!childrenDiv) {
+      row.hasChildren = false
+      row.loadingChildren = false
+      return Promise.resolve(false)
+    }
+
+    if (childrenDiv.dataset.loaded === 'true') {
+      const has = !!childrenDiv.querySelector('creative-tree-row')
+      row.hasChildren = has
+      row.loadingChildren = false
+      return Promise.resolve(has)
+    }
+
+    const url = childrenDiv.dataset.loadUrl
+    if (!url) {
+      row.hasChildren = false
+      row.loadingChildren = false
+      return Promise.resolve(false)
+    }
+
+    row.loadingChildren = true
+
+    return fetch(url, { headers: { Accept: 'application/json' } })
+      .then((response) => {
+        if (!response.ok) throw new Error(`Failed to load children: ${response.status}`)
+        return response.json()
+      })
+      .then((data) => {
+        const nodes = Array.isArray(data?.creatives) ? data.creatives : []
+        renderCreativeTree(childrenDiv, nodes)
+        childrenDiv.dataset.loaded = 'true'
+        dispatchCreativeTreeUpdated(childrenDiv)
+        const has = !!childrenDiv.querySelector('creative-tree-row')
+        row.hasChildren = has
+        return has
+      })
+      .catch((error) => {
+        console.error(error)
+        row.hasChildren = false
+        childrenDiv.dataset.loaded = 'true'
+        return false
+      })
+      .finally(() => {
+        row.loadingChildren = false
+      })
+  }
+
+  initializeRows(container) {
+    container.querySelectorAll('creative-tree-row').forEach((row) => {
+      this.syncInitialState(row)
+    })
+  }
+
+  syncInitialState(row) {
+    const childrenDiv = this.childrenContainerFor(row)
+    const shouldExpand =
+      this.allExpanded ||
+      row.expanded ||
+      (childrenDiv && childrenDiv.dataset.expanded === 'true')
+
+    if (shouldExpand && row.hasChildren) {
+      this.expandRow(row, { persist: false })
+    } else {
+      this.collapseRow(row, { persist: false })
+    }
+  }
+
+  childrenContainerFor(row) {
+    const creativeId = this.rowCreativeId(row)
+    if (!creativeId) return null
+    return document.getElementById(`creative-children-${creativeId}`)
+  }
+
+  rowCreativeId(row) {
+    return row.creativeId || row.getAttribute('creative-id')
+  }
+
+  saveExpansionState(creativeId, expanded) {
+    if (!creativeId) return
+    if (this.currentCreativeId === null || this.currentCreativeId === undefined) {
+      this.currentCreativeId = this.computeCurrentCreativeId()
+    }
+    const contextId = this.currentCreativeId ?? null
+
+    csrfFetch('/creative_expanded_states/toggle', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        Accept: 'application/json',
+      },
+      body: JSON.stringify({
+        creative_id: contextId,
+        node_id: creativeId,
+        expanded,
+      }),
+    }).catch(() => {})
+  }
+}

data/app/javascript/controllers/creatives/import_controller.js

@@ -0,0 +1,116 @@
+import { Controller } from '@hotwired/stimulus'
+import csrfFetch from '../../lib/api/csrf_fetch'
+
+export default class extends Controller {
+  static targets = ['area', 'dropzone', 'input', 'progress', 'toggle']
+  static values = {
+    parentId: String,
+    uploading: String,
+    success: String,
+    failed: String,
+    onlyMarkdown: String,
+  }
+  static classes = ['dragover']
+
+  connect() {
+    this.hideProgress()
+    this.setAreaVisible(this.isAreaVisible())
+  }
+
+  toggle(event) {
+    event.preventDefault()
+    this.hideProgress()
+    this.setAreaVisible(!this.isAreaVisible())
+  }
+
+  dragOver(event) {
+    event.preventDefault()
+    this.dropzoneTarget.classList.add(this.dragoverClass)
+  }
+
+  dragLeave(event) {
+    event.preventDefault()
+    this.dropzoneTarget.classList.remove(this.dragoverClass)
+  }
+
+  drop(event) {
+    event.preventDefault()
+    this.dropzoneTarget.classList.remove(this.dragoverClass)
+    const file = event.dataTransfer.files[0]
+    if (file) {
+      this.handleFile(file)
+    }
+  }
+
+  pickFile() {
+    this.inputTarget.click()
+  }
+
+  fileChanged() {
+    const file = this.inputTarget.files[0]
+    if (file) {
+      this.handleFile(file)
+      this.inputTarget.value = ''
+    }
+  }
+
+  async handleFile(file) {
+    const lower = file.name.toLowerCase()
+    const isMarkdown = lower.endsWith('.md')
+    const isPpt = lower.endsWith('.ppt') || lower.endsWith('.pptx')
+
+    if (!isMarkdown && !isPpt) {
+      window.alert(this.onlyMarkdownValue)
+      return
+    }
+
+    this.showProgress(this.uploadingValue)
+
+    const formData = new FormData()
+    formData.append('markdown', file)
+    if (this.parentIdValue) {
+      formData.append('parent_id', this.parentIdValue)
+    }
+
+    try {
+      const response = await csrfFetch('/creative_imports', {
+        method: 'POST',
+        headers: { Accept: 'application/json' },
+        body: formData,
+      })
+      const data = await response.json()
+
+      if (data.success) {
+        this.showProgress(this.successValue)
+        window.setTimeout(() => window.location.reload(), 700)
+      } else {
+        this.showProgress(data.error || this.failedValue)
+        window.setTimeout(() => this.hideProgress(), 3000)
+      }
+    } catch (error) {
+      this.showProgress(this.failedValue)
+      window.setTimeout(() => this.hideProgress(), 3000)
+    }
+  }
+
+  showProgress(message) {
+    this.progressTarget.style.display = 'block'
+    this.progressTarget.textContent = message
+  }
+
+  hideProgress() {
+    this.progressTarget.style.display = 'none'
+    this.progressTarget.textContent = ''
+  }
+
+  isAreaVisible() {
+    return this.areaTarget.style.display === 'block'
+  }
+
+  setAreaVisible(visible) {
+    this.areaTarget.style.display = visible ? 'block' : 'none'
+    if (this.hasToggleTarget) {
+      this.toggleTarget.setAttribute('aria-expanded', visible ? 'true' : 'false')
+    }
+  }
+}

data/app/javascript/controllers/creatives/row_editor_controller.js

@@ -0,0 +1,8 @@
+import { Controller } from '@hotwired/stimulus'
+import { initializeCreativeRowEditor } from '../../modules/creative_row_editor'
+
+export default class extends Controller {
+  connect() {
+    initializeCreativeRowEditor()
+  }
+}

data/app/javascript/controllers/creatives/select_mode_controller.js

@@ -0,0 +1,231 @@
+import { Controller } from '@hotwired/stimulus'
+import csrfFetch from '../../lib/api/csrf_fetch'
+
+export default class extends Controller {
+  static targets = [
+    'toggle',
+    'checkbox',
+    'row',
+    'selectAll',
+    'deleteButton',
+    'setPlan',
+  ]
+
+  connect() {
+    this.active = false
+    this.dragging = false
+    this.dragMode = 'toggle'
+    this.rowListeners = new Map()
+
+    this.handleDocumentMouseUp = this.handleDocumentMouseUp.bind(this)
+    document.addEventListener('mouseup', this.handleDocumentMouseUp)
+
+    this.handleTurboLoad = this.attachRowHandlers.bind(this)
+    document.addEventListener('turbo:load', this.handleTurboLoad)
+
+    this.attachRowHandlers()
+  }
+
+  disconnect() {
+    document.removeEventListener('mouseup', this.handleDocumentMouseUp)
+    document.removeEventListener('turbo:load', this.handleTurboLoad)
+
+    this.rowListeners.forEach((handlers, row) => {
+      row.removeEventListener('mousedown', handlers.mousedown)
+      row.removeEventListener('mouseenter', handlers.mouseenter)
+    })
+    this.rowListeners = new Map()
+  }
+
+  toggle(event) {
+    event.preventDefault()
+    this.active = !this.active
+
+    this.updateUiForMode()
+
+    if (this.active) {
+      this.attachRowHandlers()
+    } else {
+      this.clearSelection()
+      if (this.hasSelectAllTarget) {
+        this.selectAllTarget.checked = false
+      }
+    }
+
+    if (this.hasToggleTarget) {
+      const selectText = this.toggleTarget.dataset.selectText
+      const cancelText = this.toggleTarget.dataset.cancelText
+      this.toggleTarget.textContent = this.active ? cancelText : selectText
+      this.toggleTarget.setAttribute('aria-pressed', this.active ? 'true' : 'false')
+    }
+  }
+
+  checkboxChanged(event) {
+    const checkbox = event.currentTarget
+    const row = this.findRowForElement(checkbox)
+    if (!row) return
+    row.classList.toggle('selected', checkbox.checked)
+  }
+
+  toggleSelectAll(event) {
+    const checked = event.currentTarget.checked
+    this.checkboxTargets.forEach((checkbox) => {
+      checkbox.checked = checked
+      const row = this.findRowForElement(checkbox)
+      if (row) {
+        row.classList.toggle('selected', checked)
+      }
+    })
+  }
+
+  async deleteSelected(event) {
+    event.preventDefault()
+    const ids = Array.from(this.element.querySelectorAll('.select-creative-checkbox:checked')).map((cb) => cb.value)
+    if (ids.length === 0) return
+
+    const confirmMessage = this.hasDeleteButtonTarget ? this.deleteButtonTarget.dataset.confirm : undefined
+    if (confirmMessage && !window.confirm(confirmMessage)) {
+      return
+    }
+
+    await Promise.all(
+      ids.map((id) =>
+        csrfFetch(`/creatives/${id}?delete_with_children=false`, {
+          method: 'DELETE',
+          headers: { Accept: 'application/json' },
+        })
+      )
+    )
+
+    ids.forEach((id) => {
+      const tree = document.getElementById(`creative-${id}`)
+      if (tree) tree.remove()
+    })
+
+    this.clearSelection()
+    if (this.hasSelectAllTarget) {
+      this.selectAllTarget.checked = false
+    }
+  }
+
+  rowTargetConnected(row) {
+    this.registerRowListeners(row)
+  }
+
+  rowTargetDisconnected(row) {
+    const handlers = this.rowListeners.get(row)
+    if (handlers) {
+      row.removeEventListener('mousedown', handlers.mousedown)
+      row.removeEventListener('mouseenter', handlers.mouseenter)
+      this.rowListeners.delete(row)
+    }
+  }
+
+  handleDocumentMouseUp() {
+    this.dragging = false
+  }
+
+  attachRowHandlers() {
+    this.rowTargets.forEach((row) => this.registerRowListeners(row))
+  }
+
+  registerRowListeners(row) {
+    if (this.rowListeners.has(row)) return
+
+    const handlers = {
+      mousedown: (event) => this.handleRowMouseDown(event, row),
+      mouseenter: () => this.handleRowMouseEnter(row),
+    }
+
+    row.addEventListener('mousedown', handlers.mousedown)
+    row.addEventListener('mouseenter', handlers.mouseenter)
+
+    this.rowListeners.set(row, handlers)
+  }
+
+  handleRowMouseDown(event, row) {
+    if (!this.active) return
+    if (event.target.closest('.select-creative-checkbox')) return
+
+    const tree = row.closest('.creative-tree')
+    const isDraggable = tree && tree.getAttribute('draggable') !== 'false'
+    const alreadySelected = row.classList.contains('selected')
+
+    this.dragMode = event.altKey ? 'remove' : event.shiftKey ? 'add' : 'toggle'
+
+    const shouldToggle = !isDraggable || !alreadySelected || event.altKey || event.shiftKey
+
+    this.dragging = shouldToggle
+
+    if (shouldToggle) {
+      this.applySelection(row, this.dragMode)
+      event.preventDefault()
+    }
+  }
+
+  handleRowMouseEnter(row) {
+    if (this.dragging && this.active) {
+      this.applySelection(row, this.dragMode)
+    }
+  }
+
+  applySelection(row, mode) {
+    const checkbox = row.querySelector('.select-creative-checkbox')
+    if (!checkbox) return
+
+    if (mode === 'remove') {
+      checkbox.checked = false
+      row.classList.remove('selected')
+    } else if (mode === 'add') {
+      checkbox.checked = true
+      row.classList.add('selected')
+    } else {
+      checkbox.checked = !checkbox.checked
+      row.classList.toggle('selected', checkbox.checked)
+    }
+  }
+
+  clearSelection() {
+    this.checkboxTargets.forEach((checkbox) => {
+      checkbox.checked = false
+      const row = this.findRowForElement(checkbox)
+      if (row) {
+        row.classList.remove('selected')
+      }
+    })
+  }
+
+  updateUiForMode() {
+    const show = this.active
+
+    this.checkboxTargets.forEach((checkbox) => {
+      checkbox.style.display = show ? '' : 'none'
+    })
+
+    this.toggleElements('.add-creative-btn', !show)
+    this.toggleElements('.creative-tags', !show)
+    this.toggleElements('.comments-btn', !show)
+
+    if (this.hasSelectAllTarget) {
+      this.selectAllTarget.style.display = show ? '' : 'none'
+    }
+
+    if (this.hasSetPlanTarget) {
+      this.setPlanTarget.style.display = show ? '' : 'none'
+    }
+
+    if (this.hasDeleteButtonTarget) {
+      this.deleteButtonTarget.style.display = show ? '' : 'none'
+    }
+  }
+
+  toggleElements(selector, shouldShow) {
+    this.element.querySelectorAll(selector).forEach((element) => {
+      element.style.display = shouldShow ? '' : 'none'
+    })
+  }
+
+  findRowForElement(element) {
+    return element.closest('.creative-row')
+  }
+}