panda-cms 0.8.2 → 0.10.2

data/app/javascript/panda/cms/controllers/code_editor_controller.js

@@ -0,0 +1,95 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["previewTab", "codeTab", "previewView", "codeView", "codeInput", "saveMessage"]
+  static values = {
+    pageId: String,
+    blockContentId: String
+  }
+
+  connect() {
+    // Preview is active by default
+  }
+
+  showPreview(event) {
+    event.preventDefault()
+
+    // Toggle tabs
+    this.previewTabTarget.classList.remove("border-transparent", "text-gray-500", "hover:border-gray-300", "hover:text-gray-700")
+    this.previewTabTarget.classList.add("border-primary", "text-primary")
+
+    this.codeTabTarget.classList.remove("border-primary", "text-primary")
+    this.codeTabTarget.classList.add("border-transparent", "text-gray-500", "hover:border-gray-300", "hover:text-gray-700")
+
+    // Toggle views
+    this.previewViewTarget.classList.remove("hidden")
+    this.codeViewTarget.classList.add("hidden")
+  }
+
+  showCode(event) {
+    event.preventDefault()
+
+    // Toggle tabs
+    this.codeTabTarget.classList.remove("border-transparent", "text-gray-500", "hover:border-gray-300", "hover:text-gray-700")
+    this.codeTabTarget.classList.add("border-primary", "text-primary")
+
+    this.previewTabTarget.classList.remove("border-primary", "text-primary")
+    this.previewTabTarget.classList.add("border-transparent", "text-gray-500", "hover:border-gray-300", "hover:text-gray-700")
+
+    // Toggle views
+    this.codeViewTarget.classList.remove("hidden")
+    this.previewViewTarget.classList.add("hidden")
+  }
+
+  async saveCode(event) {
+    event.preventDefault()
+
+    const blockContentId = this.codeInputTarget.dataset.codeEditorBlockContentIdValue
+    const code = this.codeInputTarget.value
+    const pageId = this.pageIdValue
+
+    try {
+      const response = await fetch(`/admin/cms/pages/${pageId}/block_contents/${blockContentId}`, {
+        method: 'PATCH',
+        headers: {
+          'Content-Type': 'application/json',
+          'X-CSRF-Token': document.querySelector('meta[name="csrf-token"]').content
+        },
+        body: JSON.stringify({
+          content: code
+        })
+      })
+
+      if (response.ok) {
+        this.showSaveMessage('Code saved successfully!', 'success')
+
+        // Reload the preview iframe
+        const iframe = document.getElementById('editablePageFrame')
+        if (iframe) {
+          iframe.src = iframe.src
+        }
+      } else {
+        this.showSaveMessage('Error saving code', 'error')
+      }
+    } catch (error) {
+      console.error('Error saving code:', error)
+      this.showSaveMessage('Error saving code', 'error')
+    }
+  }
+
+  showSaveMessage(message, type) {
+    const messageEl = this.saveMessageTarget
+    messageEl.textContent = message
+    messageEl.classList.remove('hidden')
+
+    if (type === 'success') {
+      messageEl.className = 'mt-2 p-3 rounded-md bg-green-50 text-green-800 dark:bg-green-900/20 dark:text-green-400'
+    } else {
+      messageEl.className = 'mt-2 p-3 rounded-md bg-red-50 text-red-800 dark:bg-red-900/20 dark:text-red-400'
+    }
+
+    setTimeout(() => {
+      messageEl.classList.add('hidden')
+    }, 3000)
+  }
+}

data/app/javascript/panda/cms/controllers/editor_iframe_controller.js

