feat: Add schedule element button

Replaces the public toggle with a split button
which allows to schedule the element for publication.

Author: tvdeyen

Gemfile

@@ -15,7 +15,7 @@ if ENV["DB"] == "mysql" || ENV["DB"] == "mariadb"
 end
 gem "pg", "~> 1.0" if ENV["DB"] == "postgresql"
 
-gem "alchemy_i18n", github: "AlchemyCMS/alchemy_i18n", branch: "main"
+gem "alchemy_i18n", github: "AlchemyCMS/alchemy_i18n", branch: "publish-button"
 
 if ENV["ALCHEMY_STORAGE_ADAPTER"] == "active_storage"
   gem "ruby-vips"

app/assets/builds/alchemy/admin.css

@@ -0,0 +1,33 @@
+<alchemy-publish-element-button>
+  <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) %>
+    >
+      <sl-button
+        variant="<%= element.public? ? "default" : "primary" %>"
+        type="submit"
+        size="small"
+        <%= "disabled" if element.scheduled? || cannot?(:update, element) %>
+        <%= "outline" if element.public? %>
+        pill
+      >
+        <alchemy-icon name="cloud-off" slot="prefix" size="1x"></alchemy-icon>
+        <span><%= Alchemy.t(:hide, scope: "admin.elements.toolbar") %></span>
+      </sl-button>
+    </sl-tooltip>
+    <sl-tooltip
+      content="Schedule element"
+    >
+      <sl-button
+        href="<%= alchemy.schedule_admin_element_path(element) %>"
+        variant="<%= element.scheduled? ? "primary" : "default" %>"
+        size="small"
+        outline pill
+        <%= "disabled" if cannot?(:update, element) %>
+      >
+        <alchemy-icon name="calendar-schedule" slot="suffix" size="1x"></alchemy-icon>
+      </sl-button>
+    </sl-tooltip>
+  </sl-button-group>
+</alchemy-publish-element-button>

app/assets/builds/alchemy/dark-theme.css

@@ -0,0 +1,13 @@
+module Alchemy
+  module Admin
+    class PublishElementButton < ViewComponent::Base
+      delegate :alchemy, :cannot?, :render_icon, :link_to_dialog, to: :helpers
+
+      attr_reader :element
+
+      def initialize(element:)
+        @element = element
+      end
+    end
+  end
+end

app/assets/builds/alchemy/light-theme.css

@@ -8,7 +8,7 @@ class ElementsController < Alchemy::Admin::BaseController
       before_action :load_page_and_version, only: [:index, :new]
       include Alchemy::Admin::Clipboard
 
-      before_action :load_element, only: [:update, :destroy, :collapse, :expand, :publish]
+      before_action :load_element, only: [:schedule, :update, :destroy, :collapse, :expand, :publish]
       authorize_resource class: Alchemy::Element
 
       def index
@@ -89,12 +89,22 @@ def destroy
       end
 
       def publish
-        @element.public = !@element.public?
+        if schedule_element_params.present?
+          @element.assign_attributes(schedule_element_params)
+        else
+          @element.public = !@element.public?
+        end
         @element.save(validate: false)
-        render json: {
-          public: @element.public?,
-          label: @element.public? ? Alchemy.t(:hide_element) : Alchemy.t(:show_element)
-        }.merge(pagePublicationData(@element.page))
+
+        respond_to do |format|
+          format.json do
+            render json: {
+              public: @element.public?,
+              tooltip: @element.public? ? Alchemy.t(:hide_element) : Alchemy.t(:show_element)
+            }.merge(pagePublicationData(@element.page))
+          end
+          format.turbo_stream
+        end
       end
 
       def order
@@ -216,6 +226,10 @@ def element_params
       def create_element_params
         params.require(:element).permit(:name, :page_version_id, :parent_element_id)
       end
+
+      def schedule_element_params
+        params[:element].permit(:public_on, :public_until)
+      end
     end
   end
 end

app/assets/builds/alchemy/theme.css

@@ -2,37 +2,72 @@ import { patch } from "alchemy_admin/utils/ajax"
 import { reloadPreview } from "alchemy_admin/components/preview_window"
 import { growl } from "alchemy_admin/growler"
 import { dispatchPageDirtyEvent } from "alchemy_admin/components/element_editor"
+import { openDialog } from "alchemy_admin/dialog"
 
 export class PublishElementButton extends HTMLElement {
   constructor() {
     super()
 
-    this.addEventListener("sl-change", this)
+    this.button.addEventListener("click", this)
+    this.scheduleButton.addEventListener("click", this)
   }
 
   handleEvent(event) {
     const elementEditor = event.target.closest("alchemy-element-editor")
-    if (elementEditor === this.elementEditor) {
+
+    if (event.target === this.scheduleButton) {
+      // Open schedule dialog
+      event.preventDefault()
+      openDialog(this.scheduleButton.href, {
+        size: "450x200",
+        title: "Schedule Element Visibility"
+      })
+    } else if (elementEditor === this.elementEditor) {
+      this.button.loading = true
       patch(Alchemy.routes.publish_admin_element_path(this.elementId))
         .then((response) => {
           const data = response.data
           this.elementEditor.published = data.public
-          this.tooltip.setAttribute("content", data.label)
+          this.button.setAttribute(
+            "variant",
+            data.public ? "default" : "primary"
+          )
+          if (data.public) {
+            this.button.setAttribute("outline", true)
+          } else {
+            this.button.removeAttribute("outline")
+          }
+          this.tooltip.setAttribute("content", data.tooltip)
           reloadPreview()
           if (data.pageHasUnpublishedChanges) {
             dispatchPageDirtyEvent(data)
           }
         })
         .catch((error) => growl(error.message, "error"))
+        .finally(() => {
+          this.button.loading = false
+        })
     }
   }
 
   get elementEditor() {
     return this.closest("alchemy-element-editor")
   }
 
+  get button() {
+    return this.querySelector("sl-button")
+  }
+
+  get scheduleButton() {
+    return this.querySelector("sl-button[href]")
+  }
+
+  get buttonLabel() {
+    return this.querySelector("sl-button span")
+  }
+
   get tooltip() {
-    return this.closest("sl-tooltip")
+    return this.querySelector("sl-tooltip")
   }
 
   get elementId() {