refactor(1159): refactor the role dropdown to a reusable component, r…

…efs: #1159

frontend/src/components/grantaccess/GrantAccess.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import router from '@/router';
-import Dropdown from 'primevue/dropdown';
-import { ErrorMessage, Field, Form as VeeForm } from 'vee-validate';
+import { Form as VeeForm } from 'vee-validate';
 import { ref, type PropType } from 'vue';
 
 import Button from '@/components/common/Button.vue';
@@ -64,6 +63,10 @@ const isAbstractRoleSelected = () => {
     return getSelectedRole()?.role_type_code == 'A';
 };
 
+const roleSelectChange = (roleId: number) => {
+    formData.value.roleId = roleId;
+};
+
 /* ----------------- Forest client number method ----------------------- */
 const setVerifiedForestClients = (verifiedForestClientNumber: string) => {
     formData.value.verifiedForestClients.push(verifiedForestClientNumber);
@@ -185,7 +188,7 @@ const composeAndPushNotificationMessages = (
     />
     <VeeForm
         ref="form"
-        v-slot="{ errors, meta }"
+        v-slot="{ meta }"
         :validation-schema="formValidationSchema(isAbstractRoleSelected())"
         as="div"
     >
@@ -208,31 +211,12 @@ const composeAndPushNotificationMessages = (
                     title="Add user roles"
                     :divider="isAbstractRoleSelected()"
                 >
-                    <label>Assign a role to the user</label>
-
-                    <Field
-                        name="roleId"
-                        aria-label="Role Select"
-                        v-slot="{ field, handleChange }"
-                        v-model="formData.roleId"
-                    >
-                        <Dropdown
-                            :options="applicationRoleOptions"
-                            optionLabel="role_name"
-                            optionValue="role_id"
-                            :modelValue="field.value"
-                            placeholder="Choose an option"
-                            class="w-100 custom-height"
-                            style="width: 100% !important"
-                            v-bind="field.value"
-                            @update:modelValue="handleChange"
-                            @change="resetVerifiedForestClients"
-                            :class="{
-                                'is-invalid': errors.roleId,
-                            }"
-                        />
-                    </Field>
-                    <ErrorMessage class="invalid-feedback" name="roleId" />
+                    <RoleSelect
+                        :roleId="formData.roleId"
+                        :roleOptions="applicationRoleOptions"
+                        @change="roleSelectChange"
+                        @resetVerifiedForestClients="resetVerifiedForestClients"
+                    />
                 </StepContainer>
 
                 <StepContainer

frontend/src/components/grantaccess/GrantDelegatedAdmin.vue

@@ -1,8 +1,7 @@
 <script setup lang="ts">
 import { ref, type PropType } from 'vue';
 import router from '@/router';
-import { ErrorMessage, Field, Form as VeeForm } from 'vee-validate';
-import Dropdown from 'primevue/dropdown';
+import { Form as VeeForm } from 'vee-validate';
 import Button from '@/components/common/Button.vue';
 import { IconSize } from '@/enum/IconEnum';
 import { isLoading } from '@/store/LoadingState';
@@ -51,6 +50,10 @@ const isAbstractRoleSelected = () => {
     return getSelectedRole()?.type_code == 'A';
 };
 
+const roleSelectChange = (roleId: number) => {
+    formData.value.roleId = roleId;
+};
+
 /* ----------------- Forest client number method ----------------------- */
 const setVerifiedForestClients = (verifiedForestClientNumber: string) => {
     formData.value.verifiedForestClients.push(verifiedForestClientNumber);
@@ -99,7 +102,7 @@ const handleSubmit = async () => {
 
     <VeeForm
         ref="form"
-        v-slot="{ errors, meta }"
+        v-slot="{ meta }"
         :validation-schema="formValidationSchema(isAbstractRoleSelected())"
         as="div"
     >
@@ -122,32 +125,13 @@ const handleSubmit = async () => {
                     title="Add the role a delegated admin can assign"
                     :divider="isAbstractRoleSelected()"
                 >
-                    <label htmlFor="roleId">Assign a role to the user</label>
-
-                    <Field
-                        id="roleId"
-                        name="roleId"
-                        aria-label="Role Select"
-                        v-slot="{ field, handleChange }"
-                        v-model="formData.roleId"
-                    >
-                        <Dropdown
-                            :options="delegatedRoleOptions"
-                            optionLabel="name"
-                            optionValue="id"
-                            :modelValue="field.value"
-                            placeholder="Choose an option"
-                            class="w-100 custom-height"
-                            style="width: 100% !important"
-                            v-bind="field.value"
-                            @update:modelValue="handleChange"
-                            @change="resetVerifiedForestClients"
-                            :class="{
-                                'is-invalid': errors.roleId,
-                            }"
-                        />
-                    </Field>
-                    <ErrorMessage class="invalid-feedback" name="roleId" />
+                    <RoleSelect
+                        :roleId="formData.roleId"
+                        :roleOptions="delegatedRoleOptions"
+                        label="Assign a role the delgated admin can manage"
+                        @change="roleSelectChange"
+                        @resetVerifiedForestClients="resetVerifiedForestClients"
+                    />
                 </StepContainer>
 
                 <StepContainer

frontend/src/components/grantaccess/form/RoleSelect.vue

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { ErrorMessage, Field } from 'vee-validate';
+import Dropdown from 'primevue/dropdown';
+import type { FamApplicationRole } from 'fam-app-acsctl-api';
+import type { FamRoleDto } from 'fam-admin-mgmt-api/model';
+
+const props = defineProps({
+    roleId: { type: Number, default: 0 },
+    roleOptions: {
+        type: [Array<FamApplicationRole[]>, Array<FamRoleDto[]>],
+        default: [],
+    },
+    label: { type: String, default: 'Assign a role to the user' },
+    fieldId: { type: String, default: 'roleId' },
+});
+
+const emit = defineEmits(['change', 'resetVerifiedForestClients']);
+
+const computedRoleId = computed({
+    get() {
+        return props.roleId;
+    },
+    set(newRoleId: Number) {
+        emit('change', newRoleId);
+    },
+});
+</script>
+
+<template>
+    <div class="form-field">
+        <label>{{ props.label }}</label>
+        <Field
+            :name="props.fieldId"
+            aria-label="Role Select"
+            v-slot="{ field, handleChange, errorMessage }"
+            v-model="computedRoleId"
+        >
+            <Dropdown
+                :options="roleOptions"
+                optionLabel="role_name"
+                optionValue="role_id"
+                :modelValue="field.value"
+                placeholder="Choose an option"
+                class="w-100 custom-height"
+                style="width: 100% !important"
+                v-bind="field.value"
+                @update:modelValue="handleChange"
+                @change="emit('resetVerifiedForestClients')"
+                :class="{
+                    'is-invalid': errorMessage,
+                }"
+            />
+            <ErrorMessage class="invalid-feedback" :name="props.fieldId" />
+        </Field>
+    </div>
+</template>
+<style lang="scss" scoped>
+label {
+    margin-bottom: 0px;
+}
+</style>