Decompose SelectObjectStore for reuse of visual elements.

jmchilton · Feb 8, 2024 · 82c33ce · 82c33ce
1 parent a523f21
commit 82c33ce
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 14 deletions.
diff --git a/client/src/components/ObjectStore/ObjectStoreSelectButton.vue b/client/src/components/ObjectStore/ObjectStoreSelectButton.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { BButton } from "bootstrap-vue";
+import { type ConcreteObjectStoreModel } from "@/api";
+
+import ObjectStoreBadges from "@/components/ObjectStore/ObjectStoreBadges.vue";
+import ProvidedQuotaSourceUsageBar from "@/components/User/DiskUsage/Quota/ProvidedQuotaSourceUsageBar.vue";
+
+interface ObjectStoreSelectButtonProps {
+    objectStore: ConcreteObjectStoreModel;
+    variant: string;
+}
+
+defineProps<ObjectStoreSelectButtonProps>();
+
+const emit = defineEmits<{
+    (e: "click", value: string): void;
+}>();
+</script>
+
+<template>
+    <BButton
+        :variant="variant"
+        :data-object-store-id="objectStore.object_store_id"
+        @click="emit('click', objectStore.object_store_id)"
+        >{{ objectStore.name }}
+        <ObjectStoreBadges :badges="objectStore.badges" size="lg" :more-on-hover="false" />
+        <ProvidedQuotaSourceUsageBar :object-store="objectStore" :compact="true"> </ProvidedQuotaSourceUsageBar>
+    </BButton>
+</template>
diff --git a/client/src/components/ObjectStore/SelectObjectStore.vue b/client/src/components/ObjectStore/SelectObjectStore.vue
@@ -6,8 +6,7 @@ import { useObjectStoreStore } from "@/stores/objectStoreStore";
 
 import LoadingSpan from "@/components/LoadingSpan.vue";
 import DescribeObjectStore from "@/components/ObjectStore/DescribeObjectStore.vue";
-import ObjectStoreBadges from "@/components/ObjectStore/ObjectStoreBadges.vue";
-import ProvidedQuotaSourceUsageBar from "@/components/User/DiskUsage/Quota/ProvidedQuotaSourceUsageBar.vue";
+import ObjectStoreSelectButton from "./ObjectStoreSelectButton.vue";
 
 interface SelectObjectStoreProps {
     selectedObjectStoreId?: String | null;
@@ -79,19 +78,14 @@ async function handleSubmit(preferredObjectStoreId: string) {
                             @click="handleSubmit(null)"
                             ><i>{{ defaultOptionTitle | localize }}</i></b-button
                         >
-                        <b-button
-                            v-for="object_store in selectableObjectStores"
-                            :id="`preferred-object-store-button-${object_store.object_store_id}`"
-                            :key="object_store.object_store_id"
-                            :variant="variant(object_store.object_store_id)"
+                        <ObjectStoreSelectButton
+                            v-for="objectStore in selectableObjectStores"
+                            :id="`preferred-object-store-button-${objectStore.object_store_id}`"
+                            :key="objectStore.object_store_id"
+                            :object-store="objectStore"
+                            :variant="variant(objectStore.object_store_id)"
                             class="preferred-object-store-select-button"
-                            :data-object-store-id="object_store.object_store_id"
-                            @click="handleSubmit(object_store.object_store_id)"
-                            >{{ object_store.name }}
-                            <ObjectStoreBadges :badges="object_store.badges" size="lg" :more-on-hover="false" />
-                            <ProvidedQuotaSourceUsageBar :object-store="object_store" :compact="true">
-                            </ProvidedQuotaSourceUsageBar>
-                        </b-button>
+                            @click="handleSubmit(objectStore.object_store_id)" />
                     </b-button-group>
                 </b-col>
                 <b-col cols="5">