alchemy_cms 7.2.7 → 7.3.0

data/app/components/alchemy/admin/resource/header.rb

@@ -0,0 +1,46 @@
+# frozen_string_literal: true
+
+module Alchemy
+  module Admin
+    module Resource
+      # Renders a table header tag
+      # the component is an internal component of the Table component
+      #
+      # @param [String] :name
+      #   name of the sortable link or the text if not additional text is given
+      # @param [String] :query
+      #   Ransack query
+      # @param [String] :css_classes ("")
+      #   css class of the th - tag
+      # @param [String, nil] :text (nil)
+      #  optional text of the header
+      # @param [Symbol] :type (:string)
+      #  type of the column will be used to inverse the sorting order for data/time - objects
+      # @param [Boolean] :sortable (false)
+      #  enable a sortable link
+      #
+      class Header < ViewComponent::Base
+        delegate :sort_link, to: :helpers
+
+        erb_template <<~ERB
+          <th class="<%= @css_classes %>">
+            <% if @sortable %>
+              <%= sort_link @query, @name, @text, default_order: @default_order %>
+            <% else %>
+              <%= @text %>
+            <% end %>
+          </th>
+        ERB
+
+        def initialize(name, query, css_classes: "", text: nil, type: :string, sortable: false)
+          @name = name
+          @query = query
+          @text = text || name
+          @css_classes = css_classes
+          @default_order = /date|time/.match?(type.to_s) ? "desc" : "asc"
+          @sortable = sortable
+        end
+      end
+    end
+  end
+end

data/app/components/alchemy/admin/resource/table.rb

@@ -0,0 +1,153 @@
+# frozen_string_literal: true
+
+module Alchemy
+  module Admin
+    module Resource
+      # Renders a resource table with columns and buttons
+      #
+      # == Example
+      #
+      #   <%= render Alchemy::Admin::Resource::Table.new(@languages, query: @query) do |table| %>
+      #     <% table.icon_column "translate-2", style: false %>
+      #     <% table.column :name, sortable: true %>
+      #     <% table.column :language_code, sortable: true %>
+      #     <% table.column :page_layout do |language| %>
+      #       <%= Alchemy::Page.human_layout_name(language.page_layout) %>
+      #     <% end %>
+      #     <% table.delete_button %>
+      #     <% table.edit_button %>
+      #   <% end %>
+      #
+      # @param [ActiveRecord::Relation] :collection
+      #   a collection of Alchemy::Resource objects that are shown in the table
+      # @param [Ransack::Search] :query
+      #   The ransack search object to allow sortable table columns
+      # @param [String] :nothing_found_label (Alchemy.t("Nothing found"))
+      #   The message that will be shown, if the collection is empty
+      # @param [Hash] :search_filter_params ({})
+      #   An additional hash that will attached to the delete and edit button to redirect back to
+      #   the same page of the table
+      # @param [String] :icon (nil)
+      #   a default icon, if the table is auto generated
+      class Table < ViewComponent::Base
+        delegate :render_attribute,
+          :resource_path,
+          :render_icon,
+          :edit_resource_path,
+          :resource_handler,
+          :resource_window_size,
+          to: :helpers
+
+        attr_reader :collection,
+          :nothing_found_label,
+          :search_filter_params
+
+        renders_many :headers, Header
+
+        renders_many :cells, ->(css_classes, &block) do
+          Cell.new(css_classes, &block)
+        end
+
+        renders_many :actions, ->(name, tooltip = nil, &block) do
+          Action.new(name, tooltip, &block)
+        end
+
+        erb_template <<~ERB
+          <% if collection.any? %>
+            <table class="list">
+              <thead>
+                <tr>
+                  <% headers.each do |header| %>
+                    <%= header %>
+                  <% end %>
+                  <% if actions? %>
+                    <th class="tools"></th>
+                  <% end %>
+                </tr>
+              </thead>
+              <tbody>
+                <% collection.each do |resource| %>
+                  <tr class="<%= cycle('even', 'odd') %>">
+                    <% cells.each do |cell| %>
+                       <%= render cell.with_resource(resource) %>
+                    <% end %>
+                    <% if actions? %>
+                      <td class="tools">
+                        <% actions.each do |action| %>
+                          <%= render action.with_resource(resource) %>
+                        <% end %>
+                      </td>
+                    <% end %>
+                  </tr>
+                <% end %>
+              </tbody>
+            </table>
+          <% else %>
+            <alchemy-message type="info">
+              <%= nothing_found_label %>
+            </alchemy-message>
+          <% end %>
+        ERB
+
+        def initialize(collection, query: nil, nothing_found_label: Alchemy.t("Nothing found"), search_filter_params: {}, icon: nil)
+          @collection = collection
+          @query = query
+          @nothing_found_label = nothing_found_label
+          @search_filter_params = search_filter_params
+          @icon = icon
+        end
+
+        def column(name, header: nil, sortable: false, type: nil, class_name: nil, &block)
+          header ||= resource_handler.model.human_attribute_name(name)
+          type ||= resource_handler.model.columns_hash[name.to_s]&.type
+          attribute = resource_handler.attributes.find { |item| item[:name] == name.to_s } || {name: name, type: type}
+          block ||= lambda { |item| render_attribute(item, attribute) }
+
+          css_classes = [name, type, class_name].compact.join(" ")
+          with_header(name, @query, css_classes: css_classes, text: header, type: type, sortable: sortable)
+          with_cell(css_classes, &block)
+        end
+
+        def icon_column(icon = nil, style: nil)
+          column(:icon, header: "") do |resource|
+            render_icon(icon || yield(resource), size: "xl", style: style)
+          end
+        end
+
+        def delete_button(tooltip: Alchemy.t("Delete"), confirm_message: Alchemy.t("Are you sure?"))
+          with_action(:destroy, tooltip) do |row|
+            helpers.delete_button(resource_path(row, search_filter_params), {message: confirm_message})
+          end
+        end
+
+        def edit_button(tooltip: Alchemy.t("Edit"), dialog_title: tooltip, dialog_size: resource_window_size)
+          with_action(:edit, tooltip) do |row|
+            helpers.link_to_dialog render_icon(:edit),
+              edit_resource_path(row, search_filter_params),
+              {
+                size: dialog_size,
+                title: dialog_title
+              },
+              class: "icon_button"
+          end
+        end
+
+        private
+
+        ##
+        # if no cells are available the resource_helper will be used, to generate the
+        # default attributes of the given resource
+        def before_render
+          unless cells?
+            icon_column(@icon) if @icon.present?
+            resource_handler.sorted_attributes.each do |attribute|
+              column(attribute[:name], sortable: true)
+            end
+            delete_button
+            edit_button
+          end
+        end
+      end
+    end
+  end
+end

