decidim-admin 0.29.2 → 0.30.0.rc1

data/app/views/decidim/admin/share_tokens/edit.html.erb

@@ -0,0 +1,33 @@
+<% add_decidim_page_title(t(".title", name: resource_title)) %>
+
+<div class="item_show__header">
+  <h1 class="item_show__header-title">
+    <%= t ".title", name: resource_title %>
+    <a class="button button__sm button__secondary" href="<%= share_tokens_path %>"><%= t("share_tokens.index.back_to_share_tokens", scope: "decidim.admin") %></a>
+  </h1>
+</div>
+<div class="item__edit-form">
+  <%= decidim_form_for(@form, url: share_tokens_path(:update, id: current_token), html: { class: "form-defaults form edit_share_token" }) do |f| %>
+    <div class="card">
+      <div class="card-section">
+        <div class="form__wrapper">
+          <div class="card pt-4">
+            <div class="row column">
+              <label for="share_token-token"><%= t("token", scope: "decidim.admin.models.share_token.fields") %></label>
+              <div class="flex gap-4">
+                <%= text_field_tag :token, current_token.token, id: "share_token-token", aria: { label: t("token", scope: "decidim.admin.models.share_token.fields") }, disabled: true %>
+                <button type="button" class="button button__sm button__secondary text-nowrap" data-clipboard-copy="#share_token-token" data-clipboard-content="<%= current_token.url %>" data-clipboard-copy-label="<%= t("copied", scope: "decidim.admin.share_tokens.index") %>" data-clipboard-copy-message="<%= t("copy_message", scope: "decidim.admin.share_tokens.index") %>"><%= t("actions.copy_link", scope: "decidim.admin.share_tokens") %></button>
+              </div>
+            </div>
+            <%= render partial: "form", object: f %>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="item__edit-sticky">
+      <div class="item__edit-sticky-container">
+        <%= f.submit t(".update"), class: "button button__sm button__secondary" %>
+      </div>
+    </div>
+  <% end %>
+</div>

data/app/views/decidim/admin/share_tokens/index.html.erb

@@ -0,0 +1,47 @@
+<div class="card share_tokens">
+  <div class="item_show__header">
+    <h2 class="item_show__header-title">
+      <%= t(".title", name: resource_title) %>
+      <a class="button button__sm button__secondary" href="<%= share_tokens_path(:new) %>"><%= icon "add-line" %><%= t(".new_share_token_button") %></a>
+    </h2>
+  </div>
+  <div class="mb-4">
+    <p class="help-text whitespace-pre-line"><%= t(".share_tokens_help_html", clipboard: icon("clipboard-line", class: "inline-block mb-1")) %></p>
+  </div>
+  <% if @share_tokens.any? %>
+    <div class="table-scroll">
+      <table class="table-list">
+        <thead>
+          <tr>
+            <th><%= sort_link(query, :token, t("models.share_token.fields.token", scope: "decidim.admin"), default_order: :desc) %></th>
+            <th class="w-32"><%= sort_link(query, :expires_at, t("models.share_token.fields.expires_at", scope: "decidim.admin"), default_order: :desc) %></th>
+            <th class="w-32"><%= sort_link(query, :registered_only, t("models.share_token.fields.registered_only", scope: "decidim.admin"), default_order: :desc) %></th>
+            <th class="w-32"><%= sort_link(query, :times_used, t("models.share_token.fields.times_used", scope: "decidim.admin"), default_order: :desc) %></th>
+            <th class="w-32"><%= t("models.share_token.fields.actions", scope: "decidim.admin") %></th>
+          </tr>
+        </thead>
+        <tbody>
+          <% @share_tokens.each do |share_token| %>
+            <tr>
+              <td id="js-token-<%= share_token.id %>"><%= share_token.token %></td>
+              <td><%= share_token.expires_at.present? ?
+                        content_tag(:span, l(share_token.expires_at, format: :decidim_short), class: share_token.expired? ? "text-warning" : nil ) :
+                        content_tag(:em, t(".never")) %></td>
+              <td><%= t("booleans.#{share_token.registered_only.present?}") %></td>
+              <td><%= share_token.times_used %></td>
+              <td class="table-list__actions">
+                <%= icon_link_to "pencil-line", share_tokens_path(:edit, id: share_token ), t("actions.edit", scope: "decidim.admin.share_tokens"), class: "action-icon--edit" %>
+                <%= icon_link_to "clipboard-line", "#", t("actions.copy_link", scope: "decidim.admin.share_tokens"), class: "action-icon--copy", data: { "clipboard-copy" => "#js-token-#{share_token.id}", "clipboard-content" => share_token.url,"clipboard-copy-label" => t(".copied"),"clipboard-copy-message" => t(".copy_message") } %>
+                <%= icon_link_to "eye-line", share_token.url, t("actions.preview", scope: "decidim.admin.share_tokens"), class: "action-icon--preview", target: :blank %>
+                <%= icon_link_to "delete-bin-line", share_tokens_path(:destroy, id: share_token ), t("actions.destroy", scope: "decidim.admin.share_tokens"), class: "action-icon--remove", method: :delete, data: { confirm: t("actions.confirm_destroy", scope: "decidim.admin.share_tokens") } %>
+              </td>
+            </tr>
+          <% end %>
+        </tbody>
+      </table>
+    </div>
+  <% else %>
+    <p><%= t(".empty_html", new_token_link: link_to(t(".create_new_token"), share_tokens_path(:new) , class: "button button__text-secondary")) %></p>
+  <% end %>
+</div>
+<%= decidim_paginate @share_tokens %>

