Usability improvements for associated orgs #3369

grails-app/assets/components/javascript/associated-orgs.js

@@ -35,6 +35,18 @@ ko.components.register('associated-orgs', {
         var $modal = $('#add-or-edit-organisation');
         $modal.find('form').validationEngine();
 
+        function findMatchingOrganisation(organisationId, callback) {
+            $.get(self.organisationSearchUrl+'?searchTerm='+organisationId).done(function(results) {
+                if (results && results.hits && results.hits.hits) {
+                    var matchingOrg = _.find(results.hits.hits, function (hit) {
+                        return hit._id == organisationId;
+                    });
+
+                    callback(matchingOrg);
+                }
+            });
+        }
+
         function AssociatedOrg(associatedOrg) {
 
             associatedOrg = associatedOrg || {};
@@ -44,9 +56,32 @@ ko.components.register('associated-orgs', {
             this.organisationId = ko.observable(associatedOrg.organisationId);
             this.fromDate = ko.observable(associatedOrg.fromDate).extend({simpleDate:false});
             this.toDate = ko.observable(associatedOrg.toDate).extend({simpleDate:false});
+            this.label = ko.observable(this.name());
+
+            this.updateLabel = function() {
+                if (this.organisationId) {
+                    var self = this;
+                    findMatchingOrganisation(self.organisationId(), function(matchingOrg) {
+                        if (matchingOrg && matchingOrg._source) {
+                            if (matchingOrg._source.name && matchingOrg._source.name != self.name()) {
+                                self.label(self.name() + ' (' + matchingOrg._source.name + ')');
+                            }
+                        }
+                    });
+                }
+                else {
+                    this.label(this.name());
+                }
+            }
+            this.organisationId.subscribe(this.updateLabel, this);
+            this.name.subscribe(this.updateLabel, this);
+            this.updateLabel();
+
 
             this.toJSON = function() {
-                return ko.mapping.toJS(this);
+                var result =  ko.mapping.toJS(this);
+                delete result.label;
+                return result;
             }
         }
 
@@ -102,18 +137,6 @@ ko.components.register('associated-orgs', {
 
         }
 
-        function findMatchingOrganisation(organisationId, callback) {
-            $.get(self.organisationSearchUrl+'?searchTerm='+organisationId).done(function(results) {
-                if (results && results.hits && results.hits.hits) {
-                    var matchingOrg = _.find(results.hits.hits, function (hit) {
-                        return hit._id == organisationId;
-                    });
-
-                    callback(matchingOrg);
-                }
-            });
-        }
-
         self.okPressed = function () {
             var valid = $modal.find('form').validationEngine('validate');
             if (!valid) {
@@ -177,6 +200,10 @@ ko.components.register('associated-orgs', {
 
         }
 
+        self.orgSearchLabel = function(org) {
+            return org.name + ' ( ' + org.organisationId + ' )';
+        };
+
         self.clearSelectedOrganisation = function() {
             $('#searchOrganisation').val('');
             self.allowedNames([]);

grails-app/assets/components/template/associated-orgs.html

@@ -11,7 +11,7 @@
                 <div>
                 <!-- ko if: $data.organisationId() -->
                     <a href="" data-bind="attr:{href:$parent.organisationViewUrl + '/' + $data.organisationId()}">
-                        <span data-bind="text:name"></span>
+                        <span data-bind="text:label"></span>
                     </a>
                 <!-- /ko -->
 
@@ -52,7 +52,7 @@ <h4 class="modal-title" id="title">Organisation relationship</h4>
                     <label for="searchOrganisation">Search for an existing organisation</label>
                     <div class="input-group input-append">
                         <input type="text" id="searchOrganisation" name="organisation-search" autocomplete="off" class="form-control form-control-sm" placeholder="Search organisations..."
-                               data-bind="enable:!organisationId(), elasticSearchAutocomplete:{url:$parent.organisationSearchUrl, value:'name', label:'name', result:$parent.selectOrganisation}"/>
+                               data-bind="enable:!organisationId(), elasticSearchAutocomplete:{url:$parent.organisationSearchUrl, value:'name', label:$parent.orgSearchLabel, result:$parent.selectOrganisation}"/>
                         <span class="input-group-text"><i class="fa fa-remove" data-bind="click:$parent.clearSelectedOrganisation"></i></span>
                     </div>
                 </div>

grails-app/assets/javascripts/knockout-custom-bindings.js

@@ -235,6 +235,8 @@ ko.bindingHandlers.elasticSearchAutocomplete = {
 
     var options = {};
 
+    var getLabel = _.isFunction(labelProp) ? labelProp : function(item) { return item[labelProp]; };
+    var getValue = _.isFunction(valueProp) ? valueProp : function(item) { return item[valueProp]; };
     options.source = function(request, response) {
       $(element).addClass("ac_loading");
 
@@ -248,7 +250,7 @@ ko.bindingHandlers.elasticSearchAutocomplete = {
           if (data.hits) {
             var hits = data.hits.hits || [];
             items = $.map(hits, function (hit) {
-              return {label: hit._source[labelProp], value: hit._source[valueProp], source:hit._source};
+              return {label: getLabel(hit._source), value: getValue(hit._source), source:hit._source};
             });
             response(items);
           }

grails-app/assets/javascripts/organisation.js

@@ -226,6 +226,19 @@ OrganisationViewModel = function (props, options) {
 
     self.transients = self.transients || {};
 
+    function toTitleCase(name) {
+        return name.replace(/\S+/g, function(word) {
+            if (!word) {
+                return word;
+            }
+            word = word.toLowerCase();
+            var joiningWords = ['and', 'of', 'the', 'in', 'for', 'to', 'a', 'an', 'on', 'at', 'by', 'with', 'from', 'as', 'but', 'or', 'nor'];
+            if (joiningWords.indexOf(word) >= 0) {
+                return word;
+            }
+            return word.charAt(0).toUpperCase() + word.substring(1)
+        });
+    }
     self.prepopulateFromABN = function() {
         if ($(config.abnSelector).validationEngine()) {
             var abn = self.abn;
@@ -241,11 +254,12 @@ OrganisationViewModel = function (props, options) {
                     self.entityType(orgDetails.entityType);
                     if (!self.name()) {
                         var defaultName = '';
-                        if (self.businessNames().length > 0) {
-                            defaultName = self.businessNames()[0];
+
+                        if (self.entityName()) {
+                            defaultName = toTitleCase(self.entityName());
                         }
-                        else if (self.entityName()) {
-                            defaultName = self.entityName();
+                        else if (self.businessNames().length > 0) {
+                            defaultName = self.businessNames()[0];
                         }
                         self.name(defaultName);
                     }

grails-app/assets/stylesheets/organisation.css

@@ -4,6 +4,7 @@
 *= require associated-orgs.css
 *= require_self
 *= require jquery-ui/1.13.2/jquery-ui
+*= require jquery-ui/1.13.2/juery-ui.theme
 */
 
 #projectList th {