added simple form validator

frontend/vite/package.json

@@ -41,7 +41,7 @@
     "sweetalert2": "^11.1.7",
     "tailwindcss": "^2.2.16",
     "urql": "^2.0.5",
-    "vee-validate": "^3.4.13",
+    "vee-validate": "^4.5.4",
     "vue": "^3.2.19",
     "vue-router": "4.0.11",
     "vue-sweetalert2": "^5.0.2",

frontend/vite/src/views/patient/AddPatient.vue

@@ -1,27 +1,31 @@
 <template>
   <section class="w-3/6">
     <h1 class="h1 my-4 font-bold text-dark-700">Add New Patient:</h1>
-    <form action="post" class="border-2 border-gray-900 border-dotted rounded p-4" autocomplete="off">
+    <form @submit.prevent="savePatientForm"
+    class="border-2 border-gray-900 border-dotted rounded p-4" autocomplete="off">
 
-          <label class="flex whitespace-nowrap mb-2 w-full">
+          <label class="flex whitespace-nowrap w-full">
             <span class="text-gray-700 w-4/12">Patient Unique Identifier</span>
             <input class="form-input mt-1 block w-full" v-model="patientForm.clientPatientId" placeholder="Patient Unique Identifier" />
           </label>
+          <span class="text-red-700 w-full mb-2">{{ formErrors?.data?.clientPatientId }}</span>
 
-          <label class="flex whitespace-nowrap mb-2 w-full">
+          <label class="flex whitespace-nowrap w-full">
             <span class="text-gray-700 w-4/12">First Name</span>
             <input class="form-input mt-1 w-full" v-model="patientForm.firstName" placeholder="First Name" />
           </label>
+          <span class="text-red-700 w-full mb-2">{{ formErrors?.data?.firstName }}</span>
 
           <label class="flex whitespace-nowrap mb-2 w-full">
             <span class="text-gray-700 w-4/12">Middle Name</span>
             <input class="form-input mt-1 w-full" v-model="patientForm.middleName" placeholder="Middle Name" />
           </label>
 
-          <label class="flex whitespace-nowrap mb-2 w-full">
+          <label class="flex whitespace-nowrap w-full">
             <span class="text-gray-700 w-4/12">Last Name</span>
             <input class="form-input mt-1 w-full" v-model="patientForm.lastName" placeholder="Last Name" />
           </label>
+          <span class="text-red-700 w-full mb-2">{{ formErrors?.data?.lastName }}</span>
 
           <label class="flex whitespace-nowrap mb-2 w-full">
             <span class="text-gray-700 w-4/12">Age</span>
@@ -57,13 +61,14 @@
           </label>
 
           <!-- other identifiers: passport, client pid, national id -->
-          <label class="flex whitespace-nowrap mb-2 w-full">
+          <label class="flex whitespace-nowrap w-full">
             <span class="text-gray-700 w-4/12">Primary Referrer</span>
             <select class="form-select mt-1 w-full" v-model="patientForm.clientUid">
                 <option></option>
                 <option v-for="client in clients" :key="client.uid" :value="client.uid"> {{ client.name }} {{ client.uid }}</option>
               </select>
           </label>
+          <span class="text-red-700 w-full mb-2">{{ formErrors?.data?.clientPatientId }}</span>
 
           <hr class="my-2">
 
@@ -92,13 +97,14 @@
           </div>
 
           <hr />
-          <button
+          <!-- <button
             type="button"
             @click.prevent="savePatientForm()"
             class="-mb-4 w-1/5 border border-green-500 bg-green-500 text-white rounded-md px-4 py-2 m-2 transition-colors duration-500 ease select-none hover:bg-green-600 focus:outline-none focus:shadow-outline"
           >
             Save Patient
-          </button>
+          </button> -->
+          <button type="submit" class="-mb-4 w-1/5 border border-green-500 bg-green-500 text-white rounded-md px-4 py-2 m-2 transition-colors duration-500 ease select-none hover:bg-green-600 focus:outline-none focus:shadow-outline"> Save Patient </button>
         </form>
     </section>
 </template>
@@ -135,9 +141,14 @@ export const IPatient = typeof Patient;
 import { ActionTypes } from '../../store/modules/patients';
 import { ActionTypes as ClientActionTypes } from '../../store/modules/clients';
 import { ActionTypes as AdminActionTypes } from '../../store/modules/admin';
