Тестовое задание для Front-end разработчика

Ссылка на деплой

Проект представляет собой веб-приложение для управления организациями. Включает страницу с таблицей организаций, страницу добавления новой организации и страницу просмотра/редактирования информации об организации.

• Сортировка и пагинация таблицы организаций.
• Добавление, редактирование и удаление организаций.
• Загрузка фотографий организации с возможностью замены или - удаления.
• Использование технологий Vue.js, Vuetify, Vue Router, Pinia, Axios, Vite.

1. Страница с таблицей организаций:

• Сортировака
• Кнопки Добавления, Редактирования и Удаления организации

2. Страница добавления

• Добавление организации
  • Поля ввода
  • Загрузка фото
    • промотор добаляемого фото
    • отмена загрузки удаляет уже загруженное фото с сервера
• При успешном добалении перенаправляется на страницу организации
• Кнопка в Назад в шапке

3. Страница Огранизации

• Форма для чтения
  • Поля ввода
    • Загрузка фото
      • Замена
      • Добавление (если фото не добавлялось ранее)
      • Промотор добаляемого фото
      • отмена загрузки удаляет уже загруженное фото с сервера
• Просмотр Имеющегося фото
• Кнопка редактирования
• Кнопки согхранения и отмены
• Кнопка в Назад в шапке

4. BASE_URL хранится в фойле .env

• Имеется баг пагинации таблицы (при переходе, обновлении, или вводе в адресную строку вручную)
  Возможное решение _(не реализовано)

  Применить виртуальную таблицу VDataTableVirtual, для управления пагинацией добавить отдельный компонент формы VForm для управления, стейты хранить в Pinia

• Vue-3 - Прогрессивный JavaScript-фреймворк для создания пользовательских интерфейсов.
• Vuetyfy - Библтиотека компонентов Vue.js, предоставляющая готовые компоненты и инструменты для создания красивых и функциональных веб-приложений.
• Vue Router - Официальная библиотека маршрутизации для Vue.js.
• Pinia
• Axios - Библиотека для выполнения HTTP-запросов из браузера или Node.js.
• Vite - Быстрый инструмент сборки для разработки веб-приложений.

• TypeScript - статическая типизация для JavaScript
• ESLint - Инструмент статического анализа кода для обнаружения ошибок.
• Prettier - Инструмент для форматирования кода
• Sass - Препроцессор CSS
• Firebase - это платформа разработки мобильных и веб-приложений от Google, предоставляющая различные инструменты и сервисы для создания и развития приложений.

• npm install - Установка зависимостей
• npm run dev - запуск проекта для разработки
• npm run build - Проверка типизации, компиляция и минификация и сборка для продакшена
• npm run lint - Проверка кода на соответствие стандартам с помощью ESLint.
• format - Форматирование кода с помощью Prettier.
• type-check - Проверка типов с помощью TypeScript без генерации файлов выходного кода.