data/app/components/alchemy/ingredients/datetime_view.rb

@@ -4,8 +4,8 @@ module Alchemy
       attr_reader :date_format
 
       # @param ingredient [Alchemy::Ingredient]
-      # @param date_format [String] The date format to use. Use either a strftime format string, a I18n format symbol or "rfc822".
-      def initialize(ingredient, date_format: nil, html_options: {})
+      # @param date_format [String] The date format to use. Use either a strftime format string, a I18n format symbol or "rfc822". Defaults to "time.formats.alchemy.default".
+      def initialize(ingredient, date_format: :"alchemy.default", html_options: {})
         super(ingredient)
         @date_format = settings_value(:date_format, value: date_format)
       end

data/app/controllers/alchemy/admin/base_controller.rb

@@ -100,7 +100,8 @@ module Alchemy
           flash[:notice] = Alchemy.t(flash_notice)
           do_redirect_to redirect_url
         else
-          render action: ((params[:action] == "update") ? "edit" : "new")
+          render action: ((params[:action] == "update") ? "edit" : "new"),
+            status: :unprocessable_entity
         end
       end
 

data/app/controllers/alchemy/admin/elements_controller.rb

@@ -69,9 +69,13 @@ module Alchemy
           render json: {
             warning: @warning,
             errorMessage: Alchemy.t(:ingredient_validations_headline),
-            ingredientsWithErrors: @element.ingredients_with_errors.map(&:id),
-            errors: @element.ingredient_error_messages
-          }
+            ingredientsWithErrors: @element.ingredients_with_errors.map do |ingredient|
+              {
+                id: ingredient.id,
+                errorMessage: ingredient.errors.messages[:value].to_sentence
+              }
+            end
+          }, status: :unprocessable_entity
         end
       end
 

data/app/controllers/alchemy/admin/legacy_page_urls_controller.rb

@@ -22,7 +22,7 @@ module Alchemy
         @message = message_for_resource_action
         render :update
       else
-        render :edit
+        render :edit, status: :unprocessable_entity
       end
     end
 

data/app/controllers/alchemy/admin/pages_controller.rb

@@ -135,7 +135,7 @@ module Alchemy
             @tree = serialized_page_tree
           end
         else
-          render :configure
+          render :configure, status: :unprocessable_entity
         end
       end
 

data/app/controllers/alchemy/admin/pictures_controller.rb

