Каждый мало-мальски компетентный проект менеджер если и не знаком детально, то хоть краем уха, но все таки слышал о системе "гибких" подходов к разработке программного обеспечения. Речь идет об "Agile-методологиях", основанных на ценностях "Манифеста гибкой разработки программного обеспечения" и 12 принципах, лежащих в его основе.

Kanban — это один из самых популярных подходов к реализации принципов agile при разработке ПО (и не только). Методика предполагает обсуждение проблем в режиме реального времени и полную прозрачность всех рабочих процессов. 

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

И в этой статье я хочу рассказать вам об одном из комплексных виджетов библиотеки Webix, в котором реализованы ключевые принципы kanban-подхода. Мы поговорим о таком инструменте для управления проектами как JavaScript Kanban и его ключевых особенностях. Давайте разбираться как все устроено.

Что представляет собой Webix Kanban

Webix Kanban Board – это удобный и интуитивно понятный инструмент для управления agile-проектами. С его помощью вы сможете визуализировать и отслеживать рабочие процессы вашей команды, а также контролировать выполнение конкретных задач проекта.

Принципы работы

Работа виджета строится на основе специальных карточек, распределенных по столбцам и рядам на доске Kanban. Каждая карточка – это отдельная рабочая задача с определенным названием, описанием деталей, назначенными исполнителями, дедлайнами и другими не менее важными атрибутами. А каждый столбец представляет собой определенную стадию готовности той или иной задачи.

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

Стоит отметить, что Webix Kanban полностью написан на JavaScript и CSS. Вы сами определяете внешний вид доски и ее структуру, а также можете настроить виджет под специфические особенности именно вашего проекта. 

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

Функционал

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

В частности, вы можете управлять задачами (то бишь kanban-карточками) следующим образом:

• создавать, редактировать, копировать и удалять задачи 

• перемещать задачи между столбцами (меняя таким образом их статус)

• задавать теги и выставлять приоритет исполнения задач

• назначать ответственных исполнителей 

• настраивать и стилизовать содержимое карточек по своему усмотрению

• сортировать и фильтровать задачи по определенным параметрам

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

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

Как создать виджет с базовым функционалом

JavaScript Kanban является одним из комплексных виджетов библиотеки Webix. Его можно приобрести вместе с Pro версией библиотеки, как часть одного из лицензионных пакетов. Детали можно узнать на странице лицензирования.

Чтобы оценить на практике все достоинства и гибкость работы с Kanban (и не только), вы можете загрузить триальную Pro версию библиотеки. Она включает в себя все комплексные виджеты и доступна бесплатно в течении 30 дней. 

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

Учитывая тот факт, что Kanban построен на базе компонентов основной библиотеки, для инициализации виджета вам следует в первую очередь подключить ресурсы Webix.

<!-- Библиотека Webix -->
<script type="text/javascript" src="codebase/webix.js"></script>
<link rel="stylesheet" href="codebase/webix.css" type="text/css">

Дальше вам нужно указать соответствующие пути к .js и .css файлам самого Kanban Board.

<!-- Виджет Kanban Board -->
<script type="text/javascript" src="codebase/kanban.js"></script>
<link rel="stylesheet" href="codebase/kanban.css" type="text/css">

После того как вы подключили необходимые ресурсы, можете приступать к инициализации виджета. Для этого вам следует вызвать конструктор webix.ui(), передав ему объект с необходимыми конфигурациями в качестве параметра. 

А чтобы удостовериться в том, что код начнет выполняться после полной загрузки страницы, вызовите конструктор виджета внутри метода webix.ready(function(){ /* конструктор виджета */ }).

<body>
  <script>
    webix.ready(function(){
      <!-- Конструктор Kanban -->
      webix.ui({
        view:"kanban",
        cols:[...], 
        data:"cards_data"
      });
    });
  </script>
</body>

Теперь вы можете использовать базовый функционал Kanban и в дальнейшем настраивать его по своему усмотрению. А в браузере результат может быть таким:

Конфигурация Kanban

Kanban Board, как и много других комплексных виджетов Webix, является своего рода лейаут-конструктором. Он может состоять из нескольких отдельных компонентов, у каждого из которых есть собственные методы и свойства. С их помощью вы можете настраивать тот или иной элемент интерфейса и его поведение. 

