stock-management-demo/src/pages/FormFillPage.vue

<template>
  <q-page padding>
    <q-inner-loading :showing="loading">
      <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>

      <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
              v-model="responses[field.id]"
              :label="field.label"
            />
            <q-input
              v-else-if="field.type === 'number'"
              outlined
              type="number"
              v-model.number="responses[field.id]"
              :label="field.label"
            />
            <q-input
              v-else-if="field.type === 'date'"
              outlined
              type="date"
              v-model="responses[field.id]"
              :label="field.label"
              stack-label
            />
            <q-input
              v-else-if="field.type === 'textarea'"
              outlined
              type="textarea"
              autogrow
              v-model="responses[field.id]"
              :label="field.label"
            />
            <q-checkbox
              v-else-if="field.type === 'boolean'"
              v-model="responses[field.id]"
              :label="field.label"
              left-label
              class="q-mt-sm"
            />
            <!-- Add other field types as needed -->
          </div>
        </div>

        <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-form>
    </div>
    <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' }"
        />
      </template>
    </q-banner>
  </q-page>
</template>

<script setup>
import { ref, onMounted, reactive } from 'vue';
import axios from 'boot/axios';
import { useQuasar } from 'quasar';
import { useRouter, useRoute } from 'vue-router';

const props = defineProps({
  id: {
    type: [String, Number],
    required: true
  }
});

const $q = useQuasar();
const router = useRouter();
const route = useRoute();
const form = ref(null);
const responses = reactive({}); // Use reactive for dynamic properties
const loading = ref(true);
const submitting = ref(false);

async function fetchFormDetails()
{
  loading.value = true;
  form.value = null; // Reset form data
  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 =>
      {
        responses[field.id] = null; // Initialize all fields to null or default
      });
    });
  }
  catch (error)
  {
    console.error(`Error fetching form ${props.id}:`, error);
    $q.notify({
      color: 'negative',
      position: 'top',
      message: 'Failed to load form details.',
      icon: 'report_problem'
    });
  }
  finally
  {
    loading.value = false;
  }
}

async function submitResponse()
{
  submitting.value = true;
  try
  {
    // Basic check if any response is provided (optional)
    // const hasResponse = Object.values(responses).some(val => val !== null && val !== '');
    // if (!hasResponse) {
    //   $q.notify({ color: 'warning', message: 'Please fill in at least one field.' });
    //   return;
    // }

    await axios.post(`/api/forms/${props.id}/responses`, { values: responses });
    $q.notify({
      color: 'positive',
      position: 'top',
      message: 'Response submitted successfully!',
      icon: 'check_circle'
    });
    // Optionally redirect or clear form
    router.push({ name: 'formResponses', params: { id: props.id } }); // Go to responses page after submit
    // Or clear the form:
    // Object.keys(responses).forEach(key => { responses[key] = null; });

  }
  catch (error)
  {
    console.error('Error submitting response:', error);
    const message = error.response?.data?.error || 'Failed to submit response.';
    $q.notify({
      color: 'negative',
      position: 'top',
      message: message,
      icon: 'report_problem'
    });
  }
  finally
  {
    submitting.value = false;
  }
}

onMounted(fetchFormDetails);
</script>