@@ -12,7 +12,7 @@ module Alchemy
       before_action :load_resource,
         only: [:show, :edit, :update, :url, :destroy]
 
-      before_action :set_size, only: [:index, :show, :edit_multiple]
+      before_action :set_size, only: [:index, :show, :edit_multiple, :update]
 
       authorize_resource class: Alchemy::Picture
 
@@ -79,7 +79,7 @@ module Alchemy
             type: "error"
           }
         end
-        render :update
+        render :update, status: (@message[:type] == "notice") ? :ok : :unprocessable_entity
       end
 
       def update_multiple

data/app/controllers/alchemy/admin/resources_controller.rb

@@ -138,7 +138,7 @@ module Alchemy
       end
 
       def eligible_resource_filter_values
-        resource_filters.map(&:values).flatten!.map!(&:to_s)
+        resource_filters.map(&:values).flatten
       end
 
       # Returns a translated +flash[:notice]+ for current controller action.
@@ -170,7 +170,7 @@ module Alchemy
       end
 
       def alchemy_module
-        @alchemy_module ||= module_definition_for(controller: params[:controller], action: "index")
+        @alchemy_module ||= module_definition_for(controller: controller_path, action: "index")
       end
 
       def load_resource

data/app/controllers/alchemy/base_controller.rb

@@ -82,6 +82,8 @@ module Alchemy
               locals: {message: flash[:warning], flash_type: "warning"}
           end
         end
+      elsif turbo_frame_request?
+        render "403", status: 403
       else
         redirect_to(alchemy.admin_dashboard_path)
       end

data/app/controllers/concerns/alchemy/admin/uploader_responses.rb

@@ -11,7 +11,7 @@ module Alchemy
           name: file.name)
 
         {
-          json: uploader_response(file: file, message: message),
+          json: {message: message},
           status: status
         }
       end
@@ -23,19 +23,10 @@ module Alchemy
           name: file.name)
 
         {
-          json: uploader_response(file: file, message: message),
+          json: {message: message},
           status: :unprocessable_entity
         }
       end
-
-      private
-
-      def uploader_response(file:, message:)
-        {
-          files: [file.to_jq_upload],
-          message: message
-        }
-      end
     end
   end
 end

data/app/decorators/alchemy/ingredient_editor.rb

@@ -153,6 +153,23 @@ module Alchemy
       end
     end
 
+    def validations
+      definition.fetch(:validate, [])
+    end
+
+    def format_validation
+      validations.select { _1.is_a?(Hash) }.find { _1[:format] }&.fetch(:format)
+    end
+
+    def length_validation
+      validations.select { _1.is_a?(Hash) }.find { _1[:length] }&.fetch(:length)
+    end
+
+    def presence_validation?
+      validations.include?("presence") ||
+        validations.any? { _1.is_a?(Hash) && _1[:presence] == true }
+    end
+
     private
 
     def form_field_counter

data/app/helpers/alchemy/admin/pages_helper.rb

@@ -5,18 +5,14 @@ module Alchemy
     module PagesHelper
       include Alchemy::Admin::BaseHelper
 
-      # Returns options tags for the screen sizes select in page edit view.
+      # Returns screen sizes for the preview size select in page edit view.
+      #
+      # You can configure the screen sizes in your +config/alchemy/config.yml+.
       #
       def preview_sizes_for_select
-        options_for_select([
-          "auto",
-          [Alchemy.t("240", scope: "preview_sizes"), 240],
-          [Alchemy.t("320", scope: "preview_sizes"), 320],
-          [Alchemy.t("480", scope: "preview_sizes"), 480],
-          [Alchemy.t("768", scope: "preview_sizes"), 768],
-          [Alchemy.t("1024", scope: "preview_sizes"), 1024],
-          [Alchemy.t("1280", scope: "preview_sizes"), 1280]
-        ])
+        Alchemy::Config.get(:page_preview_sizes).map do |size|
+          [Alchemy.t(size, scope: "preview_sizes"), size]
+        end
       end
 
       # Renders a label for page's page layout

data/app/helpers/alchemy/base_helper.rb

@@ -42,8 +42,8 @@ module Alchemy
     #     <p>Caution! This is a warning!</p>
     #   <% end %>
     #
-    def render_message(type = :info, msg = nil, &blk)
-      render Alchemy::Admin::Message.new(msg || capture(&blk), type: type)
+    def render_message(type = :info, msg = nil, &)
+      render Alchemy::Admin::Message.new(msg || capture(&), type: type)
     end
 
     # Checks if the given argument is a String or a Page object.

data/app/helpers/alchemy/elements_block_helper.rb

