Laravel-admin TODO機能の作成③(grid)

#前回
[Laravel-admin TODO機能の作成②](https://qiita.com/ksri-soln/items/6d6cba15aa19318ca6fb)

#今回すること
- 公式ドキュメント見ながらgridの機能を色々実装してみる


#Grid

##画面表示部

公式ドキュメントを見ながら色々追加してみました。
各列の実装内容の簡単な概要を書いています。
最初に画像とソースを載せています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/413817/6646d39b-2e87-0ebe-7e53-8ee7a414bb08.png)

```devproject\app\Admin\Controllers\TodoController.php
use Encore\Admin\Widgets\Table;

    /**
     * Make a grid builder.
     *
     * @return Grid
     */
    protected function grid()
    {
        $grid = new Grid(new Todo);

        $grid->id('ID')->modal('情報', function () {

            $data = [
                [
                    $this->id,
                    $this->user->name,
                    $this->title,
                    $this->detail,
                ]
            ];

            return new Table(['ID', 'ユーザー名', 'タイトル', '詳細'], $data);
        })->sortable();

        $grid->user()->name('ユーザー名')->style('min-width:100px;');
        $grid->title('タイトル')->setAttributes(['style' => 'background-color:#ffdbdb;'])->editable();
        $grid->detail('詳細')->limit(20)->expand(function () {
            return $this->detail;
        });
        $grid->created_at('Created at')->label('danger');
        $grid->updated_at('Updated at')->badge();

        return $grid;
    }
```

###ID

```php
        $grid->id('ID')->modal('情報', function () {

            $data = [
                [
                    $this->id,
                    $this->user->name,
                    $this->title,
                    $this->detail,
                ]
            ];

            return new Table(['ID', 'ユーザー名', 'タイトル', '詳細'], $data);
        })->sortable();
```
- modal()
    - IDの項目を押下と対象のデータをポップアップでの表示をします
    - リレーション先のデータを表示する際に役立つと思います。
    - 今回では自データを表示しているだけです。
- sortable()
    - 列名を押下するとソートされます。

###ユーザー名
```php
        $grid->user()->name('ユーザー名')->style('min-width:100px;');
```

- user()
    - modelのリレーションを使用しリレーション先からname(ユーザー名)を取得しています。
- style()
    - 列のスタイルを指定しています。
    - 今回では最低幅を100pxに指定。

###タイトル
```php
        $grid->title('タイトル')->setAttributes(['style' => 'background-color:#ffdbdb;'])->editable();
```
- setAttributes()
    - 列にHTML属性を追加できます。
    - 今回ではstyleを追加していますが、styleだけならばユーザー名で使用したstyle()で事足ります。
- editable()
    - 列のデータを編集画面を開かず直接編集できる機能です。
    - bootstrap-editable.min.jsを使用しています。

###詳細

```php
        $grid->detail('詳細')->limit(20)->expand(function () {
            return $this->detail;
        });
```

- limit
    - 表示文字数を20文字に指定しています。
- expand
    - 詳細のデータを行間に展開します。
    - modalを使用したくない場合に有効。
    - データを見比べることを想定する場合などで使うと思います。
    - function内で別のデータを取得することもできます。

###Created at

```php
        $grid->created_at('Created at')->label('danger');
```

- label
    - ラベル表示。
    - success,danger,warning,info,primary,defaultのデザインが用意されています。


###Updated at

```php
        $grid->updated_at('Updated at')->badge();
```

- badge
    - バッジ表示。
    - success,danger,warning,info,primary,defaultのデザインが用意されています。
    - labelより丸みがあるデザイン。


###etc
- 他にもセレクトボックス、ラジオボタン、チェックボックス、スイッチなどの機能があったが、Todosテーブルの定義上足りませんでした。

##フィルタ部

gridに以下を追加することでフィルタ機能の詳細設定が出来る

```devproject\app\Admin\Controllers\TodoController.php
        $grid->filter(function ($filter) {
            $filter->column(1/2, function ($filter) {
                $filter->disableIdFilter();
                $filter->startsWith('title','タイトル');      // 前方一致
                $filter->between('created_at', '登録日時')->datetime();
            });
            $filter->column(1/2, function ($filter) {
                $filter->contains('detail','詳細');          // Like検索
            });
        });
```
###検索画面の分割
```php
$filter->column(1/2, function ($filter) {}
```
で検索部を2分割することが出来る。
gridは12の数値を基本としてるのでそれぞれの合計が12となる整数を指定しても可能。

```php
$filter->column(1, function ($filter) {...}
$filter->column(5, function ($filter) {...}
$filter->column(6, function ($filter) {...}
```


###disableIdFilter
- デフォルトではID検索項目があるが、不要なので消す。

###startsWith
- 前方一致検索

###contains
- 1.6.12から実装された新機能なので使ってみた。
- Equal to like queryとのこと。
- 動作検証がまだだがlikeと同じ気がする。

###between
- 開始入力欄と終了入力欄を追加してくれます。


#感想
コーディングというより、ドキュメントとソースの確認を永遠とやってました。
これは慣れればすごい便利だなぁと思います。

MVCのview部分がなくlaravelのbladeいつ使うの？と戸惑いつつやってます。
ドキュメントの中でチラッとview部分に触れている場所もあったのでいずれ出てくるでしょう・・・

#次回
次は一定のroleの場合は全ユーザーを表示する（scope解除）などの機能を入れていきたいと思います。

[Laravel-admin TODO機能の作成④](https://qiita.com/ksri-soln/items/2ece18e7ca644d4e33de)