From d3714164615b5f8efa6d504d98791283e333acca Mon Sep 17 00:00:00 2001
From: SazukinPavel <sazukinpavelal@gmail.com>
Date: Mon, 11 Sep 2023 14:43:47 +0400
Subject: [PATCH 1/2] add title & key to products

---
 .../modules/virtual/instanceCreate.vue         | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/admin-ui/src/components/modules/virtual/instanceCreate.vue b/admin-ui/src/components/modules/virtual/instanceCreate.vue
index f4a01a99c..09b909149 100644
--- a/admin-ui/src/components/modules/virtual/instanceCreate.vue
+++ b/admin-ui/src/components/modules/virtual/instanceCreate.vue
@@ -34,8 +34,19 @@
             :value="instance.product"
             v-if="products.length > 0"
             :items="products"
+            item-text="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-select>
         </v-col>
       </v-row>
     </v-card>
@@ -63,7 +74,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);
     },

From d6c9beec5a037b311196b6cd1c62f4630095f908 Mon Sep 17 00:00:00 2001
From: SazukinPavel <sazukinpavelal@gmail.com>
Date: Mon, 11 Sep 2023 14:57:41 +0400
Subject: [PATCH 2/2] change select to autocomplete

---
 admin-ui/src/components/modules/virtual/instanceCreate.vue | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/admin-ui/src/components/modules/virtual/instanceCreate.vue b/admin-ui/src/components/modules/virtual/instanceCreate.vue
index 09b909149..d21a57cab 100644
--- a/admin-ui/src/components/modules/virtual/instanceCreate.vue
+++ b/admin-ui/src/components/modules/virtual/instanceCreate.vue
@@ -29,12 +29,13 @@
           />
         </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 }">
@@ -46,7 +47,7 @@
                 <span class="ml-4">{{ item.title }}</span>
               </div>
             </template>
-          </v-select>
+          </v-autocomplete>
         </v-col>
       </v-row>
     </v-card>