React.js: Тренировочная задача (Redux, Saga)

Кратко о задаче

Требуется реализовать страницу, содержащую таблицу с перечнем товаров, по которым можно будет искать, редактировать их и добавлять новые.

Т.е. это только одна страница, но на ней довольно много всего

Подробнее

Использовать React/Redux

Данные можно хранить в файле в замоканом варианте (подгружать из файла в "стор" (хранилище Redux-а) изначальные
продукты, измненять данные достаточно только в сторе).

Цены товаров должны храниться как числа, а не как строки; всё форматирование — знаки
разделителей, знак валюты — должны происходить уже в коде.

внешний вид списка - учебная задача react

  • Таблица должна допускать сортировку по столбцам в прямом и обратном порядке при щелчке по заголовкам столбцов (знак в виде треугольника должен указывать направление сортировки).
  • Должна присутствовать возможность выполнять фильтрацию перечня товаров по подстроке в их наименовании (поиск), не зависимо от регистра.
  • Фильтр должен синхронизироваться с url (адресной строкой браузера) через search параметр (использовать react-router).
  • Поле «Имя товара» должно быть гиперссылкой, открывающей модальное окно с подробной
    информацией о товаре; аналогичная информация отображается при нажатии кнопки “Edit”.
  • Кнопка “Add new” должна позволять добавлять новые товары (стоит использовать то же окно, что и для редактирования).
  • В столбце с наименованием товара должно отображаться его количество — Count (на картинке оно равно 5).
  • Кнопка “Delete” перед удалением товара должна выводить модальное окно (сделать его
    самостоятельно, встроенное в браузер не использовать) с подтверждением удаления этого
    конкретного товара (например, «Вы действительно хотите удалить “Товар 2”?»).

    При этом экран за модальным окном затемняется и его элементы становятся невосприимчивыми к пользователю.

Форма редактирования товара можно выглядеть примерно так:
редактирование товара - учебная задача react

По форме редактирования/создания товара:

  • Проверка пользовательского ввода (т.е. «валидация») в модальном окне редактирования товара
    должна происходить сразу.
  • Для валидации можно использовать библиотеку ajv.
  • Некорректно заполненное поле имеет красную рамку, а справа от него отображается текст,
    поясняющий причину ошибки (например, "Длина поля не может превышать 15 символов");
  • Признак некорректности появляется только после получения и потери полем фокуса, в т.ч. при сохранении формы ввода (т.е. когда началось редактирование - убираем сообщение и рамку)
    Изначально незаполненные поля также некорректными не считаются (не нужно выводить сообщения о проблемах);

    При устранении ошибки индикация некорректного поля (рамка и текст) должна пропадать.

Подробнее о работе конкретных полей в модальном окне можно посмотреть ниже.

Name:

  • Поле не может быть пустым
  • Поле не может состоять только из пробелов
  • Максимальная длина 15 букв

Email:

  • Соответствие введённого текста формату e-mail

Count:

  • В поле можно вводить только цифры.
  • Недопустимые символы нельзя ни вводить, ни вставлять из буфера обмена

Price:

  • При редактировании значения поля его содержимое отображается и вводится как число (12123343.25)
  • При завершении редактирования (когда поле теряет фокус ввода) значение должно форматироваться как валюта США: разряды отделены запятыми, в начале стоит знак доллара ($12,123,343.25)

Delivery:

  • В комбобоксе есть 3 варианта выбора:
    • Пусто – доставки нет, справа обе прямоугольных области прячутся
    • Страна – отображается список радиокнопок со странами, список городов прячется
    • Город - отображается список чекбоксов со списком городов, список стран прячется
  • Пункт «Город» недоступен для выбора до тех пор, пока не выбрана страна
  • Список городов всегда соответствует выбранной стране
  • У товара либо не должно быть доставки совсем, либо должны быть выбраны и страна, и
    список городов к ней. (Ситуация, когда выбрана страна, но не выбрано ни одного города
    недопустима).