From 2b816a0824d9b95d419759fb5dea064ae108261e Mon Sep 17 00:00:00 2001
From: chrisala <chris.godwin.ala@gmail.com>
Date: Fri, 23 Aug 2024 12:40:24 +1000
Subject: [PATCH] Support org->org associations #2880

---
 .../components/javascript/associated-orgs.js  | 19 +++++++++++++------
 .../components/template/associated-orgs.html  | 13 ++++++++++---
 .../javascripts/knockout-custom-bindings.js   |  1 -
 .../assets/stylesheets/associated-orgs.css    | 14 ++++++++++++++
 .../assets/stylesheets/organisation.css       |  6 ++++++
 grails-app/assets/stylesheets/project.css     | 15 +--------------
 .../organisation/_organisationDetails.gsp     |  2 +-
 grails-app/views/project/_editProject.gsp     |  2 +-
 8 files changed, 46 insertions(+), 26 deletions(-)
 create mode 100644 grails-app/assets/stylesheets/associated-orgs.css

diff --git a/grails-app/assets/components/javascript/associated-orgs.js b/grails-app/assets/components/javascript/associated-orgs.js
index b1666392a..380ec1d82 100644
--- a/grails-app/assets/components/javascript/associated-orgs.js
+++ b/grails-app/assets/components/javascript/associated-orgs.js
@@ -29,6 +29,8 @@ ko.components.register('associated-orgs', {
         var self = this;
         self.organisationSearchUrl = params.organisationSearchUrl;
         self.organisationViewUrl = params.organisationViewUrl;
+        self.displayName = params.displayName;
+        self.relationshipTypes = params.relationshipTypes;
 
         var $modal = $('#add-or-edit-organisation');
         $modal.find('form').validationEngine();
@@ -56,7 +58,7 @@ ko.components.register('associated-orgs', {
         params.associatedOrgs(self.associatedOrgs());
 
         self.validationNamespace = params.validationNamespace;
-        self.relationshipTypes = ['Service provider', 'Grantee', 'Sponsor'];
+
         self.organisationSearchUrl = params.organisationSearchUrl;
         self.allowedNames = ko.observableArray([]);
 
@@ -82,10 +84,10 @@ ko.components.register('associated-orgs', {
             var orgId = self.selectedOrganisation.organisationId();
             if (orgId) {
                 findMatchingOrganisation(orgId, function(matchingOrg) {
-                    if (matchingOrg) {
+                    if (matchingOrg && matchingOrg._source) {
                         self.allowedNames(self.allowedNamesForOrganisation(matchingOrg._source));
-
                         copy(self.selectedOrganisation, self.editableOrganisation);
+                        $('#searchOrganisation').val(matchingOrg._source.name);
                         $modal.modal('show');
                     }
                     else {
@@ -94,17 +96,17 @@ ko.components.register('associated-orgs', {
                 });
             }
             else {
-                copy(self.selectedOrganisation, self.editableOrganisation);
+                self.clearSelectedOrganisation();
                 $modal.modal('show');
             }
 
         }
 
         function findMatchingOrganisation(organisationId, callback) {
-            $.get(self.organisationSearchUrl+'?searchTerm='+orgId).done(function(results) {
+            $.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 == orgId;
+                        return hit._id == organisationId;
                     });
 
                     callback(matchingOrg);
@@ -181,8 +183,13 @@ ko.components.register('associated-orgs', {
         }
 
         self.clearSelectedOrganisation = function() {
+            $('#searchOrganisation').val('');
+            self.allowedNames([]);
             self.editableOrganisation.organisationId(null);
             self.editableOrganisation.name('');
+            self.editableOrganisation.description('');
+            self.editableOrganisation.fromDate('');
+            self.editableOrganisation.toDate('');
         }
 
         self.editableOrganisation = new AssociatedOrg();
diff --git a/grails-app/assets/components/template/associated-orgs.html b/grails-app/assets/components/template/associated-orgs.html
index ccc7d6c17..5d2302188 100644
--- a/grails-app/assets/components/template/associated-orgs.html
+++ b/grails-app/assets/components/template/associated-orgs.html
@@ -51,20 +51,27 @@ <h4 class="modal-title" id="title">Organisation relationship</h4>
                 <div class="form-group">
                     <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..."
+                        <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}"/>
                         <span class="input-group-text"><i class="fa fa-remove" data-bind="click:$parent.clearSelectedOrganisation"></i></span>
                     </div>
-                    </div>
+                </div>
+                <!-- ko if:$parent.displayName -->
                 <div class="form-group">
                     <label for="name-to-use" class="required">Organisation name as it appears on the project page (e.g. name used in contract)</label>
 
                     <select class="form-control" id="name-to-use"  data-bind="enable:organisationId(), value:name, options:$parent.allowedNames"
                             data-validation-engine="validate[required]" data-prompt-position="topLeft"></select>
                 </div>
+                <!-- /ko -->
                 <div class="form-group">
-                    <label class="required" for="relationship-description">Relationship to the project</label>
+                    <label class="required" for="relationship-description">Relationship</label>
+                    <!-- ko if:$parent.relationshipTypes -->
                     <select id="relationship-description" name="description" class="form-control form-control-sm" data-bind="enable:organisationId(), options:$parent.relationshipTypes, value:description"></select>
+                    <!-- /ko -->
+                    <!-- ko if:!$parent.relationshipTypes -->
+                    <input type="text" id="relationship-description" name="description" class="form-control form-control-sm" data-bind="enable:organisationId(), value:description"></input>
+                    <!-- /ko -->
                 </div>
                 <div class="form-group">
                     <label for="relationship-from-date">From date</label>
diff --git a/grails-app/assets/javascripts/knockout-custom-bindings.js b/grails-app/assets/javascripts/knockout-custom-bindings.js
index 189daddfe..58558f91f 100644
--- a/grails-app/assets/javascripts/knockout-custom-bindings.js
+++ b/grails-app/assets/javascripts/knockout-custom-bindings.js
@@ -264,7 +264,6 @@ ko.bindingHandlers.elasticSearchAutocomplete = {
     };
     options.select = function(event, ui) {
       result(ui.item);
-      $(this).val(""); // Clear the search field
     };
 
     $(element).autocomplete(options);
diff --git a/grails-app/assets/stylesheets/associated-orgs.css b/grails-app/assets/stylesheets/associated-orgs.css
new file mode 100644
index 000000000..5ffdb21d6
--- /dev/null
+++ b/grails-app/assets/stylesheets/associated-orgs.css
@@ -0,0 +1,14 @@
+
+.associatedOrgs .associated-org-list  {
+    display: grid;
+    grid-template-columns: 3em max-content auto;
+}
+.associatedOrgs .associated-org-list div {
+    padding: 5px;
+    padding-top: 3px;
+    padding-bottom: 3px;
+}
+.associatedOrgs .associated-org-list div.controls {
+    padding: 5px;
+    margin-right: 5px;
+}
diff --git a/grails-app/assets/stylesheets/organisation.css b/grails-app/assets/stylesheets/organisation.css
index ee4223aac..4e01c814d 100644
--- a/grails-app/assets/stylesheets/organisation.css
+++ b/grails-app/assets/stylesheets/organisation.css
@@ -1,6 +1,8 @@
 /*
 *= require slider-pro/css/slider-pro.css
 *= require projects-by-program
+*= require jquery-ui/themes/base/all.css
+*= require associated-orgs.css
 *= require_self
 */
 
@@ -97,3 +99,7 @@
 input.dateControl {
     max-width: 300px !important;
 }
+/** So autocomplete dropdown appears when used in a modal */
+.ui-autocomplete {
+    z-index:10000;
+}
diff --git a/grails-app/assets/stylesheets/project.css b/grails-app/assets/stylesheets/project.css
index 388ad6068..8c2e25a57 100644
--- a/grails-app/assets/stylesheets/project.css
+++ b/grails-app/assets/stylesheets/project.css
@@ -14,6 +14,7 @@
 *= require dataSets
 *= require activity.css
 *= require prettytextdiff/pretty_text_diff_basic.css
+*= require associated-orgs.css
 *= require_self
 */
 
@@ -358,20 +359,6 @@ li.select2-search input {
 	margin-left: 5px;
 }
 
-.associatedOrgs .associated-org-list  {
-	display: grid;
-	grid-template-columns: 3em max-content auto;
-}
-.associatedOrgs .associated-org-list div {
-	padding: 5px;
-	padding-top: 3px;
-	padding-bottom: 3px;
-}
-.associatedOrgs .associated-org-list div.controls {
-	padding: 5px;
-	margin-right: 5px;
-}
-
 .ui-autocomplete {
 	z-index:10000;
 }
diff --git a/grails-app/views/organisation/_organisationDetails.gsp b/grails-app/views/organisation/_organisationDetails.gsp
index f7f373faf..46d075898 100644
--- a/grails-app/views/organisation/_organisationDetails.gsp
+++ b/grails-app/views/organisation/_organisationDetails.gsp
@@ -114,7 +114,7 @@
         <label class="col-form-label col-sm-3" for="url">Associated organisations: <fc:iconHelp><g:message
                 code="organisation.associatedOrgs.help"/></fc:iconHelp></label>
         <div class="controls col-sm-9">
-            <associated-orgs params="associatedOrgs:associatedOrgs, organisationSearchUrl:organisationSearchUrl"></associated-orgs>
+            <associated-orgs params="associatedOrgs:associatedOrgs, organisationSearchUrl:organisationSearchUrl, displayName:false"></associated-orgs>
 
         </div>
     </section>
diff --git a/grails-app/views/project/_editProject.gsp b/grails-app/views/project/_editProject.gsp
index afdd16094..4ab41da65 100644
--- a/grails-app/views/project/_editProject.gsp
+++ b/grails-app/views/project/_editProject.gsp
@@ -22,7 +22,7 @@
 </g:if>
 
 
-<associated-orgs params="associatedOrgs:associatedOrgs, validationNamespace:'projectSettingsAssociatedOrgs', organisationSearchUrl:organisationSearchUrl, organisationViewUrl:organisationViewUrl"></associated-orgs>
+<associated-orgs params="associatedOrgs:associatedOrgs, validationNamespace:'projectSettingsAssociatedOrgs', organisationSearchUrl:organisationSearchUrl, organisationViewUrl:organisationViewUrl, displayName:true, relationshipTypes: ['Service provider', 'Grantee', 'Sponsor']"></associated-orgs>
 
 <div class="row mb-2">
     <div class="col-sm-12">