app/Plugin/VeriTrans4G2/Resource/template/admin/Order/index.twig line 1

Open in your IDE?
  1. {#
  2. Copyright (c) 2018 VeriTrans Inc., a Digital Garage company. All rights reserved.
  3. http://www.veritrans.co.jp/
  4. #}
  5. <script>
  6. $(function() {
  7.     // 決済状況 列見出し名
  8.     var PAY_STATUS_COL_LABEL = '決済状況';
  9.     // 決済状況 追加先の列番号
  10.     var PAY_STATUS_COL_BEFORE_INDEX = 4;
  11.     // 決済状況 売上
  12.     var PAY_STATUS_CAPTURE = 2;
  13.     // 決済状況 取消
  14.     var PAY_STATUS_CANCEL = 3;
  16.     var shippingInfoMap = JSON.parse('{{ vt4g.shippingInfoMap|json_encode(constant('JSON_UNESCAPED_UNICODE'))|raw }}');
  17.     var payStatusLabel  = JSON.parse('{{ vt4g.payStatusLabel|json_encode(constant('JSON_UNESCAPED_UNICODE'))|raw }}');
  19.     // 注文一覧テーブル要素
  20.     var $orderTable       = $('#search_result');
  21.     var $orderTableHeader = $orderTable.find('thead');
  22.     var $orderTableBody   = $orderTable.find('tbody');
  24.     // テーブルヘッダ行に決済状況列を追加
  25.     $orderTableHeader.find('th:eq('+(PAY_STATUS_COL_BEFORE_INDEX-1)+')').after('<th class="border-top-0 pt-2 pb-2 text-center text-nowrap">'+PAY_STATUS_COL_LABEL+'</th>');
  27.     // 注文レコードに決済状況列を追加
  28.     var $orderRowList = $orderTableBody.find('tr');
  29.     $.each($orderRowList, function(idx, row) {
  30.         var $row          = $(row);
  31.         var $idCheckbox   = $row.find('input[name="ids[]"]');
  32.         var shippingId    = $idCheckbox.val();
  33.         var orderId       = shippingInfoMap[shippingId]['orderId'];
  34.         var captureUrl    = '{{ url('vt4g_admin_order_edit_capture', {orderId: '0'}) }}'.replace('vt4g_edit/0', 'vt4g_edit/'+orderId);
  35.         var cancelUrl     = '{{ url('vt4g_admin_order_edit_cancel', {orderId: '0'}) }}'.replace('vt4g_edit/0', 'vt4g_edit/'+orderId);
  36.         var rollbackUrl   = '{{ url('vt4g_admin_order_edit_rollback', {orderId: '0'}) }}'.replace('vt4g_edit/0', 'vt4g_edit/'+orderId);
  37.         var payStatusCode = shippingInfoMap[shippingId]['payStatus'] || null;
  38.         var payStatus     = payStatusCode
  39.             ? payStatusLabel[payStatusCode]
  40.             : '';
  42.         $idCheckbox.attr({
  43.             'data-order-id': orderId,
  44.             'data-capture-url': captureUrl,
  45.             'data-cancel-url': cancelUrl,
  46.             'data-rollback-url': rollbackUrl
  47.         });
  49.         $row.find('td:eq('+(PAY_STATUS_COL_BEFORE_INDEX-1)+')').after('<td class="align-middle text-center">'+payStatus+'</td>');
  50.     });
  52.     {# ↓EC-CUBE本体側 confirmationModal_js.twig(L41-)を参考に実装 ↓ #}
  53.     var BulkPayStatusUpdate = function(modal, eventTarget) {
  54.         ConfirmationModal.call(this, modal);
  55.         this.eventTarget = eventTarget;
  56.     };
  57.     // extend super class
  58.     BulkPayStatusUpdate.prototype = Object.create(ConfirmationModal.prototype, {
  59.         constructor: {
  60.             value: ConfirmationModal
  61.         },
  62.         modalTitle: {
  63.             value: '決済状況の変更'
  64.         },
  65.         getTotalCount: {
  66.             value: function() {
  67.                 var $checkedList = $('input[data-id]:checked');
  68.                 // 注文IDの重複を除外
  69.                 var orderIdList = $checkedList.get().reduce(function(acc, val, idx) {
  70.                     var orderId = val.getAttribute('data-order-id');
  71.                     if (acc.indexOf(orderId) === -1) {
  72.                         acc.push(orderId);
  73.                     }
  75.                     return acc;
  76.                 }, []);
  78.                 return orderIdList.length;
  79.             }
  80.         },
  81.         progress: {
  82.             value: function(result, progress) {
  83.                 // プログレスバーの更新
  84.                 $('.progress-bar', this.modal).css('width', (++this.currentCount / this.totalCount * 100) + '%');
  85.                 if (result['message']) {
  86.                     var badge = (result['status'] == 'OK')
  87.                         ? '<span class="badge bg-success text-dark">OK</span>'
  88.                         : '<span class="badge bg-warning text-dark">NOTICE</span>';
  89.                     $('<li>'+badge+' </li>')
  90.                         .append($('<span></span>').text(result['message']))
  91.                         .appendTo('#bulkErrors');
  92.                 }
  93.                 if (this.currentCount >= this.totalCount) {
  94.                     progress.resolve();
  95.                 }
  96.             }
  97.         },
  98.         getPromises: {
  99.             value: function(progress) {
  100.                 var requestOrderIdList = [];
  101.                 var promises = [];
  103.                 // チェックされているチェックボックスごとに処理を行う
  104.                 $('input[data-id]:checked').each(function(idx, elm) {
  105.                     var orderId = elm.getAttribute('data-order-id');
  106.                     var url = ($('#vt4g_option_bulk_pay_status').val() == PAY_STATUS_CAPTURE)
  107.                         ? elm.getAttribute('data-capture-url')
  108.                         : elm.getAttribute('data-cancel-url');
  109.                     var params = {bulk: true};
  111.                     // 既にリクエストが行われている注文の場合はスキップ
  112.                     if (requestOrderIdList.indexOf(orderId) !== -1) {
  113.                         return;
  114.                     }
  116.                     // リクエストを行う注文IDを保持
  117.                     requestOrderIdList.push(orderId);
  119.                     var promise = $.post(url, params)
  120.                         .fail(function(err) {
  121.                             progress.reject();
  122.                             ConfirmationModal.prototype.fail.call(this);
  123.                         })
  124.                         .always(function(data) {
  125.                             progress.notifyWith(data);
  126.                         });
  128.                     promises.push(promise);
  129.                 });
  131.                 return promises;
  132.             }
  133.         }
  134.     });
  136.     // プログレスバーの表示を制御
  137.     var handleClickUpdatePayStatus = function(e) {
  138.         var eventTarget = $(e.currentTarget);
  139.         var modal = $('#sentUpdateModal');
  141.         if (!$('#vt4g_option_bulk_pay_status').val()) {
  142.             alert('決済状況を選択してください');
  143.             return;
  144.         }
  145.         updater = new BulkPayStatusUpdate(modal, eventTarget);
  147.         var bootstrapModal = new bootstrap.Modal(modal.get(0));
  148.         bootstrapModal.show();
  150.         modal.find('.modal-title').text(updater.modalTitle);
  151.         modal.find('.modal-body > p.modal-message').text("{{ 'admin.order.bulk_action__in_progress_message'|trans }}");
  152.         modal.find('button').hide();
  153.         $('#bulk-options').hide();
  154.         modal.find('.progress').show();
  155.         updater.totalCount = updater.getTotalCount();
  156.         var progress = new $.Deferred();
  157.         progress.progress(function() {
  158.             updater.progress(this, progress);
  159.         })
  160.         .fail(function() {
  161.             updater.fail(this);
  162.         })
  163.         .always(function() {
  164.             updater.always(this);
  165.         });
  167.         updater.getPromises(progress);
  168.     };
  169.     {# ↑EC-CUBE本体側 confirmationModal_js.twig(L41-)を参考に実装 ↑ #}
  171.     // 決済状況更新用のプルダウン追加
  172.     var $target = $('#btn_bulk_status').parents('.btn-bulk-wrapper');
  173.     var contents =
  174.         '<div class="col btn-bulk-wrapper d-none">'+
  175.         '   <div class="d-inline-block mr-2">'+
  176.         '       <select class="form-select" id="vt4g_option_bulk_pay_status">'+
  177.         '           <option value="" selected>決済状況の変更</option>'+
  178.                     {% for value, label in vt4g.controlPayStatusMap %}
  179.         '                <option value="{{ value }}">{{ label }}</option>'+
  180.                     {% endfor %}
  181.         '       </select>'+
  182.         '   </div>'+
  183.         '   <button type="button" id="vt4g_btn_bulk_pay_status" class="btn btn-ec-regular mr-2 progressModal" data-type="status" data-bulk-update="true" data-submit="bulk">'+
  184.         '       決定'+
  185.         '   </button>'+
  186.         '</div>';
  187.     $target.css('max-width', '240px').after(contents);
  188.     $target.addClass('col-auto');
  190.     $('#vt4g_btn_bulk_pay_status').on('click', handleClickUpdatePayStatus);
  193.     // ロールバック処理
  194.     function BulkRollbackOrder(modal, relatedTarget) {
  195.         ConfirmationModal.call(this, modal, relatedTarget);
  196.     }
  197.     // extends ConfirmationModal
  198.     BulkRollbackOrder.prototype = Object.create(ConfirmationModal.prototype, {
  199.         constructor: {
  200.             value: ConfirmationModal
  201.         },
  202.         modalTitle: {
  203.             value: "{{ 'vt4g_plugin.admin.order.rollback.modal.title'|trans }}"
  204.         },
  205.         modalMessage: {
  206.             value: "{{ 'vt4g_plugin.admin.order.rollback.modal.message'|trans }}"
  207.         },
  208.         modalButton: {
  209.             value: "{{ 'vt4g_plugin.admin.order.rollback.modal.button'|trans }}"
  210.         },
  211.         getTotalCount: {
  212.             value: function() {
  213.                 var $checkedList = $('input[data-id]:checked');
  214.                 // 注文IDの重複を除外
  215.                 var orderIdList = $checkedList.get().reduce(function(acc, val, idx) {
  216.                     var orderId = val.getAttribute('data-order-id');
  217.                     if (acc.indexOf(orderId) === -1) {
  218.                         acc.push(orderId);
  219.                     }
  221.                     return acc;
  222.                 }, []);
  224.                 return orderIdList.length;
  225.             }
  226.         },
  227.         progress: {
  228.             value: function(result, progress) {
  229.                 // プログレスバーの更新
  230.                 $('.progress-bar', this.modal).css('width', (++this.currentCount / this.totalCount * 100) + '%');
  231.                 if (result['message']) {
  232.                     var badge = (result['status'] == 'OK')
  233.                         ? '<span class="badge bg-success text-dark">OK</span>'
  234.                         : '<span class="badge bg-warning text-dark">NOTICE</span>';
  235.                     $('<li>'+badge+' </li>')
  236.                         .append($('<span></span>').text(result['message']))
  237.                         .appendTo('#bulkVt4gRollbackResult');
  238.                 }
  239.                 if (this.currentCount >= this.totalCount) {
  240.                     progress.resolve();
  241.                     $('#bulkVt4gRollbackComplete').show();
  242.                 }
  243.             }
  244.         },
  245.         getPromises: {
  246.             value: function(progress) {
  247.                 var requestOrderIdList = [];
  248.                 var postList = [];
  250.                 // チェックされているチェックボックスごとに処理を行う
  251.                 $('input[data-id]:checked').each(function(idx, elm) {
  252.                     var orderId = elm.getAttribute('data-order-id');
  254.                     // 既にリクエストが行われている注文の場合はスキップ
  255.                     if (requestOrderIdList.indexOf(orderId) !== -1) {
  256.                         return;
  257.                     }
  259.                     requestOrderIdList.push(orderId);
  260.                     postList.push({
  261.                         'url': elm.getAttribute('data-rollback-url')
  262.                     });
  263.                 });
  265.                 // confirmationModal_js.twigのBulkStatusUpdateにあるコメントに倣って同期処理で実行
  266.                 var callback = function () {
  267.                     var urls = postList.shift();
  268.                     var url = urls.url;
  269.                     var params = {bulk: true};
  271.                     $.post(url, params)
  272.                         .done(function () {
  273.                             if (postList.length) {
  274.                                 callback();
  275.                             }
  276.                         })
  277.                         .fail(function(err) {
  278.                             progress.reject();
  279.                             ConfirmationModal.prototype.fail.call(this);
  280.                         })
  281.                         .always(function(data) {
  282.                             progress.notifyWith(data);
  283.                         });
  284.                 }
  286.                 callback();
  288.             }
  289.         }
  290.     });
  292.     // ロールバック処理用モーダルの表示を制御
  293.     var handleClickRollbackOrder = function(e) {
  294.         var eventTarget = $(e.currentTarget);
  295.         var modal = $('#vt4gRollbackOrderModal');
  297.         updater = new BulkRollbackOrder(modal, eventTarget);
  299.         var bootstrapModal = new bootstrap.Modal(modal.get(0));
  300.         bootstrapModal.show();
  301.         var eventTarget = $(e.currentTarget);
  304.         $('.modal-title', modal).text(updater.modalTitle);
  305.         $('.modal-body > p.modal-message', modal).text(updater.modalMessage);
  306.         $('#bulkVt4gRollback')
  307.                 .attr({
  308.                     'data-bulk-update': eventTarget.data('bulk-update'),
  309.                     'data-type': eventTarget.data('type'),
  310.                     'data-update-status-url': eventTarget.data('update-status-url'),
  311.                     'data-notify-mail-url': eventTarget.data('notify-mail-url'),
  312.                     'data-update-status-id': eventTarget.data('update-status-id')
  313.                 })
  314.                 .text(updater.modalButton);
  315.     }
  317.     // ロールバック処理用プログレスバーの表示を制御
  318.     var submitRollbackOrder = function(e) {
  319.         var eventTarget = $(e.currentTarget);
  320.         var modal = $('#vt4gRollbackOrderModal');
  322.         updater = new BulkRollbackOrder(modal, eventTarget);
  324.         var bootstrapModal = new bootstrap.Modal(modal.get(0));
  325.         bootstrapModal.show();
  327.         modal.find('.modal-title').text(updater.modalTitle);
  328.         modal.find('.modal-body > p.modal-message').text("{{ 'admin.order.bulk_action__in_progress_message'|trans }}");
  329.         modal.find('button').hide();
  330.         $('#bulk-options').hide();
  331.         modal.find('.progress').show();
  332.         updater.totalCount = updater.getTotalCount();
  333.         var progress = new $.Deferred();
  334.         progress.progress(function() {
  335.             updater.progress(this, progress);
  336.         })
  337.         .fail(function() {
  338.             updater.fail(this);
  339.         })
  340.         .always(function() {
  341.             updater.always(this);
  342.         });
  344.         updater.getPromises(progress);
  345.     }
  347.     var $rollbackButtonTarget = $('#vt4g_btn_bulk_pay_status').parents('.btn-bulk-wrapper');
  348.     var rollbackContents =
  349.         '<div class="col btn-bulk-wrapper d-none">'+
  350.         '   <button type="button" id="vt4g_btn_bulk_rollback_order" class="btn btn-ec-regular mr-2 progressModal" data-type="status" data-bulk-update="true" data-submit="bulk">'+
  351.         '       ベリトランス4G ロールバック'+
  352.         '   </button>'+
  353.         '</div>';
  354.     $rollbackButtonTarget.css('max-width', '240px').after(rollbackContents);
  356.     var $rollbackModalTarget = $('#bulkDeleteModal').parents('.c-primaryCol');
  357.     var rollbackModalContents =
  358.         '<div class="modal fade" id="vt4gRollbackOrderModal" tabindex="-1" role="dialog" aria-labelledby="vt4gRollbackOrderModal" aria-hidden="true" data-bs-keyboard="false" data-bs-backdrop="static">'+
  359.         '    <div class="modal-dialog modal-lg" role="document">'+
  360.         '        <div class="modal-content">'+
  361.         '            <div class="modal-header">'+
  362.         '                <h5 class="modal-title fw-bold"><!--index.twig--></h5>'+
  363.         '                <button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="Close"></button>'+
  364.         '            </div>'+
  365.         '            <div class="modal-body">'+
  366.         '                <p class="modal-message"></p>'+
  367.         '                <ul id="bulkVt4gRollbackResult"></ul>'+
  368.         '                <div class="progress" style="display: none">'+
  369.         '                    <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>'+
  370.         '                </div>'+
  371.         '            </div>'+
  372.         '            <div class="modal-footer">'+
  373.         '                <button class="btn btn-ec-sub" type="button" data-bs-dismiss="modal">{{ "admin.common.cancel"|trans }}</button>'+
  374.         '                <button id="bulkVt4gRollback" class="btn btn-ec-conversion" type="button"><!--index.twig--></button>'+
  375.         '                <button id="bulkVt4gRollbackComplete" class="btn btn-ec-regular" style="display: none" type="button">{{ "admin.common.close"|trans }}</button>'+
  376.         '            </div>'+
  377.         '        </div>'+
  378.         '    </div>'+
  379.         '</div>';
  380.     $rollbackModalTarget.after(rollbackModalContents);
  382.     $('#vt4g_btn_bulk_rollback_order').on('click', handleClickRollbackOrder);
  383.     $('#bulkVt4gRollback').on('click', submitRollbackOrder);
  385.     // ロールバック処理終了後の閉じるボタン
  386.     $('#bulkVt4gRollbackComplete').on('click', function() {
  387.         location.href = '{{ url('admin_order', { 'resume': 1 }) }}';
  388.     });
  389. });
  390. </script>