From c64625e0614d78d768de21151d1397459b6f4e15 Mon Sep 17 00:00:00 2001
From: Sam <51686767+samuveth@users.noreply.github.com>
Date: Mon, 16 Oct 2023 08:48:53 +0700
Subject: [PATCH] Fix symbol validation for setup vote and advanced (#4284)

---
 src/components/SettingsStrategiesBlock.vue |  1 +
 src/components/SetupStrategyAdvanced.vue   |  3 ++-
 src/components/SetupStrategyVote.vue       | 31 +++++++++++++---------
 3 files changed, 21 insertions(+), 14 deletions(-)

diff --git a/src/components/SettingsStrategiesBlock.vue b/src/components/SettingsStrategiesBlock.vue
index c2874821845e..7fc7da27ea27 100644
--- a/src/components/SettingsStrategiesBlock.vue
+++ b/src/components/SettingsStrategiesBlock.vue
@@ -71,6 +71,7 @@ function handleSubmitStrategy(strategy) {
           :error="validationErrors?.symbol"
           :max-length="schemas.space.properties.symbol.maxLength"
           :disabled="isViewOnly"
+          autofocus
         />
       </ContainerParallelInput>
 
diff --git a/src/components/SetupStrategyAdvanced.vue b/src/components/SetupStrategyAdvanced.vue
index 7d60058f7654..e6bc154258a3 100644
--- a/src/components/SetupStrategyAdvanced.vue
+++ b/src/components/SetupStrategyAdvanced.vue
@@ -4,7 +4,8 @@ const { validationErrors } = useFormSpaceSettings('setup');
 const emit = defineEmits(['next']);
 
 function nextStep() {
-  if (validationErrors.value.strategies) return;
+  if (validationErrors.value.strategies || validationErrors.value.symbol)
+    return;
   emit('next');
 }
 </script>
diff --git a/src/components/SetupStrategyVote.vue b/src/components/SetupStrategyVote.vue
index f21ac072e1e8..f362745051e8 100644
--- a/src/components/SetupStrategyVote.vue
+++ b/src/components/SetupStrategyVote.vue
@@ -45,28 +45,30 @@ const votingItems = computed(() => {
   }));
 });
 
-const isNotValidTicket = computed(
-  () =>
-    strategyName.value === 'ticket' &&
-    (validation.value.name === 'any' || validation.value.name === 'basic')
+const isValidTicket = computed(
+  () => !(strategyName.value === 'ticket' && validation.value.name === 'any')
 );
 
-const isNotValidWhitelist = computed(
-  () => strategyName.value === 'whitelist' && whitelist.value.length === 0
+const isValidWhitelist = computed(
+  () => !(strategyName.value === 'whitelist' && whitelist.value.length === 0)
 );
 
+const isValidSymbol = computed(() => symbol.value.length > 0);
+
 const whitelistRef = ref();
+const symbolRef = ref();
 
 function forceShowError() {
   whitelistRef?.value?.forceShowError();
+  symbolRef?.value?.forceShowError();
 }
 
 function nextStep() {
-  if (isNotValidWhitelist.value) {
+  if (!isValidWhitelist.value || !isValidSymbol.value) {
     forceShowError();
     return;
   }
-  if (isNotValidTicket.value) {
+  if (!isValidTicket.value) {
     showError.value = true;
     return;
   }
@@ -120,7 +122,12 @@ function nextStep() {
               </span>
             </template>
           </TuneListbox>
-          <TuneInput v-model="symbol" label="Symbol" />
+          <TuneInput
+            ref="symbolRef"
+            v-model="symbol"
+            label="Symbol"
+            :error="!isValidSymbol ? 'Symbol is required' : ''"
+          />
         </div>
         <template v-if="strategyName === 'ticket'" class="md:w-2/3">
           <InputSelectVoteValidation
@@ -130,7 +137,7 @@ function nextStep() {
           />
 
           <BaseMessageBlock
-            v-if="isNotValidTicket && showError"
+            v-if="!isValidTicket && showError"
             level="warning-red"
             class="mt-3"
           >
@@ -155,9 +162,7 @@ function nextStep() {
             v-model="whitelist"
             label="Whitelisted addresses"
             :placeholder="`0x8C28Cf33d9Fd3D0293f963b1cd27e3FF422B425c\n0xeF8305E140ac520225DAf050e2f71d5fBcC543e7`"
-            :error="
-              isNotValidWhitelist ? 'Please add at least one address' : ''
-            "
+            :error="!isValidWhitelist ? 'Please add at least one address' : ''"
           />
         </template>
       </div>