data/app/views/decidim/admin/share_tokens/new.html.erb

@@ -0,0 +1,69 @@
+<% add_decidim_page_title(t(".title", name: resource_title)) %>
+
+<div class="item_show__header">
+  <h1 class="item_show__header-title">
+    <%= t ".title", name: resource_title %>
+    <a class="button button__sm button__secondary" href="<%= share_tokens_path %>"><%= t("share_tokens.index.back_to_share_tokens", scope: "decidim.admin") %></a>
+  </h1>
+</div>
+<div class="item__edit-form">
+  <%= decidim_form_for(@form, url: share_tokens_path(:create), html: { class: "form-defaults form new_share_token" }) do |f| %>
+    <div class="card">
+      <div class="card-section">
+        <div class="form__wrapper">
+          <div class="card pt-4">
+            <div class="row column">
+              <label><%= t("share_tokens.form.token", scope: "decidim.admin") %></label>
+                <%= f.collection_radio_buttons :automatic_token, [
+                  [t("share_tokens.form.automatic", scope: "decidim.admin"), true],
+                  [t("share_tokens.form.custom", scope: "decidim.admin"), false]
+                ], :last, :first do |b| %>
+                <div>
+                  <%= b.label do %>
+                    <%= b.radio_button %>
+                    <%= b.text %>
+                  <% end %>
+                </div>
+              <% end %>
+              <div id="token-field-wrapper" class="hidden">
+                <%= f.text_field :token, label: t("share_tokens.form.custom_token", scope: "decidim.admin"), style: "text-transform: uppercase" %>
+              </div>
+            </div>
+            <%= render partial: "form", object: f %>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="item__edit-sticky">
+      <div class="item__edit-sticky-container">
+        <%= f.submit t(".create"), class: "button button__sm button__secondary" %>
+      </div>
+    </div>
+  <% end %>
+</div>
+
+<script>
+  document.addEventListener("DOMContentLoaded", () => {
+    const automaticTokenRadioButton = document.querySelector("input[name='share_token[automatic_token]'][value='true']");
+    const automaticTokenRadioButtons = document.querySelectorAll("input[name='share_token[automatic_token]']");
+    const tokenWrapper = document.getElementById("token-field-wrapper");
+    const tokenInput = document.querySelector("input[name='share_token[token]']");
+
+    const toggleTokenField = () => {
+      if (automaticTokenRadioButton.checked) {
+        tokenWrapper.classList.add("hidden");
+        tokenInput.value = "";
+        tokenInput.removeAttribute("required");
+      } else {
+        tokenWrapper.classList.remove("hidden");
+        tokenInput.focus();
+      }
+    };
+
+    automaticTokenRadioButtons.forEach(button => {
+      button.addEventListener("change", toggleTokenField);
+    });
+
+    toggleTokenField();
+  });
+</script>

