Структура, генерирующая динамический обзор счета-фактуры c на основе формы ввода - PullRequest
Новая
       8

Структура, генерирующая динамический обзор счета-фактуры c на основе формы ввода

0 голосов
/ 10 марта 2020

для функции, подобной электронной торговле, я пытаюсь создать обзор счетов для всех выбранных товаров (имя, количество, общая стоимость).

Пример: Пользователь нажимает на продукт, который он хочет забронировать, затем получает форму параметров с параметрами (option.name и option_quantity), относящимися к продукту. если количество превышает единицу, обзор счета выбранных позиций должен обновиться.

Текущий подход: Мой текущий подход заключается в том, чтобы уже создать все строки опций в обзоре счета и скрыть их. После обновления option_quantity строка параметров меняет свое отображение на flex и, таким образом, отображается в обзоре счета.

  • Примечание: форма option_quantity имеет id с option.id, а строка счета, связанная с опцией, имеет class с тем же option.id, так что я могу связать их
  • Пока не знаю, как получить общую цену для этой строки счета-фактуры для соответствующей строки этого варианта.

Вопросы

  • Мой подход кажется довольно громоздким, и мне было интересно, есть ли лучший способ динамически корректировать обзор счета на основе ввода пользователя.

  • Если нет, как я могу получить / вставить общую стоимость опциона в обзор счета-фактуры.

Прочее У меня есть вспомогательные методы для расчета цены опций для приложения rails, но я не уверен, что это поможет, поскольку я использую javascript для обновления цен.

Код

форма 


#where user sees all options belonging to a product_category and can fill in option_quantity
<%= simple_form_for [@booking] do |f|%>
<%= f.simple_fields_for :booking_options do |o| %>
      <div class="row">
        <div class="col-lg-5 col-5 border-bottom mb-3">
          <%= o.object.option.name %>
          <%= o.input :option_id, as: :hidden %>
        </div>
        <div class="col-lg-3 col-7 border-bottom mb-3">
          <b> <%= number_to_currency(online_booking_option_price(o.object.option, Date.parse(arrival), Date.parse(departure)), :unit=> @currency ) %></b>
        </div>
        <div class="col-lg-3 col-7 border-bottom mb-3">
          <%= o.input :option_quantity, label: false, collection: 1..20, :input_html => { :value => 0, :id => o.object.option.id, :class => "option_quantity" } %>
        </div>
      </div>
      <% end %>
[...]

обзор счета (на той же странице, что и форма выше) 

#invoice overview
[...name, quantity, price on product_category...]

#invoice lines related to options
<% @product_category.options.each do |option| %>
      <div class="online-booking-price-item online-booking-price-item-option-container <%= option.id %>">
        <div class="online-booking-price-item-name">
          <%= option.name %>
        </div>
        <div class="online-booking-price-item-price online-booking-price-item-option-price">

#below the wrong price, as this is the price for one quantity of option and does not take into account the given input.
          <%= number_to_currency(online_booking_option_price(option, Date.parse(arrival), Date.parse(departure)), :unit=> @currency ) %>
        </div>
    </div>
    <% end %>

скрипт получить и вставить option_price в обзор 

<script>
  document.addEventListener('turbolinks:load', function() {
    $('.online-booking-price-item-option-container').hide();


    var options = document.getElementsByClassName('option_quantity');

    for (var i = 0; i < options.length; i++) {
        options.item(i).addEventListener('change', (event) => {
          var optionId = event.target.id

          document.getElementsByClassName(optionId)[0].style.display = "flex" ;
        })
    }
  });
</script>

app / helpers / online_booking_helper.rb 

#price for one option for the respective arrival and departure
def online_booking_option_price(option, arrival, departure)
[...]
end

#price for one option for the respective arrival and departure incl. quatity
def online_booking_option_price(option, arrival, departure, quantity)
[...]
end
``
...