feat: Add schedule element button

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

Author: tvdeyen

app/assets/builds/alchemy/admin.css

@@ -0,0 +1,33 @@
+<alchemy-publish-element-button id="publish-element-button-<%= element.id %>">
+  <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? || element.scheduled? %>
+        pill
+      >
+        <alchemy-icon name="cloud-off" slot="prefix" size="1x"></alchemy-icon>
+      </sl-button>
+    </sl-tooltip>
+    <sl-tooltip
+      content="<%= Alchemy.t(:schedule_element) %>"
+    >
+      <sl-button
+        href="<%= alchemy.schedule_admin_element_path(element) %>"
+        variant="<%= element.scheduled? ? "primary" : "default" %>"
+        size="small"
+        <%= "outline" unless element.scheduled? %>
+        <%= "disabled" if cannot?(:update, element) %>
+        pill
+      >
+        <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,42 +2,76 @@ 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)
+  connectedCallback() {
+    this.publishButton.addEventListener("click", this)
+    this.scheduleButton.addEventListener("click", this)
   }
 
   handleEvent(event) {
-    const elementEditor = event.target.closest("alchemy-element-editor")
-    if (elementEditor === this.elementEditor) {
-      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)
-          reloadPreview()
-          if (data.pageHasUnpublishedChanges) {
-            dispatchPageDirtyEvent(data)
-          }
+    switch (event.target) {
+      case this.scheduleButton:
+        event.preventDefault()
+        openDialog(this.scheduleButton.href, {
+          size: "450x260",
+          title: this.scheduleButton.closest("sl-tooltip").content
         })
-        .catch((error) => growl(error.message, "error"))
+        break
+      case this.publishButton:
+        this.publishButton.loading = true
+        patch(Alchemy.routes.publish_admin_element_path(this.elementId))
+          .then((response) => this.afterPublish(response))
+          .catch((error) => growl(error.message, "error"))
+          .finally(() => (this.publishButton.loading = false))
+        break
+    }
+  }
+
+  afterPublish(response) {
+    const data = response.data
+    if (data.public) {
+      this.elementEditor.published = true
+      this.publishButton.setAttribute("variant", "default")
+      this.publishButton.setAttribute("outline", "")
+      this.hiddenIcon.hidden = true
+    } else {
+      this.elementEditor.published = false
+      this.publishButton.setAttribute("variant", "primary")
+      this.publishButton.removeAttribute("outline")
+      this.hiddenIcon.hidden = false
+    }
+    this.publishTooltip.setAttribute("content", data.tooltip)
+    if (data.pageHasUnpublishedChanges) {
+      dispatchPageDirtyEvent(data)
     }
+    reloadPreview()
   }
 
   get elementEditor() {
     return this.closest("alchemy-element-editor")
   }
 
-  get tooltip() {
-    return this.closest("sl-tooltip")
+  get publishButton() {
+    return this.querySelector("sl-button[type='submit']")
+  }
+
+  get scheduleButton() {
+    return this.querySelector("sl-button[href]")
+  }
+
+  get publishTooltip() {
+    return this.querySelector("sl-tooltip")
   }
 
   get elementId() {
     return this.elementEditor.elementId
   }
+
+  get hiddenIcon() {
+    return this.elementEditor.querySelector(".element-hidden-icon")
+  }
 }
 
 customElements.define("alchemy-publish-element-button", PublishElementButton)

app/assets/images/alchemy/icons-sprite.svg

@@ -47,12 +47,16 @@ const spriteUrl = document
   .getAttribute("href")
 
 const iconMap = {
-  "x-lg": "close"
+  "x-lg": "close",
+  caret: "arrow-down-s"
 }
 
 const options = {
   resolver: (name) => `${spriteUrl}#ri-${iconMap[name] || name}-line`,
-  mutator: (svg) => svg.setAttribute("fill", "currentColor"),
+  mutator: (svg) => {
+    svg.setAttribute("fill", "currentColor")
+    svg.setAttribute("viewBox", "0 0 24 24")
+  },
   spriteSheet: true
 }