refactor(1159): refactor form validation schema to be reusable, refs: #…

…1159
bcgov · Feb 29, 2024 · f89407b · f89407b
1 parent 52c210c
commit f89407b
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 55 deletions.
diff --git a/frontend/src/components/grantaccess/GrantAccess.vue b/frontend/src/components/grantaccess/GrantAccess.vue
@@ -3,15 +3,16 @@ import router from '@/router';
 import Dropdown from 'primevue/dropdown';
 import { ErrorMessage, Field, Form as VeeForm } from 'vee-validate';
 import { ref, type PropType } from 'vue';
-import { number, object, string } from 'yup';
 
 import Button from '@/components/common/Button.vue';
 import { IconSize } from '@/enum/IconEnum';
 import { Severity, ErrorCode } from '@/enum/SeverityEnum';
 import { AppActlApiService } from '@/services/ApiServiceFactory';
+import { formValidationSchema } from '@/services/utils';
 import { isLoading } from '@/store/LoadingState';
 import { setGrantAccessNotificationMsg } from '@/store/NotificationState';
 import { FOREST_CLIENT_INPUT_MAX_LENGTH } from '@/store/Constants';
+import { selectedApplicationDisplayText } from '@/store/ApplicationState';
 import {
     type FamApplicationRole,
     UserType,
@@ -20,7 +21,6 @@ import {
 import UserDomainSelect from '@/components/grantaccess/form/UserDomainSelect.vue';
 import UserNameInput from '@/components/grantaccess/form/UserNameInput.vue';
 import ForestClientInput from '@/components/grantaccess/form/ForestClientInput.vue';
-import { selectedApplicationDisplayText } from '@/store/ApplicationState';
 
 const props = defineProps({
     applicationRoleOptions: {
@@ -37,27 +37,6 @@ const defaultFormData = {
     roleId: null as number | null,
 };
 const formData = ref(JSON.parse(JSON.stringify(defaultFormData))); // clone default input
-const formValidationSchema = object({
-    userId: string()
-        .required('User ID is required')
-        .min(2, 'User ID must be at least 2 characters')
-        .nullable(),
-    roleId: number().required('Please select a value'),
-    forestClientNumbers: string()
-        .when('roleId', {
-            is: (_role_id: number) => isAbstractRoleSelected(),
-            then: () =>
-                string()
-                    .nullable()
-                    .transform((curr, orig) => (orig === '' ? null : curr)) // Accept either null or value
-                    .matches(/^[0-9,\b]+$/, 'Please enter a digit or comma')
-                    .matches(
-                        /^\d{8}(,?\d{8})*$/,
-                        'Please enter a Forest Client ID with 8 digits long'
-                    ),
-        })
-        .nullable(),
-});
 
 /* ------------------ User information method ------------------------- */
 const userDomainChange = (selectedDomain: string) => {
@@ -207,7 +186,7 @@ const composeAndPushNotificationMessages = (
     <VeeForm
         ref="form"
         v-slot="{ errors, meta }"
-        :validation-schema="formValidationSchema"
+        :validation-schema="formValidationSchema(isAbstractRoleSelected())"
         as="div"
     >
         <div class="page-body">

diff --git a/frontend/src/components/grantaccess/GrantDelegatedAdmin.vue b/frontend/src/components/grantaccess/GrantDelegatedAdmin.vue
@@ -1,17 +1,14 @@
 <script setup lang="ts">
 import { ref, type PropType } from 'vue';
 import router from '@/router';
-import { number, object, string } from 'yup';
 import { ErrorMessage, Field, Form as VeeForm } from 'vee-validate';
-
-import { UserType } from 'fam-app-acsctl-api';
-
 import Dropdown from 'primevue/dropdown';
 import Button from '@/components/common/Button.vue';
 import { IconSize } from '@/enum/IconEnum';
-
 import { isLoading } from '@/store/LoadingState';
+import { UserType } from 'fam-app-acsctl-api';
 import type { FamRoleDto } from 'fam-admin-mgmt-api/model';
+import { formValidationSchema } from '@/services/utils';
 
 const props = defineProps({
     delegatedRoleOptions: {
@@ -27,27 +24,6 @@ const defaultFormData = {
     roleId: null as number | null,
 };
 const formData = ref(JSON.parse(JSON.stringify(defaultFormData))); // clone default input
-const formValidationSchema = object({
-    userId: string()
-        .required('User ID is required')
-        .min(2, 'User ID must be at least 2 characters')
-        .nullable(),
-    roleId: number().required('Please select a value'),
-    forestClientNumbers: string()
-        .when('roleId', {
-            is: (_role_id: number) => isAbstractRoleSelected(),
-            then: () =>
-                string()
-                    .nullable()
-                    .transform((curr, orig) => (orig === '' ? null : curr)) // Accept either null or value
-                    .matches(/^[0-9,\b]+$/, 'Please enter a digit or comma')
-                    .matches(
-                        /^\d{8}(,?\d{8})*$/,
-                        'Please enter a Forest Client ID with 8 digits long'
-                    ),
-        })
-        .nullable(),
-});
 
 /* ------------------ User information method ------------------------- */
 const userDomainChange = (selectedDomain: string) => {
@@ -124,7 +100,7 @@ const handleSubmit = async () => {
     <VeeForm
         ref="form"
         v-slot="{ errors, meta }"
-        :validation-schema="formValidationSchema"
+        :validation-schema="formValidationSchema(isAbstractRoleSelected())"
         as="div"
     >
         <div class="page-body">

diff --git a/frontend/src/services/utils.ts b/frontend/src/services/utils.ts
@@ -1,3 +1,5 @@
+import { number, object, string } from 'yup';
+
 type AsyncWrapType = {
     data: any;
     error: any;
@@ -10,11 +12,37 @@ type AsyncWrapType = {
  * @param promise Promise()
  * @returns '{data, error}' in tuple containing 'data' (underfined when 'error' present).
  */
-export const asyncWrap = async (promise: Promise<any>): Promise<AsyncWrapType> => {
+export const asyncWrap = async (
+    promise: Promise<any>
+): Promise<AsyncWrapType> => {
     try {
         const data = await promise;
-        return {data, error: undefined};
+        return { data, error: undefined };
     } catch (error) {
-        return {data: undefined, error}
+        return { data: undefined, error };
     }
-}
+};
+
+export const formValidationSchema = (isAbstractRoleSelected: boolean) => {
+    return object({
+        userId: string()
+            .required('User ID is required')
+            .min(2, 'User ID must be at least 2 characters')
+            .nullable(),
+        roleId: number().required('Please select a value'),
+        forestClientNumbers: string()
+            .when('roleId', {
+                is: (_role_id: number) => isAbstractRoleSelected,
+                then: () =>
+                    string()
+                        .nullable()
+                        .transform((curr, orig) => (orig === '' ? null : curr)) // Accept either null or value
+                        .matches(/^[0-9,\b]+$/, 'Please enter a digit or comma')
+                        .matches(
+                            /^\d{8}(,?\d{8})*$/,
+                            'Please enter a Forest Client ID with 8 digits long'
+                        ),
+            })
+            .nullable(),
+    });
+};