Merge pull request #4832 from archesproject/4821_workflows_url_params

Passes values between workflow steps via url
archesproject · May 13, 2019 · f0e34c5 · f0e34c5
2 parents 5cfa96f + 6aefdcd
commit f0e34c5
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 16 deletions.
diff --git a/arches/app/media/js/viewmodels/workflow-step.js b/arches/app/media/js/viewmodels/workflow-step.js
@@ -1,7 +1,8 @@
 define([
     'knockout',
-    'underscore'
-], function(ko, _) {
+    'underscore',
+    'knockout-mapping'
+], function(ko, _, koMapping) {
     var WorkflowStep = function(config) {
         this.classUnvisited = 'workflow-step-icon';
         this.classActive = 'workflow-step-icon active';
@@ -15,7 +16,25 @@ define([
             return config.workflow.activeStep() === this;
         }, this);
 
-        _.extend(this, config);
+        this.parseUrlParams = function(){
+            //parses params in the current url for the current step
+            var urlparams = new window.URLSearchParams(window.location.search);
+            var res = {};
+            urlparams.forEach(function(v, k){res[k] = v;});
+            return res;
+        };
+
+        this.urlParams = this.parseUrlParams();
+
+        this.getForwardUrlParams = ko.pureComputed(function(){
+            return {};
+        });
+
+        this.getBackwardUrlParams = ko.pureComputed(function(){
+            return {};
+        });
+
+        _.extend(this, koMapping.fromJS(config));
 
         this.iconClass = ko.computed(function(){
             var ret = '';
@@ -26,7 +45,7 @@ define([
             }else {
                 ret = this.classUnvisited;
             }
-            return ret + ' ' + this.icon;
+            return ret + ' ' + ko.unwrap(this.icon);
         }, this);
     };
     return WorkflowStep;

diff --git a/arches/app/media/js/viewmodels/workflow.js b/arches/app/media/js/viewmodels/workflow.js
@@ -1,10 +1,12 @@
 define([
+    'jquery',
     'knockout',
     'viewmodels/workflow-step'
-], function(ko, Step) {
+], function($, ko, Step) {
     var Workflow = function(config) {
         var self = this;
-
+        var urlParams = new window.URLSearchParams(window.location.search);
+        var initstep = Number(urlParams.get('step')) || undefined;
         this.steps = config.steps || [];
         this.activeStep = ko.observable();
         this.ready = ko.observable(false);
@@ -24,19 +26,38 @@ define([
                 }
                 self.steps[i]._index = i;
             });
-            if (self.steps.length > 0) {
+            if (initstep) {
+                self.activeStep(self.steps[initstep - 1]);
+            }
+            else if(self.steps.length > 0) {
                 self.activeStep(self.steps[0]);
             }
         });
 
+        this.updateUrl = function(step, direction) {
+            //Updates the url with the parameters needed for the next step
+            var urlparams;
+            if (direction === 'forward') {
+                urlparams = step.getForwardUrlParams();
+                urlparams.step = step._index + 2;
+            } else if (direction === 'backward') {
+                urlparams = step.getBackwardUrlParams();
+                urlparams.step = step._index;
+            }
+            history.pushState(null, '', window.location.pathname + '?' + $.param(urlparams));
+        };
+
         this.next = function(){
             var activeStep = self.activeStep();
+            self.updateUrl(activeStep, 'forward');
             if (activeStep && activeStep.complete() && activeStep._index < self.steps.length - 1) {
                 self.activeStep(self.steps[activeStep._index+1]);
             }
         };
+
         this.back = function(){
             var activeStep = self.activeStep();
+            self.updateUrl(activeStep, 'backward');
             if (activeStep && activeStep._index > 0) {
                 self.activeStep(self.steps[activeStep._index-1]);
             }

diff --git a/arches/app/media/js/views/components/workflows/new-tile-step.js b/arches/app/media/js/views/components/workflows/new-tile-step.js
@@ -10,16 +10,17 @@ define([
 ], function(_, $, arches, ko, GraphModel, CardViewModel, ProvisionalTileViewModel, AlertViewModel) {
     function viewModel(params) {
         var self = this;
-        var url = arches.urls.api_card + (params.resourceid || params.graphid);
+        var url = arches.urls.api_card + (ko.unwrap(params.resourceid) || ko.unwrap(params.graphid));
 
         this.card = ko.observable();
         this.tile = ko.observable();
         this.loading = params.loading || ko.observable(false);
         this.alert = params.alert || ko.observable(null);
-        this.resourceId = ko.observable(params.resourceid);
+        this.resourceId = params.resourceid;
         this.complete = params.complete || ko.observable();
 
         this.loading(true);
+
         $.getJSON(url, function(data) {
             var handlers = {
                 'after-update': [],
@@ -104,14 +105,14 @@ define([
             };
 
             flattenTree(topCards, []).forEach(function(item) {
-                if (item.constructor.name === 'CardViewModel' && item.nodegroupid === params.nodegroupid) {
-                    if (params.parenttileid && item.parent && params.parenttileid !== item.parent.tileid) {
+                if (item.constructor.name === 'CardViewModel' && item.nodegroupid === ko.unwrap(params.nodegroupid)) {
+                    if (ko.unwrap(params.parenttileid) && item.parent && ko.unwrap(params.parenttileid) !== item.parent.tileid) {
                         return;
                     }
                     self.card(item);
-                    if (params.tileid) {
+                    if (ko.unwrap(params.tileid)) {
                         ko.unwrap(item.tiles).forEach(function(tile) {
-                            if (tile.tileid === params.tileid) {
+                            if (tile.tileid === ko.unwrap(params.tileid)) {
                                 self.tile(tile);
                             }
                         });
@@ -121,7 +122,7 @@ define([
                 }
             });
             self.loading(false);
-            self.complete(!!params.tileid);
+            self.complete(!!ko.unwrap(params.tileid));
         });
 
         self.saveTile = function(tile, callback) {
@@ -138,8 +139,8 @@ define([
                     )
                 );
             }, function(tile) {
-                params.resourceid = tile.resourceinstance_id;
-                params.tileid = tile.tileid;
+                params.resourceid(tile.resourceinstance_id);
+                params.tileid(tile.tileid);
                 self.resourceId(tile.resourceinstance_id);
                 self.complete(true);
                 if (typeof callback === 'function') {