stepan10andreev / CRM_web-interface

Web-интерфейс для СRМ системы c возможностью: просмотра списка людей в виде таблицы. добавление нового клиента, изменение информации о существующем клиенте

CRM_web-interface

Web-интерфейс для СRМ системы c возможностью:

1. Просмотра списка людей в виде таблицы
2. Добавление нового клиента
3. Изменение информации о существующем клиенте
4. Сортировка клиентов по различным параматерам
5. Поиск клиента в таблице через поисковый запрос

Интерфейс представляет из себя страницу, на которой располагается таблица клиентов, кнопка для добавления нового клиента, а также шапка с логотипом компании и строкой поиска клиентов. Приложение реализовано с использованием js-модулей и API сервера. Для запуска сервера в корне репиозитория в папке crm-backend имеется файл README.md, в котором имеется документация по запуску сервера и работу с API.

Структура приложения.

1. Таблица со списком клиентов имеет следующие колонки:

• ID клиента
• ФИО (Фамилия Имя Отчество)
• Дата и время создания
• Дата и время последнего изменения
• Контакты
• Действия (кнопки): "Изменить клиента" и "Удалить клиента"

2. Сортировка. Все заголовки колонок, кроме контактов и действий, можно нажать, чтобы установить сортировку по соответствующему полю. Первое нажатие устанавливает сортировку по возрастанию, повторное - по убыванию. По умолчанию должна быть установлена сортировка по возрастанию по ID. Состояние сортировки корректно отображается в виде соответствующих ИКОНОК около заголовков.

3. Поиск клиента с автодополнением. Имеется поле для ввода поискового запроса. При вводе текста в поле для поиска происходит запрос данных из АРI с введённым поисковым запросом. Запрос отправляется только по прошествии ЗООмс с момента последнего ввода символа в поле (то есть, пока пользователь не завершит ввод поискового запроса). После ввода поискового запроса список найденных элементов появляется непосредственно под полем ввода без изменения самой таблицы. При выборе одного из найденных элементов происходит прокрутка страницы до соотвествубщего клиента в таблицы и клиент подсвечивается зеленым фоном.

4. Отображение контактов клиента в колонке с контактами - для различных контактов (VК, Fасеbook, телефона и email) отображаются соответствующие иконки. Все остальные виды контактов отображаются с одинаковой иконкой (с "человечком"). При наведении курсора на контакт появляется всплывающая подсказка с типом и значением этого контакта в формате: "Тип: значение" (кроме типа контакта - "телефон", в таком случае всплывающая подсказка содержит только значение телефона)

5. Действия над клиентами. При нажатии на кнопку "Изменить" появляется модальное окно с формой изменения клиента (о форме редактирования ниже 6 пункт). При нажатии на кнопку "Удалить" появляется модальное окно с подтверждением действия. Если пользователь подтверждает удаление, то человек удаляется из списка. Также на сервер с АРI посылается запрос на удаление.

6. Формы создания или редактирования данных о клиентах. Форма создания клиента открывается в виде модального окна по нажатию на кнопку "Добавить клиента", находящуюся под таблицей. Форма редактирования клиента открывается по нажатию на кнопку "Изменить" в таблице клиентов. Форма создания клиента открывается сразу с незаполненными полями. При изменении клиента перед открытием формы из АРI запрашиваются свежие данные клиента, только после получения этих данных открывается форма. При этом форма заполнена соответствующими данными клиента.

7. Контакты клиента. В блоке контактов предусмотрена возможность добавления до 10 контактов включительно. Для этого в форме создания/редактирования клиента имеется кнопка "Добавить контакт". Если у клиента уже добавлено 10 контактов, кнопка не отображается. Тип контакта выбирается ИЗ выпадающего списка с выбором ОДНОГО из значении:

• Телефон
• email
• Fасеbook
• VК Каждый контакт можно удалить из списка по нажатию на крестик справа от него.

8. Кнопки. Под формой располагается кнопка "Сохранить". Кнопка "Удалить клиента" добавляется, если это форма редактирования существующего в базе данных человека. По нажатию на кнопку удаления клиент удаляется из таблицы, а на сервер АРI отправляется запрос на удаление клиента. Модальное окно с формой закрывается. По нажатию на кнопку сохранения изменения отправляются на сервер. Далее в зависимости от ответа сервера:

• Если сохранение прошло успешно (статус ответа 200 или 201), модальное окно с формой закрывается. При этом таблица отрисовывается заново с новым запросом на список людей
• Если при сохранении произошла ошибка (статус ответа 422, 404 или 5хх), то нужно отображается сообщения об ошибках, полученные в ответе сервера, над блоком с кнопками. При этом если ответ сервера не удалось разобрать или в нём нет сообщений об ошибке, отображается сообщение по умолчанию "Что-то пошло не так...". По нажатию на кнопку с крестиком, кнопку отмены или фон модального окна модальное ОКНО закрывается.

Дополнения:

1. Анимация открытия модального окна путем смещение окна с формой сверху-вниз (свойство transform + выход из прозрачности)
2. Ссылка на карточку клиента: реализовано путем изменения hash страницы при открытии модального окна редактирования существующего клиента (так как оно содержит в себе всю инофрмацию о клиенте). При первичной загрузке страницы с указанной hash-частью также сразу открывается нужное модальное окно с клиентом (карточка клиента)
3. Валидация формы перед отправкой на сервер.

• Имя и фамилия обязательны для заполнения
• Каждый добавленный контакт должен быть полностью заполнен
• В текстовые поля ввода - ввод только букв (кириллица)
• Поля ввода с цировыми знаечниями - ввод только цифр При неуспешной проверке над кнопкой отображаются соответствующие сообщения об ошибках, а также подсвечиваются ошибочные поля красной границей (добавление атрибута aria-invalid). Отправка ошибочных данных на сервер не происходит. Поле перестает подсвечиваться как ошибочное, как только пользователь начал изменять в нём значение.

4. Индикация загрузки. Реализована в виде спиннера. При формирвоании таблицы клиентов на основе загруженных данных - индикатор только в прелелах таблицы, при сохранении/изменении клиента - индикатор с полупрозрачным фоном на всю страницу (чтобы пользователь не смог осуществить активные дйествия пока не завершимлось взаимодействие с сервером), и добавлен инидкатор к кнопке "Изменить" (пока отправляются данные на сервер при изменении).