refactor: improve person / organization switching

- fix bug in contributor serializer when submitting an organization with
  only a given name and no email
- use ROR affiliations search generate Contributor.given_name, should
  find a way to limit jsonAffiliations and ResearchOrgListField to a
  single entry
- add reset button to reset contributor entirely if we want to start
  over but needs additional work, see below

TODO: reset works fine for new contributors but should also offer a
pathway to allow resetting and starting over with an existing
contributor. perhaps needs a clean way to clear the disabled attributes
for the entire modal, maybe bubble an event up to the ContributorsPage
component?

django/library/serializers.py

@@ -211,8 +211,10 @@ def check_unique_users(self, contributors):
             if raw_user:
                 username = raw_user["username"]
                 user_map[username].append(contributor)
-            else:
+            elif contributor["type"] == "person":
                 contributors_map[contributor["email"]].append(contributor)
+            else:
+                contributors_map[contributor["given_name"]].append(contributor)
 
         error_messages = []
         for username, related_contributors in user_map.items():

frontend/src/components/form/ResearchOrgListField.vue

@@ -124,6 +124,7 @@ export interface ResearchOrgListFieldProps {
 const props = defineProps<ResearchOrgListFieldProps>();
 
 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 = [];

frontend/src/components/form/SelectField.vue

@@ -7,6 +7,7 @@
     <select
       v-else
       :id="id"
+      :disabled="disabled"
       v-bind="attrs"
       :class="{ 'form-select': true, 'is-invalid': error }"
       @change="updateValue"
@@ -45,6 +46,7 @@ export interface SelectFieldProps {
   help?: string;
   placeholder?: string;
   required?: boolean;
+  disabled?: boolean;
   options: { value: any; label: string }[];
 }
 

frontend/src/components/releaseEditor/ContributorEditForm.vue

@@ -6,13 +6,15 @@
           class="mb-3"
           name="type"
           label="Contributor Type"
+          @change="changeContributorType"
           :options="typeOptions"
+          :disabled="disableEditForm"
           required
         />
         <div class="card mb-3">
           <div v-if="isPerson" class="card-header">
             <UserSearch
-              label="Search for an Existing User"
+              label="Search for an existing User"
               placeholder="Skip entering contributor details by searching for users already in our system"
               :search-fn="search"
               :errors="profileErrors"
@@ -30,13 +32,21 @@
               style="z-index: 3"
             ></div>
             <div class="card-body">
-              <TextField
-                v-if="!isPerson"
-                class="mb-3"
-                name="givenName"
-                label="Organization Name"
-                required
-              />
+              <div v-if="!isPerson">
+                <ResearchOrgListField
+                  name="jsonAffiliations"
+                  placeholder="Type to find organizations"
+                  @change="setOrganizationGivenName"
+                  label="Research Organization Registry Lookup"
+                />
+                <TextField
+                  class="mb-3"
+                  name="givenName"
+                  label="Organization Name"
+                  disabled
+                  required
+                />
+              </div>
               <div v-else class="row">
                 <div class="col-4 pe-0">
                   <TextField
@@ -65,20 +75,21 @@
                   />
                 </div>
               </div>
-              <TextField
-                v-if="isPerson"
-                class="mb-3"
-                name="email"
-                label="Email"
-                required
-                :disabled="disableEditForm"
-              />
-              <ResearchOrgListField
-                name="jsonAffiliations"
-                placeholder="Type to find organizations"
-                label="Affiliations"
-                :disabled="disableEditForm"
-              />
+              <div v-if="isPerson">
+                <TextField
+                  class="mb-3"
+                  name="email"
+                  label="Email"
+                  required
+                  :disabled="disableEditForm"
+                />
+                <ResearchOrgListField
+                  name="jsonAffiliations"
+                  placeholder="Type to find organizations"
+                  label="Affiliations"
+                  :disabled="disableEditForm"
+                />
+              </div>
             </div>
           </div>
         </div>
@@ -95,11 +106,12 @@
         required
         :disabled="disableEditForm"
       />
-      <CheckboxField name="includeInCitation" label="Include in Citation?" />
+      <CheckboxField name="includeInCitation" label="Include in citation?" />
       <FormAlert :validation-errors="Object.values(errors)" :server-errors="serverErrors" />
     </form>
   </div>
   <div class="modal-footer border-0">
+    <button type="button" class="btn btn-outline-gray" @click="resetContributor">Reset</button>
     <button
       type="reset"
       class="btn btn-outline-gray"
@@ -299,12 +311,27 @@ function populateFromContributor(contributor: Contributor | null) {
   });
 }
 
+function hasPersonData() {
+  return values.user || values.givenName || values.familyName || values.email;
+}
+
+function changeContributorType(event) {
+  // reset contributors if we switch to an organization and there was a previous user set
+  if (values.type === "organization" && hasPersonData()) {
+    resetContributor();
+  }
+}
+
 function resetContributor() {
   setValues(initialValues);
   serverErrors.value = [];
   handleReset();
 }
 
+function setOrganizationGivenName() {
+  values.givenName = values.jsonAffiliations[0].name;
+}
+
 function populateFromUser(user: any) {
   setValues({
     ...values,

frontend/src/components/releaseEditor/ContributorsPage.vue

@@ -2,8 +2,8 @@
   <div>
     <p>
       Please list the contributors that should be included in a citation for this software release.
-      Ordering is important, as is the role of the contributor. You can change ordering by dragging
-      contributors in the list.
+      Ordering is important, as are the contributor's role(s). Change contributor ordering by
+      dragging them in the list.
     </p>
     <p>
       By default, we will always add the submitter (you) as a release contributor. There must be at
@@ -14,7 +14,8 @@
       <div v-if="reordered">
         <div class="alert alert-warning px-1 py-0 mb-2">
           <small class="">
-            <i class="fas fa-info-circle"></i> Please save your changes once finished re-ordering
+            <i class="fas fa-info-circle"></i> Please save your changes after you're finished
+            re-ordering
           </small>
         </div>
         <div class="d-flex justify-content-end">