[続]プリザンターの一覧画面の「ソート状態」を見やすくする方法

## はじめに
[プリザンターの一覧画面の「ソート状態」を見やすくする方法](https://qiita.com/pmc-ko/items/4058894b6620b214dd3c)で紹介した一覧のヘッダーのソート状態を示すアイコンを見やすいものに変更する方法をさらにカスタマイズして使いやすくする方法を紹介します。

## ソート状態アイコンを変更する
Google Iconsのアイコンを指定していましたがちょっと直感的でない・・・ということで、他のアイコンに差し替えます。

### 使うアイコンを考えてみる
アイコンについてはいろいろとあるのですが、今回はライセンスが緩い[Line Awesome](https://icons8.com/line-awesome)を使用します。

|用途|アイコン|アイコン名|SVG|
|--|--|--|--|
|昇順|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3555395/c9e79dad-e150-4a6e-8f11-a4fa1f3972cd.png)|`sort-alpha-down-solid`|[SVG](https://github.com/icons8/line-awesome/blob/master/svg/sort-alpha-down-solid.svg)|
|降順|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3555395/4958d6d2-96e0-48af-bd72-e0d04c07c100.png)|`sort-alpha-down-alt-solid`|[SVG](https://github.com/icons8/line-awesome/blob/master/svg/sort-alpha-down-alt-solid.svg)|

これなら直感的で分かりやすいので、これを使用します。

### Line Awesomeをプリザンターに組み込む
インターネットに出られる環境であれば拡張HTMLを使用してCDNで使用するのですが、これだとプリザンターの良いところである「完全オンプレ・インターネット不要」で使用できるメリットが消えてしまうので、Line Awesomeのリソースをプリザンターに組み込んでしまいます。

Line Awesomeの公式サイトからZIPファイルをダウンロードしてきて、プリザンターのインストール先のディレクトリに下記の階層で展開します。

```plantuml
@startuml
salt
{
  {T
    + [プリザンターのインストールディレクトリ]
    ++ wwwroot
    +++ line-awesome | ディレクトリを作成する
    ++++ svg | 解凍したアイテムのディレクトリ
    +++++ *.* | 全てのファイルを持っていく
    ++++ css | 解凍したアイテムのディレクトリ
    +++++ *.* | 全てのファイルを持っていく
    ++++ fonts | 解凍したアイテムのディレクトリ
    +++++ *.* | 全てのファイルを持っていく
  }
}
@enduml
```

次に[拡張HTML](https://pleasanter.org/ja/manual/extended-html)を用意します。

```html:HtmlHeaderBottom.html
<link rel="stylesheet" href="/line-awesome/css/line-awesome.min.css" />
```
マニュアルではファイル名のサフィックスに言語の2レターコードを付けるように記載がありますが、それを省略することで全ての言語に適用できます。

### サーバスクリプトで表示させてみる
サーバスクリプトを作成します。設定条件は「画面表示の前」です。

```js
if (['index', 'gridrows', 'newongrid', 'copyrow'].includes(context.Action)) {
	for (const [key, value] of Object.entries(view.Sorters)) {
		switch (value) {
			case "asc":
				context.AddResponse('ReplaceAll', `th[data-name="${key}"] div .ui-icon`,
					'<span class="las la-sort-alpha-down" style="font-size: 1.5em;"></span>');
				break;
			case "desc":
				context.AddResponse('ReplaceAll', `th[data-name="${key}"] div .ui-icon`,
					'<span class="las la-sort-alpha-down-alt" style="font-size: 1.5em;"></span>');
				break;
		}
	}
}
```

表示を確認してみます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3555395/7bf1a755-5c01-402d-8100-bfd2ef7d1e27.png)

いい感じに表示させることが出来ました。

## ソートの順番を表示させる
プリザンターでは複数の項目でソートを設定することが出来ます。`ClassA`を昇順に並び替えた後に`ClassB`を降順に並び替えるといったことが出来ます。これは、ヘッダーの要素をクリックした順番になります。
このクリックした順番、画面上では一切表示されないので、これを表示させるようにしてみます。

### 使うアイコンを考えてみる
前項で使用したLine Awesomeがそのまま使えれば良いのですが数字系のアイコンの実装がないため、こちらではGoogle Iconsを使用します。

|用途|アイコン|アイコン名|
|--|--|--|
|1|![filter_1_24dp_000000_FILL0_wght400_GRAD0_opsz24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3555395/694c3dec-7c70-4934-af46-b27dea577dac.png)|`filter_1`|
|2|![filter_2_24dp_000000_FILL0_wght400_GRAD0_opsz24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3555395/1132ed41-d85b-4a95-90d2-508a7799f109.png)|`filter_2`|
|3|![filter_3_24dp_000000_FILL0_wght400_GRAD0_opsz24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3555395/bbad9e1d-603a-49ca-b6e2-5a5cdade1007.png)|`filter_3`|
|4|![filter_4_24dp_000000_FILL0_wght400_GRAD0_opsz24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3555395/734bcb7a-aab7-4e00-897d-b2525592e23f.png)|`filter_4`|
|5|![filter_5_24dp_000000_FILL0_wght400_GRAD0_opsz24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3555395/346a29e7-2bf2-4b62-a551-db35458d15e3.png)|`filter_5`|
|6|![filter_6_24dp_000000_FILL0_wght400_GRAD0_opsz24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3555395/bee91e00-14ba-491f-9cbd-0d8657efaa72.png)|`filter_6`|
|7|![filter_7_24dp_000000_FILL0_wght400_GRAD0_opsz24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3555395/799f947b-b1ba-4569-b28b-baf7588c7334.png)|`filter_7`|
|8|![filter_8_24dp_000000_FILL0_wght400_GRAD0_opsz24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3555395/38fa9fa6-4445-4cf6-b677-c5ca228d056d.png)|`filter_8`|
|9|![filter_9_24dp_000000_FILL0_wght400_GRAD0_opsz24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3555395/04f38dfd-2f33-4e61-88db-12be2940be58.png)|`filter_9`|
|9+|![filter_9_plus_24dp_000000_FILL0_wght400_GRAD0_opsz24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3555395/0be3e19a-2368-4cbf-a541-e8edb6ac9232.png)|`filter_9_plus`|

これなら直感的で分かりやすい&9個以上の項目を選択したときも対応出来るので、これを使用します。

### サーバスクリプトで表示させてみる
サーバスクリプトを作成します。設定条件は「画面表示の前」です。先ほどのソート順アイコンを表示させるスクリプトをベースにしています。

```js
if (['index', 'gridrows', 'newongrid', 'copyrow'].includes(context.Action)) {
	for (const [index, [key, value]] of Object.entries(Object.entries(view.Sorters))) {
		//Object.entriesを使用すると先頭にGetType,ToString,Equals,GetHashCodeの4つが格納されるので除外する
		if (index < 4) {
			continue;
		}

		//前処理と同じ理由からインデックスの値を補正する
		var number = index - 3;
		var icons = "";

		switch (value) {
			case "asc":
				icons +=
					`<span class="las la-sort-alpha-down" style="font-size: 1.5em;"></span>`;
				break;
			case "desc":
				icons +=
					`<span class="las la-sort-alpha-down-alt" style="font-size: 1.5em;"></span>`;
				break;
		}

		if (9 < number) {
			icons +=
				`<span class="material-symbols-outlined" style="font-size: 1.5em;">filter_9_plus</span>`;
		} else {
            icons +=
				`<span class="material-symbols-outlined" style="font-size: 1.5em;">filter_${number}</span>`;
        }

		context.AddResponse('ReplaceAll', `th[data-name="${key}"] div .ui-icon`,
			icons);
	}
}
```

表示を確認してみます。

![レコーディング-2025-03-27-160037.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3555395/5ab47280-0203-4f57-9a76-62601ded2e90.gif)

いい感じに表示させることが出来ました。

## まとめ
今回は、ヘッダーでかけられているソートの状態をさらにわかりやすくする方法を紹介しました。いろいろと応用の利く要素がありますので、是非試してみてください。