feat(FE:FSADT1-785): updating frontend to new components and wizard

.github/workflows/unit-tests.yml

@@ -114,10 +114,13 @@ jobs:
             npm run test
           dir: frontend
           sonar_args: >
-            -Dsonar.exclusions=**/coverage/**,**/examples/**,**/pages/**
+            -Dsonar.javascript.lcov.reportPaths=./coverage/coverage-final.json
             -Dsonar.organization=bcgov-sonarcloud
             -Dsonar.projectKey=forest-client-frontend
+            -Dsonar.sources=src
             -Dsonar.tests=src/tests
+            -Dsonar.exclusions=**/coverage/**/*,**/dist/**/*,**/examples/**/*,**/pages/**/*,**/tests/**/*
+            -Dsonar.test.inclusions=**/tests/**/*
           sonar_project_token: ${{ secrets.SONAR_TOKEN_FRONTEND }}
 
   trivy:

frontend/README.md

@@ -42,6 +42,12 @@ Press "option+shift+f" and select prettier as the formatter
 
 ## **Technology options**
 
+## **Stubs**:
+
+To speed-up development and allow a simple development environment, a stub server was added to fake backend responses. For this we use the same technology as we use
+in our backend, that is [wiremock](https://wiremock.org/). For that run `npm run stub` in a separated window to execute the backend server. You can add new responses or update
+the existing ones by tweeking the content of the [stub](stub/) folder following the [response templating](https://wiremock.org/docs/response-templating/) format and the [request matching](https://wiremock.org/docs/request-matching/) to suit your needs.
+
 ### **Style**:
 
 [Bootstrap for vue3](https://www.npmjs.com/package/bootstrap-vue-3), installed through this [prefered installation method](https://cdmoro.github.io/bootstrap-vue-3/getting-started/#preferred-installation), so it can automatically importing components, to aviod the warn message that cannot find components when run unit tests
@@ -53,67 +59,6 @@ Press "option+shift+f" and select prettier as the formatter
 [Vitest](https://vitest.dev/api/)  
 [Vue test util](https://test-utils.vuejs.org/api/)
 
-### **Reusable Form Component Structure**:
-
-#### **FormData in a json format**:
-
-```
-{
-  "container_id": {
-    "model_name": "value",
-    "model_name": [{
-      "model_name": "value",
-      ...
-    }],
-    ...
-  },
-  ...
-}
-```
-
-where **container_id** is whatever we'd like to use for each form section, **model_name** is for the form content in this section, for example: input, select, radio, checkbox, table, etc. **model_name** is for the fields inside a table or a group
-
-#### **Form json schema**:
-
-```
-{
-  container: {
-    title: string;
-    id: string;
-    defaultOpen?: boolean;
-    nextId?: string;
-    nextText?: string;
-    alwaysOpen?: boolean;
-  },
-  content: [{
-    fieldProps: {
-        label: string;
-        required?: boolean;
-        id: string; 
-        modelName: string; // It is required and need to be aligned with the field name in formData
-        note?: string;
-        tooltip?: string;
-        errorMsg?: string;
-    };
-    type: string;
-    disabled?: boolean;
-    state?: boolean;
-    depend?: {
-      fieldModelName: string;
-      value: string | number | boolean;
-    };
-    options?: Array<CommonObjectType>; // for select, checkbox group, radio group
-    addButtonText?: string; // for table
-    subfields?: Array<CommonObjectType>; // for table and group
-  },
-  ...
-  ]
-}
-```
-
-where the:  
-**container** part has the properties for each form section, using the properties from the CollapseCard component, id need to be aliged with the one in formData
-**content** part has the properties for each field in this form section
 
 ### **Vite vs vue cli**
 

frontend/components.d.ts

@@ -23,5 +23,6 @@ declare module '@vue/runtime-core' {
     BRow: typeof import('bootstrap-vue-3')['BRow']
     BTab: typeof import('bootstrap-vue-3')['BTab']
     BTabs: typeof import('bootstrap-vue-3')['BTabs']
+    RadioInputComponent: typeof import('./src/components/forms/RadioInputComponent.vue')['default']
   }
 }

frontend/package.json

@@ -29,7 +29,8 @@
     "test:e2e": "start-server-and-test preview http://127.0.0.1:5050/ 'cypress open'",
     "test:e2e:ci": "start-server-and-test preview http://127.0.0.1:5050/ 'cypress run'",
     "typecheck": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false",
-    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
+    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
+    "stub":"wiremock --enable-stub-cors --port 3000 --preserve-host-header --root-dir ./stub --verbose --global-response-templating"
   },
   "dependencies": {
     "@dsb-norge/vue-keycloak-js": "^2.2.0",
@@ -73,6 +74,7 @@
     "prettier": "^2.8.4",
     "start-server-and-test": "^2.0.0",
     "typescript": "~5.0.0",
-    "vitest": "^0.31.0"
+    "vitest": "^0.31.0",
+    "wiremock": "^2.35.0"
   }
 }

frontend/src/components/forms/RadioInputComponent.vue

@@ -0,0 +1,64 @@
+<template>  
+    <b-form-group label="Choose one these options:" v-slot="{ ariaDescribedby}">
+      <b-form-radio v-for="(option, index) in modelValue" :key="index"
+        v-model="selectedValue"
+        :id="id+'_'+option.value"
+        :value="option.value"
+        :name="option.text"
+        :aria-describedby="ariaDescribedby"
+        @change="validateInput"
+      >{{  option.text  }}</b-form-radio>
+    </b-form-group>      
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from "vue";
+import { CodeDescrType, isEmpty } from "@/core/CommonTypes";
+
+const props = defineProps({
+  id: { type: String, required: true },
+  modelValue: {
+    type: Array as () => CodeDescrType[],
+    required: true,
+  },
+  validations: { type: Array<Function>, required: true },
+});
+
+//Events we emit during component lifecycle
+const emit = defineEmits<{
+  (e: "error", value: string): void;
+  (e: "empty", value: boolean): void;
+  (e: "update:modelValue", value: Object): void;
+}>();
+
+const selectedValue = ref({});
+//We initialize the error message handling for validation
+const error = ref<string | undefined>("");
+
+//We call all the validations
+const validateInput = () => {
+  if (props.validations) {
+    error.value = props.validations
+      .map((validation) => validation(selectedValue.value))
+      .filter((errorMessage) => {
+        if (errorMessage) return true;
+        return false;
+      })
+      .shift() ?? "";
+  }
+  emit("empty", isEmpty(selectedValue));
+};
+
+//We watch for input changes to emit events
+watch(selectedValue, () => {
+  if (error.value) {
+    error.value = "";
+  }  
+  emit("update:modelValue",
+    props.modelValue.find((entry) => entry.value === selectedValue.value)
+  );
+});
+
+//We watch for error changes to emit events
+watch(error, () => emit("error", error.value));
+</script>

frontend/src/core/CommonTypes.ts

@@ -1,3 +1,5 @@
+import type { Ref } from "vue";
+
 export interface CodeDescrType {
     value: string;
     text: string;
@@ -6,4 +8,9 @@ export interface CodeDescrType {
 export interface ValidationMessageType {
     fieldId: string;
     errorMsg: string;
-}
+}
+
+export const isEmpty = (ref: Ref): boolean => {
+    const value = ref.value;
+    return value === undefined || value === null || value === "";
+};

frontend/src/pages/applyclientnumber/ApplyClientNumberPage.vue

@@ -23,18 +23,17 @@
         <CollapseCard title="Registered business" 
                       id="businessInformationId"
                       defaultOpen>
-            <Label label="Choose one these options:" 
-                   id="clientTypeLabelId" />
-
-            <b-form-group @change="getBusinessName">
-                <b-form-radio v-model="formData.businessInformation.businessType" 
-                              value="R">
-                    I have a BC registered business (corporation, sole proprietorship, society, etc.)
-                </b-form-radio>
-                <b-form-radio v-model="formData.businessInformation.businessType" 
-                              value="U">I have an unregistered sole proprietorship
-                </b-form-radio>
-            </b-form-group>
+
+            <RadioInputComponent
+                :id="'businessType'"
+                :modelValue="[
+                    { value: 'R',text: 'I have a BC registered business (corporation, sole proprietorship, society, etc.)' },
+                    { value: 'U',text: 'I have an unregistered sole proprietorship' },
+                ]"
+                :validations="[]"
+                @update:modelValue="formData = { ...formData, businessInformation:{ businessType: $event } }"
+            />
+
             <ValidationMessages fieldId = 'businessInformation.businessType'
                                 :validationMessages="validationMessages"
                                 :modelValue="formData.businessInformation.businessType" />
@@ -141,6 +140,9 @@ import ValidationMessages from "@/common/ValidationMessagesComponent.vue";
 import AddressSection from "@/pages/applyclientnumber/AddressSectionComponent.vue";
 import ContactSectionComponent from '@/pages/applyclientnumber/ContactSectionComponent.vue';
 
+
+import RadioInputComponent from '@/components/forms/RadioInputComponent.vue';
+
 const props = defineProps({
     submitterInformation: {
         type: Object,
@@ -151,6 +153,9 @@ const props = defineProps({
 //---- Form Data ----//
 let formData = ref(formDataDto);
 
+watch([formData],() => console.log('Updated',formData.value));
+
+
 //--- Initializing the Addresses array ---//
 addNewAddress(formDataDto.location.addresses);