Closed13

Laravelでcolumn-sortableとtailwindcss-iconsを組み合わせた際にアイコンが描画されない

Alice RoseAlice Rose

コンフィグファイル生成する

sail artisan vendor:publish --provider="Kyslik\ColumnSortable\ColumnSortableServiceProvider" --tag="config"
Alice RoseAlice Rose

tailwind.config.js 修正
他のアイコンは使用予定がなかったのでcarbonのみ指定

tailwind.config.js
...
plugins: [
        forms,
        iconsPlugin({
            // Select the icon collections you want to use
            // You can also ignore this option to automatically discover all individual icon packages you have installed
            // If you install @iconify/json, you should explicitly specify the collections you want to use, like this:
            collections: getIconCollections(['carbon']),
            // If you want to use all icons from @iconify/json, you can do this:
            // collections: getIconCollections("all"),
            // and the more recommended way is to use `dynamicIconsPlugin`, see below.
        }),
    ],
...
Alice RoseAlice Rose

src/config/columnsortable.php の編集してfont awesomeではなくcarbonのアイコンを使うように指定

columnsortable.php
...

/*
    spec columns
    */
    'columns'                       => [
        'alpha'   => [
            'rows'  => ['description', 'email', 'name', 'slug'],
            'class' => 'i-carbon-caret',
        ],
        'amount'  => [
            'rows'  => ['amount', 'price'],
            'class' => 'i-carbon-caret',
        ],
        'numeric' => [
            'rows'  => ['created_at', 'updated_at', 'level', 'id', 'phone_number', 'area_id'],
            'class' => 'i-carbon-caret',
        ],
    ],

...

    /*
    suffix class that is appended when ascending direction is applied
     */
    'asc_suffix'                    => '-up',

    /*
    suffix class that is appended when descending direction is applied
     */
    'desc_suffix'                   => '-down',

...

アイコンはここから探す
https://icones.js.org/collection/carbon

アイコンクリック時にアイコン名の書式が選べるのでi-{シリーズ名}-{アイコン名}のフォーマットにするとコピペが楽

Alice RoseAlice Rose

ModelにTrait追記

Models
<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
use Illuminate\Database\Eloquent\Relations\HasMany;
+ use Kyslik\ColumnSortable\Sortable;

/**
 * @method static where(string $string, string $string1, $area_id)
 */
class Areas extends Model
{
    use HasFactory;
+    use Sortable;

...

ControllerのEloquent使用箇所にsortable()を挟む

Controller
...

        $areas = Areas::sortable()->where('pref_code', '=', $pref_code)->get();

...
Alice RoseAlice Rose

View編集
tableにオレオレコンポーネントを使っていたためreadme抜粋

https://github.com/Kyslik/column-sortable?tab=readme-ov-file#blade-extension

第一引数がDB上のカラム
第二引数が表示テキスト

@sortablelink('id', 'ID')

カラム名がクエリストリングに露呈するのが気持ち悪いなと思っていたけど第三引数で差し替えられそうなのでこれは後でやる(ちゃんと読んでなかった)

Alice RoseAlice Rose

第三引数で差し替えられそう

嘘をつくな

array() parameter (3rd) is default (GET) query strings parameter
Alice RoseAlice Rose

カラム名クリックしたらソート中のアイコンが…でませんね…

Alice RoseAlice Rose

徐ろにlayout開いて下記追加したらアイコン出たけど絶対違うだろと思いつつ寝た

layouts/app.blade.php
{{-- tailwind認識用 --}}
...

<div class="hidden">
    <i class="i-carbon-caret-up"></i>
    <i class="i-carbon-caret-down"></i>
    <i class="i-carbon-caret-sort"></i>
    <i class="i-carbon-caret-sort-up"></i>
    <i class="i-carbon-caret-sort-down"></i>
</div>

...
Alice RoseAlice Rose

寝る直前に気づいた(けどそのまま寝た)
tailwindのクラス名をコンフィグファイルに書いていたので多分検出されていない
config/columnsortable.phpを認識出来るよう追記

tailwind.config.js
...

@@ -6,8 +6,8 @@ import {getIconCollections, iconsPlugin} from "@egoist/tailwindcss-icons";
export default {
    content: [
        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
        './storage/framework/views/*.php',
        './resources/views/**/*.blade.php',
+       './config/*.php'
    ],

...
Alice RoseAlice Rose

表示されるようになった
ソートも機能している

けどソート中のカラムのアイコン定義がsuffix形式でフル表記がないのでやはり出ない
どうしたものか(CSSは書きたくない)

Alice RoseAlice Rose

どうにもならなさそうだったのでsafelistに入れた

tailwind.config.js

    safelist: [
        {
            pattern: /i-carbon-caret-(up|down)/,
        },
        {
            pattern: /i-carbon-caret-sort(up|down)/,
        },
    ],

なんか敗北感はあるがとりあえずソート時にもアイコン出し分けされるようになった

正攻法かどうかはわからないがbladeに非表示でアイコン設置するよりはましだと思うのでbladeからは削除しておわり

このスクラップは2024/03/07にクローズされました