Add a checkbox to select all issues/PRs (#20177)
This commit is contained in:
		
							parent
							
								
									3bd8f50af8
								
							
						
					
					
						commit
						8b0e07e368
					
				| 
						 | 
				
			
			@ -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">
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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');
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
		Loading…
	
		Reference in New Issue