alchemy_cms 8.2.7 → 8.3.0

data/app/components/alchemy/admin/dashboard/widgets/user_counts.rb

@@ -0,0 +1,25 @@
+module Alchemy
+  module Admin
+    module Dashboard
+      module Widgets
+        class UserCounts < StatWidget
+          private
+
+          def link = Alchemy.config.admin_users_path
+          def icon = "group"
+          def title = Alchemy.config.user_class.model_name.human(count: :many)
+          def count = Alchemy.config.user_class.count
+
+          def infos
+            if Alchemy.config.user_class.respond_to?(:logged_in)
+              safe_join([
+                number_with_delimiter(Alchemy.config.user_class.logged_in.length),
+                t(".online")
+              ], " ")
+            end
+          end
+        end
+      end
+    end
+  end
+end

data/app/components/alchemy/admin/element_editor.html.erb

@@ -4,9 +4,15 @@
   data-element-name="<%= name %>"
   filter-text="<%= filter_text %>"
   class="<%= css_classes.join(" ") %>"
-  <%= compact? ? "compact" : nil %>
-  <%= created ? "created" : nil %>
-  <%= fixed? ? "fixed" : nil %>
+  <% if compact? %>
+    compact
+  <% end %>
+  <% if created %>
+    created
+  <% end %>
+  <% if fixed? %>
+    fixed
+  <% end %>
 >
   <% unless fixed? %>
     <%= render 'alchemy/admin/elements/header', element: element %>
@@ -38,28 +44,29 @@
             ungrouped_ingredients,
             element_form: f
           ) %>
+        </div>
 
-          <!-- Each ingredient group -->
-          <% grouped_ingredients.each do |group, ingredients| %>
-            <%= content_tag :details, class: "ingredient-group", id: "element_#{id}_ingredient_group_#{group.parameterize.underscore}", is: "alchemy-ingredient-group" do %>
-              <summary>
-                <%= translated_group group %>
-                <%= render_icon "arrow-left-s" %>
-              </summary>
-              <%= render Alchemy::Admin::IngredientEditor.with_collection(
-                ingredients,
-                element_form: f
-              ) %>
-            <% end %>
+        <% grouped_ingredients.each do |group, ingredients| %>
+          <%= content_tag :details, class: "ingredient-group", id: "element_#{id}_ingredient_group_#{group.parameterize.underscore}", is: "alchemy-ingredient-group" do %>
+            <summary>
+              <%= render_icon "arrow-right-s" %>
+              <%= translated_group group %>
+            </summary>
+            <%= render Alchemy::Admin::IngredientEditor.with_collection(
+              ingredients,
+              element_form: f
+            ) %>
           <% end %>
-        </div>
+        <% end %>
       <% end %>
 
       <% if taggable? %>
-        <%= render Alchemy::Admin::TagsAutocomplete.new do %>
-          <%= f.label :tag_list %>
-          <%= f.text_field :tag_list, value: f.object.tag_list.join(","), disabled: cannot?(:edit, element) %>
-        <% end %>
+        <div class="element-tags">
+          <%= render Alchemy::Admin::TagsAutocomplete.new do %>
+            <%= f.label :tag_list %>
+            <%= f.text_field :tag_list, value: f.object.tag_list.join(","), disabled: cannot?(:edit, element) %>
+          <% end %>
+        </div>
       <% end %>
     <% end %>
 

data/app/components/alchemy/admin/element_schedule_timestamps.rb

@@ -0,0 +1,33 @@
+module Alchemy
+  module Admin
+    class ElementScheduleTimestamps < ViewComponent::Base
+      erb_template <<~HTML
+        <div class="input-row">
+          <div class="input-column">
+            <label for="element_public_on" class="control-label"><%= Alchemy::Element.human_attribute_name(:public_on) %></label>
+            <%= datetime_local_field :element, :public_on, include_seconds: false %>
+            <%= error_for(:public_on) %>
+          </div>
+          <div class="input-column">
+            <label for="element_public_until" class="control-label"><%= Alchemy::Element.human_attribute_name(:public_until) %></label>
+            <%= datetime_local_field :element, :public_until, include_seconds: false %>
+            <%= error_for(:public_until) %>
+          </div>
+        </div>
+      HTML
+
+      def initialize(element:)
+        @element = element
+      end
+
+      private
+
+      def error_for(attribute)
+        errors = @element.errors[attribute]
+        return unless errors.present?
+
+        tag.span(errors.to_sentence, class: "error")
+      end
+    end
+  end
+end

