Merge to main close #190: add checking duplicate api to frontend

.github/workflows/unit-tests.yml

@@ -50,7 +50,7 @@ jobs:
  npm run test
  dir: frontend
  sonar_args: >
- -Dsonar.exclusions=**/coverage/**,**/node_modules/**
+ -Dsonar.exclusions=**/coverage/**,**/examples/**
  -Dsonar.organization=bcgov-sonarcloud
  -Dsonar.projectKey=forest-client-frontend
  sonar_project_token: ${{ secrets.SONAR_TOKEN_FRONTEND }}

backend/openshift.deploy.yml

@@ -65,9 +65,9 @@ parameters:
  - name: CPU_LIMIT
  value: 200m
  - name: MEMORY_REQUEST
- value: 200Mi
+ value: 300Mi
  - name: MEMORY_LIMIT
- value: 350Mi
+ value: 400Mi
 objects:
  - apiVersion: v1
  kind: Secret

backend/src/main/java/ca/bc/gov/app/m/oracle/legacyclient/controller/LegacyClientController.java

@@ -6,7 +6,6 @@
 
 import org.slf4j.Logger;
 import org.slf4j.LoggerFactory;
-import org.springframework.data.repository.query.Param;
 import org.springframework.web.bind.annotation.CrossOrigin;
 import org.springframework.web.bind.annotation.RequestMapping;
 import org.springframework.web.bind.annotation.RequestMethod;
@@ -20,7 +19,7 @@
 import io.swagger.v3.oas.annotations.tags.Tag;
 import jakarta.inject.Inject;
 
-@Tag(name =  OraclePersistenceConfiguration.ORACLE_API_TAG)
+@Tag(name = OraclePersistenceConfiguration.ORACLE_API_TAG)
 @CrossOrigin(origins = "${frontend.url}")
 @RestController
 @RequestMapping("/app/m/legacyclient")
@@ -32,17 +31,19 @@ public class LegacyClientController {
  private LegacyClientService legacyClientService;
 
  @RequestMapping(value = "/findClientByIncorporationNumberOrName", method = RequestMethod.GET, produces = APPLICATION_JSON_VALUE)
- public List<ForestClientEntity> findClientByIncorporationOrName(@Param("incorporationNumber") String incorporationNumber, 
- @Param("companyName") String companyName) {
-
+ public List<ForestClientEntity> findClientByIncorporationOrName(
+ @Parameter(name = "incorporationNumber") @RequestParam(required = false) String incorporationNumber,
+ @Parameter(name = "companyName") @RequestParam(required = false) String companyName) {
+
+ // todo: check at least need to provide one of the parameters
  return legacyClientService.findClientByIncorporationOrName(incorporationNumber, companyName);
  }
 
  @RequestMapping(value = "/findClientByNameAndBirthdate", method = RequestMethod.GET, produces = APPLICATION_JSON_VALUE)
  public List<ForestClientEntity> findClientByNameAndBirthdate(@RequestParam("firstName") String firstName,
-  @RequestParam("lastName") String lastName,
-  @Parameter(name = "birthdate", required = true, description = "in the format of yyyy-mm-dd") String birthdate) {
- 
+ @RequestParam("lastName") String lastName,
+ @Parameter(name = "birthdate", description = "in the format of yyyy-mm-dd") String birthdate) {
+
  return legacyClientService.findClientByNameAndBirthdate(firstName, lastName, birthdate);
  }
 

frontend/openshift.deploy.yml

@@ -35,7 +35,7 @@ parameters:
  - name: CPU_LIMIT
  value: 25m
  - name: MEMORY_REQUEST
- value: 30Mi
+ value: 50Mi
  - name: MEMORY_LIMIT
  value: 150Mi
  - name: VITE_NODE_ENV

frontend/src/common/FormComponentOptions.vue

@@ -44,6 +44,7 @@
  :addButtonText="schema.addButtonText"
  :deleteButtonText="schema.deleteButtonText"
  :columns="schema.columns"
+ :fieldProps="schema.fieldProps"
  @updateFormArrayValue="updateFormArrayValue"
  @addRow="addRow"
  @deleteRow="deleteRow"
@@ -53,6 +54,7 @@
  :data="data"
  :addButtonText="schema.addButtonText"
  :columns="schema.columns"
+ :fieldProps="schema.fieldProps"
  @updateFormArrayValue="updateFormArrayValue"
  @addRow="addRow"
  @deleteRow="deleteRow"

frontend/src/common/FormGroup.vue

@@ -1,5 +1,5 @@
 <template>
- <div>
+ <FormFieldTemplate :fieldProps="fieldProps">
  <b-card
  v-for="(row, rowIndex) in data"
  :key="row.index"
@@ -21,14 +21,16 @@
  />
  </b-card>
  <PrimarySquareButton :text="addButtonText" @click="addRow()" />
- </div>
+ </FormFieldTemplate>
 </template>
 
 <script setup lang="ts">
 import type { PropType } from "vue";
+import FormFieldTemplate from "./FormFieldTemplate.vue";
 import FormComponentOptions from "./FormComponentOptions.vue";
 import PrimarySquareButton from "./buttons/PrimarySquareButton.vue";
 import type {
+ FormFieldTemplateType,
  FormComponentSchemaType,
  CommonObjectType,
 } from "../core/AppType";
@@ -44,6 +46,7 @@ const props = defineProps({
  type: Array as PropType<Array<CommonObjectType>>,
  required: true,
  },
+ fieldProps: Object as PropType<FormFieldTemplateType>,
 });
 
 const emit = defineEmits(["updateFormArrayValue", "addRow", "deleteRow"]);

frontend/src/common/FormTable.vue

@@ -1,42 +1,46 @@
 <template>
- <b-table-simple responsive>
- <b-tbody>
- <!-- row.index must be unique, otherwise v-for can not detect the data change correctly -->
- <!-- VueJS updates the DOM based on the change in key -->
- <!-- https://stackoverflow.com/questions/69890148/element-deleted-from-the-array-but-v-for-doesnt-update-vuejs -->
- <b-tr v-for="(row, rowIndex) in data" :key="row.index">
- <b-td
- v-for="(column, columnIndex) in columns"
- :key="'col-' + columnIndex"
- >
- <FormComponentOptions
- :data="row[column.fieldProps.id]"
- :schema="column"
- @updateFormValue="
- (id, newValue) => updateFormArrayValue(id, newValue, rowIndex)
- "
- />
- </b-td>
- <b-td>
- <bi-x-circle
- v-if="data.length > 1"
- style="font-size: 16px; color: red; margin-top: 36px"
- @click="deleteRow(rowIndex)"
- />
- </b-td>
- </b-tr>
- <PrimarySquareButton :text="addButtonText" @click="addRow()" />
- </b-tbody>
- </b-table-simple>
+ <FormFieldTemplate :fieldProps="fieldProps">
+ <b-table-simple responsive>
+ <b-tbody>
+ <!-- row.index must be unique, otherwise v-for can not detect the data change correctly -->
+ <!-- VueJS updates the DOM based on the change in key -->
+ <!-- https://stackoverflow.com/questions/69890148/element-deleted-from-the-array-but-v-for-doesnt-update-vuejs -->
+ <b-tr v-for="(row, rowIndex) in data" :key="row.index">
+ <b-td
+ v-for="(column, columnIndex) in columns"
+ :key="'col-' + columnIndex"
+ >
+ <FormComponentOptions
+ :data="row[column.fieldProps.id]"
+ :schema="column"
+ @updateFormValue="
+ (id, newValue) => updateFormArrayValue(id, newValue, rowIndex)
+ "
+ />
+ </b-td>
+ <b-td>
+ <bi-x-circle
+ v-if="data.length > 1"
+ style="font-size: 16px; color: red; margin-top: 36px"
+ @click="deleteRow(rowIndex)"
+ />
+ </b-td>
+ </b-tr>
+ <PrimarySquareButton :text="addButtonText" @click="addRow()" />
+ </b-tbody>
+ </b-table-simple>
+ </FormFieldTemplate>
 </template>
 
 <script setup lang="ts">
 import { ref } from "vue";
 import type { PropType } from "vue";
+import FormFieldTemplate from "./FormFieldTemplate.vue";
 import FormComponentOptions from "./FormComponentOptions.vue";
 import PrimarySquareButton from "./buttons/PrimarySquareButton.vue";
 import BiXCircle from "~icons/bi/x-circle";
 import type {
+ FormFieldTemplateType,
  FormComponentSchemaType,
  CommonObjectType,
 } from "../core/AppType";
@@ -51,6 +55,7 @@ const props = defineProps({
  type: Array as PropType<Array<CommonObjectType>>,
  required: true,
  },
+ fieldProps: Object as PropType<FormFieldTemplateType>,
 });
 
 const emit = defineEmits(["updateFormArrayValue", "addRow", "deleteRow"]);

frontend/src/common/examples/FormJsonSchemaExample.vue

@@ -0,0 +1,184 @@
+<template>
+ <div style="margin: 24px">
+ <CollapseCard
+ :title="containerProps.container.title"
+ defaultOpen
+ :id="containerProps.container.id"
+ >
+ <div v-for="(row, rowIndex) in containerProps.content" :key="rowIndex">
+ <FormComponentOptions
+ v-if="!row.depend || formData[row.depend.fieldId] == row.depend.value"
+ :data="formData[row.fieldProps.id]"
+ :schema="row"
+ @updateFormValue="(id, newValue) => updateFormValue(id, newValue)"
+ @updateFormArrayValue="
+ (id, newValue, rowIndex) =>
+ updateFormArrayValue(row.fieldProps.id, id, newValue, rowIndex)
+ "
+ @addRow="() => addRow(row.fieldProps.id)"
+ @deleteRow="(rowIndex) => deleteRow(row.fieldProps.id, rowIndex)"
+ />
+ </div>
+ </CollapseCard>
+ </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import FormComponentOptions from "../FormComponentOptions.vue";
+import CollapseCard from "../CollapseCard.vue";
+import type {
+ FormFieldTemplateType,
+ FromSelectOptionType,
+ FormCheckBoxGroupOptionType,
+ FormRadioGroupOptionType,
+} from "../../core/AppType";
+
+/* ------- container props ----------*/
+const containerProps = {
+ container: { title: "Sample Form section", id: "sample" }, // property for CollapseCard when use it
+ content: [
+ // form content for each CollapseCard
+ {
+ fieldProps: { label: "Name", id: "exampleInput" },
+ type: "input",
+ },
+ {
+ fieldProps: {
+ label: "Which color you like",
+ required: true,
+ id: "exampleSelect",
+ note: "Example of dropdown select",
+ tooltip: "tooltip placeholder",
+ errorMsg: "This field is required",
+ },
+ type: "select",
+ options: [
+ { value: "red", text: "Red" },
+ { value: "green", text: "Green" },
+ ],
+ },
+ {
+ fieldProps: { label: "Which drink you like", id: "exampleCheckBoxGroup" },
+ type: "checkboxgroup",
+ options: [
+ { code: "coffee", text: "Coffee" },
+ { code: "tea", text: "Tea" },
+ { code: "milk", text: "Milk" },
+ ],
+ depend: {
+ fieldId: "exampleSelect",
+ value: "red",
+ },
+ },
+ {
+ fieldProps: { label: "Which food you like", id: "exampleRadioGroup" },
+ type: "radiogroup",
+ options: [
+ { code: "rice", text: "Rice" },
+ { code: "noodle", text: "Noodle" },
+ ],
+ },
+ {
+ fieldProps: {
+ label: "Example Table",
+ id: "exampleTable",
+ },
+ type: "table",
+ addButtonText: "+ Add another friend",
+ columns: [
+ {
+ fieldProps: {
+ label: "Name",
+ id: "tableInput",
+ },
+ type: "input",
+ },
+ {
+ fieldProps: { label: "Color", id: "tableSelect" },
+ type: "select",
+ options: [
+ { value: "red", text: "Red" },
+ { value: "green", text: "green" },
+ ],
+ },
+ ],
+ },
+ {
+ fieldProps: {
+ id: "exampleGroup",
+ },
+ type: "group",
+ addButtonText: "+ Add another like",
+ deleteButtonText: "- Remove this like",
+ columns: [
+ {
+ fieldProps: {
+ label: "Link",
+ id: "groupInput",
+ },
+ type: "input",
+ },
+ {
+ fieldProps: { label: "Hobby", id: "groupCheckBoxGroup" },
+ type: "checkboxgroup",
+ options: [
+ { code: "swim", text: "Swim" },
+ { code: "dance", text: "Dance" },
+ { code: "sing", text: "Sing" },
+ ],
+ },
+ ],
+ },
+ ],
+};
+
+/* ------- form data ----------- */
+const defaultFormData = {
+ exampleInput: "",
+ exampleSelect: "",
+ exampleCheckBoxGroup: [],
+ exampleRadioGroup: [],
+ exampleTable: [
+ {
+ tableInput: "",
+ tableSelect: "",
+ },
+ ],
+ exampleGroup: [
+ {
+ groupInput: "",
+ groupCheckBoxGroup: [],
+ },
+ ],
+};
+
+const formData = ref(JSON.parse(JSON.stringify(defaultFormData)));
+
+/* --------------- update form data functions --------------------- */
+const updateFormValue = (fieldId, value) => {
+ formData.value[fieldId] = value;
+};
+const updateFormArrayValue = (fieldId, columnId, value, rowIndex) => {
+ formData.value[fieldId][rowIndex][columnId] = value;
+};
+const addRow = (fieldId) => {
+ const defaultNew = JSON.parse(JSON.stringify(defaultFormData[fieldId][0]));
+ formData.value[fieldId].push({
+ ...defaultNew,
+ index: Math.floor(Math.random() * 10000000),
+ });
+};
+const deleteRow = (fieldId, rowIndex) => {
+ formData.value[fieldId].splice(rowIndex, 1);
+};
+</script>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+export default defineComponent({
+ name: "CompositionComponentTemplate",
+});
+</script>
+
+<style scoped></style>