Интеграция с Svelte
Это руководство предполагает знакомство с концепциями и паттернами Svelte. Для справки обратитесь к документации Svelte.
DHTMLX Kanban совместим с Svelte. Полный пример кода доступен на GitHub.
Создание проекта
Проект на Svelte можно настроить одним из двух способов:
- с помощью SvelteKit — рекомендуется
- с помощью Svelte и Vite (без SvelteKit) — выполните:
npm create vite@latest
Подробнее смотрите в документации Svelte.
Установка зависимостей
Назовите проект my-svelte-kanban-app. Перейдите в директорию приложения:
cd my-svelte-kanban-app
Установите зависимости и запустите dev-сервер с помощью одного из менеджеров пакетов:
- Для yarn:
yarn
yarn start
- Для npm:
npm install
npm run dev
Приложение запустится на адресе localhost (например, http://localhost:3000).
Создание Kanban
Остановите dev-сервер и установите пакет Kanban.
Шаг 1. Установка пакета
Скачайте пробный пакет Kanban и следуйте шагам, описанным в файле README. Пробная версия доступна 30 дней.
Шаг 2. Создание компонента
Создайте компонент Svelte, который монтирует Kanban и Toolbar. Добавьте новый файл Kanban.svelte в директорию src/.
Импорт исходных файлов
Откройте Kanban.svelte и импортируйте исходные файлы Kanban. Пути для импорта зависят от версии пакета:
- Для PRO-версии, установленной из локальной папки:
<script>
import { Kanban, Toolbar } from 'dhx-kanban-package';
import 'dhx-kanban-package/dist/kanban.css';
</script>
Если пакет поставляется с минифицированными исходными файлами, импортируйте CSS-файл как kanban.min.css.
- Для пробной версии:
<script>
import { Kanban, Toolbar } from '@dhx/trial-kanban';
import '@dhx/trial-kanban/dist/kanban.css';
</script>
В этом руководстве используется пробная версия Kanban.
Настройка контейнеров и инициализация Kanban
Чтобы отобразить Kanban с Toolbar, создайте два контейнера и вызовите конструкторы. Следующий фрагмент кода привязывает контейнеры и создаёт экземпляры компонентов внутри onMount():
<script>
import { onMount, onDestroy } from "svelte";
import { Kanban, Toolbar } from "@dhx/trial-kanban";
import "@dhx/trial-kanban/dist/kanban.css";
let toolbar_container, kanban_container; // инициализация контейнеров для Kanban и Toolbar
let kanban, toolbar;
onMount(() => {
// инициализация компонента Kanban
kanban = new Kanban(kanban_container, {})
// инициализация компонента Toolbar
toolbar = new Toolbar(toolbar_container, {
api: kanban.api, // передача внутреннего API Kanban
// другие параметры конфигурации
})
});
onDestroy(() => {
kanban.destructor(); // уничтожение Kanban
toolbar.destructor(); // уничтожение Toolbar
});
</script>
<div class="component_container">
<div bind:this={toolbar_container}></div>
<div bind:this={kanban_container} style="height: calc(100% - 56px);"></div>
</div>
Загрузка данных
Чтобы наполнить Kanban данными, предоставьте набор данных. Создайте файл data.js в директории src/:
export function getData() {
const columns = [
{
label: "Backlog",
id: "backlog"
},
{
label: "In progress",
id: "inprogress"
},
// ...
];
const cards = [
{
id: 1,
label: "Integration with Angular/React",
priority: 1,
color: "#65D3B3",
start_date: new Date("01/07/2021"),
users: [3, 2],
column: "backlog",
type: "feature",
},
{
label: "Archive the cards/boards",
priority: 3,
color: "#58C3FE",
users: [4],
progress: 1,
column: "backlog",
type: "feature",
},
// ...
];
const rows = [
{
label: "Feature",
id: "feature",
},
{
label: "Task",
id: "task",
}
];
return { columns, cards, rows };
}
Откройте App.svelte, импортируйте набор данных и передайте значения в новый компонент <Kanban/> через props:
<script>
import Kanban from "./Kanban.svelte";
import { getData } from "./data.js";
const { cards, columns, rows } = getData();
</script>
<Kanban {cards} {columns} {rows} />
Откройте Kanban.svelte и примените props к объекту конфигурации Kanban:
<script>
import { onMount, onDestroy } from "svelte";
import { Kanban, Toolbar, defaultEditorShape } from "@dhx/trial-kanban";
import "@dhx/trial-kanban/dist/kanban.css";
export let columns;
export let cards;
export let rows;
let toolbar_container, kanban_container;
let kanban, toolbar;
onMount(() => {
kanban = new Kanban(kanban_container, {
columns,
cards,
rows,
rowKey: "type",
// другие параметры конфигурации
})
toolbar = new Toolbar(toolbar_container, {
api: kanban.api, // передача внутреннего API Kanban
// другие параметры конфигурации
})
});
onDestroy(() => {
kanban.destructor();
toolbar.destructor();
});
</script>
<div class="component_container">
<div bind:this={toolbar_container}></div>
<div bind:this={kanban_container} style="height: calc(100% - 56px);"></div>
</div>
В качестве альтернативы загрузите данные после создания экземпляра с помощью setConfig() или parse() внутри onMount():
<script>
import { onMount, onDestroy } from "svelte";
import { Kanban, Toolbar} from "@dhx/trial-kanban";
import "@dhx/trial-kanban/dist/kanban.css";
export let columns;
export let cards;
export let rows;
let toolbar_container, kanban_container;
let kanban, toolbar;
onMount(() => {
kanban = new Kanban(kanban_container, {
columns: [],
cards: [],
rows: [],
rowKey: "type",
// другие параметры конфигурации
})
toolbar = new Toolbar(toolbar_container, {
api: kanban.api, // передача внутреннего API Kanban
// другие параметры конфигурации
})
kanban.setConfig({ columns, cards, rows });
// или kanban.parse({ columns, cards, rows });
});
onDestroy(() => {
kanban.destructor();
toolbar.destructor();
});
</script>
<div class="component_container">
<div bind:this={toolbar_container}></div>
<div bind:this={kanban_container} style="height: calc(100% - 56px);"></div>
</div>
Компонент Kanban готов к работе. При рендеринге элемента Kanban инициализируется с данными. Полный список поддерживаемых свойств конфигурации смотрите в справочнике API Kanban.
Обработка событий
Действия пользователя в Kanban вызывают события. Подписывайтесь на события для реакции на конкретные действия. Полный список смотрите в справочнике событий Kanban.
Откройте Kanban.svelte и расширьте калбэк onMount():
<script>
// ...
let kanban;
onMount(() => {
kanban = new Kanban(kanban_container, {})
kanban.api.on("add-card", (obj) => {
console.log(obj.columnId);
});
});
onDestroy(() => {
kanban.destructor();
});
</script>
// ...
Шаг 3. Добавление Kanban в приложение
Чтобы зарегистрировать компонент, откройте App.svelte и замените стандартный код:
<script>
import Kanban from "./Kanban.svelte";
import { getData } from "./data.js";
const { columns, cards, rows } = getData();
</script>
<Kanban {cards} {columns} {rows} />
Запустите приложение, чтобы увидеть заполненную доску Kanban на странице.
Полный проект доступен на GitHub.