Updates UI to support unique constraints re #4375

arches/app/media/css/arches.css

@@ -1266,6 +1266,16 @@ a.select2-search-choice-close {
     flex-basis: 450px;
 }
 
+.constraint-selection {
+    padding-top: 10px;
+    border-bottom: solid 1px #eee;
+}
+
+.constraint-selection .dropdown {
+    padding-top: 10px;
+    padding-bottom: 10px;
+}
+
 .library-icon {
     width: 30px;
     position: absolute;

arches/app/media/js/models/card.js

@@ -7,8 +7,9 @@ define([
     'knockout',
     'knockout-mapping',
     'card-components',
+    'viewmodels/card-constraints',
     'utils/dispose'
-], function(_, arches, AbstractModel, NodeModel, CardWidgetModel, ko, koMapping, cardComponentLookup, dispose) {
+], function(_, arches, AbstractModel, NodeModel, CardWidgetModel, ko, koMapping, cardComponentLookup, CardConstraintsViewModel, dispose) {
     var CardModel = AbstractModel.extend({
         /**
         * A backbone model to manage card data
@@ -45,6 +46,12 @@ define([
             this.sortorder = ko.observable();
             this.disabled = ko.observable();
             this.component_id = ko.observable();
+            this.constraints = ko.observableArray([
+                {
+                    uniqueToAllInstances: false,
+                    nodeIds: []
+                }
+            ]);
 
             this.set('cards', this.cards);
             this.set('nodes', this.nodes);
@@ -69,17 +76,7 @@ define([
             this.set('disabled', this.disabled);
             this.set('component_id', this.component_id);
             this.set('config', {});
-
-            this.uniqueNodes = ko.observableArray([]);
-            this.uniqueToAllInstances = ko.observable(false);
-
-            this.toggleUniqueConstraint = function(node){
-                _.contains(this.uniqueNodes(), node) === false ? this.uniqueNodes.push(node) : this.uniqueNodes.remove(node);
-            };
-
-            this.uniqueToAllInstances.subscribe(function(val){
-                console.log(val);
-            });
+            this.set('constraints', this.constraints);
 
             this.cardComponentLookup = cardComponentLookup;
             this.configKeys = ko.observableArray();
@@ -152,27 +149,29 @@ define([
                 this.parseNodes(attributes);
             }, this);
 
-            this.widgets().forEach(function(widget){
-                widget.node.isUnique = ko.observable(false);
-            });
+            this.updateConstraints = function(){
+                var self = this;
+                return function(){
+                    console.log(self.constraints());
+                    var updatedConstraints = self.uniqueConstraints().map(function(c){
+                        return {
+                            nodeIds: ko.unwrap(c.nodeIds),
+                            uniqueToAllInstances: ko.unwrap(c.uniqueToAllInstances)
+                        };
+                    });
+                    self.constraints(updatedConstraints);
+                };
+            };
 
-            this.uniqueNodes = ko.pureComputed(function(){
-                var res = [];
-                self.widgets().forEach(function(widget) {
-                    if (widget.node.isUnique()) {
-                        res.push(widget.node.nodeid);
-                    }
-                });
-                return res;
+            this.uniqueConstraints = ko.observableArray();
+            this.constraints().forEach(function(constraint){
+                constraint.widgets = self.widgets();
+                var constraintViewModel = new CardConstraintsViewModel(constraint);
+                constraintViewModel.nodeIds.subscribe(self.updateConstraints());
+                constraintViewModel.uniqueToAllInstances.subscribe(self.updateConstraints());
+                self.uniqueConstraints.push(constraintViewModel);
             });
 
-            var updateConfigsWithUniqueNodes = function(val) {
-                self.configJSON({uniqueNodes: val});
-                console.log(self.configJSON);
-            }
-
-            this.uniqueNodes.subscribe(updateConfigsWithUniqueNodes);
-
             this.disposables.push(componentIdSubscription);
             this.disposables.push(cardSubscription);
             this.disposables.push(widgetSubscription);
@@ -315,7 +314,16 @@ define([
                     widget.label(originalWidgetData.label);
                     widget.widget_id(originalWidgetData.widget_id);
                 }
+                this._attributes.data.constraints.forEach(function(constraint){
+                    constraint.widgets = this.widgets();
+                    var constraintViewModel = new CardConstraintsViewModel(constraint);
+                    constraintViewModel.nodeIds.subscribe(this.updateConstraints());
+                    constraintViewModel.uniqueToAllInstances.subscribe(this.updateConstraints());
+                    this.uniqueConstraints.push(constraintViewModel);
+                });
             }, this);
+
+
             this.parse(this._attributes);
         },
 

arches/app/media/js/viewmodels/card-constraints.js

@@ -0,0 +1,26 @@
+define([
+    'knockout',
+], function(ko) {
+    var ConstraintViewModel = function(params) {
+
+        this.uniqueToAllInstances = ko.observable(params.uniqueToAllInstances || false);
+        this.widgets = params.widgets || [];
+        this.nodeIds = ko.observableArray();
+
+        this.getSelect2ConstraintConfig = function(placeholder){
+            return {
+                clickBubble: true,
+                disabled: false,
+                data: {results: this.widgets.map(function(c){return {text: c.label(), id: c.node.nodeid};})},
+                value: this.nodeIds,
+                multiple: params.multiple || true,
+                closeOnSelect: false,
+                placeholder: placeholder || "Select Widgets",
+                allowClear: true
+            };
+        };
+
+    };
+
+    return ConstraintViewModel;
+});

arches/app/models/models.py

@@ -67,6 +67,7 @@ class Meta:
 
 class ConstraintModel(models.Model):
     constraintid = models.UUIDField(primary_key=True, default=uuid.uuid1)
+    uniquetoallinstances = models.BooleanField(default=False)
     card = models.ForeignKey('CardModel', db_column='cardid')
     nodes = models.ManyToManyField(to='Node', through='ConstraintXNode')
 

arches/app/templates/views/graph/graph-designer/card-configuration.htm

@@ -109,17 +109,28 @@
                         </div>
                     </div>
                 </div>
+
+
+                <!--ko if: model.widgets().length > 0 -->
                 <div class="panel-section-title dark-colored-text pad-top">
                     {% trans "Unique Values" %}
                 </div>
+
                 <div class="form-divider">
-                <div data-bind="component: { name: 'views/components/simple-switch', params: {value: model.uniqueToAllInstances, config:{label: 'Unique to all resource instances?'}}}"></div>
-                <!-- ko if: widgets().length > 0 -->
-                <div data-bind="foreach: {data: widgets(), as: 'widget'}">
-                    <div data-bind="component: { name: 'views/components/simple-switch', params: {value: widget.node.isUnique, config:{label: widget.label()}}}"></div>
+                    <!--ko if: model.uniqueConstraints().length > 0 -->
+                    <div class="constraint-selection" data-bind="foreach: {data: model.uniqueConstraints(), as: 'constraint'}">
+                        <div class="dropdown">
+                            <input class="" style="display:inline-block;"
+                            data-bind="select2Query: {
+                                select2Config: getSelect2ConstraintConfig('{% trans "Select Nodes" %}')
+                            }">
+                        </div>
+                        <div data-bind="component: { name: 'views/components/simple-switch', params: {value: constraint.uniqueToAllInstances, config:{label: 'Unique to all resource instances?'}}}"></div>
+                    </div>
+                    <!--/ko-->
                 </div>
                 <!--/ko-->
-                </div>
+
             </div>
         </div>
     </div>