Add a checkbox to select all issues/PRs (#20177)

diff --git a/templates/repo/issue/list.tmpl b/templates/repo/issue/list.tmpl
index 04f7dcd6ae0d89c11177fd40fd4a654196dc4e51..2a53239f1c6f7d01abaa465889c5ad3f29d5b76d 100644 (file)
--- a/templates/repo/issue/list.tmpl
+++ b/templates/repo/issue/list.tmpl
@@ -28,6 +28,12 @@
                <div class="ui divider"></div>
                <div id="issue-filters" class="ui stackable grid">
                        <div class="six wide column">
+                               {{if $.CanWriteIssuesOrPulls}}
+                                       <div class="ui checkbox issue-checkbox-all vm">
+                                               <input type="checkbox"></input>
+                                               <label></label>
+                                       </div>
+                               {{end}}
                                {{template "repo/issue/openclose" .}}
                        </div>
                        <div class="ten wide right aligned column">

diff --git a/web_src/js/features/common-issue.js b/web_src/js/features/common-issue.js
index e894816fb6b06d39cd7b962089ffddc93a12dc2f..4a62089c60ca519c2d32134af719b01c046b5881 100644 (file)
--- a/web_src/js/features/common-issue.js
+++ b/web_src/js/features/common-issue.js
@@ -2,15 +2,34 @@ import $ from 'jquery';
 import {updateIssuesMeta} from './repo-issue.js';
 
 export function initCommonIssue() {
-  $('.issue-checkbox').on('click', () => {
-    const numChecked = $('.issue-checkbox').children('input:checked').length;
-    if (numChecked > 0) {
-      $('#issue-filters').addClass('hide');
-      $('#issue-actions').removeClass('hide');
+  const $issueSelectAllWrapper = $('.issue-checkbox-all');
+  const $issueSelectAll = $('.issue-checkbox-all input');
+  const $issueCheckboxes = $('.issue-checkbox input');
+
+  const syncIssueSelectionState = () => {
+    const $checked = $issueCheckboxes.filter(':checked');
+    const anyChecked = $checked.length !== 0;
+    const allChecked = anyChecked && $checked.length === $issueCheckboxes.length;
+
+    if (allChecked) {
+      $issueSelectAll.prop({'checked': true, 'indeterminate': false});
+    } else if (anyChecked) {
+      $issueSelectAll.prop({'checked': false, 'indeterminate': true});
     } else {
-      $('#issue-filters').removeClass('hide');
-      $('#issue-actions').addClass('hide');
+      $issueSelectAll.prop({'checked': false, 'indeterminate': false});
     }
+    // if any issue is selected, show the action panel, otherwise show the filter panel
+    $('#issue-filters').toggle(!anyChecked);
+    $('#issue-actions').toggle(anyChecked);
+    // there are two panels but only one select-all checkbox, so move the checkbox to the visible panel
+    $('#issue-filters, #issue-actions').filter(':visible').find('.column:first').prepend($issueSelectAllWrapper);
+  };
+
+  $issueCheckboxes.on('change', syncIssueSelectionState);
+
+  $issueSelectAll.on('change', () => {
+    $issueCheckboxes.prop('checked', $issueSelectAll.is(':checked'));
+    syncIssueSelectionState();
   });
 
   $('.issue-action').on('click', async function () {
@@ -41,7 +60,7 @@ export function initCommonIssue() {
   });
 
   // NOTICE: This event trigger targets Firefox caching behaviour, as the checkboxes stay
-  // checked after reload trigger ckecked event, if checkboxes are checked on load
+  // checked after reload trigger checked event, if checkboxes are checked on load
   $('.issue-checkbox input[type="checkbox"]:checked').first().each((_, e) => {
     e.checked = false;
     $(e).trigger('click');