From d4f7b318e77868187dec50a9472ad8531d4ae83c Mon Sep 17 00:00:00 2001 From: Meron Ogbai Date: Thu, 9 Sep 2021 06:18:46 +0300 Subject: [PATCH 1/8] Add haml and css for custom modals --- app/assets/stylesheets/admin/orders.scss | 30 +++++++++++++++++++ .../admin/shared/_custom-alert.html.haml | 8 +++++ .../admin/shared/_custom-confirm.html.haml | 11 +++++++ 3 files changed, 49 insertions(+) create mode 100644 app/views/spree/admin/shared/_custom-alert.html.haml create mode 100644 app/views/spree/admin/shared/_custom-confirm.html.haml diff --git a/app/assets/stylesheets/admin/orders.scss b/app/assets/stylesheets/admin/orders.scss index 4858c0685a..2f66371ab4 100644 --- a/app/assets/stylesheets/admin/orders.scss +++ b/app/assets/stylesheets/admin/orders.scss @@ -134,3 +134,33 @@ table.index td.actions { color: $warning-red; } } + +.modal { + display: none; + position: fixed; + z-index: 1; + left: 0; + top: 0; + width: 100%; + height: 100%; + background-color: rgba(0,0,0,0.4); + text-align: center; + + .modal-content { + background-color: $color-1; + margin: 15% auto; + padding: 1.2em; + width: 30%; + border-radius: 1em; + border: 1px solid $color-border; + } + + .modal-title { + font-size: $h4-size; + } + + .message { + font-size: $h5-size; + padding: 1.2em 0; + } +} diff --git a/app/views/spree/admin/shared/_custom-alert.html.haml b/app/views/spree/admin/shared/_custom-alert.html.haml new file mode 100644 index 0000000000..0120631e41 --- /dev/null +++ b/app/views/spree/admin/shared/_custom-alert.html.haml @@ -0,0 +1,8 @@ +#custom-alert.modal + .modal-content + .modal-title + %i.icon-warning-sign + .message + .action-buttons + %button.confirm + = t(:ok) diff --git a/app/views/spree/admin/shared/_custom-confirm.html.haml b/app/views/spree/admin/shared/_custom-confirm.html.haml new file mode 100644 index 0000000000..77e98b8f9a --- /dev/null +++ b/app/views/spree/admin/shared/_custom-confirm.html.haml @@ -0,0 +1,11 @@ +#custom-confirm.modal + .modal-content + .modal-title + %i.icon-question-sign + .message + = t(:are_you_sure) + .action-buttons + %button.cancel + = t(:cancel) + %button.confirm.red + = t(:ok) From 2de75ef7f40fd7a1beb5a3f25acc549b6f0858ac Mon Sep 17 00:00:00 2001 From: Meron Ogbai Date: Thu, 9 Sep 2021 06:22:55 +0300 Subject: [PATCH 2/8] Remove default rails confirm behavior --- app/views/spree/admin/orders/_shipment_manifest.html.haml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/views/spree/admin/orders/_shipment_manifest.html.haml b/app/views/spree/admin/orders/_shipment_manifest.html.haml index 28a1596f06..63609e4336 100644 --- a/app/views/spree/admin/orders/_shipment_manifest.html.haml +++ b/app/views/spree/admin/orders/_shipment_manifest.html.haml @@ -22,4 +22,4 @@ = link_to '', '#', :class => 'save-item icon_link icon-ok no-text with-tip', :data => {'shipment-number' => shipment.number, 'variant-id' => item.variant.id, :action => 'save'}, :title => t('actions.save'), :style => 'display: none' = link_to '', '#', :class => 'cancel-item icon_link icon-cancel no-text with-tip', :data => {:action => 'cancel'}, :title => t('actions.cancel'), :style => 'display: none' = link_to '', '#', :class => 'edit-item icon_link icon-edit no-text with-tip', :data => {:action => 'edit'}, :title => t('actions.edit') - = link_to '', '#', :class => 'delete-item icon-trash no-text with-tip', :data => {'shipment-number' => shipment.number, 'variant-id' => item.variant.id, :action => 'remove', :confirm => t(:are_you_sure)}, :title => t('actions.delete') + = link_to '', '#', :class => 'delete-item icon-trash no-text with-tip', :data => {'shipment-number' => shipment.number, 'variant-id' => item.variant.id, :action => 'remove'}, :title => t('actions.delete') From 4806ba540f33a561761c46682e4eb7bd77d31058 Mon Sep 17 00:00:00 2001 From: Meron Ogbai Date: Thu, 9 Sep 2021 06:23:39 +0300 Subject: [PATCH 3/8] Add modals in orders page --- app/views/spree/admin/orders/_shipment_manifest.html.haml | 3 +++ 1 file changed, 3 insertions(+) diff --git a/app/views/spree/admin/orders/_shipment_manifest.html.haml b/app/views/spree/admin/orders/_shipment_manifest.html.haml index 63609e4336..1a9c221f74 100644 --- a/app/views/spree/admin/orders/_shipment_manifest.html.haml +++ b/app/views/spree/admin/orders/_shipment_manifest.html.haml @@ -23,3 +23,6 @@ = link_to '', '#', :class => 'cancel-item icon_link icon-cancel no-text with-tip', :data => {:action => 'cancel'}, :title => t('actions.cancel'), :style => 'display: none' = link_to '', '#', :class => 'edit-item icon_link icon-edit no-text with-tip', :data => {:action => 'edit'}, :title => t('actions.edit') = link_to '', '#', :class => 'delete-item icon-trash no-text with-tip', :data => {'shipment-number' => shipment.number, 'variant-id' => item.variant.id, :action => 'remove'}, :title => t('actions.delete') + += render 'spree/admin/shared/custom-alert' += render 'spree/admin/shared/custom-confirm' From 95e294c9ec01b933405a78f4587ac9755fb3e7fc Mon Sep 17 00:00:00 2001 From: Meron Ogbai Date: Thu, 9 Sep 2021 06:25:03 +0300 Subject: [PATCH 4/8] Use custom modals for deleting orders --- .../spree/orders/variant_autocomplete.js.erb | 44 ++++++++++++++----- 1 file changed, 32 insertions(+), 12 deletions(-) diff --git a/app/assets/javascripts/admin/spree/orders/variant_autocomplete.js.erb b/app/assets/javascripts/admin/spree/orders/variant_autocomplete.js.erb index e92965c190..21aaa15226 100644 --- a/app/assets/javascripts/admin/spree/orders/variant_autocomplete.js.erb +++ b/app/assets/javascripts/admin/spree/orders/variant_autocomplete.js.erb @@ -45,7 +45,7 @@ $(document).ready(function() { if (quantity > maxQuantity) { quantity = maxQuantity; save.parents('tr').find('input.line_item_quantity').val(maxQuantity); - alert(t("js.admin.orders.quantity_adjusted")); + showAlert(t("js.admin.orders.quantity_adjusted")); } toggleItemEdit(); @@ -54,18 +54,21 @@ $(document).ready(function() { } $('a.save-item').click(handle_save_click); - handle_delete_click = function(e, confirmed){ - if (confirmed) { - var del = $(this); - var shipment_number = del.data('shipment-number'); - var variant_id = del.data('variant-id'); + handle_delete_click = function(e){ + var del = $(this).parent().parent().parent(); + del.hide() + var shipment_number = del.data('shipment-number'); + var variant_id = del.data('variant-id'); - toggleItemEdit(); + toggleItemEdit(); - adjustItems(shipment_number, variant_id, 0); - } + adjustItems(shipment_number, variant_id, 0); } - $('a.delete-item').on('confirm:complete', handle_delete_click); + + $('a.delete-item').click((event) => { + showConfirm(handle_delete_click); + }); + } }); @@ -74,7 +77,7 @@ adjustItems = function(shipment_number, variant_id, quantity){ var inventory_units = _.where(shipment.inventory_units, {variant_id: variant_id}); if (quantity == 0 && inventory_units.length == shipment.inventory_units.length) { - alert(t("js.admin.orders.cannot_remove_last_item")); + showAlert(t("js.admin.orders.cannot_remove_last_item")); return; } @@ -91,7 +94,7 @@ adjustItems = function(shipment_number, variant_id, quantity){ url += '.json'; if (new_quantity == 0) { - alert(t("js.admin.orders.quantity_unchanged")); + showAlert(t("js.admin.orders.quantity_unchanged")); } else { $.ajax({ type: "PUT", @@ -154,3 +157,20 @@ addVariantFromStockLocation = function() { } return 1 } + +showAlert = function(message) { + $('#custom-alert .message').text(message) + $('#custom-alert .confirm').click(function(e) { + $('#custom-alert').hide() + }) + $('#custom-alert').show() +} + +showConfirm = function(callback) { + $('#custom-confirm').data($(event.target).data()); + $('#custom-confirm').show(); + $('#custom-confirm button.confirm').click(callback); + $('#custom-confirm button.cancel').click((event) => { + $('#custom-confirm').hide() + }); +} From 4eda15fb71e12b705270a7fc3c46081532987381 Mon Sep 17 00:00:00 2001 From: Meron Ogbai Date: Thu, 9 Sep 2021 11:57:56 +0300 Subject: [PATCH 5/8] Expect custom modal instead of alert in order spec --- spec/features/admin/order_spec.rb | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/spec/features/admin/order_spec.rb b/spec/features/admin/order_spec.rb index a144755045..88ae2e6753 100644 --- a/spec/features/admin/order_spec.rb +++ b/spec/features/admin/order_spec.rb @@ -144,7 +144,7 @@ feature ' fill_in(:quantity, with: max_quantity + 1) find("a.save-item").click end - accept_js_alert + find("button.confirm").click expect(page).to_not have_content "Loading..." within("tr.stock-item", text: order.products.first.name) do From aed84912a3bc425511f1e270a2fdbc8fbe81f25d Mon Sep 17 00:00:00 2001 From: Meron Ogbai Date: Sat, 11 Sep 2021 13:10:33 +0300 Subject: [PATCH 6/8] Use selector to get del element --- .../admin/spree/orders/variant_autocomplete.js.erb | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/app/assets/javascripts/admin/spree/orders/variant_autocomplete.js.erb b/app/assets/javascripts/admin/spree/orders/variant_autocomplete.js.erb index 21aaa15226..0afe75b41c 100644 --- a/app/assets/javascripts/admin/spree/orders/variant_autocomplete.js.erb +++ b/app/assets/javascripts/admin/spree/orders/variant_autocomplete.js.erb @@ -54,8 +54,8 @@ $(document).ready(function() { } $('a.save-item').click(handle_save_click); - handle_delete_click = function(e){ - var del = $(this).parent().parent().parent(); + handle_delete_click = function(elementSelector){ + var del = $(elementSelector); del.hide() var shipment_number = del.data('shipment-number'); var variant_id = del.data('variant-id'); @@ -66,7 +66,9 @@ $(document).ready(function() { } $('a.delete-item').click((event) => { - showConfirm(handle_delete_click); + showConfirm(() => { + handle_delete_click('#custom-confirm'); + }); }); } From a065a9261637b8f3af9096dadb948f1504d6ff2f Mon Sep 17 00:00:00 2001 From: Meron Ogbai Date: Sat, 11 Sep 2021 13:11:18 +0300 Subject: [PATCH 7/8] Reorganize alert and confirm code --- .../spree/orders/variant_autocomplete.js.erb | 38 ++++++++++++------- 1 file changed, 24 insertions(+), 14 deletions(-) diff --git a/app/assets/javascripts/admin/spree/orders/variant_autocomplete.js.erb b/app/assets/javascripts/admin/spree/orders/variant_autocomplete.js.erb index 0afe75b41c..76a7c5e89d 100644 --- a/app/assets/javascripts/admin/spree/orders/variant_autocomplete.js.erb +++ b/app/assets/javascripts/admin/spree/orders/variant_autocomplete.js.erb @@ -2,6 +2,9 @@ $(document).ready(function() { + initAlert() + initConfirm() + if ($('#variant_autocomplete_template').length > 0) { window.variantTemplate = Handlebars.compile($('#variant_autocomplete_template').text()); window.variantStockTemplate = Handlebars.compile($('#variant_autocomplete_stock_template').text()); @@ -45,7 +48,7 @@ $(document).ready(function() { if (quantity > maxQuantity) { quantity = maxQuantity; save.parents('tr').find('input.line_item_quantity').val(maxQuantity); - showAlert(t("js.admin.orders.quantity_adjusted")); + ofnAlert(t("js.admin.orders.quantity_adjusted")); } toggleItemEdit(); @@ -66,7 +69,7 @@ $(document).ready(function() { } $('a.delete-item').click((event) => { - showConfirm(() => { + ofnConfirm(() => { handle_delete_click('#custom-confirm'); }); }); @@ -79,7 +82,7 @@ adjustItems = function(shipment_number, variant_id, quantity){ var inventory_units = _.where(shipment.inventory_units, {variant_id: variant_id}); if (quantity == 0 && inventory_units.length == shipment.inventory_units.length) { - showAlert(t("js.admin.orders.cannot_remove_last_item")); + ofnAlert(t("js.admin.orders.cannot_remove_last_item")); return; } @@ -96,7 +99,7 @@ adjustItems = function(shipment_number, variant_id, quantity){ url += '.json'; if (new_quantity == 0) { - showAlert(t("js.admin.orders.quantity_unchanged")); + ofnAlert(t("js.admin.orders.quantity_unchanged")); } else { $.ajax({ type: "PUT", @@ -160,19 +163,26 @@ addVariantFromStockLocation = function() { return 1 } -showAlert = function(message) { - $('#custom-alert .message').text(message) +initAlert = function() { $('#custom-alert .confirm').click(function(e) { - $('#custom-alert').hide() + $('#custom-alert').hide(); }) - $('#custom-alert').show() } -showConfirm = function(callback) { - $('#custom-confirm').data($(event.target).data()); - $('#custom-confirm').show(); - $('#custom-confirm button.confirm').click(callback); - $('#custom-confirm button.cancel').click((event) => { - $('#custom-confirm').hide() +initConfirm = function() { + $('#custom-confirm button.cancel').click(function(e) { + $('#custom-confirm').hide(); }); } + + +ofnAlert = function(message) { + $('#custom-alert .message').text(message); + $('#custom-alert').show(); +} + +ofnConfirm = function(callback) { + $('#custom-confirm').data($(event.target).data()); + $('#custom-confirm button.confirm').click(callback); + $('#custom-confirm').show(); +} From 94ff59ebabefdc1f2356b9219366a537bab5636b Mon Sep 17 00:00:00 2001 From: Meron Ogbai Date: Sat, 11 Sep 2021 13:37:14 +0300 Subject: [PATCH 8/8] Make order spec click clearer --- spec/features/admin/order_spec.rb | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/spec/features/admin/order_spec.rb b/spec/features/admin/order_spec.rb index 88ae2e6753..75ac266554 100644 --- a/spec/features/admin/order_spec.rb +++ b/spec/features/admin/order_spec.rb @@ -144,7 +144,7 @@ feature ' fill_in(:quantity, with: max_quantity + 1) find("a.save-item").click end - find("button.confirm").click + click_button("OK") expect(page).to_not have_content "Loading..." within("tr.stock-item", text: order.products.first.name) do