Merge pull request #92 from bcgov/feature/frontend

Update Client Library and API Integration for Backend Changes

frontend/Caddyfile

@@ -31,13 +31,11 @@
 	}
 	rewrite @spa_router {http.matchers.file.relative}
 	# Proxy requests to API service
-	handle_path /api/* {
-		reverse_proxy {$VITE_API_URL} {
-			header_up Host {http.reverse_proxy.upstream.hostport}
-			header_up X-Real-IP {remote_host}
-			header_up X-Forwarded-For {remote_host}
-		}
-	}
+	reverse_proxy /api/* {$VITE_API_URL} {
+		header_up Host {http.reverse_proxy.upstream.hostport}
+		header_up X-Real-IP {remote_host}
+		header_up X-Forwarded-For {remote_host}
+  }
 	header {
 		X-Frame-Options "SAMEORIGIN"
 		X-XSS-Protection "1;mode=block"

frontend/src/components/model-param-selection-panes/ReportInfo.vue

@@ -287,7 +287,10 @@ const onConfirm = () => {
   if (validateComparison() && validateRange()) {
     if (form.value) {
       form.value.validate()
+    } else {
+      console.warn('Form reference is null. Validation skipped.')
     }
+
     // this panel is not in a confirmed state
     if (!isConfirmed.value) {
       modelParameterStore.confirmPanel(panelName)

frontend/src/components/model-param-selection-panes/SiteInfo.vue

@@ -394,6 +394,8 @@ const onConfirm = () => {
   if (validateRequiredFields() && validateRange()) {
     if (form.value) {
       form.value.validate()
+    } else {
+      console.warn('Form reference is null. Validation skipped.')
     }
 
     formattingValues()

frontend/src/components/model-param-selection-panes/SpeciesInfo.vue

@@ -486,7 +486,10 @@ const onConfirm = () => {
   ) {
     if (form.value) {
       form.value.validate()
+    } else {
+      console.warn('Form reference is null. Validation skipped.')
     }
+
     // this panel is not in a confirmed state
     if (!isConfirmed.value) {
       modelParameterStore.confirmPanel(panelName)

frontend/src/components/model-param-selection-panes/StandDensity.vue

@@ -138,6 +138,8 @@ const onConfirm = async () => {
 
   if (form.value) {
     form.value.validate()
+  } else {
+    console.warn('Form reference is null. Validation skipped.')
   }
 
   // this panel is not in a confirmed state

frontend/src/constants/constants.ts

@@ -114,3 +114,7 @@ export const MODEL_PARAM_TAB_NAME = Object.freeze({
   VIEW_LOG_FILE: 'View Log File',
   VIEW_ERROR_MESSAGES: 'View Error Messages',
 })
+
+export const DOWNLOAD_FILE_NAME = Object.freeze({
+  MULTI_POLYGON_OUTPUT: 'vdyp-output.zip',
+})

frontend/src/constants/message.ts

@@ -101,4 +101,13 @@ export const FILE_UPLOAD_ERR = Object.freeze({
     'The response is missing one or more required files. Please contact support or try again later.',
   INVALID_RESPONSED_FILE:
     'The response contains invalid or corrupted files. Please contact support or try again later.',
+  FAIL_RUN_MODEL: 'Failed to run the projection model.',
+})
+
+export const PROGRESS_MSG = Object.freeze({
+  RUNNING_MODEL: 'Running Model...',
+})
+
+export const SUCESS_MSG = Object.freeze({
+  FILE_UPLOAD_RUN_MODEL_RESULT: 'File successfully downloaded.',
 })

frontend/src/env.ts

@@ -1,5 +1,4 @@
 declare global {
-  // eslint-disable-next-line no-unused-vars
   interface Window {
     config: any
   }

frontend/src/router/routes.ts

@@ -2,6 +2,7 @@ import type { RouteRecordRaw } from 'vue-router'
 import ModelParameterInput from '@/views/input-model-parameters/ModelParameterInput.vue'
 import PageNotFound from '@/views/PageNotFound.vue'
 import AuthInfo from '@/views/test/AuthInfo.vue'
+import ParameterDetail from '@/views/test/ParameterDetail.vue'
 
 export const routes: Array<RouteRecordRaw> = [
   {
@@ -14,5 +15,10 @@ export const routes: Array<RouteRecordRaw> = [
     name: 'AuthInfo',
     component: AuthInfo,
   },
+  {
+    path: '/param-detail',
+    name: 'ParameterDetail',
+    component: ParameterDetail,
+  },
   { path: '/:pathMatch(.*)*', name: 'NotFound', component: PageNotFound },
 ]

frontend/src/services/apiActions.ts

@@ -1,6 +1,7 @@
 import apiClient from '@/services/apiClient'
+import type { ParameterDetailsMessage, RootResource } from '@/services/vdyp-api'
 
-export const helpGet = async (): Promise<any> => {
+export const helpGet = async (): Promise<ParameterDetailsMessage[]> => {
   try {
     const response = await apiClient.helpGet()
     return response.data
@@ -10,17 +11,20 @@ export const helpGet = async (): Promise<any> => {
   }
 }
 
-export const projectionHcsvPost = async (body: any): Promise<Blob> => {
+export const projectionHcsvPost = async (
+  formData: FormData,
+  trialRun: boolean = false,
+): Promise<Blob> => {
   try {
-    const response = await apiClient.projectionHcsvPost(body)
+    const response = await apiClient.projectionHcsvPost(formData, trialRun)
     return response.data
   } catch (error) {
     console.error('Error running projection:', error)
     throw error
   }
 }
 
-export const rootGet = async (): Promise<any> => {
+export const rootGet = async (): Promise<RootResource> => {
   try {
     const response = await apiClient.rootGet()
     return response.data

frontend/src/services/apiClient.ts

@@ -1,29 +1,40 @@
 import {
-  HelpEndpointApi,
-  ProjectionEndpointApi,
-  RootEndpointApi,
+  GetHelpApi,
+  GetRootApi,
+  RunHCSVProjectionApi,
 } from '@/services/vdyp-api/'
 import axiosInstance from '@/services/axiosInstance'
+import type { AxiosRequestConfig } from 'axios'
 
-const helpApiInstance = new HelpEndpointApi(undefined, undefined, axiosInstance)
-const projectionApiInstance = new ProjectionEndpointApi(
+const helpApiInstance = new GetHelpApi(undefined, undefined, axiosInstance)
+const rootApiInstance = new GetRootApi(undefined, undefined, axiosInstance)
+const projectionApiInstance = new RunHCSVProjectionApi(
   undefined,
   undefined,
   axiosInstance,
 )
-const rootApiInstance = new RootEndpointApi(undefined, undefined, axiosInstance)
 
 export const apiClient = {
-  helpGet: (options?: any) => {
-    return helpApiInstance.v8HelpGet(options)
+  helpGet: (options?: AxiosRequestConfig) => {
+    return helpApiInstance.helpGet(options)
   },
 
-  projectionHcsvPost: (body?: any, options?: any) => {
-    return projectionApiInstance.v8ProjectionHcsvPost(body, options)
+  projectionHcsvPost: (
+    formData: FormData,
+    trialRun: boolean,
+    options?: AxiosRequestConfig,
+  ) => {
+    return projectionApiInstance.projectionHcsvPostForm(
+      formData.get('polygonInputData') as File,
+      formData.get('layersInputData') as File,
+      formData.get('projectionParameters') as any,
+      trialRun,
+      options,
+    )
   },
 
-  rootGet: (options?: any) => {
-    return rootApiInstance.v8Get(options)
+  rootGet: (options?: AxiosRequestConfig) => {
+    return rootApiInstance.rootGet(options)
   },
 }
 

frontend/src/services/vdyp-api/api.ts

@@ -1,5 +1,3 @@
-/* tslint:disable */
-/* eslint-disable */
-export * from './apis/help-endpoint-api'
-export * from './apis/projection-endpoint-api'
-export * from './apis/root-endpoint-api'
+export * from './apis/get-help-api'
+export * from './apis/get-root-api'
+export * from './apis/run-hcsvprojection-api'

