From 8df6bc6a41ebfb7cb9947df0fb93846024c441fc Mon Sep 17 00:00:00 2001
From: EstelleDa <baishenlonger@live.com.sg>
Date: Thu, 17 Oct 2024 17:52:02 +1100
Subject: [PATCH 1/3] Add urn in experiment dropdown menu. Back end orders the
 expeirments in title.

---
 src/components/screens/ScoreSetCreator.vue | 35 ++++++++++++++++++----
 src/lib/item-types.js                      | 10 +++++++
 2 files changed, 39 insertions(+), 6 deletions(-)

diff --git a/src/components/screens/ScoreSetCreator.vue b/src/components/screens/ScoreSetCreator.vue
index 33d1ceab..db2bab9d 100644
--- a/src/components/screens/ScoreSetCreator.vue
+++ b/src/components/screens/ScoreSetCreator.vue
@@ -95,15 +95,25 @@
                       </div>
                       <div v-else style="position: relative;">
                         <span class="p-float-label">
-                          <Dropdown
+                          <AutoComplete
+                            ref="experimentInput"
                             v-model="experiment"
+                            dropdown
                             :id="$scopedId('input-experiment')"
+                            :suggestions="experimentSuggestionsList"
+                            field="title"
+                            forceSelection
+                            :multiple="false"
                             :options="editableExperiments"
-                            optionLabel="title"
-                            optionValue=""
-                            style="width: 50%"
                             @change="populateExperimentMetadata"
-                          />
+                            @complete="searchExperiments"
+                            @keyup.escape="clearExperimentSearch"
+                            style="width: 100%;"
+                          >
+                            <template #item="slotProps">
+                              {{slotProps.item.urn}}: {{slotProps.item.title}} 
+                            </template>
+                          </AutoComplete>
                           <label :for="$scopedId('input-experiment')">Experiment</label>
                         </span>
                         <span v-if="validationErrors.experiment" class="mave-field-error">{{ validationErrors.experiment }}</span>