Помимо API внутренних элементов, у виджета есть встроенные параметры, которые позволяют настраивать компонент и управлять им. Не лишним будет напомнить, что для конфигурации Webix виджетов используется декларативный подход, при котором все свойства и их значения указываются внутри обычного JSON объекта. 

Сам компонент объявляется через выражение view:"kanban". Помимо этого, вам следует указать параметры столбцов, в которых будут размещаться kanban-карточки, а также соответствующие данные для каждой из задач. Это минимальные настройки, необходимые для работы виджета. 

А теперь давайте рассмотрим более продвинутые конфигурации.

Структура лейаута

Webix Kanban – это своего рода лейаут-приложение. Вы можете определять любую удобную вам структуру, руководствуясь только требованиями проекта и здравым смыслом :). Виджет позволяет создавать сколько угодно карточек и столбцов, которые необходимы для эффективного управления задачами вашей команды. Давайте разберем несколько вполне возможных вариантов структуры лейаута Kanban Board для вашего проекта.

Столбцы прогресса

Традиционно, любая Kanban-доска должна состоять как минимум из 3 столбцов, по которым можно будет определить состояние задач проекта:

• Backlog - запланированные задачи

• In progress - выполняемые задачи

• Done - завершенные задачи.

Чтобы настроить соответствующие столбцы виджета, вам необходимо знать базовые принципы построения Webix лейаутов. В частности, для работы со столбцами у Kanban предусмотрено специальное свойство cols. В массиве этого параметра вы можете задать нужные конфигурации для каждого из столбцов.

Лейаут вышеупомянутой структуры компонента будет выглядеть следующим образом:

cols:[
  { 
    header: "Backlog",
    body: { view: "kanbanlist", status: "new" }
  },
  { 
    header: "In Progress",
    body: { view: "kanbanlist", status: "work" }
  },
  { 
    header: "Done",
    body: { view: "kanbanlist", status: "done" }
  }
]

Для каждого столбца вы можете указать шапку с названием через свойство header и его общие настройки в объекте свойства body. В этом объекте, вам следует определить желаемую структуру отображения карточек, задав свойству view один из следующих параметров:

• "kanbanlist" - карточки в столбцах расположены в виде списка (смотрите живой пример)

• "kanbandataview" - карточки в столбцах расположены в виде списка, который, в зависимости от свободного места, может состоять из нескольких рядов (смотрите живой пример)

• кастомный вариант. Вы можете разделить ваш список, добавив новый лейаут со столбцами/рядами или использовать tabview для переключения между списками (смотрите живой пример).

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

Заголовки столбцов

Для любого столбца вы можете задать стильный и функциональный заголовок. Реализуется это с помощью такой сущности как kanbanheader. В отличие от стандартного хедера, при клике по которому соответствующий столбец сворачивается (эффект аккордеона), kanbanheader позволяет добавлять новые карточки и может иметь специфический стиль. Лейаут столбца с таким заголовком будет выглядеть следующим образом:

cols:[
  { // параметры столбца
    rows:[
      { 
        view:"kanbanheader", // объявляем заголовок 
        label:"Backlog", // определяем название заголовка
        link:"new", // связываем заголовок со списком через его статус
        type:"sub" // добавляем компактную стилизацию
      },
      { 
        id:"new", // определяем ID списка 
        view:"kanbanlist", // объявляем список
        status:"new" // указываем статус списка
      }
    ]
  },
  ...
]

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

Живой пример

Вложенные столбцы

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

 Живой пример

Зоны ответственности (swimlanes)

Допустим, вы занимаетесь разработкой программного обеспечения. На вашем проекте трудятся не покладая рук команда дизайнеров и команда программистов. Чтобы визуально разделить зону ответственности каждой из команд, вы можете добавить kanban-столбцам соответствующие секции.

Для реализации подобных зон ответственности в Kanban Board необходимо задать комплексное значение для свойства status.

К примеру, давайте посмотрим как добавить такие разделения для столбцов "In progress" и "Done", чтобы воочию лицезреть, над какими задачами трудятся дизайнеры и программисты на текущий момент времени, и какие задачи уже завершены обеими командами. Структура лейаута будет следующей:

