Моё решение тестового для Middle Front-end и почему важно ставить четкие цели.

🖖,
На днях мне прислали тестовое задание на позицию Middle Front-end Developer. Задание делала с помощью Vue. Были сложные моменты, в общем затратила несколько дней. В чем суть:

• Сверстать макет
• Используя данные в json, подставить их в шаблон
• На JS (чистый, либо vue.js или react) написать логику на обработку событий
• Сверстать и написать JS обработчики событий на фильтрацию контента

Пагинация.

1. Необходимо вывести первые 4 товара из data.json, разбив на страницы (на макете отображено больше товаров, это игнорируем)
2. На одной странице отображается по 4 товара.
3. Сформировать пагинатор (внизу страницы)
4. Учитываем, что при клике на другую страницу примененные фильтры не должны сбрасываться.
5. Отобразить общее кол-во товаров

Фильтрация.

1. У товара есть параметры: артикул (artnumber), название (name), бренд (brand), вес (weight, грамм), фасовка (quantity), цена (price), наличие на складе (stock: 1||0).
2. Необходимо сделать фильтры по параметру: бренд.
3. При применении фильтра — обновляем товары, учитывая пагинацию.
4. Нажимая на “Сбросить фильтры” — выводим все товары без фильтров, учитывая пагинацию.
5. Обновить отображаемое общее кол-во товаров (после применения фильтра)

Моё решение.

juliettswifty/pagination-and-filter-with-checkboxes-with-vue-js

1. В beforeCreate() я получаю запрос с сервера и записываю объект с товарами в массив json, чтобы не обращаться к серверу постоянно.
   И так же записываю данные в массив sorted для изменения и сортировки в дальнейшем.
   Далее в массив allBrands записываю уникальные значения брендов для того чтобы вывести их в наименованиях чекбоксов.
   Я уже понимаю как гибко выводить все необходимые фильтры без дополнительного кода для каждого фильтра, планирую потом доделать.
2. computed: orderedList() я динамически вывожу отсортированный массив, в котором вырезаю по изменяемым при клике на следующая или предыдущая страница переменным.
3. byBrand() я делаю сортировку при изменении значения чекбокса.
4. changeSelect() отображаю страницу в пагинации на которой мы находимся.
5. nextPage() срабатывает при нажатии на кнопку следующая страница, стоит проверка на последнюю страницу.
6. previousPage() срабатывает при нажатии на кнопку предыдущая страница, стоит проверка на первую страницу.
7. clearfilters() срабатывает при нажатии кнопки очистить фильтры, обновляем массив первоначальными значениями и очищаем массив с выбранными чекбоксами.

По поводу моего пассивного поиска работы.

В начале осени я поставила себе цель — найти работу до конца года. Несколько дней назад со мной связался потенциальный работодатель и предложил работу на позиции JavaScript Developer. Я обрадовалась, ведь как раз я всё больше углубляюсь в JS и мне хочется решать более сложные задачи. Предстояла работа на фронте с картами и библиотекой Leaflet.

Теперь расскажу что я вынесла из этого опыта 🤕

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

👉 Во-первых, напрягает работать без макета по скриншоту и без четкого ТЗ, где были бы описаны: функциональные требования, форматы и типы данных, ну и задокументированное API;

👉 Во-вторых, сложно внедряться в уже разрабатывающийся проект, особенно если у него нет внутренней документации и комментариев в коде;

👉 В третьих, карты это конечно интересно, но это пока не то в чём я хочу развиваться. Важно уметь оптимизировать код и логику, потому что они очень тяжелые и нельзя лишний раз загружать, то что уже загружалось и щедро сыпать запросами. Больше всего мне не понравилась библиотека, с которой мы работали, потому что у нее нет четкой документации по стилизации компонентов. Приходится через инспектор вытягивать вручную классы и менять их стили… 👹

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

https://eax.me/questions-to-ask-employers/
https://m.habrahabr.ru/company/icanchoose/blog/291790/
https://geekbrains.ru/posts/how_to_interview_boss_pt2
https://geektimes.ru/company/wirex/blog/273166/