data/app/components/alchemy/admin/element_select.rb

@@ -3,11 +3,12 @@ module Alchemy
     class ElementSelect < ViewComponent::Base
       delegate :alchemy, to: :helpers
 
-      attr_reader :elements, :field_name
+      attr_reader :elements, :field_name, :autofocus
 
-      def initialize(elements, field_name: "element[name]")
+      def initialize(elements, field_name: "element[name]", autofocus: false)
         @field_name = field_name
         @elements = elements
+        @autofocus = autofocus
       end
 
       def call
@@ -15,7 +16,7 @@ module Alchemy
           options: elements_options.to_json,
           placeholder: Alchemy.t(:select_element) do
           text_field_tag(field_name, nil, {
-            autofocus: true,
+            autofocus:,
             required: true,
             value: elements.many? ? nil : elements.first&.name,
             class: "alchemy_selectbox full_width"

data/app/components/alchemy/admin/page_node.html.erb

@@ -65,26 +65,7 @@
       </div>
 
       <div class="page_infos">
-        <% if @page.locked? %>
-          <span class="page_status locked">
-            <alchemy-icon name="edit" size="1x"></alchemy-icon>
-            <%= @page.status_title(:locked) %>
-          </span>
-        <% end %>
-
-        <% if @page.restricted? %>
-          <span class="page_status">
-            <alchemy-icon name="lock" size="1x"></alchemy-icon>
-            <%= @page.status_title(:restricted) %>
-          </span>
-        <% end %>
-
-        <% unless @page.public? %>
-          <span class="page_status">
-            <alchemy-icon name="cloud-off" size="1x"></alchemy-icon>
-            <%= @page.status_title(:public) %>
-          </span>
-        <% end %>
+        <%= render Alchemy::Admin::PageStatusIndicators.new(page: @page) %>
       </div>
 
       <div class="sitemap_right_tools">

data/app/components/alchemy/admin/page_publication_fields.html.erb

@@ -0,0 +1,30 @@
+<alchemy-page-publication-fields>
+  <label class="checkbox">
+  <% if @page.attribute_fixed?(:public_on) || @page.attribute_fixed?(:public_until) %>
+    <sl-tooltip class="like-hint-tooltip" content="<%= Alchemy.t(:attribute_fixed) %>" placement="bottom-start">
+      <%= checkbox %>
+      <%= Alchemy::Page.human_attribute_name :public %>
+    </sl-tooltip>
+  <% else %>
+    <%= checkbox %>
+    <%= Alchemy::Page.human_attribute_name :public %>
+  <% end %>
+  </label>
+
+  <%= content_tag :div, class: [
+    @page.public_on.present? || @page.public_until.present? ? nil : 'hidden',
+    'page-publication-date-fields',
+    'input-row'
+  ] do %>
+    <div class="input-column">
+      <%= label :page, :public_on %>
+      <%= datetime_local_field :page, :public_on, include_seconds: false,
+        disabled: @page.attribute_fixed?(:public_on) %>
+    </div>
+    <div class="input-column">
+      <%= label :page, :public_until %>
+      <%= datetime_local_field :page, :public_until, include_seconds: false,
+        disabled: @page.attribute_fixed?(:public_until) %>
+    </div>
+  <% end %>
+</alchemy-page-publication-fields>

data/app/components/alchemy/admin/page_publication_fields.rb

@@ -0,0 +1,18 @@
+module Alchemy
+  module Admin
+    class PagePublicationFields < ViewComponent::Base
+      def initialize(page:)
+        @page = page
+      end
+
+      private
+
+      def checkbox
+        check_box_tag :page_public, nil,
+          @page.public? || @page.scheduled?,
+          name: nil,
+          disabled: @page.attribute_fixed?(:public_on)
+      end
+    end
+  end
+end

data/app/components/alchemy/admin/page_status_indicators.html.erb

@@ -0,0 +1,29 @@
+<% if @page.locked? %>
+  <span class="page_status locked">
+    <alchemy-icon name="edit" size="1x"></alchemy-icon>
+    <%= @page.status_title(:locked) %>
+  </span>
+<% end %>
+
+<% if @page.restricted? %>
+  <span class="page_status">
+    <alchemy-icon name="lock" size="1x"></alchemy-icon>
+    <%= @page.status_title(:restricted) %>
+  </span>
+<% end %>
+
+<% if !@page.public? && !@page.scheduled? %>
+  <span class="page_status">
+    <alchemy-icon name="cloud-off" size="1x"></alchemy-icon>
+    <%= @page.status_title(:public) %>
+  </span>
+<% end %>
+
+<% if @page.scheduled? %>
+  <span class="page_status">
+    <sl-tooltip content="<%= @page.status_message(:scheduled) %>">
+      <alchemy-icon name="calendar-schedule" size="1x"></alchemy-icon>
+      <%= @page.status_title(:scheduled) %>
+    </sl-tooltip>
+  </span>
+<% end %>

data/app/components/alchemy/admin/page_status_indicators.rb

@@ -0,0 +1,9 @@
+module Alchemy
+  module Admin
+    class PageStatusIndicators < ViewComponent::Base
+      def initialize(page:)
+        @page = page
+      end
+    end
+  end
+end

data/app/components/alchemy/admin/publish_element_button.html.erb

@@ -2,14 +2,18 @@
   <sl-button-group label="Example Button Group">
     <sl-tooltip
       content="<%= element.public? ? Alchemy.t(:hide_element) : Alchemy.t(:show_element) %>"
-      <%= "disabled" if element.scheduled? || cannot?(:update, element) %>
+      <% if element.scheduled? || cannot?(:update, element) %>
+        disabled
+      <% end %>
     >
       <%= form_tag(alchemy.publish_admin_element_path(element), method: "patch") do %>
         <sl-button
           variant="<%= element.public? ? "default" : "primary" %>"
           type="submit"
           size="small"
-          <%= "disabled" if element.scheduled? || cannot?(:update, element) %>
+          <% if element.scheduled? || cannot?(:update, element) %>
+            disabled
+          <% end %>
           outline
           pill
         >
@@ -19,14 +23,18 @@
     </sl-tooltip>
     <sl-tooltip
       content="<%= element.scheduled? ? Alchemy.t(:edit_element_schedule) : Alchemy.t(:schedule_element) %>"
-      <%= "disabled" if cannot?(:update, element) %>
+      <% if cannot?(:update, element) %>
+        disabled
+      <% end %>
     >
       <sl-dropdown distance="5">
         <sl-button
           slot="trigger"
           variant="<%= element.scheduled? ? "primary" : "default" %>"
           size="small"
-          <%= "disabled" if cannot?(:update, element) %>
+          <% if cannot?(:update, element) %>
+          disabled
+          <% end %>
           outline
           pill
         >

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

@@ -61,7 +61,7 @@ module Alchemy
 
       def css_classes
         super + [
-          has_level_select? ? "with-level-select" : nil,
+          level_options.any? ? "with-level-select" : nil,
           has_size_select? ? "with-size-select" : nil
         ].compact
       end

data/app/controllers/alchemy/admin/dashboard/widgets_controller.rb

@@ -0,0 +1,21 @@
+module Alchemy
+  module Admin
+    class Dashboard::WidgetsController < DashboardController
+      MODULE_NAMESPACE = "Alchemy::Admin::Dashboard::Widgets"
+
+      def show
+        @id = params[:id]
+        @widget = get_widget(@id)
+      end
+
+      private
+
+      def get_widget(id)
+        "#{MODULE_NAMESPACE}::#{id.camelcase}".constantize
+      rescue NameError => e
+        Alchemy::Logger.error "No dashboard widget found for id: #{id}"
+        raise ActionController::RoutingError, e.message
+      end
+    end
+  end
+end

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

@@ -1,6 +1,5 @@
 # frozen_string_literal: true
 
-require "net/http"
 require "alchemy/version"
 
 module Alchemy
@@ -9,20 +8,12 @@ module Alchemy
       authorize_resource class: :alchemy_admin_dashboard
 
       def index
-        @last_edited_pages = Page.all_last_edited_from(current_alchemy_user)
-        @all_locked_pages = Page.locked
-        if Alchemy.config.user_class.respond_to?(:logged_in)
-          @online_users = Alchemy.config.user_class.logged_in.to_a - [current_alchemy_user]
-        end
-        if current_alchemy_user.respond_to?(:sign_in_count) && current_alchemy_user.respond_to?(:last_sign_in_at)
-          @last_sign_at = current_alchemy_user.last_sign_in_at
-          @first_time = current_alchemy_user.sign_in_count == 1 && @last_sign_at.nil?
-        end
-        @sites = Site.all
       end
 
       def info
-        @alchemy_version = Alchemy.version
+        Alchemy::Deprecation.warn <<~WARN
+          Requesting `admin/dashboard/info` is deprecated. Please render Alchemy::Admin::Dashboard::Widgets::SystemInfo instead.
+        WARN
       end
     end
   end

data/app/controllers/alchemy/pages_controller.rb

@@ -126,10 +126,11 @@ module Alchemy
     def load_page
       page_not_found! unless Current.language
 
-      @page ||= Current.language.pages.contentpages.find_by(
-        urlname: params[:urlname],
-        language_code: params[:locale] || Current.language.code
-      )
+      result = PageFinder.new(params[:urlname]).call
+      if result
+        @page ||= result.page
+        params.merge!(result.extracted_params)
+      end
       Current.page = @page
     end
 

data/app/helpers/alchemy/elements_block_helper.rb

@@ -57,6 +57,7 @@ module Alchemy
       def ingredient_by_role(role)
         element.ingredient_by_role(role)
       end
+      alias_method :ingredient, :ingredient_by_role
     end
 
     # Block-level helper for element views. Constructs a DOM element wrapping

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

@@ -4,16 +4,22 @@ class AutoSubmit extends HTMLElement {
   connectedCallback() {
     // Still using jQuery here, because select2 does not emit
     // the event from the original select element.
-    $(this).on("change", function (event) {
-      // We need to dispatch a submit event, so that Turbo that listens
-      // to it submits the search form us.
-      const submitEvent = new Event("submit", {
-        bubbles: true,
-        cancelable: true
-      })
-      event.target.form.dispatchEvent(submitEvent)
-      return false
+    $(this).on("change", this.#onChange)
+  }
+
+  disconnectedCallback() {
+    $(this).off("change", this.#onChange)
+  }
+
+  #onChange = (event) => {
+    // We need to dispatch a submit event, so that Turbo that listens
+    // to it submits the search form us.
+    const submitEvent = new Event("submit", {
+      bubbles: true,
+      cancelable: true
     })
+    event.target.form.dispatchEvent(submitEvent)
+    return false
   }
 }
 

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

@@ -1,30 +1,36 @@
 /**
  * Show the character counter below input fields and textareas
  */
-import { AlchemyHTMLElement } from "alchemy_admin/components/alchemy_html_element"
 import { translate } from "alchemy_admin/i18n"
 
-class CharCounter extends AlchemyHTMLElement {
-  static properties = {
-    maxChars: { default: 60 }
-  }
-  connected() {
+class CharCounter extends HTMLElement {
+  connectedCallback() {
     this.translation = translate("allowed_chars", this.maxChars)
     this.formField = this.getFormField()
 
     if (this.formField) {
       this.createDisplayElement()
       this.countCharacters()
-      this.formField.addEventListener("keyup", () => this.countCharacters()) // add arrow function to get a implicit this - binding
+      this.formField.addEventListener("keyup", this)
     }
   }
 
+  disconnectedCallback() {
+    this.formField?.removeEventListener("keyup", this)
+  }
+
+  handleEvent(event) {
+    if (event.type === "keyup") this.countCharacters()
+  }
+
   getFormField() {
     const formFields = this.querySelectorAll("input, textarea")
     return formFields.length > 0 ? formFields[0] : undefined
   }
 
   createDisplayElement() {
+    this.display = this.querySelector(":scope > .alchemy-char-counter")
+    if (this.display) return
     this.display = document.createElement("small")
     this.display.className = "alchemy-char-counter"
     this.formField.after(this.display)
@@ -35,6 +41,10 @@ class CharCounter extends AlchemyHTMLElement {
     this.display.textContent = `${charLength} ${this.translation}`
     this.display.classList.toggle("too-long", charLength > this.maxChars)
   }
+
+  get maxChars() {
+    return this.getAttribute("max-chars") ?? 60
+  }
 }
 
 customElements.define("alchemy-char-counter", CharCounter)

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

@@ -2,12 +2,8 @@ import "clipboard"
 import { growl } from "alchemy_admin/growler"
 
 class ClipboardButton extends HTMLElement {
-  constructor() {
-    super()
-
-    this.innerHTML = `
-      <alchemy-icon name="clipboard"></alchemy-icon>
-    `
+  connectedCallback() {
+    this.innerHTML = '<alchemy-icon name="clipboard"></alchemy-icon>'
 
     this.clipboard = new ClipboardJS(this, {
       text: () => {

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

@@ -14,12 +14,12 @@ const formatItem = (object) => {
 }
 
 class ColorSelect extends HTMLElement {
+  #select2 = null
+
   connectedCallback() {
     if (this.select) {
       this.#initializeSelect2()
-      $(this.select).on("change", (event) =>
-        this.#toggleColorPicker(event.val === "custom_color")
-      )
+      this.#select2.on("change", this.#onSelectChange)
     } else {
       this.colorInput?.addEventListener("input", this)
       this.textInput?.addEventListener("input", this)
@@ -41,6 +41,15 @@ class ColorSelect extends HTMLElement {
   disconnectedCallback() {
     this.colorInput?.removeEventListener("input", this)
     this.textInput?.removeEventListener("input", this)
+    if (this.#select2) {
+      this.#select2.off("change", this.#onSelectChange)
+      this.#select2.select2("destroy")
+      this.#select2 = null
+    }
+  }
+
+  #onSelectChange = (event) => {
+    this.#toggleColorPicker(event.val === "custom_color")
   }
 
   #initializeSelect2() {
@@ -50,7 +59,7 @@ class ColorSelect extends HTMLElement {
       formatResult: formatItem,
       formatSelection: formatItem
     }
-    $(this.select).select2(options)
+    this.#select2 = $(this.select).select2(options)
   }
 
   #toggleColorPicker(enabled = true) {

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

@@ -1,31 +1,24 @@
-import { AlchemyHTMLElement } from "alchemy_admin/components/alchemy_html_element"
 import { translate, currentLocale } from "alchemy_admin/i18n"
 import flatpickr from "flatpickr"
 
 const locale = currentLocale()
 
-class Datepicker extends AlchemyHTMLElement {
-  static properties = {
-    inputType: { default: "date" }
-  }
-
-  constructor() {
-    super()
-    this.flatpickr = undefined
-  }
-
+class Datepicker extends HTMLElement {
   // Load the locales for flatpickr before setting it up.
-  async connected() {
+  async connectedCallback() {
     // English is the default locale for flatpickr, so we don't need to load it
     if (locale !== "en") {
       await import(`flatpickr/${locale}.js`)
     }
+    // Bail out if the element was disconnected while the locale was loading.
+    // Otherwise flatpickr would leak a calendar onto a detached input.
+    if (!this.isConnected) return
 
     this.flatpickr = flatpickr(this.inputField, this.flatpickrOptions)
   }
 
-  disconnected() {
-    this.flatpickr.destroy()
+  disconnectedCallback() {
+    this.flatpickr?.destroy()
   }
 
   get flatpickrOptions() {
@@ -56,6 +49,10 @@ class Datepicker extends AlchemyHTMLElement {
   get inputField() {
     return this.querySelector("input")
   }
+
+  get inputType() {
+    return this.getAttribute("input-type") || "date"
+  }
 }
 
 customElements.define("alchemy-datepicker", Datepicker)

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

@@ -1,11 +1,14 @@
 import { Dialog } from "alchemy_admin/dialog"
 
 export class DialogLink extends HTMLAnchorElement {
-  constructor() {
-    super()
+  connectedCallback() {
     this.addEventListener("click", this)
   }
 
+  disconnectedCallback() {
+    this.removeEventListener("click", this)
+  }
+
   handleEvent(evt) {
     if (!this.disabled) {
       this.openDialog()

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

@@ -3,14 +3,17 @@ import { removeTab } from "alchemy_admin/fixed_elements"
 import { growl } from "alchemy_admin/growler"
 import { reloadPreview } from "alchemy_admin/components/preview_window"
 import { openConfirmDialog } from "alchemy_admin/confirm_dialog"
-import { dispatchPageDirtyEvent } from "alchemy_admin/components/element_editor"
+import { dispatchPageDirtyEvent } from "alchemy_admin/utils/dispatch_page_dirty_event"
 
 export class DeleteElementButton extends HTMLElement {
-  constructor() {
-    super()
+  connectedCallback() {
     this.button?.addEventListener("click", this)
   }
 
+  disconnectedCallback() {
+    this.button?.removeEventListener("click", this)
+  }
+
   async handleEvent() {
     const confirmed = await openConfirmDialog(this.message)
     if (confirmed) {