Интеграция с Svelte
Перед чтением этой документации рекомендуется ознакомиться с базовыми понятиями и паттернами Svelte. Для обновления знаний обратитесь к документации Svelte.
DHTMLX Kanban совместим с Svelte. Мы подготовили примеры кода по использованию DHTMLX Kanban с Svelte. Для получения дополнительной информации смотрите соответствующий пример на GitHub.
Создание проекта
Существует несколько способов создания проекта на Svelte:
- можно использовать SvelteKit
или
- можно также использовать Svelte с Vite (без SvelteKit):
npm create vite@latest
Подробнее смотрите в связанной статье.
Установка зависимостей
Назовём проект 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
Теперь необходимо получить исходный код DHTMLX Kanban. Сначала остановите приложение и установите пакет Kanban.
Шаг 1. Установка пакета
Скачайте пробный пакет Kanban и следуйте шагам, описанным в файле README. Обратите внимание, что пробная версия Kanban доступна только 30 дней.
Шаг 2. Создание компонента
Теперь нужно создать компонент Svelte, чтобы добавить Kanban с Toolbar в приложение. Создайте новый файл в директории src/ и назовите его Kanban.svelte.
Импорт исходных файлов
Откройте файл Kanban.svelte и импортируйте исходные файлы Kanban. Обратите внимание:
- если вы используете PRO-версию и устанавливаете Kanban из локальной папки, пути для импорта будут такими:
<script>
import { Kanban, Toolbar } from 'dhx-kanban-package';
import 'dhx-kanban-package/dist/kanban.css';
</script>
В зависимости от используемого пакета исходные файлы могут быть минифицированы. В этом случае убедитесь, что импортируете CSS-файл как kanban.min.css.
- если вы используете пробную версию Kanban, укажите следующие пути:
<script>
import { Kanban, Toolbar } from '@dhx/trial-kanban';
import '@dhx/trial-kanban/dist/kanban.css';
<script>
В этом руководстве показано, как настраивать пробную версию Kanban.
Задание контейнеров и добавление Kanban с Toolbar
Чтобы отобразить Kanban с Toolbar на странице, необходимо создать контейнеры для Kanban и Toolbar, а затем инициализировать эти компоненты с помощью соответствующих конструкторов:
<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/kanbans ",
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>
Также вы можете использовать метод parse() внутри метода onMount() Svelte для загрузки данных в Kanban:
<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.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>
Метод parse(data) обеспечивает перезагрузку данных при каждом внесённом изменении.
Теперь компонент Kanban готов к использованию. Когда элемент будет добавлен на страницу, он инициализирует Kanban с данными. Вы также можете указать необходимые параметры конфигурации. Посетите документацию по API 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 } = getData();
</script>
<Kanban {cards} {columns} {rows} />
После этого вы можете запустить приложение и увидеть Kanban с загруженными данными на странице.
Теперь вы знаете, как интегрировать DHTMLX Kanban с Svelte. Вы можете настроить код под свои задачи. Финальный расширенный пример доступен на GitHub.