decidim-admin 0.27.4 → 0.28.0.rc5

data/app/packs/src/decidim/admin/participatory_space_search.js

@@ -0,0 +1,268 @@
+import AutoComplete from "src/decidim/autocomplete";
+
+/**
+ * Sends a query to the API and resolves the resulting data in the returned
+ * promise object.
+ *
+ * @param {String} query The root query to be sent to the API e.g.
+ *   "decidim { version }".
+ * @returns {Promise} Promise resolving the data returned by the API.
+ */
+const apiRequest = (query) => {
+  return new Promise((resolve) => {
+    fetch("/api", {
+      method: "post",
+      headers: {
+        "Content-Type": "application/json"
+      },
+      body: JSON.stringify({ query: `{ ${query} }` })
+    }).then((response) => response.json()).then((queryResponse) => {
+      resolve(queryResponse.data);
+    });
+  })
+};
+
+/**
+ * Resolves the different root fields for listing different participatory spaces
+ * available in the instance. Returns all LIST kind root fields that list
+ * records implemeting the ParticipatorySpaceInterface.
+ *
+ * @returns {Promise} A promise resolving the root fields for querying different
+ *   participatory spaces.
+ */
+const resolveParticipatorySpaceTypes = () => {
+  const schemaQuery = `
+    __schema {
+      queryType {
+        fields {
+          name
+          type {
+            kind
+            ofType {
+              ofType {
+                interfaces {
+                  name
+                }
+                kind
+              }
+            }
+          }
+        }
+      }
+    }
+  `;
+
+  /**
+   * Resolves whether the provided field returned by the API is a participatory
+   * space root field or not.
+   *
+   * @param {Object} field The field object returned by the API.
+   * @returns {Boolean} True if the provided field is a participatory space
+   *   field or false when it is not.
+   */
+  const isParticipatorySpaceField = (field) => {
+    if (field.type.kind !== "LIST") {
+      return false;
+    }
+    if (!field.type.ofType || !field.type.ofType.ofType || !field.type.ofType.ofType.interfaces) {
+      return false;
+    }
+    if (!field.type.ofType.ofType.interfaces.some((interf) => interf.name === "ParticipatorySpaceInterface")) {
+      return false;
+    }
+
+    return true;
+  }
+
+  return new Promise((resolve) => {
+    apiRequest(schemaQuery).then((result) => {
+      const types = [];
+
+      for (const field of result.__schema.queryType.fields) {
+        if (isParticipatorySpaceField(field)) {
+          types.push(field.name);
+        }
+      }
+
+      resolve(types);
+    });
+  });
+};
+
+/**
+ * Resolves the different participatory space root queries and sends an API
+ * request for each of them to resolve the list of available spaces of each
+ * type.
+ *
+ * An example array resolved by the promise object looks as follows:
+ * [
+ *   {
+ *     type: "participatory_processes",
+ *     name: "Participatory processes",
+ *     list: [
+ *       { id: 1, title: "Foo" },
+ *       { id: 2, title: "Bar" },
+ *     ]
+ *   },
+ *   {
+ *     type: "assemblies",
+ *     name: "Assemblies",
+ *     list: [
+ *       { id: 1, title: "Foo" },
+ *       { id: 2, title: "Bar" },
+ *     ]
+ *   }
+ * ]
+ *
+ * @returns {Promise} A promise resolving the different participatory spaces as
+ *   explained above.
+ */
+const getParticipatorySpaces = () => {
+  const currentLocale = document.documentElement.lang;
+  const spaceQuery = `
+    id
+    title { translation(locale: "${currentLocale}") }
+    manifest {
+      name
+      humanName {
+        plural { translation(locale: "${currentLocale}") }
+      }
+    }
+  `;
+
+  return new Promise((resolve) => {
+    resolveParticipatorySpaceTypes().then((types) => {
+      // To make the request faster, combine all spaces into the same query
+      const spaceQueries = types.map((type) => `${type} { ${spaceQuery} }`);
+
+      apiRequest(spaceQueries.join("\n\n")).then((spacesData) => {
+        const spacesList = [];
+
+        for (const type of types) {
+          if (spacesData[type].length > 0) {
+            spacesList.push({
+              type: spacesData[type][0].manifest.name,
+              name: spacesData[type][0].manifest.humanName.plural.translation,
+              list: spacesData[type].map((space) => {
+                return {
+                  id: parseInt(space.id, 10),
+                  title: space.title.translation
+                };
+              })
+            })
+          }
+        }
+
+        resolve(spacesList);
+      });
+    });
+  })
+}
+
+/**
+ * Creates an autocomplete input for the given search input element.
+ *
+ * @param {HTMLElement} searchInput The element to create the autocomplete for.
+ * @param {Array} spaces An array of the available spaces as resolved by the
+ *   `getParticipatorySpaces` method.
+ * @param {Number} inputIndex The index of the autocomplete input on the page.
+ * @returns {AutoComplete} The initiated AutoComplete instance.
+ */
+const createAutocomplete = (searchInput, spaces, inputIndex) => {
+
+  /**
+   * Data source method which provides the results for the autocomplete element.
+   *
+   * @param {String} query The query which is used to find the matching records.
+   * @param {Function} callback A callback function that is called with the
+   *   matching results array.
+   * @returns {void}
+   */
+  const dataSource = (query, callback) => {
+    const regexp = new RegExp(query, "i");
+    const results = [];
+
+    for (const currentSpace of spaces) {
+      for (const space of currentSpace.list) {
+        if (regexp.test(space.title)) {
+          results.push({
+            value: `${currentSpace.type}(${space.id})`,
+            label: `${currentSpace.name} - ${space.title}`
+          });
+        }
+      }
+    }
+
+    callback(results);
+  };
+
+  /**
+   * Resolves the correct selected value for the autocomplete based on the query
+   * argument which consists of the participatory space type and its ID.
+   *
+   * @param {String} originalValue The original value provided in the query
+   *   arguments.
+   * @returns {Object|null} Returns the matching value object or null in case
+   *   no matching object was found.
+   */
+  const resolveSelectedValue = (originalValue) => {
+    if (!originalValue) {
+      return null;
+    }
+
+    const valueMatches = originalValue.match(/([a-z_]+)\(([0-9]+)\)/);
+    if (!valueMatches) {
+      return null;
+    }
+
+    const valueType = valueMatches[1];
+    const valueId = parseInt(valueMatches[2], 10);
+    for (const currentSpace of spaces) {
+      if (currentSpace.type === valueType) {
+        const space = currentSpace.list.find((item) => item.id === valueId);
+        if (space) {
+          return {
+            value: `${currentSpace.type}(${space.id})`,
+            label: `${currentSpace.name} - ${space.title}`
+          };
+        }
+      }
+    }
+
+    return null;
+  }
+
+  let selected = null;
+  const selectedValue = resolveSelectedValue(searchInput.dataset.selected);
+  if (selectedValue) {
+    selected = { key: "label", value: selectedValue };
+  }
+
+  const ac = new AutoComplete(searchInput, {
+    name: searchInput.getAttribute("name"),
+    placeholder: searchInput.getAttribute("placeholder"),
+    mode: "sticky",
+    threshold: 3,
+    dataMatchKeys: ["label"],
+    selected,
+    dataSource
+  });
+  searchInput.name = `participatory_space_search_${inputIndex}`;
+
+  return ac;
+}
+
+document.addEventListener("DOMContentLoaded", () => {
+  const searchElements = document.querySelectorAll("input.participatory-space-search")
+  if (searchElements.length < 1) {
+    return;
+  }
+
+  getParticipatorySpaces().then((spaces) => {
+    let index = 0;
+    for (const searchInput of searchElements) {
+      createAutocomplete(searchInput, spaces, index);
+      index += 1;
+    }
+  });
+});

