Merge pull request #96 from kreta/feature/transitions-frontend

Added status transition management in frontend

Bundle/WebBundle/Resources/public/js/app.js

@@ -17,6 +17,7 @@ import {IssueController} from 'controllers/issue';
 
 import {ProjectCollection} from 'collections/project';
 import {UserCollection} from 'collections/user';
+import {WorkflowCollection} from 'collections/workflow';
 
 import {Profile} from 'models/profile';
 
@@ -41,11 +42,13 @@ export class App extends Backbone.Marionette.Application {
 
     this.collection = {
       project: new ProjectCollection(),
-      user: new UserCollection()
+      user: new UserCollection(),
+      workflow: new WorkflowCollection()
     };
 
     this.collection.project.fetch();
     this.collection.user.fetch();
+    this.collection.workflow.fetch();
   }
 
   loadLayout() {

Bundle/WebBundle/Resources/public/js/collections/workflow.js

@@ -0,0 +1,19 @@
+/*
+ * This file belongs to Kreta.
+ * The source code of application includes a LICENSE file
+ * with all information about license.
+ *
+ * @author benatespina <[email protected]>
+ * @author gorkalaucirica <[email protected]>
+ */
+
+import {Config} from '../config';
+import {Workflow} from '../models/workflow';
+
+export class WorkflowCollection extends Backbone.Collection {
+  constructor (models, options) {
+    this.url = Config.baseUrl + '/workflows';
+    this.model = Workflow;
+    super(models, options);
+  }
+}

Bundle/WebBundle/Resources/public/js/models/issue.js

@@ -14,6 +14,10 @@ export class Issue extends Backbone.Model {
     return Config.baseUrl + '/issues';
   }
 
+  urlTransition() {
+    return Config.baseUrl + '/issues/' + this.id + '/transitions';
+  }
+
   defaults() {
     return {
       title: '',
@@ -53,4 +57,41 @@ export class Issue extends Backbone.Model {
 
     return data;
   }
+
+  doTransition(transitionId, options = {}) {
+    var defaultOptions = {
+      success: null,
+      error: null
+    };
+
+    options = $.extend(defaultOptions, options);
+    Backbone.$.ajax(this.urlTransition(), {
+      method: 'PATCH',
+      data: {
+        'transition': transitionId
+      },
+      success: options.success,
+      error: options.error
+    });
+  }
+
+  getAllowedTransitions() {
+    var projectHref = this.attributes._links.project.href;
+    var projectId = projectHref.substring(projectHref.lastIndexOf('/') + 1);
+    var project = App.collection.project.get(projectId);
+
+    var workflowHref = project.attributes._links.workflow.href;
+    var workflowId = workflowHref.substring(workflowHref.lastIndexOf('/') + 1);
+
+    var allowedTransitions = [];
+    App.collection.workflow.get(workflowId).attributes.status_transitions.forEach((transition) => {
+      transition.initial_states.forEach((state) => {
+        if(state.id === this.get('status').id) {
+          allowedTransitions.push(transition);
+        }
+      });
+    });
+
+    return allowedTransitions;
+  }
 }

Bundle/WebBundle/Resources/public/js/models/workflow.js

@@ -0,0 +1,16 @@
+/*
+ * This file belongs to Kreta.
+ * The source code of application includes a LICENSE file
+ * with all information about license.
+ *
+ * @author benatespina <[email protected]>
+ * @author gorkalaucirica <[email protected]>
+ */
+
+import {Config} from '../config';
+
+export class Workflow extends Backbone.Model {
+  urlRoot() {
+    return Config.baseUrl + '/workflows';
+  }
+}

Bundle/WebBundle/Resources/public/js/views/component/issuePreview.js

@@ -22,6 +22,13 @@ export class IssuePreviewView extends Backbone.Marionette.ItemView {
     this.listenTo(App.vent, 'issue:highlight', (issueId) => {
       this.highlightIssue(issueId);
     });
+
+    this.listenTo(App.vent, 'issue:updated', (issue) => {
+      if(this.model.id === issue.id) {
+        this.model.set(issue);
+        this.render();
+      }
+    });
   }
 
   showFullIssue() {

Bundle/WebBundle/Resources/public/js/views/page/issue/show.js

@@ -13,23 +13,26 @@ export class IssueShowView extends Backbone.Marionette.ItemView {
     this.template = '#issue-show-template';
 
     this.ui = {
-      'tabContent': '.full-issue-tab-content'
+      'tabContent': '.full-issue-tab-content',
+      'transitions': '.full-issue-transitions'
     };
 
     this.events = {
       'click .full-issue-edit': 'editClicked',
-      'click .full-issue-tab': 'tabClicked'
+      'click .full-issue-tab': 'tabClicked',
+      'click .full-issue-transition': 'doTransition'
     };
 
     super(options);
 
-    this.model.on('sync', this.render, this);
+    this.model.on('change', this.render, this);
 
     App.vent.trigger('issue:highlight', this.model.id);
   }
 
   serializeData() {
     var data = this.model.toJSON();
+    data['transitions'] = this.model.getAllowedTransitions();
     data['canEdit'] = this.model.canEdit(App.currentUser);
     return data;
   }
@@ -48,4 +51,16 @@ export class IssueShowView extends Backbone.Marionette.ItemView {
 
     return false;
   }
+
+  doTransition(ev) {
+    this.ui.transitions.hide();
+    this.model.doTransition($($(ev)[0].currentTarget).attr('data-transition'), {
+      success : (data) => {
+        this.model.set(data);
+        App.vent.trigger('issue:updated', data)
+      }
+    });
+
+    return false
+  }
 }

Bundle/WebBundle/Resources/views/Default/templates/issue/show.html.twig

@@ -5,6 +5,13 @@
             <a class="button green full-issue-edit" data-bypass href="/issue/<%= id %>/edit">Edit</a>
         <% } %>
     </section>
+    <section class="full-issue-transitions">
+        <% transitions.forEach(function(transition) { %>
+            <button class="button green full-issue-transition" data-transition="<%= transition.id %>">
+                <%= transition.name %>
+            </button>
+        <% }) %>
+    </section>
     <section class="full-issue-dashboard">
         <p class="full-issue-dashboard-item">
             <img class="user-image" src="<%= assignee.photo.name %>">