Merge pull request #1105 from slntopp/dev-fixes

Dev fixes
slntopp · Sep 12, 2023 · 29c7fe0 · 29c7fe0
2 parents 6e881fe + d6c9bee
commit 29c7fe0
Showing 1 changed file with 18 additions and 3 deletions.
diff --git a/admin-ui/src/components/modules/virtual/instanceCreate.vue b/admin-ui/src/components/modules/virtual/instanceCreate.vue
@@ -29,13 +29,25 @@
           />
         </v-col>
         <v-col cols="6">
-          <v-select
+          <v-autocomplete
             label="product"
             :value="instance.product"
             v-if="products.length > 0"
             :items="products"
+            item-text="key"
+            item-value="key"
             @change="setValue('product', $event)"
-          />
+          >
+            <template v-slot:item="{ item }">
+              <div
+                style="width: 100%"
+                class="d-flex justify-space-between align-center"
+              >
+                <span>{{ item.key }}</span>
+                <span class="ml-4">{{ item.title }}</span>
+              </div>
+            </template>
+          </v-autocomplete>
         </v-col>
       </v-row>
     </v-card>
@@ -63,7 +75,10 @@ export default {
     changeBilling(val) {
       this.bilingPlan = this.plans.list.find((p) => p.uuid === val);
       if (this.bilingPlan) {
-        this.products = Object.keys(this.bilingPlan.products);
+        this.products = Object.keys(this.bilingPlan.products).map((key) => ({
+          key,
+          title: this.bilingPlan.products[key].title,
+        }));
       }
       this.setValue("billing_plan", this.bilingPlan);
     },