Adding the ability to change states form Dashboard

This enable users to change states through the Machinery Dashboard
while still passing through the machinery internals, including
guard and callback functions.

Author: joaomdmoura

lib/machinery/endpoint.ex

@@ -11,5 +11,12 @@ defmodule Machinery.Endpoint do
     key: "machinery_sid",
     table: :machinery_session
 
+  plug Plug.Parsers,
+    parsers: [:urlencoded, :multipart, :json],
+    pass: ["*/*"],
+    json_decoder: Poison,
+    length: 500_000_000
+
+
   plug Machinery.Router
 end

lib/web/controllers/resource_controller.ex

@@ -2,7 +2,18 @@ defmodule Machinery.ResourceController do
   use Machinery.Web, :controller
   import Ecto.Query
 
-  @items_per_page 50
+  @items_per_page 30
+
+  def update(conn, %{"id" => id, "state" => state} = _params) do
+    repo = conn.assigns.repo
+    model = conn.assigns.model
+    machinery_module = conn.assigns.module
+
+    struct = repo.get!(model, id)
+    transition = Machinery.transition_to(struct, machinery_module, state)
+
+    json(conn, transition)
+  end
 
   def index(conn, %{"state" => state, "page" => page} = _params) do
     repo = conn.assigns.repo
@@ -11,7 +22,6 @@ defmodule Machinery.ResourceController do
     resources = get_resources_for_state(repo, model, state, page)
     json(conn, resources)
   end
-
   def index(conn, _params) do
     repo = conn.assigns.repo
     model = conn.assigns.model

lib/web/router.ex

@@ -20,6 +20,7 @@ defmodule Machinery.Router do
 
   scope "/api", Machinery do
     pipe_through :api
-    get "/:state/resources/:page", ResourceController, :index
+    post "/resources/:id", ResourceController, :update
+    get "/resources/:state/:page", ResourceController, :index
   end
 end

lib/web/static/css/app.css

@@ -43,22 +43,14 @@ ul li.resource-item:hover {
   background-color: #e6e7f8;
 }
 
-div.col.filled {
-  height: 85vh;
-  min-height: 700px;
+div.col-md-2.filled {
+  max-height: 50vh;
   overflow: hidden;
 }
 
-div.col.filled div.holder-limiter {
-  overflow: hidden;
-  height: 45%;
-  border-radius: 5px;
-}
-
-div.col.filled div.holder {
+div.col-md-2.filled div.holder {
   overflow: scroll;
-  border: 1px solid #ddd;
-  height: 45%;
+  height: 87%;
   border-radius: 5px;
 }
 

lib/web/static/js/app.js

@@ -1,12 +1,18 @@
 const ResourceList = require('./resource_list.js');
+const SortableList = require('./sortable_list.js');
 const listHolders = $('.holder');
 const lists = {};
 
+var el = $('.itemslol');
+
+
 $.each(listHolders, function(_i, holder) {
   let list = new ResourceList(holder);
   let state = holder.dataset.state;
   lists[state] = list;
 
+  new SortableList(holder)
+
   $(holder).find('.load-more-btn').on('click', function(event) {
     let requestedState = holder.dataset.state;
     lists[requestedState].loadNextPage();

lib/web/static/js/resource_loader.js

@@ -12,7 +12,7 @@ module.exports = class ResourceLoader {
     if(!this.loading){
       let state = list.dataset.state
       let nextPage = page + 1;
-      let url = `${this.url}${state}/resources/${nextPage}`
+      let url = `${this.url}resources/${state}/${nextPage}`
 
       let request = $.get(url, function(response) {
         callback(response)

lib/web/static/js/sortable_list.js

@@ -0,0 +1,48 @@
+const alertTemplate = require('./templates/alert_template');
+
+module.exports = class SortableList {
+  constructor(holder) {
+    let listElm = $(holder).find('ul.list-group')[0]
+    let sortable = new Sortable(listElm, {
+      group: { name: 'lists', pull: true, put: true},
+      onAdd: this.changeState.bind(this)
+    });
+  }
+
+  changeState(event) {
+    let mountedPath = $("body")[0].dataset.mountedPath
+    let itemEl = event.item;
+    let resourceId = itemEl.dataset.id;
+    let to_state = $(event.to).parents('.holder')[0].dataset.state;
+    let url = `${mountedPath}/api/resources/${resourceId}`
+    let data = {state: to_state}
+
+    $.post(url, data, function(response) {
+      if(response[0] == "error") {
+        this.rollbackTransition(response[1], event);
+      }
+    }.bind(this)).fail(function() {
+      let message = "Error on the request, check logs and try again."
+      this.rollbackTransition(message, event);
+    }.bind(this));
+  }
+
+  rollbackTransition(message, event) {
+    let error_message = `${message} Item moved back to it's original state.`
+    let template = alertTemplate.render(error_message);
+    $('main').prepend(template);
+    this.moveItemBack(event.item, event.from, event.oldIndex);
+  }
+
+  moveItemBack(item, state, index) {
+    let _index = (index == 0) ? 0 : index - 1
+    let _item = $(state).find("li.resource-item").eq(_index)
+
+    if(index == 0){
+      $(item).insertBefore(_item);
+    }
+    else {
+      $(item).insertAfter(_item);
+    }
+  }
+}

lib/web/static/js/templates/alert_template.js

@@ -0,0 +1,15 @@
+let renderAlert = function(message) {
+  return `
+  <div class="alert alert-danger alert-dismissible fade show" role="alert">
+    ${message}
+    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
+      <span aria-hidden="true">&times;</span>
+    </button>
+  </div>
+  `
+
+}
+
+module.exports = {
+  render: renderAlert
+}

lib/web/static/js/templates/resource_template.js

@@ -1,5 +1,5 @@
 let renderResource = function(model, resource) {
-  return `<li class="list-group-item resource-item" data-toggle="modal" data-target="#modal${resource.id}">
+  return `<li class="list-group-item resource-item sortable-drag" data-toggle="modal" data-target="#modal${resource.id}" data-id="${resource.id}">
     ${model} - #${resource.id}
   </li>