Канбан-доска - это инструмент визуализации рабочего процесса, который позволяет оптимизировать поток вашей работы. В этом посте я покажу вам, как создать доску канбан в реальном времени во Vue.

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

  1. Node.js и npm (перейдите по этой ссылке, чтобы загрузить установщик для вашей ОС)
  2. Vue CLI. Если у вас его нет, запустите npm install -g vue-cli в командной строке, чтобы установить его.

Если вы ничего не знаете о Vue, вы можете прочитать мой предыдущий пост, прежде чем продолжить этот.

Настроить проект

Мы настроим проект с помощью Vue CLI, который представляет собой простой интерфейс командной строки (CLI) для создания шаблонов проектов Vue.js. Откройте терминал и запустите vue init webpack-simple realtime-kanban-board. Вы получите несколько запросов, примите значения по умолчанию, нажав клавишу ВВОД, и выберите y, когда вас спросят, хотите ли вы использовать saas. Перед запуском команды вы можете изменить realtime-kanban-board на желаемое имя проекта. После настройки выполните следующую команду, чтобы установить зависимости из шаблона шаблона:

cd realtime-kanban-board
npm install

Мы будем использовать vue-kanban в качестве компонента доски канбан с функциями перетаскивания. Мы также будем использовать Hamoni Sync для хранения и синхронизации состояния приложения в реальном времени. Они оба находятся в npm, и мы установим их, выполнив следующую команду:

npm install vue-kanban hamoni-sync

Нам нужны дополнительные пакеты для Babel. Установите их, выполнив следующую команду:

npm install --save-dev babel-plugin-transform-runtime babel-preset-stage-2

Добавить vue-kanban

Мы создали приложение, которое теперь содержит файлы, необходимые для его запуска. Откройте файл src/App.vue в текстовом редакторе (или в среде IDE) и замените его содержимое следующим:

<template>
  <div id="app">
    <kanban-board :stages="stages" :blocks="blocks" @update-block="updateBlock">
      <div v-for="block in blocks" :slot="block.id" :key="block.id">
        <div>
          <strong>id:</strong> {{ block.id }}
        </div>
        <div>
          {{ block.title }}
        </div>
      </div>
    </kanban-board>
  </div>
</template>
<script>
import Vue from "vue";
import vueKanban from "vue-kanban";
import Hamoni from "hamoni-sync";
Vue.use(vueKanban);
export default {
  name: "app",
  data() {
    return {
      stages: ["on-hold", "in-progress", "needs-review", "approved"],
      blocks: [],
      listPrimitive: null
    };
  },
  methods: {
    updateBlock(id, status) {
      //TODO: add code to update the block
    }
  },
};
</script>
<style lang="scss">
@import "./assets/kanban.scss";
</style>

В приведенном выше коде используется компонент kanban-board с двумя реквизитами, stagesи blocks. Опора stages определяет столбцы для доски, а blocks содержит данные, представляющие элемент задачи, помещенный в столбец. Событие @update-block запускается, когда блок перемещается с одной стадии на другую. Мы будем использовать это событие для обновления доски в реальном времени.

Добавить Hamoni Sync

Мы добавили необходимый код для отображения на странице доски канбан. В этом разделе мы настроим Hamoni Sync для хранения и синхронизации данных для blocks. Hamoni Sync - это сервис, который позволяет синхронизировать состояние вашего приложения в режиме реального времени.

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

  1. Зарегистрируйтесь и войдите в личный кабинет Hamoni.
  2. Введите желаемое имя приложения в текстовое поле и нажмите кнопку «Создать». Это должно создать приложение и отобразить его в разделе списка приложений.
  3. Нажмите кнопку «Показать идентификатор учетной записи», чтобы увидеть идентификатор своей учетной записи.

Добавьте следующий код в App.vue в строке 35.

mounted: function() {
let hamoni = new Hamoni("ACCOUNT_ID", "APP_ID");
hamoni
    .connect()
    .then(() => {
    hamoni
        .get("blocks")
        .then(listPrimitive => {
            this.listPrimitive = listPrimitive;
            this.blocks = listPrimitive.getAll();
            listPrimitive.onItemUpdated(item => {
                //update the item at item.index
                this.blocks.splice(item.index, 1, item.value);
            });
        })
        .catch(error => {
        if (error == "Error getting state from server") {
            hamoni
            .createList("blocks", blocks)
            .then(listPrimitive => {
                this.listPrimitive = listPrimitive;
                this.blocks = listPrimitive.getAll();
                listPrimitive.onItemUpdated(item => {
                    //update the item at item.index
                    this.blocks.splice(item.index, 1, item.value);
                });
            })
            .catch(console.log);
        }
        });
    })
    .catch(console.log);
}

Добавьте следующее перед закрывающим тегом </script>:

const blocks = [
  {
    id: 0,
    status: "approved",
    title: "Buy coffee machine"
  },
  {
    id: 1,
    status: "in-progress",
    title: "Find better AirBnB options"
  },
  {
    id: 2,
    status: "on-hold",
    title: "Approve Q3 budget"
  },
  {
    id: 3,
    status: "approved",
    title: "Travel to Colombia"
  },
  {
    id: 4,
    status: "needs-review",
    title: "Add Redux to the app"
  },
  {
    id: 5,
    status: "approved",
    title: "Well, Sleep all day 👩‍🎤"
  },
  {
    id: 6,
    status: "in-progress",
    title: "Find language exchange partner"
  }
];

Мы инициализировали его, вызвав new Hamoni("ACCOUNT_ID", "APP_ID");. Замените заполнители строк на свою учетную запись и идентификатор приложения, которые вы получите на панели инструментов Hamoni. Затем мы подключили приложение с помощью hamoni.connect(). Мы получили данные, вызвав hamoni.get() с именем состояния приложения, хранящегося в Hamoni Sync. Если его еще нет, мы создадим его, а затем добавим функцию для обновления состояния Vue при обновлении элемента. Это достигается вызовом onItemUpdated() с кодом для обновления блока на item.index. Hamoni Sync предоставляет так называемый примитив списка, который мы использовали здесь, вызвав hamoni.createList() и передав ему массив.

Теперь нам нужно обновить состояние на Hamoni, когда блок перемещается с одной стадии на другую. Мы обновим функцию updateBlock(id, status), которую добавили ранее

methods: {
    updateBlock(id, status) {
        let block = this.blocks[id];
        this.listPrimitive.update(id, { id, title: "block.title, status });"
    }
},

Этот код сообщает sync об обновлении состояния, и как только это будет сделано, оно будет синхронизировано со всеми подключенными клиентами / устройствами.

Это весь код, который нужен. Теперь запустите приложение, запустив npm run dev из командной строки, и это запустит веб-приложение в браузере по умолчанию.

Вот и все - доска канбан в реальном времени.

Вот и все!

Итак, мы создали доску канбан в реальном времени, используя vue-kanban и Hamoni Sync. Hamoni Sync упрощает интеграцию функций реального времени в ваши приложения. Получить готовый код можно на GitHub. Удачного кодирования! 👍

Ресурсы

Первоначально опубликовано на DEV