b4um_generators 0.2.16 → 0.3.0

data/lib/generators/b4um/sortable/templates/sortable_controller.js

@@ -0,0 +1,166 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+  static values = {
+    updateUrl: String
+  }
+
+  connect() {
+    this.draggedItem = null
+    this.draggedFromPosition = null
+  }
+
+  dragStart(event) {
+    const item = event.currentTarget.closest('[data-sortable-id]')
+
+    if (!item) return
+
+    this.draggedItem = item
+    this.draggedFromPosition = this.positionFor(item)
+
+    event.dataTransfer.effectAllowed = 'move'
+    event.dataTransfer.setData('text/plain', item.dataset.sortableId)
+
+    item.classList.add('b4um-sortable__item--dragging')
+  }
+
+  dragEnd() {
+    if (this.draggedItem) {
+      this.draggedItem.classList.remove('b4um-sortable__item--dragging')
+    }
+
+    this.draggedItem = null
+    this.draggedFromPosition = null
+  }
+
+  dragOver(event) {
+    event.preventDefault()
+
+    if (!this.draggedItem) return
+
+    const target = event.currentTarget
+
+    if (target === this.draggedItem) return
+
+    const bounds = target.getBoundingClientRect()
+    const insertAfter = event.clientY > bounds.top + bounds.height / 2
+
+    if (insertAfter) {
+      target.after(this.draggedItem)
+    } else {
+      target.before(this.draggedItem)
+    }
+  }
+
+  drop(event) {
+    event.preventDefault()
+
+    if (!this.draggedItem) return
+
+    const item = this.draggedItem
+    const position = this.positionAfterDrop(item)
+
+    if (!position) {
+      window.location.reload()
+      return
+    }
+
+    this.persist(item.dataset.sortableId, position)
+  }
+
+  positionKeydown(event) {
+    if (event.key !== 'Enter') return
+
+    event.preventDefault()
+    event.currentTarget.blur()
+  }
+
+  positionChanged(event) {
+    const input = event.currentTarget
+    const item = input.closest('[data-sortable-id]')
+
+    if (!item) return
+
+    const position = Number.parseInt(input.value, 10)
+
+    if (Number.isNaN(position) || position < 1) {
+      window.location.reload()
+      return
+    }
+
+    this.persist(item.dataset.sortableId, position)
+  }
+
+  positionFor(item) {
+    const input = item.querySelector('.b4um-sortable__position')
+
+    if (!input) return null
+
+    const position = Number.parseInt(input.value, 10)
+
+    return Number.isNaN(position) ? null : position
+  }
+
+  positionAfterDrop(item) {
+    const previousItem = item.previousElementSibling
+    const nextItem = item.nextElementSibling
+
+    if (previousItem?.matches('[data-sortable-id]')) {
+      const previousPosition = this.positionFor(previousItem)
+
+      if (previousPosition) {
+        if (this.draggedFromPosition && this.draggedFromPosition < previousPosition) {
+          return previousPosition
+        }
+
+        return previousPosition + 1
+      }
+    }
+
+    if (nextItem?.matches('[data-sortable-id]')) {
+      const nextPosition = this.positionFor(nextItem)
+
+      if (nextPosition) {
+        if (this.draggedFromPosition && this.draggedFromPosition > nextPosition) {
+          return nextPosition
+        }
+
+        return Math.max(1, nextPosition - 1)
+      }
+    }
+
+    return this.draggedFromPosition
+  }
+
+  async persist(id, position) {
+    if (!this.hasUpdateUrlValue || !this.updateUrlValue) return
+
+    try {
+      const response = await fetch(this.updateUrlValue, {
+        method: 'PATCH',
+        headers: {
+          'Content-Type': 'application/json',
+          Accept: 'application/json',
+          'X-CSRF-Token': this.csrfToken()
+        },
+        body: JSON.stringify({
+          id,
+          position
+        })
+      })
+
+      if (!response.ok) {
+        throw new Error(`Sortable update failed: ${response.status}`)
+      }
+
+      window.location.reload()
+    } catch (error) {
+      console.error(error)
+      window.location.reload()
+    }
+  }
+
+  csrfToken() {
+    return document.querySelector('meta[name="csrf-token"]')?.content || ''
+  }
+}

metadata

@@ -1,13 +1,13 @@
 --- !ruby/object:Gem::Specification
 name: b4um_generators
 version: !ruby/object:Gem::Version
-  version: 0.2.16
+  version: 0.3.0
 platform: ruby
 authors:
 - Alexander Baum
 bindir: exe
 cert_chain: []
-date: 2026-10-09 00:00:00.000000000 Z
+date: 1980-01-02 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: railties
@@ -115,6 +115,7 @@ files:
 - lib/generators/b4um/install/templates/b4um/pagination.css
 - lib/generators/b4um/install/templates/b4um/resources.css
 - lib/generators/b4um/install/templates/b4um/search.css
+- lib/generators/b4um/install/templates/b4um/sortable.css
 - lib/generators/b4um/install/templates/b4um/tables.css
 - lib/generators/b4um/install/templates/b4um/theme-switcher.css
 - lib/generators/b4um/install/templates/b4um/theme.css
@@ -145,6 +146,11 @@ files:
 - lib/generators/b4um/search/search_generator.rb
 - lib/generators/b4um/search/templates/search.rb
 - lib/generators/b4um/search/templates/search_form.html.erb.tt
+- lib/generators/b4um/sortable/sortable_generator.rb
+- lib/generators/b4um/sortable/templates/_sortable.html.erb.tt
+- lib/generators/b4um/sortable/templates/add_position_migration.rb.tt
+- lib/generators/b4um/sortable/templates/sort.html.erb.tt
+- lib/generators/b4um/sortable/templates/sortable_controller.js
 - lib/generators/b4um/table/table_generator.rb
 - lib/generators/b4um/table/templates/_table.html.erb.tt
 - lib/generators/b4um/trix/templates/b4um_rich_text_helper.rb
@@ -171,7 +177,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.6.2
+rubygems_version: 3.6.9
 specification_version: 4
 summary: Rails generators for b4um applications
 test_files: []