From 22789b1de7022dba3380b06a68768a9f78eb7339 Mon Sep 17 00:00:00 2001
From: Anton Suharev <asuharev@asu.edu>
Date: Tue, 11 Jun 2024 17:24:15 -0700
Subject: [PATCH] fix: allow only one Organization to be set when adding an
 Organization Contributor; hide "Reset" button when editing Contributor
 through prop.

---
 .../components/form/ResearchOrgListField.vue  | 21 +++++++++++++++++--
 .../releaseEditor/ContributorAddModal.vue     |  1 +
 .../releaseEditor/ContributorEditForm.vue     |  7 ++++++-
 3 files changed, 26 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/form/ResearchOrgListField.vue b/frontend/src/components/form/ResearchOrgListField.vue
index e84c05a89..cff732ba1 100644
--- a/frontend/src/components/form/ResearchOrgListField.vue
+++ b/frontend/src/components/form/ResearchOrgListField.vue
@@ -99,7 +99,7 @@
 </template>
 
 <script setup lang="ts">
-import { inject, ref, onMounted, reactive, computed } from "vue";
+import { inject, ref, onMounted, reactive, computed, watch } from "vue";
 import { string } from "yup";
 import { Sortable } from "sortablejs-vue3";
 import type { SortableEvent } from "sortablejs";
@@ -119,16 +119,26 @@ export interface ResearchOrgListFieldProps {
   placeholder?: string;
   required?: boolean;
   disabled?: boolean;
+  isContributorOrganization?: boolean;
 }
 
 const props = defineProps<ResearchOrgListFieldProps>();
-
+const emit = defineEmits(["change"]);
 onMounted(() => {
   // FIXME: see if we can change `value` to a more meaningful variable name, e.g., `organizations`
   if (!value.value) {
     // force initialize to empty array
     value.value = [];
   }
+
+  // set givenName in the ContributorEditForm whenever value (selected organization) changes
+  watch(
+    () => value,
+    () => {
+      emit("change");
+    },
+    { deep: true }
+  );
 });
 
 const showCustomInput = ref(false);
@@ -173,6 +183,13 @@ function createCustom() {
 }
 
 function create(organization: Organization) {
+  // only one organization is allowed if Contributor is Organization
+  if (props.isContributorOrganization && value.value.length > 0) {
+    value.value = [];
+    value.value.push(organization);
+    return;
+  }
+
   if (!value.value.some(e => e.name === organization.name)) {
     value.value.push(organization);
   }
diff --git a/frontend/src/components/releaseEditor/ContributorAddModal.vue b/frontend/src/components/releaseEditor/ContributorAddModal.vue
index f7d88e901..d1fb60ae0 100644
--- a/frontend/src/components/releaseEditor/ContributorAddModal.vue
+++ b/frontend/src/components/releaseEditor/ContributorAddModal.vue
@@ -56,6 +56,7 @@
         id="add-contributor-form"
         :show-custom-input="showCustomInput"
         :disable-edit-form="disableEditForm"
+        :is-edit="false"
         ref="editFormRef"
         @success="() => editContributorModal?.hide()"
       />
diff --git a/frontend/src/components/releaseEditor/ContributorEditForm.vue b/frontend/src/components/releaseEditor/ContributorEditForm.vue
index 9a05970e8..27525fc3c 100644
--- a/frontend/src/components/releaseEditor/ContributorEditForm.vue
+++ b/frontend/src/components/releaseEditor/ContributorEditForm.vue
@@ -37,6 +37,7 @@
                   name="jsonAffiliations"
                   placeholder="Type to find organizations"
                   @change="setOrganizationGivenName"
+                  :is-contributor-organization="!isPerson"
                   label="Research Organization Registry Lookup"
                 />
                 <TextField
@@ -111,7 +112,9 @@
     </form>
   </div>
   <div class="modal-footer border-0">
-    <button v-if="!disableEditForm" type="button" class="btn btn-outline-gray" @click="resetContributor">Reset</button>
+    <button v-if="!isEdit" type="button" class="btn btn-outline-gray" @click="resetContributor">
+      Reset
+    </button>
     <button
       type="reset"
       class="btn btn-outline-gray"
@@ -154,10 +157,12 @@ const props = withDefaults(
     disableEditForm?: boolean;
     contributor?: ReleaseContributor;
     onSuccess?: () => void;
+    isEdit?: boolean;
   }>(),
   {
     showCustomInput: false,
     disableEditForm: true,
+    isEdit: true,
   }
 );