Refactor collection creator footer buttons into a component.

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

Hide file tree

Showing 2 changed files with 34 additions and 14 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, BButton, BLink, BTab, BTabs } from "bootstrap-vue";
+import { BAlert, BLink, BTab, BTabs } from "bootstrap-vue";
 import { storeToRefs } from "pinia";
 import { computed, ref, watch } from "vue";
 
@@ -13,6 +13,7 @@ import { useUserStore } from "@/stores/userStore";
 import localize from "@/utils/localization";
 import { orList } from "@/utils/strings";
 
+import CollectionCreatorFooterButtons from "./CollectionCreatorFooterButtons.vue";
 import CollectionCreatorHelpHeader from "./CollectionCreatorHelpHeader.vue";
 import CollectionCreatorShowExtensions from "./CollectionCreatorShowExtensions.vue";
 import CollectionCreatorSourceOptions from "./CollectionCreatorSourceOptions.vue";
@@ -180,19 +181,11 @@ watch(
                         </div>
                     </div>
 
-                    <div class="actions vertically-spaced d-flex justify-content-between">
-                        <BButton tabindex="-1" @click="cancelCreate">
-                            {{ localize("Cancel") }}
-                        </BButton>
-
-                        <BButton
-                            class="create-collection"
-                            variant="primary"
-                            :disabled="!validInput"
-                            @click="emit('clicked-create', collectionName)">
-                            {{ localize("Create " + shortWhatIsBeingCreated) }}
-                        </BButton>
-                    </div>
+                    <CollectionCreatorFooterButtons
+                        :short-what-is-being-created="shortWhatIsBeingCreated"
+                        :valid-input="validInput"
+                        @clicked-cancel="cancelCreate"
+                        @clicked-create="emit('clicked-create', collectionName)" />
                 </div>
             </div>
         </BTab>

diff --git a/client/src/components/Collections/common/CollectionCreatorFooterButtons.vue b/client/src/components/Collections/common/CollectionCreatorFooterButtons.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import localize from "@/utils/localization";
+
+interface Props {
+    validInput: boolean;
+    shortWhatIsBeingCreated: string;
+}
+
+defineProps<Props>();
+
+const emit = defineEmits<{
+    (e: "clicked-create"): void;
+    (e: "clicked-cancel"): void;
+}>();
+</script>
+
+<template>
+    <div class="actions vertically-spaced d-flex justify-content-between">
+        <BButton tabindex="-1" @click="emit('clicked-cancel')">
+            {{ localize("Cancel") }}
+        </BButton>
+
+        <BButton class="create-collection" variant="primary" :disabled="!validInput" @click="emit('clicked-create')">
+            {{ localize("Create " + shortWhatIsBeingCreated) }}
+        </BButton>
+    </div>
+</template>