@@ -1206,7 +1216,7 @@ export default {
 
   setup: () => {
     const editableExperiments = useItems({
-      itemTypeName: 'experiment',
+      itemTypeName: 'editable-experiment',
       options: {
         filter: {
           query: { l: { path: 'something' }, r: { constant: 'value' } }
@@ -1235,6 +1245,7 @@ export default {
       ...useFormatters(),
       ...useItem({ itemTypeName: 'scoreSet' }),
       editableExperiments: editableExperiments.items,
+      setExperimentSearch: (text) => editableExperiments.setRequestBody({ text }),
       licenses: licenses.items,
       publicationIdentifierSuggestions: publicationIdentifierSuggestions.items,
       setPublicationIdentifierSearch: (text) => publicationIdentifierSuggestions.setRequestBody({ text }),
@@ -1359,6 +1370,9 @@ export default {
   }),
 
   computed: {
+    experimentSuggestionsList: function() {
+      return this.suggestionsForAutocomplete(this.editableExperiments)
+    },
     maxWizardStepValidated: function() {
       const numSteps = 5 + this.numTargets
       // This yields the index of the maximum step validated, -1 if step 0 is not valid, and -2 if all steps are valid.
@@ -1878,6 +1892,15 @@ export default {
     // Form fields
     ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
 
+    clearExperimentSearch: function() {
+      const input = this.$refs.experimentInput
+      input.inputTextValue = null
+    },
+
+    searchExperiments: function(event) {
+      this.setExperimentSearch(event.query)
+    },
+
     populateExperimentMetadata: function (event) {
       this.abstractText = event.value.abstractText
       this.contributors = event.value.contributors || []
diff --git a/src/lib/item-types.js b/src/lib/item-types.js
index 79e0b01f..e241aec0 100644
--- a/src/lib/item-types.js
+++ b/src/lib/item-types.js
@@ -130,6 +130,16 @@ const itemTypes = {
       }
     }
   },
+  'editable-experiment': {
+    name: 'editable-experiments',
+    restCollectionName: 'editable-experiments',
+    httpOptions: {
+      list: {
+        method: 'post',
+        url: `${config.apiBaseUrl}/me/experiments/search`
+      }
+    }
+  },
   'experiment': {
     name: 'experiment', // TODO Redundant, change this structure
     restCollectionName: 'experiments',

From c2e70ff751fb4d4370dbddc3fb3e5cdc1805599e Mon Sep 17 00:00:00 2001
From: Ben Capodanno <capodb@uw.edu>
Date: Thu, 17 Oct 2024 11:45:40 -0700
Subject: [PATCH 2/3] Only Populate Experiment Metadata when a new Experiment
 is Selected

---
 src/components/screens/ScoreSetCreator.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/screens/ScoreSetCreator.vue b/src/components/screens/ScoreSetCreator.vue
index db2bab9d..be584a18 100644
--- a/src/components/screens/ScoreSetCreator.vue
+++ b/src/components/screens/ScoreSetCreator.vue
@@ -105,13 +105,13 @@
                             forceSelection
                             :multiple="false"
                             :options="editableExperiments"
-                            @change="populateExperimentMetadata"
+                            @option-select="populateExperimentMetadata"
                             @complete="searchExperiments"
                             @keyup.escape="clearExperimentSearch"
                             style="width: 100%;"
                           >
                             <template #item="slotProps">
-                              {{slotProps.item.urn}}: {{slotProps.item.title}} 
+                              {{slotProps.item.urn}}: {{slotProps.item.title}}
                             </template>
                           </AutoComplete>
                           <label :for="$scopedId('input-experiment')">Experiment</label>

From cff0793f98bb8e851d9b538fd43e714d676b58b9 Mon Sep 17 00:00:00 2001
From: EstelleDa <baishenlonger@live.com.sg>
Date: Tue, 22 Oct 2024 17:04:44 +1100
Subject: [PATCH 3/3] Change autocomplete to dropdown.

---
 src/components/screens/ScoreSetCreator.vue | 37 +++++++---------------
 src/lib/item-types.js                      | 10 ------
 2 files changed, 12 insertions(+), 35 deletions(-)

diff --git a/src/components/screens/ScoreSetCreator.vue b/src/components/screens/ScoreSetCreator.vue
index be584a18..17fd5d24 100644
--- a/src/components/screens/ScoreSetCreator.vue
+++ b/src/components/screens/ScoreSetCreator.vue
@@ -95,25 +95,25 @@
                       </div>
                       <div v-else style="position: relative;">
                         <span class="p-float-label">
-                          <AutoComplete
+                          <Dropdown
                             ref="experimentInput"
                             v-model="experiment"
-                            dropdown
                             :id="$scopedId('input-experiment')"
-                            :suggestions="experimentSuggestionsList"
-                            field="title"
-                            forceSelection
-                            :multiple="false"
+                            filter optionLabel="title"
                             :options="editableExperiments"
+                            :virtualScrollerOptions="{ itemSize: 50 }"
                             @option-select="populateExperimentMetadata"
-                            @complete="searchExperiments"
-                            @keyup.escape="clearExperimentSearch"
                             style="width: 100%;"
                           >
-                            <template #item="slotProps">
-                              {{slotProps.item.urn}}: {{slotProps.item.title}}
+                            <template #option="slotProps">
+                              {{slotProps.option.urn}}: {{slotProps.option.title}}
                             </template>
-                          </AutoComplete>
+                            <template #empty>
+                              <div style="padding: 10px; text-align:center;">
+                                No experiments found.
+                              </div>
+                            </template>
+                          </Dropdown>
                           <label :for="$scopedId('input-experiment')">Experiment</label>
                         </span>
                         <span v-if="validationErrors.experiment" class="mave-field-error">{{ validationErrors.experiment }}</span>
@@ -1216,7 +1216,7 @@ export default {
 
   setup: () => {
     const editableExperiments = useItems({
-      itemTypeName: 'editable-experiment',
+      itemTypeName: 'experiment',
       options: {
         filter: {
           query: { l: { path: 'something' }, r: { constant: 'value' } }
@@ -1245,7 +1245,6 @@ export default {
       ...useFormatters(),
       ...useItem({ itemTypeName: 'scoreSet' }),
       editableExperiments: editableExperiments.items,
-      setExperimentSearch: (text) => editableExperiments.setRequestBody({ text }),
       licenses: licenses.items,
       publicationIdentifierSuggestions: publicationIdentifierSuggestions.items,
       setPublicationIdentifierSearch: (text) => publicationIdentifierSuggestions.setRequestBody({ text }),
@@ -1370,9 +1369,6 @@ export default {
   }),
 
   computed: {
-    experimentSuggestionsList: function() {
-      return this.suggestionsForAutocomplete(this.editableExperiments)
-    },
     maxWizardStepValidated: function() {
       const numSteps = 5 + this.numTargets
       // This yields the index of the maximum step validated, -1 if step 0 is not valid, and -2 if all steps are valid.
@@ -1892,15 +1888,6 @@ export default {
     // Form fields
     ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
 
-    clearExperimentSearch: function() {
-      const input = this.$refs.experimentInput
-      input.inputTextValue = null
-    },
-
-    searchExperiments: function(event) {
-      this.setExperimentSearch(event.query)
-    },
-
     populateExperimentMetadata: function (event) {
       this.abstractText = event.value.abstractText
       this.contributors = event.value.contributors || []
diff --git a/src/lib/item-types.js b/src/lib/item-types.js
index e241aec0..79e0b01f 100644
--- a/src/lib/item-types.js
+++ b/src/lib/item-types.js
@@ -130,16 +130,6 @@ const itemTypes = {
       }
     }
   },
-  'editable-experiment': {
-    name: 'editable-experiments',
-    restCollectionName: 'editable-experiments',
-    httpOptions: {
-      list: {
-        method: 'post',
-        url: `${config.apiBaseUrl}/me/experiments/search`
-      }
-    }
-  },
   'experiment': {
     name: 'experiment', // TODO Redundant, change this structure
     restCollectionName: 'experiments',