quote total (no live updating)

Author: thejonroberts

NOTES.txt

@@ -56,4 +56,12 @@ broadcasts_to ->(quote) { [quote.company, "quotes"] }, inserts_by: :prepend
 view:
 <%= turbo_stream_from(current_company, "quotes") %>
 
-nested_dom_id(parent, identifier)
+
+Note: Now that we have more experience with Turbo Frames, let's discuss when to use a <turbo-frame> tag or a <div>.
+
+We must use a Turbo Frame when we need Turbo to intercept clicks on links and form sumbissions for us. For example, the content of the line_items/_line_item.html.erb partial must be wrapped inside a Turbo Frame because when we click on the "Edit" button for a line item, we want Turbo to replace the content of this Turbo Frame with the form extracted from the LineItems#edit page. This feature wouldn't work with a simple div.
+
+On the other hand, we don't need a Turbo Frame when we only target an id of the DOM in a Turbo Stream view. For example, we didn't use a Turbo Frame for flash messages. Instead, we used a div with an id of flash to prepend new messages. We could have used a div with the id of quotes on the Quotes#index page instead of a Turbo Frame, because the quotes id is only used in Turbo Stream views to prepend quotes to the list. It never serves to intercept clicks on links and form submissions.
+
+My personal preference here is always to use Turbo Frame tags as it makes it obvious that the id is used somewhere in a Turbo Stream view. This is why we use Turbo Frames everywhere in this tutorial. However, it is perfectly fine if you disagree and prefer to use a div when you don't need a Turbo Frame.
+

app/assets/stylesheets/application.sass.scss

@@ -7,6 +7,9 @@
 @import "config/reset";
 @import "config/animations";
 
+// Utilities
+@import "utilities/margins";
+
 // Components
 @import "components/btn";
 @import "components/error_message";
@@ -19,6 +22,7 @@
 @import "components/empty_state";
 @import "components/line_item_date";
 @import "components/line_item";
+@import "components/quote_total";
 
 // Layouts
 @import "layouts/container";

app/assets/stylesheets/components/_quote_total.scss

@@ -0,0 +1,24 @@
+.quote-total {
+  position: fixed;
+  bottom: 0;
+  width: 100%;
+
+  font-size: var(--font-size-xl);
+  font-weight: bold;
+  background-color: var(--color-white);
+  box-shadow: var(--shadow-large);
+
+  padding-top: var(--space-xs);
+  padding-bottom: var(--space-xs);
+
+  @include media(tabletAndUp) {
+    padding-top: var(--space-m);
+    padding-bottom: var(--space-m);
+  }
+
+  &__inner {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+}

app/assets/stylesheets/utilities/_margins.scss

@@ -0,0 +1,3 @@
+.mb-xxxxl {
+  margin-bottom: var(--space-xxxxl);
+}

app/models/line_item.rb

@@ -6,4 +6,8 @@ class LineItem < ApplicationRecord
   validates :unit_price, presence: true, numericality: { greater_than: 0 }
 
   delegate :quote, to: :line_item_date
+
+  def total_price
+    quantity * unit_price
+  end
 end

app/models/quote.rb

@@ -1,10 +1,15 @@
 class Quote < ApplicationRecord
   belongs_to :company
   has_many :line_item_dates, dependent: :destroy #, strict_loading: true
+  has_many :line_items, through: :line_item_dates
 
   validates :name, presence: true
 
   scope :desc_id_ordered, -> { order(id: :desc) }
 
   broadcasts_to ->(quote) { [quote.company, "quotes"] }, inserts_by: :prepend
+
+  def total_price
+    line_items.sum(&:total_price)
+  end
 end

app/views/quotes/_total.html.erb

@@ -0,0 +1,6 @@
+<footer class="quote-total">
+  <div class="quote-total__inner container">
+    <div>Total:</div>
+    <div><%= number_to_currency quote.total_price %></div>
+  </div>
+</footer>

app/views/quotes/show.html.erb

@@ -15,7 +15,7 @@
 COMMENT
 %>
 
-<main class="container">
+<main class="container mb-xxxxl">
   <%= link_to sanitize("&larr; Back to quotes"), quotes_path %>
   <div class="header">
     <h1>
@@ -32,3 +32,5 @@ COMMENT
     <%= render @line_item_dates, quote: @quote %>
   <% end %>
 </main>
+
+<%= render "quotes/total", quote: @quote %>

test/models/line_item_test.rb

@@ -1,7 +1,7 @@
 require "test_helper"
 
 class LineItemTest < ActiveSupport::TestCase
-  # test "the truth" do
-  #   assert true
-  # end
+  test "#total_price returns the total price of the line item" do
+    assert_equal 250, line_items(:catering_today).total_price
+  end
 end

test/models/quote_test.rb

@@ -1,7 +1,7 @@
 require "test_helper"
 
 class QuoteTest < ActiveSupport::TestCase
-  # test "the truth" do
-  #   assert true
-  # end
+  test "#total_price returns the sum of the total price of all line items" do
+    assert_equal 2500, quotes(:one).total_price
+  end
 end