data/app/views/decidim/admin/taxonomies/_filters.html.erb

@@ -0,0 +1,19 @@
+  <div class="filters__section">
+    <div class="fcell search mt-4">
+      <%= search_form_for(@query, url: url_for) do |form| %>
+        <div class="input-group">
+          <%= form.search_field(
+                :name_or_children_name_cont,
+                class: "input-group-field bg-secondary/5",
+                label: false,
+                placeholder: t("filters.search_placeholder", scope: "decidim.admin.taxonomies")
+              ) %>
+          <div class="input-group-button">
+            <button type="submit" class="text-secondary" aria-label="<%= t("decidim.search.term_input_placeholder") %>">
+              <%= icon "search-line", class: "fill-secondary w-4 h-4" %>
+            </button>
+          </div>
+        </div>
+      <% end %>
+    </div>
+  </div>

data/app/views/decidim/admin/taxonomies/_form.html.erb

@@ -0,0 +1,5 @@
+<div class="form__wrapper">
+  <div class="pt-4">
+    <%= form.translated :text_field, :name, autofocus: true, class: "js-hashtags", hashtaggable: true, aria: { label: :name } %>
+  </div>
+</div>

data/app/views/decidim/admin/taxonomies/_row.html.erb

@@ -0,0 +1,40 @@
+<tr class="draggable-taxonomy" data-taxonomy-id="<%= taxonomy.id %>" role="row">
+  <td role="cell" class="w-12 js-drag-handle"><%== icon("draggable", class: "dragger") %></td>
+  <td role="cell">
+    <ul class="taxonomy">
+      <% if taxonomy.root? %>
+        <li><%= link_to translated_attribute(taxonomy.name), edit_taxonomy_path(taxonomy), class: "js-drawer-editor" %></li>
+        <li><%= taxonomy.all_children.count %></li>
+        <li><%= taxonomy.filters_count %></li>
+      <% else %>
+        <li><%= link_to translated_attribute(taxonomy.name), edit_taxonomy_item_path(taxonomy_id: taxonomy.root_taxonomy.id, id: taxonomy.id), class: "js-drawer-editor" %></li>
+        <li><%= taxonomy.taxonomizations_count %></li>
+      <% end %>
+
+      <li class="taxonomy-list__actions"><%= render "taxonomy_actions", taxonomy: %></li>
+    </ul>
+    <% if with_children && taxonomy.children.any? %>
+      <div class="js-sortable js-draggable-<%= taxonomy.id %>"
+           data-draggable-handle=".js-drag-handle"
+           data-draggable-accept-from=".js-draggable-<%= taxonomy.id %>"
+           data-sort-url="<%= reorder_taxonomies_path %>"
+           data-parent-id="<%= taxonomy.id %>">
+        <% taxonomy.children.each do |child| %>
+          <%= render partial: "decidim/admin/taxonomies/row_children", locals: { child:, class_name: "", grandchild: false } %>
+
+          <% if child.children.any? %>
+            <div class="js-sortable js-draggable-<%= child.id %>"
+                 data-draggable-handle=".js-drag-handle"
+                 data-draggable-accept-from=".js-draggable-<%= child.id %>"
+                 data-sort-url="<%= reorder_taxonomies_path %>"
+                 data-parent-id="<%= child.id %>">
+              <% child.children.each do |grandchild| %>
+                <%= render partial: "decidim/admin/taxonomies/row_children", locals: { child: grandchild, class_name: "ml-6", grandchild: true } %>
+              <% end %>
+            </div>
+          <% end %>
+        <% end %>
+      </div>
+    <% end %>
+  </td>
+</tr>