@@ -100,9 +100,21 @@ module Alchemy
     #   A lambda used for formatting the element's tags (see Alchemy::ElementsHelper::element_tags_attributes). Set to +false+ to not include tags in the wrapper element.
     #
     def element_view_for(element, options = {})
+      if options[:id].nil?
+        Alchemy::Deprecation.warn <<~WARN
+          Relying on an implicit DOM id in `element_view_for` is deprecated. Please provide an explicit `id` if you actually want to render an `id` attribute on the #{element.name} element wrapper tag.
+        WARN
+      end
+
+      if options[:class].nil?
+        Alchemy::Deprecation.warn <<~WARN
+          Relying on an implicit CSS class in `element_view_for` is deprecated. Please provide an explicit `class` for the #{element.name} element wrapper tag.
+        WARN
+      end
+
       options = {
         tag: :div,
-        id: element.dom_id,
+        id: (!!options[:id]) ? options[:id] : element.dom_id,
         class: element.name,
         tags_formatter: ->(tags) { tags.join(" ") }
       }.merge(options)

data/app/helpers/alchemy/pages_helper.rb

@@ -62,8 +62,8 @@ module Alchemy
     #
     # renders +app/views/alchemy/site_layouts/_default_site.html.erb+ for the site named "Default Site".
     #
-    def render_site_layout(&block)
-      render current_alchemy_site, &block
+    def render_site_layout(&)
+      render(current_alchemy_site, &)
     rescue ActionView::MissingTemplate => error
       error_or_warning(error, "Site layout for #{current_alchemy_site.try(:name)} not found. Please run `rails g alchemy:site_layouts`")
     end

data/app/javascript/alchemy_admin/components/element_editor.js

