added disabled if any node not picked

Author: MohamedElmdary

frontend/kubecloud-v2/components/deploy-cluster/place/PlaceVMsNodes.vue

@@ -21,7 +21,11 @@
             :value="value"
             :text="text"
             :style="{ borderRadius: '0 !important', backgroundColor: deactive ? 'rgba(var(--v-theme-error), 0.12)' : active ? 'rgba(var(--v-theme-success), 0.12)' : nodeTab.join('|') === value ? 'rgba(var(--v-theme-primary), 0.12)' : undefined }"
-            :class="{ 'text-success': active, 'text-error': deactive }"
+            :class="{
+              'text-success': active,
+              'text-error': deactive,
+            }"
+            class="border-b border-0 border-dashed"
           />
         </DefineNodeTab>
 

frontend/kubecloud-v2/pages/dashboard/clusters/deploy.vue

@@ -68,7 +68,7 @@
           </v-stepper-window-item>
 
           <v-stepper-window-item eager :value="3">
-            Review
+            {{ cluster }}
           </v-stepper-window-item>
         </v-stepper-window>
 
@@ -98,6 +98,7 @@
 
           <v-btn
             v-else
+            disabled
             prepend-icon="mdi-rocket-launch"
             text="Deploy Cluster"
             variant="tonal"
@@ -127,14 +128,17 @@ const [DefineStepperItem, ReuseStepperItem] = createReusableTemplate({
   props: { title: String, step: Number, value: Number, completed: Boolean },
 })
 
-const step = ref(1)
-const defineFormValid = ref(false)
-const placeFormValid = ref(true)
-
 const cluster = ref<ClusterForm>({
   name: "engine789",
   region: null,
   masters: [createClusterNode({ type: "leader", name: "Leader" })],
   workers: [],
 })
+
+const step = ref(1)
+const defineFormValid = ref(false)
+const placeFormValid = computed(() => {
+  const { masters, workers } = cluster.value
+  return masters.every(v => v.node && v.node.valid) && workers.every(v => v.node && v.node.valid)
+})
 </script>