Refactor no items message out of collection creator for reuse.

jmchilton · Dec 31, 2024 · 95d8b1f · 95d8b1f
1 parent e226c33
commit 95d8b1f
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 8 deletions.
diff --git a/client/src/components/Collections/common/CollectionCreator.vue b/client/src/components/Collections/common/CollectionCreator.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { faPlus, faUpload } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { BAlert, BLink, BTab, BTabs } from "bootstrap-vue";
+import { BAlert, BTab, BTabs } from "bootstrap-vue";
 import { storeToRefs } from "pinia";
 import { computed, ref, watch } from "vue";
 
@@ -15,6 +15,7 @@ import { orList } from "@/utils/strings";
 
 import CollectionCreatorFooterButtons from "./CollectionCreatorFooterButtons.vue";
 import CollectionCreatorHelpHeader from "./CollectionCreatorHelpHeader.vue";
+import CollectionCreatorNoItemsMessage from "./CollectionCreatorNoItemsMessage.vue";
 import CollectionCreatorShowExtensions from "./CollectionCreatorShowExtensions.vue";
 import CollectionCreatorSourceOptions from "./CollectionCreatorSourceOptions.vue";
 import CollectionNameInput from "./CollectionNameInput.vue";
@@ -149,13 +150,7 @@ watch(
     <BTabs v-model="currentTab" fill justified>
         <BTab class="collection-creator" :title="localize('Create Collection')">
             <div v-if="props.noItems">
-                <BAlert variant="info" show>
-                    {{ localize("No items available to create a collection.") }}
-                    {{ localize("Exit and change your current history, or") }}
-                    <BLink class="text-decoration-none" @click.stop.prevent="currentTab = Tabs.upload">
-                        {{ localize("Upload some datasets.") }}
-                    </BLink>
-                </BAlert>
+                <CollectionCreatorNoItemsMessage @click-upload="currentTab = Tabs.upload" />
             </div>
             <div v-else>
                 <CollectionCreatorHelpHeader>

diff --git a/client/src/components/Collections/common/CollectionCreatorNoItemsMessage.vue b/client/src/components/Collections/common/CollectionCreatorNoItemsMessage.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { BAlert, BLink } from "bootstrap-vue";
+
+import localize from "@/utils/localization";
+
+const emit = defineEmits<{
+    (e: "clicked-upload"): void;
+}>();
+</script>
+<template>
+    <BAlert variant="info" show>
+        {{ localize("No items available to create a collection.") }}
+        {{ localize("Exit and change your current history, or") }}
+        <BLink class="text-decoration-none" @click.stop.prevent="emit('clicked-upload')">
+            {{ localize("Upload some datasets.") }}
+        </BLink>
+    </BAlert>
+</template>