data/app/views/decidim/admin/taxonomies/_row_children.html.erb

@@ -0,0 +1,8 @@
+<ul class="taxonomy <%= class_name %>" data-taxonomy-id="<%= child.id %>">
+  <li class="js-drag-handle">
+    <%== icon("draggable", class: "dragger with-children") %>
+    <%= link_to translated_attribute(child.name), edit_taxonomy_item_path(taxonomy_id: child.root_taxonomy.id, id: child.id), class: "js-drawer-editor" %>
+  </li>
+  <li><%= child.taxonomizations_count %></li>
+  <li class="taxonomy-list__actions"><%= render "taxonomy_actions", taxonomy: child %></li>
+</ul>

data/app/views/decidim/admin/taxonomies/_table.html.erb

@@ -0,0 +1,86 @@
+<div class="table-scroll mt-8" role="table" aria-labelledby="taxonomies-title">
+  <table class="table-list">
+    <thead>
+    <tr role="row">
+      <th scope="col" role="columnheader" class="w-12"><span class="sr-only">Move</span></th>
+      <th scope="col" role="columnheader">
+        <ul class="taxonomy">
+          <li><%= t("decidim.admin.taxonomies.name") %></li>
+          <% if taxonomy.blank? %>
+            <li><%= t("decidim.admin.taxonomies.total_items") %></li>
+            <li><%= t("decidim.admin.taxonomies.total_filters") %></li>
+          <% else %>
+            <li><%= t("decidim.admin.taxonomies.count") %></li>
+          <% end %>
+          <li><%= t("decidim.admin.taxonomies.actions.actions") %></li>
+        </ul>
+      </th>
+    </tr>
+    </thead>
+    <%#
+     If you ever reach this template as source of inspiration for a table row drag and drop functionality,
+     please take in to account that this is intended to manage a complex case, as it has the capability of nesting elements (a draggable within a draggable) so that you can reorder parents and children.
+     In Decidim there are two ways to implement a sortable (but both use the same library html5sortable.es).
+
+     The simpler one is just to add the [data-draggable-table] attribute in the parent element, it requires to also add the [data-sort-url] attribute. This URL will be used to send a PUT request and ignore the result.
+    This implementation is used for instance in the admin's components table.
+
+     For cases when you need more control you can use the second implementation, which is the one used here.
+     It uses the "js-sortable" class to initialize the element and allows you to use all the options documented in https://github.com/lukasoppermann/html5sortable as [data-sortable-OPTION] in the html.
+     Take into account, that, if using the second option, you need to implement the "sortupdate" event by yourself (see this file for an example). This allows you to control the return of the request for instance.
+    %>
+    <tbody class="js-sortable js-draggable-root" data-draggable-handle=".js-drag-handle" data-draggable-accept-from=".js-draggable-root" data-sort-url="<%= reorder_taxonomies_path %>" role="rowgroup">
+      <% if path = path_to_prev_page(collection) %>
+        <tr class="draggable-taxonomy change-page" data-prev-page="<%= path %>" data-taxonomy-id="<%= collection.page(collection.prev_page).per(per_page).last&.id %>"><td colspan="2"><%= t(".to_prev_page") %></td></tr>
+      <% end %>
+
+      <% collection.each do |taxonomy| %>
+        <%= render "row", taxonomy:, with_children: !taxonomy.root? %>
+      <% end %>
+      <% if path = path_to_next_page(collection) %>
+        <tr class="draggable-taxonomy change-page" data-next-page="<%= path %>" data-taxonomy-id="<%= collection.page(collection.next_page).per(per_page).first&.id %>"><td colspan="2"><%= t(".to_next_page") %></td></tr>
+      <% end %>
+    </tbody>
+  </table>
+</div>
+
+<%= decidim_paginate collection %>
+
+<script>
+  window.addEventListener("DOMContentLoaded", () => {
+    const sortables = document.querySelectorAll(".js-sortable");
+    const nextPage = document.querySelector("[data-next-page]");
+    const prevPage = document.querySelector("[data-prev-page]");
+    const token = document.querySelector('meta[name="csrf-token"]');
+
+    sortables.forEach(function(sortable) {
+      sortable.addEventListener("sortupdate", function (event) {
+        sortable.classList.add("spinner-container");
+        const itemsId = Array.from(event.target.children).map(item => item.dataset.taxonomyId);
+        const parentId = event.target.dataset.parentId || event.target.closest('[data-taxonomy-id]')?.dataset.taxonomyId || null;
+
+        fetch(sortable.dataset.sortUrl, {
+          method: "PATCH",
+          headers: {
+            "Content-Type": "application/json",
+            "X-CSRF-Token": token && token.getAttribute("content")
+          },
+          body: JSON.stringify({page: <%= collection.current_page %>, per_page: <%= per_page %>, ids_order: itemsId, parent_id: parentId})
+        }).then(function(response) {
+          if(response.ok) {
+            // If moved on top of the next page, lets go to the next page
+            if(!document.querySelector(".draggable-taxonomy:last-child").hasAttribute("data-next-page") && nextPage) {
+              location.href = nextPage.dataset.nextPage;
+            }
+            // If moved on top of the previous page, lets go to the previous page
+            else if(!document.querySelector(".draggable-taxonomy:first-child").hasAttribute("data-prev-page") && prevPage) {
+              location.href = prevPage.dataset.prevPage;
+            } else {
+              sortable.classList.remove("spinner-container");
+            }
+          }
+        });
+      });
+    });
+  });
+</script>

