FormaFlow Frontend

Современный Vue 3 frontend для системы построения и управления формами FormaFlow.

Особенности

• ✨ Vue 3 (Composition API) + TypeScript - Современная архитектура с сильной типизацией.
• 🎨 Tailwind CSS - Utility-first CSS для быстрого и гибкого дизайна.
• 🌓 Темная тема - Автоматическая и ручная поддержка тем.
• 🌍 Многоязычность (i18n) - Полная поддержка English и Russian.
• 📱 PWA & Mobile-first - Установка на рабочий стол и отличная работа на мобильных устройствах.
• 🔐 Secure Auth - Token-based аутентификация через Laravel Sanctum.
• 📊 Dynamic Forms - Конструктор форм с поддержкой различных типов полей (текст, число, boolean, select и др.).
• 📈 Analytics - Интерактивные графики и отчеты на базе Chart.js.

Требования

• Node.js >= 18.0.0
• npm >= 9.0.0 (или yarn)

Быстрый старт

# Установка зависимостей
npm install

# Настройка переменных окружения
cp .env.example .env

# Запуск в режиме разработки
npm run dev

Доступные команды (Makefile)

В проекте настроен Makefile для удобства разработки:

• make dev - запуск dev-сервера (yarn dev)
• make build - сборка проекта для production
• make lint - проверка кода линтером
• make test - запуск тестов
• make deploy - деплой последней версии на сервер

Структура проекта

src/
├── api/             # Axios инстанс и описание API эндпоинтов
├── components/      # Vue компоненты
│   ├── common/      # Общие UI-компоненты (AppButton, AppInput, AppCheckbox)
│   ├── forms/       # Компоненты конструктора форм
│   ├── entries/     # Компоненты для работы с записями
│   └── dashboard/   # Виджеты дашборда
├── composables/     # Shared logic (useForms, useEntries, useAuth)
├── locales/         # JSON файлы переводов
├── stores/          # Pinia stores (auth, settings)
├── views/           # Страницы (Маршруты)
└── assets/          # Глобальные стили и изображения

API Эндпоинты

Приложение взаимодействует с backend API v1. Основные группы эндпоинтов:

• POST /register, POST /login - Управление доступом.
• GET /forms - Работа с формами и полями.
• GET /entries - Работа с ответами пользователей.
• GET /dashboard, POST /reports - Получение данных для аналитики.

Разработка

Добавление новых полей в формы

При добавлении нового типа поля в EntryEditView или EntryCreateView, используйте компоненты из src/components/common/. Например, для логических значений используйте AppCheckbox:

<AppCheckbox
  v-model="data[field.id]"
  :label="field.label"
  :required="field.required"
/>

Деплой

Сборка и доставка кода осуществляется командой:

make deploy

Команда собирает проект и обновляет файлы на целевом сервере.

Тестирование

npm run test:unit

Лицензия

MIT License