Galen consultations prj 27 add ref number wkflw step

.gitignore

@@ -33,3 +33,4 @@ jsdoc.json
 migrate_graphs.py
 djcp.sh
 .vscode
+.DS_Store

arches/app/media/css/arches.css

@@ -442,10 +442,15 @@ input[type="checkbox"] {
     background-color: white;
 }
 
-.workflow-step-icon {
-    border-radius: 50%;
+.workflowstep-nav.workflow-step-icon {
     display: block;
     margin: 0 auto;
+}
+
+.workflow-step-icon {
+    border-radius: 50%;
+    /* display: block;
+    margin: 0 auto; */
     height: 56px;
     line-height: 56px;
     text-align: center;
@@ -506,6 +511,72 @@ input[type="checkbox"] {
     overflow-y: auto;
 }
 
+.wf-multi-tile-step-container {
+    display: flex;
+    flex-direction: row;
+}
+
+.wf-multi-tile-step-form {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 3;
+}
+
+.wf-multi-tile-step-list {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    padding: 24px 24px 0 24px;
+}
+
+.wf-multi-tile-step-card {
+    border: 1px solid #e8e8e8;
+    border-radius: 2px;
+    background-color: white;
+    padding: 15px 5px 15px 15px;
+    display: flex;
+    flex-direction: row;
+}
+
+.wf-multi-tile-card-info {
+    display: flex;
+    flex-direction: row;
+}
+
+div.wf-multi-tile-card-info div {
+    margin-left: 12px;
+}
+
+.wf-multi-tile-card-info-details {
+    color: #5d768f;
+    padding-left: 12px;
+}
+
+.wf-multi-tile-card-info-details > h4 {
+    margin-bottom: 2px;
+    /* margin-left: 12px; */
+}
+
+
+
+.wf-multi-tile-step-card div div {
+    margin: 0;
+}
+
+.wf-multi-tile-step-card > div.wf-multi-tile-card-info ~ div {
+    display: flex;
+    flex-direction: row;
+    color: #4f9ce9;
+    font-size: 14px;
+    cursor: pointer;
+    height: 32px;
+    /* align-self: flex-end; */
+} 
+
+.wf-multi-tile-step-card > div.wf-multi-tile-card-info ~ div span {
+    margin-right: 6px;
+}
+
 .workflow-nav-controls {
     width: 60px;
     display: flex;

arches/app/media/js/viewmodels/tile.js

@@ -157,7 +157,7 @@ define([
             save: function(onFail, onSuccess) {
                 loading(true);
                 delete self.formData.data;
-                if (params.provisionalTileViewModel.selectedProvisionalEdit()) {
+                if (params.provisionalTileViewModel && params.provisionalTileViewModel.selectedProvisionalEdit()) {
                     self.formData.append('accepted_provisional', JSON.stringify(params.provisionalTileViewModel.selectedProvisionalEdit()));
                     params.provisionalTileViewModel.acceptProvisionalEdit();
                 }
@@ -241,7 +241,7 @@ define([
             if (selected) this.expanded(true);
         }, this);
         this.expanded.subscribe(function(expanded) {
-            if (expanded && this.parent) this.parent.expanded(true);
+            if (expanded && this.parent && typeof this.parent != "function") this.parent.expanded(true);
         }, this);
         this.isChildSelected = ko.pureComputed(function() {
             return isChildSelected(this);

arches/app/media/js/views/components/workflows/new-multi-tile-step.js

@@ -0,0 +1,74 @@
+define([
+    'knockout',
+    'views/components/workflows/new-tile-step',
+    'viewmodels/alert'
+], function(ko, NewTileStepViewModel, AlertViewModel) {
+
+    /** 
+     * A generic viewmodel for workflow steps that can add multiple tiles
+     * @name NewMultiTileStepViewModel
+     **/
+
+    function NewMultiTileStepViewModel(params) {
+        NewTileStepViewModel.apply(this, [params]);
+        var self = this;
+
+        this.remove = function(tile) {
+            tile.deleteTile( function(response) {
+                self.alert(new AlertViewModel(
+                    'ep-alert-red', 
+                    response.responseJSON.message[0], 
+                    response.responseJSON.message[1], 
+                    null, 
+                    function(){ return; }
+                ));
+            });
+        };
+
+        this.edit = function(tile) {
+            self.tile(tile);
+        };
+
+        self.saveTile = function(tile, callback) {
+            self.loading(true);
+            tile.save(function(response) {
+                self.loading(false);
+                self.alert(
+                    new AlertViewModel(
+                        'ep-alert-red',
+                        response.responseJSON.message[0],
+                        response.responseJSON.message[1],
+                        null,
+                        function(){ return; }
+                    )
+                );
+            }, function(tile) {
+                params.resourceid(tile.resourceinstance_id);
+                params.tileid(tile.tileid);
+                self.resourceId(tile.resourceinstance_id);
+                self.complete(true);
+                if (typeof callback === 'function') {
+                    callback.apply(null, arguments);
+                }
+                self.tile(self.card().getNewTile());
+                self.tile().reset();
+                setTimeout(function() {
+                    self.tile().reset();
+                }, 1);
+                self.loading(false);
+            });
+        };
+
+        var updateTileOnInit = self.tile.subscribe(function() {
+            updateTileOnInit.dispose();
+            self.tile(self.card().getNewTile());
+        });
+    }
+    ko.components.register('new-multi-tile-step', {
+        viewModel: NewMultiTileStepViewModel,
+        template: {
+            require: 'text!templates/views/components/workflows/new-multi-tile-step.htm'
+        }
+    });
+    return NewMultiTileStepViewModel;
+});

arches/app/media/js/views/components/workflows/new-tile-step.js

@@ -21,7 +21,7 @@ define([
         this.tile = ko.observable();
         this.loading = params.loading || ko.observable(false);
         this.alert = params.alert || ko.observable(null);
-        this.resourceId = params.resourceid;
+        this.resourceId = params.resourceid || ko.observable();
         this.complete = params.complete || ko.observable();
 
         this.loading(true);

arches/app/templates/views/components/cards/default.htm

@@ -33,7 +33,7 @@
         }">
             <li role="treeitem" class="jstree-node" data-bind="css: {'jstree-open': (cards.length > 0 && expanded), 'jstree-closed' : (cards.length > 0 && !expanded()), 'jstree-leaf': cards.length === 0}, event: {'dragstart': function () { console.log('dragging...') }}">
                 <i class="jstree-icon jstree-ocl" role="presentation" data-bind="click: function(){expanded(!expanded())}"></i>
-                <a class="jstree-anchor" href="#" tabindex="-1" data-bind="click: function () { self.form.selection($data)}, css:{'jstree-clicked': selected, 'child-selected': isChildSelected(), 'filtered-leaf': card.highlight()}">
+                <a class="jstree-anchor" href="#" tabindex="-1" data-bind="click: function () { self.form.selection($data);}, css:{'jstree-clicked': selected, 'child-selected': isChildSelected(), 'filtered-leaf': card.highlight()}">
                     <i class="fa fa-file" role="presentation" data-bind="css:{'has-provisional-edits': doesChildHaveProvisionalEdits() || $data.hasprovisionaledits()}"></i>
                     <strong style="margin-right: 10px;">
                         {% block editor_tree_node_content %}

arches/app/templates/views/components/workflows/new-multi-tile-step.htm

@@ -0,0 +1,49 @@
+<!-- ko let: { self: $data } -->
+    <!-- ko if: !loading() -->
+    <div data-bind="" class="wf-multi-tile-step-container">
+        <!-- ko if: tile() && card() -->
+        <div class="wf-multi-tile-step-form">
+            <h3>Add Reference Number</h3>
+            <div data-bind="component: {
+                name: cardComponentLookup[card().model.component_id()].componentname,
+                params: {
+                    card: card(),
+                    tile: tile(),
+                    provisionalTileViewModel: provisionalTileViewModel,
+                    reviewer: reviewer,
+                    loading: loading,
+                    form: $data
+                }
+            }"></div>
+        </div>
+        <div class="wf-multi-tile-step-list">
+            <!-- ko foreach: {data: card().tiles, as: 'tile'} -->
+            <div class="wf-multi-tile-step-card">
+                <div class="wf-multi-tile-card-info">
+                    <div class="workflow-step-icon complete"><span><i class="fa fa-hashtag"></i></span></div>
+                    <div class="wf-multi-tile-card-info-details">
+                        <!-- ko foreach: {data: $parent.card().widgets(), as: 'widget'} -->
+                            <!-- ko component: {
+                                        name: widget.widgetLookup[widget.get("widget_id")()].name,
+                                        params: {
+                                            config: widget.configJSON,
+                                            label: widget.label(),
+                                            node: widget.node,
+                                            value: $parent.data[widget.node_id()],
+                                            state: "report"
+                                        }
+                                    } --><!-- /ko -->
+                        <!-- /ko -->
+                    </div>
+                </div>
+                <div>
+                    <div data-bind="click: function(){$parent.remove(tile)}"><span><i class="fa fa-times-circle"></i></span><span>Remove</span></div>
+                    <div data-bind="click: function(){$parent.edit(tile);}"><span><i class="fa fa-pencil"></i></span><span>Edit</span></div>
+                </div>
+            </div>
+            <!-- /ko -->
+        </div>
+        <!-- /ko -->
+    </div>
+    <!-- /ko -->
+<!-- /ko -->