view: "kanban",
cols:[
  {
    header: "In progress",
    body: { 
      rows: [
        { view: "kanbanheader", label: "Development", type: "sub" },
        { view: "kanbanlist", status: { status: "work", team: 1 } },
        { view: "kanbanheader", label: "Design", type: "sub" },
        { view: "kanbanlist", status: { status: "work", team: 2 } }
      ]
    }
  },
  { 
    header: "Done",
    body: { 
      rows: [
        { view: "kanbanheader", label: "Development", type: "sub" },
        { view: "kanbanlist", status: { status: "done", team: 1 } },
        { view: "kanbanheader", label: "Design", type: "sub" },
        { view: "kanbanlist", status: { status: "done", team: 2 } }
      ]
    }
  }
],
data:cards_data

Для распределения зон ответственности мы задаем комплексный статус в объекте свойства status столбца. Кроме самого статуса, нам нужно указать ключ соответствующей команды (Development или Design) через свойство team.

Эти же ключи нам следует прописать и в объекте данных каждой карточки:

const cards_data =[
  { id: 1, status: "work", team: 1, text: "Kanban tutorial",... },
  { id: 2, status: "work", team: 2, text: "New skin",... },
  { id: 3, status: "done", team: 1, text: "Sidebar options",...  },
  { id: 4, status: "done", team: 1, text: "Toolbar controls",... },
  // другие данные
];

А в браузере результат будет следующим:

Живой пример

Параметры карточек

А теперь давайте поговорим непосредственно о карточках, с помощью которых вы и будете управлять задачами на вашем проекте. Каждая kanban-карточка может содержать разный набор элементов в зависимости от ее данных и установленных параметров виджета. 

Помимо названия задачи, для любой карточки вы можете задать следующие элементы:

• теги 

• приоритет 

• комментарии 

• назначенные исполнители

• прикрепленные файлы.

Теги

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

Чтобы создать теги, вам следует указать свойство tags в объекте конфигурации и присвоить ему массив с соответствующими данными:

{
  view: "kanban",
  ...,
  tags: [                      
    { id: 1, value: "JavaScript" },   
    { id: 2, value: "PHP" },     
    { id: 3, value: "Python" },
    { id: 4, value: "C++" }      
  ],
  data: cards_data
} 

А в данных самих карточек вам нужно указать массив с ID необходимых тегов:

const cards_data = [
  { id: 1, status: "new", text: "Task 1", tags: [1] },
  { id: 2, status: "work", text: "Task 2", tags: [2,4] },
  ...
]; 

Результат в браузере будет таким:

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

Приоритет

Для успешного и своевременного завершения проекта, очень важно правильно расставить приоритеты выполнения задач. Webix Kanban реализует такую возможность с помощью цветных вертикальных линий на левой границе каждой карты.

Предположим, вы хотите разделить приоритет выполнения задач на три уровня срочности:

• высокий - красная линия

• нормальный - зеленая линия

• низкий - оранжевая линия.

Для этого, в объекте конфигурации виджета необходимо задать свойству colors массив с объектами данных для каждого цвета:

view: "kanban",
...,
colors: [
  { id: 1, value: "Urgent", color: "red" },                                 
  { id: 2, value: "Normal", color: "green" },
	{ id: 3, value: "Low", color: "orange" }    
],
data: cards_data

Вы также можете изначально указать приоритет каждой карточки, задав необходимый цвет в объекте ее данных через свойство color: 

const cards_data = [
  { id: 1, status: "new", text: "Task 1", color: "orange" },
  { id: 2, status: "work", text: "Task 2", color: "green" },
  { id: 3, status: "done", text: "Task 3", color: "red" },
  …
];

Результат в браузере будет таким:

Комментарии

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

Чтобы подключить комментирование, вам следует задать свойству comments значение true. Если же нужно отобразить комментарии сразу после инициализации виджета, задайте соответствующие данные в массиве свойства comments объекта данных карточки:

const cards_data = [
  { id: 1, status: "new", text: "Task 1", comments: [
    { id: 1, user_id: 4, date: "2018-06-14 23:01", text: "No worry, just wait"},
    { id: 2, user_id: 5, date: "2018-06-14 22:01", text: "Ok, I'm waiting"}
  ] 
  },
  { id: 2, status: "work", text: "Task 2" },
  { id: 3, status: "done", text: "Task 3" }
]; 

Результат в браузере будет таким:

