# Kanban Board Library

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

## ✨ Особенности

*   **Drag & Drop:** Интуитивно понятное перетаскивание задач между колонками.
*   **Редактирование:** Добавление, редактирование и удаление задач и колонок.
*   **Назначение исполнителей:** Возможность назначать исполнителей задачам.
*   **Кастомизация:** Широкие возможности настройки стилей для задач и колонок.
*   **Сохранение состояния:** Сохранение и загрузка состояния доски в формате JSON.
*   **Легковесность:** Минимальный размер, не перегружающий ваш проект.
*	**Функциональность смены состояния перетаскивания** Позволяет включать и выключать перетаскивания задач и колонок.
*	**Функциональность сохранения sortdate при перезагрузке** При загрузке с файла sortdate остается в прежнем положении.

## 📦 Установка

```bash
npm install kanban-board
```
🚀 Использование
Подключение библиотеки
```html

<script src="путь_к_вашему_файлу/kanban-board.js"></script> <!-- Или использовать систему сборки модулей -->
```
Создание экземпляра Kanban
```javascript

import Kanban from 'kanban-board';

// Восстановление состояния из localStorage при инициализации
let kanban;
const savedState = localStorage.getItem('kanban');

if (savedState) {
    kanban = Kanban.fromJson(savedState); // Восстанавливаем состояние из JSON
} else {
    kanban = new Kanban(); // Создаем новую доску, если сохраненного состояния нет
}

// Первоначальный рендер
kanban.render();
```
Примеры
Пример использования
```javascript

import Kanban from 'kanban-board';

const kanban = new Kanban({
  columns: ["To Do", "In Progress", "Done"],
  tasks: [
    { id: 1, text: "Задача 1", status: "To Do", date: "2023-12-31" },
  ],
  authors: [],
});

document.addEventListener("DOMContentLoaded", () => {
  kanban.render();
});
```
Основные функции
Добавление задачи:
```javascript

kanban.addTask("Новая задача", "Стартовые задачи", "2023-12-31");
```
Редактирование задачи:
javascript

kanban.editTask(taskId, { text: "Обновленный текст", date: "2023-12-31" });
Удаление задачи:
```javascript

kanban.deleteTask(taskId);
```
Добавление исполнителя:
```javascript

kanban.addAuthor("Имя исполнителя", "#ff0000");
```
Добавление новой колонки:

```javascript

kanban.addColumn("Новая колонка");
```
Удаление колонки:
```javascript

kanban.deleteColumn("Стартовые задачи");
```
🎨 Настройка стилей
Вы можете настроить стили задач и колонок:

```javascript

kanban.setTaskStyles({
  textColor: '#333333',
  backgroundColor: '#ffffff',
  completedTaskColor: '#d4edda',
});

kanban.setColumnStyles({
  headerColor: '#3498db',
  backgroundColor: '#ffffff',
});
```
💾 Сохранение и загрузка состояния
Вы можете сохранить состояние доски в JSON-формате и восстановить его:

```javascript

const json = kanban.toJson();

const newKanban = Kanban.fromJson(json);
```
🔄 Отслеживание изменений и автоматическое сохранение в localStorage
Для автоматического сохранения состояния доски Kanban в localStorage после каждого рендеринга, вы можете использовать следующий код:

```javascript

function saveState() {
  localStorage.setItem('kanban', kanban.toJson());
}

// Получаем оригинальный метод render
const render = kanban.render.bind(kanban);

// Переопределяем метод render
kanban.render = async function () {
  const result = await render(); // Вызываем оригинальный метод render
  saveState(); // Сохраняем состояние после рендеринга
  return result; // Возвращаем результат
};
```
Конструктор принимает initialState
```javascript

const kanban = new Kanban(initialState);
```
Пример initialstate
```javascript

const kanban = new Kanban({
    columns: this.columns,
    tasks: this.tasks,
    authors: this.authors,
    trash_can: this.trash_can,
    sortdate: this.sortdate,
});
```
⚙️ API
Конструктор
```javascript
constructor(initialState, containerId): Создает новую доску Kanban.

initialState (Object, опционально): Начальное состояние доски (колонки, задачи, авторы).
containerId (String, опционально): ID HTML-элемента, в котором будет отрисована доска.
```

Методы
* **addTask(text, status, date)**: Добавляет новую задачу.
  * **text** (String): Текст задачи.
  * **status** (String): Статус задачи (колонка, в которой она будет находиться).
  * **date** (String): Дата задачи.
* **editTask(id, updateData)**: Редактирует существующую задачу.
  * **id** (Number): ID задачи.
  * **updateData** (Object): Объект с полями, которые нужно обновить (например, { text: "Новый текст", date: "2024-01-01" }).
* **deleteTask(id)**: Удаляет задачу.
  * **id** (Number): ID задачи.
* **addAuthor(name, color)**: Добавляет исполнителя.
  * **name** (String): Имя исполнителя.
  * **color** (String): Цвет исполнителя (hex-код).
* **addColumn(name)**: Добавляет новую колонку.
  * **name** (String): Имя колонки.
* **deleteColumn(name)**: Удаляет колонку.
  * **name** (String): Имя колонки.
* **toJson()**: Сохраняет состояние доски в JSON. Возвращает: (String) JSON-строку с состоянием доски.
* **fromJson(jsonString)**: Восстанавливает состояние доски из JSON.
  * **jsonString** (String): JSON-строка с состоянием доски. Возвращает: (Kanban) Новый экземпляр Kanban с восстановленным состоянием.
* **setTaskStyles(styles)**: Устанавливает стили задач.
  * **styles** (Object): Объект с CSS-свойствами для задач.
* **setColumnStyles(styles)**: Устанавливает стили колонок.
  * **styles** (Object): Объект с CSS-свойствами для колонок.
### 📄 Лицензия
MIT
### 🧑‍💻 Авторы
Шорников Даниил 

### 🙏 Благодарности
Всем, кто использует и поддерживает эту библиотеку!