data/app/views/decidim/admin/taxonomies/_taxonomy_actions.html.erb

@@ -0,0 +1,15 @@
+<% if allowed_to? :update, :taxonomy, taxonomy: taxonomy %>
+  <% if taxonomy.root? %>
+    <%= icon_link_to "pencil-line", edit_taxonomy_path(taxonomy), t("actions.edit", scope: "decidim.admin.taxonomies"), class: "action-icon--edit js-drawer-editor" %>
+    <%= icon_link_to "filter-line", taxonomy_filters_path(taxonomy), t("actions.filters", scope: "decidim.admin.taxonomies"), class: "-action-icon--edit" %>
+  <% else %>
+    <%= icon_link_to "pencil-line", edit_taxonomy_item_path(taxonomy_id: taxonomy.root_taxonomy.id, id: taxonomy.id), t("actions.edit", scope: "decidim.admin.taxonomies"), class: "action-icon--edit js-drawer-editor" %>
+  <% end %>
+<% else %>
+  <span class="action-space icon"></span>
+<% end %>
+<% if allowed_to? :destroy, :taxonomy, taxonomy: taxonomy %>
+  <%= icon_link_to "delete-bin-line", taxonomy, t("actions.destroy", scope: "decidim.admin.taxonomies"), class: "action-icon--remove", method: :delete, data: { confirm: t(".confirm_destroy", name: strip_tags(translated_attribute(taxonomy.name))) } %>
+<% else %>
+  <span class="action-space icon"></span>
+<% end %>

data/app/views/decidim/admin/taxonomies/edit.html.erb

