Added linting and enforced code styling.

src/pages/FormFillPage.vue

@@ -1,20 +1,47 @@
 <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>
-      <div class="text-subtitle1 text-grey q-mb-lg">{{ form.description }}</div>
+      <div class="text-h4 q-mb-xs">
+        {{ form.title }}
+      </div>
+      <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">
-          <div class="text-h6 q-mb-sm">{{ category.name }}</div>
-          <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>
-            <q-item-label caption v-if="field.description" class="q-mb-xs text-grey-7">{{ field.description }}</q-item-label>
+      <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>
+          <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>
+            <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'"
               outlined
@@ -28,7 +55,7 @@
               v-model.number="responses[field.id]"
               :label="field.label"
             />
-             <q-input
+            <q-input
               v-else-if="field.type === 'date'"
               outlined
               type="date"
@@ -58,19 +85,39 @@
         <q-separator class="q-my-lg" />
 
         <div>
-          <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' }" />
-        </div>
-
+          <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' }"
+          />
+        </div>
       </q-form>
     </div>
-     <q-banner v-else-if="!loading && !form" class="bg-negative text-white">
-      <template v-slot:avatar>
+    <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 v-slot:action>
-        <q-btn flat color="white" label="Back to Forms" :to="{ name: 'formList' }" />
+      <template #action>
+        <q-btn
+          flat
+          color="white"
+          label="Back to Forms"
+          :to="{ name: 'formList' }"
+        />
       </template>
     </q-banner>
   </q-page>
@@ -97,19 +144,25 @@ 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 => {
-      cat.fields.forEach(field => {
+    form.value.categories.forEach(cat => 
+    {
+      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({
       color: 'negative',
@@ -117,14 +170,18 @@ 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 !== '');
     // if (!hasResponse) {
@@ -144,7 +201,9 @@ 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.';
     $q.notify({
@@ -153,7 +212,9 @@ async function submitResponse() {
       message: message,
       icon: 'report_problem'
     });
-  } finally {
+  }
+  finally 
+  {
     submitting.value = false;
   }
 }