GridFieldBulkEditingTools/client/src/js/manager.js

/* global window, alert, confirm */
import jQuery from 'jquery';
import i18n from 'i18n';

jQuery.entwine('colymba', ($) => {
  /**
   * Makes sure the component is above the headers
   */
  $('.bulkManagerOptions').entwine({
    onmatch() {
      const $parent = this.parents('thead');
      const $tr = $parent.find('tr');

      const targets = ['.filter-header', '.sortable-header'];
      const $target = $parent.find(targets.join(','));

      const index = $tr.index(this);
      let newIndex = $tr.length - 1;

      $target.each((targetIndex, Element) => {
        const idx = $tr.index(Element);
        if (idx < newIndex) {
          newIndex = idx;
        }
      });

      if (index > newIndex) {
        $tr.eq(newIndex).insertAfter($(this));
      }
    },
  });

  /**
   * Bulkselect table cell behaviours
   */
  $('td.col-bulkSelect').entwine({
    onmouseover() {
      // disable default row click behaviour -> avoid navigation to edit form when
      // clicking the checkbox
      $(this).parents('.ss-gridfield-item').find('.edit-link').removeClass('edit-link')
        .addClass('tempDisabledEditLink');
    },
    onmouseout() {
      // re-enable default row click behaviour
      $(this).parents('.ss-gridfield-item').find('.tempDisabledEditLink').addClass('edit-link')
        .removeClass('tempDisabledEditLink');
    },
    onclick(e) {
      // check/uncheck checkbox when clicking cell
      const cb = $(e.target).find('input');
      if (!$(cb).prop('checked')) {
        $(cb).prop('checked', true);
      } else {
        $(cb).prop('checked', false);
      }
    }
  });

  /**
   * Individual select checkbox behaviour
   */
  $('td.col-bulkSelect input').entwine({
    onmatch() {
    },
    onunmatch() {
    },
    onclick() {
      $(this).parents('.grid-field__table').find('input.bulkSelectAll').prop('checked', '');
    }
  });

  /**
   * Bulkselect checkbox behaviours
   */
  $('input.bulkSelectAll').entwine({
    onclick() {
      const state = $(this).prop('checked');
      $(this).parents('.grid-field__table')
        .find('td.col-bulkSelect input')
        .prop('checked', state)
        .trigger('change');
    },
    getSelectRecordsID() {
      return $(this).parents('.grid-field__table')
        .find('td.col-bulkSelect input:checked')
        .map(function () {
          return parseInt($(this).data('record'), 10);
        })
        .get();
    }
  });

  /**
   * Bulk action dropdown behaviours
   */
  $('select.bulkActionName').entwine({
    onchange() {
      const value = $(this).val();
      const $parent = $(this).parents('.bulkManagerOptions');
      const $btn = $parent.find('.doBulkActionButton');
      const config = $btn.data('config');

      $.each(config, (configKey, configData) => {
        if (configKey !== value) {
          $btn.removeClass(configData.buttonClasses);
        }
      });

      if (!value) {
        $btn.addClass('disabled');
        return;
      }

      $btn.removeClass('disabled');

      $btn.addClass(config[value].buttonClasses).addClass('btn-outline-secondary');

      if (config[value].icon) {
        const $img = $btn.find('img');

        if ($img.length) {
          $img.attr('src', config[value].icon);
        } else {
          $btn.prepend(`<img src="${config[value].icon}" alt="" />`);
        }
      } else {
        $btn.find('img').remove();
      }

      if (config[value].destructive) {
        $btn.addClass('btn-outline-danger');
      } else {
        $btn.removeClass('btn-outline-danger');
      }
    }
  });

  /**
   * bulk action button behaviours
   */
  $('.doBulkActionButton').entwine({
    getActionURL(action, url) {
      const cacheBuster = new Date().getTime();
      let newUrl = url.split('?');

      let newAction = '';
      if (action) {
        newAction = `/${action}`;
      }

      if (newUrl[1]) {
        newUrl = `${newUrl[0] + newAction}?${newUrl[1]}&cacheBuster=${cacheBuster}`;
      } else {
        newUrl = `${newUrl[0] + newAction}?cacheBuster=${cacheBuster}`;
      }
      return newUrl;
    },
    onclick() {
      const $parent = $(this).parents('.bulkManagerOptions');
      const action = $parent.find('select.bulkActionName').val();
      const ids = $(this).parents('.bulkManagerOptions').find('input.bulkSelectAll:first').getSelectRecordsID();

      this.doBulkAction(action, ids);
    },

    doBulkAction(action, ids) {
      const { bulkTools } = window;

      const $parent = $(this).parents('.bulkManagerOptions');
      const $btn = $parent.find('a.doBulkActionButton');
      const $msg = $parent.find('.message');

      const config = $btn.data('config');
      let url = this.getActionURL(action, $(this).data('url'));
      const inputData = { records: ids };

      if (ids.length <= 0) {
        // eslint-disable-next-line no-alert
        alert(i18n._t('GRIDFIELD_BULK_MANAGER.BULKACTION_EMPTY_SELECT'));
        return false;
      }

      // if ( $btn.hasClass('ss-ui-action-destructive') )
      if (config[action].destructive) {
        // eslint-disable-next-line no-alert
        if (!confirm(i18n._t('GRIDFIELD_BULK_MANAGER.CONFIRM_DESTRUCTIVE_ACTION'))) {
          return false;
        }
      }

      $btn.addClass('loading');
      $msg.removeClass('static show error warning');

      if (config[action].xhr) {
        $.ajax({
          url,
          data: inputData,
          type: 'POST',
          context: $(this)
        }).always(function (data) {
          let returnData = data;
          $btn.removeClass('loading');

          // if request fail, return a +4xx status code, extract json response
          if (data.responseText) {
            returnData = JSON.parse(data.responseText);
          }

          $msg.html(returnData.message);

          if (returnData.isError) {
            $msg.addClass('static error');
          } else if (returnData.isWarning) {
            $msg.addClass('show warning');
          } else {
            $msg.addClass('show');
          }

          bulkTools.gridfieldRefresh($(this).parents('.ss-gridfield'), returnData);
        });
      } else {
        const records = `records[]=${ids.join('&records[]=')}`;
        url = `${url}&${records}`;

        window.location.href = url;
      }

      return true;
    }
  });
});