From 4e9f333ea228e01369e379f988a95fa4b22c63bd Mon Sep 17 00:00:00 2001 From: chrisala Date: Thu, 12 Dec 2024 11:45:26 +1100 Subject: [PATCH] Usability improvements for associated orgs #3369 --- .../components/javascript/associated-orgs.js | 53 ++++++++++++++----- .../components/template/associated-orgs.html | 4 +- .../javascripts/knockout-custom-bindings.js | 4 +- grails-app/assets/javascripts/organisation.js | 22 ++++++-- .../assets/stylesheets/organisation.css | 1 + 5 files changed, 64 insertions(+), 20 deletions(-) diff --git a/grails-app/assets/components/javascript/associated-orgs.js b/grails-app/assets/components/javascript/associated-orgs.js index 4d34b3878..2d90b8221 100644 --- a/grails-app/assets/components/javascript/associated-orgs.js +++ b/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([]); diff --git a/grails-app/assets/components/template/associated-orgs.html b/grails-app/assets/components/template/associated-orgs.html index 893fd2edd..97443d505 100644 --- a/grails-app/assets/components/template/associated-orgs.html +++ b/grails-app/assets/components/template/associated-orgs.html @@ -11,7 +11,7 @@
- + @@ -52,7 +52,7 @@
+ data-bind="enable:!organisationId(), elasticSearchAutocomplete:{url:$parent.organisationSearchUrl, value:'name', label:$parent.orgSearchLabel, result:$parent.selectOrganisation}"/>
diff --git a/grails-app/assets/javascripts/knockout-custom-bindings.js b/grails-app/assets/javascripts/knockout-custom-bindings.js index 58558f91f..3f6890998 100644 --- a/grails-app/assets/javascripts/knockout-custom-bindings.js +++ b/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); } diff --git a/grails-app/assets/javascripts/organisation.js b/grails-app/assets/javascripts/organisation.js index 6afa91805..26d2cc895 100644 --- a/grails-app/assets/javascripts/organisation.js +++ b/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); } diff --git a/grails-app/assets/stylesheets/organisation.css b/grails-app/assets/stylesheets/organisation.css index 459c90d91..245b68ccd 100644 --- a/grails-app/assets/stylesheets/organisation.css +++ b/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 {