Md Afiq Iskandar
77e3b8601f
- Added pagination functionality to the form management and process management pages, allowing users to navigate through forms and processes more efficiently. - Introduced controls for items per page selection and pagination navigation, enhancing user experience and accessibility of data. - Updated computed properties to handle paginated data and maintain accurate pagination state across filters and searches. - Ensured that pagination resets when filters change, providing a consistent and intuitive user interface.
1128 lines
37 KiB
Vue
1128 lines
37 KiB
Vue
<template>
|
|
<div class="flex flex-col h-screen bg-gray-50">
|
|
<!-- Header Bar -->
|
|
<header
|
|
class="bg-white border-b border-gray-200 px-6 py-4 flex items-center justify-between shadow-sm"
|
|
>
|
|
<div class="flex items-center gap-4">
|
|
<Icon
|
|
@click="goToDashboard"
|
|
name="ph:arrow-circle-left-duotone"
|
|
class="cursor-pointer w-6 h-6 hover:text-gray-600 text-gray-500"
|
|
/>
|
|
<div class="flex items-center gap-3">
|
|
<img
|
|
src="@/assets/img/logo/logo-word-black.svg"
|
|
alt="Corrad Logo"
|
|
class="h-8"
|
|
/>
|
|
<div class="border-l border-gray-300 pl-3">
|
|
<h1 class="text-xl font-semibold text-gray-900">Form Management</h1>
|
|
<p class="text-sm text-gray-500">Manage and organize your forms</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-center gap-2">
|
|
<!-- Import Form Button with hidden file input -->
|
|
<input
|
|
type="file"
|
|
ref="jsonFileInput"
|
|
accept=".json"
|
|
style="display: none"
|
|
@change="handleJsonImport"
|
|
/>
|
|
<RsButton @click="showImportModal = true" variant="secondary" size="sm" :disabled="loading">
|
|
<Icon name="material-symbols:upload" class="mr-1" />
|
|
Import Form
|
|
</RsButton>
|
|
|
|
<RsButton @click="createNewForm" variant="primary" size="sm">
|
|
<Icon name="material-symbols:add" class="mr-1" />
|
|
Create New Form
|
|
</RsButton>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Main Content Area -->
|
|
<div class="flex-1 p-6 overflow-auto">
|
|
<!-- Filters and Search -->
|
|
<div class="mb-6 bg-white rounded-xl shadow-sm border border-gray-200 p-4">
|
|
<div class="flex flex-col lg:flex-row gap-4">
|
|
<div class="flex-1 max-w-md">
|
|
<FormKit
|
|
v-model="searchQuery"
|
|
type="text"
|
|
placeholder="Search forms by name or description..."
|
|
:classes="{
|
|
outer: 'mb-0',
|
|
wrapper: 'relative',
|
|
inner: 'relative',
|
|
input: 'w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500',
|
|
prefixIcon: 'absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 pointer-events-none'
|
|
}"
|
|
>
|
|
<template #prefixIcon>
|
|
<Icon name="material-symbols:search" class="text-lg" />
|
|
</template>
|
|
</FormKit>
|
|
</div>
|
|
|
|
<div class="min-w-48">
|
|
<FormKit
|
|
v-model="selectedCategory"
|
|
type="select"
|
|
:options="categoryOptions"
|
|
placeholder="Filter by category"
|
|
:classes="{
|
|
outer: 'mb-0',
|
|
input: 'w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white'
|
|
}"
|
|
/>
|
|
</div>
|
|
|
|
<div class="min-w-48">
|
|
<FormKit
|
|
v-model="selectedGroup"
|
|
type="select"
|
|
:options="groupOptions"
|
|
placeholder="Filter by group"
|
|
:classes="{
|
|
outer: 'mb-0',
|
|
input: 'w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white'
|
|
}"
|
|
/>
|
|
</div>
|
|
|
|
<div class="flex gap-2">
|
|
<RsButton
|
|
@click="clearFilters"
|
|
variant="secondary"
|
|
size="sm"
|
|
:disabled="loading"
|
|
v-if="hasActiveFilters"
|
|
>
|
|
<Icon name="material-symbols:filter-alt-off" class="mr-1" />
|
|
Clear
|
|
</RsButton>
|
|
|
|
<RsButton @click="loadForms" variant="tertiary" size="sm" :disabled="loading">
|
|
<Icon name="material-symbols:refresh" class="mr-1" />
|
|
Refresh
|
|
</RsButton>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Loading State -->
|
|
<div v-if="loading && formStore.savedForms.length === 0" class="flex justify-center items-center py-12">
|
|
<div class="text-center">
|
|
<Icon name="material-symbols:progress-activity" class="w-8 h-8 animate-spin text-blue-500 mx-auto mb-2" />
|
|
<p class="text-gray-500">Loading forms...</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Forms Grid -->
|
|
<div v-else-if="filteredForms.length > 0" class="grid gap-4">
|
|
<div
|
|
v-for="form in paginatedForms"
|
|
:key="form.id"
|
|
class="bg-white rounded-xl shadow-sm border border-gray-200 p-6 hover:shadow-md transition-shadow"
|
|
>
|
|
<div class="flex items-start justify-between">
|
|
<div class="flex-1">
|
|
<div class="flex items-center gap-3 mb-2">
|
|
<h3 class="text-lg font-semibold text-gray-900">{{ form.name || 'Untitled Form' }}</h3>
|
|
<div class="flex gap-2">
|
|
<RsBadge v-if="form.category" :variant="getCategoryColor(form.category)" size="sm">
|
|
{{ form.category }}
|
|
</RsBadge>
|
|
<RsBadge v-if="form.group" variant="secondary" size="sm">
|
|
{{ form.group }}
|
|
</RsBadge>
|
|
</div>
|
|
</div>
|
|
|
|
<p class="text-gray-600 mb-3">
|
|
{{ form.description || 'No description available' }}
|
|
</p>
|
|
|
|
<div class="flex items-center gap-6 text-sm text-gray-500">
|
|
<div class="flex items-center gap-1">
|
|
<Icon name="material-symbols:fingerprint" class="w-4 h-4" />
|
|
ID: {{ form.id }}
|
|
</div>
|
|
<div class="flex items-center gap-1">
|
|
<Icon name="material-symbols:calendar-add-on-outline" class="w-4 h-4" />
|
|
Created {{ formatDate(form.createdAt) }}
|
|
</div>
|
|
<div class="flex items-center gap-1">
|
|
<Icon name="material-symbols:schedule" class="w-4 h-4" />
|
|
Updated {{ formatDate(form.updatedAt) }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-center gap-2 ml-4">
|
|
<button
|
|
@click="editForm(form.id)"
|
|
class="p-2 text-blue-600 hover:text-blue-800 hover:bg-blue-50 rounded-lg transition-colors"
|
|
title="Edit Form"
|
|
:disabled="loading"
|
|
>
|
|
<Icon name="material-symbols:edit" class="text-lg" />
|
|
</button>
|
|
|
|
<button
|
|
@click="duplicateForm(form)"
|
|
class="p-2 text-indigo-600 hover:text-indigo-800 hover:bg-indigo-50 rounded-lg transition-colors"
|
|
title="Duplicate Form"
|
|
:disabled="loading"
|
|
>
|
|
<Icon name="material-symbols:content-copy" class="text-lg" />
|
|
</button>
|
|
|
|
<button
|
|
@click="exportForm(form)"
|
|
class="p-2 text-green-600 hover:text-green-800 hover:bg-green-50 rounded-lg transition-colors"
|
|
title="Export Form as JSON"
|
|
:disabled="loading"
|
|
>
|
|
<Icon name="material-symbols:download" class="text-lg" />
|
|
</button>
|
|
|
|
<button
|
|
@click="confirmDelete(form.id)"
|
|
class="p-2 text-red-600 hover:text-red-800 hover:bg-red-50 rounded-lg transition-colors"
|
|
title="Delete Form"
|
|
:disabled="loading"
|
|
>
|
|
<Icon name="material-symbols:delete" class="text-lg" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Pagination -->
|
|
<div v-if="filteredForms.length > 0 && totalPages > 1" class="mt-6 bg-white rounded-xl shadow-sm border border-gray-200 p-4">
|
|
<div class="flex flex-col sm:flex-row items-center justify-between gap-4">
|
|
<!-- Pagination Info -->
|
|
<div class="text-sm text-gray-700">
|
|
Showing {{ paginationInfo.start }}-{{ paginationInfo.end }} of {{ paginationInfo.total }} forms
|
|
</div>
|
|
|
|
<!-- Items per page selector -->
|
|
<div class="flex items-center gap-2">
|
|
<span class="text-sm text-gray-700">Items per page:</span>
|
|
<FormKit
|
|
:model-value="itemsPerPage"
|
|
@update:model-value="changeItemsPerPage"
|
|
type="select"
|
|
:options="[
|
|
{ label: '5', value: 5 },
|
|
{ label: '10', value: 10 },
|
|
{ label: '20', value: 20 },
|
|
{ label: '50', value: 50 }
|
|
]"
|
|
:classes="{
|
|
outer: 'mb-0',
|
|
input: 'px-2 py-1 border border-gray-300 rounded text-sm bg-white min-w-16'
|
|
}"
|
|
/>
|
|
</div>
|
|
|
|
<!-- Pagination Controls -->
|
|
<div class="flex items-center gap-1">
|
|
<!-- Previous Button -->
|
|
<button
|
|
@click="prevPage"
|
|
:disabled="!hasPrevPage"
|
|
class="px-3 py-2 text-sm border border-gray-300 rounded-lg bg-white hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
|
|
>
|
|
<Icon name="material-symbols:chevron-left" class="w-4 h-4" />
|
|
</button>
|
|
|
|
<!-- Page Numbers -->
|
|
<template v-if="totalPages <= 7">
|
|
<!-- Show all pages if 7 or fewer -->
|
|
<button
|
|
v-for="page in totalPages"
|
|
:key="page"
|
|
@click="goToPage(page)"
|
|
:class="[
|
|
'px-3 py-2 text-sm border rounded-lg transition-colors',
|
|
page === currentPage
|
|
? 'bg-blue-600 text-white border-blue-600'
|
|
: 'bg-white text-gray-700 border-gray-300 hover:bg-gray-50'
|
|
]"
|
|
>
|
|
{{ page }}
|
|
</button>
|
|
</template>
|
|
<template v-else>
|
|
<!-- Show first page -->
|
|
<button
|
|
@click="goToPage(1)"
|
|
:class="[
|
|
'px-3 py-2 text-sm border rounded-lg transition-colors',
|
|
1 === currentPage
|
|
? 'bg-blue-600 text-white border-blue-600'
|
|
: 'bg-white text-gray-700 border-gray-300 hover:bg-gray-50'
|
|
]"
|
|
>
|
|
1
|
|
</button>
|
|
|
|
<!-- Show ellipsis if needed -->
|
|
<span v-if="currentPage > 3" class="px-2 text-gray-500">...</span>
|
|
|
|
<!-- Show pages around current page -->
|
|
<button
|
|
v-for="page in [currentPage - 1, currentPage, currentPage + 1].filter(p => p > 1 && p < totalPages)"
|
|
:key="page"
|
|
@click="goToPage(page)"
|
|
:class="[
|
|
'px-3 py-2 text-sm border rounded-lg transition-colors',
|
|
page === currentPage
|
|
? 'bg-blue-600 text-white border-blue-600'
|
|
: 'bg-white text-gray-700 border-gray-300 hover:bg-gray-50'
|
|
]"
|
|
>
|
|
{{ page }}
|
|
</button>
|
|
|
|
<!-- Show ellipsis if needed -->
|
|
<span v-if="currentPage < totalPages - 2" class="px-2 text-gray-500">...</span>
|
|
|
|
<!-- Show last page -->
|
|
<button
|
|
v-if="totalPages > 1"
|
|
@click="goToPage(totalPages)"
|
|
:class="[
|
|
'px-3 py-2 text-sm border rounded-lg transition-colors',
|
|
totalPages === currentPage
|
|
? 'bg-blue-600 text-white border-blue-600'
|
|
: 'bg-white text-gray-700 border-gray-300 hover:bg-gray-50'
|
|
]"
|
|
>
|
|
{{ totalPages }}
|
|
</button>
|
|
</template>
|
|
|
|
<!-- Next Button -->
|
|
<button
|
|
@click="nextPage"
|
|
:disabled="!hasNextPage"
|
|
class="px-3 py-2 text-sm border border-gray-300 rounded-lg bg-white hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
|
|
>
|
|
<Icon name="material-symbols:chevron-right" class="w-4 h-4" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Empty State -->
|
|
<div v-else-if="filteredForms.length === 0" class="bg-white rounded-xl shadow-sm border border-gray-200 p-12 text-center">
|
|
<Icon name="material-symbols:description-outline" class="w-16 h-16 text-gray-300 mx-auto mb-4" />
|
|
<h3 class="text-lg font-medium text-gray-900 mb-2">
|
|
{{ hasActiveFilters ? 'No forms match your filters' : 'No forms found' }}
|
|
</h3>
|
|
<p class="text-gray-600 mb-6">
|
|
{{ hasActiveFilters ? 'Try adjusting your search or filter criteria' : 'Create your first form to get started' }}
|
|
</p>
|
|
|
|
<!-- Show current filters if any -->
|
|
<div v-if="hasActiveFilters" class="text-sm text-gray-400 mb-6 space-y-1">
|
|
<div v-if="searchQuery">Search: "{{ searchQuery }}"</div>
|
|
<div v-if="selectedCategory">Category: {{ selectedCategory }}</div>
|
|
<div v-if="selectedGroup">Group: {{ selectedGroup }}</div>
|
|
</div>
|
|
|
|
<div class="flex justify-center gap-3">
|
|
<RsButton v-if="hasActiveFilters" @click="clearFilters" variant="secondary">
|
|
<Icon name="material-symbols:filter-alt-off" class="mr-2" />
|
|
Clear Filters
|
|
</RsButton>
|
|
<RsButton v-if="!hasActiveFilters" @click="createNewForm" variant="primary">
|
|
<Icon name="material-symbols:add" class="mr-2" />
|
|
Create New Form
|
|
</RsButton>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Global Loading Overlay -->
|
|
<div v-if="loading && formStore.savedForms.length > 0" class="fixed inset-0 bg-black bg-opacity-20 flex items-center justify-center z-50">
|
|
<div class="bg-white rounded-lg p-6 flex items-center space-x-3">
|
|
<Icon name="material-symbols:progress-activity" class="w-6 h-6 animate-spin text-blue-500" />
|
|
<span class="text-gray-700">Processing...</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Unsaved Changes Modal -->
|
|
<RsModal v-model="showUnsavedChangesModal" title="Unsaved Changes" size="md" position="center">
|
|
<div class="p-4">
|
|
<div class="flex items-center mb-4">
|
|
<Icon name="material-symbols:warning-outline" class="text-yellow-500 w-8 h-8 mr-3 flex-shrink-0" />
|
|
<div>
|
|
<p class="text-gray-600 font-medium mb-1">You have unsaved changes</p>
|
|
<p class="text-gray-600 text-sm">
|
|
Are you sure you want to create a new form? Your unsaved changes will be lost.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<template #footer>
|
|
<div class="flex justify-end gap-2">
|
|
<RsButton @click="cancelNavigation" variant="tertiary" :disabled="loading">
|
|
Cancel
|
|
</RsButton>
|
|
<RsButton @click="confirmNavigation" variant="danger" :disabled="loading">
|
|
Create New Form
|
|
</RsButton>
|
|
</div>
|
|
</template>
|
|
</RsModal>
|
|
|
|
<!-- Delete confirmation dialog -->
|
|
<RsModal v-model="showDeleteConfirm" title="Confirm Delete" size="md" position="center">
|
|
<div class="p-4">
|
|
<div class="flex items-center mb-4">
|
|
<Icon name="material-symbols:warning-outline" class="text-yellow-500 w-8 h-8 mr-3 flex-shrink-0" />
|
|
<div>
|
|
<p class="text-gray-600 font-medium mb-1">Delete Form</p>
|
|
<p class="text-gray-600 text-sm">
|
|
Are you sure you want to delete this form? This action cannot be undone and will permanently remove all form data.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<template #footer>
|
|
<div class="flex justify-end gap-2">
|
|
<RsButton @click="cancelDelete" variant="tertiary" :disabled="loading">
|
|
Cancel
|
|
</RsButton>
|
|
<RsButton @click="deleteForm" variant="danger" :disabled="loading">
|
|
<Icon v-if="loading" name="material-symbols:progress-activity" class="w-4 h-4 animate-spin mr-1" />
|
|
Delete
|
|
</RsButton>
|
|
</div>
|
|
</template>
|
|
</RsModal>
|
|
|
|
<!-- Import Form Modal -->
|
|
<RsModal v-model="showImportModal" title="Import Form from JSON" size="lg" position="center">
|
|
<div class="p-4">
|
|
<div class="mb-4">
|
|
<p class="text-gray-600 mb-4">
|
|
Import a form by uploading a JSON file or pasting JSON content directly.
|
|
The form will be created as a new form in your database.
|
|
</p>
|
|
|
|
<!-- File Upload Option -->
|
|
<div class="mb-6">
|
|
<h3 class="text-sm font-medium text-gray-700 mb-2">Option 1: Upload JSON File</h3>
|
|
<div class="border-2 border-dashed border-gray-300 rounded-lg p-6 text-center">
|
|
<input
|
|
type="file"
|
|
ref="modalJsonFileInput"
|
|
accept=".json"
|
|
style="display: none"
|
|
@change="handleModalJsonImport"
|
|
/>
|
|
<Icon name="material-symbols:upload-file" class="w-12 h-12 text-gray-400 mx-auto mb-3" />
|
|
<p class="text-sm text-gray-600 mb-3">Click to select a JSON file</p>
|
|
<RsButton @click="$refs.modalJsonFileInput.click()" variant="secondary" size="sm">
|
|
<Icon name="material-symbols:upload" class="mr-1" />
|
|
Select JSON File
|
|
</RsButton>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Paste JSON Option -->
|
|
<div class="mb-4">
|
|
<h3 class="text-sm font-medium text-gray-700 mb-2">Option 2: Paste JSON Content</h3>
|
|
<FormKit
|
|
v-model="jsonContent"
|
|
type="textarea"
|
|
placeholder="Paste your form JSON here..."
|
|
rows="10"
|
|
:classes="{
|
|
outer: 'mb-0',
|
|
input: 'font-mono text-sm'
|
|
}"
|
|
/>
|
|
</div>
|
|
|
|
<!-- JSON Validation Status -->
|
|
<div v-if="jsonValidationMessage" class="mb-4">
|
|
<div
|
|
class="p-3 rounded border text-sm"
|
|
:class="{
|
|
'bg-green-50 border-green-200 text-green-700': jsonIsValid,
|
|
'bg-red-50 border-red-200 text-red-700': !jsonIsValid
|
|
}"
|
|
>
|
|
<div class="flex items-center">
|
|
<Icon
|
|
:name="jsonIsValid ? 'material-symbols:check-circle' : 'material-symbols:error'"
|
|
class="w-4 h-4 mr-2"
|
|
/>
|
|
{{ jsonValidationMessage }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Documentation Link -->
|
|
<div class="bg-blue-50 border border-blue-200 rounded p-3">
|
|
<div class="flex items-start">
|
|
<Icon name="material-symbols:info" class="w-4 h-4 text-blue-600 mr-2 mt-0.5" />
|
|
<div class="text-sm text-blue-700">
|
|
<strong>Need help with the JSON format?</strong>
|
|
<br>
|
|
Check the complete documentation for the form JSON structure and examples in the project documentation.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<template #footer>
|
|
<div class="flex justify-end gap-2">
|
|
<RsButton @click="closeImportModal" variant="tertiary" :disabled="loading">
|
|
Cancel
|
|
</RsButton>
|
|
<RsButton
|
|
@click="importFromPastedJson"
|
|
variant="primary"
|
|
:disabled="loading || !jsonContent || !jsonIsValid"
|
|
>
|
|
<Icon v-if="loading" name="material-symbols:progress-activity" class="w-4 h-4 animate-spin mr-1" />
|
|
Import Form
|
|
</RsButton>
|
|
</div>
|
|
</template>
|
|
</RsModal>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, computed, onMounted, watch, onUnmounted } from 'vue';
|
|
import { useFormBuilderStore } from '~/stores/formBuilder';
|
|
import { useRouter } from 'vue-router';
|
|
|
|
// Define page meta
|
|
definePageMeta({
|
|
title: "Form Management",
|
|
description: "Manage your forms",
|
|
layout: "empty",
|
|
middleware: ["auth"],
|
|
requiresAuth: true,
|
|
});
|
|
|
|
// Initialize the store and router
|
|
const formStore = useFormBuilderStore();
|
|
const router = useRouter();
|
|
|
|
// Initialize toast with fallback
|
|
let toast;
|
|
try {
|
|
toast = useToast();
|
|
} catch (error) {
|
|
// Create a simple toast object if composable is not available
|
|
toast = {
|
|
success: (msg) => console.log('Success:', msg),
|
|
error: (msg) => console.error('Error:', msg),
|
|
info: (msg) => console.info('Info:', msg),
|
|
warning: (msg) => console.warn('Warning:', msg)
|
|
};
|
|
}
|
|
|
|
// State
|
|
const searchQuery = ref('');
|
|
const selectedCategory = ref('');
|
|
const selectedGroup = ref('');
|
|
const loading = ref(false);
|
|
const showDeleteConfirm = ref(false);
|
|
const formToDelete = ref(null);
|
|
const sortBy = ref('createdAt');
|
|
const sortOrder = ref('desc');
|
|
const showUnsavedChangesModal = ref(false);
|
|
const jsonFileInput = ref(null);
|
|
const showImportModal = ref(false);
|
|
const modalJsonFileInput = ref(null);
|
|
const jsonContent = ref('');
|
|
const jsonValidationMessage = ref('');
|
|
const jsonIsValid = ref(false);
|
|
|
|
// Pagination state
|
|
const currentPage = ref(1);
|
|
const itemsPerPage = ref(5); // Set to 5 to test pagination
|
|
const totalItems = ref(0);
|
|
|
|
// Computed properties for grouping
|
|
const categoryOptions = computed(() => {
|
|
const categories = [...new Set(formStore.savedForms.map(form => form.category).filter(Boolean))];
|
|
return [
|
|
{ label: 'All Categories', value: '' },
|
|
...categories.map(cat => ({ label: cat, value: cat }))
|
|
];
|
|
});
|
|
|
|
const groupOptions = computed(() => {
|
|
const groups = [...new Set(formStore.savedForms.map(form => form.group).filter(Boolean))];
|
|
return [
|
|
{ label: 'All Groups', value: '' },
|
|
...groups.map(group => ({ label: group, value: group }))
|
|
];
|
|
});
|
|
|
|
const hasActiveFilters = computed(() => {
|
|
return searchQuery.value || selectedCategory.value || selectedGroup.value;
|
|
});
|
|
|
|
// Filtered forms (all forms after applying filters)
|
|
const filteredForms = computed(() => {
|
|
let filtered = formStore.savedForms;
|
|
|
|
// Filter by search query
|
|
if (searchQuery.value) {
|
|
const query = searchQuery.value.toLowerCase();
|
|
filtered = filtered.filter(
|
|
form =>
|
|
(form.name && form.name.toLowerCase().includes(query)) ||
|
|
(form.description && form.description.toLowerCase().includes(query))
|
|
);
|
|
}
|
|
|
|
// Filter by category
|
|
if (selectedCategory.value) {
|
|
filtered = filtered.filter(form => form.category === selectedCategory.value);
|
|
}
|
|
|
|
// Filter by group
|
|
if (selectedGroup.value) {
|
|
filtered = filtered.filter(form => form.group === selectedGroup.value);
|
|
}
|
|
|
|
// Update total items for pagination
|
|
totalItems.value = filtered.length;
|
|
|
|
return filtered;
|
|
});
|
|
|
|
// Paginated forms (forms for current page)
|
|
const paginatedForms = computed(() => {
|
|
const start = (currentPage.value - 1) * itemsPerPage.value;
|
|
const end = start + itemsPerPage.value;
|
|
return filteredForms.value.slice(start, end);
|
|
});
|
|
|
|
// Pagination computed properties
|
|
const totalPages = computed(() => {
|
|
return Math.ceil(totalItems.value / itemsPerPage.value);
|
|
});
|
|
|
|
const hasNextPage = computed(() => {
|
|
return currentPage.value < totalPages.value;
|
|
});
|
|
|
|
const hasPrevPage = computed(() => {
|
|
return currentPage.value > 1;
|
|
});
|
|
|
|
const paginationInfo = computed(() => {
|
|
const start = totalItems.value === 0 ? 0 : (currentPage.value - 1) * itemsPerPage.value + 1;
|
|
const end = Math.min(currentPage.value * itemsPerPage.value, totalItems.value);
|
|
return {
|
|
start,
|
|
end,
|
|
total: totalItems.value
|
|
};
|
|
});
|
|
|
|
// Format date for display
|
|
const formatDate = (isoString) => {
|
|
if (!isoString) return '';
|
|
|
|
const date = new Date(isoString);
|
|
return new Intl.DateTimeFormat('en-US', {
|
|
year: 'numeric',
|
|
month: 'short',
|
|
day: 'numeric',
|
|
hour: 'numeric',
|
|
minute: 'numeric'
|
|
}).format(date);
|
|
};
|
|
|
|
// Load forms from API
|
|
const loadForms = async () => {
|
|
loading.value = true;
|
|
try {
|
|
await formStore.loadSavedForms();
|
|
} catch (error) {
|
|
console.error('Error loading forms:', error);
|
|
toast.error('Failed to load forms: ' + (error.message || 'Unknown error'));
|
|
} finally {
|
|
loading.value = false;
|
|
}
|
|
};
|
|
|
|
// Edit a form
|
|
const editForm = async (formId) => {
|
|
try {
|
|
// Navigate to form builder with the form ID as a query parameter
|
|
router.push(`/form-builder?id=${formId}`);
|
|
} catch (error) {
|
|
console.error('Error navigating to form:', error);
|
|
toast.error('Failed to open form');
|
|
}
|
|
};
|
|
|
|
// Duplicate a form
|
|
const duplicateForm = async (form) => {
|
|
try {
|
|
loading.value = true;
|
|
const newName = `${form.name || 'Form'} (Copy)`;
|
|
|
|
// Load the original form first
|
|
await formStore.loadForm(form.id);
|
|
|
|
// Clear the current form ID to ensure a new form is created
|
|
formStore.currentFormId = null;
|
|
|
|
// Update the form name for the duplicate
|
|
formStore.setFormName(newName);
|
|
|
|
// Mark as having unsaved changes and save as new form
|
|
formStore.hasUnsavedChanges = true;
|
|
await formStore.saveForm();
|
|
|
|
// Refresh the form list
|
|
await loadForms();
|
|
|
|
toast.success(`Form "${newName}" duplicated successfully`);
|
|
} catch (error) {
|
|
console.error('Error duplicating form:', error);
|
|
toast.error('Failed to duplicate form: ' + (error.message || 'Unknown error'));
|
|
} finally {
|
|
loading.value = false;
|
|
}
|
|
};
|
|
|
|
// Delete a form
|
|
const deleteForm = async () => {
|
|
if (!formToDelete.value) return;
|
|
|
|
try {
|
|
loading.value = true;
|
|
await formStore.deleteForm(formToDelete.value);
|
|
|
|
// Refresh the form list
|
|
await loadForms();
|
|
|
|
showDeleteConfirm.value = false;
|
|
formToDelete.value = null;
|
|
|
|
toast.success('Form deleted successfully');
|
|
} catch (error) {
|
|
console.error('Error deleting form:', error);
|
|
toast.error('Failed to delete form: ' + (error.message || 'Unknown error'));
|
|
} finally {
|
|
loading.value = false;
|
|
}
|
|
};
|
|
|
|
// Show delete confirmation
|
|
const confirmDelete = (formId) => {
|
|
formToDelete.value = formId;
|
|
showDeleteConfirm.value = true;
|
|
};
|
|
|
|
// Close delete confirmation
|
|
const cancelDelete = () => {
|
|
showDeleteConfirm.value = false;
|
|
formToDelete.value = null;
|
|
};
|
|
|
|
// Create a new form
|
|
const createNewForm = () => {
|
|
if (formStore.hasUnsavedChanges) {
|
|
showUnsavedChangesModal.value = true;
|
|
} else {
|
|
// Clear current form to start fresh
|
|
formStore.clearForm();
|
|
router.push('/form-builder');
|
|
}
|
|
};
|
|
|
|
// Navigation handlers for unsaved changes
|
|
const cancelNavigation = () => {
|
|
showUnsavedChangesModal.value = false;
|
|
};
|
|
|
|
const confirmNavigation = () => {
|
|
showUnsavedChangesModal.value = false;
|
|
formStore.clearForm();
|
|
router.push('/form-builder');
|
|
};
|
|
|
|
// Go back to main dashboard
|
|
const goToDashboard = () => {
|
|
router.push('/');
|
|
};
|
|
|
|
// Load forms on component mount
|
|
onMounted(async () => {
|
|
await loadForms();
|
|
});
|
|
|
|
// Watch for changes in search and filters
|
|
watch([searchQuery, selectedCategory, selectedGroup], () => {
|
|
// Reset to first page when filters change
|
|
currentPage.value = 1;
|
|
// Debounce the search to avoid too many API calls
|
|
clearTimeout(searchTimeout);
|
|
searchTimeout = setTimeout(() => {
|
|
loadForms();
|
|
}, 500);
|
|
});
|
|
|
|
let searchTimeout = null;
|
|
|
|
// Clear all filters
|
|
const clearFilters = () => {
|
|
searchQuery.value = '';
|
|
selectedCategory.value = '';
|
|
selectedGroup.value = '';
|
|
currentPage.value = 1; // Reset to first page
|
|
// loadForms will be called automatically by the watcher
|
|
};
|
|
|
|
// Pagination methods
|
|
const goToPage = (page) => {
|
|
if (page >= 1 && page <= totalPages.value) {
|
|
currentPage.value = page;
|
|
}
|
|
};
|
|
|
|
const nextPage = () => {
|
|
if (hasNextPage.value) {
|
|
currentPage.value++;
|
|
}
|
|
};
|
|
|
|
const prevPage = () => {
|
|
if (hasPrevPage.value) {
|
|
currentPage.value--;
|
|
}
|
|
};
|
|
|
|
const changeItemsPerPage = (newItemsPerPage) => {
|
|
itemsPerPage.value = newItemsPerPage;
|
|
currentPage.value = 1; // Reset to first page when changing items per page
|
|
};
|
|
|
|
// Helper function to get category color
|
|
const getCategoryColor = (category) => {
|
|
const colors = {
|
|
'forms': 'primary',
|
|
'surveys': 'success',
|
|
'applications': 'info',
|
|
'feedback': 'warning',
|
|
'registration': 'danger',
|
|
'default': 'secondary'
|
|
};
|
|
return colors[category?.toLowerCase()] || colors.default;
|
|
};
|
|
|
|
// Clean up the search timeout on component unmount
|
|
onUnmounted(() => {
|
|
clearTimeout(searchTimeout);
|
|
});
|
|
|
|
// Helper function to get default category for component type
|
|
const getDefaultCategory = (type) => {
|
|
const categories = {
|
|
'text': 'Basic Inputs',
|
|
'textarea': 'Basic Inputs',
|
|
'number': 'Basic Inputs',
|
|
'email': 'Basic Inputs',
|
|
'password': 'Basic Inputs',
|
|
'select': 'Selection Inputs',
|
|
'checkbox': 'Selection Inputs',
|
|
'radio': 'Selection Inputs',
|
|
'heading': 'Layout',
|
|
'paragraph': 'Layout',
|
|
'divider': 'Layout',
|
|
'file': 'Advanced',
|
|
'button': 'Advanced'
|
|
};
|
|
return categories[type] || 'Basic Inputs';
|
|
};
|
|
|
|
// Helper function to get default icon for component type
|
|
const getDefaultIcon = (type) => {
|
|
const icons = {
|
|
'text': 'material-symbols:text-fields',
|
|
'textarea': 'material-symbols:article-outline',
|
|
'number': 'material-symbols:counter-1-outline',
|
|
'email': 'material-symbols:mail-outline',
|
|
'select': 'material-symbols:arrow-drop-down-circle-outline',
|
|
'checkbox': 'material-symbols:check-box-outline',
|
|
'radio': 'material-symbols:radio-button-checked-outline',
|
|
'heading': 'material-symbols:title',
|
|
'paragraph': 'material-symbols:text-snippet-outline',
|
|
'file': 'material-symbols:upload-file-outline',
|
|
'button': 'material-symbols:smart-button'
|
|
};
|
|
return icons[type] || 'material-symbols:add';
|
|
};
|
|
|
|
// Handle JSON file import
|
|
const handleJsonImport = async (event) => {
|
|
const file = event.target.files[0];
|
|
if (!file) return;
|
|
|
|
loading.value = true;
|
|
|
|
try {
|
|
const reader = new FileReader();
|
|
reader.onload = async (e) => {
|
|
try {
|
|
const importedJson = JSON.parse(e.target.result);
|
|
|
|
// Validate imported JSON structure
|
|
if (!importedJson.formName || !Array.isArray(importedJson.components)) {
|
|
throw new Error('Invalid form JSON structure. Must include formName and components array.');
|
|
}
|
|
|
|
// Create the form in the database using the import API
|
|
const response = await fetch('/api/forms/import', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify(importedJson)
|
|
});
|
|
|
|
const result = await response.json();
|
|
|
|
if (result.success) {
|
|
// Refresh the form list
|
|
await loadForms();
|
|
toast.success(`Form "${importedJson.formName}" imported successfully`);
|
|
} else {
|
|
throw new Error(result.error || 'Failed to import form');
|
|
}
|
|
} catch (err) {
|
|
console.error('Error processing imported JSON:', err);
|
|
toast.error(`Failed to import form: ${err.message}`);
|
|
} finally {
|
|
loading.value = false;
|
|
// Reset file input
|
|
event.target.value = '';
|
|
}
|
|
};
|
|
|
|
reader.onerror = () => {
|
|
toast.error('Error reading file');
|
|
loading.value = false;
|
|
event.target.value = '';
|
|
};
|
|
|
|
reader.readAsText(file);
|
|
} catch (error) {
|
|
console.error('Error importing form:', error);
|
|
toast.error('Failed to import form: ' + error.message);
|
|
loading.value = false;
|
|
event.target.value = '';
|
|
}
|
|
};
|
|
|
|
// Export form as JSON
|
|
const exportForm = async (form) => {
|
|
try {
|
|
loading.value = true;
|
|
|
|
// Fetch the complete form data
|
|
const response = await fetch(`/api/forms/${form.id}`);
|
|
const result = await response.json();
|
|
|
|
if (result.success) {
|
|
const formData = result.form;
|
|
|
|
// Create the export JSON structure
|
|
const exportJson = {
|
|
formName: formData.formName,
|
|
formDescription: formData.formDescription || '',
|
|
formId: null, // Set to null for import as new form
|
|
components: formData.formComponents || [],
|
|
customScript: formData.customScript || '',
|
|
customCSS: formData.customCSS || '',
|
|
formEvents: formData.formEvents || {
|
|
onLoad: false,
|
|
onFieldChange: false,
|
|
onSubmit: false,
|
|
onValidation: false
|
|
},
|
|
scriptMode: formData.scriptMode || 'safe'
|
|
};
|
|
|
|
// Create and download the JSON file
|
|
const jsonBlob = new Blob([JSON.stringify(exportJson, null, 2)], {
|
|
type: 'application/json'
|
|
});
|
|
const url = URL.createObjectURL(jsonBlob);
|
|
|
|
const link = document.createElement('a');
|
|
link.href = url;
|
|
link.download = `${formData.formName.replace(/\s+/g, '-').toLowerCase()}_${new Date().toISOString().split('T')[0]}.json`;
|
|
link.click();
|
|
|
|
URL.revokeObjectURL(url);
|
|
toast.success(`Form "${formData.formName}" exported successfully`);
|
|
} else {
|
|
throw new Error(result.error || 'Failed to fetch form data');
|
|
}
|
|
} catch (error) {
|
|
console.error('Error exporting form:', error);
|
|
toast.error(`Failed to export form: ${error.message || 'Unknown error'}`);
|
|
} finally {
|
|
loading.value = false;
|
|
}
|
|
};
|
|
|
|
// Watch for JSON content changes to validate
|
|
watch(jsonContent, (newContent) => {
|
|
if (!newContent.trim()) {
|
|
jsonValidationMessage.value = '';
|
|
jsonIsValid.value = false;
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const parsed = JSON.parse(newContent);
|
|
|
|
// Validate basic structure
|
|
if (!parsed.formName) {
|
|
jsonValidationMessage.value = 'JSON is valid but missing required "formName" field';
|
|
jsonIsValid.value = false;
|
|
return;
|
|
}
|
|
|
|
if (!Array.isArray(parsed.components)) {
|
|
jsonValidationMessage.value = 'JSON is valid but missing required "components" array';
|
|
jsonIsValid.value = false;
|
|
return;
|
|
}
|
|
|
|
jsonValidationMessage.value = `Valid form JSON with ${parsed.components.length} components`;
|
|
jsonIsValid.value = true;
|
|
} catch (error) {
|
|
jsonValidationMessage.value = `Invalid JSON: ${error.message}`;
|
|
jsonIsValid.value = false;
|
|
}
|
|
});
|
|
|
|
// Handle modal JSON file import
|
|
const handleModalJsonImport = async (event) => {
|
|
const file = event.target.files[0];
|
|
if (!file) return;
|
|
|
|
try {
|
|
const reader = new FileReader();
|
|
reader.onload = (e) => {
|
|
jsonContent.value = e.target.result;
|
|
// Reset file input
|
|
event.target.value = '';
|
|
};
|
|
reader.readAsText(file);
|
|
} catch (error) {
|
|
toast.error('Error reading file: ' + error.message);
|
|
event.target.value = '';
|
|
}
|
|
};
|
|
|
|
// Import from pasted JSON content
|
|
const importFromPastedJson = async () => {
|
|
if (!jsonContent.value || !jsonIsValid.value) {
|
|
toast.error('Please provide valid JSON content');
|
|
return;
|
|
}
|
|
|
|
loading.value = true;
|
|
|
|
try {
|
|
const importedJson = JSON.parse(jsonContent.value);
|
|
|
|
// Create the form in the database using the import API
|
|
const response = await fetch('/api/forms/import', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify(importedJson)
|
|
});
|
|
|
|
const result = await response.json();
|
|
|
|
if (result.success) {
|
|
// Refresh the form list
|
|
await loadForms();
|
|
toast.success(`Form "${importedJson.formName}" imported successfully`);
|
|
closeImportModal();
|
|
} else {
|
|
throw new Error(result.error || 'Failed to import form');
|
|
}
|
|
} catch (err) {
|
|
console.error('Error importing form:', err);
|
|
toast.error(`Failed to import form: ${err.message}`);
|
|
} finally {
|
|
loading.value = false;
|
|
}
|
|
};
|
|
|
|
// Close import modal and reset state
|
|
const closeImportModal = () => {
|
|
showImportModal.value = false;
|
|
jsonContent.value = '';
|
|
jsonValidationMessage.value = '';
|
|
jsonIsValid.value = false;
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
/* Custom transitions and animations */
|
|
.transition-colors {
|
|
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
|
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
transition-duration: 150ms;
|
|
}
|
|
|
|
.transition-shadow {
|
|
transition-property: box-shadow;
|
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
transition-duration: 150ms;
|
|
}
|
|
|
|
button:disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
/* Glassmorphism effect for cards */
|
|
.bg-white {
|
|
backdrop-filter: blur(10px);
|
|
}
|
|
|
|
/* Line clamp utility for description text */
|
|
.line-clamp-2 {
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
</style>
|