From 0d5df38d675b0c74100f7db6fe463045867463ad Mon Sep 17 00:00:00 2001
From: SazukinPavel <sazukinpavelal@gmail.com>
Date: Wed, 15 Jan 2025 08:40:01 +0400
Subject: [PATCH 1/3] add color to showcase

---
 admin-ui/src/views/ShowcaseCreate.vue | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/admin-ui/src/views/ShowcaseCreate.vue b/admin-ui/src/views/ShowcaseCreate.vue
index 15ce6a062..378ca877c 100644
--- a/admin-ui/src/views/ShowcaseCreate.vue
+++ b/admin-ui/src/views/ShowcaseCreate.vue
@@ -35,6 +35,9 @@
             @input:value="showcase.icon = $event"
           />
         </v-col>
+        <v-col cols="2">
+          <color-picker label="Color" v-model="showcase.meta.iconColor" />
+        </v-col>
         <v-col cols="3">
           <v-autocomplete
             clearable
@@ -128,6 +131,7 @@ import { useStore } from "@/store";
 import api from "@/api";
 import { useRouter } from "vue-router/composables";
 import LocationsAutocomplete from "@/components/ui/locationsAutocomplete.vue";
+import ColorPicker from "@/components/ui/colorPicker.vue";
 
 const props = defineProps({
   realShowcase: {},
@@ -167,6 +171,7 @@ const showcase = ref({
   public: true,
   meta: {
     type: "",
+    iconColor: "",
   },
 });
 

From 492a31ffd177f6baecd917464d01441e01ddc21c Mon Sep 17 00:00:00 2001
From: SazukinPavel <sazukinpavelal@gmail.com>
Date: Wed, 15 Jan 2025 08:46:06 +0400
Subject: [PATCH 2/3] add color to showcase

---
 admin-ui/src/components/showcases_table.vue     |  1 +
 admin-ui/src/components/ui/iconTitlePreview.vue |  3 ++-
 admin-ui/src/components/ui/nocloudIcon.vue      | 14 +++++++++++---
 3 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/admin-ui/src/components/showcases_table.vue b/admin-ui/src/components/showcases_table.vue
index 6dc3f7444..f46fb4902 100644
--- a/admin-ui/src/components/showcases_table.vue
+++ b/admin-ui/src/components/showcases_table.vue
@@ -12,6 +12,7 @@
       <icon-title-preview
         type="nocloud"
         :icon="item.icon"
+        :color="item.meta.iconColor"
         :title="item.title"
       />
     </template>
diff --git a/admin-ui/src/components/ui/iconTitlePreview.vue b/admin-ui/src/components/ui/iconTitlePreview.vue
index f8f56a7ce..d42981346 100644
--- a/admin-ui/src/components/ui/iconTitlePreview.vue
+++ b/admin-ui/src/components/ui/iconTitlePreview.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="d-flex justify-space-between" style="width: 100%">
     <span>{{ title }}</span>
-    <nocloud-icon :type="type" :icon="icon" />
+    <nocloud-icon :color="color" :type="type" :icon="icon" />
   </div>
 </template>
 
@@ -15,6 +15,7 @@ export default {
     type: {},
     title: { type: String, default: "none" },
     icon: { type: String, default: "" },
+    color: { type: String, default: "" },
   },
 };
 </script>
diff --git a/admin-ui/src/components/ui/nocloudIcon.vue b/admin-ui/src/components/ui/nocloudIcon.vue
index 239a34411..866fee64e 100644
--- a/admin-ui/src/components/ui/nocloudIcon.vue
+++ b/admin-ui/src/components/ui/nocloudIcon.vue
@@ -1,13 +1,20 @@
 <template>
-  <v-icon class="ml-2" v-if="isMdi">{{ `mdi-${iconName}` }}</v-icon>
-  <ant-icon v-else-if="isAnt" class="ml-2" :name="iconName" />
+  <v-icon :style="{ fill: color }" :color="color" class="ml-2" v-if="isMdi">{{
+    `mdi-${iconName}`
+  }}</v-icon>
+  <ant-icon
+    :style="{ fill: color }"
+    v-else-if="isAnt"
+    class="ml-2"
+    :name="iconName"
+  />
   <img
     v-else-if="iconName && !loadedError"
     width="22px"
     height="22px"
     :src="iconName"
   />
-  <ant-icon v-else class="ml-2" :name="icon" />
+  <ant-icon :style="{ fill: color }" v-else class="ml-2" :name="icon" />
 </template>
 
 <script setup>
@@ -18,6 +25,7 @@ const props = defineProps({
   type: { type: String, default: "mdi" },
   title: { type: String, default: "none" },
   icon: { type: String, default: "" },
+  color: { type: String, default: "" },
 });
 const { type, icon } = toRefs(props);
 

From 7338508802d48db5b5eab46167e91c9cc1affe02 Mon Sep 17 00:00:00 2001
From: SazukinPavel <sazukinpavelal@gmail.com>
Date: Thu, 16 Jan 2025 17:58:02 +0400
Subject: [PATCH 3/3] fix showcase

---
 admin-ui/src/components/ServicesProvider/info.vue | 4 ++++
 admin-ui/src/views/ShowcaseCreate.vue             | 6 ++++--
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/admin-ui/src/components/ServicesProvider/info.vue b/admin-ui/src/components/ServicesProvider/info.vue
index c4afa8e85..30bbfc97d 100644
--- a/admin-ui/src/components/ServicesProvider/info.vue
+++ b/admin-ui/src/components/ServicesProvider/info.vue
@@ -224,6 +224,10 @@ const plansParams = computed(() => {
     type.push("ione-vpn");
   }
 
+  if (provider.value.type === "empty") {
+    type.push("vpn");
+  }
+
   return {
     showDeleted: false,
     excludeUuids: relatedPlans.value?.map((p) => p.uuid) || [],
diff --git a/admin-ui/src/views/ShowcaseCreate.vue b/admin-ui/src/views/ShowcaseCreate.vue
index 378ca877c..0e465cb6b 100644
--- a/admin-ui/src/views/ShowcaseCreate.vue
+++ b/admin-ui/src/views/ShowcaseCreate.vue
@@ -376,7 +376,9 @@ const fetchPlans = async () => {
 
   try {
     await Promise.all(
-      showcase.value.items.map(async ({ servicesProvider: sp }) => {
+      showcase.value.items.map(async (item) => {
+        let sp = item.servicesProvider;
+
         try {
           if (sp && !plansBySpMap.value.has(sp)) {
             plansBySpMap.value.set(
@@ -401,7 +403,7 @@ const fetchPlans = async () => {
   }
 };
 
-watch(showcase.value.items, fetchPlans);
+watch(() => showcase.value.items, fetchPlans,{deep:true});
 </script>
 
 <style scoped lang="scss">