Added linting and enforced code styling.
This commit is contained in:
parent
8655eae39c
commit
86967b26cd
37 changed files with 3356 additions and 1875 deletions
|
|
@ -1,54 +1,140 @@
|
|||
<template>
|
||||
<q-page padding>
|
||||
<div class="text-h4 q-mb-md">Create New Form</div>
|
||||
<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-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-input
|
||||
outlined
|
||||
v-model="form.description"
|
||||
label="Form Description"
|
||||
type="textarea"
|
||||
autogrow
|
||||
/>
|
||||
|
||||
<q-separator class="q-my-lg" />
|
||||
<q-separator class="q-my-lg" />
|
||||
|
||||
<div class="text-h6 q-mb-sm">Categories & Fields</div>
|
||||
<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="(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 color="primary" label="Add Field" @click="addField(catIndex)" class="q-ml-md q-mt-sm" />
|
||||
</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
|
||||
color="primary"
|
||||
label="Add Field"
|
||||
@click="addField(catIndex)"
|
||||
class="q-ml-md q-mt-sm"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<q-btn color="secondary" label="Add Category" @click="addCategory" />
|
||||
<q-btn
|
||||
color="secondary"
|
||||
label="Add Category"
|
||||
@click="addCategory"
|
||||
/>
|
||||
|
||||
<q-separator class="q-my-lg" />
|
||||
<q-separator class="q-my-lg" />
|
||||
|
||||
<div>
|
||||
<q-btn label="Create Form" type="submit" color="primary" :loading="submitting" />
|
||||
<q-btn label="Cancel" type="reset" color="warning" class="q-ml-sm" :to="{ name: 'formList' }" />
|
||||
</div>
|
||||
</q-form>
|
||||
</q-page>
|
||||
<div>
|
||||
<q-btn
|
||||
label="Create Form"
|
||||
type="submit"
|
||||
color="primary"
|
||||
:loading="submitting"
|
||||
/>
|
||||
<q-btn
|
||||
label="Cancel"
|
||||
type="reset"
|
||||
color="warning"
|
||||
class="q-ml-sm"
|
||||
:to="{ name: 'formList' }"
|
||||
/>
|
||||
</div>
|
||||
</q-form>
|
||||
</q-page>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
|
@ -61,55 +147,65 @@ const $q = useQuasar();
|
|||
const router = useRouter();
|
||||
|
||||
const form = ref({
|
||||
title: '',
|
||||
description: '',
|
||||
categories: [
|
||||
{ name: 'Category 1', fields: [{ label: '', type: null, description: '' }] }
|
||||
]
|
||||
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 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 removeCategory(index)
|
||||
{
|
||||
form.value.categories.splice(index, 1);
|
||||
}
|
||||
|
||||
function addField(catIndex) {
|
||||
form.value.categories[catIndex].fields.push({ label: '', type: 'text', description: '' });
|
||||
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);
|
||||
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;
|
||||
}
|
||||
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>
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue