eZ Platform 1.x の管理画面をカスタマイズする

## Platform UI Bundle
eZ Platform 1.x の管理画面のカスタマイズ事例を紹介します。

eZ Platform 1.x の管理画面は [Platform UI Bundle](https://github.com/ezsystems/PlatformUIBundle) によって [YUI](https://yuilibrary.com/) や [Handlebars](https://handlebarsjs.com/) で実装されています。
（なお、 eZ Platform 2.x からはバンドルが [eZ Platform Admin UI Bundle](https://github.com/ezsystems/ezplatform-admin-ui) に変更され、ライブラリも [React](https://reactjs.org/) と [Bootstrap 4](https://getbootstrap.com/) に変更されました。）

https://doc.ezplatform.com/en/1.13/guide/extending_ez_platform_ui/

## 参考バンドル
ドキュメントが十分ではないため、以下のバンドルを参考にするとよいでしょう。

* [ExtendingPlatformUIConferenceBundle](https://github.com/ezsystems/ExtendingPlatformUIConferenceBundle)
* [EzContentOnTheFlyBundle](https://github.com/ezsystems/content-on-the-fly-prototype-bundle)

## ファイルのコピー
```bash
mkdir -p src/AppBundle/Resources/public/templates/fields/{view,edit}
mkdir -p src/AppBundle/Resources/public/js/views/fields
cp -av {vendor/ezsystems/platform-ui-bundle,src/AppBundle}/Resources/public/templates/fields/view/relationlist.hbt 
cp -av {vendor/ezsystems/platform-ui-bundle,src/AppBundle}/Resources/public/templates/fields/edit/relationlist.hbt 
cp -av {vendor/ezsystems/platform-ui-bundle,src/AppBundle}/Resources/public/js/views/fields/ez-relationlist-editview.js
```
AppBundle 内にディレクトリを作成してファイルをコピーします。
Handlebars のテンプレートの拡張子は通常 `.hbs` ですが、eZ Platform では `.hbt` となっています。

## ファイルの編集

### view/relationlist.hbt
```handlebars
                    <ul>
                    {{#each relatedContents}}
                        <li class="ez-relationlistview-item" title="{{ name }}">
                            <a href="{{path "viewLocation" id=resources.MainLocation languageCode=mainLanguageCode}}">{{ name }}
                              <img src="{{ fields.image.fieldValue.uri }}" width="100 " alt=""></a>
                        </li>
                    {{/each}}
                    </ul>
```

### edit/relationlist.hbt
```handlebars:src/AppBundle/Resources/public/templates/fields/edit/relationlist.hbt
                    <table class="pure-table pure-table-striped ez-relationlist-contents">
                        <thead>
                            <tr>
                                <th onclick="sortTable(0)">{{translate "relationlist.table.name" "fieldedit"}}</th>
                                <th onclick="sortTable(1)">ContentId</th>
                                <th>Image</th>
                                <th>{{translate "relationlist.table.published" "fieldedit"}}</th>
                                <th>{{translate "relationlist.table.modified" "fieldedit"}}</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody>
                            {{#each relatedContents}}
                                <tr class="ez-relation-content" data-content-id="{{id}}">
                                    <td class="ez-relation-content-name" data-icon="&#xe601;" title="{{ name }}">{{ name }}</td>
                                    <td class="ez-relation-property">{{ contentId }}</td>
                                    <td class="ez-relation-property"><img src="{{ fields.image.fieldValue.uri }}" width="100 " alt="{{ translate 'image.preview' 'fieldedit' }}"></td>
                                    <td class="ez-relation-property">{{ publishedDate }}</td>
                                    <td class="ez-relation-property">{{ lastModificationDate }}</td>
                                    <td class="ez-relation-remove-content">
                                        <button data-content-id="{{id}}" class=" ez-button ez-button-delete ez-font-icon pure-button" {{#if ../isNotTranslatable}}disabled="disabled"{{/if}}>
                                            {{translate "relationlist.remove" "fieldedit"}}
                                        </button>
                                    </td>
                                </tr>
                            {{/each}}
                        </tbody>
                    </table>
```

### ez-relationlist-editview.js
```javascript:src/AppBundle/Resources/public/js/views/fields/ez-relationlist-editview.js
function sortTable(n) {
  var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
  table = document.getElementsByClassName("ez-relationlist-contents")[0]; switching = true; dir = "asc";
  while (switching) {
    switching = false; rows = table.getElementsByTagName("TR");
    for (i = 1; i < (rows.length - 1); i++) {
      shouldSwitch = false; x = rows[i].getElementsByTagName("TD")[n]; y = rows[i + 1].getElementsByTagName("TD")[n];
      if (dir == "asc") { if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) { shouldSwitch= true; break; }
      } else if (dir == "desc") { if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) { shouldSwitch= true; break; } }
    }
    if (shouldSwitch) { rows[i].parentNode.insertBefore(rows[i + 1], rows[i]); switching = true; switchcount ++;
    } else { if (switchcount == 0 && dir == "asc") { dir = "desc"; switching = true; } }
  }
}
```

## 設定ファイル
```yaml:app/config/ezplatform.yml
imports:
    - { resource: yui.yml }
```
```yaml:app/config/yui.yml
ez_platformui:
    system:
        default:
            yui:
                modules:
                    relationlistview-ez-template:
                        type: 'template'
                        path: "bundles/app/templates/fields/view/relationlist.hbt"
                    relationlisteditview-ez-template:
                        type: 'template'
                        path: "bundles/app/templates/fields/edit/relationlist.hbt"
                    ez-relationlist-editview:
                        requires: ['ez-fieldeditview', 'relationlisteditview-ez-template', 'ez-asynchronousview', 'array-extras', 'transition', 'ez-translator']
                        path: "bundles/app/js/views/fields/ez-relationlist-editview.js"
```
## アセットリンク
```bash
app/console assets:install --symlink
```

## キャッシュクリア
```bash
app/console c:c --env=prod
```
設定ファイルを読み込ませるためにキャッシュクリアします。

```bash
chmod g+s /var/www/app/cache
```
設定状況によってはキャッシュクリア後にパーミッションが戻ってしまう場合があるので、その場合は SGID を設定して再度キャッシュクリアします。