Moved away from SSR to regular Node API server.

src/pages/FormFillPage.vue

@@ -1,46 +1,46 @@
 <template>
   <q-page padding>
     <q-inner-loading :showing="loading">
-      <q-spinner-gears
-        size="50px"
-        color="primary"
+      <q-spinner-gears
+        size="50px"
+        color="primary"
       />
     </q-inner-loading>
 
     <div v-if="!loading && form">
-      <div class="text-h4 q-mb-xs">
-        {{ form.title }}
+      <div class="text-h4 q-mb-xs">
+        {{ form.title }}
       </div>
-      <div class="text-subtitle1 text-grey q-mb-lg">
-        {{ form.description }}
+      <div class="text-subtitle1 text-grey q-mb-lg">
+        {{ form.description }}
       </div>
 
-      <q-form
-        @submit.prevent="submitResponse"
-        class="q-gutter-md"
-      >
-        <div
-          v-for="category in form.categories"
-          :key="category.id"
-          class="q-mb-lg"
+      <q-form
+        @submit.prevent="submitResponse"
+        class="q-gutter-md"
+      >
+        <div
+          v-for="category in form.categories"
+          :key="category.id"
+          class="q-mb-lg"
         >
-          <div class="text-h6 q-mb-sm">
-            {{ category.name }}
+          <div class="text-h6 q-mb-sm">
+            {{ category.name }}
           </div>
-          <div
-            v-for="field in category.fields"
-            :key="field.id"
-            class="q-mb-md"
+          <div
+            v-for="field in category.fields"
+            :key="field.id"
+            class="q-mb-md"
           >
-            <q-item-label class="q-mb-xs">
-              {{ field.label }}
+            <q-item-label class="q-mb-xs">
+              {{ field.label }}
             </q-item-label>
-            <q-item-label
-              caption
-              v-if="field.description"
-              class="q-mb-xs text-grey-7"
-            >
-              {{ field.description }}
+            <q-item-label
+              caption
+              v-if="field.description"
+              class="q-mb-xs text-grey-7"
+            >
+              {{ field.description }}
             </q-item-label>
             <q-input
               v-if="field.type === 'text'"
@@ -85,38 +85,38 @@
         <q-separator class="q-my-lg" />
 
         <div>
-          <q-btn
-            outline
-            label="Submit Response"
-            type="submit"
-            color="primary"
-            :loading="submitting"
+          <q-btn
+            outline
+            label="Submit Response"
+            type="submit"
+            color="primary"
+            :loading="submitting"
           />
-          <q-btn
-            outline
-            label="Cancel"
-            type="reset"
-            color="default"
-            class="q-ml-sm"
-            :to="{ name: 'formList' }"
+          <q-btn
+            outline
+            label="Cancel"
+            type="reset"
+            color="default"
+            class="q-ml-sm"
+            :to="{ name: 'formList' }"
           />
-        </div>
+        </div>
       </q-form>
     </div>
-    <q-banner
-      v-else-if="!loading && !form"
-      class="bg-negative text-white"
+    <q-banner
+      v-else-if="!loading && !form"
+      class="bg-negative text-white"
     >
       <template #avatar>
         <q-icon name="error" />
       </template>
       Form not found or could not be loaded.
       <template #action>
-        <q-btn
-          flat
-          color="white"
-          label="Back to Forms"
-          :to="{ name: 'formList' }"
+        <q-btn
+          flat
+          color="white"
+          label="Back to Forms"
+          :to="{ name: 'formList' }"
         />
       </template>
     </q-banner>
@@ -125,7 +125,7 @@
 
 <script setup>
 import { ref, onMounted, reactive } from 'vue';
-import axios from 'axios';
+import axios from 'boot/axios';
 import { useQuasar } from 'quasar';
 import { useRouter, useRoute } from 'vue-router';
 
@@ -144,24 +144,24 @@ const responses = reactive({}); // Use reactive for dynamic properties
 const loading = ref(true);
 const submitting = ref(false);
 
-async function fetchFormDetails() 
+async function fetchFormDetails() 
 {
   loading.value = true;
   form.value = null; // Reset form data
-  try 
+  try 
   {
     const response = await axios.get(`/api/forms/${props.id}`);
     form.value = response.data;
     // Initialize responses object based on fields
-    form.value.categories.forEach(cat => 
+    form.value.categories.forEach(cat => 
     {
-      cat.fields.forEach(field => 
+      cat.fields.forEach(field => 
       {
         responses[field.id] = null; // Initialize all fields to null or default
       });
     });
-  }
-  catch (error) 
+  }
+  catch (error) 
   {
     console.error(`Error fetching form ${props.id}:`, error);
     $q.notify({
@@ -170,17 +170,17 @@ async function fetchFormDetails()
       message: 'Failed to load form details.',
       icon: 'report_problem'
     });
-  }
-  finally 
+  }
+  finally 
   {
     loading.value = false;
   }
 }
 
-async function submitResponse() 
+async function submitResponse() 
 {
   submitting.value = true;
-  try 
+  try 
   {
     // Basic check if any response is provided (optional)
     // const hasResponse = Object.values(responses).some(val => val !== null && val !== '');
@@ -201,8 +201,8 @@ async function submitResponse()
     // Or clear the form:
     // Object.keys(responses).forEach(key => { responses[key] = null; });
 
-  }
-  catch (error) 
+  }
+  catch (error) 
   {
     console.error('Error submitting response:', error);
     const message = error.response?.data?.error || 'Failed to submit response.';
@@ -212,8 +212,8 @@ async function submitResponse()
       message: message,
       icon: 'report_problem'
     });
-  }
-  finally 
+  }
+  finally 
   {
     submitting.value = false;
   }