Small UI tweaks to upload select boxes.

- Don't add a search for just a couple datatypes. - Replace the default failed search text with more specific messages.
jmchilton · Aug 14, 2023 · 53bf753 · 53bf753
1 parent 3a91143
commit 53bf753
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 3 deletions.
diff --git a/client/src/components/Upload/CompositeBox.vue b/client/src/components/Upload/CompositeBox.vue
@@ -193,9 +193,15 @@ defineExpose({
                 :value="null"
                 :options="listExtensions"
                 :disabled="isRunning"
+                what="file type"
                 @input="inputExtension" />
             <span class="upload-footer-title">Reference:</span>
-            <UploadSelect :value="dbKey" :options="listDbKeys" :disabled="isRunning" @input="inputDbkey" />
+            <UploadSelect
+                what="reference"
+                :value="dbKey"
+                :options="listDbKeys"
+                :disabled="isRunning"
+                @input="inputDbkey" />
         </div>
         <div class="upload-buttons d-flex justify-content-end">
             <BButton

diff --git a/client/src/components/Upload/DefaultBox.vue b/client/src/components/Upload/DefaultBox.vue
@@ -388,6 +388,7 @@ defineExpose({
                 :value="collectionType"
                 :disabled="isRunning"
                 :options="COLLECTION_TYPES"
+                :searchable="false"
                 placeholder="Select Type"
                 @input="updateCollectionType" />
             <span class="upload-footer-title">Type (set all):</span>
@@ -396,6 +397,7 @@ defineExpose({
                 :value="extension"
                 :disabled="isRunning"
                 :options="listExtensions"
+                what="file type"
                 placeholder="Select Type"
                 @input="updateExtension" />
             <UploadExtension :extension="extension" :list-extensions="listExtensions" />
@@ -405,6 +407,7 @@ defineExpose({
                 :value="dbKey"
                 :disabled="isRunning"
                 :options="listDbKeys"
+                what="reference"
                 placeholder="Select Reference"
                 @input="updateDbKey" />
         </div>

diff --git a/client/src/components/Upload/DefaultRow.vue b/client/src/components/Upload/DefaultRow.vue
@@ -129,6 +129,7 @@ function removeUpload() {
                 :disabled="isDisabled"
                 :options="listExtensions"
                 placeholder="Select Type"
+                what="file type"
                 @input="inputExtension" />
             <UploadExtension v-if="listExtensions !== null" :extension="extension" :list-extensions="listExtensions" />
             <UploadSelect
@@ -138,6 +139,7 @@ function removeUpload() {
                 :disabled="isDisabled"
                 :options="listDbKeys"
                 placeholder="Select Reference"
+                what="reference"
                 @input="inputDbKey" />
             <UploadSettings
                 class="upload-settings"

diff --git a/client/src/components/Upload/RulesInput.vue b/client/src/components/Upload/RulesInput.vue
@@ -132,7 +132,7 @@ function inputRemote() {
         <FontAwesomeIcon v-if="isDisabled" class="upload-text-lock" icon="fa-lock" />
         <div class="upload-footer text-center">
             <span class="upload-footer-title">Upload type:</span>
-            <UploadSelect v-model="dataType" class="rule-data-type" :options="RULES_TYPES" />
+            <UploadSelect v-model="dataType" class="rule-data-type" :options="RULES_TYPES" :searchable="false" />
         </div>
         <div class="upload-buttons d-flex justify-content-end">
             <BButton @click="inputPaste">

diff --git a/client/src/components/Upload/UploadSelect.vue b/client/src/components/Upload/UploadSelect.vue
@@ -25,6 +25,14 @@ const props = defineProps({
         type: String,
         default: null,
     },
+    what: {
+        type: String,
+        default: null,
+    },
+    searchable: {
+        type: Boolean,
+        default: true,
+    },
 });
 
 const emit = defineEmits(["input"]);
@@ -44,12 +52,17 @@ const currentValue = computed({
         class="upload-settings-select rounded"
         deselect-label=""
         :disabled="disabled"
+        :searchable="searchable"
         label="text"
         :options="options"
         :placeholder="placeholder"
         select-label=""
         selected-label=""
-        track-by="id" />
+        track-by="id">
+        <template
+            ><span slot="noResult" v-localize>No matching {{ what }}s found.</span></template
+        >
+    </Multiselect>
 </template>
 
 <style lang="scss">