-
+import { Form, Field, useField, useForm } from 'vee-validate';
+import { isNullOrWs } from '../../utils';
 export default defineComponent({
   name: 'add-patient',
+  components: {
+    Form,
+    Field,
+  },
   setup(context) {
     let store = useStore();
     let router = useRouter();
@@ -147,6 +158,7 @@ export default defineComponent({
     let createAction = ref(true)
 
     let patientForm = reactive({ ...nullPatient });
+    let formErrors = reactive({ hasError: false, data: {} });
     patientForm.clientPatientId = route.query.cpid;
 
     let provinces = ref([]);
@@ -207,19 +219,47 @@ export default defineComponent({
       });
     }
 
-    function patientFormManager(create) {
-      showModal.value = true;
-      createAction.value = create;
-      if (create) setPatientToNull();
+    function simpleValidator(form: Map, required: string[] = []): any {
+      if(required.length == 0) alert("There are no validation fields")
+      if(typeof(form) !== 'object' ) alert("Form must a Map Object")
+
+      let response = { hasError: false, data: {} };
+
+      for(let field of required){
+        if(isNullOrWs(form[field])){
+          response.hasError = true
+          response.data[field] = "This field is required"
+        }
+      }
+
+      return response;
     }
 
     function savePatientForm() {
-       if (createAction.value) addPatient();
+      const validations = simpleValidator(patientForm, ["clientPatientId", "firstName", "lastName", "clientUid", "consentSms"])
+      if(validations.hasError) {
+        Object.assign(formErrors, validations)
+        return
+      };
+      if (createAction.value) addPatient();
     }
 
+    // 
+
+    function isRequired(value) {
+      if (value && value.trim()) {
+        return true;
+      }
+      return 'This is required';
+    }
+    const { errorMessage, value } = useField('test1', isRequired);
+
+
     return {
       patientForm,
+      formErrors,
       savePatientForm,
+      errorMessage, value,
       countries: computed(() => store.getters.getCountries),
       clients: computed(() => store.getters.getClients),
       countryUid,

frontend/vite/yarn.lock

@@ -726,6 +726,11 @@
   resolved "https://registry.yarnpkg.com/@vue/devtools-api/-/devtools-api-6.0.0-beta.18.tgz#84c0aff9289a57294cb97490811f69e8a0a67f8a"
   integrity sha512-56vRhO7nXWWFYTx520BQSDlQH5VYpwy62hFDEqi2yHHEBpEqseOP5WYQusq7BEW3DXSY9E9cfPVR5CFtJbKuMg==
 
+"@vue/devtools-api@^6.0.0-beta.15":
+  version "6.0.0-beta.19"
+  resolved "https://registry.yarnpkg.com/@vue/devtools-api/-/devtools-api-6.0.0-beta.19.tgz#f8e88059daa424515992426a0c7ea5cde07e99bf"
+  integrity sha512-ObzQhgkoVeoyKv+e8+tB/jQBL2smtk/NmC9OmFK8UqdDpoOdv/Kf9pyDWL+IFyM7qLD2C75rszJujvGSPSpGlw==
+
 "@vue/reactivity@3.2.19":
   version "3.2.19"
   resolved "https://registry.yarnpkg.com/@vue/reactivity/-/reactivity-3.2.19.tgz#fc6e0f0106f295226835cfed5ff5f84d927bea65"
@@ -2777,10 +2782,12 @@ v8-compile-cache@^2.0.3:
   resolved "https://registry.yarnpkg.com/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz#2de19618c66dc247dcfb6f99338035d8245a2cee"
   integrity sha512-l8lCEmLcLYZh4nbunNZvQCJc5pv7+RCwa8q/LdUx8u7lsWvPDKmpodJAJNwkAhJC//dFY48KuIEmjtd4RViDrA==
 
-vee-validate@^3.4.13:
-  version "3.4.13"
-  resolved "https://registry.yarnpkg.com/vee-validate/-/vee-validate-3.4.13.tgz#886ffe90778edde9c2f0c3ad94bfab3fe8079f31"
-  integrity sha512-ONnyRixpd0/JOGLuN8dlxFwLoT5FGq5ti1w4rx/zFZWaJZ1EefhfAbXkQvLwLhjU6izkfHyITXojW/7InOU3Tw==
+vee-validate@^4.5.4:
+  version "4.5.4"
+  resolved "https://registry.yarnpkg.com/vee-validate/-/vee-validate-4.5.4.tgz#e92f9bffd8ccda4e129a4bf48ac9ca2c3672100d"
+  integrity sha512-hWuNGcnyMNGBgSwBbyJMIS/u7Xdg0SpqlWmDP+5jUbUpHICVWw/e33ZZdYS0uYKIdDo4ZMCWyYOBTrlgVkQTIg==
+  dependencies:
+    "@vue/devtools-api" "^6.0.0-beta.15"
 
 vite@^2.6.2:
   version "2.6.2"