Merge pull request #1435 from plone/pgrunewald-clear-selection

Clear selection when changing path in structure pattern

Author: petschki

src/pat/structure/js/actionmenu.js

@@ -71,15 +71,6 @@ const menuOptions = {
         css: "",
         modal: false,
     },
-    "selectAll": {
-        method: "selectAll",
-        url: "#",
-        title: _t("Select all contained items"),
-        category: "dropdown",
-        icon: "check-all",
-        css: "",
-        modal: false,
-    },
 };
 
 const ActionMenu = function (menu) {
@@ -108,10 +99,6 @@ const ActionMenu = function (menu) {
         delete result["set-default-page"];
     }
 
-    if (!model.is_folderish) {
-        delete result.selectAll;
-    }
-
     const typeToViewAction = app.options.typeToViewAction;
     const viewAction = (typeToViewAction && typeToViewAction[model.portal_type]) || "";
     result.openItem.url = model.getURL + viewAction;

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();
         }
 
@@ -302,6 +299,9 @@ export default BaseView.extend({
         this.collection.setCurrentPath(path);
         // this.textfilter.clearTerm();
         this.clearStatus();
+
+        // remove the selection the user made
+        this.selectedCollection.reset();
     },
 
     getAjaxUrl: function (url) {
@@ -406,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]);
@@ -24,17 +23,14 @@ export default ButtonView.extend({
                 this
             );
         }
+        // keep count up-to-date
+        this.appCollection.on('reset sync', this.render, this);
     },
 
-    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("Manage 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;
             }
         }
     }