Назначения

Для работы над каждой задачей вы можете назначить ответственного сотрудника. Здесь стоит отметить, что у виджета есть ограничения по количеству назначений. Исходя из этого, на одну задачу вы можете назначить только одного исполнителя.

Чтобы добавить сотрудников на ваш проект, в объекте конфигураций виджета вам нужно прописать свойство users и присвоить ему массив с данными соответствующих работников:

view: "kanban",
...,
users:[
  { id: 1, value: "Margaret Atwood", image: "imgs/matwood.jpg" },
  { id: 2, value: "Fannie Flagg", image: "imgs/fflagg.jpg" },
  { id: 3, value: "Irvine Welsh", image: "imgs/iwelsh.jpg" }
]

Теперь вы можете назначать этих людей на то или иное задание через редактор карточки. Но есть путь и попроще. Чтобы делать назначения прямо в карточке, в объекте конфигураций вам следует указать параметр userList: true.

Результат в браузере будет таким:

Прикрепленные файлы

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

Чтобы это реализовать, вам нужно указать путь к скрипту для загрузки файлов через свойство attachments:

view: "kanban",
attachments: "server/upload",
...
data: cards_data

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

Если же нужно отобразить заданные ранее вложения сразу после инициализации виджета, задайте соответствующие данные в массиве свойства attachments объекта данных карточки:

const cards_data = [
  { id: 1, status: "new", text: "Task 1", attachments: [
      { id: 2, link: "./server/files/image001.jpg", size: 85919 },
      { id: 3, link: "./server/files/image002.jpg", size: 105981 }
    ]
  },
  // другие данные
];

Результат в браузере будет таким:

Операции с карточками

Некоторые операции с карточками вы можете выполнять через их контекстное меню, а именно: открыть редактор, скопировать или удалить карточку. По умолчанию, иконка вызова меню не отображается. Чтобы ее активировать, в объекте конфигурации вам следует указать параметр cardAction: true.

По желанию, вы можете добавить кастомные операции с карточками. Более детально об этом читайте в соответствующей статье документации.

Редактор карточек

Параметры любой карточки виджета можно изменить с помощью специального редактора. Открывается он при двойном клике по карточке или при клике по иконке редактирования.

По умолчанию редактор неактивен. Чтобы его подключить, вам следует задать свойству editor значение true. Поля редактора будут зависеть от настроек виджета. Например, если в объекте конфигурации вы зададите свойства tags, users, attachments и colors, то в форме появятся соответствующие поля для управления этими сущностями.

Вы также можете изменить порядок встроенных полей формы или задать кастомные, определив их в массиве свойства editor. Стоит учесть, что названия (names) контролов должны совпадать с названиями свойств элементов данных Kanban.

view: "kanban",
...
editor: [
  { view: "text", name: "text", label: "Task" },
  { view: "multicombo", name: "tags", label: "" },
  {
    view: "richselect", name: "user",
    options: [
      { id: 1, name: "China Mieville" },
      { id: 2, name: "Helen Walsh" },
      { id: 3, name: "Jeff Noon" }
    ]
  }
]

Более детально кастомизация редактора описана в этой статье документации.

Загрузка данных

В настройках виджета вы можете указать массив данных карточек, которые нужно отобразить при инициализации. В зависимости от того, где хранятся эти данные (на клиенте или сервере), вы можете использовать либо свойства data или url, либо же методы parse() или load(). Давайте детальнее рассмотрим каждый из этих подходов. 

Загрузка данных на клиенте

По умолчанию, как и любой другой Webix виджет, Kanban принимает данные в формате JSON. Если данные хранятся на клиенте, вы можете передать их двумя способами: 

1. указать данные в конструкторе виджета через свойство data

2. запарсить данные через метод parse(). 

Объект данных должен содержать определенные поля, в которых вам нужно описать те или иные параметры карточки. 

У каждого элемента данных должен быть уникальный ID, а также набор определенных свойств:

• status - статус элемента, который определяет в каком списке будет отображаться элемент (обязательный параметр)

• text - название элемента (задачи)

• tags - список тегов через запятую или массив их ID (если данные для тегов представлены в отдельном наборе данных)

• $list - индекс списка, в который помещен элемент

• comments - список комментариев или массив их ID (если данные для комментариев представлены в отдельном наборе данных)

