Validation of next buttons

simulaiofficial · Feb 16, 2024 · 7d1ffbe · 7d1ffbe
1 parent 25c7b58
commit 7d1ffbe
Show file tree

Hide file tree

Showing 4 changed files with 77 additions and 8 deletions.
diff --git a/src/components/Block.vue b/src/components/Block.vue
@@ -129,6 +129,7 @@ const emit = defineEmits([
   'addBlock',
   'openEmoji',
   'nextBlock',
+  'validateBlock',
   'typingCompleted',
   'showMessage'
 ])
@@ -138,7 +139,7 @@ function openEmoji() {
 }
 
 function goNextBlock() {
-  emit('nextBlock')
+  emit('validateBlock', props.block)
 }
 
 function typingHasCompleted() {

diff --git a/src/components/Simulai.vue b/src/components/Simulai.vue
@@ -70,6 +70,7 @@
                             @showMessage="showErrorMessage"
                             @openEmoji="openEmoji"
                             @nextBlock="goNextBlock"
+                            @validateBlock="b => validateNextBlock(b)"
                             @typingCompleted="typingHasCompleted"
             />
           </div>
@@ -152,7 +153,7 @@ import 'vue3-emoji-picker/css'
 import cloneDeep from 'lodash/cloneDeep';
 import {computed, watch} from 'vue'
 import Joi from 'joi'
-import {validateBlock} from "@/utils/validation";
+import {validateInputBlock, validateUIBlock} from "@/utils/validation";
 import {calculateConditionAction} from "@/utils/conditions";
 
 const showButtons = computed(() => {
@@ -347,7 +348,7 @@ function showNextBlock() {
 
   const isConversationBlock = isItConversationBlock(currentBlock);
 
-  if(isConversationBlock) {
+  if (isConversationBlock) {
     setTimeout(() => {
       showNextBlock()
     }, 0);
@@ -481,6 +482,37 @@ function handleMessage(message) {
   showNextBlock()
 }
 
+function validateNextBlock(block) {
+  debugger;
+  const validationResult = validateUIBlock(block)
+
+  if (validationResult.error) {
+    const conversationBotBlock = {
+      id: uuidv4(),
+      shouldGoNextBlock: false,
+      type: BlockType.ConversationBot,
+      details: {
+        value: validationResult.error
+      },
+    }
+    let lastIndex = 0
+
+    if(showUntilAndWait) {
+      lastIndex = addBlockAfterCurrent(conversationBotBlock, showUntilAndWait)
+    } else {
+      lastIndex = addBlockAfterCurrent(conversationBotBlock)
+    }
+
+    showUntilAndWait = lastIndex
+    scrollToBottom()
+    // showNextBlock()
+    return;
+  } else {
+    showUntilAndWait = null;
+    showNextBlock()
+  }
+}
+
 function handleChatInput(inputValue) {
   const nowBlock = props.page.blocks[currentVisibleBlock.value]
 
@@ -493,9 +525,16 @@ function handleChatInput(inputValue) {
         value: 'Please use the interface to talk with me and click on the Next button...'
       },
     }
-    const lastIndex = addBlockAfterCurrent(conversationBotBlock)
-    // showUntilAndWait = lastIndex + 1
+    let lastIndex = 0
+
+    if(showUntilAndWait) {
+      lastIndex = addBlockAfterCurrent(conversationBotBlock, showUntilAndWait)
+    } else {
+      lastIndex = addBlockAfterCurrent(conversationBotBlock)
+    }
+    showUntilAndWait = lastIndex
     // showNextBlock()
+    scrollToBottom()
     return;
   }
 
@@ -514,7 +553,7 @@ function handleChatInput(inputValue) {
     inputBlock = props.page.blocks[lastInputBlock.value]
   }
 
-  const validationResult = validateBlock(inputValue, inputBlock)
+  const validationResult = validateInputBlock(inputValue, inputBlock)
 
   if (validationResult.error) {
     const conversationBotBlock = {

diff --git a/src/utils/types.ts b/src/utils/types.ts
@@ -1040,6 +1040,11 @@ export const getBlockOptions = (block: Block) => {
     return BlockComponents[block.type].options
 }
 
+export const isInputBlock = (block: Block) => {
+    const options = BlockComponents[block.type].options
+    return options.isInput
+}
+
 export const shouldWaitForValueFromInput = (block: Block) => {
     const options = BlockComponents[block.type].options
     return options.isInput && !options.isNextButton

diff --git a/src/utils/validation.ts b/src/utils/validation.ts
@@ -1,4 +1,4 @@
-import {Block, BlockType} from './types'
+import {Block, BlockAnswer, BlockType, isInputBlock} from './types'
 import Joi from 'joi'
 
 function validateInputFileAnswer(joiValidation, inputValue: string, block: Block) {
@@ -81,7 +81,31 @@ function validateInputEmailAnswer(joiValidation, inputValue: string, block: Bloc
     return null;
 }
 
-export function validateBlock(inputValue: string, block: Block | null) {
+export function validateUIBlock(block: BlockAnswer | null) {
+    if (block === null) {
+        return {}
+    }
+
+    const validationResult = {}
+
+    if(block.isRequired) {
+        debugger;
+        const emptyMessage = 'Please provide value to my question and click on the next button'
+
+        if(block.items) {
+            const foundItem = block.items.find(i => i.isChecked === true)
+            if(!foundItem) {
+                validationResult.error = emptyMessage
+            }
+        } else if(block.details.value === '') {
+            validationResult.error = emptyMessage
+        }
+    }
+
+    return validationResult
+}
+
+export function validateInputBlock(inputValue: string, block: Block | null) {
     if (block === null) {
         return {}
     }