@@ -8,7 +8,8 @@ export default class extends Controller {
   static values = {
     pageId: Number,
     adminPath: String,
-    autosave: Boolean
+    autosave: Boolean,
+    assets: String
   }
 
   connect() {
@@ -65,6 +66,33 @@ export default class extends Controller {
       this.body = this.frameDocument.body
       this.head = this.frameDocument.head
 
+      // Inject CMS assets into the iframe head
+      if (this.hasAssetsValue && this.assetsValue) {
+        console.debug("[Panda CMS] Injecting assets into iframe", {
+          assetsLength: this.assetsValue.length,
+          assetsPreview: this.assetsValue.substring(0, 200)
+        })
+        const assetsHTML = this.assetsValue
+        const tempDiv = document.createElement('div')
+        tempDiv.innerHTML = assetsHTML
+
+        // Append each node to the iframe's head
+        Array.from(tempDiv.childNodes).forEach(node => {
+          if (node.nodeType === Node.ELEMENT_NODE || node.nodeType === Node.TEXT_NODE) {
+            const importedNode = this.frameDocument.importNode(node, true)
+            this.head.appendChild(importedNode)
+            console.debug("[Panda CMS] Injected node:", node.nodeName)
+          }
+        })
+
+        console.debug("[Panda CMS] Assets injected successfully - head element count:", this.head.children.length)
+      } else {
+        console.warn("[Panda CMS] No assets to inject", {
+          hasAssetsValue: this.hasAssetsValue,
+          assetsValue: this.assetsValue
+        })
+      }
+
       // Ensure iframe content is properly positioned but doesn't block UI
       this.body.style.position = "relative"
       this.body.style.zIndex = "1"
@@ -545,11 +573,10 @@ export default class extends Controller {
   }
 
   setupSlideoverHandling() {
-    // Watch for slideover toggle
-    const slideoverToggle = document.getElementById('slideover-toggle')
+    // Watch for slideover visibility changes
     const slideover = document.getElementById('slideover')
 
-    if (slideoverToggle && slideover) {
+    if (slideover) {
       const observer = new MutationObserver((mutations) => {
         mutations.forEach((mutation) => {
           if (mutation.attributeName === 'class') {

data/app/javascript/panda/cms/controllers/file_gallery_controller.js

@@ -0,0 +1,128 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["slideoverContent"]
+
+  selectFile(event) {
+    const button = event.currentTarget
+    const fileData = {
+      id: button.dataset.fileId,
+      url: button.dataset.fileUrl,
+      name: button.dataset.fileName,
+      size: button.dataset.fileSize,
+      type: button.dataset.fileType,
+      created: button.dataset.fileCreated
+    }
+
+    // Update slideover content
+    this.updateSlideover(fileData)
+
+    // Update selected state
+    this.updateSelectedState(button)
+  }
+
+  updateSlideover(fileData) {
+    if (!this.hasSlideoverContentTarget) return
+
+    // Build the slideover content HTML
+    const html = this.buildSlideoverHTML(fileData)
+    this.slideoverContentTarget.innerHTML = html
+
+    // Show the slideover if it's hidden
+    const slideover = document.getElementById("slideover")
+    if (slideover && slideover.classList.contains("hidden")) {
+      slideover.classList.remove("hidden")
+    }
+
+    // Trigger the toggle controller to show the slideover
+    const toggleController = this.application.getControllerForElementAndIdentifier(
+      document.getElementById("panda-inner-container"),
+      "toggle"
+    )
+    if (toggleController) {
+      toggleController.show()
+    }
+  }
+
+  updateSelectedState(selectedButton) {
+    // Remove selected state from all file items
+    const allFileItems = this.element.querySelectorAll('[data-action*="file-gallery#selectFile"]')
+    allFileItems.forEach(button => {
+      const container = button.closest('.relative').querySelector('.group')
+      if (container) {
+        container.classList.remove('outline', 'outline-2', 'outline-offset-2', 'outline-panda-dark', 'dark:outline-panda-light')
+        container.classList.add('focus-within:outline-2', 'focus-within:outline-offset-2', 'focus-within:outline-indigo-600', 'dark:focus-within:outline-indigo-500')
+      }
+    })
+
+    // Add selected state to clicked item
+    const container = selectedButton.closest('.relative').querySelector('.group')
+    if (container) {
+      container.classList.add('outline', 'outline-2', 'outline-offset-2', 'outline-panda-dark', 'dark:outline-panda-light')
+      container.classList.remove('focus-within:outline-2', 'focus-within:outline-offset-2', 'focus-within:outline-indigo-600', 'dark:focus-within:outline-indigo-500')
+    }
+  }
+
+  buildSlideoverHTML(fileData) {
+    const isImage = fileData.type && fileData.type.startsWith('image/')
+    const humanSize = this.humanFileSize(parseInt(fileData.size))
+    const createdDate = new Date(fileData.created).toLocaleDateString('en-US', {
+      year: 'numeric',
+      month: 'long',
+      day: 'numeric'
+    })
+
+    return `
+      <div>
+        <div class="block overflow-hidden w-full rounded-lg aspect-h-7 aspect-w-10">
+          ${isImage ?
+            `<img src="${fileData.url}" alt="${fileData.name}" class="object-cover">` :
+            `<div class="flex items-center justify-center h-full bg-gray-100">
+              <div class="text-center">
+                <svg class="mx-auto h-12 w-12 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z" />
+                </svg>
+                <p class="mt-1 text-xs text-gray-500 uppercase">${fileData.type ? fileData.type.split('/')[1] : 'file'}</p>
+              </div>
+            </div>`
+          }
+        </div>
+        <div class="flex justify-between items-start mt-4">
+          <div>
+            <h2 class="text-lg font-medium text-gray-900">
+              <span class="sr-only">Details for </span>${fileData.name}
+            </h2>
+            <p class="text-sm font-medium text-gray-500">${humanSize}</p>
+          </div>
+        </div>
+      </div>
+
+      <div>
+        <h3 class="font-medium text-gray-900">Information</h3>
+        <dl class="mt-2 border-t border-b border-gray-200 divide-y divide-gray-200">
+          <div class="flex justify-between py-3 text-sm font-medium">
+            <dt class="text-gray-500">Created</dt>
+            <dd class="text-gray-900 whitespace-nowrap">${createdDate}</dd>
+          </div>
+          <div class="flex justify-between py-3 text-sm font-medium">
+            <dt class="text-gray-500">Content Type</dt>
+            <dd class="text-gray-900 whitespace-nowrap">${fileData.type || 'Unknown'}</dd>
+          </div>
+        </dl>
+      </div>
+
+      <div class="flex gap-x-3">
+        <a href="${fileData.url}?disposition=attachment" class="flex-1 py-2 px-3 text-sm font-semibold text-white bg-black rounded-md shadow-sm hover:bg-gray-800 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-panda-dark text-center">Download</a>
+        <button type="button" class="flex-1 py-2 px-3 text-sm font-semibold text-gray-900 bg-white rounded-md ring-1 ring-inset shadow-sm hover:bg-gray-50 ring-mid">Delete</button>
+      </div>
+    `
+  }
+
+  humanFileSize(bytes) {
+    if (bytes === 0) return '0 Bytes'
+    const k = 1024
+    const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB']
+    const i = Math.floor(Math.log(bytes) / Math.log(k))
+    return Math.round((bytes / Math.pow(k, i)) * 100) / 100 + ' ' + sizes[i]
+  }
+}

data/app/javascript/panda/cms/controllers/file_upload_controller.js

@@ -0,0 +1,165 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["input", "preview", "dropzone", "fileInfo", "removeButton"]
+
+  connect() {
+    // Setup drag and drop handlers
+    if (this.hasDropzoneTarget) {
+      this.setupDragAndDrop()
+    }
+  }
+
+  setupDragAndDrop() {
+    const dropzone = this.dropzoneTarget
+
+    // Prevent default drag behaviors
+    ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
+      dropzone.addEventListener(eventName, this.preventDefaults.bind(this), false)
+      document.body.addEventListener(eventName, this.preventDefaults.bind(this), false)
+    })
+
+    // Highlight drop zone when item is dragged over it
+    ['dragenter', 'dragover'].forEach(eventName => {
+      dropzone.addEventListener(eventName, this.highlight.bind(this), false)
+    })
+
+    ;['dragleave', 'drop'].forEach(eventName => {
+      dropzone.addEventListener(eventName, this.unhighlight.bind(this), false)
+    })
+
+    // Handle dropped files
+    dropzone.addEventListener('drop', this.handleDrop.bind(this), false)
+  }
+
+  preventDefaults(e) {
+    e.preventDefault()
+    e.stopPropagation()
+  }
+
+  highlight(e) {
+    this.dropzoneTarget.classList.add('border-indigo-600', 'bg-indigo-50', 'dark:bg-indigo-950', 'dark:border-indigo-400')
+  }
+
+  unhighlight(e) {
+    this.dropzoneTarget.classList.remove('border-indigo-600', 'bg-indigo-50', 'dark:bg-indigo-950', 'dark:border-indigo-400')
+  }
+
+  handleDrop(e) {
+    const dt = e.dataTransfer
+    const files = dt.files
+
+    if (files.length > 0) {
+      // Update the file input with the dropped file
+      this.inputTarget.files = files
+      this.handleFileSelect()
+    }
+  }
+
+  // Triggered when user selects file via input or drag-drop
+  handleFileSelect() {
+    const file = this.inputTarget.files[0]
+
+    if (!file) {
+      return
+    }
+
+    // Show file preview if it's an image
+    if (file.type.startsWith('image/')) {
+      this.showImagePreview(file)
+    } else {
+      this.showFileInfo(file)
+    }
+  }
+
+  showImagePreview(file) {
+    const reader = new FileReader()
+
+    reader.onload = (e) => {
+      if (this.hasPreviewTarget) {
+        // Create or update preview image
+        const existingImage = this.previewTarget.querySelector('img')
+        if (existingImage) {
+          existingImage.src = e.target.result
+        } else {
+          const img = document.createElement('img')
+          img.src = e.target.result
+          img.className = 'max-w-xs rounded border border-gray-300 dark:border-gray-600'
+          this.previewTarget.innerHTML = ''
+          this.previewTarget.appendChild(img)
+        }
+        this.previewTarget.classList.remove('hidden')
+      }
+
+      // Show file info with remove button
+      this.showFileInfo(file, true)
+    }
+
+    reader.readAsDataURL(file)
+  }
+
+  showFileInfo(file, withPreview = false) {
+    if (!this.hasFileInfoTarget) {
+      return
+    }
+
+    const fileSize = this.humanFileSize(file.size)
+    const fileName = file.name
+
+    this.fileInfoTarget.innerHTML = `
+      <div class="flex items-center justify-between p-3 bg-gray-50 dark:bg-gray-800 rounded-md">
+        <div class="flex items-center gap-x-3 flex-1 min-w-0">
+          <svg class="size-8 text-gray-400 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z" />
+          </svg>
+          <div class="flex-1 min-w-0">
+            <p class="text-sm font-medium text-gray-900 dark:text-white truncate">${fileName}</p>
+            <p class="text-xs text-gray-500 dark:text-gray-400">${fileSize}</p>
+          </div>
+        </div>
+        <button type="button"
+                data-action="click->file-upload#removeFile"
+                class="flex-shrink-0 ml-3 text-red-600 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300">
+          <svg class="size-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+          </svg>
+        </button>
+      </div>
+    `
+    this.fileInfoTarget.classList.remove('hidden')
+
+    // Hide the dropzone upload area
+    if (this.hasDropzoneTarget) {
+      this.dropzoneTarget.classList.add('hidden')
+    }
+  }
+
+  removeFile() {
+    // Clear the file input
+    this.inputTarget.value = ''
+
+    // Hide preview and file info
+    if (this.hasPreviewTarget) {
+      this.previewTarget.classList.add('hidden')
+      this.previewTarget.innerHTML = ''
+    }
+
+    if (this.hasFileInfoTarget) {
+      this.fileInfoTarget.classList.add('hidden')
+      this.fileInfoTarget.innerHTML = ''
+    }
+
+    // Show the dropzone again
+    if (this.hasDropzoneTarget) {
+      this.dropzoneTarget.classList.remove('hidden')
+    }
+  }
+
+  humanFileSize(bytes) {
+    if (bytes === 0) return '0 Bytes'
+    const k = 1024
+    const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB']
+    const i = Math.floor(Math.log(bytes) / Math.log(k))
+    return Math.round((bytes / Math.pow(k, i)) * 100) / 100 + ' ' + sizes[i]
+  }
+}

data/app/javascript/panda/cms/controllers/index.js

@@ -1,6 +1,6 @@
 console.debug("[Panda CMS] Importing Panda CMS Stimulus Controller...")
 
-import { application } from "@hotwired/stimulus-loading"
+import { application } from "../stimulus-loading.js"
 
 console.debug("[Panda CMS] Using shared Stimulus application...")
 
@@ -8,24 +8,65 @@ const pandaCmsApplication = application
 
 console.debug("[Panda CMS] Registering controllers...")
 
-// Use the same paths as defined in _importmap.html.erb
-import DashboardController from "panda/cms/controllers/dashboard_controller"
+// Use relative imports with .js extensions for proper module resolution
+import DashboardController from "./dashboard_controller.js"
 pandaCmsApplication.register("dashboard", DashboardController)
 
-import EditorFormController from "panda/cms/controllers/editor_form_controller"
-pandaCmsApplication.register("editor-form", EditorFormController)
-
-import SlugController from "panda/cms/controllers/slug_controller"
+import SlugController from "./slug_controller.js"
 pandaCmsApplication.register("slug", SlugController)
 
-import EditorIframeController from "panda/cms/controllers/editor_iframe_controller"
-pandaCmsApplication.register("editor-iframe", EditorIframeController)
+import TreeController from "./tree_controller.js"
+pandaCmsApplication.register("tree", TreeController)
+
+import FileGalleryController from "./file_gallery_controller.js"
+pandaCmsApplication.register("file-gallery", FileGalleryController)
+
+import FileUploadController from "./file_upload_controller.js"
+pandaCmsApplication.register("file-upload", FileUploadController)
+
+import PageFormController from "./page_form_controller.js"
+pandaCmsApplication.register("page-form", PageFormController)
+
+import NestedFormController from "./nested_form_controller.js"
+pandaCmsApplication.register("nested-form", NestedFormController)
+
+import MenuFormController from "./menu_form_controller.js"
+pandaCmsApplication.register("menu-form", MenuFormController)
+
+// Lazy load editor controllers only when needed
+// These will only be loaded when the data-controller attribute is present in the DOM
+class EditorFormLazyController {
+  connect() {
+    // Only import the editor controller when it's actually needed in the DOM
+    import("./editor_form_controller.js").then(module => {
+      const Controller = module.default
+      // Replace this lazy controller with the real one
+      pandaCmsApplication.register("editor-form", Controller)
+    }).catch(err => {
+      console.error("[Panda CMS] Failed to load editor-form controller:", err)
+    })
+  }
+}
+
+class EditorIframeLazyController {
+  connect() {
+    // Only import the editor controller when it's actually needed in the DOM
+    import("./editor_iframe_controller.js").then(module => {
+      const Controller = module.default
+      // Replace this lazy controller with the real one
+      pandaCmsApplication.register("editor-iframe", Controller)
+    }).catch(err => {
+      console.error("[Panda CMS] Failed to load editor-iframe controller:", err)
+    })
+  }
+}
 
-// Import and register TailwindCSS Stimulus Components needed by CMS
-import { Toggle } from "tailwindcss-stimulus-components"
-pandaCmsApplication.register("toggle", Toggle)
+// Register the lazy-loading proxy controllers
+pandaCmsApplication.register("editor-form", EditorFormLazyController)
+pandaCmsApplication.register("editor-iframe", EditorIframeLazyController)
 
-console.debug("[Panda CMS] Registered Toggle controller for slideover functionality")
+// Note: Toggle, Slideover, and other TailwindCSS Stimulus Components
+// are now registered by Panda Core since the admin layout lives there
 
 console.debug("[Panda CMS] Components registered...")
 

data/app/javascript/panda/cms/controllers/inline_code_editor_controller.js

@@ -0,0 +1,96 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["previewTab", "codeTab", "previewView", "codeView", "codeInput", "saveMessage"]
+  static values = {
+    pageId: String,
+    blockContentId: String
+  }
+
+  connect() {
+    // Preview is active by default
+  }
+
+  showPreview(event) {
+    event.preventDefault()
+
+    // Toggle tabs
+    this.previewTabTarget.classList.remove("border-transparent", "text-gray-500", "hover:border-gray-300", "hover:text-gray-700")
+    this.previewTabTarget.classList.add("border-primary", "text-primary")
+
+    this.codeTabTarget.classList.remove("border-primary", "text-primary")
+    this.codeTabTarget.classList.add("border-transparent", "text-gray-500", "hover:border-gray-300", "hover:text-gray-700")
+
+    // Toggle views
+    this.previewViewTarget.classList.remove("hidden")
+    this.codeViewTarget.classList.add("hidden")
+  }
+
+  showCode(event) {
+    event.preventDefault()
+
+    // Toggle tabs
+    this.codeTabTarget.classList.remove("border-transparent", "text-gray-500", "hover:border-gray-300", "hover:text-gray-700")
+    this.codeTabTarget.classList.add("border-primary", "text-primary")
+
+    this.previewTabTarget.classList.remove("border-primary", "text-primary")
+    this.previewTabTarget.classList.add("border-transparent", "text-gray-500", "hover:border-gray-300", "hover:text-gray-700")
+
+    // Toggle views
+    this.codeViewTarget.classList.remove("hidden")
+    this.previewViewTarget.classList.add("hidden")
+  }
+
+  async saveCode(event) {
+    event.preventDefault()
+
+    const code = this.codeInputTarget.value
+    const pageId = this.pageIdValue
+    const blockContentId = this.blockContentIdValue
+
+    try {
+      const response = await fetch(`/admin/cms/pages/${pageId}/block_contents/${blockContentId}`, {
+        method: 'PATCH',
+        headers: {
+          'Content-Type': 'application/json',
+          'X-CSRF-Token': document.querySelector('meta[name="csrf-token"]').content
+        },
+        body: JSON.stringify({
+          content: code
+        })
+      })
+
+      if (response.ok) {
+        this.showSaveMessage('Code saved successfully!', 'success')
+
+        // Reload the page to show updated preview
+        setTimeout(() => {
+          window.location.reload()
+        }, 1000)
+      } else {
+        this.showSaveMessage('Error saving code', 'error')
+      }
+    } catch (error) {
+      console.error('Error saving code:', error)
+      this.showSaveMessage('Error saving code', 'error')
+    }
+  }
+
+  showSaveMessage(message, type) {
+    const messageEl = this.saveMessageTarget
+    messageEl.textContent = message
+    messageEl.classList.remove('hidden')
+
+    if (type === 'success') {
+      messageEl.className = 'mt-2 p-3 rounded-md bg-green-50 text-green-800 border border-green-200'
+    } else {
+      messageEl.className = 'mt-2 p-3 rounded-md bg-red-50 text-red-800 border border-red-200'
+    }
+
+    setTimeout(() => {
+      if (type !== 'success') { // Keep success message visible until reload
+        messageEl.classList.add('hidden')
+      }
+    }, 3000)
+  }
+}

data/app/javascript/panda/cms/controllers/menu_form_controller.js

@@ -0,0 +1,53 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["startPageField", "menuItemsSection"]
+
+  connect() {
+    console.log("Menu form controller connected")
+    // Initialize visibility based on current kind selection
+    this.updateFieldsVisibility()
+  }
+
+  kindChanged(event) {
+    console.log("[menu-form] kindChanged called", event)
+    this.updateFieldsVisibility()
+  }
+
+  updateFieldsVisibility() {
+    console.log("[menu-form] updateFieldsVisibility called")
+    const kindSelect = this.element.querySelector('select[name*="[kind]"]')
+    console.log("[menu-form] kindSelect found:", !!kindSelect)
+
+    if (!kindSelect) {
+      console.error("[menu-form] Could not find kind select!")
+      return
+    }
+
+    const selectedKind = kindSelect.value
+    console.log("[menu-form] selectedKind:", selectedKind)
+
+    if (selectedKind === "auto") {
+      // Show start page field, hide menu items section
+      console.log("[menu-form] AUTO - Showing start page field")
+      if (this.hasStartPageFieldTarget) {
+        console.log("[menu-form] Removing hidden from start page field")
+        this.startPageFieldTarget.classList.remove("hidden")
+      } else {
+        console.error("[menu-form] Start page field target not found!")
+      }
+      if (this.hasMenuItemsSectionTarget) {
+        this.menuItemsSectionTarget.classList.add("hidden")
+      }
+    } else {
+      // Hide start page field, show menu items section
+      console.log("[menu-form] STATIC - Hiding start page field")
+      if (this.hasStartPageFieldTarget) {
+        this.startPageFieldTarget.classList.add("hidden")
+      }
+      if (this.hasMenuItemsSectionTarget) {
+        this.menuItemsSectionTarget.classList.remove("hidden")
+      }
+    }
+  }
+}