From 85c1693664d2c3e2a932b180e569f2df41ef9a40 Mon Sep 17 00:00:00 2001
From: Samuel Lorch <sam@soontm.de>
Date: Mon, 3 Apr 2023 17:12:36 +0200
Subject: [PATCH] get test enabled form working

---
 client/src/pages/index.vue | 51 ++++++++++++++++++++++++++------------
 1 file changed, 35 insertions(+), 16 deletions(-)

diff --git a/client/src/pages/index.vue b/client/src/pages/index.vue
index 2c2b211..5c483b6 100644
--- a/client/src/pages/index.vue
+++ b/client/src/pages/index.vue
@@ -1,9 +1,5 @@
 <script setup lang="ts">
 import { apiCall } from "../api";
-import PillBar from "../components/inputs/PillBar.vue";
-import TextBox from "../components/inputs/TextBox.vue";
-import MultilineTextBox from "../components/inputs/MultilineTextBox.vue";
-import CheckBox from "../components/inputs/CheckBox.vue";
 import { Form as ValidationForm, Field, ErrorMessage  } from 'vee-validate';
 
 async function doShit(){
@@ -11,12 +7,31 @@ async function doShit(){
 }
 
 let fields = $ref([
-  {key: "name", label: "Name", component: () => TextBox },
-  {key: "verdict", label: "Verdict", component: () => PillBar, props: {options: [{name: 'Accept'}, {name: 'Drop'}, {name: 'Continue'}]}},
-  {key: "counter", label: "Counter", component: () => CheckBox },
-  {key: "comment", label: "Comment", component: () => MultilineTextBox },
+  {key: "name", label: "Name", as: "TextBox", rules: validateEmail},
+  {key: "verdict", label: "Verdict", as: "PillBar", props: {options: [{name: 'Accept'}, {name: 'Drop'}, {name: 'Continue'}]}},
+  {key: "counter", label: "Counter", as: "CheckBox" },
+  {key: "comment", label: "Comment", as: "MultilineTextBox", enabled: (values: Record<string, any>) => (values["verdict"] == 2) as Boolean },
 ]);
 
+
+function validateEmail(value: any) {
+  // if the field is empty
+  if (!value) {
+    return 'This field is required';
+  }
+
+  // if the field is not a valid email
+  const regex = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i;
+  if (!regex.test(value)) {
+    return 'This field must be a valid email';
+  }
+
+  // All is good
+  return true;
+}
+
+
+
 </script>
 
 <template>
@@ -24,26 +39,30 @@ let fields = $ref([
     <PageHeader title="Dashboard">
       <button @click="doShit">Example Buttons</button>
     </PageHeader>
-    <ValidationForm class="form">
-      <Field name="email" as="TextBox" />
-      <ErrorMessage name="email" />
-      <Field name="email" as="MultilineTextBox" />
-      <ErrorMessage name="email" />
+    <ValidationForm class="form" v-slot="{ values }">
+      <template v-for="(field, index) in fields" :key="index">
+        <template v-if="field.enabled ? field.enabled(values) : true">
+          <label :for="field.key" v-text="field.label"/>
+          <Field :name="field.key" :as="field.as" :rules="field.rules" v-bind="field.props"/>
+          <ErrorMessage :name="field.key" />
+        </template>
+      </template>
+      {{ values }}
     </ValidationForm>
   </div>
 </template>
 
 <style scoped>
-.form {
+ValidationForm {
   display: grid;
   grid-template-columns: auto 1fr;
   padding: 0.5rem;
   gap: 0.5rem;
 }
-.form > :is(button, .button, h2) {
+ValidationForm > :is(button, .button, h2) {
   grid-column: 1 / 3;
 }
-.form > :is(label) {
+ValidationForm > :is(label) {
   grid-column: 1;
 }
 </style>
\ No newline at end of file