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

Open in your IDE?
  1. {#
  2. This file is part of EC-CUBE
  4. Copyright(c) EC-CUBE CO.,LTD. All Rights Reserved.
  6. http://www.ec-cube.co.jp/
  8. For the full copyright and license information, please view the LICENSE
  9. file that was distributed with this source code.
  10. #}
  11. {% extends '@admin/default_frame.twig' %}
  13. {% set menus = ['product', 'product_csv_import'] %}
  15. {% block title %}{{ 'admin.product.product_csv_upload'|trans }}{% endblock %}
  16. {% block sub_title %}{{ 'admin.product.product_management'|trans }}{% endblock %}
  18. {% form_theme form '@admin/Form/bootstrap_4_horizontal_layout.html.twig' %}
  20. {% block javascript %}
  21.     <script>
  22.         $(function() {
  23.             $('#importCsv').on('click', function() {
  25.                 var setupModal = function (modal) {
  26.                     modal.find('button').attr('disabled', 'disabled');
  27.                     $('.modal-body p', modal).text("{{ 'admin.common.csv_upload_in_progress'|trans }}");
  28.                     $('.progress', modal).show();
  29.                     return (new $.Deferred).resolve().promise();
  30.                 }
  32.                 var addError = function(message) {
  33.                     $('<li><span class="badge bg-danger">ERROR</span> </li>')
  34.                         .append($('<span></span>').text(message))
  35.                         .prependTo('#bulkMessages');
  36.                     $('#bulkMessages li:nth-child(n+2)').hide()
  37.                 };
  39.                 var addSuccess = function(message) {
  40.                     $('<li><span class="badge bg-success">SUCCESS</span> </li>')
  41.                         .append($('<span></span>').text(message))
  42.                         .prependTo('#bulkMessages');
  43.                     $('#bulkMessages li:nth-child(n+2)').hide()
  44.                 };
  46.                 var split = function(formData) {
  47.                     return function() {
  48.                         var d = new $.Deferred();
  49.                         $.ajax({
  50.                             url: '{{ url('admin_product_csv_split') }}',
  51.                             type: 'POST',
  52.                             data: formData,
  53.                             processData: false,
  54.                             contentType: false,
  55.                             cache: false,
  56.                         })
  57.                         .then(function(data) {
  58.                             if (data.success) {
  59.                                 d.resolve(data)
  60.                             } else {
  61.                                 data.message.forEach(function(error) {
  62.                                     addError(error.message)
  63.                                 })
  64.                                 d.reject(data)
  65.                             }
  66.                         })
  67.                         .catch(function() {
  68.                             d.reject()
  69.                         })
  70.                         return d.promise();
  71.                     }
  72.                 }
  74.                 var upload = function(file_name, current, total) {
  75.                     return function() {
  76.                         var d = new $.Deferred();
  77.                         $.ajax({
  78.                             url: '{{ url('admin_product_csv_split_import') }}',
  79.                             type: 'POST',
  80.                             data: {
  81.                                 file_name: file_name + current + '.csv',
  82.                                 file_no: current
  83.                             },
  84.                         })
  85.                         .then(function(data) {
  86.                             if (data.success) {
  87.                                 addSuccess(data.success_message)
  88.                                 $('.progress-bar', modal).css('width', (current / total * 100) + '%');
  89.                                 d.resolve(data)
  90.                             } else {
  91.                                 $('.modal-body p', modal)
  92.                                     .text(data.error_message)
  94.                                 data.errors.forEach(function (error) {
  95.                                     addError(error)
  96.                                 });
  98.                                 $('.progress-bar', modal)
  99.                                     .clone()
  100.                                     .addClass('bg-danger')
  101.                                     .css('width', 100 - ((current - 1) / total * 100) + '%')
  102.                                     .appendTo('.progress', modal)
  104.                                 $('.progress-bar', modal).addClass('bg-success')
  106.                                 // エラー発生以降の分割ファイルをクリア
  107.                                 var files = []
  108.                                 for (var i = current + 1; i <= total; i++) {
  109.                                     files.push(file_name + i + '.csv')
  110.                                 }
  111.                                 if (files.length > 0) {
  112.                                     $.post('{{ url('admin_product_csv_split_cleanup') }}', { files: files })
  113.                                 }
  115.                                 d.reject(data);
  116.                             }
  117.                         }, function(data) {
  118.                             d.reject(data)
  119.                         })
  120.                         return d.promise()
  121.                     }
  122.                 }
  124.                 var modal = $('#importCsvModal')
  125.                 var formData = new FormData($('#upload-form').get(0))
  127.                 setupModal(modal)
  128.                     // CSV分割
  129.                     .then(split(formData))
  130.                     .catch(function() {
  131.                         $('.modal-body p', modal).text("{{ 'admin.common.csv_upload_error'|trans }}")
  132.                         $('.progress-bar', modal).css('width', '100%')
  133.                         $('.progress-bar', modal).addClass('bg-danger')
  134.                         return $.Deferred().reject();
  135.                     })
  136.                     // 分割したCSVを登録
  137.                     .then(function(data) {
  138.                         var d = $.Deferred().resolve();
  139.                         for (var i = 1; i <= data.max_file_no; i++) {
  140.                             d = d.then(upload(data.file_name, i, data.max_file_no))
  141.                         }
  142.                         return d.promise()
  143.                     })
  144.                     // 完了メッセージ
  145.                     .then(function() {
  146.                         $('.modal-body p', modal).text("{{ 'admin.common.csv_upload_complete'|trans }}")
  147.                         $('.progress-bar', modal).addClass('bg-success');
  148.                     })
  149.                     // モーダルのロック解除
  150.                     .always(function() {
  151.                         $('.progress-bar', modal).removeClass('progress-bar-animated')
  152.                         // メッセージ行が複数ある場合に詳細表示
  153.                         if ($('#bulkMessages li').length > 1) {
  154.                             $('#toggleMessages').show()
  155.                         }
  156.                         modal.find('button').removeAttr('disabled').toggle()
  157.                     })
  158.             })
  160.             $('#toggleMessages').on('click', function() {
  161.                 var display = $('#bulkMessages li:last').css('display')
  162.                 if (display == 'none') {
  163.                     $('#bulkMessages li').show();
  164.                     $('#toggleMessages span').text("{{ 'admin.common.close_detail'|trans }}")
  165.                     $('#toggleMessages i').removeClass('fa-plus-square-o')
  166.                     $('#toggleMessages i').addClass('fa-minus-square-o')
  167.                 } else {
  168.                     $('#bulkMessages li:nth-child(n+2)').hide()
  169.                     $('#toggleMessages span').text("{{ 'admin.common.open_detail'|trans }}")
  170.                     $('#toggleMessages i').removeClass('fa-minus-square-o')
  171.                     $('#toggleMessages i').addClass('fa-plus-square-o')
  172.                 }
  173.             })
  175.             $('#importCsvDone').on('click', function() {
  176.                 location.reload(true);
  177.             });
  179.             $('#file-select').click(function() {
  180.                 $('#admin_csv_import_import_file').click();
  181.                 $('#admin_csv_import_import_file').on('change', function() {
  182.                     var files = $(this).prop('files');
  183.                     if (files.length) {
  184.                         $('#admin_csv_import_import_file_name').text(files[0].name);
  185.                         $('#upload-button').prop('disabled', false);
  186.                     }
  187.                 });
  188.             });
  189.         });
  190.     </script>
  191. {% endblock javascript %}
  193. {% block main %}
  194.     <div class="c-contentsArea__cols">
  195.         <div class="c-contentsArea__primaryCol">
  196.             <div class="c-primaryCol">
  197.                 <div class="card rounded border-0 mb-4">
  198.                     <div class="card-header">
  199.                         <div class="d-inline-block" data-bs-toggle="tooltip" data-bs-placement="top" title="{{ 'tooltip.product.csv_upload'|trans }}"><span>{{ 'admin.common.csv_upload'|trans }}</span><i class="fa fa-question-circle fa-lg fa-lg ms-1"></i></div>
  200.                     </div>
  201.                     <div id="ex-csv_product-upload" class="card-body">
  202.                         <div class="row">
  203.                             <div class="col-2"><span>{{ 'admin.common.csv_select'|trans }}</span></div>
  204.                             <div class="col">
  205.                                 <form id="upload-form" method="post" action="{{ url('admin_product_csv_split') }}" enctype="multipart/form-data">
  206.                                     {{ form_widget(form._token) }}
  207.                                     <div class="mb-2">
  208.                                         <span id="file-select" class="btn btn-ec-regular me-2">{{ 'admin.common.file_select'|trans }}</span>
  209.                                         <span id="admin_csv_import_import_file_name">{{ 'admin.common.file_select_empty'|trans }}</span>
  210.                                         {{ form_widget(form.import_file, {'attr': {'accept': 'text/csv,text/tsv', 'class': 'd-none'}}) }}
  211.                                         {{ form_errors(form.import_file) }}
  212.                                     </div>
  213.                                     <button class="btn btn-ec-conversion" id="upload-button" type="button" data-bs-toggle="modal" data-bs-target="#importCsvModal" disabled>{{ 'admin.common.bulk_registration'|trans }}</button>
  214.                                     {% for error in errors %}
  215.                                         <div class="text-danger">{{ error }}</div>
  216.                                     {% endfor %}
  217.                                 </form>
  218.                             </div>
  219.                         </div>
  220.                     </div>
  221.                 </div>
  222.                 <div class="card rounded border-0 mb-4">
  223.                     <div class="card-header">
  224.                         <div class="row justify-content-between">
  225.                             <div class="col-6">
  226.                                 <div class="d-inline-block" data-bs-toggle="tooltip" data-bs-placement="top" title="{{ 'tooltip.product.csv_format'|trans }}"><span class="align-middle">{{ 'admin.common.csv_format'|trans }}</span><i class="fa fa-question-circle fa-lg fa-lg ms-1"></i></div>
  227.                             </div>
  228.                             <div class="col-4 text-end">
  229.                                 <a href="{{ url('admin_product_csv_template', {'type': 'product'}) }}" class="btn btn-ec-regular" id="download-button">{{ 'admin.common.csv_skeleton_download'|trans }}</a>
  230.                             </div>
  231.                         </div>
  232.                     </div>
  233.                     <div id="ex-csv_product-format" class="card-body">
  234.                         <table class="table table-striped table-bordered">
  235.                             <tbody>
  236.                             {% for header, key in headers %}
  237.                                 <tr>
  238.                                     <th class="w-25 align-middle table-ec-lightGray" id="file_format_box__header--{{ loop.index }}">{{ header }}
  239.                                         {% if key.required %}
  240.                                             <span class="badge bg-primary ms-1">{{ 'admin.common.required'|trans }}</span>
  241.                                         {% endif %}
  242.                                     </th>
  243.                                     <td class="align-middle">
  244.                                         {% if key.description %}
  245.                                             {{ key.description|trans }}
  246.                                         {% endif %}
  247.                                     </td>
  248.                                 </tr>
  249.                             {% endfor %}
  250.                             </tbody>
  251.                         </table>
  252.                     </div>
  253.                 </div>
  254.             </div>
  255.         </div>
  256.     </div>
  257.     <div class="modal fade" id="importCsvModal" tabindex="-1" role="dialog" aria-labelledby="importCsvModal" aria-hidden="true" data-bs-keyboard="false" data-bs-backdrop="static">
  258.         <div class="modal-dialog" role="document">
  259.             <div class="modal-content">
  260.                 <div class="modal-header">
  261.                     <h5 class="modal-title fw-bold">{{ 'admin.product.product_csv_upload__title'|trans }}</h5>
  262.                     <button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="Close"></button>
  263.                 </div>
  264.                 <div class="modal-body text-start">
  265.                     <span class="badge"></span>
  266.                     <p class="text-start">{{ 'admin.product.product_csv_upload__message'|trans }}</p>
  267.                     <div class="progress mb-1" style="display: none">
  268.                         <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 0%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
  269.                     </div>
  270.                     <ul id="bulkMessages"></ul>
  271.                     <div id="toggleMessages" style="display: none;">
  272.                         <i class="fa fw-bold me-1 fa-plus-square-o"></i><span>{{ 'admin.common.open_detail'|trans }}</span>
  273.                     </div>
  274.                 </div>
  275.                 <div class="modal-footer">
  276.                     <button class="btn btn-ec-sub" type="button" data-bs-dismiss="modal">{{ 'admin.common.cancel'|trans }}</button>
  277.                     <button class="btn btn-ec-conversion" type="button" id="importCsv">{{ 'admin.common.bulk_registration' | trans }}</button>
  278.                     <button class="btn btn-ec-regular" id="importCsvDone" style="display: none" type="button" data-bs-dismiss="modal">{{ 'admin.common.close'|trans }}</button>
  279.                 </div>
  280.             </div>
  281.         </div>
  282.     </div>
  283. {% endblock %}