category

Craft CMS で管理しているデータを kanban 的に表示させてみる

2020-01-12


ちょっとカンバン的な見た目のを作りたいと思ったので、jKanban を触ってみた。

jKanban - Javascript plugin for Kanban boards
http://www.riccardotartaglia.i...

この辺はVueとか何かで良さそうなのがありそうな気はするけどとりあえず使ってみるということで触ってみた。

作ってみたいものをドキュメントにまとめてチケットにしたりすれば作ってもらえるかもしれないけど、人から依頼されても作る側はモチベーションわかないだろうからある程度は自分で作ってみて難しいところを後々依頼できればなぁという感じで。その分時間はかかるが・・・

js / css / html 周りの調整

リポジトリの内容を持ってきてjs, css読み込む。

// css
<link rel="stylesheet" href="jkanban.min.css">

// js
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="jkanban.min.js"></script>
<script src="bootstrap.min.js"></script>

HTMLにkanban出すところを定義しておいて

<div id="demo1"></div>

js で必要な要素を書いておく。

<script>
var kanban1 = new jKanban({
    element:'#demo1',
    boards  :[
        {
            'id' : '_todo',
            'title'  : 'Try Drag me!',
            'item'  : [
                {
                    'title':'You can drag me too',
                },
                {
                    'title':'Buy Milk',
                }
            ]
        },
        {
            'id' : '_working',
            'title'  : 'Working',
            'item'  : [
                {
                    'title':'Do Something!',
                },
                {
                    'title':'Run?',
                }
            ]
        },
        {
            'id' : '_done',
            'title'  : 'Done',
            'item'  : [
                {
                    'title':'All right',
                },
                {
                    'title':'Ok!',
                }
            ]
        }
    ]
});

とりあえずこれでデフォルトのような感じのカンバンが表示できた。

Craft CMS のデータを取り出す

今回のゴールとしてはCraft CMS でデータの管理をする想定で作ってみているので、こんな感じでデータを取り出す。

boards  :[
        {
            'id' : '_todo',
            'title'  : 'Try Drag me!',
            'item'  : [
            {% set entries = craft.entries.limit(null) %}
            {% for entry in entries %}
                {
                    "id"      : "{{entry.id}}",
                    "title"   : "{{entry.issueKey}}:{{entry.title}}",
                    "username": "{{entry.issueAssignee}}"
                }{% if not loop.last %},{%endif%}
            {% endfor %}
            ]
        },

ステータスに合わせてデータを取り出す感じでひとまず出すだけは問題なかった。

ライブラリに依存してしまうがその辺はとりあえず内部用に動くものを作れればという感じで。