• color - цвет приоритета 

• user_id - ID пользователя, которому назначена задача

• attachments - список файлов, прикрепленных к карточке.

Объект данных карточки может выглядеть примерно так:

const cards_data = [
  {
    "id": 2,
    "status": "in progress",
    "text": "Performance tests",
    "tags": [1],
    "$list": 1,
    "comments": [2,3],
    "color": "#FE0E0E",
    "user_id": 5,
    "attachments": [
      { id: 2, link: "./server/files/image001.jpg", size: 85919 },
      { id: 3, link: "./server/files/image002.jpg", size: 105981 }
    ]
  },
  {...}
];

Вы можете задать этот объект свойству data в конструкторе виджета:

{
  view: "kanban",
  ...
  data: cards_data
} 

или передать его методу parse() в качестве параметра:

{
  view: "kanban",
  id: "kanban_id",
  ...
}

$$("kanban_id").parse(cards_data); 

Загрузка серверных данных

Если вы хотите загрузить данные, которые находятся на удаленном сервере, вы можете указать путь к нужному файлу или скрипту через свойство url виджета:

{
  view: "kanban",
  url: "cards_data.js",
  ...
}

или загрузить данные через метод load(), передав ему ссылку на файл в качестве параметра:

{
  view: "kanban",
  id: "kanban_id",
  ...
}

$$("kanban_id").load("cards_data.js");

И здесь стоит учитывать, что виджет может принимать данные в различных форматах. Например, если вы планируете загружать данные в формате XML, то вам следует указать этот формат через свойство datatype в конструкторе компонента:

{
  view: "kanban",
  id: "kanban_id",
  url: "cards_data.xml",
  datatype: "xml",
  ...
}

или же передать его вторым параметром при загрузке через метод load()

$$("kanban_id").load("cards_data.xml", "xml");

Локализация Kanban

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

Как изменить текущую локаль

Названия лейблов текущей локали находятся в объекте webix.i18n.kanban. Вы можете задать переводы для таких элементов виджета как:

• кнопки и лейблы в редакторе карточек

• опции в контекстном меню.

У объекта текущей локали будет следующая структура:

webix.i18n.kanban = {
  "copy": "Copy",
  "dnd": "Drop Files Here",
  "remove": "Remove",
  "save": "Save",
  "confirm": "The card will be deleted permanently, are you sure?",
  "editor": {
    "add": "Add card",
    "edit": "Edit card",
    "assign": "Assign to",
    "attachments": "Attachments",
    "color": "Color",
    "head": "Editor",
    "status": "Status",
    "tags": "Tags",
    "text": "Text",
    "upload": "Upload"
  },
  "menu": {
    "copy": "Copy",
    "edit": "Edit",
    "remove": "Remove"
  }
};

Если вы планируете изменить лейблы текущей локали, вам следует задать для них соответствующие значения в объекте webix.i18n.kanban, а виджет поменяет их в интерфейсе. 

Как создать новую локаль

Во втором варианте вам нужно создать новый объект локали с аналогичной структурой через выражение webix.i18n.locales[localeN].kanban, а затем применить эту локаль к виджету. Внутри объекта вы указываете новые переводы для соответствующих ключей:

webix.i18n.locales["ru-RU"].kanban = {
  "copy": "Копировать",
  "dnd": "Бросайте файлы сюда",
  "remove": "Удалить",
  "save": "Сохранить",
  "confirm": "Вы собираетесь навсегда удалить эту карточку. Вы уверены?",
  "editor": {
    "add": "Добавить карточку",
    "edit": "Редактировать карточку",
    // другие лейблы
  },
  // другие лейблы
};

Новую локаль можно применить передав ее методу setLocale() объекта webix.i18n в качестве параметра:

webix.i18n.setLocale("ru-RU");

Живой пример

Заключение

В этой я рассказал вам о комплексном виджете JavaScript Kanban, его применении и главных особенностях. Как вы могли убедиться, это весьма функциональный и гибко настраиваемый компонент. Вы легко можете интегрировать его с любым удобным для вас фреймворком или библиотекой, а также настроить взаимодействие с серверной частью.

Данная публикация охватывает только малую часть всех возможностей виджета. Более детальную информацию о настройке и кастомизации Kanban вы найдете на страницах его документации.