プリザンターの一覧画面でフィルタとソートをまとめてリセットする

プリザンターの一覧画面をカスタマイズしてみます。
フィルター・ソートのリセットボタンの使い勝手が自分の感覚？と違う気がするので変更してみたいと思います！
**フィルタとソートをまとめてリセットするボタンを追加します**


# バージョン
- プリザンターver1.4.15.0

# スクリプトの作成
## リセットボタン
一覧画面には、フィルタとソートそれぞれに対してリセットボタンがあります。
しかし、フィルタとソートをまとめてリセットしたい場合もあるため、そのボタンを追加しました。

## 全体

```js
// ボタンを追加
function CreateAddResetButton() {
    // resetAllがあったら何もしない
    if (document.getElementById('resetAll')) return;
    // ViewFilters_Resetが非表示で無かったら何もしない
    if (!document.getElementById('ViewFilters_Reset')) return;
    // ボタンを作成
    const button = document.getElementById('ViewFilters_Reset').cloneNode(true);    // trueで子要素もコピー
    button.textContent = 'Allリセット';
    // ボタンのIdを変更
    button.id = 'resetAll';
    button.addEventListener('click', () => AllReset());
    // 要素を追加
    document.getElementById("ViewFilters").prepend(button);
};
// フィルタとソートをまとめてリセット
function AllReset() {
    const observer = new MutationObserver((mutationsList, observer) => {
        // ソートのリセットをクリック
        document.querySelector('.menu-sort > li.reset').click();
        // 監視を停止
        observer.disconnect();
    });
    // 監視を設定
    observer.observe(document.getElementById('ViewModeContainer'), { attributes: true, childList: true, subtree: true });
    // フィルタのリセットをクリック
    document.getElementById('ViewFilters_Reset').click();
}

// ページ読み込み時に設定
CreateAddResetButton();
// $p.setで再描画時の設定
$p.events.on_grid_load = function () {
    CreateAddResetButton();
};
```

## ボタンの追加
- 見た目は既存のボタンに合わせるため、`ViewFilters_Reset`をコピーしています
- リセット後に再度ボタンを追加するため、`$p.events.on_grid_load`を設定しています

## ボタンのイベント
- フィルタのリセットは`document.getElementById('ViewFilters_Reset').click();`
- ソートのリセットは`document.querySelector('.menu-sort > li.reset').click();`
- しかし、それぞれを単純に続けて書くだけでは正常に処理されませんでした
- リセット時に画面が再描画されたり、同期処理として進んでしまうため、適切に処理されないようです
- そこで、一覧部分`ViewModeContainer`を`MutationObserver`で監視する処理を追加しました

- クリックイベントは以下のようになっていました
```js
$(function () {
    $(document).on('click', '#ViewFilters_Reset', function () {
        $p.send($(this));
    });
});
```

```js
    $(document).on('click', '.menu-sort > li.reset', function (e) {
        var $control = $(this);
        var $grid = $control.closest('.grid');
        var data = $p.getData($control);
        data.Direction = $grid.attr('data-name');
        data.TableId = $grid.attr('id');
        data.TableSiteId = $grid.attr('data-id');
        $('[data-id^="ViewSorters_"]').each(function () {
            delete data[$(this).attr('data-id')];
        });
        $p.send($('#ViewSorters_Reset'));
        e.stopPropagation();
    });
```

# 完成
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2383487/2d4c5273-32b8-4160-a014-d61e462c93f2.png)

![一覧のgif.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2383487/a8828631-f17d-4e1e-85d0-ee73c471298a.gif)


# 参考
- [フィルタのリセットボタン](https://github.com/Implem/Implem.Pleasanter/blob/c2a6e137f6b9831c228590862f442aa0f4b265ac/Implem.Pleasanter/wwwroot/scripts/filterevents.js#L2)
- [ソートのリセットボタン](https://github.com/Implem/Implem.Pleasanter/blob/c2a6e137f6b9831c228590862f442aa0f4b265ac/Implem.Pleasanter/wwwroot/scripts/gridevents.js#L231)
- https://www.pleasanter.org/ja/manual/script-events-on-grid-load
- https://www.pleasanter.org/ja/manual/table-record-search
- https://www.pleasanter.org/ja/manual/table-record-sort