Keep track of preselected cache options in localStorage

Resolves #9447

Author: brandonkelly

CHANGELOG-WIP.md

@@ -46,6 +46,7 @@
 - The `maxCachedCloudImageSize` config setting is now set to `0` by default. ([#17997](https://github.com/craftcms/cms/pull/17997))
 - System message emails are now rendered using GitHub-flavored Markdown. ([#18058](https://github.com/craftcms/cms/discussions/18058))
 - Drag-and-drop icons are now longer shown for devices that don’t support pointer events. ([#18067](https://github.com/craftcms/cms/pull/18067))
+- The Caches utility now keeps track of which options were previously selected. ([#9447](https://github.com/craftcms/cms/discussions/9447))
 
 ### Development
 - Reference tags now support fallback values when no attribute is specified. ([#17688](https://github.com/craftcms/cms/pull/17688))
@@ -118,6 +119,7 @@
 - `craft\services\ElementSources::sourceExists()` now has a `$page` argument. ([#17779](https://github.com/craftcms/cms/pull/17779))
 - `craft\web\Request::accepts()` now accepts wildcard characters (`*`) in the `$contentType` argument, to check for a range of MIME types (e.g. `application/*+json`).
 - `craft\web\Request::getAcceptsJson()` now returns `true` for requests with `Content-Type` headers that match `application/*+json`, in addition to `application/json`.
+- Checkbox selects can now be configured with a `storageKey` setting.
 - Deprecated `craft\fields\BaseRelationField::$showCardsInGrid`.
 - Deprecated `craft\fields\Matrix::$showCardsInGrid`.
 - Deprecated `craft\helpers\StringHelper::capitalizePersonalName()`. `toPascalCase()` should be used instead.

src/templates/_components/utilities/ClearCaches.twig

@@ -11,6 +11,7 @@
         options: cacheOptions,
         showAllOption: true,
         values: '*',
+        storageKey: 'cache-options',
     }) }}
 
     <div class="buttons">

src/templates/_includes/forms/checkboxSelect.twig

@@ -3,6 +3,7 @@
 {%- set values = values ?? [] %}
 {%- set disabled = disabled ?? false %}
 {%- set sortable = sortable ?? false %}
+{%- set storageKey = storageKey ?? null %}
 
 {% set options = options|map((value, key) => value is iterable ? value : {
     label: value,
@@ -25,6 +26,9 @@
 {% set containerAttributes = {
     id,
     class: ['checkbox-select']|merge((class ?? [])|explodeClass),
+    data: {
+      'storage-key': storageKey,
+    },
 }|merge(containerAttributes ?? [], recursive=true) %}
 
 {%- if block('attr') is defined %}

src/web/assets/cp/dist/cp.js

@@ -3089,7 +3089,9 @@ $.extend($.fn, {
   checkboxselect: function () {
     return this.each(function () {
       if (!$.data(this, 'checkboxSelect')) {
-        new Garnish.CheckboxSelect(this);
+        new Garnish.CheckboxSelect(this, {
+          storageKey: this.getAttribute('data-storage-key'),
+        });
       }
     });
   },

src/web/assets/cp/dist/cp.js.map

@@ -5,43 +5,93 @@ import $ from 'jquery';
 /**
  * Checkbox select class
  */
-export default Base.extend({
-  $container: null,
-  $all: null,
-  $options: null,
+export default Base.extend(
+  {
+    $container: null,
+    $all: null,
+    $options: null,
 
-  init: function (container) {
-    this.$container = $(container);
+    init: function (container, settings) {
+      this.$container = $(container);
+      this.setSettings(settings, Garnish.CheckboxSelect.defaults);
 
-    // Is this already a checkbox select?
-    if (this.$container.data('checkboxSelect')) {
-      console.warn('Double-instantiating a checkbox select on an element');
-      this.$container.data('checkboxSelect').destroy();
-    }
+      // Is this already a checkbox select?
+      if (this.$container.data('checkboxSelect')) {
+        console.warn('Double-instantiating a checkbox select on an element');
+        this.$container.data('checkboxSelect').destroy();
+      }
 
-    this.$container.data('checkboxSelect', this);
+      this.$container.data('checkboxSelect', this);
 
-    var $checkboxes = this.$container.find('input');
-    this.$all = $checkboxes.filter('.all:first');
-    this.$options = $checkboxes.not(this.$all);
+      var $checkboxes = this.$container.find('input');
+      this.$all = $checkboxes.filter('.all:first');
+      this.$options = $checkboxes.not(this.$all);
 
-    this.addListener(this.$all, 'change', 'onAllChange');
-  },
+      this.addListener(this.$all, 'change', 'onAllChange');
 
-  onAllChange: function () {
-    var isAllChecked = this.$all.prop('checked');
+      if (this.settings.storageKey) {
+        const selectedOptions = Craft.getLocalStorage(this.settings.storageKey);
+        if (selectedOptions) {
+          // all?
+          if (this.$all.length && selectedOptions.includes(this.$all.val())) {
+            if (!this.isAllChecked()) {
+              this.$all.prop('checked', true).trigger('change');
+            }
+          } else {
+            if (this.isAllChecked()) {
+              this.$all.prop('checked', false).trigger('change');
+            }
+            this.$options.each((i, checkbox) => {
+              const included = selectedOptions.includes(checkbox.value);
+              const checked = checkbox.checked;
+              if (included !== checked) {
+                checkbox.checked = included;
+                $(checkbox).trigger('change');
+              }
+            });
+          }
+        }
 
-    this.$options.prop({
-      checked: isAllChecked,
-      disabled: isAllChecked,
-    });
-  },
+        $checkboxes.on('change', () => {
+          const selectedOptions = [];
+          if (this.$all.prop('checked')) {
+            selectedOptions.push(this.$all.val());
+          } else {
+            this.$options.each((i, checkbox) => {
+              if (checkbox.checked) {
+                selectedOptions.push(checkbox.value);
+              }
+            });
+          }
+          Craft.setLocalStorage(this.settings.storageKey, selectedOptions);
+        });
+      }
+    },
+
+    isAllChecked: function () {
+      return this.$all.prop('checked');
+    },
+
+    onAllChange: function () {
+      const isAllChecked = this.isAllChecked();
+
+      this.$options.prop({
+        checked: isAllChecked,
+        disabled: isAllChecked,
+      });
+    },
 
-  /**
-   * Destroy
-   */
-  destroy: function () {
-    this.$container.removeData('checkboxSelect');
-    this.base();
+    /**
+     * Destroy
+     */
+    destroy: function () {
+      this.$container.removeData('checkboxSelect');
+      this.base();
+    },
   },
-});
+  {
+    defaults: {
+      storageKey: null,
+    },
+  }
+);