Перейти к основному содержимому

Интеграция с Svelte

Подсказка

Это руководство предполагает знакомство с концепциями и паттернами Svelte. Для справки обратитесь к документации Svelte.

DHTMLX Kanban совместим с Svelte. Полный пример кода доступен на GitHub.

Создание проекта​

К сведению

Перед созданием проекта установите Vite (опционально) и Node.js.

Проект на Svelte можно настроить одним из двух способов:

  • с помощью SvelteKit — рекомендуется
  • с помощью Svelte и Vite (без SvelteKit) — выполните:
npm create vite@latest

Подробнее смотрите в документации Svelte.

Установка зависимостей​

Назовите проект my-svelte-kanban-app. Перейдите в директорию приложения:

cd my-svelte-kanban-app

Установите зависимости и запустите dev-сервер с помощью одного из менеджеров пакетов:

yarn
yarn start
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-версии, установленной из локальной папки:
Kanban.svelte
<script>
import { Kanban, Toolbar } from 'dhx-kanban-package';
import 'dhx-kanban-package/dist/kanban.css';
</script>

Если пакет поставляется с минифицированными исходными файлами, импортируйте CSS-файл как kanban.min.css.

  • Для пробной версии:
Kanban.svelte
<script>
import { Kanban, Toolbar } from '@dhx/trial-kanban';
import '@dhx/trial-kanban/dist/kanban.css';
</script>

В этом руководстве используется пробная версия Kanban.

Настройка контейнеров и инициализация Kanban​

Чтобы отобразить Kanban с Toolbar, создайте два контейнера и вызовите конструкторы. Следующий фрагмент кода привязывает контейнеры и создаёт экземпляры компонентов внутри onMount():

Kanban.svelte
<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/:

data.js
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:

App.svelte
<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:

Kanban.svelte
<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():

Kanban.svelte
<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():

Kanban.svelte
<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 и замените стандартный код:

App.svelte
<script>
    import Kanban from "./Kanban.svelte";
    import { getData } from "./data.js";
    
    const { columns, cards, rows } = getData();
</script>

<Kanban {cards} {columns} {rows} />

Запустите приложение, чтобы увидеть заполненную доску Kanban на странице.

Доска DHTMLX Kanban, инициализированная в приложении Svelte, с заполненными колонками и карточками

Полный проект доступен на GitHub.

Need more help?Contact Support