alchemy_cms 6.0.0.pre.rc6 → 6.0.0.pre.rc7

data/package/src/picture_editors.js

@@ -1,6 +1,6 @@
-import debounce from "lodash/debounce"
-import max from "lodash/max"
-import ajax from "./utils/ajax"
+import debounce from "lodash-es/debounce"
+import max from "lodash-es/max"
+import { get } from "./utils/ajax"
 import ImageLoader from "./image_loader"
 
 const UPDATE_DELAY = 125
@@ -62,7 +62,7 @@ class PictureEditor {
     this.image.removeAttribute("alt")
     this.image.removeAttribute("src")
     this.imageLoader.load(true)
-    ajax("GET", `/admin/pictures/${this.pictureId}/url`, {
+    get(`/admin/pictures/${this.pictureId}/url`, {
       crop: this.imageCropperEnabled,
       crop_from: this.cropFrom,
       crop_size: this.cropSize,

data/package/src/sitemap.js

@@ -1,12 +1,15 @@
 // The admin sitemap Alchemy class
+import PageSorter from "./page_sorter"
+import { on } from "./utils/events"
+import { get, patch } from "./utils/ajax"
+import { createSortables, displayPageFolders } from "./page_sorter"
 
 export default class Sitemap {
   // Storing some objects.
   constructor(options) {
-    const list_template_regexp = new RegExp("/" + options.page_root_id, "g")
     const list_template_html = document
       .getElementById("sitemap-list")
-      .innerHTML.replace(list_template_regexp, "/{{id}}")
+      .innerHTML.replace(/__ID__/g, "{{id}}")
     this.search_field = document.querySelector(".search_input_field")
     this.filter_field_clear = document.querySelector(".search_field_clear")
     this.filter_field_clear.removeAttribute("href")
@@ -24,56 +27,63 @@ export default class Sitemap {
 
   // Loads the sitemap
   load(pageId) {
-    const spinner = this.options.spinner || new Alchemy.Spinner("medium")
+    const spinner = new Alchemy.Spinner("medium")
     const spinTarget = this.sitemap_wrapper
     spinTarget.innerHTML = ""
     spinner.spin(spinTarget)
-    this.fetch(
-      `${this.options.url}?id=${pageId}&full=${this.options.full}`
-    ).then(async (response) => {
-      this.render(await response.json())
-      spinner.stop()
-    })
+    get(this.options.url, { id: pageId })
+      .then(async (response) => {
+        this.render(await response.data)
+        this.handlePageFolders()
+        spinner.stop()
+      })
+      .catch(this.errorHandler)
   }
 
-  // Reload the sitemap for a specific branch
-  reload(pageId) {
-    const spinner = new Alchemy.Spinner("small")
-    const spinTarget = document.getElementById(`fold_button_${pageId}`)
-    spinTarget.querySelector(".far").remove()
-    spinner.spin(spinTarget)
-    this.fetch(`${this.options.url}?id=${pageId}`).then(async (response) => {
-      this.render(await response.json(), pageId)
-      spinner.stop()
-    })
-  }
+  // Watch page folder clicks and re-render the page branch
+  handlePageFolders() {
+    on(
+      "click",
+      "#sitemap",
+      ".page_folder",
+      function (evt) {
+        const spinner = new Alchemy.Spinner("small")
+        const pageFolder = evt.target.closest(".page_folder")
+        const pageId = pageFolder.dataset.pageId
+        pageFolder.innerHTML = ""
+        spinner.spin(pageFolder)
 
-  fetch(url) {
-    return fetch(url).catch((error) => console.warn(`Request failed: ${error}`))
+        patch(Alchemy.routes.fold_admin_page_path(pageId))
+          .then(async (response) => {
+            this.reRender(pageId, await response.data)
+            spinner.stop()
+          })
+          .catch(this.errorHandler)
+      }.bind(this)
+    )
   }
 
   // Renders the sitemap
-  render(data, foldingId) {
-    let renderTarget, renderTemplate
+  render(data) {
+    const renderTarget = this.sitemap_wrapper
+    const renderTemplate = this.template
 
-    if (foldingId) {
-      renderTarget = document.getElementById(`page_${foldingId}`)
-      renderTemplate = this.list_template
-      renderTarget.outerHTML = renderTemplate({ children: data.pages })
-    } else {
-      renderTarget = this.sitemap_wrapper
-      renderTemplate = this.template
-      renderTarget.innerHTML = renderTemplate({ children: data.pages })
-    }
+    renderTarget.innerHTML = renderTemplate({ children: data.pages })
     this.items = document
       .getElementById("sitemap")
       .querySelectorAll(".sitemap_page")
     this.sitemap_wrapper = document.getElementById("sitemap-wrapper")
     this._observe()
+    PageSorter()
+  }
 
-    if (this.options.ready) {
-      this.options.ready()
-    }
+  reRender(pageId, data) {
+    let pageEl = document.getElementById(`page_${pageId}`)
+    pageEl.outerHTML = this.list_template({ children: data.pages })
+    pageEl = document.getElementById(`page_${pageId}`)
+    const sortables = pageEl.querySelectorAll("ul.children")
+    createSortables(sortables)
+    displayPageFolders()
   }
 
   // Filters the sitemap
@@ -130,4 +140,9 @@ export default class Sitemap {
       return false
     })
   }
+
+  errorHandler(error) {
+    Alchemy.growl(error.message || error, "error")
+    console.error(error)
+  }
 }

data/package/src/utils/__tests__/ajax.spec.js

@@ -1,5 +1,5 @@
 import xhrMock from "xhr-mock"
-import ajax from "../ajax"
+import { get, patch, post } from "../ajax"
 
 const token = "s3cr3t"
 
@@ -8,13 +8,13 @@ beforeEach(() => {
   xhrMock.setup()
 })
 
-describe("ajax('get')", () => {
+describe("get", () => {
   it("sends X-CSRF-TOKEN header", async () => {
     xhrMock.get("http://localhost/users", (req, res) => {
       expect(req.header("X-CSRF-TOKEN")).toEqual(token)
       return res.status(200).body('{"message":"Ok"}')
     })
-    await ajax("get", "/users")
+    await get("/users")
   })
 
   it("sends Content-Type header", async () => {
@@ -24,7 +24,7 @@ describe("ajax('get')", () => {
       )
       return res.status(200).body('{"message":"Ok"}')
     })
-    await ajax("get", "/users")
+    await get("/users")
   })
 
   it("sends Accept header", async () => {
@@ -32,14 +32,14 @@ describe("ajax('get')", () => {
       expect(req.header("Accept")).toEqual("application/json")
       return res.status(200).body('{"message":"Ok"}')
     })
-    await ajax("get", "/users")
+    await get("/users")
   })
 
   it("returns JSON", async () => {
     xhrMock.get("http://localhost/users", (_req, res) => {
       return res.status(200).body('{"email":"mail@example.com"}')
     })
-    await ajax("get", "/users").then((res) => {
+    await get("/users").then((res) => {
       expect(res.data).toEqual({ email: "mail@example.com" })
     })
   })
@@ -49,7 +49,7 @@ describe("ajax('get')", () => {
       return res.status(200).body('email => "mail@example.com"')
     })
     expect.assertions(1)
-    await ajax("get", "/users").catch((e) => {
+    await get("/users").catch((e) => {
       expect(e.message).toMatch("Unexpected token")
     })
   })
@@ -59,7 +59,7 @@ describe("ajax('get')", () => {
       return Promise.reject(new Error())
     })
     expect.assertions(1)
-    await ajax("get", "/users").catch((e) => {
+    await get("/users").catch((e) => {
       expect(e.message).toEqual("An error occurred during the transaction")
     })
   })
@@ -69,7 +69,7 @@ describe("ajax('get')", () => {
       return res.status(401).body('{"error":"Unauthorized"}')
     })
     expect.assertions(1)
-    await ajax("get", "/users").catch((e) => {
+    await get("/users").catch((e) => {
       expect(e.error).toEqual("Unauthorized")
     })
   })
@@ -79,7 +79,7 @@ describe("ajax('get')", () => {
       return res.status(401).body("Unauthorized")
     })
     expect.assertions(1)
-    await ajax("get", "/users").catch((e) => {
+    await get("/users").catch((e) => {
       expect(e.message).toMatch("Unexpected token")
     })
   })
@@ -88,18 +88,54 @@ describe("ajax('get')", () => {
     xhrMock.get("http://localhost/users?name=foo", (_req, res) => {
       return res.status(200).body(`{"name":"foo"}`)
     })
-    const { data } = await ajax("get", "/users", { name: "foo" })
+    const { data } = await get("/users", { name: "foo" })
     expect(data.name).toEqual("foo")
   })
 })
 
-describe("ajax('post')", () => {
+describe("patch", () => {
+  it("sends X-CSRF-TOKEN header", async () => {
+    xhrMock.patch("http://localhost/users", (req, res) => {
+      expect(req.header("X-CSRF-TOKEN")).toEqual(token)
+      return res.status(200).body('{"message":"Ok"}')
+    })
+    await patch("/users")
+  })
+
+  it("sends Content-Type header", async () => {
+    xhrMock.patch("http://localhost/users", (req, res) => {
+      expect(req.header("Content-Type")).toEqual(
+        "application/json; charset=utf-8"
+      )
+      return res.status(200).body('{"message":"Ok"}')
+    })
+    await patch("/users")
+  })
+
+  it("sends Accept header", async () => {
+    xhrMock.patch("http://localhost/users", (req, res) => {
+      expect(req.header("Accept")).toEqual("application/json")
+      return res.status(200).body('{"message":"Ok"}')
+    })
+    await patch("/users")
+  })
+
+  it("sends JSON data", async () => {
+    xhrMock.patch("http://localhost/users", (req, res) => {
+      expect(req.body()).toEqual('{"email":"mail@example.com"}')
+      return res.status(200).body('{"message":"Ok"}')
+    })
+    await patch("/users", { email: "mail@example.com" })
+  })
+})
+
+describe("post", () => {
   it("sends X-CSRF-TOKEN header", async () => {
     xhrMock.post("http://localhost/users", (req, res) => {
       expect(req.header("X-CSRF-TOKEN")).toEqual(token)
       return res.status(200).body('{"message":"Ok"}')
     })
-    await ajax("post", "/users")
+    await post("/users")
   })
 
   it("sends Content-Type header", async () => {
@@ -109,7 +145,7 @@ describe("ajax('post')", () => {
       )
       return res.status(200).body('{"message":"Ok"}')
     })
-    await ajax("post", "/users")
+    await post("/users")
   })
 
   it("sends Accept header", async () => {
@@ -117,7 +153,7 @@ describe("ajax('post')", () => {
       expect(req.header("Accept")).toEqual("application/json")
       return res.status(200).body('{"message":"Ok"}')
     })
-    await ajax("post", "/users")
+    await post("/users")
   })
 
   it("sends JSON data", async () => {
@@ -125,7 +161,7 @@ describe("ajax('post')", () => {
       expect(req.body()).toEqual('{"email":"mail@example.com"}')
       return res.status(200).body('{"message":"Ok"}')
     })
-    await ajax("post", "/users", { email: "mail@example.com" })
+    await post("/users", { email: "mail@example.com" })
   })
 })
 

data/package/src/utils/ajax.js

@@ -29,6 +29,18 @@ function getToken() {
   return metaTag.attributes.content.textContent
 }
 
+export function get(url, params) {
+  return ajax("GET", url, params)
+}
+
+export function patch(url, data) {
+  return ajax("PATCH", url, data)
+}
+
+export function post(url, data) {
+  return ajax("POST", url, data)
+}
+
 export default function ajax(method, path, data) {
   const xhr = new XMLHttpRequest()
   const promise = buildPromise(xhr)

data/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alchemy_cms/admin",
-  "version": "6.0.0-rc6",
+  "version": "6.0.0-rc7",
   "description": "AlchemyCMS",
   "browser": "package/admin.js",
   "files": [

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: alchemy_cms
 version: !ruby/object:Gem::Version
-  version: 6.0.0.pre.rc6
+  version: 6.0.0.pre.rc7
 platform: ruby
 authors:
 - Thomas von Deyen
@@ -13,7 +13,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2022-03-05 00:00:00.000000000 Z
+date: 2022-03-28 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionmailer
@@ -410,7 +410,7 @@ dependencies:
         version: '1.8'
     - - "<="
       - !ruby/object:Gem::Version
-        version: 2.5.0
+        version: 2.6.0
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
@@ -420,7 +420,7 @@ dependencies:
         version: '1.8'
     - - "<="
       - !ruby/object:Gem::Version
-        version: 2.5.0
+        version: 2.6.0
 - !ruby/object:Gem::Dependency
   name: request_store
   requirement: !ruby/object:Gem::Requirement
@@ -571,20 +571,6 @@ dependencies:
     - - "~>"
       - !ruby/object:Gem::Version
         version: '1.0'
-- !ruby/object:Gem::Dependency
-  name: cuprite
-  requirement: !ruby/object:Gem::Requirement
-    requirements:
-    - - "~>"
-      - !ruby/object:Gem::Version
-        version: '0.13'
-  type: :development
-  prerelease: false
-  version_requirements: !ruby/object:Gem::Requirement
-    requirements:
-    - - "~>"
-      - !ruby/object:Gem::Version
-        version: '0.13'
 - !ruby/object:Gem::Dependency
   name: factory_bot_rails
   requirement: !ruby/object:Gem::Requirement
@@ -669,6 +655,20 @@ dependencies:
     - - "~>"
       - !ruby/object:Gem::Version
         version: '0.20'
+- !ruby/object:Gem::Dependency
+  name: webdrivers
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '5.0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '5.0'
 - !ruby/object:Gem::Dependency
   name: webmock
   requirement: !ruby/object:Gem::Requirement
@@ -731,6 +731,7 @@ files:
 - ".hound.yml"
 - ".localeapp/config.rb"
 - ".prettierrc"
+- ".rspec"
 - ".rubocop.yml"
 - ".yardopts"
 - CHANGELOG.md
@@ -772,7 +773,6 @@ files:
 - app/assets/javascripts/alchemy/alchemy.initializer.js.coffee
 - app/assets/javascripts/alchemy/alchemy.link_dialog.js.coffee
 - app/assets/javascripts/alchemy/alchemy.list_filter.js.coffee
-- app/assets/javascripts/alchemy/alchemy.page_sorter.js
 - app/assets/javascripts/alchemy/alchemy.preview.js.coffee
 - app/assets/javascripts/alchemy/alchemy.preview_window.js.coffee
 - app/assets/javascripts/alchemy/alchemy.spinner.js
@@ -788,6 +788,7 @@ files:
 - app/assets/javascripts/alchemy/templates/node.hbs
 - app/assets/javascripts/alchemy/templates/node_folder.hbs
 - app/assets/javascripts/alchemy/templates/page.hbs
+- app/assets/javascripts/alchemy/templates/page_folder.hbs
 - app/assets/javascripts/alchemy/templates/spinner.hbs
 - app/assets/javascripts/tinymce/plugins/alchemy_link/plugin.min.js
 - app/assets/stylesheets/alchemy/_defaults.scss
@@ -1106,7 +1107,6 @@ files:
 - app/views/alchemy/admin/pages/configure.html.erb
 - app/views/alchemy/admin/pages/edit.html.erb
 - app/views/alchemy/admin/pages/flush.js.erb
-- app/views/alchemy/admin/pages/fold.js.erb
 - app/views/alchemy/admin/pages/index.html.erb
 - app/views/alchemy/admin/pages/info.html.erb
 - app/views/alchemy/admin/pages/link.html.erb
@@ -1114,7 +1114,6 @@ files:
 - app/views/alchemy/admin/pages/locked.html.erb
 - app/views/alchemy/admin/pages/new.html.erb
 - app/views/alchemy/admin/pages/show.html.erb
-- app/views/alchemy/admin/pages/sort.html.erb
 - app/views/alchemy/admin/pages/unlock.js.erb
 - app/views/alchemy/admin/pages/update.js.erb
 - app/views/alchemy/admin/partials/_autocomplete_tag_list.html.erb
@@ -1431,6 +1430,7 @@ files:
 - package/src/image_loader.js
 - package/src/node_tree.js
 - package/src/page_publication_fields.js
+- package/src/page_sorter.js
 - package/src/picture_editors.js
 - package/src/sitemap.js
 - package/src/translations.js
@@ -1457,7 +1457,6 @@ files:
 - vendor/assets/javascripts/flatpickr/flatpickr.min.js
 - vendor/assets/javascripts/jquery_plugins/jquery.Jcrop.min.js
 - vendor/assets/javascripts/jquery_plugins/jquery.scrollTo.min.js
-- vendor/assets/javascripts/jquery_plugins/jquery.ui.nestedSortable.js
 - vendor/assets/javascripts/jquery_plugins/jquery.ui.tabspaging.js
 - vendor/assets/javascripts/jquery_plugins/select2.js
 - vendor/assets/javascripts/keymaster.js

data/app/assets/javascripts/alchemy/alchemy.page_sorter.js

@@ -1,24 +0,0 @@
-Alchemy.PageSorter = function () {
-  var $sortables = $("ul#sitemap").find("ul.level_0_children")
-
-  $sortables.nestedSortable({
-    disableNesting: "no-nest",
-    forcePlaceholderSize: true,
-    handle: ".handle",
-    items: "li",
-    listType: "ul",
-    opacity: 0.5,
-    placeholder: "placeholder",
-    tabSize: 16,
-    tolerance: "pointer",
-    toleranceElement: "> div"
-  })
-
-  $("#save_page_order").click(function (e) {
-    e.preventDefault()
-    Alchemy.Buttons.disable(this)
-    $.post(Alchemy.routes.order_admin_pages_path, {
-      set: JSON.stringify($sortables.nestedSortable("toHierarchy"))
-    })
-  })
-}

data/app/views/alchemy/admin/pages/fold.js.erb

@@ -1,2 +0,0 @@
-$('#fold_button_<%= @page.id %>').css('background', 'none');
-Alchemy.currentSitemap.reload(<%= @page.id %>);

data/app/views/alchemy/admin/pages/sort.html.erb

@@ -1,19 +0,0 @@
-<% content_for :toolbar do %>
-  <div class="button_with_label">
-    <%= link_to alchemy.admin_pages_path, class: 'icon_button' do %>
-      <%= render_icon 'angle-double-left' %>
-    <% end %>
-    <label><%= Alchemy.t(:cancel) %></label>
-  </div>
-<% end %>
-
-<div id="sort_panel">
-  <%= render_message do %>
-    <%= Alchemy.t(:explain_sitemap_dragndrop_sorting) %>
-  <% end %>
-  <div class="buttons">
-    <%= button_tag Alchemy.t('save order'), id: 'save_page_order' %>
-  </div>
-</div>
-
-<%= render 'sitemap', page_partial: 'page', full: true %>