frontend/src/services/vdyp-api/apis/get-help-api.ts

@@ -0,0 +1,103 @@
+import globalAxios from 'axios'
+import type { AxiosResponse, AxiosInstance, AxiosRequestConfig } from 'axios'
+import { Configuration } from '../configuration'
+import { BASE_PATH, BaseAPI } from '../base'
+import type { RequestArgs } from '../base'
+import type { ParameterDetailsMessage } from '../models'
+import { env } from '@/env'
+
+export const GetHelpApiAxiosParamCreator = function (
+  configuration?: Configuration,
+) {
+  return {
+    helpGet: async (options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
+      const localVarPath = `/api/v8/help`
+      const localVarUrlObj = new URL(localVarPath, env.VITE_API_URL)
+      let baseOptions
+      if (configuration) {
+        baseOptions = configuration.baseOptions
+      }
+      const localVarRequestOptions: AxiosRequestConfig = {
+        method: 'GET',
+        ...baseOptions,
+        ...options,
+      }
+      const localVarHeaderParameter = {} as any
+      const localVarQueryParameter = {} as any
+
+      const query = new URLSearchParams(localVarUrlObj.search)
+      for (const key in localVarQueryParameter) {
+        query.set(key, localVarQueryParameter[key])
+      }
+      for (const key in options.params) {
+        query.set(key, options.params[key])
+      }
+      localVarUrlObj.search = new URLSearchParams(query).toString()
+      const headersFromBaseOptions =
+        baseOptions && baseOptions.headers ? baseOptions.headers : {}
+      localVarRequestOptions.headers = {
+        ...localVarHeaderParameter,
+        ...headersFromBaseOptions,
+        ...options.headers,
+      }
+
+      return {
+        url:
+          localVarUrlObj.pathname + localVarUrlObj.search + localVarUrlObj.hash,
+        options: localVarRequestOptions,
+      }
+    },
+  }
+}
+
+export const GetHelpApiFp = function (configuration?: Configuration) {
+  return {
+    async helpGet(
+      options?: AxiosRequestConfig,
+    ): Promise<
+      (
+        axios?: AxiosInstance,
+        basePath?: string,
+      ) => Promise<AxiosResponse<ParameterDetailsMessage[]>>
+    > {
+      const localVarAxiosArgs =
+        await GetHelpApiAxiosParamCreator(configuration).helpGet(options)
+      return (
+        axios: AxiosInstance = globalAxios,
+        basePath: string = BASE_PATH,
+      ) => {
+        const axiosRequestArgs: AxiosRequestConfig = {
+          ...localVarAxiosArgs.options,
+          url: basePath + localVarAxiosArgs.url,
+        }
+        return axios.request(axiosRequestArgs)
+      }
+    },
+  }
+}
+
+export const GetHelpApiFactory = function (
+  configuration?: Configuration,
+  basePath?: string,
+  axios?: AxiosInstance,
+) {
+  return {
+    async helpGet(
+      options?: AxiosRequestConfig,
+    ): Promise<AxiosResponse<ParameterDetailsMessage[]>> {
+      return GetHelpApiFp(configuration)
+        .helpGet(options)
+        .then((request) => request(axios, basePath))
+    },
+  }
+}
+
+export class GetHelpApi extends BaseAPI {
+  public async helpGet(
+    options?: AxiosRequestConfig,
+  ): Promise<AxiosResponse<ParameterDetailsMessage[]>> {
+    return GetHelpApiFp(this.configuration)
+      .helpGet(options)
+      .then((request) => request(this.axios, this.basePath))
+  }
+}