category

Craft CMS のダッシュボードカスタマイズに Do It Yourself widget プラグインをつかってみる #craftcms

2019-12-18


このエントリは Craft CMS Advent Calendar 2019 18日目のエントリです。
昨日は「Guide プラグインでウィジェットの内容をテンプレート管理する」でした。

Guide プラグインを使った話を先日書いたのだけど。 

2019-12-17

@tinybeans に Do It Yourself widget プラグインを教えてもらい、こちらのほうがダッシュボードを用意するという用途にはあっていそう。

Do It Yourself widget
https://plugins.craftcms.com/d...

プラグインのインストールと初期設定

プラグインストアからプラグインをインストールする。

Craft をインストールしたところに config/diy-widget という感じでフォルダを作成する。

そこに dashboard.html といった感じでファイルをおけばそれが管理画面で Dashboard というウィジェットとして追加ができる。
ファイル名などは任意で設定ができる。

あとは普通にテンプレートをかく感じで、ボタンのスタイルなどは揃えつつやっていけばよい。

同じファイル名で .css にすれば css も追加できるので CSS の方で Tailwind CSS を読み込んでみたりして試してみた。

Tailwind CSS 
https://tailwindcss.com/

とりあえず管理者向けのダッシュボードとしてこんな感じのをサンプルで作ってみた。

検索は動いてないけど、あれば便利かどうか？とかを考えるきっかけ的なくらいで。
そもそもどう実装するか？もあるけど、検索させてここで結果をみせるのがいいか、遷移させた方が良さそうかとかが悩ましい。

権限をみて表示の出し分けを制御する

先日はユーザーグループによってダッシュボード内のメニューを出し分けしてみたのだが、そもそもユーザーグループの設定で付与している権限とイコールなのでその辺の権限に合わせる感じで分岐を書いてみた。

{% set sectionHandle = 'product' %}
{% set myEntryQuery = craft.entries().section(sectionHandle).limit(1) %}
{% for entry in myEntryQuery %}
{% set permissionCreate = 'createEntries:' ~ entry.section.uid %}
{% set permissionEdit = 'editEntries:' ~ entry.section.uid %}
{% if currentUser.can(permissionEdit) %}
<div class="item">
  <h2><span class="icon icon-mask mr-2"><span data-icon="section"></span></span>書籍データの管理</h2>
  <p>{% if currentUser.can(permissionCreate) %}<a href="/admin/entries/{{sectionHandle}}/new?site=default" class="btn submit add icon">新規作成</a>{% endif %}<a href="/admin/entries/{{sectionHandle}}" class="btn">編集</a></p>
</div>
{% endif %}
{% endfor %}

もう少し効率的な書き方はありそうだけど、こうしておけば権限の設定だけをダッシュボードでやっておけば、ユーザーグループが増えても問題ない。

テンプレート的にはまずはセクションを指定する。
そのセクションのエントリについての新規作成権限、編集権限があるかどうかをセットする。

そのうえで、編集権限があれば項目自体を表示させて、新規作成もできるのであれば、新規作成のボタンも出すといった感じにしてある。

これをそれぞれのメニューのところで書くかんじで問題なさそう。

権限周りの判定についてはドキュメントのユーザーの中の権限部分の記述がわかりやすい。

ユーザー | Craft 3 ドキュメント
https://docs.craftcms.com/v3/j...

ダッシュボードサンプル

こんな感じでユーザーグループ（権限）によってメニューが変わってくる。

アイコンは Craft の css の方で

<span class="icon icon-mask mr-2"><span data-icon="section"></span></span>

section のアイコンならこんなかんじで出せるようになってたので、それを使ってみた。

この辺も StyleGuide に入ってるとありがたい気はする。

このプラグインは bit part ではデフォルトプラグインになるかもしれないなー。