Реализовать адресную книгу
Для начала у пользователя должна быть возможность авторизоваться, то есть при загрузке страницы появляется окно. Если введенные данные пользователя совпадают с уже имеющимися, то осуществить вход, если такого пользователя нет, то предложить создать учетную запись (автоматическая регистрация) после чего осуществить автоматический вход. (Проверка происходит через localStorage) Если какие-то данные для входа не совпали, например, пароль, то вывести об этом соответствующее сообщение.
Соответственно должена быть и кнопка Выход, для завершения текущего сеанса. То есть когда юзер вошел, его данные записались в localStorage и условно выдался уникальный токен, к кторому привязывается таблица контактов которые он создает(его адресная книга), она так же храниться в localStorage привязанная к его токену. При следующем входе если логин и пароль совпали, то подтягивается таблица с ранее созданными контактами этого юзера. Соответственно должена быть и кнопка Выход, для завершения текущего сеанса.
Каждая запись книги содержит информацию:
- Фамилия (обязательное поле)
- имя (обязательное поле)
- страна
- город
- email (обязательное поле)
- номер телефона (обязательное поле)
- место работы (название компании)
Пользователь должен иметь возможность добавления, редактирования, удаления, просмотра списка всех записей в таблице (поля фамилия и имя, email и номер телефона) и возможность просмотра расширенной информации о выбранной записи (модальное окно). При создании редактировании записи, обеспечить проверку на валидность вводимых данных.
Если email или телефон контакта при создании совпали с уже имеющимся в базе (массиве), то вывести об этом сообщение, и спросить провести мерджинг данных – дозаполнить старую запись новым данным, или создать новый контакт (если совпадение два или более то иметь возможность выбора, перезаписи записи ).
Также обеспечить возможность сортировки и фильтрации записей в списке (для фильтра по полям страна и город использовать select) Фильтры страны и города должны быть в основной таблице, а данные о них видны, только в модалке (если они есть).
В первом столбце таблицы напротив каждой записи есть checkbox, что обеспечивает возможность выбора нескольких записей, которые потом можно удалить вместе (например, как в gmail – выбрали несколько писем, и удалили их целой группой). При удалении записи (-ей) обеспечить подтверждение действия (например, через confirm).
Также должна быть кнопка Экспорт, которая сохраняет выбранные данные (через те же checkbox в таблице) в сsv файл.
Реализовать сохранения записей между сеансами (в local storage). Соответственно, здесь сохраняем данные и о самих пользователях, и об их контактах (адресных книжках).
- Список городов и стран подтягивать с google place autocomplete.
- реализовать кнопку Импорт данных, которая доступна в случае, когда в таблице нет данных, при нажатии на эту кнопку в таблицу добавляются записи о контактах с json файла.
- Обязательно реализовывать задачи нужно на ES6 и через ООП, без сторонних библиотек и фреймворков.
В качестве HTML / CSS фреймворка использовать Bootstrap (важно), красота верстки не является приоритетной.
Снизу фото набросков готовой верстки (при необходимости могу сбросить)