panda-cms 0.8.0 → 0.10.0

data/app/controllers/panda/cms/admin/pages_controller.rb

@@ -25,6 +25,11 @@ module Panda
         # Loads the page editor
         # @type GET
         def edit
+          # Add all ancestor pages to breadcrumbs (excluding homepage at depth 0)
+          page.ancestors.select { |anc| anc.depth > 0 }.each do |ancestor|
+            add_breadcrumb ancestor.title, edit_admin_cms_page_path(ancestor)
+          end
+
           add_breadcrumb page.title, edit_admin_cms_page_path(page)
 
           render :edit, locals: {page: page, template: page.template}
@@ -94,7 +99,7 @@ module Panda
         # @type private
         # @return ActionController::StrongParameters
         def page_params
-          params.require(:page).permit(:title, :path, :panda_cms_template_id, :parent_id, :status)
+          params.require(:page).permit(:title, :path, :panda_cms_template_id, :parent_id, :status, :page_type)
         end
       end
     end

data/app/controllers/panda/cms/pages_controller.rb

@@ -16,9 +16,9 @@ module Panda
 
       def show
         page = if @overrides&.dig(:page_path_match)
-          Panda::CMS::Page.find_by(path: @overrides[:page_path_match])
+          Panda::CMS::Page.includes(:template).find_by(path: @overrides[:page_path_match])
         else
-          Panda::CMS::Page.find_by(path: "/#{params[:path]}")
+          Panda::CMS::Page.includes(:template).find_by(path: "/#{params[:path]}")
         end
 
         Panda::CMS::Current.page = page || Panda::CMS::Page.find_by(path: "/404")

data/app/helpers/panda/cms/application_helper.rb

@@ -33,7 +33,7 @@ module Panda
         if match == :starts_with
           return request.path.starts_with?(path)
         elsif match == :exact
-          return (request.path == path)
+          return request.path == path
         end
 
         false
@@ -44,6 +44,20 @@ module Panda
         link_to(name, options, html_options, &)
       end
 
+      def panda_cms_collection(slug, include_unpublished: false)
+        Panda::CMS::Features.require!(:collections)
+        Panda::CMS::Collections.fetch(slug, include_unpublished: include_unpublished)
+      end
+
+      def panda_cms_collection_items(slug, include_unpublished: false)
+        Panda::CMS::Features.require!(:collections)
+        Panda::CMS::Collections.items(slug, include_unpublished: include_unpublished)
+      end
+
+      def panda_cms_feature_enabled?(name)
+        Panda::CMS::Features.enabled?(name)
+      end
+
       def panda_cms_form_with(**options, &)
         options[:builder] = Panda::Core::FormBuilder
         options[:class] = ["block visible p-6 bg-mid/5 rounded-lg border-mid border", options[:class]].compact.join(" ")

data/app/helpers/panda/cms/asset_helper.rb

@@ -53,9 +53,20 @@ module Panda
           javascript_include_tag(js_url, **defer_option)
         # Standalone bundle - don't use type: "module"
         else
-          # Importmap asset - use type: "module"
-          defer_option = (ENV["GITHUB_ACTIONS"] == "true") ? {} : {defer: true}
-          javascript_include_tag(js_url, type: "module", **defer_option)
+          # Development mode - Load JavaScript with import map
+          # Files are served by Rack::Static middleware from engine's app/javascript
+          importmap_html = <<~HTML
+            <script type="importmap">
+              {
+                "imports": {
+                  "@hotwired/stimulus": "/panda/core/vendor/@hotwired--stimulus.js",
+                  "@hotwired/turbo": "/panda/core/vendor/@hotwired--turbo.js"
+                }
+              }
+            </script>
+            <script type="module" src="/panda/cms/application_panda_cms.js"></script>
+          HTML
+          importmap_html.html_safe
         end
       end
 

data/app/javascript/panda/cms/application_panda_cms.js

@@ -1,6 +1,6 @@
 import "@hotwired/turbo"
 console.debug("[Panda CMS] Controllers loading...");
-import "controllers"
+import "./controllers/index.js"
 console.debug("[Panda CMS] Controllers loaded...");
 
 // Editor resources are now handled by panda-editor gem

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/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/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,59 @@ 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 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,40 @@
+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) {
+    this.updateFieldsVisibility()
+  }
+
+  updateFieldsVisibility() {
+    const kindSelect = this.element.querySelector('select[name*="[kind]"]')
+    if (!kindSelect) return
+
+    const selectedKind = kindSelect.value
+
+    if (selectedKind === "auto") {
+      // Show start page field, hide menu items section
+      if (this.hasStartPageFieldTarget) {
+        this.startPageFieldTarget.classList.remove("hidden")
+      }
+      if (this.hasMenuItemsSectionTarget) {
+        this.menuItemsSectionTarget.classList.add("hidden")
+      }
+    } else {
+      // Hide start page field, show menu items section
+      if (this.hasStartPageFieldTarget) {
+        this.startPageFieldTarget.classList.add("hidden")
+      }
+      if (this.hasMenuItemsSectionTarget) {
+        this.menuItemsSectionTarget.classList.remove("hidden")
+      }
+    }
+  }
+}

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

@@ -0,0 +1,35 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["template", "target"]
+  static values = {
+    wrapperSelector: String
+  }
+
+  connect() {
+    console.log("Nested form controller connected")
+  }
+
+  add(event) {
+    event.preventDefault()
+
+    const content = this.templateTarget.innerHTML.replace(/NEW_RECORD/g, new Date().getTime())
+    this.targetTarget.insertAdjacentHTML('beforebegin', content)
+  }
+
+  remove(event) {
+    event.preventDefault()
+
+    const wrapper = event.target.closest(this.wrapperSelectorValue)
+
+    if (wrapper.dataset.newRecord === "true") {
+      wrapper.remove()
+    } else {
+      wrapper.style.display = 'none'
+      const destroyInput = wrapper.querySelector("input[name*='_destroy']")
+      if (destroyInput) {
+        destroyInput.value = '1'
+      }
+    }
+  }
+}