Add sorting my module statuses

app/assets/javascripts/my_modules/status_flow.js

@@ -1,6 +1,10 @@
 /* global animateSpinner */
 
 (function() {
+  $('.task-flows').on('click', '#viewTaskFlow', function() {
+    $('#statusFlowModal').modal('show');
+  });
+
   $('#statusFlowModal').on('show.bs.modal', function() {
     var $modalBody = $(this).find('.modal-body');
     animateSpinner($modalBody);

app/controllers/my_module_status_flow_controller.rb

@@ -5,7 +5,7 @@ class MyModuleStatusFlowController < ApplicationController
   before_action :check_view_permissions
 
   def show
-    my_module_statuses = @my_module.my_module_status_flow.my_module_statuses
+    my_module_statuses = @my_module.my_module_status_flow.my_module_statuses.sort_by_position
     render json: { html: render_to_string(partial: 'my_modules/modals/status_flow_modal_body.html.erb',
                                           locals: { my_module_statuses: my_module_statuses }) }
   end

app/models/my_module_status.rb

@@ -30,6 +30,23 @@ class MyModuleStatus < ApplicationRecord
     my_module_status_flow.final_status == self
   end
 
+  def self.sort_by_position(order = :asc)
+    ordered_statuses, statuses = all.to_a.partition { |i| i.previous_status_id.nil? }
+
+    return [] if ordered_statuses.empty?
+
+    until statuses.empty?
+      next_element, statuses = statuses.partition { |i| ordered_statuses.last.id == i.previous_status_id }
+      if next_element.empty?
+        break
+      else
+        ordered_statuses.concat(next_element)
+      end
+    end
+    ordered_statuses = ordered_statuses.reverse if order == :desc
+    ordered_statuses
+  end
+
   private
 
   def next_in_same_flow

app/views/my_modules/status_flow/_task_flow_button.html.erb

@@ -6,7 +6,7 @@
           data-toggle="dropdown"
           aria-haspopup="true"
           aria-expanded="true"
-          style="<%= "background-color: ##{status.color}" %>;">
+          style="<%= "background-color: #{status.color}" %>;">
     <span><%= status.name %></span>
     <span class="caret pull-right"></span>
   </button>
@@ -14,18 +14,18 @@
     <% unless status.initial_status? %>
       <% previous_s = status.previous_status %>
       <li data-state-id="<%= previous_s.id %>">
-        <span><%= t 'my_module_statuses.dropdown.return_label' %></span> <span style="<%= "background-color: ##{previous_s.color}" %>"><%= previous_s.name %></span>
+        <span><%= t 'my_module_statuses.dropdown.return_label' %></span> <span style="<%= "background-color: #{previous_s.color}" %>"><%= previous_s.name %></span>
       </li>
     <% end %>
 
     <% unless status.final_status? %>
       <% next_s = status.next_status %>
       <li data-state-id="<%= next_s.id %>">
-        <span><%= t('my_module_statuses.dropdown.move_label') %></span> <span style="<%= "background-color: ##{next_s.color}" %>"><%= next_s.name %></span>
+        <span><%= t('my_module_statuses.dropdown.move_label') %></span> <span style="<%= "background-color: #{next_s.color}" %>"><%= next_s.name %></span>
       </li>
     <% end %>
-    <li>
-      <span><a href="#"><%= t('my_module_statuses.dropdown.view_flow_label') %></a></span>
+    <li id="viewTaskFlow">
+      <%= t('my_module_statuses.dropdown.view_flow_label') %>
     </li>
   </ul>
 </div>