src/Eccube/Resource/template/admin/Product/class_category.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_category_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 type="text/javascript">
  22.         $(function() {
  23.             // 初期表示時のsort noを保持.
  24.             var oldSortNos = [];
  25.             var sortable = $('.sortable-item');
  26.             sortable.each(function() {
  27.                 oldSortNos.push(this.dataset.sortNo);
  28.             });
  29.             oldSortNos.sort(function(a, b) {
  30.                 return a - b;
  31.             }).reverse();
  32.             // 並び替え後にsort noを更新
  33.             var updateSortNo = function() {
  34.                 var newSortNos = {};
  35.                 var i = 0;
  36.                 $('.sortable-item').each(function() {
  37.                     newSortNos[this.dataset.id] = oldSortNos[i];
  38.                     i++;
  39.                 });
  40.                 $.ajax({
  41.                     url: '{{ url('admin_product_class_category_sort_no_move') }}',
  42.                     type: 'POST',
  43.                     data: newSortNos
  44.                 }).always(function() {
  45.                     $(".modal-backdrop").remove();
  46.                 });
  47.             };
  48.             // 最初と最後の↑↓を再描画
  49.             var redrawDisableAllows = function() {
  50.                 var items = $('.sortable-item');
  51.                 items.find('a').removeClass('disabled');
  52.                 items.first().find('a.action-up').addClass('disabled');
  53.                 items.last().find('a.action-down').addClass('disabled');
  54.             };
  55.             // オーバレイ後, 表示順の更新を行う
  56.             var moveSortNo = function() {
  57.                 $('body').append($('<div class="modal-backdrop show"></div>'));
  58.                 updateSortNo();
  59.                 redrawDisableAllows();
  60.             };
  61.             // Drag and Drop
  62.             $('.sortable-container').sortable({
  63.                 items: '> .sortable-item',
  64.                 cursor: 'move',
  65.                 update: function(e, ui) {
  66.                     moveSortNo();
  67.                 }
  68.             });
  69.             // Up
  70.             sortable.on('click', 'a.action-up', function(e) {
  71.                 e.preventDefault();
  72.                 var current = $(this).parents('li');
  73.                 if (current.prev().hasClass('sortable-item')) {
  74.                     current.prev().before(current);
  75.                     moveSortNo();
  76.                 }
  77.             });
  78.             // Down
  79.             sortable.on('click', 'a.action-down', function(e) {
  80.                 e.preventDefault();
  81.                 var current = $(this).parents('li');
  82.                 if (current.next().hasClass('sortable-item')) {
  83.                     current.next().after(current);
  84.                     moveSortNo();
  85.                 }
  86.             });
  87.             sortable.on('click', 'a.action-edit', function(e) {
  88.                 e.preventDefault();
  89.                 var current = $(this).parents('li');
  90.                 current.find('.mode-view').addClass('d-none');
  91.                 current.find('.mode-edit').removeClass('d-none');
  92.             });
  93.             sortable.on('click', 'button.action-edit-cancel', function(e) {
  94.                 location.href = "{{ url('admin_product_class_category', {'class_name_id': ClassName.id}) }}";
  95.             });
  96.             sortable.find('.is-invalid').each(function(e) {
  97.                 var current = $(this).parents('li');
  98.                 current.find('.mode-view').addClass('d-none');
  99.                 current.find('.mode-edit').removeClass('d-none');
  100.             });
  101.             // 削除モーダルのhrefとmessageの変更
  102.             $('#DeleteModal').on('shown.bs.modal', function(event) {
  103.                 var target = $(event.relatedTarget);
  104.                 // hrefの変更
  105.                 $(this).find('[data-method="delete"]').attr('href', target.data('url'));
  106.                 // messageの変更
  107.                 $(this).find('p.modal-message').text(target.data('message'));
  108.             });
  109.         });
  110.     </script>
  111. {% endblock %}
  112. {% block main %}
  113.     <div class="c-contentsArea__cols">
  114.         <div class="c-contentsArea__primaryCol">
  115.             <div class="c-primaryCol">
  116.                 <div class="card rounded border-0 mb-4">
  117.                     <div class="card-header">
  118.                         <div class="row">
  119.                             <div class="col"><span class="card-title">{{ 'admin.product.class_name'|trans }}</span></div>
  120.                         </div>
  121.                     </div>
  122.                     <div id="ex-class_category" class="card-body">
  123.                         <div class="row mb-2">
  124.                             <div class="col-auto"><span>{{ 'admin.product.class_name'|trans }}</span></div>
  125.                             <div class="col-auto"><span>{{ ClassName.name }}</span></div>
  126.                         </div>
  127.                         <div class="row mb-2">
  128.                             <div class="col-auto"><span>{{ 'admin.product.class_name__backend_name'|trans }}</span></div>
  129.                             <div class="col-auto"><span>{{ ClassName.backend_name }}</span></div>
  130.                         </div>
  131.                     </div>
  132.                 </div>
  133.                 <div class="card rounded border-0 mb-4">
  134.                     <div class="card-header"><span class="card-title">{{ 'admin.product.class_category'|trans }}</span></div>
  135.                     <div id="ex-class_category-edit" class="card-body p-0">
  136.                         <div class="card rounded border-0">
  137.                             <ul class="list-group list-group-flush sortable-container">
  138.                                 <li class="list-group-item">
  139.                                     <form role="form" class="row" name="form1" id="form1" method="post" action="{{ url('admin_product_class_category', {'class_name_id': ClassName.id}) }}">
  140.                                         <div class="col-auto align-self-center"><span>{{ 'admin.product.class_category_name__short'|trans }}</span></div>
  141.                                         <div class="col-3 me-2">
  142.                                             {{ form_widget(form._token) }}
  143.                                             {{ form_widget(form.name) }}
  144.                                             {{ form_errors(form.name) }}
  145.                                         </div>
  146.                                         <div class="col-auto align-self-center"><span>{{ 'admin.product.class_category__backend_name'|trans }}</span></div>
  147.                                         <div class="col-3">
  148.                                             {{ form_widget(form.backend_name) }}
  149.                                             {{ form_errors(form.backend_name) }}
  150.                                         </div>
  151.                                         <div class="col-auto">
  152.                                             <button class="btn btn-ec-regular" type="submit">{{ 'admin.common.create__new'|trans }}</button>
  153.                                         </div>
  154.                                     </form>
  155.                                 </li>
  156.                                 <li class="list-group-item">
  157.                                     <div class="row">
  158.                                         <div class="col-auto"><strong>&nbsp;</strong></div>
  159.                                         <div class="col-auto"><strong>{{ 'admin.common.id'|trans }}</strong></div>
  160.                                         <div class="col-1"><strong>{{ 'admin.product.class_category'|trans }}</strong></div>
  161.                                     </div>
  162.                                 </li>
  163.                                 {% for ClassCategory in ClassCategories %}
  164.                                     <li id="ex-class_category-{{ ClassCategory.id }}" class="list-group-item sortable-item" data-classname-id="{{ ClassCategory.ClassName.id }}" data-id="{{ ClassCategory.id }}" data-sort-no="{{ ClassCategory.sortNo }}">
  165.                                         <div class="row justify-content-around mode-view">
  166.                                             <div class="col-auto d-flex align-items-center"><i class="fa fa-bars text-ec-gray"></i></div>
  167.                                             <div class="col-auto d-flex align-items-center">{{ ClassCategory.id }}</div>
  168.                                             <div class="col d-flex align-items-center">{{ ClassCategory.name }} [{{ 'admin.product.class_category__backend_name'|trans }}{{ 'admin.common.separator__colon'|trans }}{{ ClassCategory.backend_name }}]</div>
  169.                                             <div class="col-auto text-end">
  170.                                                 <a class="btn btn-ec-actionIcon me-2 action-up {% if loop.first %}disabled{% endif %}" href="" data-bs-toggle="tooltip" data-bs-placement="top" title="{{ 'admin.common.up'|trans }}">
  171.                                                     <i class="fa fa-arrow-up fa-lg text-secondary"></i>
  172.                                                 </a>
  173.                                                 <a class="btn btn-ec-actionIcon me-2 action-down {% if loop.last %}disabled{% endif %}" href="" data-bs-toggle="tooltip" data-bs-placement="top" title="{{ 'admin.common.down'|trans }}">
  174.                                                     <i class="fa fa-arrow-down fa-lg text-secondary"></i>
  175.                                                 </a>
  176.                                                 <a class="btn btn-ec-actionIcon me-2 action-edit" href="" data-bs-toggle="tooltip" data-bs-placement="top" title="{{ 'admin.common.edit'|trans }}">
  177.                                                     <i class="fa fa-pencil fa-lg text-secondary"></i>
  178.                                                 </a>
  179.                                                 <a class="btn btn-ec-actionIcon me-2 action-visible" href="{{ url('admin_product_class_category_visibility', {'class_name_id': ClassCategory.ClassName.id, 'id': ClassCategory.id}) }}"
  180.                                                    data-bs-toggle="tooltip" data-bs-placement="top" title="{{ ClassCategory.visible ? 'admin.common.to_hide'|trans : 'admin.common.to_show'|trans }}"
  181.                                                    data-confirm="false" data-method="put" {{ csrf_token_for_anchor() }} >
  182.                                                     <i class="fa fa-toggle-{{ ClassCategory.visible ? 'on' : 'off' }} fa-lg text-secondary" aria-hidden="true"></i>
  183.                                                 </a>
  184.                                                 <div class="d-inline-block me-2" data-bs-toggle="tooltip" data-bs-placement="top" title="{{ 'admin.common.delete'|trans }}">
  185.                                                     <a class="btn btn-ec-actionIcon" data-bs-toggle="modal" data-bs-target="#DeleteModal"
  186.                                                        data-url="{{ url('admin_product_class_category_delete', {'class_name_id' : ClassName.id, 'id': ClassCategory.id}) }}"
  187.                                                        data-message="{{ 'admin.common.delete_modal__message'|trans({ "%name%" : ClassCategory.name }) }}">
  188.                                                         <i class="fa fa-close fa-lg text-secondary"></i>
  189.                                                     </a>
  190.                                                 </div>
  191.                                             </div>
  192.                                         </div>
  193.                                         <form class="row d-none mode-edit" method="post" action="{{ url('admin_product_class_category_edit', {'class_name_id': ClassName.id, 'id': ClassCategory.id}) }}">
  194.                                             {{ form_widget(forms[ClassCategory.id]._token) }}
  195.                                             <div class="col-3 me-2">
  196.                                                 {{ form_widget(forms[ClassCategory.id].name, {'attr': {'data-origin-value': forms[ClassCategory.id].name.vars.value}}) }}
  197.                                                 {{ form_errors(forms[ClassCategory.id].name) }}
  198.                                             </div>
  199.                                             <div class="col-auto align-self-center"><span>{{ 'admin.product.class_category__backend_name'|trans }}</span></div>
  200.                                             <div class="col-auto align-items-center">
  201.                                                 {{ form_widget(forms[ClassCategory.id].backend_name, {'attr': {'data-origin-value': forms[ClassCategory.id].backend_name.vars.value}}) }}
  202.                                                 {{ form_errors(forms[ClassCategory.id].backend_name) }}
  203.                                             </div>
  204.                                             {{ form_widget(forms[ClassCategory.id].visible, {'attr': {'class': 'd-none'}}) }}
  205.                                             <div class="col-auto align-items-center">
  206.                                                 <button class="btn btn-ec-conversion" type="submit">{{ 'admin.common.decision'|trans }}</button>
  207.                                             </div>
  208.                                             <div class="col-auto align-items-center">
  209.                                                 <button class="btn btn-ec-sub action-edit-cancel" type="button">{{ 'admin.common.cancel'|trans }}</button>
  210.                                             </div>
  211.                                         </form>
  212.                                     </li>
  213.                                 {% endfor %}
  214.                             </ul>
  215.                             <!-- 削除モーダル -->
  216.                             <div class="modal fade" id="DeleteModal" tabindex="-1" role="dialog"
  217.                                  aria-labelledby="DeleteModal" aria-hidden="true">
  218.                                 <div class="modal-dialog" role="document">
  219.                                     <div class="modal-content">
  220.                                         <div class="modal-header">
  221.                                             <h5 class="modal-title fw-bold">
  222.                                                 {{ 'admin.common.delete_modal__title'|trans }}
  223.                                             </h5>
  224.                                             <button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="Close">
  225.                                             </button>
  226.                                         </div>
  227.                                         <div class="modal-body text-start">
  228.                                             <p class="text-start modal-message"><!-- jsでメッセージを挿入 --></p>
  229.                                         </div>
  230.                                         <div class="modal-footer">
  231.                                             <button class="btn btn-ec-sub" type="button" data-bs-dismiss="modal">
  232.                                                 {{ 'admin.common.cancel'|trans }}
  233.                                             </button>
  234.                                             <a class="btn btn-ec-delete" href="#" {{ csrf_token_for_anchor() }}
  235.                                                data-method="delete" data-confirm="false">
  236.                                                 {{ 'admin.common.delete'|trans }}
  237.                                             </a>
  238.                                         </div>
  239.                                     </div>
  240.                                 </div>
  241.                             </div>
  242.                         </div>
  243.                     </div>
  244.                 </div>
  245.                 <p>{{ 'admin.common.drag_and_drop_description'|trans }}</p>
  246.             </div>
  247.         </div>
  248.         <div class="c-conversionArea">
  249.             <div class="c-conversionArea__container">
  250.                 <div class="row justify-content-between align-items-center">
  251.                     <div class="col-6">
  252.                         <div class="c-conversionArea__leftBlockItem">
  253.                             <a class="c-baseLink" href="{{ url('admin_product_class_name') }}">
  254.                                 <i class="fa fa-backward" aria-hidden="true"></i><span>{{ 'admin.product.class_management'|trans }}</span>
  255.                             </a>
  256.                         </div>
  257.                     </div>
  258.                     <div class="col-6"></div>
  259.                 </div>
  260.             </div>
  261.         </div>
  262.     </div>
  263. {% endblock %}