Jira Subtask Reorder (userscripts)

jira_subtask_reorder.user.js

// ==UserScript==
// @name         JIRA Subtask Reorder
// @version      0.1
// @description  Reorder JIRA subtasks with ease by just drag and drop them.
// @author       faizshukri
// @match        http*://*.atlassian.net/browse/*
// ==/UserScript==

(function($) {
  'use strict';

  const getFirstLinkInRow = rowEl =>
    $(rowEl).find('.streorder a').first().attr('href');

  const urlBuilder = (url, current, next) => {
    const newUrl = new URL(window.location.protocol + '//' + window.location.host + url);
    newUrl.searchParams.set('currentSubTaskSequence', current);
    newUrl.searchParams.set('subTaskSequence', next);
    return newUrl.pathname + '?' + newUrl.searchParams.toString();
  };

  const updateIndex = (index, rowEl) => {
    const child = $(rowEl).find(".stsequence");

    const newIndex = `${index + 1}.`;
    if (child.find("> div").length) {
      child.find("> div").text(newIndex);
    } else {
      child.text(newIndex);
    }
  };

  const updateLink = (index, rowEl, totalSubtasks) => {
    const url = getFirstLinkInRow(rowEl);
    const $subtaskReorder = $(rowEl).find('.streorder .subtask-reorder');

    const arrow = (url, direction) =>
      `<a href="${url}" title="Move ${direction}">
         <span class="icon-default aui-icon aui-icon-small aui-iconfont-${direction}">Move ${direction}</span>
       </a>`;

    const sortArrow = '<img src="/images/border/spacer.gif" class="sortArrow" alt="">';

    // First subtask
    if (index === 0) {
      $subtaskReorder.html(
        sortArrow +
        arrow(urlBuilder(url, index, index + 1), 'down')
      );

    // Last subtask
    } else if (index === totalSubtasks - 1) {
      $subtaskReorder.html(
        arrow(urlBuilder(url, index, index - 1), 'up') +
        sortArrow
      );

    } else {
      $subtaskReorder.html(
        arrow(urlBuilder(url, index, index - 1), 'up') +
        arrow(urlBuilder(url, index, index + 1), 'down')
      );
    }
  };

  const persistOrder = ($rowEl, startPosition, endPosition) => {
    const url = getFirstLinkInRow($rowEl);
    const spinnerWrapper = $rowEl.find('.stsummary > a').append('<span style="position: relative; left: 10px;"></span>');
    AJS.$(spinnerWrapper.find('> span')).spin();
    const newUrl = urlBuilder(url, startPosition, endPosition);
    $.get(newUrl, function() {
        AJS.$(spinnerWrapper.find('> span')).spinStop();
        spinnerWrapper.find('> span').remove();
    });
  };

  let startPosition = null;

  $("#issuetable")
    .css("overflow", "hidden")
    .find("> tbody")
    .sortable({
      cursor: "move",
      start: function(event, ui) {
        // find start position of the drag task
        startPosition = $(this).find('> tr').index(ui.item);
      },
      stop: function(event, ui) {
        const endPosition = $(this).find('> tr').index(ui.item);
        if (endPosition === startPosition) return;

        const $subtasks = $(this).find("> tr");
        $subtasks.each(function(i) {
          // Fix index
          updateIndex(i, this);

          // Fix link
          updateLink(i, this, $subtasks.length);
        });

        // Persist it
        persistOrder(ui.item, startPosition, endPosition);
        startPosition = null;
      }
    });
})(jQuery);