Как динамически создать Kanban Widget на основе Muuri Kanban - PullRequest
Новая
       21

Как динамически создать Kanban Widget на основе Muuri Kanban

0 голосов
/ 25 марта 2019

Я использую Muuri Plugin для реализации Widget для моего веб-приложения на английском языке.

Я нашел несколько примеров в сети, и они работают так, как я хочу, очень хорошо.

ссылка на этот код Муури Канбан следующая:

https://github.com/mriess260/angular-muuri-kanban-demo

Но теперь у меня проблема: я хочу динамически создавать виджеты, например, если нажать кнопку.

Канбан Виджет Инициатива. 

 ngOnInit() {
    this.columnGrids = new Array<any>();
    this.boardGrid = new Muuri('.board', {
      dragEnabled: true,
      dragStartPredicate: {
        handle: '.board-column-header'
      },
      dragReleaseDuration: 400,
      dragReleaseEasing: 'ease'
    });
  }

HTML выглядит следующим образом: 

<div class="board">
  <div class="board-column todo">
    <div class="board-column-header">To do</div>
    <div class="board-column-content">
      <div class="board-item">
        <div class="board-item-content">
          <span>Item #</span>
          1
        </div>
      </div>
      <div class="board-item">
        <div class="board-item-content">
          <span>Item #</span>
          2
        </div>
      </div>
      <div class="board-item">
        <div class="board-item-content">
          <span>Item #</span>
          3
        </div>
      </div>
      <div class="board-item">
        <div class="board-item-content">
          <span>Item #</span>
          4
        </div>
      </div>
      <div class="board-item">
        <div class="board-item-content">
          <span>Item #</span>
          5
        </div>
      </div>
    </div>
  </div>
  <div class="board-column working">
    <div class="board-column-header">
      Working
    </div>
    <div class="board-column-content">
      <div class="board-item">
        <div class="board-item-content">
          <span>Item #</span>
          6
        </div>
      </div>
      <div class="board-item">
        <div class="board-item-content">
          <span>Item #</span>
          7
        </div>
      </div>
      <div class="board-item">
        <div class="board-item-content">
          <span>Item #</span>
          8
        </div>
      </div>
      <div class="board-item">
        <div class="board-item-content">
          <span>Item #</span>9</div>
      </div>
      <div class="board-item">
        <div class="board-item-content">
          <span>Item #</span>10</div>
      </div>
    </div>
  </div>
  <div class="board-column done">
    <div class="board-column-header">Done</div>
    <div class="board-column-content">
      <div class="board-item">
        <div class="board-item-content">
          <span>Item #</span>
          11
        </div>
      </div>
      <div class="board-item">
        <div class="board-item-content">
          <span>Item #</span>
          12
        </div>
      </div>
      <div class="board-item">
        <div class="board-item-content">
          <span>Item #</span>
          13
        </div>
      </div>
      <div class="board-item">
        <div class="board-item-content">
          <span>Item #</span>
          14
        </div>
      </div>
      <div class="board-item">
        <div class="board-item-content">
          <span>Item #</span>
          15
        </div>
      </div>
    </div>
  </div>
</div>
<button (click)="createNewItem()">create new item</button>

Есть кнопка для создания нового Канбана 

createNewItem() {
    this.boardGrid.add(this.generateItem());

  }

  generateItem() {
    // tslint:disable-next-line:max-line-length
    const itemTemplate = '<div class="board-column"><div class="board-column-header">To do</div><div class="board-column-content"><div class="board-item"><div class="board-item-content"></div></div></div></div>';
    return itemTemplate;

  }

Я не знаю, как это сделать правильно.

кто-нибудь какое-нибудь предложение.

С наилучшими пожеланиями,

Leo

...