Add error message toast on evaluate expression failure

bps-statistics · Aug 1, 2022 · 3ee9aba · 3ee9aba
1 parent b272fb7
commit 3ee9aba
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 26 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,19 +2,16 @@
 
 ## FormGear | Ver. 1.0.3
 
-> July 30, 2022
+> August 1, 2022
 
 ### Added
-- Add cursor pointer on summary, radio, checkbox, and nested button
 - Add signature input
 	```json
 	"label":"Signature",
 	"dataKey":"signa",
 	"required":true,
 	"type":36
 	```
-- Add loader when page change
-- Add email validation
 - Add api validation for type string or number input by add urlValidation property to the component
 	```json
 	"label":"Email",
@@ -32,6 +29,10 @@
 			}
 		]
 	```
+- Add loader on page change
+- Add cursor pointer on summary, radio, checkbox, and nested button
+- Add email validation
+- Add error message toast on evaluate expression failure
 
 ### Changed
 - Update view

diff --git a/src/FormInput.tsx b/src/FormInput.tsx
@@ -156,6 +156,7 @@ const FormInput: FormComponentBase = props => {
         saveAnswer(props.component.dataKey, 'answer', value, form.activeComponent.position, {'clientMode': form.formConfig.clientMode,'baseUrl': form.formConfig.baseUrl})
       }catch(e){
         console.log(e)
+        toastInfo(locale.details.language[0].errorSaving + props.component.dataKey, 3000, "", "bg-pink-600/80");
         reloadDataFromHistory()
       }finally{
         setReferenceHistory([])

diff --git a/src/GlobalFunction.tsx b/src/GlobalFunction.tsx
@@ -52,11 +52,12 @@ export const getValue = (dataKey: string) => {
 }
 
 export const createComponent = (dataKey: string, nestedPosition: number, componentPosition: number, sidebarPosition: number, components: any, parentIndex: number[], parentName: string) => {
-    const eval_enable = (eval_text) => {
+    const eval_enable = (eval_text, dataKey) => {
         try {
             return eval(eval_text)
         } catch (e) {
             console.log(e)
+            toastInfo(locale.details.language[0].errorEnableExpression + dataKey, 3000, "", "bg-pink-600/80");
             return default_eval_enable
         }
     }
@@ -176,7 +177,7 @@ export const createComponent = (dataKey: string, nestedPosition: number, compone
     } else {
         newComp.enableCondition = undefined
     }
-    newComp.enable = (newComp.enableCondition === undefined || newComp.enableCondition === '') ? true : eval_enable(newComp.enableCondition);
+    newComp.enable = (newComp.enableCondition === undefined || newComp.enableCondition === '') ? true : eval_enable(newComp.enableCondition, newComp.dataKey);
     //
     newComp.enableRemark = newComp.enableRemark !== undefined ? newComp.enableRemark : true;
     newComp.client = newComp.client !== undefined ? newComp.client : true;
@@ -289,6 +290,7 @@ export const insertSidebarArray = (dataKey: string, answer: any, beforeAnswer: a
                 value = value_local
             } catch (e) {
                 value = undefined
+                toastInfo(locale.details.language[0].errorExpression + newComp.dataKey, 3000, "", "bg-pink-600/80");
             }
         } else {
             let answerIndex = response.details.answers.findIndex(obj => obj.dataKey === newComp.dataKey);
@@ -519,6 +521,7 @@ export const insertSidebarNumber = (dataKey: string, answer: any, beforeAnswer:
                     value = value_local
                 } catch (e) {
                     value = undefined
+                    toastInfo(locale.details.language[0].errorExpression + newComp.dataKey, 3000, "", "bg-pink-600/80");
                 }
             } else {
                 let answerIndex = response.details.answers.findIndex(obj => obj.dataKey === newComp.dataKey);
@@ -639,6 +642,7 @@ export const runVariableComponent = (dataKey: string, activeComponentPosition: n
             let answerVariable = eval(updatedRef.expression);
             saveAnswer(dataKey, 'answer', answerVariable, activeComponentPosition, null);
         } catch (e) {
+            toastInfo(locale.details.language[0].errorExpression + dataKey, 3000, "", "bg-pink-600/80");
             saveAnswer(dataKey, 'answer', undefined, activeComponentPosition, null);
             // console.log(e)
         }
@@ -658,11 +662,12 @@ export const runEnabling = (dataKey: string, activeComponentPosition: number, pr
         }
     }
 
-    const eval_enable = (eval_text) => {
+    const eval_enable = (eval_text, dataKey) => {
         try {
             return eval(eval_text)
         } catch (e) {
             console.log(e)
+            toastInfo(locale.details.language[0].errorEnableExpression + dataKey, 3000, "", "bg-pink-600/80");
             return default_eval_enable
         }
     }
@@ -676,7 +681,7 @@ export const runEnabling = (dataKey: string, activeComponentPosition: number, pr
     }
     const [rowIndex, setRowIndex] = createSignal(getRowIndex(0));
 
-    let enable = eval_enable(enableCondition);
+    let enable = eval_enable(enableCondition, dataKey);
     saveAnswer(dataKey, 'enable', enable, activeComponentPosition, null);
 }
 
@@ -698,6 +703,7 @@ export const runValidation = (dataKey: string, updatedRef: any, activeComponentP
             try {
                 result = eval(updatedRef.validations[i].test)
             } catch (e) {
+                toastInfo(locale.details.language[0].errorValidationExpression + updatedRef.dataKey, 3000, "", "bg-pink-600/80");
                 // console.log(e)
             }
             if (result) {
@@ -817,11 +823,12 @@ export const setEnableFalse = () => {
 }
 
 export const saveAnswer = (dataKey: string, attributeParam: any, answer: any, activeComponentPosition: number, prop: any | null) => {
-    const eval_enable = (eval_text) => {
+    const eval_enable = (eval_text, dataKey) => {
         try {
             return eval(eval_text)
         } catch (e) {
             console.log(e)
+            toastInfo(locale.details.language[0].errorEnableExpression + dataKey, 3000, "", "bg-pink-600/80");
             return default_eval_enable
         }
     }
@@ -888,7 +895,7 @@ export const saveAnswer = (dataKey: string, attributeParam: any, answer: any, ac
                 hasSideCompEnable.forEach(sidebarEnable => {
                     let sidePosition = sidebar.details.findIndex(objSide => objSide.dataKey === sidebarEnable.dataKey);
                     let enableSideBefore = sidebar.details[sidePosition]['enable'];
-                    let enableSide = eval_enable(sidebarEnable.enableCondition);
+                    let enableSide = eval_enable(sidebarEnable.enableCondition, sidebarEnable.dataKey);
                     addHistory('update_sidebar', null, null, null, JSON.parse(JSON.stringify(sidebar.details)))
                     setSidebar('details', sidePosition, 'enable', enableSide);
                     let updatedRef = JSON.parse(JSON.stringify(reference.details));
@@ -914,7 +921,7 @@ export const saveAnswer = (dataKey: string, attributeParam: any, answer: any, ac
                                     if (updatedRef[refPos].enableCondition === undefined || updatedRef[refPos].enableCondition === '') {
                                         newEnab = true;
                                     } else {
-                                        newEnab = eval_enable(updatedRef[refPos].enableCondition)
+                                        newEnab = eval_enable(updatedRef[refPos].enableCondition, updatedRef[refPos].dataKey)
                                     }
                                     setReference('details', refPos, 'enable', newEnab);
                                 }
@@ -929,13 +936,14 @@ export const saveAnswer = (dataKey: string, attributeParam: any, answer: any, ac
                                 return ((splLength - reducer) < 1) ? Number(splitDataKey[1]) : Number(splitDataKey[splLength - reducer]);
                             }
                             const [rowIndex, setRowIndex] = createSignal(getRowIndex(0));
-                            tmpVarComp.forEach((e, i) => {
+                            tmpVarComp.forEach((t, i) => {
                                 // let evVal = eval(e.expression);
                                 // saveAnswer(e.dataKey, 'answer', evVal, tmpIndex[i], null);
                                 try {
-                                    let evVal = eval(e.expression);
-                                    saveAnswer(e.dataKey, 'answer', evVal, tmpIndex[i], null);
+                                    let evVal = eval(t.expression);
+                                    saveAnswer(t.dataKey, 'answer', evVal, tmpIndex[i], null);
                                 } catch (e) {
+                                    toastInfo(locale.details.language[0].errorExpression + t.dataKey, 3000, "", "bg-pink-600/80");
                                     saveAnswer(e.dataKey, 'answer', undefined, tmpIndex[i], null);
                                     // console.log(e.dataKey)
                                     // console.log(e)
@@ -1399,16 +1407,19 @@ export function reloadDataFromHistory() {
     if (sidebarHistory().length > 0) {
         setSidebar('details', JSON.parse(JSON.stringify(sidebarHistory())));
     }
+}
+
+export const toastInfo = (text:string, duration:number, position:string, bgColor:string) => {
     Toastify({
-        text: 'Failed to save data !',
-        duration: 3000,
-        gravity: "top",
-        position: "right",
-        stopOnFocus: true,
-        className: "bg-blue-600/80",
-        style: {
-            background: "rgba(8, 145, 178, 0.7)",
-            width: "400px"
-        }
+      text: (text == '') ? locale.details.language[0].componentDeleted : text,
+      duration: (duration >= 0) ? duration : 500,
+      gravity: "top", 
+      position: (position == '') ? "right" : position, 
+      stopOnFocus: true, 
+      className: (bgColor == '') ? "bg-blue-600/80" : bgColor,
+      style: {
+        background: "rgba(8, 145, 178, 0.7)",
+        width: "400px"
+      }
     }).showToast();
 }
diff --git a/src/stores/LocaleStore.tsx b/src/stores/LocaleStore.tsx
@@ -30,6 +30,10 @@ export type Language = {
     verificationSubmitted: string
     validationEmail : string
     validationApi : string
+    errorSaving: string
+    errorExpression: string
+    errorEnableExpression: string
+    errorValidationExpression: string
 }
 
 export type Locale = {
@@ -74,8 +78,11 @@ export const [locale, setLocale] = createStore<Questionnaire>({
                 verificationInvalid: "Please provide verification correctly",
                 verificationSubmitted: "The data is now being submitted. Thank you!",
                 validationEmail: "Email is not correct",
-                validationApi: "Invalid input from api response"
-
+                validationApi: "Invalid input from api response",
+                errorSaving: "Something went wrong while saving on component ",
+                errorExpression: "Something went wrong while evaluating expression on component ",
+                errorEnableExpression: "Something went wrong while evaluating enable on component ",
+                errorValidationExpression: "Something went wrong while evaluating validation expression on component "
             }
         ]
     }