@@ -0,0 +1,87 @@
+<% add_decidim_page_title(t(".title", taxonomy_name: translated_attribute(taxonomy.name))) %>
+
+<div class="item_show__header">
+  <h1 class="item_show__header-title">
+    <%= t(".title", taxonomy_name: translated_attribute(taxonomy.name)) %>
+    <%= link_to :back, class: "button button__transparent-secondary button__sm" do %>
+      <%= t(".back") %>
+    <% end %>
+  </h1>
+</div>
+
+<div class="item__edit-form">
+  <%= decidim_form_for(@form, html: { class: "form-defaults form edit_taxonomy_" }) do |f| %>
+    <%= render partial: "form", object: f %>
+    <div class="item__edit-sticky">
+      <div class="item__edit-sticky-container">
+        <%= f.submit t(".update"), class: "button button__sm button__secondary" %>
+      </div>
+    </div>
+  <% end %>
+</div>
+
+<div class="item__edit-form">
+  <h2 class="item_show__header-title mb-4">
+    <%= t(".subtitle", taxonomy_name: translated_attribute(taxonomy.name)) %>
+    <%= link_to t(".new_item"), new_taxonomy_item_path(taxonomy), id: "new-item", class: "js-drawer-editor button button__sm button__secondary new" %>
+  </h2>
+
+  <% if collection.any? %>
+    <%= render "filters" %>
+
+    <% if @taxonomies.any? %>
+      <p class="help-text mt-4"><%= t(".description") %></p>
+      <%= render "table", collection: @taxonomies %>
+    <% else %>
+      <p class="mt-8"><%= t("no_items_found", scope: "decidim.admin.taxonomies.index") %></p>
+    <% end %>
+  <% else %>
+    <p class="mt-8"><%= t(".no_items") %></p>
+  <% end %>
+</div>
+
+<%= decidim_drawer id: "item-form" do %>
+  <div data-dialog-container class="layout-content"></div>
+<% end %>
+
+<script>
+  document.addEventListener("decidim:loaded", function() {
+    var drawer = window.Decidim.currentDialogs["item-form"];
+    var drawerButtons = document.querySelectorAll(".js-drawer-editor");
+    var container = drawer.dialog.querySelector("[data-dialog-container]");
+
+    function setDrawerContent(content) {
+      container.innerHTML = content;
+
+      var form = container.querySelector("#taxonomy-item-form");
+      if(!form) {
+        return location.reload();
+      }
+      window.initFoundation(container);
+
+      form.addEventListener("ajax:beforeSend", function(evt) {
+        form.classList.add("spinner-container");
+      });
+
+      form.addEventListener("ajax:success", function(evt) {
+        var [data, _status, xhr] = event.detail;
+        if(xhr.responseURL.indexOf(location.pathname) > -1) {
+          location.href = xhr.responseURL;
+        } else {
+          setDrawerContent(data.body.innerHTML)
+        }
+      });
+    }
+
+    drawerButtons.forEach(function(button) {
+      button.addEventListener("click", function(evt) {
+        evt.preventDefault();
+        container.innerHTML = '<div class="spinner-container">&nbsp;</div>';
+        fetch(button.getAttribute("href"))
+          .then(function(response) { return response.text() })
+          .then(function(html) { setDrawerContent(html) });
+        drawer.open();
+      });
+    });
+  });
+</script>

data/app/views/decidim/admin/taxonomies/index.html.erb

@@ -0,0 +1,28 @@
+<% add_decidim_page_title(t("taxonomies", scope: "decidim.admin.titles")) %>
+
+<div class="card" aria-labelledby="taxonomies-title">
+  <div class="item_show__header">
+    <div class="w-full">
+      <h1 class="item_show__header-title" id="taxonomies-title">
+        <%= t "decidim.admin.titles.taxonomies" %>
+        <% if allowed_to? :create, :taxonomy %>
+          <%= link_to t(".new_taxonomy"), new_taxonomy_path, class: "button button__sm button__secondary new" %>
+        <% end %>
+      </h1>
+      <p class="mt-2 text-gray-600">
+        <%= t(".description") %>
+      </p>
+    </div>
+  </div>
+  <% if collection.any? %>
+    <%= render "filters" %>
+
+    <% if @taxonomies.any? %>
+      <%= render "table", collection: @taxonomies if @taxonomies %>
+    <% else %>
+      <p><%= t(".no_items_found") %></p>
+    <% end %>
+  <% else %>
+    <p><%= t("decidim.admin.taxonomies.no_taxonomies") %></p>
+  <% end %>
+</div>