data/app/packs/src/decidim/admin/scope_picker_enabler.component.js

@@ -5,8 +5,8 @@ $(() => {
   if ($(".edit_component, .new_component").length > 0) {
     $ComponentScopeEnabled.on("change", (event) => {
       const checked = event.target.checked;
-      window.theDataPicker.enabled($ComponentScopeId, checked);
+      $ComponentScopeId.attr("disabled", !checked);
     })
-    window.theDataPicker.enabled($ComponentScopeId, $ComponentScopeEnabled.prop("checked"));
+    $ComponentScopeId.attr("disabled", !$ComponentScopeEnabled.prop("checked"));
   }
 });

data/app/packs/src/decidim/admin/sortable.js

@@ -1,5 +1,3 @@
-/* eslint-disable no-ternary */
-
 import createSortList from "src/decidim/admin/sort_list.component"
 
 // Once in DOM

data/app/packs/src/decidim/admin/tab_focus.js

@@ -4,9 +4,9 @@
 $(() => {
   // Event launched by foundation
   $("[data-tabs]").on("change.zf.tabs", (event) => {
-    const $container = $(event.target).next(".tabs-content .tabs-panel.is-active");
-    // Detect quilljs editor inside the tabs-panel
-    let $content = $container.find(".editor .ql-editor");
+    const $container = $(event.target).parent().next(".tabs-content").find(".tabs-panel.is-active");
+    // Detect rich text editor inside the tabs-panel
+    let $content = $container.find(".editor .ProseMirror");
     if ($content.length > 0) {
       $content.focus();
     // Detect if inside the tabs-panel have an input

data/app/packs/src/decidim/admin/toggle_nav.js

@@ -1,6 +1,6 @@
 /* eslint-disable require-jsdoc */
 const showHideNav = (evt) => {
-  const navMenu = document.querySelector(".layout-nav");
+  const navMenu = document.querySelector(".layout-wrapper");
 
   evt.preventDefault();
   navMenu.classList.toggle("is-nav-open");

data/app/packs/src/decidim/admin/triadic_color_picker.js

@@ -0,0 +1,128 @@
+// This script is used to generate the triadic colors for the primary color
+// picker. It is used in the organization settings page.
+//
+// It is based on the following article:
+// https://css-tricks.com/converting-color-spaces-in-javascript/
+//
+
+const hslToHex = (hue, saturation, light) => {
+  const lightness = light / 100;
+  const adjustmentFactor = saturation * Math.min(lightness, 1 - lightness) / 100;
+  const getColorComponent = (colorIndex) => {
+    const colorWheelPosition = (colorIndex + hue / 30) % 12;
+    const color = lightness - adjustmentFactor * Math.max(Math.min(colorWheelPosition - 3, 9 - colorWheelPosition, 1), -1);
+    // convert to Hex and prefix "0" if needed
+    return Math.round(255 * color).toString(16).padStart(2, "0");
+  };
+  return `#${getColorComponent(0)}${getColorComponent(8)}${getColorComponent(4)}`;
+}
+
+const hexToHsl = (hexColor) => {
+  // Convert hex to RGB first
+  let red = 0;
+  let green = 0;
+  let blue = 0;
+
+  if (hexColor.length === 4) {
+    red = `0x${hexColor[1]}${hexColor[1]}`;
+    green = `0x${hexColor[2]}${hexColor[2]}`;
+    blue = `0x${hexColor[3]}${hexColor[3]}`;
+  } else if (hexColor.length === 7) {
+    red = `0x${hexColor[1]}${hexColor[2]}`;
+    green = `0x${hexColor[3]}${hexColor[4]}`;
+    blue = `0x${hexColor[5]}${hexColor[6]}`;
+  }
+  // Then to HSL
+  red /= 255;
+  green /= 255;
+  blue /= 255;
+
+  let cmin = Math.min(red, green, blue);
+  let cmax = Math.max(red, green, blue);
+  let delta = cmax - cmin;
+  let hue = 0;
+  let saturation = 0;
+  let lightness = 0;
+
+  if (delta === 0) {
+    hue = 0;
+  }
+  else if (cmax === red) {
+    hue = ((green - blue) / delta) % 6;
+  } else if (cmax === green) {
+    hue = (blue - red) / delta + 2;}
+  else {
+    hue = (red - green) / delta + 4;
+  }
+
+  hue = Math.round(hue * 60);
+
+  if (hue < 0) {
+    hue += 360;
+  }
+
+  lightness = (cmax + cmin) / 2;
+  if (delta === 0) {
+    saturation = 0
+  } else {
+    saturation = delta / (1 - Math.abs(2 * lightness - 1))
+  };
+  saturation = Number((saturation * 100).toFixed(1));
+  lightness = Number((lightness * 100).toFixed(1));
+
+  return { hue, saturation, lightness };
+}
+
+const generateHslaColors = (saturation, lightness, amount = 360) => {
+  const huedelta = Math.trunc(360 / amount)
+  return Array.from({ length: amount }, (_array, index) => ({ hue: index * huedelta, saturation, lightness }))
+}
+
+const setTheme = (primary, saturation) => {
+  // Lightness parameter is not used, the default is auto-calculated
+  const { hue, saturation: defaultS, lightness } = hexToHsl(primary);
+
+  const secondary = hslToHex(hue + 120, saturation || defaultS, lightness);
+  const tertiary = hslToHex(hue - 120, saturation || defaultS, lightness);
+
+  document.documentElement.style.setProperty("--primary", primary);
+  document.documentElement.style.setProperty("--secondary", secondary);
+  document.documentElement.style.setProperty("--tertiary", tertiary);
+  document.getElementById("preview-primary").value = primary;
+  document.getElementById("preview-secondary").value = secondary;
+  (document.getElementById("preview-tertiary") || {}).value = tertiary;
+}
+
+document.addEventListener("DOMContentLoaded", () => {
+  const selector = document.querySelector("#primary-selector")
+
+  if (selector) {
+    const primary = document.querySelector("#preview-primary")
+    const primarySaturation = document.querySelector("#primary-saturation")
+    const updateButton = document.querySelector("#set-colors")
+
+    generateHslaColors(50, 50).forEach((color) => {
+      const div = document.createElement("div")
+      const hex = hslToHex(color.hue, color.saturation, color.lightness)
+      div.style.backgroundColor = hex
+      div.dataset.value = hex
+      div.style.flex = 1
+      selector.appendChild(div)
+    })
+
+    // Use the previous primary and secondary colors as the default selection
+    document.documentElement.style.setProperty("--primary", document.querySelector("#organization_primary_color").value);
+    document.documentElement.style.setProperty("--secondary", document.querySelector("#organization_secondary_color").value);
+    document.documentElement.style.setProperty("--tertiary", document.querySelector("#organization_tertiary_color").value);
+
+    selector.addEventListener("click", ({ target: { dataset: { value }}}) => setTheme(value, Number(primarySaturation.value)));
+    primarySaturation.addEventListener("input", ({ target: { value }}) => setTheme(primary.value, Number(value)));
+    updateButton.addEventListener("click", (event) => {
+      event.preventDefault()
+
+      document.querySelector("#organization_primary_color").value = document.querySelector("#preview-primary").value
+      document.querySelector("#organization_secondary_color").value = document.querySelector("#preview-secondary").value
+      document.querySelector("#organization_tertiary_color").value = document.querySelector("#preview-tertiary").value
+    });
+  }
+})

data/app/packs/stylesheets/decidim/admin/_bulk_actions.scss

@@ -0,0 +1,16 @@
+.main {
+  #js-other-actions-wrapper,
+  #js-bulk-actions-wrapper {
+    .dropdown {
+      @apply relative;
+    }
+  }
+
+  .bulk-actions-budgets {
+    @apply flex items-center gap-x-4 ml-auto;
+
+    .dropdown {
+      @apply relative;
+    }
+  }
+}

data/app/packs/stylesheets/decidim/admin/_cards.scss

@@ -0,0 +1,167 @@
+.card {
+  @apply bg-transparent border-0;
+
+  .table-scroll {
+    @apply bg-white rounded;
+  }
+
+  .table {
+    @apply w-full;
+  }
+
+  .card-divider .card-title {
+    @apply flex items-center;
+
+    .button {
+      @apply ml-auto relative;
+    }
+  }
+}
+
+.card-title {
+  @apply text-md w-full text-gray-2 font-semibold;
+
+  &--nocaps {
+    @apply lowercase tracking-normal;
+
+    &::first-letter {
+      @apply lowercase;
+    }
+  }
+
+  .data-picker {
+    @apply font-normal tracking-normal mb-0 normal-case;
+  }
+
+  .button--title {
+    @apply flex justify-end gap-x-4 items-center ml-auto;
+
+    .dropdown,
+    &.dropdown {
+      @apply relative;
+    }
+  }
+}
+
+.card__filter {
+  @apply ml-auto flex items-center gap-x-4 font-normal;
+
+  a {
+    @apply text-md text-secondary font-semibold underline;
+  }
+}
+
+.card-footer {
+  padding: 1rem;
+  border-top: 1px solid rgba(black, 0.1);
+
+  .button--remove {
+    margin-left: auto;
+  }
+}
+
+.card--list__item {
+  display: flex;
+  align-items: center;
+  padding-left: 1rem;
+
+  .card--list--mini & {
+    padding-left: 1rem;
+  }
+}
+
+.card--list__icon {
+  display: none;
+  fill: currentColor;
+}
+
+.card--list__text {
+  flex-grow: 1;
+  flex-shrink: 1;
+  display: inline-flex;
+  overflow: hidden;
+  align-items: center;
+  padding: 1rem 1rem 1rem 0;
+
+  .card--list--mini & {
+    padding: 0.5rem 0.5rem 0.5rem 0;
+  }
+
+  .author {
+    margin-top: 0.3rem;
+    margin-right: 1rem;
+  }
+}
+
+.card--list__heading {
+  margin-bottom: 0;
+  display: block;
+}
+
+.card-divider {
+  @apply bg-transparent px-0 py-2;
+}
+
+.card-section {
+  @apply pb-4 bg-white;
+}
+
+.fcell .label {
+  @apply p-2 mb-2;
+}
+
+.card-section-draggable-list {
+  .grid-x.grid-margin-x.card-grid {
+    @apply grid grid-cols-1 md:grid-cols-2 gap-4;
+
+    .cell {
+      @apply w-full;
+    }
+  }
+
+  .cell,
+  .card,
+  .card-section {
+    @apply h-full;
+  }
+
+  .draggable-list {
+    @apply p-0 m-0 list-none h-full;
+
+    &-title {
+      @apply text-lg font-semibold;
+    }
+
+    &.dragging {
+      @apply border-dashed border-y-2 border-gray;
+    }
+
+    li {
+      @apply cursor-move py-2;
+    }
+
+    .draggable-content {
+      @apply flex justify-between items-center font-semibold py-2 px-4 rounded bg-gray-3;
+    }
+  }
+}
+
+.admin-terms-of-service {
+  h2 {
+    @apply text-md w-full text-gray-2 font-semibold;
+  }
+
+  p {
+    @apply my-2;
+  }
+
+  ol {
+    @apply list-decimal ml-4;
+  }
+}
+
+.code-block {
+  @apply font-normal text-gray-2 block overflow-auto whitespace-pre p-4 mb-6 bg-gray-3;
+
+  font-family: Consolas, "Liberation Mono", Courier, monospace;
+}

data/app/packs/stylesheets/decidim/admin/_color_picker.scss

@@ -0,0 +1,61 @@
+.color-picker {
+  @apply cursor-pointer mb-4;
+
+  summary {
+    @apply cursor-pointer mb-4;
+  }
+
+  &__box {
+    @apply rounded p-4 border border-gray;
+  }
+
+  &__label_choose {
+    @apply h-20 flex flex-col mb-4;
+
+    div {
+      @apply flex h-full cursor-pointer;
+    }
+  }
+
+  &__label_saturation {
+    @apply h-12 mb-4;
+
+    input {
+      @apply block;
+    }
+  }
+
+  fieldset {
+    @apply flex gap-4 items-end;
+  }
+
+  &__color {
+    @apply grid w-48 h-8 rounded;
+  }
+
+  &__color_primary {
+    @apply bg-[var(--primary)];
+  }
+
+  &__color_secondary {
+    @apply bg-[var(--secondary)];
+  }
+
+  &__color_tertiary {
+    @apply bg-[var(--tertiary)];
+  }
+
+  .button {
+    @apply m-0;
+  }
+}
+
+.form__wrapper .organization-colors {
+  @apply grid grid-cols-1 md:grid-cols-8 gap-x-4;
+
+  label input[type="color"] {
+    @apply block w-full h-10 mb-4 p-2 rounded bg-white text-gray mt-2 border border-gray bg-white;
+
+    box-shadow: inset 0 1px 2px rgba(26, 24, 29, 0.1);
+  }
+}