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

Open in your IDE?
  1. <script>
  2.     $(function() {
  3.         // 決済状況 列見出し名
  4.         var PAY_STATUS_COL_LABEL = '決済状況';
  5.         // 決済状況 追加先の列番号
  6.         var PAY_STATUS_COL_BEFORE_INDEX = 4;
  7.         // 注文一覧テーブル要素
  8.         var $orderTable       = $('#search_result');
  9.         var $orderTableHeader = $orderTable.find('thead');
  10.         var $orderTableBody   = $orderTable.find('tbody');
  11.         // テーブルヘッダ行に決済状況列を追加
  12.         $orderTableHeader
  13.             .find('th:eq('+(PAY_STATUS_COL_BEFORE_INDEX-1)+')')
  14.             .after('<th class="border-top-0 pt-2 pb-2 text-center text-nowrap">'+PAY_STATUS_COL_LABEL+'</th>');
  15.         // 注文レコードに決済状況列を追加
  16.         var orders = JSON.parse('{{ orders|json_encode|raw}}');
  17.         var $orderRowList = $orderTableBody.find('tr');
  18.         var count = 0;
  19.         $.each(orders, function(i, order) {
  20.             $.each(order.Shippings, function(j, shipping) {
  21.                 var paymentStatusText = order.PaymentStatus ? order.PaymentStatus.name : '';
  22.                 if (order.payment_method === '{{ virtual_account }}' && order.PaymentStatus && order.PaymentStatus.id === parseInt('{{ payment_status_id }}')) {
  23.                     paymentStatusText += order.PaymentStatus ? '<i class="fa fa-exclamation-circle text-secondary" aria-hidden="true" data-bs-toggle="tooltip" data-placement="top" title="イプシロン管理画面で入金金額を確認してください"></i>' : '';
  24.                 }
  25.                 $($orderRowList[count]).find('input[name="ids[]"]').attr({'shipping-id': shipping.id});
  26.                 $($orderRowList[count])
  27.                     .find('td:eq('+(PAY_STATUS_COL_BEFORE_INDEX-1)+')')
  28.                     .after('<td class="align-middle text-center">'+paymentStatusText+'</td>');
  29.                 count++;
  30.             });
  31.         });
  32.         $('[data-bs-toggle="tooltip"]').tooltip();
  33.     {# ↓EC-CUBE本体側 confirmationModal_js.twig(L41-)を参考に実装 ↓ #}
  34.         var BulkPayStatusUpdate = function(modal, eventTarget) {
  35.             ConfirmationModal.call(this, modal);
  36.             this.eventTarget = eventTarget;
  37.         };
  38.         // extend super class
  39.         BulkPayStatusUpdate.prototype = Object.create(ConfirmationModal.prototype, {
  40.             constructor: {
  41.                 value: ConfirmationModal
  42.             },
  43.             modalTitle: {
  44.                 value: '決済状況の変更'
  45.             },
  46.             getTotalCount: {
  47.                 value: function() {
  48.                     var $checkedList = $('input[data-id]:checked');
  49.                     // 注文IDの重複を除外
  50.                     var orderIdList = $checkedList.get().reduce(function(acc, val, idx) {
  51.                         var orderId = val.getAttribute('shipping-id');
  52.                         if (acc.indexOf(orderId) === -1) {
  53.                             acc.push(orderId);
  54.                         }
  55.                         return acc;
  56.                     }, []);
  57.                     return orderIdList.length;
  58.                 }
  59.             },
  60.             progress: {
  61.                 value: function(result, progress) {
  62.                     // プログレスバーの更新
  63.                     $('.progress-bar', this.modal).css('width', (++this.currentCount / this.totalCount * 100) + '%');
  64.                     if (result['message']) {
  65.                         var badge = (result['status'] == 'OK')
  66.                             ? '<span class="badge bg-success">OK</span>'
  67.                             : '<span class="badge bg-warning">NOTICE</span>';
  68.                         $('<li>'+badge+' </li>')
  69.                             .append($('<span></span>').text(result['message']))
  70.                             .appendTo('#bulkErrors');
  71.                     }
  72.                     if (this.currentCount >= this.totalCount) {
  73.                         progress.resolve();
  74.                     }
  75.                 }
  76.             },
  77.             getPromises: {
  78.                 value: function(progress) {
  79.                     var requestOrderIdList = [];
  80.                     var promises = [];
  81.                     // チェックされているチェックボックスごとに処理を行う
  82.                     $('input[data-id]:checked').each(function(idx, elm) {
  83.                         var shippingId = elm.getAttribute('shipping-id');
  84.                         var params = {
  85.                             paymentStatusId: $('#gmo_epsilon_option_bulk_payment_status').val(),
  86.                             bulk: true,
  87.                             shippingId: shippingId
  88.                         };
  89.                         var url = '{{ url('eccube_payment_lite42_admin_change_payment_status') }}'
  90.                         // 既にリクエストが行われている注文の場合はスキップ
  91.                         if (requestOrderIdList.indexOf(shippingId) !== -1) {
  92.                             return;
  93.                         }
  94.                         // リクエストを行う配送IDを保持
  95.                         requestOrderIdList.push(shippingId);
  96.                         var promise = $.post(url, params)
  97.                             .fail(function(err) {
  98.                                 progress.reject();
  99.                                 ConfirmationModal.prototype.fail.call(this);
  100.                             })
  101.                             .always(function(data) {
  102.                                 progress.notifyWith(data);
  103.                             });
  104.                         promises.push(promise);
  105.                     });
  106.                     return promises;
  107.                 }
  108.             }
  109.         });
  110.         // プログレスバーの表示を制御
  111.         var handleClickUpdatePayStatus = function(e) {
  112.             var eventTarget = $(e.currentTarget);
  113.             var modal = $('#sentUpdateModal');
  114.             if (!$('#gmo_epsilon_option_bulk_payment_status').val()) {
  115.                 alert('決済状況を選択してください');
  116.                 return;
  117.             }
  118.             updater = new BulkPayStatusUpdate(modal, eventTarget);
  119.             // modal.modal();
  120.             var bootstrapModal = new bootstrap.Modal(modal.get(0));
  121.             bootstrapModal.show();
  122.             modal.find('.modal-title').text(updater.modalTitle);
  123.             modal.find('.modal-body > p.modal-message').text("{{ 'admin.order.bulk_action__in_progress_message'|trans }}");
  124.             modal.find('button').hide();
  125.             $('#bulk-options').hide();
  126.             modal.find('.progress').show();
  127.             updater.totalCount = updater.getTotalCount();
  128.             var progress = new $.Deferred();
  129.             progress.progress(function() {
  130.                 updater.progress(this, progress);
  131.             })
  132.                 .fail(function() {
  133.                     updater.fail(this);
  134.                 })
  135.                 .always(function() {
  136.                     updater.always(this);
  137.                 });
  138.             updater.getPromises(progress);
  139.         };
  140.          // ↑EC-CUBE本体側 confirmationModal_js.twig(L41-)を参考に実装 ↑
  141.         // 決済状況更新用のプルダウン追加
  142.         var $target = $('#btn_bulk_status').parents('.btn-bulk-wrapper');
  143.         var contents =
  144.             '<div class="col btn-bulk-wrapper d-none">' +
  145.                 '<div class="d-inline-block mr-2">' +
  146.                     '<select class="custom-select" id="gmo_epsilon_option_bulk_payment_status">' +
  147.                         '<option value="" selected>決済状況の変更</option>' +
  148.                         {% for paymentStatus in PaymentStatuses %}
  149.                             '<option value="{{ paymentStatus.id }}">{{ paymentStatus.name }}</option>' +
  150.                         {% endfor %}
  151.                     '</select>' +
  152.                 '</div>' +
  153.                 '<button type="button" id="gmo_epsilon_btn_bulk_payment_status" class="btn btn-ec-regular mr-2 progressModal" data-type="status" data-bulk-update="true" data-submit="bulk">' +
  154.                     '決定' +
  155.                 '</button>' +
  156.             '</div>';
  157.         $target.css('max-width', '240px').after(contents);
  158.         $('#gmo_epsilon_btn_bulk_payment_status').on('click', handleClickUpdatePayStatus);
  159.     });
  160. </script>