src/Eccube/Resource/template/admin/Product/class_name.twig line 1

Open in your IDE?
  1. {#
  2. This file is part of EC-CUBE
  3. Copyright(c) EC-CUBE CO.,LTD. All Rights Reserved.
  4. http://www.ec-cube.co.jp/
  5. For the full copyright and license information, please view the LICENSE
  6. file that was distributed with this source code.
  7. #}
  8. {% extends '@admin/default_frame.twig' %}
  9. {% set menus = ['product', 'class_name'] %}
  10. {% block title %}{{ 'admin.product.class_management'|trans }}{% endblock %}
  11. {% block sub_title %}{{ 'admin.product.product_management'|trans }}{% endblock %}
  12. {% form_theme form '@admin/Form/bootstrap_4_horizontal_layout.html.twig' %}
  13. {% block stylesheet %}
  14.     <style type="text/css">
  15.         .list-group-item:hover {
  16.             z-index: inherit;
  17.         }
  18.     </style>
  19. {% endblock stylesheet %}
  20. {% block javascript %}
  21.     <script>
  22.         $(function() {
  23.             var oldSortNos = [];
  24.             // 画面の中のsortNo一覧を保持
  25.             $('.sortable-item').each(function() {
  26.                 oldSortNos.push(this.dataset.sortNo);
  27.             });
  28.             // rsort
  29.             oldSortNos.sort(function(a, b) {
  30.                 return a - b;
  31.             }).reverse();
  32.             $('.sortable-container').sortable({
  33.                 items: '> .sortable-item',
  34.                 cursor: 'move',
  35.                 update: function(e, ui) {
  36.                     $('body').append($('<div class="modal-backdrop show"></div>'));
  37.                     updateSortNo();
  38.                 }
  39.             });
  40.             var updateSortNo = function() {
  41.                 // 並び替え後にsortNoを更新
  42.                 var newSortNos = {};
  43.                 var i = 0;
  44.                 $('.sortable-item').each(function() {
  45.                     newSortNos[this.dataset.classNameId] = oldSortNos[i];
  46.                     i++;
  47.                 });
  48.                 $.ajax({
  49.                     url: '{{ url('admin_product_class_name_sort_no_move') }}',
  50.                     type: 'POST',
  51.                     data: newSortNos
  52.                 }).done(function() {
  53.                     // remove class disable
  54.                     $('a.up.disabled').removeClass('disabled');
  55.                     $('a.down.disabled').removeClass('disabled');
  56.                     // First element
  57.                     $('.sortable-item > li:nth-child(2) > div > div.col-auto.text-end > a.up').addClass('disabled');
  58.                 }).always(function() {
  59.                     redrawDisableAllows();
  60.                     $('.modal-backdrop').remove();
  61.                 });
  62.             };
  63.             // 最初と最後の↑↓を再描画
  64.             var redrawDisableAllows = function() {
  65.                 var items = $('.sortable-item');
  66.                 items.find('a.up').removeClass('disabled');
  67.                 items.find('a.down').removeClass('disabled');
  68.                 items.first().find('a.up').addClass('disabled');
  69.                 items.last().find('a.down').addClass('disabled');
  70.             };
  71.             $('.sortable-item a.up').click(function(e) {
  72.                 e.preventDefault();
  73.                 var current = $(this).parents('.list-group-item');
  74.                 current.prev().before(current);
  75.                 $('body').append($('<div class="modal-backdrop show"></div>'));
  76.                 updateSortNo();
  77.             });
  78.             $('.sortable-item a.down').click(function(e) {
  79.                 e.preventDefault();
  80.                 var current = $(this).parents('.list-group-item');
  81.                 current.next().after(current);
  82.                 $('body').append($('<div class="modal-backdrop show"></div>'));
  83.                 updateSortNo();
  84.             });
  85.             // 編集
  86.             $('.sortable-item').on('click', 'a.action-edit', function(e) {
  87.                 e.preventDefault();
  88.                 var current = $(this).parents('li');
  89.                 current.find('.mode-view').addClass('d-none');
  90.                 current.find('.mode-edit').removeClass('d-none');
  91.             });
  92.             // 編集キャンセル
  93.             $('.sortable-item').on('click', 'button.action-edit-cancel', function(e) {
  94.                 e.preventDefault();
  95.                 var current = $(this).parents('li');
  96.                 current.find('[data-origin-value]').each(function(e) {
  97.                     $(this).val($(this).attr('data-origin-value'));
  98.                 });
  99.                 current.find('.mode-view').removeClass('d-none');
  100.                 current.find('.mode-edit').addClass('d-none');
  101.             });
  102.             // 編集時, エラーがあれば入力欄を表示.
  103.             $('.sortable-item').find('.is-invalid').each(function(e) {
  104.                 var current = $(this).parents('li');
  105.                 current.find('.mode-view').addClass('d-none');
  106.                 current.find('.mode-edit').removeClass('d-none');
  107.             });
  108.             // 削除モーダルのhrefとmessageの変更
  109.             $('#DeleteModal').on('shown.bs.modal', function(event) {
  110.                 var target = $(event.relatedTarget);
  111.                 // hrefの変更
  112.                 $(this).find('[data-method="delete"]').attr('href', target.data('url'));
  113.                 // messageの変更
  114.                 $(this).find('p.modal-message').text(target.data('message'));
  115.             });
  116.         });
  117.     </script>
  118. {% endblock %}
  119. {% block main %}
  120.     <div class="c-contentsArea__cols">
  121.         <div class="c-contentsArea__primaryCol">
  122.             <div class="c-primaryCol">
  123.                 <div class="card rounded border-0 mb-4">
  124.                     <div class="card-body p-0">
  125.                         <div class="card rounded border-0">
  126.                             <ul class="list-group list-group-flush sortable-container">
  127.                                 <li class="list-group-item">
  128.                                     <form role="form" class="row" name="form1" id="form1" method="post" action="{{ url('admin_product_class_name') }}">
  129.                                         <div class="col-auto align-self-center"><span>{{ 'admin.product.class_name'|trans }}</span></div>
  130.                                         <div class="col-3 me-2">
  131.                                             {{ form_widget(form._token) }}
  132.                                             {{ form_widget(form.name) }}
  133.                                             {{ form_errors(form.name) }}
  134.                                         </div>
  135.                                         <div class="col-auto align-self-center" data-bs-toggle="tooltip" data-bs-placement="top" title="{{ 'tooltip.product.backend_name'|trans }}">
  136.                                             <span>{{ 'admin.product.class_name__backend_name'|trans }}</span>
  137.                                             <i class="fa fa-question-circle fa-lg ms-1"></i>
  138.                                         </div>
  139.                                         <div class="col-3">
  140.                                             {{ form_widget(form.backend_name) }}
  141.                                             {{ form_errors(form.backend_name) }}
  142.                                         </div>
  143.                                         <div class="col-auto">
  144.                                             <button class="btn btn-ec-regular" type="submit">{{ 'admin.common.create__new'|trans }}</button>
  145.                                         </div>
  146.                                     </form>
  147.                                 </li>
  148.                                 <li class="list-group-item">
  149.                                     <div class="row">
  150.                                         <div class="col-auto"><strong>&nbsp;</strong></div>
  151.                                         <div class="col-auto"><strong>{{ 'admin.common.id'|trans }}</strong></div>
  152.                                         <div class="col-1"><strong>{{ 'admin.product.class_management'|trans }}</strong></div>
  153.                                     </div>
  154.                                 </li>
  155.                                 {% for ClassName in ClassNames %}
  156.                                     <li id="ex-class_name-{{ ClassName.id }}" class="list-group-item sortable-item" data-class-name-id="{{ ClassName.id }}" data-sort-no="{{ ClassName.sortNo }}">
  157.                                         <div class="row justify-content-around mode-view">
  158.                                             <div class="col-auto d-flex align-items-center"><i class="fa fa-bars text-ec-gray"></i></div>
  159.                                             <div class="col-auto d-flex align-items-center">{{ ClassName.id }}</div>
  160.                                             <div class="col d-flex align-items-center">
  161.                                                 <a href="{{ url('admin_product_class_category', {class_name_id : ClassName.id }) }}">{{ ClassName.name }}[{{ 'admin.product.class_name__backend_name'|trans }}{{ 'admin.common.separator__colon'|trans }}{{ ClassName.backend_name }}] ({{ ClassName.ClassCategories|length }})</a>
  162.                                             </div>
  163.                                             <div class="col-auto text-end">
  164.                                                 <a class="btn btn-ec-actionIcon me-2 up {% if loop.first %}disabled{% endif %}" href="" data-bs-toggle="tooltip" data-bs-placement="top" title="{{ 'admin.common.up'|trans }}">
  165.                                                     <i class="fa fa-arrow-up fa-lg text-secondary"></i>
  166.                                                 </a>
  167.                                                 <a class="btn btn-ec-actionIcon me-2 down {% if loop.last %}disabled{% endif %}" href="" data-bs-toggle="tooltip" data-bs-placement="top" title="{{ 'admin.common.down'|trans }}">
  168.                                                     <i class="fa fa-arrow-down fa-lg text-secondary"></i>
  169.                                                 </a>
  170.                                                 <a class="btn btn-ec-actionIcon me-2 action-edit" data-bs-toggle="tooltip" data-bs-placement="top" title="{{ 'admin.common.edit'|trans }}">
  171.                                                     <i class="fa fa-pencil fa-lg text-secondary"></i>
  172.                                                 </a>
  173.                                                 <div class="d-inline-block me-2" data-bs-toggle="tooltip"
  174.                                                      data-bs-placement="top" title="{{ 'admin.common.delete'|trans }}">
  175.                                                     {% set classCategories = ClassName.ClassCategories|length %}
  176.                                                     <a class="btn btn-ec-actionIcon{% if classCategories > 0 %} disabled{% endif %}"
  177.                                                        {% if classCategories == 0 %}data-bs-toggle="modal" data-bs-target="#DeleteModal"
  178.                                                        data-url="{{ url('admin_product_class_name_delete', {'id' : ClassName.id}) }}"
  179.                                                        data-message="{{ 'admin.common.delete_modal__message'|trans({ "%name%" : ClassName.name }) }}"{% endif %}>
  180.                                                         <i class="fa fa-close fa-lg text-secondary"></i>
  181.                                                     </a>
  182.                                                 </div>
  183.                                             </div>
  184.                                         </div>
  185.                                         <form class="row d-none mode-edit" method="post" action="{{ url('admin_product_class_name') }}">
  186.                                             {{ form_widget(forms[ClassName.id]._token) }}
  187.                                             <div class="col-auto align-self-center"><span>{{ 'admin.product.class_name'|trans }}</span></div>
  188.                                             <div class="col-auto align-items-center">
  189.                                                 {{ form_widget(forms[ClassName.id].name, {'attr': {'data-origin-value': forms[ClassName.id].name.vars.value}}) }}
  190.                                                 {{ form_errors(forms[ClassName.id].name) }}
  191.                                             </div>
  192.                                             <div class="col-auto align-self-center"><span>{{ 'admin.product.class_name__backend_name'|trans }}</span></div>
  193.                                             <div class="col-auto align-items-center">
  194.                                                 {{ form_widget(forms[ClassName.id].backend_name, {'attr': {'data-origin-value': forms[ClassName.id].backend_name.vars.value}}) }}
  195.                                                 {{ form_errors(forms[ClassName.id].backend_name) }}
  196.                                             </div>
  197.                                             <div class="col-auto align-items-center">
  198.                                                 <button class="btn btn-ec-conversion" type="submit">{{ 'admin.common.decision'|trans }}</button>
  199.                                             </div>
  200.                                             <div class="col-auto align-items-center">
  201.                                                 <button class="btn btn-ec-sub action-edit-cancel" type="button">{{ 'admin.common.cancel'|trans }}</button>
  202.                                             </div>
  203.                                         </form>
  204.                                     </li>
  205.                                 {% endfor %}
  206.                             </ul>
  207.                             <!-- 削除モーダル -->
  208.                             <div class="modal fade" id="DeleteModal" tabindex="-1" role="dialog"
  209.                                  aria-labelledby="DeleteModal" aria-hidden="true">
  210.                                 <div class="modal-dialog" role="document">
  211.                                     <div class="modal-content">
  212.                                         <div class="modal-header">
  213.                                             <h5 class="modal-title fw-bold">
  214.                                                 {{ 'admin.common.delete_modal__title'|trans }}
  215.                                             </h5>
  216.                                             <button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="Close">
  217.                                             </button>
  218.                                         </div>
  219.                                         <div class="modal-body text-start">
  220.                                             <p class="text-start modal-message"><!-- jsでメッセージを挿入 --></p>
  221.                                         </div>
  222.                                         <div class="modal-footer">
  223.                                             <button class="btn btn-ec-sub" type="button" data-bs-dismiss="modal">
  224.                                                 {{ 'admin.common.cancel'|trans }}
  225.                                             </button>
  226.                                             <a class="btn btn-ec-delete" href="#" {{ csrf_token_for_anchor() }}
  227.                                                data-method="delete" data-confirm="false">
  228.                                                 {{ 'admin.common.delete'|trans }}
  229.                                             </a>
  230.                                         </div>
  231.                                     </div>
  232.                                 </div>
  233.                             </div>
  234.                         </div>
  235.                     </div>
  236.                 </div>
  237.                 <p>{{ 'admin.common.drag_and_drop_description'|trans }}</p>
  238.             </div>
  239.         </div>
  240.     </div>
  241. {% endblock %}