data/app/views/decidim/admin/taxonomies/new.html.erb

@@ -0,0 +1,16 @@
+<% add_decidim_page_title(t(".title")) %>
+<div class="item_show__header">
+  <h1 class="item_show__header-title">
+    <%= t ".title" %>
+  </h1>
+</div>
+<div class="item__edit-form">
+  <%= decidim_form_for(@form, url: taxonomies_path, html: { class: "form-defaults form new_taxonomy_" }) do |f| %>
+    <%= render partial: "form", object: f %>
+    <div class="item__edit-sticky">
+      <div class="item__edit-sticky-container">
+        <%= f.submit t(".create"), class: "button button__sm button__secondary" %>
+      </div>
+    </div>
+  <% end %>
+</div>

data/app/views/decidim/admin/taxonomy_filters/_check_boxes.html.erb

@@ -0,0 +1,10 @@
+<%= form.collection_check_boxes :taxonomy_items, collection, :value, :name do |item| %>
+  <div>
+    <%= item.label { item.check_box(autocomplete: false) + item.text } %>
+  </div>
+  <% if item.object.children.any? %>
+    <div class="ml-4 js-taxonomy-children" data-parent="<%= item.object.value %>">
+      <%= render "decidim/admin/taxonomy_filters/check_boxes", form:, collection: item.object.children %>
+    </div>
+  <% end %>
+<% end %>

data/app/views/decidim/admin/taxonomy_filters/_form.html.erb

@@ -0,0 +1,96 @@
+<div class="form__wrapper">
+  <div class="card pt-4">
+    <div class="card-section">
+      <div class="row column">
+        <%= form.text_field :root_taxonomy_id, value: translated_attribute(root_taxonomy.name), disabled: true, class: "w-full" %>
+        <%= form.hidden_field :root_taxonomy_id %>
+      </div>
+    </div>
+    <div class="card-section">
+      <div class="row column">
+        <%= form.translated :text_field, :name, aria: { label: :name }, placeholder: translated_attribute(root_taxonomy.name), help_text: t(".name_help") %>
+      </div>
+      <div class="row column">
+        <%= form.translated :text_field, :internal_name, aria: { label: :internal_name }, placeholder: translated_attribute(root_taxonomy.name) %>
+      </div>
+    </div>
+  </div>
+
+  <div class="card">
+    <div class="card-section">
+      <% if root_taxonomy.children.any? %>
+        <div class="card-divider">
+          <h2><%= t(".items", count: "<strong class=\"js-filter-children-count\">#{root_taxonomy.all_children.count}</strong>").html_safe %></h2>
+        </div>
+
+        <div class="row column">
+          <div class="table-scroll half-vh">
+            <label><%= check_box_tag "selectAll" %> <%= t(".all") %></label>
+            <%= render "decidim/admin/taxonomy_filters/check_boxes", form:, collection: @form.items_collection %>
+          </div>
+        </div>
+      <% else %>
+        <div class="card-divider">
+          <h2><%= t(".no_items") %></h2>
+        </div>
+      <% end %>
+    </div>
+  </div>
+
+  <div class="card">
+    <div class="card-section">
+      <div class="card-divider">
+        <h2><%= t(".space_filter") %></h2>
+      </div>
+      <div class="row column">
+        <%= form.collection_check_boxes :participatory_space_manifests, @form.available_participatory_space_manifests, :id, :name do |b| %>
+          <div>
+            <%= b.label { b.check_box + b.text } %>
+          </div>
+        <% end %>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+  document.addEventListener("DOMContentLoaded", function() {
+    var selectAll = document.querySelector("[name='selectAll']");
+    var checkBoxes = document.querySelectorAll("[type='checkbox'][name='taxonomy_filter[taxonomy_items][]']");
+    var notChecked = document.querySelectorAll("[type='checkbox'][name='taxonomy_filter[taxonomy_items][]']:not([checked])");
+    var count = document.querySelector(".js-filter-children-count");
+
+    var updateCounter = function() {
+      var checked = Array.from(checkBoxes).filter(function(checkbox) {
+        return checkbox.checked;
+      });
+      count.innerHTML = checked.length;
+    };
+
+    var toggleChildrenSelect = function(checkbox) {
+      var children = document.querySelectorAll(".js-taxonomy-children[data-parent='" + checkbox.value + "'] [type='checkbox'][name='taxonomy_filter[taxonomy_items][]']");
+      children.forEach(function(child) {
+        child.checked = checkbox.checked;
+        toggleChildrenSelect(child);
+      });
+      updateCounter();
+    }
+
+    selectAll.checked = notChecked.length === 0;
+    selectAll.addEventListener("change", function() {
+      checkBoxes.forEach(function(checkbox) {
+        checkbox.checked = selectAll.checked;
+      });
+      updateCounter();
+    });
+
+    checkBoxes.forEach(function(checkbox) {
+      checkbox.addEventListener("change", function() {
+        updateCounter();
+        toggleChildrenSelect(checkbox);
+      });
+    });
+
+    updateCounter();
+  });
+</script>

