feat(fe): (#324)

- Added Client Types from backend - Fixed typo in common component name
bcgov · Feb 10, 2023 · aa7f90f · aa7f90f
1 parent 4b7baa0
commit aa7f90f
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 19 deletions.
diff --git a/frontend/src/common/FormSelect.vue b/frontend/src/common/FormSelect.vue
@@ -18,7 +18,7 @@ import FormFieldTemplate from "./FormFieldTemplate.vue";
 import type {
   CommonObjectType,
   FormFieldTemplateType,
-  FromSelectOptionType,
+  FormSelectOptionType,
 } from "../core/FormType";
 
 const props = defineProps({
@@ -31,7 +31,7 @@ const props = defineProps({
   disabled: { type: Boolean, default: false },
   state: { type: Boolean, default: null },
   options: {
-    type: Array as PropType<Array<FromSelectOptionType>>,
+    type: Array as PropType<Array<FormSelectOptionType>>,
     required: true,
     default: [],
   },

diff --git a/frontend/src/common/examples/SingleFormComponentExample.vue b/frontend/src/common/examples/SingleFormComponentExample.vue
@@ -55,7 +55,7 @@ import FormRadioGroup from "../FormRadioGroup.vue";
 import CollapseCard from "../CollapseCard.vue";
 import type {
   FormFieldTemplateType,
-  FromSelectOptionType,
+  FormSelectOptionType,
   FormCheckBoxGroupOptionType,
   FormRadioGroupOptionType,
 } from "../../core/FormType";
@@ -94,7 +94,7 @@ const selectFieldProps: FormFieldTemplateType = {
   note: "Example of note text",
   tooltip: "tooltip placeholder",
 };
-const selectOptions: Array<FromSelectOptionType> = [
+const selectOptions: Array<FormSelectOptionType> = [
   { value: "1", text: "a" },
   { value: "2", text: "b" },
 ];

diff --git a/frontend/src/core/FormType.ts b/frontend/src/core/FormType.ts
@@ -9,7 +9,7 @@ export interface FormFieldTemplateType {
   errorMsg?: string;
 }
 
-export interface FromSelectOptionType {
+export interface FormSelectOptionType {
   value: CommonObjectType | string;
   text: string;
 }
@@ -53,7 +53,7 @@ export interface FormComponentSchemaType {
     value: string | number | boolean;
   };
   options?:
-    | Array<FromSelectOptionType>
+    | Array<FormSelectOptionType>
     | Array<FormCheckBoxGroupOptionType>
     | Array<FormRadioGroupOptionType>; // for select, checkbox group, radio group
   addButtonText?: string; // for table

diff --git a/frontend/src/pages/applynewclient/formsections/FormSections.vue b/frontend/src/pages/applynewclient/formsections/FormSections.vue
@@ -3,7 +3,7 @@
     <!------ businessType section ------->
     <FormSectionTemplate
       :data="formData.state.businessType"
-      :sectionProps="businessTypeSectionSchema"
+      :sectionProps="computedBusinessTypeSectionSchema"
     />
 
     <!------ company/individual information section ------->
@@ -22,15 +22,51 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from "vue";
+import { computed, onMounted, ref } from "vue";
 import _ from "lodash";
 import FormSectionTemplate from "./FormSectionTemplate.vue";
 import { businessTypeSectionSchema } from "../formsectionschemas/BusinessTypeSectionSchema";
 import { informationSectionSchema } from "../formsectionschemas/InformationSectionSchema";
 import { locationSectionSchema } from "../formsectionschemas/LocationSectionSchema";
 import { formData } from "../../../store/newclientform/FormData";
+import axios from "axios";
+
+const backendUrl = import.meta.env.VITE_BACKEND_URL;
+axios.defaults.headers.common['Access-Control-Allow-Origin'] = '*';
+
+const clientTypeOptions = ref([]);
+
+onMounted(async () => {
+  const activeClientTypeCodes: FormSelectOptionType[] = [];
+  const response = await axios.get(`${backendUrl}/api/clients/activeClientTypeCodes`, {});
+  if (Object.keys(response.data).length) {
+      response.data.forEach((code: any) => {
+          let clientTypeCode = {
+              value: code.code,
+              text: code.description
+          };
+          activeClientTypeCodes.push(clientTypeCode);
+      });
+  }
+  clientTypeOptions.value = activeClientTypeCodes;
+});
+    
+const computedBusinessTypeSectionSchema = computed(() => {
+  const schemaCopy = businessTypeSectionSchema
+                        .content
+                        .map(p => p.fieldProps.modelName == "clientType" ? 
+                              {
+                                ...p,
+                                options: clientTypeOptions.value
+                              } 
+                            : p);
+
+  return {
+    ...businessTypeSectionSchema,
+    content: schemaCopy
+  };
+}); 
 
-// based on client type, show different schema contenct for the information section
 const computedInformationSchemaType = computed(() => {
   if (
     _.has(formData, ["state", "businessType", "clientType"]) &&
@@ -51,6 +87,7 @@ const computedInformationSchemaType = computed(() => {
 
 <script lang="ts">
 import { defineComponent } from "vue";
+import { FormSelectOptionType } from "../../../core/FormType";
 export default defineComponent({
   name: "ApplyNewClientPage",
 });

diff --git a/frontend/src/pages/applynewclient/formsectionschemas/BusinessTypeSectionSchema.ts b/frontend/src/pages/applynewclient/formsectionschemas/BusinessTypeSectionSchema.ts
@@ -48,16 +48,7 @@ export const businessTypeSectionSchema: FormSectionSchemaType = {
         modelName: "clientType",
       },
       type: "select",
-      options: [
-        {
-          value: "company",
-          text: "Company",
-        },
-        {
-          value: "soleProprietorship",
-          text: "Sole Proprietorship"
-        }
-      ],
+      options: [],
     },
   ],
 };