@@ -19,7 +19,7 @@ export class ElementEditor extends HTMLElement {
     // Triggered by child elements
     this.addEventListener("alchemy:element-update-title", this)
     // We use of @rails/ujs for Rails remote forms
-    this.addEventListener("ajax:success", this)
+    this.addEventListener("ajax:complete", this)
     // Dirty observer
     this.addEventListener("change", this)
 
@@ -57,11 +57,11 @@ export class ElementEditor extends HTMLElement {
           this.onClickElement()
         }
         break
-      case "ajax:success":
+      case "ajax:complete":
         if (event.target === this.body) {
-          const responseJSON = event.detail[0]
+          const xhr = event.detail[0]
           event.stopPropagation()
-          this.onSaveElement(responseJSON)
+          this.onSaveElement(xhr)
         }
         break
       case "alchemy:element-update-title":
@@ -115,30 +115,28 @@ export class ElementEditor extends HTMLElement {
   /**
    * Sets the element to saved state
    * Updates title
+   * JS event bubbling will also update the parents element quote.
    * Shows error messages if ingredient validations fail
-   * @argument {JSON} data
+   * @argument {XMLHttpRequest} xhr
    */
-  onSaveElement(data) {
-    // JS event bubbling will also update the parents element quote.
-    this.setClean()
+  onSaveElement(xhr) {
+    const data = JSON.parse(xhr.responseText)
     // Reset errors that might be visible from last save attempt
-    this.errorsDisplay.innerHTML = ""
-    this.elementErrors.classList.add("hidden")
-    this.body
-      .querySelectorAll(".ingredient-editor")
-      .forEach((el) => el.classList.remove("validation_failed"))
+    this.setClean()
     // If validation failed
-    if (data.errors) {
+    if (xhr.status === 422) {
       const warning = data.warning
       // Create error messages
-      data.errors.forEach((message) => {
-        this.errorsDisplay.append(createHtmlElement(`<li>${message}</li>`))
-      })
       // Mark ingredients as failed
-      data.ingredientsWithErrors.forEach((id) => {
-        this.querySelector(`[data-ingredient-id="${id}"]`)?.classList.add(
-          "validation_failed"
+      data.ingredientsWithErrors.forEach((ingredient) => {
+        const ingredientEditor = this.querySelector(
+          `[data-ingredient-id="${ingredient.id}"]`
         )
+        const errorDisplay = createHtmlElement(
+          `<small class="error">${ingredient.errorMessage}</small>`
+        )
+        ingredientEditor?.appendChild(errorDisplay)
+        ingredientEditor?.classList.add("validation_failed")
       })
       // Show message
       growl(warning, "warn")
@@ -208,9 +206,12 @@ export class ElementEditor extends HTMLElement {
   setClean() {
     this.dirty = false
     window.onbeforeunload = null
+    this.elementErrors.classList.add("hidden")
+
     if (this.hasEditors) {
-      this.body.querySelectorAll(".dirty").forEach((el) => {
-        el.classList.remove("dirty")
+      this.body.querySelectorAll(".ingredient-editor").forEach((el) => {
+        el.classList.remove("dirty", "validation_failed")
+        el.querySelectorAll("small.error").forEach((e) => e.remove())
       })
     }
   }
@@ -482,15 +483,6 @@ export class ElementEditor extends HTMLElement {
     return this.toggleButton?.querySelector("alchemy-icon")
   }
 
-  /**
-   * The error messages container
-   *
-   * @returns {HTMLElement}
-   */
-  get errorsDisplay() {
-    return this.body.querySelector(".error-messages")
-  }
-
   /**
    * The validation messages list container
    *

data/app/javascript/alchemy_admin/components/preview_window.js

@@ -66,12 +66,11 @@ class PreviewWindow extends HTMLIFrameElement {
 
     key("alt+r", () => this.refresh())
 
-    // Need to listen with jQuery here because select2 does not emit native events.
-    $(this.sizeSelect).on("change", (evt) => {
+    this.sizeSelect.addEventListener("change", (evt) => {
       const select = evt.target
       const width = select.value
 
-      if (width === "auto") {
+      if (width === "") {
         this.style.width = null
       } else {
         this.resize(width)

data/app/javascript/alchemy_admin/picture_selector.js

@@ -1,34 +1,62 @@
 import { on } from "alchemy_admin/utils/events"
 
+function toggleCheckboxes(state) {
+  document
+    .querySelectorAll(".picture_tool.select input[type='checkbox']")
+    .forEach((checkbox) => {
+      checkbox.checked = state
+      checkbox.closest(".picture_thumbnail").classList.toggle("active", state)
+    })
+}
+
+function checkedInputs() {
+  return document.querySelectorAll("#picture_archive input:checked")
+}
+
+function editMultiplePicturesUrl(href) {
+  const searchParameters = new URLSearchParams()
+  checkedInputs().forEach((entry) =>
+    searchParameters.append(entry.name, entry.value)
+  )
+  const url = href + "?" + searchParameters.toString()
+
+  return url
+}
+
 /**
  * Multiple picture select handler for the picture archive.
  */
 export default function PictureSelector() {
+  const selectAllButton = document.querySelector("#select_all_pictures")
   const selectedItemTools = document.querySelector(".selected_item_tools")
-  const checkedInputs = () =>
-    document.querySelectorAll("#picture_archive input:checked")
+
+  on("click", ".toolbar_buttons", "a#select_all_pictures", (event) => {
+    event.preventDefault()
+
+    selectAllButton.classList.toggle("active")
+
+    const state = selectAllButton.classList.contains("active")
+
+    toggleCheckboxes(state)
+
+    selectedItemTools.classList.toggle("hidden", !state)
+  })
 
   // make the item toolbar visible and show the checkbox also if it is not hovered anymore
   on("change", ".picture_tool.select", "input", (event) => {
-    selectedItemTools.style.display =
-      checkedInputs().length > 0 ? "block" : "none"
+    selectedItemTools.classList.toggle("hidden", checkedInputs().length === 0)
 
     const parentElementClassList = event.target.parentElement.classList
     const checked = event.target.checked
 
     parentElementClassList.toggle("visible", checked)
-    parentElementClassList.toggle("hidden", !checked)
   })
 
   // open the edit view in a dialog modal
   on("click", ".selected_item_tools", "a#edit_multiple_pictures", (event) => {
     event.preventDefault()
 
-    const searchParameters = new URLSearchParams()
-    checkedInputs().forEach((entry) =>
-      searchParameters.append(entry.name, entry.value)
-    )
-    const url = event.target.href + "?" + searchParameters.toString()
+    const url = editMultiplePicturesUrl(event.target.href)
 
     Alchemy.openDialog(url, {
       title: event.target.title,

data/app/models/alchemy/attachment.rb

@@ -102,14 +102,6 @@ module Alchemy
 
     # Instance methods
 
-    def to_jq_upload
-      {
-        "name" => read_attribute(:file_name),
-        "size" => read_attribute(:file_size),
-        "error" => errors[:file].join
-      }
-    end
-
     def url(options = {})
       if file
         self.class.url_class.new(self).call(options)

data/app/models/alchemy/element/dom_id.rb

@@ -11,6 +11,7 @@ module Alchemy
   #
   #  Alchemy::Element.dom_id_class = MyDomIdClass
   #
+  # @deprecated Use a headline ingredient with anchor setting instead.
   class Element < BaseRecord
     class DomId
       def initialize(element)