data/app/views/decidim/admin/taxonomy_filters/_table.html.erb

@@ -0,0 +1,33 @@
+<div class="table-scroll mt-8" role="table" aria-labelledby="taxonomies-title">
+  <table class="table-list">
+    <thead>
+      <tr role="row">
+        <th><%= t(".internal_name") %></th>
+        <th><%= t(".name") %></th>
+        <th><%= t(".components_count") %></th>
+        <th class="w-16"><%= t(".actions") %></th>
+      </tr>
+    </thead>
+    <tbody role="rowgroup">
+      <% collection.each do |taxonomy_filter| %>
+        <tr>
+          <td><%= translated_attribute(taxonomy_filter.internal_name) %></td>
+          <td><%= translated_attribute(taxonomy_filter.name) %></td>
+          <td><%= taxonomy_filter.components_count %></td>
+          <td>
+            <% if allowed_to? :update, :taxonomy_filter, taxonomy_filter: %>
+              <%= icon_link_to "pencil-line", edit_taxonomy_filter_path(root_taxonomy, taxonomy_filter), t(".edit"), class: "action-icon--edit" %>
+            <% else %>
+              <span class="action-space icon"></span>
+            <% end %>
+            <% if allowed_to? :destroy, :taxonomy_filter, taxonomy_filter: %>
+              <%= icon_link_to "delete-bin-line", taxonomy_filter_path(root_taxonomy, taxonomy_filter), t(".destroy"), class: "action-icon--remove", method: :delete, data: { confirm: t(".confirm_destroy", name: strip_tags(translated_attribute(taxonomy_filter.name))) } %>
+            <% else %>
+              <span class="action-space icon"></span>
+            <% end %>
+          </td>
+        </tr>
+      <% end %>
+    </tbody>
+  </table>
+</div>

data/app/views/decidim/admin/taxonomy_filters/edit.html.erb

@@ -0,0 +1,22 @@
+<% add_decidim_page_title(t(".title")) %>
+
+<div class="item_show__header">
+  <h1 class="item_show__header-title">
+    <%= t(".title") %>
+    <%= link_to :back, class: "button button__transparent-secondary button__sm" do %>
+      <%= t(".back") %>
+    <% end %>
+  </h1>
+</div>
+
+<div class="item__edit-form">
+  <%= decidim_form_for(@form, url: taxonomy_filter_path(root_taxonomy, id: taxonomy_filter), html: { class: "form form-defaults new_taxonomy_filter_" }) do |f| %>
+    <%= render partial: "decidim/admin/taxonomy_filters/form", object: f %>
+
+    <div class="item__edit-sticky">
+      <div class="item__edit-sticky-container">
+        <%= f.submit t(".update"), class: "button button__sm button__secondary" %>
+      </div>
+    </div>
+  <% end %>
+</div>