alchemy_cms 7.4.6 → 8.0.0.a

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

@@ -0,0 +1,42 @@
+import Spinner from "alchemy_admin/spinner"
+
+class UpdateCheck extends HTMLElement {
+  async connectedCallback() {
+    const spinner = new Spinner("small")
+    spinner.spin(this)
+
+    try {
+      const response = await fetch(this.url)
+      const responseText = await response.text()
+
+      if (response.ok) {
+        this.showStatus(responseText)
+      } else {
+        this.showError(response)
+      }
+    } catch (error) {
+      this.showError(error)
+    } finally {
+      spinner.stop()
+    }
+  }
+
+  get url() {
+    return this.getAttribute("url")
+  }
+
+  showStatus(responseText) {
+    if (responseText == "true") {
+      this.querySelector(".update_available").classList.remove("hidden")
+    } else {
+      this.querySelector(".up_to_date").classList.remove("hidden")
+    }
+  }
+
+  showError(error) {
+    this.querySelector(".error").classList.remove("hidden")
+    console.error("[alchemy] Error fetching update status", error)
+  }
+}
+
+customElements.define("alchemy-update-check", UpdateCheck)

data/app/javascript/alchemy_admin/components/uploader/file_upload.js

@@ -4,21 +4,28 @@ import { translate } from "alchemy_admin/i18n"
 import { growl } from "alchemy_admin/growler"
 
 export class FileUpload extends AlchemyHTMLElement {
+  constructor() {
+    super()
+
+    this.file = null
+    this.request = null
+
+    this.progressEventLoaded = 0
+    this.progressEventTotal = 0
+    this.className = "in-progress"
+    this.valid = true
+    this.value = 0
+  }
+
   /**
+   * Initialize the component with file and request
    * @param {File} file
    * @param {XMLHttpRequest} request
    */
-  constructor(file, request) {
-    super({})
-
+  initialize(file, request) {
     this.file = file
     this.request = request
-
-    this.progressEventLoaded = 0
     this.progressEventTotal = file ? file.size : 0
-    this.className = "in-progress"
-    this.valid = true
-    this.value = 0
 
     this._validateFile()
     this._addRequestEventListener()

data/app/javascript/alchemy_admin/components/uploader/progress.js

@@ -6,19 +6,25 @@ import { translate } from "alchemy_admin/i18n"
 export class Progress extends AlchemyHTMLElement {
   #visible = false
 
-  /**
-   * @param {FileUpload[]} fileUploads
-   */
-  constructor(fileUploads = []) {
+  constructor() {
     super()
     this.buttonLabel = translate("Cancel all uploads")
-    this.fileUploads = fileUploads
-    this.fileCount = fileUploads.length
+    this.fileUploads = []
+    this.fileCount = 0
     this.className = "in-progress"
     this.visible = true
     this.handleFileChange = () => this._updateView()
   }
 
+  /**
+   * Initialize the component with file uploads
+   * @param {FileUpload[]} fileUploads
+   */
+  initialize(fileUploads = []) {
+    this.fileUploads = fileUploads
+    this.fileCount = fileUploads.length
+  }
+
   /**
    * append file progress - components for each file
    */

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

@@ -68,7 +68,8 @@ export class Uploader extends AlchemyHTMLElement {
 
     const fileUploads = files.map((file) => {
       const request = new XMLHttpRequest()
-      const fileUpload = new FileUpload(file, request)
+      const fileUpload = new FileUpload()
+      fileUpload.initialize(file, request)
 
       if (Alchemy.uploader_defaults.upload_limit - 1 < fileUploadCount) {
         fileUpload.valid = false
@@ -110,7 +111,8 @@ export class Uploader extends AlchemyHTMLElement {
       this.uploadProgress.cancel()
       document.body.removeChild(this.uploadProgress)
     }
-    this.uploadProgress = new Progress(fileUploads)
+    this.uploadProgress = new Progress()
+    this.uploadProgress.initialize(fileUploads)
     this.uploadProgress.onComplete = (status) => {
       this.dispatchCustomEvent(`upload.${status}`)
     }

data/app/javascript/alchemy_admin/confirm_dialog.js

@@ -1,20 +1,19 @@
-import { growl } from "alchemy_admin/growler"
-import pleaseWaitOverlay from "alchemy_admin/please_wait_overlay"
 import { createHtmlElement } from "alchemy_admin/utils/dom_helpers"
 import { translate } from "alchemy_admin/i18n"
 
-const DEFAULTS = {
+const getDefaults = () => ({
+  // The default size of the dialog
   size: "300x100",
   title: translate("Please confirm"),
   ok_label: translate("Yes"),
   cancel_label: translate("No"),
   on_ok() {}
-}
+})
 
 class ConfirmDialog {
   constructor(message, options = {}) {
     this.message = message
-    this.options = { ...DEFAULTS, ...options }
+    this.options = { ...getDefaults(), ...options }
     this.#build()
     this.#bindEvents()
   }
@@ -44,6 +43,7 @@ class ConfirmDialog {
   #bindEvents() {
     this.cancelButton.addEventListener("click", (evt) => {
       evt.preventDefault()
+      this.options.on_cancel()
       this.dialog.hide()
     })
     this.okButton.addEventListener("click", (evt) => {
@@ -54,6 +54,7 @@ class ConfirmDialog {
     // Prevent the dialog from closing when the user clicks on the overlay
     this.dialog.addEventListener("sl-request-close", (event) => {
       if (event.detail.source === "overlay") {
+        this.options.on_cancel()
         event.preventDefault()
       }
     })
@@ -72,60 +73,29 @@ class ConfirmDialog {
   }
 }
 
-// Opens a confirm dialog
-//
-// Arguments:
-//
-// message - The message that will be displayed to the user (String)
-//
-// Options:
-//
-//   title: ''         - The title of the overlay window (String)
-//   cancel_label: ''   - The label of the cancel button (String)
-//   ok_label: ''       - The label of the ok button (String)
-//   on_ok: null  - The function to invoke on confirmation (Function)
-//
+/* Opens a confirm dialog
+ *
+ * @param {string} message - The message that will be displayed to the user
+ * @param {Object} [options={}] - Configuration options for the dialog
+ * @param {string} [options.title="Please confirm"] - The title of the overlay window
+ * @param {string} [options.cancel_label="No"] - The label of the cancel button
+ * @param {string} [options.ok_label="Yes"] - The label of the ok button
+ *
+ * @returns {Promise<void>} A promise that resolves to true when the OK button is clicked and
+ *   resolves to false when the cancel button is clicked. Works as confirm dialog replacement
+ *   for Turbo.confirm.
+ */
 export function openConfirmDialog(message, options = {}) {
-  const dialog = new ConfirmDialog(message, options)
-  dialog.open()
-  return dialog
-}
-
-// Opens a confirm to delete dialog
-//
-// Arguments:
-//
-//   url  - The url to the server delete action. Uses DELETE as HTTP method. (String)
-//   opts - An options object (Object)
-//
-// Options:
-//
-//   title: ''        - The title of the confirmation window (String)
-//   message: ''      - The message that will be displayed to the user (String)
-//   ok_label: ''      - The label for the ok button (String)
-//   cancel_label: ''  - The label for the cancel button (String)
-//
-export function confirmToDeleteDialog(url, opts = {}) {
-  return new Promise((resolve, reject) => {
-    const options = {
+  return new Promise((resolve) => {
+    const dialog = new ConfirmDialog(message, {
+      ...options,
       on_ok() {
-        pleaseWaitOverlay()
-        $.ajax({
-          url,
-          type: "DELETE",
-          error(xhr, _status, error) {
-            const type = xhr.status === 403 ? "warning" : "error"
-            growl(xhr.responseText || error, type)
-            reject(error)
-          },
-          complete(response) {
-            pleaseWaitOverlay(false)
-            resolve(response)
-          }
-        })
+        resolve(true)
+      },
+      on_cancel() {
+        resolve(false)
       }
-    }
-
-    openConfirmDialog(opts.message, { ...options, ...opts })
+    })
+    dialog.open()
   })
 }

data/app/javascript/alchemy_admin/dirty.js

@@ -27,8 +27,9 @@ function checkPageDirtyness(element) {
     openConfirmDialog(translate("page_dirty_notice"), {
       title: translate("warning"),
       ok_label: translate("ok"),
-      cancel_label: translate("cancel"),
-      on_ok: function () {
+      cancel_label: translate("cancel")
+    }).then((proceed) => {
+      if (proceed) {
         window.onbeforeunload = void 0
         callback()
       }

data/app/javascript/alchemy_admin/i18n.js

@@ -1,20 +1,5 @@
-import { en } from "alchemy_admin/locales/en"
-
-Alchemy.translations = Object.assign(Alchemy.translations || {}, { en })
-
 const KEY_SEPARATOR = /\./
 
-function getTranslations() {
-  const locale = currentLocale()
-  const translations = Alchemy.translations && Alchemy.translations[locale]
-
-  if (translations) {
-    return translations
-  }
-  console.warn(`Translations for locale ${locale} not found!`)
-  return {}
-}
-
 function nestedTranslation(translations, key) {
   const keys = key.split(KEY_SEPARATOR)
   const group = translations[keys[0]]
@@ -25,7 +10,13 @@ function nestedTranslation(translations, key) {
 }
 
 function getTranslation(key) {
-  const translations = getTranslations()
+  const locale = currentLocale()
+  const translations = Alchemy.translations
+
+  if (!translations) {
+    console.warn(`Translations for locale ${locale} not found!`)
+    return key
+  }
 
   if (KEY_SEPARATOR.test(key)) {
     return nestedTranslation(translations, key)
@@ -48,3 +39,11 @@ export function translate(key, replacement = undefined) {
   }
   return translation
 }
+
+export async function setupSelectLocale() {
+  const locale = currentLocale()
+  if (locale === "en") return
+
+  await import(`select2/${locale}.js`)
+  $.extend($.fn.select2.defaults, $.fn.select2.locales[locale])
+}

data/app/javascript/alchemy_admin/initializer.js

@@ -1,8 +1,3 @@
-import {
-  confirmToDeleteDialog,
-  openConfirmDialog
-} from "alchemy_admin/confirm_dialog"
-
 import Hotkeys from "alchemy_admin/hotkeys"
 import pleaseWaitOverlay from "alchemy_admin/please_wait_overlay"
 
@@ -26,44 +21,6 @@ function selectHandler(selectId, parameterName, forcedReload = false) {
   })
 }
 
-// Watches elements for Alchemy Dialogs
-//
-// Links having a data-alchemy-confirm-delete
-// and input/buttons having a data-alchemy-confirm attribute get watched.
-//
-// You can pass a scope so that only elements inside this scope are queried.
-//
-// The href attribute of the link is the url for the overlay window.
-//
-// See Dialog for further options you can add to the data attribute.
-//
-function watchForConfirmDialogs(scope) {
-  if (scope == null) {
-    scope = "#alchemy"
-  }
-  $(scope).on("click", "[data-alchemy-confirm-delete]", function (event) {
-    const $this = $(this)
-    const options = $this.data("alchemy-confirm-delete")
-    confirmToDeleteDialog($this.attr("href"), options)
-    event.preventDefault()
-  })
-  $(scope).on("click", "[data-alchemy-confirm]", function (event) {
-    const options = $(this).data("alchemy-confirm")
-    openConfirmDialog(
-      options.message,
-      $.extend(options, {
-        ok_label: options.ok_label,
-        cancel_label: options.cancel_label,
-        on_ok: () => {
-          pleaseWaitOverlay()
-          this.form.submit()
-        }
-      })
-    )
-    event.preventDefault()
-  })
-}
-
 export default function Initializer() {
   // We obviously have javascript enabled.
   $("html").removeClass("no-js")
@@ -71,13 +28,8 @@ export default function Initializer() {
   // Initialize hotkeys.
   Hotkeys()
 
-  // Watch for click on confirm dialog links.
-  watchForConfirmDialogs()
-
   // Add observer for please wait overlay.
-  $(".please_wait")
-    .not("*[data-alchemy-confirm]")
-    .on("click", Alchemy.pleaseWaitOverlay)
+  $(".please_wait").on("click", pleaseWaitOverlay)
 
   // Hack for enabling tab focus for <a>'s styled as button.
   $("a.button").attr({ tabindex: 0 })

data/app/javascript/alchemy_admin/utils/ajax.js

@@ -1,27 +1,37 @@
-function buildPromise(xhr) {
-  return new Promise((resolve, reject) => {
-    xhr.onload = () => {
-      if (xhr.status >= 200 && xhr.status < 400) {
-        try {
-          resolve({
-            data: JSON.parse(xhr.responseText),
-            status: xhr.status
-          })
-        } catch (error) {
-          reject(error)
-        }
-      } else {
-        try {
-          reject(JSON.parse(xhr.responseText))
-        } catch (error) {
-          reject(error)
-        }
-      }
-    }
-    xhr.onerror = () => {
-      reject(new Error("An error occurred during the transaction"))
-    }
-  })
+const JSON_CONTENT_TYPE = "application/json"
+
+function isGetRequest(method) {
+  return method.toLowerCase() === "get"
+}
+
+function prepareURL(path, data, method) {
+  const url = new URL(window.location.origin + path)
+
+  if (data && isGetRequest(method)) {
+    url.search = new URLSearchParams(data).toString()
+  }
+
+  return url.toString()
+}
+
+function prepareHeaders(accept) {
+  return {
+    "Content-Type": "application/json; charset=utf-8",
+    Accept: accept,
+    "X-Requested-With": "XMLHttpRequest",
+    "X-CSRF-Token": getToken()
+  }
+}
+
+function prepareOptions(method, data, accept) {
+  const headers = prepareHeaders(accept)
+  const options = { method, headers }
+
+  if (data && !isGetRequest(method)) {
+    options.body = JSON.stringify(data)
+  }
+
+  return options
 }
 
 export function getToken() {
@@ -37,30 +47,27 @@ export function patch(url, data) {
   return ajax("PATCH", url, data)
 }
 
-export function post(url, data, accept = "application/json") {
+export function post(url, data, accept = JSON_CONTENT_TYPE) {
   return ajax("POST", url, data, accept)
 }
 
-export default function ajax(method, path, data, accept = "application/json") {
-  const xhr = new XMLHttpRequest()
-  const promise = buildPromise(xhr)
-  const url = new URL(window.location.origin + path)
+export default async function ajax(
+  method,
+  path,
+  data,
+  accept = JSON_CONTENT_TYPE
+) {
+  const response = await fetch(
+    prepareURL(path, data, method),
+    prepareOptions(method, data, accept)
+  )
+  const contentType = response.headers.get("content-type")
+  const isJson = contentType?.includes(JSON_CONTENT_TYPE)
+  const responseData = isJson ? await response.json() : null
 
-  if (data && method.toLowerCase() === "get") {
-    url.search = new URLSearchParams(data).toString()
-  }
-
-  xhr.open(method, url.toString())
-  xhr.setRequestHeader("Content-type", "application/json; charset=utf-8")
-  xhr.setRequestHeader("Accept", accept)
-  xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest")
-  xhr.setRequestHeader("X-CSRF-Token", getToken())
-
-  if (data && method.toLowerCase() !== "get") {
-    xhr.send(JSON.stringify(data))
+  if (response.ok) {
+    return { data: responseData, status: response.status }
   } else {
-    xhr.send()
+    throw responseData || new Error("An error occurred during the transaction")
   }
-
-  return promise
 }

data/app/javascript/alchemy_admin.js

@@ -20,10 +20,7 @@ import Sitemap from "alchemy_admin/sitemap"
 import Spinner from "alchemy_admin/spinner"
 import PagePublicationFields from "alchemy_admin/page_publication_fields"
 import { reloadPreview } from "alchemy_admin/components/preview_window"
-import {
-  openConfirmDialog,
-  confirmToDeleteDialog
-} from "alchemy_admin/confirm_dialog"
+import { openConfirmDialog } from "alchemy_admin/confirm_dialog"
 
 // Web Components
 import "alchemy_admin/components"
@@ -53,11 +50,9 @@ Object.assign(Alchemy, {
   Sitemap,
   Spinner,
   PagePublicationFields,
-  reloadPreview,
-  openConfirmDialog,
-  confirmToDeleteDialog
+  reloadPreview
 })
 
 Rails.start()
-
+Turbo.config.forms.confirm = openConfirmDialog
 $(document).on("turbo:load", Initializer)

data/app/models/alchemy/admin/filters/base.rb

@@ -0,0 +1,38 @@
+# frozen_string_literal: true
+
+module Alchemy
+  module Admin
+    module Filters
+      class Base
+        attr_reader :name, :resource_name
+
+        def initialize(name:, resource_name:)
+          @name = name
+          @resource_name = resource_name
+        end
+
+        def applied_filter_component(search_filter_params:, resource_url_proxy:, query:)
+          Alchemy::Admin::Resource::AppliedFilter.new(
+            link: dismiss_filter_url(search_filter_params, resource_url_proxy),
+            applied_filter_label: translated_name,
+            applied_filter_value: translated_value(search_filter_params[:q][name], query)
+          )
+        end
+
+        private
+
+        def translated_name
+          Alchemy.t(:name, scope: [:filters, resource_name, name], default: name.to_s.humanize)
+        end
+
+        def dismiss_filter_url(search_filter_params, resource_url_proxy)
+          tmp_params = search_filter_params.dup
+          tmp_params[:q] = tmp_params[:q].except(name)
+          resource_url_proxy.url_for(
+            {action: "index"}.merge(tmp_params.except(:page))
+          )
+        end
+      end
+    end
+  end
+end

data/app/models/alchemy/admin/filters/checkbox.rb

@@ -0,0 +1,24 @@
+# frozen_string_literal: true
+
+module Alchemy
+  module Admin
+    module Filters
+      class Checkbox < Base
+        # Renders a checkbox filter input.
+        # @param [Hash] params The controller params.
+        # @param [Ransack::Search] _query The current search query.
+        # @return [Alchemy::Admin::FilterInputs::Checkbox] The checkbox filter input component.
+        def input_component(params, _query)
+          Alchemy::Admin::Resource::CheckboxFilter.new(name:, label: translated_name, params:)
+        end
+
+        def applied_filter_component(search_filter_params:, resource_url_proxy:, query:)
+          Alchemy::Admin::Resource::AppliedFilter.new(
+            link: dismiss_filter_url(search_filter_params, resource_url_proxy),
+            applied_filter_label: translated_name
+          )
+        end
+      end
+    end
+  end
+end

data/app/models/alchemy/admin/filters/datepicker.rb

@@ -0,0 +1,53 @@
+# frozen_string_literal: true
+
+module Alchemy
+  module Admin
+    module Filters
+      class Datepicker < Base
+        attr_reader :input_type
+        # Creates a resource filter that displays as a datepicker.
+        # @param name [String] The name of the filter.
+        # @param resource_name [String] The name of the resource.
+        # @param input_type [Symbol] The input type of the datepicker. Can be :date, :datetime, or :time.
+        # @example
+        #  Alchemy::Admin::Filters::Datepicker.new(
+        #  name: :created_at_lt,
+        #  resource_name: :events,
+        #  mode: :single,
+        #  default: "2023-01-01"
+        def initialize(name:, resource_name:, input_type: :datetime)
+          super(name:, resource_name:)
+          @input_type = input_type
+        end
+
+        # Returns a datepicker filter component.
+        # @param params [Hash] The search filter params.
+        # @param query [Ransack::Search] The current search query.
+        # @return [Alchemy::Admin::Resource::DatepickerFilter] The datepicker filter component.
+        def input_component(params, _query)
+          Alchemy::Admin::Resource::DatepickerFilter.new(
+            name:,
+            label: translated_name,
+            input_type: @input_type,
+            params:
+          )
+        end
+
+        private
+
+        def translated_value(value, query)
+          date = Time.zone.parse(value) if value.is_a?(String)
+          format = case input_type
+          when :date
+            ::I18n.t(:default, scope: [:date, :formats, :alchemy])
+          when :datetime
+            ::I18n.t(:default, scope: [:time, :formats, :alchemy])
+          when :time
+            ::I18n.t(:time, scope: [:time, :formats, :alchemy])
+          end
+          ::I18n.l(date, format: format)
+        end
+      end
+    end
+  end
+end