Initial commit.
This commit is contained in:
commit
2d11d0bd79
54 changed files with 6657 additions and 0 deletions
27
src/pages/ErrorNotFound.vue
Normal file
27
src/pages/ErrorNotFound.vue
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
<template>
|
||||
<div class="fullscreen bg-blue text-white text-center q-pa-md flex flex-center">
|
||||
<div>
|
||||
<div style="font-size: 30vh">
|
||||
404
|
||||
</div>
|
||||
|
||||
<div class="text-h2" style="opacity:.4">
|
||||
Oops. Nothing here...
|
||||
</div>
|
||||
|
||||
<q-btn
|
||||
class="q-mt-xl"
|
||||
color="white"
|
||||
text-color="blue"
|
||||
unelevated
|
||||
to="/"
|
||||
label="Go Home"
|
||||
no-caps
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
//
|
||||
</script>
|
||||
124
src/pages/FormCreatePage.vue
Normal file
124
src/pages/FormCreatePage.vue
Normal file
|
|
@ -0,0 +1,124 @@
|
|||
<template>
|
||||
<q-page padding>
|
||||
<div class="text-h4 q-mb-md">Create New Form</div>
|
||||
|
||||
<q-form @submit.prevent="createForm" class="q-gutter-md">
|
||||
<q-input outlined v-model="form.title" label="Form Title *" lazy-rules
|
||||
:rules="[val => val && val.length > 0 || 'Please enter a title']" />
|
||||
|
||||
<q-input outlined v-model="form.description" label="Form Description" type="textarea" autogrow />
|
||||
|
||||
<q-separator class="q-my-lg" />
|
||||
|
||||
<div class="text-h6 q-mb-sm">Categories & Fields</div>
|
||||
|
||||
<div v-for="(category, catIndex) in form.categories" :key="catIndex"
|
||||
class="q-mb-lg q-pa-md bordered rounded-borders">
|
||||
<div class="row items-center q-mb-sm">
|
||||
<q-input outlined dense v-model="category.name" :label="`Category ${catIndex + 1} Name *`"
|
||||
class="col q-mr-sm" lazy-rules
|
||||
:rules="[val => val && val.length > 0 || 'Category name required']" />
|
||||
<q-btn flat round dense icon="delete" color="negative" @click="removeCategory(catIndex)"
|
||||
title="Remove Category" />
|
||||
</div>
|
||||
|
||||
<div v-for="(field, fieldIndex) in category.fields" :key="fieldIndex"
|
||||
class="q-ml-md q-mb-sm field-item">
|
||||
<div class="row items-center q-gutter-sm">
|
||||
<q-input outlined dense v-model="field.label" label="Field Label *" class="col" lazy-rules
|
||||
:rules="[val => val && val.length > 0 || 'Field label required']" />
|
||||
<q-select outlined dense v-model="field.type" :options="fieldTypes" label="Field Type *"
|
||||
class="col-auto" style="min-width: 150px;" lazy-rules
|
||||
:rules="[val => !!val || 'Field type required']" />
|
||||
<q-btn flat round dense icon="delete" color="negative"
|
||||
@click="removeField(catIndex, fieldIndex)" title="Remove Field" />
|
||||
</div>
|
||||
<q-input v-model="field.description" outlined dense label="Field Description (Optional)" autogrow
|
||||
class="q-mt-xs q-mb-xl" hint="This description will appear below the field label on the form." />
|
||||
</div>
|
||||
<q-btn outline color="primary" label="Add Field" @click="addField(catIndex)" class="q-ml-md q-mt-sm" />
|
||||
</div>
|
||||
|
||||
<q-btn outline color="secondary" label="Add Category" @click="addCategory" />
|
||||
|
||||
<q-separator class="q-my-lg" />
|
||||
|
||||
<div>
|
||||
<q-btn outline label="Create Form" type="submit" color="primary" :loading="submitting" />
|
||||
<q-btn outline label="Cancel" type="reset" color="warning" class="q-ml-sm" :to="{ name: 'formList' }" />
|
||||
</div>
|
||||
</q-form>
|
||||
</q-page>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import axios from 'axios';
|
||||
import { useQuasar } from 'quasar';
|
||||
import { useRouter } from 'vue-router';
|
||||
|
||||
const $q = useQuasar();
|
||||
const router = useRouter();
|
||||
|
||||
const form = ref({
|
||||
title: '',
|
||||
description: '',
|
||||
categories: [
|
||||
{ name: 'Category 1', fields: [{ label: '', type: null, description: '' }] }
|
||||
]
|
||||
});
|
||||
|
||||
const fieldTypes = ref(['text', 'number', 'date', 'textarea', 'boolean']);
|
||||
const submitting = ref(false);
|
||||
|
||||
function addCategory() {
|
||||
form.value.categories.push({ name: `Category ${form.value.categories.length + 1}`, fields: [{ label: '', type: null, description: '' }] });
|
||||
}
|
||||
|
||||
function removeCategory(index) {
|
||||
form.value.categories.splice(index, 1);
|
||||
}
|
||||
|
||||
function addField(catIndex) {
|
||||
form.value.categories[catIndex].fields.push({ label: '', type: 'text', description: '' });
|
||||
}
|
||||
|
||||
function removeField(catIndex, fieldIndex) {
|
||||
form.value.categories[catIndex].fields.splice(fieldIndex, 1);
|
||||
}
|
||||
|
||||
async function createForm() {
|
||||
submitting.value = true;
|
||||
try {
|
||||
const response = await axios.post('/api/forms', form.value);
|
||||
$q.notify({
|
||||
color: 'positive',
|
||||
position: 'top',
|
||||
message: `Form "${form.value.title}" created successfully!`,
|
||||
icon: 'check_circle'
|
||||
});
|
||||
router.push({ name: 'formList' });
|
||||
} catch (error) {
|
||||
console.error('Error creating form:', error);
|
||||
const message = error.response?.data?.error || 'Failed to create form. Please check the details and try again.';
|
||||
$q.notify({
|
||||
color: 'negative',
|
||||
position: 'top',
|
||||
message: message,
|
||||
icon: 'report_problem'
|
||||
});
|
||||
} finally {
|
||||
submitting.value = false;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.bordered {
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.rounded-borders {
|
||||
border-radius: 4px;
|
||||
}
|
||||
</style>
|
||||
201
src/pages/FormEditPage.vue
Normal file
201
src/pages/FormEditPage.vue
Normal file
|
|
@ -0,0 +1,201 @@
|
|||
<template>
|
||||
<q-page padding>
|
||||
<div class="text-h4 q-mb-md">Edit Form</div>
|
||||
|
||||
<q-form v-if="!loading && form" @submit.prevent="updateForm" class="q-gutter-md">
|
||||
<q-input
|
||||
outlined
|
||||
v-model="form.title"
|
||||
label="Form Title *"
|
||||
lazy-rules
|
||||
:rules="[ val => val && val.length > 0 || 'Please enter a title']"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
outlined
|
||||
v-model="form.description"
|
||||
label="Form Description"
|
||||
type="textarea"
|
||||
autogrow
|
||||
/>
|
||||
|
||||
<q-separator class="q-my-lg" />
|
||||
|
||||
<div class="text-h6 q-mb-sm">Categories & Fields</div>
|
||||
|
||||
<div v-for="(category, catIndex) in form.categories" :key="category.id || catIndex" class="q-mb-lg q-pa-md bordered rounded-borders">
|
||||
<div class="row items-center q-mb-sm">
|
||||
<q-input
|
||||
outlined dense
|
||||
v-model="category.name"
|
||||
:label="`Category ${catIndex + 1} Name *`"
|
||||
class="col q-mr-sm"
|
||||
lazy-rules
|
||||
:rules="[ val => val && val.length > 0 || 'Category name required']"
|
||||
/>
|
||||
<q-btn flat round dense icon="delete" color="negative" @click="removeCategory(catIndex)" title="Remove Category" />
|
||||
</div>
|
||||
|
||||
<div v-for="(field, fieldIndex) in category.fields" :key="field.id || fieldIndex" class="q-ml-md q-mb-sm">
|
||||
<div class="row items-center q-gutter-sm">
|
||||
<q-input
|
||||
outlined dense
|
||||
v-model="field.label"
|
||||
label="Field Label *"
|
||||
class="col"
|
||||
lazy-rules
|
||||
:rules="[ val => val && val.length > 0 || 'Field label required']"
|
||||
/>
|
||||
<q-select
|
||||
outlined dense
|
||||
v-model="field.type"
|
||||
:options="fieldTypes"
|
||||
label="Field Type *"
|
||||
class="col-auto"
|
||||
style="min-width: 150px;"
|
||||
lazy-rules
|
||||
:rules="[ val => !!val || 'Field type required']"
|
||||
/>
|
||||
<q-btn flat round dense icon="delete" color="negative" @click="removeField(catIndex, fieldIndex)" title="Remove Field" />
|
||||
</div>
|
||||
<q-input
|
||||
v-model="field.description"
|
||||
label="Field Description (Optional)"
|
||||
outlined
|
||||
dense
|
||||
autogrow
|
||||
class="q-mt-xs q-mb-xl"
|
||||
hint="This description will appear below the field label on the form."
|
||||
/>
|
||||
</div>
|
||||
<q-btn outline color="primary" label="Add Field" @click="addField(catIndex)" class="q-ml-md q-mt-sm" />
|
||||
</div>
|
||||
|
||||
<q-btn outline color="secondary" label="Add Category" @click="addCategory" />
|
||||
|
||||
<q-separator class="q-my-lg" />
|
||||
|
||||
<div>
|
||||
<q-btn outline label="Update Form" type="submit" color="primary" :loading="submitting"/>
|
||||
<q-btn outline label="Cancel" type="reset" color="warning" class="q-ml-sm" :to="{ name: 'formList' }" />
|
||||
</div>
|
||||
</q-form>
|
||||
<div v-else-if="loading">
|
||||
<q-spinner-dots color="primary" size="40px" />
|
||||
Loading form details...
|
||||
</div>
|
||||
<div v-else class="text-negative">
|
||||
Failed to load form details.
|
||||
</div>
|
||||
</q-page>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue';
|
||||
import axios from 'axios';
|
||||
import { useQuasar } from 'quasar';
|
||||
import { useRouter, useRoute } from 'vue-router';
|
||||
|
||||
const props = defineProps({
|
||||
id: {
|
||||
type: String,
|
||||
required: true
|
||||
}
|
||||
});
|
||||
|
||||
const $q = useQuasar();
|
||||
const router = useRouter();
|
||||
const route = useRoute(); // Use useRoute if needed, though id is from props
|
||||
|
||||
const form = ref(null); // Initialize as null
|
||||
const loading = ref(true);
|
||||
const fieldTypes = ref(['text', 'number', 'date', 'textarea', 'boolean']);
|
||||
const submitting = ref(false);
|
||||
|
||||
async function fetchForm() {
|
||||
loading.value = true;
|
||||
try {
|
||||
const response = await axios.get(`/api/forms/${props.id}`);
|
||||
// Ensure categories and fields exist, even if empty
|
||||
response.data.categories = response.data.categories || [];
|
||||
response.data.categories.forEach(cat => {
|
||||
cat.fields = cat.fields || [];
|
||||
});
|
||||
form.value = response.data;
|
||||
} catch (error) {
|
||||
console.error('Error fetching form details:', error);
|
||||
$q.notify({
|
||||
color: 'negative',
|
||||
position: 'top',
|
||||
message: 'Failed to load form details.',
|
||||
icon: 'report_problem'
|
||||
});
|
||||
form.value = null; // Indicate failure
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(fetchForm);
|
||||
|
||||
function addCategory() {
|
||||
if (!form.value.categories) {
|
||||
form.value.categories = [];
|
||||
}
|
||||
form.value.categories.push({ name: `Category ${form.value.categories.length + 1}`, fields: [{ label: '', type: 'text', description: '' }] });
|
||||
}
|
||||
|
||||
function removeCategory(index) {
|
||||
form.value.categories.splice(index, 1);
|
||||
}
|
||||
|
||||
function addField(catIndex) {
|
||||
if (!form.value.categories[catIndex].fields) {
|
||||
form.value.categories[catIndex].fields = [];
|
||||
}
|
||||
form.value.categories[catIndex].fields.push({ label: '', type: 'text', description: '' });
|
||||
}
|
||||
|
||||
function removeField(catIndex, fieldIndex) {
|
||||
form.value.categories[catIndex].fields.splice(fieldIndex, 1);
|
||||
}
|
||||
|
||||
async function updateForm() {
|
||||
submitting.value = true;
|
||||
try {
|
||||
// Prepare payload, potentially removing temporary IDs if any were added client-side
|
||||
const payload = JSON.parse(JSON.stringify(form.value));
|
||||
// The backend PUT expects title, description, categories (with name, fields (with label, type, description))
|
||||
// We don't need to send the form ID in the body as it's in the URL
|
||||
|
||||
await axios.put(`/api/forms/${props.id}`, payload);
|
||||
$q.notify({
|
||||
color: 'positive',
|
||||
position: 'top',
|
||||
message: `Form "${form.value.title}" updated successfully!`,
|
||||
icon: 'check_circle'
|
||||
});
|
||||
router.push({ name: 'formList' }); // Or maybe back to the form details/responses page
|
||||
} catch (error) {
|
||||
console.error('Error updating form:', error);
|
||||
const message = error.response?.data?.error || 'Failed to update form. Please check the details and try again.';
|
||||
$q.notify({
|
||||
color: 'negative',
|
||||
position: 'top',
|
||||
message: message,
|
||||
icon: 'report_problem'
|
||||
});
|
||||
} finally {
|
||||
submitting.value = false;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.bordered {
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
.rounded-borders {
|
||||
border-radius: 4px;
|
||||
}
|
||||
</style>
|
||||
162
src/pages/FormFillPage.vue
Normal file
162
src/pages/FormFillPage.vue
Normal file
|
|
@ -0,0 +1,162 @@
|
|||
<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 v-slot: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>
|
||||
</q-banner>
|
||||
</q-page>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, reactive } from 'vue';
|
||||
import axios from '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>
|
||||
116
src/pages/FormListPage.vue
Normal file
116
src/pages/FormListPage.vue
Normal file
|
|
@ -0,0 +1,116 @@
|
|||
<template>
|
||||
<q-page padding>
|
||||
<div class="q-mb-md row justify-between items-center">
|
||||
<div class="text-h4">Forms</div>
|
||||
<q-btn outline label="Create New Form" color="primary" :to="{ name: 'formCreate' }" />
|
||||
</div>
|
||||
|
||||
<q-list bordered separator v-if="forms.length > 0">
|
||||
<q-item v-for="form in forms" :key="form.id">
|
||||
<q-item-section>
|
||||
<q-item-label>{{ form.title }}</q-item-label>
|
||||
<q-item-label caption>{{ form.description || 'No description' }}</q-item-label>
|
||||
<q-item-label caption>Created: {{ formatDate(form.createdAt) }}</q-item-label>
|
||||
</q-item-section>
|
||||
<q-item-section side>
|
||||
<div class="q-gutter-sm">
|
||||
<q-btn flat round dense icon="edit_note" color="info" :to="{ name: 'formFill', params: { id: form.id } }" title="Fill Form" />
|
||||
<q-btn flat round dense icon="visibility" color="secondary" :to="{ name: 'formResponses', params: { id: form.id } }" title="View Responses" />
|
||||
<q-btn flat round dense icon="edit" color="warning" :to="{ name: 'formEdit', params: { id: form.id } }" title="Edit Form" />
|
||||
<q-btn flat round dense icon="delete" color="negative" @click.stop="confirmDeleteForm(form.id)" title="Delete Form" />
|
||||
</div>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
<q-banner v-else class="bg-info text-white">
|
||||
<template v-slot:avatar>
|
||||
<q-icon name="info" color="white" />
|
||||
</template>
|
||||
No forms created yet. Click the button above to create your first form.
|
||||
</q-banner>
|
||||
|
||||
<q-inner-loading :showing="loading">
|
||||
<q-spinner-gears size="50px" color="primary" />
|
||||
</q-inner-loading>
|
||||
|
||||
</q-page>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue';
|
||||
import axios from 'axios';
|
||||
import { useQuasar } from 'quasar';
|
||||
|
||||
const $q = useQuasar();
|
||||
const forms = ref([]);
|
||||
const loading = ref(false);
|
||||
|
||||
async function fetchForms() {
|
||||
loading.value = true;
|
||||
try {
|
||||
const response = await axios.get('/api/forms');
|
||||
forms.value = response.data;
|
||||
} catch (error) {
|
||||
console.error('Error fetching forms:', error);
|
||||
$q.notify({
|
||||
color: 'negative',
|
||||
position: 'top',
|
||||
message: 'Failed to load forms. Please try again later.',
|
||||
icon: 'report_problem'
|
||||
});
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
// Add function to handle delete confirmation
|
||||
function confirmDeleteForm(id) {
|
||||
$q.dialog({
|
||||
title: 'Confirm Delete',
|
||||
message: 'Are you sure you want to delete this form and all its responses? This action cannot be undone.',
|
||||
cancel: true,
|
||||
persistent: true,
|
||||
ok: {
|
||||
label: 'Delete',
|
||||
color: 'negative',
|
||||
flat: false
|
||||
},
|
||||
cancel: {
|
||||
label: 'Cancel',
|
||||
flat: true
|
||||
}
|
||||
}).onOk(() => {
|
||||
deleteForm(id);
|
||||
});
|
||||
}
|
||||
|
||||
// Add function to call the delete API
|
||||
async function deleteForm(id) {
|
||||
try {
|
||||
await axios.delete(`/api/forms/${id}`);
|
||||
forms.value = forms.value.filter(form => form.id !== id);
|
||||
$q.notify({
|
||||
color: 'positive',
|
||||
position: 'top',
|
||||
message: 'Form deleted successfully.',
|
||||
icon: 'check_circle'
|
||||
});
|
||||
} catch (error) {
|
||||
console.error(`Error deleting form ${id}:`, error);
|
||||
const errorMessage = error.response?.data?.error || 'Failed to delete form. Please try again.';
|
||||
$q.notify({
|
||||
color: 'negative',
|
||||
position: 'top',
|
||||
message: errorMessage,
|
||||
icon: 'report_problem'
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Add function to format date
|
||||
function formatDate(date) {
|
||||
return new Date(date).toLocaleString();
|
||||
}
|
||||
|
||||
onMounted(fetchForms);
|
||||
</script>
|
||||
216
src/pages/FormResponsesPage.vue
Normal file
216
src/pages/FormResponsesPage.vue
Normal file
|
|
@ -0,0 +1,216 @@
|
|||
<template>
|
||||
<q-page padding>
|
||||
<q-inner-loading :showing="loading">
|
||||
<q-spinner-gears size="50px" color="primary" />
|
||||
</q-inner-loading>
|
||||
|
||||
<div v-if="!loading && formTitle">
|
||||
<div class="row justify-between items-center q-mb-md">
|
||||
<div class="text-h4">Responses for: {{ formTitle }}</div>
|
||||
</div>
|
||||
|
||||
<!-- Add Search Input -->
|
||||
<q-input
|
||||
v-if="responses.length > 0"
|
||||
outlined
|
||||
dense
|
||||
debounce="300"
|
||||
v-model="filterText"
|
||||
placeholder="Search responses..."
|
||||
class="q-mb-md"
|
||||
>
|
||||
<template v-slot:append>
|
||||
<q-icon name="search" />
|
||||
</template>
|
||||
</q-input>
|
||||
|
||||
<q-table
|
||||
v-if="responses.length > 0"
|
||||
:rows="formattedResponses"
|
||||
:columns="columns"
|
||||
row-key="id"
|
||||
flat bordered
|
||||
separator="cell"
|
||||
wrap-cells
|
||||
:filter="filterText"
|
||||
>
|
||||
<template v-slot:body-cell-submittedAt="props">
|
||||
<q-td :props="props">
|
||||
{{ new Date(props.value).toLocaleString() }}
|
||||
</q-td>
|
||||
</template>
|
||||
|
||||
<!-- Slot for Actions column -->
|
||||
<template v-slot:body-cell-actions="props">
|
||||
<q-td :props="props">
|
||||
<q-btn
|
||||
flat dense round
|
||||
icon="download"
|
||||
color="primary"
|
||||
@click="downloadResponsePdf(props.row.id)"
|
||||
aria-label="Download PDF"
|
||||
>
|
||||
<q-tooltip>Download PDF</q-tooltip>
|
||||
</q-btn>
|
||||
</q-td>
|
||||
</template>
|
||||
|
||||
</q-table>
|
||||
|
||||
<q-banner v-else class="">
|
||||
<template v-slot:avatar>
|
||||
<q-icon name="info" color="info" />
|
||||
</template>
|
||||
No responses have been submitted for this form yet.
|
||||
</q-banner>
|
||||
|
||||
</div>
|
||||
<q-banner v-else-if="!loading && !formTitle" class="bg-negative text-white">
|
||||
<template v-slot:avatar>
|
||||
<q-icon name="error" />
|
||||
</template>
|
||||
Form not found or could not load responses.
|
||||
<template v-slot:action>
|
||||
<q-btn flat color="white" label="Back to Forms" :to="{ name: 'formList' }" />
|
||||
</template>
|
||||
</q-banner>
|
||||
</q-page>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, computed } from 'vue';
|
||||
import axios from 'axios';
|
||||
import { useQuasar } from 'quasar';
|
||||
import { useRoute } from 'vue-router';
|
||||
|
||||
const props = defineProps({
|
||||
id: {
|
||||
type: [String, Number],
|
||||
required: true
|
||||
}
|
||||
});
|
||||
|
||||
const $q = useQuasar();
|
||||
const formTitle = ref('');
|
||||
const responses = ref([]);
|
||||
const columns = ref([]); // Columns will be generated dynamically
|
||||
const loading = ref(true);
|
||||
const filterText = ref(''); // Add ref for filter text
|
||||
|
||||
// Fetch both form details (for title and field labels/order) and responses
|
||||
async function fetchData() {
|
||||
loading.value = true;
|
||||
formTitle.value = '';
|
||||
responses.value = [];
|
||||
columns.value = [];
|
||||
|
||||
try {
|
||||
// Fetch form details first to get the structure
|
||||
const formDetailsResponse = await axios.get(`/api/forms/${props.id}`);
|
||||
const form = formDetailsResponse.data;
|
||||
formTitle.value = form.title;
|
||||
|
||||
// Generate columns based on form fields in correct order
|
||||
const generatedColumns = [{ name: 'submittedAt', label: 'Submitted At', field: 'submittedAt', align: 'left', sortable: true }];
|
||||
form.categories.forEach(cat => {
|
||||
cat.fields.forEach(field => {
|
||||
generatedColumns.push({
|
||||
name: `field_${field.id}`, // Unique name for column
|
||||
label: field.label,
|
||||
field: row => row.values[field.id]?.value ?? '', // Access nested value safely
|
||||
align: 'left',
|
||||
sortable: true,
|
||||
// Add formatting based on field.type if needed
|
||||
});
|
||||
});
|
||||
});
|
||||
columns.value = generatedColumns;
|
||||
|
||||
// Add Actions column
|
||||
columns.value.push({
|
||||
name: 'actions',
|
||||
label: 'Actions',
|
||||
field: 'actions',
|
||||
align: 'center'
|
||||
});
|
||||
|
||||
// Fetch responses
|
||||
const responsesResponse = await axios.get(`/api/forms/${props.id}/responses`);
|
||||
responses.value = responsesResponse.data; // API already groups them
|
||||
|
||||
} catch (error) {
|
||||
console.error(`Error fetching data for form ${props.id}:`, error);
|
||||
$q.notify({
|
||||
color: 'negative',
|
||||
position: 'top',
|
||||
message: 'Failed to load form responses.',
|
||||
icon: 'report_problem'
|
||||
});
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
// Computed property to match the structure expected by QTable rows
|
||||
const formattedResponses = computed(() => {
|
||||
return responses.value.map(response => {
|
||||
const row = {
|
||||
id: response.id,
|
||||
submittedAt: response.submittedAt,
|
||||
// Flatten values for direct access by field function in columns
|
||||
values: response.values
|
||||
};
|
||||
return row;
|
||||
});
|
||||
});
|
||||
|
||||
// Function to download a single response as PDF
|
||||
async function downloadResponsePdf(responseId) {
|
||||
try {
|
||||
const response = await axios.get(`/api/responses/${responseId}/export/pdf`, {
|
||||
responseType: 'blob', // Important for handling file downloads
|
||||
});
|
||||
|
||||
// Create a URL for the blob
|
||||
const url = window.URL.createObjectURL(new Blob([response.data]));
|
||||
const link = document.createElement('a');
|
||||
link.href = url;
|
||||
|
||||
// Try to get filename from content-disposition header
|
||||
const contentDisposition = response.headers['content-disposition'];
|
||||
let filename = `response-${responseId}.pdf`; // Default filename
|
||||
if (contentDisposition) {
|
||||
const filenameMatch = contentDisposition.match(/filename="?(.+)"?/i);
|
||||
if (filenameMatch && filenameMatch.length > 1) {
|
||||
filename = filenameMatch[1];
|
||||
}
|
||||
}
|
||||
|
||||
link.setAttribute('download', filename);
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
|
||||
// Clean up
|
||||
link.parentNode.removeChild(link);
|
||||
window.URL.revokeObjectURL(url);
|
||||
|
||||
$q.notify({
|
||||
color: 'positive',
|
||||
position: 'top',
|
||||
message: `Downloaded ${filename}`,
|
||||
icon: 'check_circle'
|
||||
});
|
||||
|
||||
} catch (error) {
|
||||
console.error(`Error downloading PDF for response ${responseId}:`, error);
|
||||
$q.notify({
|
||||
color: 'negative',
|
||||
position: 'top',
|
||||
message: 'Failed to download PDF.',
|
||||
icon: 'report_problem'
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(fetchData);
|
||||
</script>
|
||||
Loading…
Add table
Add a link
Reference in a new issue