Фильтры DAM для Leroy Merlin

Сервис DAM (Digital Asset Management) это медиабиблиотека для хранения, поиска и загрузки цифрового контента, который связан с товарами в магазине. Фильтр из ДАМа также транслируется в подсервисы «Валидация товаров», «Поиск» и «Фотокоординатор» из которого и начинает свой путь весь цифровой контент, финальной остановкой которого является интернет-магазин Леруа Мерлен.
Этими сервисами пользуются сотрудники для решения самых разных задач. Контент-менеджер следит за товарами на протяжении всей их жизни в ДАМе, фотокоординатор отправляет заявки на фотосъемку, а сотрудники фотостудии следят за заказами и загружают фотографии, которые затем валидирует контент-менеджер. Продавцы-консультанты не могут управлять но могут просматривать контент. Через сервис Поиск они находят дополнительные фото товара делятся ссылкой, скачивают себе на компьютер или показывают покупателю.
Все сотрудники и подрядчики используют сервис из разных мест, поэтому он живет в вебе. На данном этапе мобильной версии нет.
Главная задача фильтра – показать пользователю то самое что он ожидает за минимальное число шагов. Хороший фильтр он как боггарт из Гарри Поттера – принимает нужную форму в зависимости от того, кто перед ним стоит. Мой фильтр можно настроить как угодно пользователю.

До того как фильтр обрел свои финальные черты у него было несколько версий.

Все начиналось с простой задачи — поле для свободного поиска и пара селектов. По мере использования ДАМа появилась необходимость в более тонкой фильтрации. И ко всему к этому чрезвычайно разные потребности пользователей. Фильтр вырос и стало понятно, что один универсальный вариант для всех пользователей не подходит.
Появились 25 параметров, некоторые из них должны настраиваться индивидуально, поддерживать ввод нескольких тысяч переменных только в один параметр и иметь поиск и группировку внутри него.

Фильтр занимает весь экран, в нем сложно ориентироваться и весь акцент с результатов сместился на фильтр.

Так я и пришел к нынешней концепции, где каждый параметр независимо настраивается. С каждым параметром можно работать индивидуально: вставлять массив данных из Экселя, очищать значения только одного параметра. Список фильтров можно настраивать, удалять или добавлять в зависимости от задачи.

В настройках на боковой панели доступен полный список фильтров. В текущей версии нет авторизации, поэтому мы храним настройки фильтров в куках браузера.

После выбора нужных фильтров в шторке, они попадают в основную панель в хронологическом порядке. Это не всегда удобно. В голове у человека всегда свой порядок и хорошо, чтобы фильтр смог ему соответствовать. Для решения этой задачи реализовано перетаскивание элементов мышкой.

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

В зависимости от выбора режима «Дата AVS» (Дата после которой перестанут закупать физический товар на склад) блокируется либо становится доступным.

Хочется сказать и жили они долго и счастливо, но… ДАМ расширяется и требования к поиску становятся более изощренными. Понадобилась возможность фильтровать:

● от конкретной даты AVS до бесконечности;
● от бесконечности до конкретной даты AVS;
● выдача файлов с любой присвоенной датой;
● выдача файлов, не имеющих присвоенной даты AVS;
● выдача с промежутком дат и одновременно без присвоенной даты.

Предыдущее решение, когда эти хоть и зависимые параметры сосуществовали как соседи уже не годилось для решения данной задачи, поэтому подход был переосмыслен. В новом фильтре два параметра соединили в один. Стало удобнее пользоваться:

● сэкономили время на перемещение между фильтрами;
● фильтр занимает меньше места в панели;
● стало возможным задавать любые сложные зависимости, которые требуются.

В некоторых фильтрах Леруа живут выпадающие списки со множественным выбором и с несметным числом элементов.
Для удобства был добавлен поиск внутри выпадающего списка, но и этого оказалось недостаточно. Бывают ситуации когда нужно «отжать» лишнее, а держать в голове все предыдущие действия сложно. Для облегчения использования добавлена группировка на выбранное и не выбранное. Все отмеченные элементы перемещаются вверх и их можно быстро просмотреть.
Поиск функция удобная, но она требует помнить все подотделы по названиям. Чтобы упростить работу с большим количеством данных, добавляем группировку по отделам. Теперь достаточно вспомнить в каком отделе находится нужный подотдел и найти его глазами.

Если вам показалось что с этим фильтром мы можем делать все что захотим, то вам действительно показалось. Заказчик попросил добавить функцию инверсии выбранного одной кнопкой. Было сделано четыре варианта, но лучшее решение еще впереди)