Задача выполнена на главном экране, без применения роутинга.
Для хранения данных после перезагрузки - использовал localStorage с ключом form_data.
Код расположен в следующих местах:
- src/main.ts - Настройка PrimeVue, темы.
- src/App.vue - Родительский компонент.
- src/stores/form.ts - Pinia-стор для задачи.
- src/components/FormRow.vue - Дочерний компонент. Строки для списка учетных записей.
Используемые зависимости:
- TypeScript
- Vue.JS 3, Composition API
- Pinia
- PrimeVue, PrimeIcons
Dev:
- Eslint, Prettier, Vite
IDE:
- Webstorm
- npm install
- npm run dev
https://docs.google.com/document/d/1sOLmhOWItVELDHl4AQ75PrzfByj5uK02uH2QMjQ0xuM/edit?tab=t.0
Тестовое задание для Vue Frontend Developer Необходимо реализовать форму управления учетными записями.
Время на выполнение задания, максимум 2 дня.
Результатом выполнения работы, является ссылка на github/gitlab репозиторий с историей коммитов.
Макет представлен для примера, главное соблюдать тз, структуру и расположение полей, визуальное отображение можно сделать по своему предпочтению.
Стек:
- Vue.js 3 + Composition API (фреймворк)
- TypeScript (язык)
- Pinia (стейт менеджер)
- Любой UI фреймворк на выбор.
Форма состоит из:
- Заголовка и кнопки добавления учетной записи.
- Подсказки для поля метка.
- Списка учетных записей с лейблами полей.
Учетная запись состоит из:
- Метка - Необязательное поле к заполнению. Максимум 50 символов. В поле вводятся текстовые метки, через знак ;
- Тип записи - Выпадающий список. Допускаются выборы из заранее предопределенных вариантов:
- LDAP - При выборе этого типа - поле "Пароль" скрывается и сохраняется как null
- Локальная - При выборе этого типа - поле "Пароль" показывается и сохраняется как введенное значение
- Логин - Обязательное к заполнению. Максимум 100 символов
- Пароль - Обязательное к заполнению. Отображается в случае выбора значения "Локальная" в поле "Тип записи". Максимум 100 символов
- Кнопки удаления учетной записи.
Логика работы формы:
- По нажатию кнопки "+" в конец списка учетных записей, добавляется новая пустая запись, состоящая из: Метки, Типа записи, Логина, Пароля.
- При нажатии кнопки удаления, учетная запись должна полностью удалиться.
- По окончанию ввода значений в поля учетной записи (для текстовых - потеря фокуса, для селекта - изменение значения), происходит валидация обязательных полей. В случае валидности - учетная запись сохраняется/обновляется, в обратном, поля обозначаются красной обводкой.
- Все поля сохраняются в текстовом виде, кроме поле Метка. Оно должно преобразовываться в массив, где один элемент это строковое значение до ;. В массиве должен лежать объект, где поле text равно одному элементу метки - ({ text: элемент метки })
- Сохранение учетной записи должно происходить в стейт менеджер. При обновлении страницы, сохраненные учетные записи должны отображаться.