feat(pat structure): Improve selection button and popover

The selection button shows now the number of selected and maximum number of items within the current folder.
The corresponding popover offers the option to select all items, all visible items on the page and to cancel the selection.
The previous popover to manage the selected items is gone.
There are also some minor fixes, e.g. one to prevent degrading the breadcrumb to show only ids, but rather keep the titles.
The upper-left checkbox in the table for selecting all the items has now a tooltip.

Author: pgrunewald

src/pat/structure/js/views/app.js

@@ -105,12 +105,11 @@ export default BaseView.extend({
 
         this.wellView = new SelectionWellView({
             collection: this.selectedCollection,
-            triggerView: this.toolbar.get("selected-items"),
+            triggerView: this.toolbar.get("change-selection"),
             app: this,
-            id: "selected-items",
+            id: "change-selection",
         });
 
-        this.toolbar.get("selected-items").disable();
         this.buttons.disable();
 
         let timeout = 0;
@@ -241,10 +240,8 @@ export default BaseView.extend({
 
     updateButtons: function () {
         if (this.selectedCollection.length) {
-            this.toolbar.get("selected-items").enable();
             this.buttons.enable();
         } else {
-            this.toolbar.get("selected-items").disable();
             this.buttons.disable();
         }
 
@@ -409,10 +406,11 @@ export default BaseView.extend({
 
         items.push(
             new SelectionButtonView({
-                title: _t("Selected"),
-                id: "selected-items",
+                title: _t("${current} of ${total} selected", { current: 0, total: 0 }),
+                id: "change-selection",
                 tooltip: _t("Manage selection"),
                 collection: this.selectedCollection,
+                appCollection: this.collection,
                 icon: "plone-selection",
             })
         );

src/pat/structure/js/views/selectionbutton.js

@@ -1,9 +1,8 @@
 import ButtonView from "../../../../core/ui/views/button";
-import tplButton from "../../templates/selection_button.xml";
 
 export default ButtonView.extend({
     collection: null,
-    template: tplButton,
+    template: '<%- _t("${current} of ${total} selected", { current: current, total: total })  %>',
 
     initialize: function (options) {
         ButtonView.prototype.initialize.apply(this, [options]);
@@ -26,15 +25,10 @@ export default ButtonView.extend({
         }
     },
 
-    serializedModel: function () {
-        const obj = {
-            icon: "",
-            title: this.options.title,
-            length: 0,
+    serializedModel: function() {
+        return {
+            current: (this.collection !== null) ? this.collection.length : 0,
+            total: (this.appCollection.state.totalRecords) ? this.appCollection.state.totalRecords : 0,
         };
-        if (this.collection !== null) {
-            obj.length = this.collection.length;
-        }
-        return obj;
     },
 });

src/pat/structure/js/views/selectionwell.js

@@ -3,25 +3,26 @@ import _ from "underscore";
 import PopoverView from "../../../../core/ui/views/popover";
 import utils from "../../../../core/utils";
 import ItemTemplate from "../../templates/selection_item.xml";
+import Actions from "../actions";
+import _t from "../../../../core/i18n-wrapper";
 
 export default PopoverView.extend({
-    className: "popover selected-items",
+    className: "popover change-selection",
 
-    title: _.template(
-        '<input type="text" class="filter" placeholder="<%- _t("Filter") %>" />' +
-            '<a href="#" class=" remove-all">' +
-            '<%= removeIcon %> <%- _t("remove all") %></a>'
-    ),
+
+    title: _t("Change selection"),
 
     content: _.template(
-        "<% collection.each(function(item) { %>" +
-            "<%= item_template($.extend({'removeIcon': removeIcon}, item.toJSON())) %>" +
-            "<% }); %>"
+        '<div class="list-group">' +
+        '<a href="#" class="list-group-item list-group-item-action select-all"><%= selectAllIcon %> <%- _t("Select all items in the folder") %></a>' +
+        '<a href="#" class="list-group-item list-group-item-action select-all-visible"><%= selectPageIcon %> <%- _t("Select all items on this page") %></a>' +
+        '<a href="#" class="list-group-item list-group-item-action remove-all"><%= removeIcon %> <%- _t("Cancel selection") %></a>' +
+        '</div>'
     ),
 
     events: {
-        "click a.remove": "itemRemoved",
-        "keyup input.filter": "filterSelected",
+        "click .select-all": "selectAll",
+        "click .select-all-visible": "selectVisible",
         "click .remove-all": "removeAll",
     },
 
@@ -39,35 +40,33 @@ export default PopoverView.extend({
 
     render: async function () {
         this.options["removeIcon"] = await utils.resolveIcon("x-circle");
+        this.options["selectAllIcon"] = await utils.resolveIcon("check2-all");
+        this.options["selectPageIcon"] = await utils.resolveIcon("check2");
         PopoverView.prototype.render.call(this);
         if (this.collection.length === 0) {
             this.$el.removeClass("active");
         }
         return this;
     },
-
-    itemRemoved: function (e) {
-        e.preventDefault();
-        const uid = $(e.currentTarget).data("uid");
-        this.collection.removeByUID(uid);
-        if (this.collection.length !== 0) {
-            // re-rendering causes it to close, reopen
-            this.show();
-        }
+    selectAll: function (e) {
+        // use the actions module as it has a handy "selectAll" method
+        const actions = new Actions({
+            app: this.options.app,
+            model: {
+                attributes: this.options.app.options,
+            },
+            selectedCollection: this.options.collection,
+        });
+        actions.selectAll(e);
+        this.options.app.tableView.setContextInfo();
+        this.hide();
     },
-
-    filterSelected: function (e) {
-        const val = $(e.target).val().toLowerCase();
-        for (const item of $(".selected-item", this.$el)) {
-            const $el = $(item);
-            if ($el.text().toLowerCase().indexOf(val) === -1) {
-                $el.hide();
-            } else {
-                $el.show();
-            }
-        }
+    selectVisible: function (e) {
+        e.preventDefault();
+        this.collection.reset();
+        $('input[type="checkbox"]', this.app.tableView.$('tbody')).prop('checked', true).change();
+        this.hide();
     },
-
     removeAll: function (e) {
         e.preventDefault();
         this.collection.reset();

src/pat/structure/js/views/table.js

@@ -68,7 +68,12 @@ export default BaseView.extend({
         this.trigger("context-info:set");
     },
 
-    render: async function () {
+    /**
+     * Render method
+     * @param {any} triggerCollection – if render is called as callback for a Backbone collection, Backbone will
+     *                      pass the collection as first argument
+     */
+    render: async function (triggerCollection) {
         // By default do not start sorted by any column
         // Ignore first column and the last one (activeColumns.length + 1)
         // Do not show paginator, search or information, we only want column sorting
@@ -156,6 +161,14 @@ export default BaseView.extend({
             await table_row_rendering_finished();
             events.remove_event_listener = (this.el, "table_row_rendering_finished__listener"); // prettier-ignore
             registry.scan(this.$el);
+
+            // Set the context (again) after rerendering. If render was called after a collection sync – which is the
+            // case if Backbone passed the collection as eventObject – do nothing, as collection syncs are always
+            // followed by a context sync followed by a 'context-info-loaded' event,
+            // which will trigger setContextInfo with the new context anyway.
+            if (this.contextInfo && triggerCollection !== this.collection) {
+                this.setContextInfo();
+            }
         }
 
         this.$el
@@ -231,6 +244,7 @@ export default BaseView.extend({
     },
 
     selectAll: function (e) {
+        // select all items on the *current* page
         if ($(e.target).is(":checked")) {
             $('input[type="checkbox"]', this.$("tbody")).prop("checked", true).trigger("change");
         } else {
@@ -242,12 +256,6 @@ export default BaseView.extend({
         }
         this.setContextInfo();
     },
-    toggleSelectAll: function (e) {
-        const $el = $(e.target);
-        if (!$el.is(":checked")) {
-            this.$(".select-all").prop("checked", false);
-        }
-    },
 
     addReordering: function () {
         // if we have a custom query going on, we do not allow sorting.

src/pat/structure/structure.scss

@@ -40,7 +40,7 @@
             margin-right: 1em;
         }
 
-        #btn-selected-items,
+        #btn-change-selection,
         #btn-structure-rearrange,
         #btn-upload,
         #btn-filter {
@@ -292,38 +292,26 @@
         }
     }
 
-    .popover.selected-items {
+    .popover.change-selection {
         --bs-popover-max-width: 350px;
 
-        .items {
-            max-height: 300px;
-            overflow-y: auto;
-
-            .selected-item {
-                display: flex;
-                margin: 0 8px 3px 0;
-                border-radius: 6px;
-                padding: 4px 6px;
-                word-break: break-all;
-                &:hover {
-                    background-color: var(--bs-light);
-                }
-
-                a {
-                    padding-right:.5rem;
+        .popover-content {
+            padding: 0;
+        }
 
-                    &:hover {
-                        text-decoration: none;
-                    }
+        .list-group-item:first-child {
+            border-top-left-radius: unset;
+            border-top-right-radius: unset;
+        }
 
-                    &:before {
-                        color: var(--bs-gray);
+        a {
+            svg {
+                margin-right: calc(var(--bs-list-group-item-padding-x) * 0.5);
+                display: inline-block;
+            }
 
-                        &:hover {
-                            color: var(--bs-gray-dark);
-                        }
-                    }
-                }
+            &:hover {
+                text-decoration: none;
             }
         }
     }

src/pat/structure/templates/selection_button.xml

@@ -18,7 +18,7 @@
        data-pat-datatables="<%- datatables_options %>">
   <thead>
     <tr>
-      <th class="selection"><label for="selectAllInputCheckbox" class="hiddenStructure" aria-label="<%- _t('Select all') %>"><%- _t('Select all') %></label><input id="selectAllInputCheckbox" type="checkbox" class="select-all form-check-input" /></th>
+      <th class="selection"><label for="selectAllInputCheckbox" class="hiddenStructure" aria-label="<%- _t('Select all items on this page') %>"><%- _t('Select all items on this page') %></label><input id="selectAllInputCheckbox" type="checkbox" class="select-all form-check-input pat-tooltip" title="<%- _t('Select all items on this page') %>"/></th>
       <th class="title"><%- _t('Title') %></th>
       <% activeColumns.forEach((column, idx) => { %>
         <% if(column !== 'Description' && hasOwnProperty.call(availableColumns, column)) { %>

src/pat/structure/templates/table.xml

@@ -290,7 +290,7 @@ msgid "Configure displayed columns"
 msgstr ""
 
 #: ./src/pat/structure/js/views/app.js
-msgid "Selected"
+msgid "${current} of ${total} selected"
 msgstr ""
 
 #: ./src/pat/structure/js/views/app.js
@@ -358,11 +358,19 @@ msgid "Sorting the content on the base of the site could affect your navigation
 msgstr ""
 
 #: ./src/pat/structure/js/views/selectionwell.js
-msgid "Filter"
+msgid "Change selection"
+msgstr ""
+
+#: ./src/pat/structure/js/views/selectionwell.js
+msgid "Select all items in the folder"
+msgstr ""
+
+#: ./src/pat/structure/js/views/selectionwell.js
+msgid "Select all items on this page"
 msgstr ""
 
 #: ./src/pat/structure/js/views/selectionwell.js
-msgid "remove all"
+msgid "Cancel selection"
 msgstr ""
 
 #: ./src/pat/structure/js/views/table.js
@@ -385,6 +393,10 @@ msgstr ""
 msgid "Drag and drop reordering is disabled while filters are applied."
 msgstr ""
 
+#: ./src/pat/structure/js/views/textfilter.js
+msgid "Filter"
+msgstr ""
+
 #: ./src/pat/structure/templates/actionmenu.xml
 msgid "Actions"
 msgstr ""
@@ -409,10 +421,6 @@ msgstr ""
 msgid "Root"
 msgstr ""
 
-#: ./src/pat/structure/templates/table.xml
-msgid "Select all"
-msgstr ""
-
 #: ./src/pat/structure/templates/tablerow.xml
 msgid "Excluded from navigation"
 msgstr ""