Детальные возможности:


  • Перезагрузка страницы или смена проекта не должна сбрасывать информацию до первоначального состояния, все изменения должны сохранятся сразу после их внесения.
  • Задачи можно завершать нажав на "галочку" в углу.
  • У задач могут быть подзадачи. Они раскрываются нажав на иконку "ветки" в правом нижнем углу задачи.
  • Задачи можно перетаскивать между столбиками
  • У каждой задачи есть таймер. Нажав на него, начинает считаться время от нуля до остановки. (Считаем время затраченное на выполнение задачи). Иконка "Play" в карточке появляется при наведении, если у задачи есть подзадачи иконка "ветки" сдвигается влево. Если таймер активен, кнопка "Play" выделяется и остается в карточке даже без наведения. Общее время затраченное на задачу записывается в данные задачи и выводится в карточку рядом с аватаркой в укороченном формате (00ч 00м)
  • У задачи помимо затраченного времени есть запланированное время. (00ч 00м / 00ч 00м – читается как: затрачено 00ч 00м из запланированных 00ч 00м)
  • У задачи есть дедлайн. Если дата дедлайна в прошлом, она становится красной.
  • На задачу можно нажать для просмотра подробностей. Открывается "модальное окно" по правому краю экрана, и в нем видно ту же информацию, что и в карточке, но дополнительно видно описание и комментарии. Комментарии в каждой задаче уникальны. Модальное окно фиксировано по высоте экрана, если комментарии не помещаются, то их секция остается по высоте как на макете, но появляется скроллинг. Из детальной карточки можно завершить задачу или включить таймер выполнения задачи. Также там можно создать подзадачу, нажав на которую контент внутри модального окна изменится на контент подзадачи.
Описание задачи:
Ваша задача разработать страницу отрытого проекта с открытой вкладкой "Канбан" с возможностью создавать / удалять задачи в столбики, создавать / удалять столбики. В левом сайдбаре есть список проектов. Должна быть возможность переключаться между проектами, у каждого проекта должен быть свой уникальный набор столбцов и задач в них.
Опционально:
  • Наличие CSS-анимаций при перемещении задач по столбикам, переключение проектов, открытие подробностей задачи.
Условия и требования:
  • Все данные для построения приложения (проекты, задачи, столбики) можно хранить в произвольном формате локально.
  • Если требования к кнопке или элементу не прописаны в детальных подробностях к тестовому заданию – просто сверстать без возможности нажать.
  • Если не нарисовано состояние элемента можно сделать произвольные незначительные доработки (поменять цвет или текст).

Тестовое задание
для фронтенд разработчика

Тестовое задание для фронтенд разработчика.
Разработайте SPA приложение задачника с доской "Канбан"
Макеты: Смотреть