UI order, add order detail page

awesome-academy · Mar 31, 2024 · 4684496 · 4684496
1 parent 73b0575
commit 4684496
Show file tree

Hide file tree

Showing 12 changed files with 97 additions and 72 deletions.
diff --git a/app/assets/builds/application.css b/app/assets/builds/application.css
diff --git a/app/assets/stylesheets/application.bootstrap.scss b/app/assets/stylesheets/application.bootstrap.scss
@@ -296,21 +296,15 @@ form.search-form {
 }
 
 /* product */
-.product-list {
-  display: flex;
-  flex-wrap: wrap;
-}
-
-.product-item-container {
-  margin-bottom: 20px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-direction: column;
-
-  .product-item-info {
-    border: 1px solid #ededed;
+.card {
+  .product-image {
+    width: 100%;
+    height: 300px;
+    object-fit: cover;
+    object-position: center;
+  }
 
+  .card-title {
     a {
       color: #777;
       text-decoration: none;
@@ -319,18 +313,8 @@ form.search-form {
         color: #f4291a;
       }
     }
-
-    .product-image {
-      max-width: 100%;
-    }
-  }
-
-  >* {
-    flex-grow: 1;
-  }
 }
-
-
+}
 
 /* cart */
 .add-to-cart {

diff --git a/app/controllers/orders_controller.rb b/app/controllers/orders_controller.rb
@@ -3,7 +3,7 @@
 class OrdersController < ApplicationController
   before_action :parse_cart_data, only: :create
   before_action :find_products, only: :create
-  before_action :load_order, only: :cancel
+  before_action :load_order, only: %i(show cancel)
 
   def index
     @pagy, @orders = pagy(current_account.orders.order(created_at: :desc), items: Settings.PAGE_10)

diff --git a/app/controllers/sessions_controller.rb b/app/controllers/sessions_controller.rb
@@ -11,7 +11,12 @@ def create
     log_in(@account)
     remember(@account)
     flash[:success] = t("sessions.login_success")
-    redirect_to(login_path)
+    redirect_to(root_path)
+  end
+
+  def destroy
+    log_out
+    redirect_to(root_url)
   end
 
   private

diff --git a/app/views/carts/show.html.erb b/app/views/carts/show.html.erb
@@ -1,4 +1,5 @@
 <div class="container">
+  <%= render "layouts/flash" %>
   <%= link_to root_path do %>
     <h3>
       <i class="bi bi-arrow-left"></i><%= t("cart.back") %>

diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
@@ -19,7 +19,6 @@
 
   <body>
     <%= render "shared/header" %>
-    <%= render "layouts/flash" %>
     <%= yield %>
   </body>
 </html>
diff --git a/app/views/orders/index.html.erb b/app/views/orders/index.html.erb
@@ -1,10 +1,11 @@
 <div class="container">
+  <%= render "layouts/flash" %>
   <div class="table-responsive">
     <table class="table table-striped">
       <thead>
         <tr>
           <th><%= t("orders.columns.id") %></th>
-          <th><%= t("orders.columns.reciever_name") %></th>
+          <th><%= t("orders.columns.receiver_name") %></th>
           <th><%= t("orders.status.title") %></th>
           <th><%= t("orders.columns.quantity") %></th>
           <th><%= t("orders.columns.created_at") %></th>
@@ -22,7 +23,7 @@
             <td><%= order.order_histories.count %></td>
             <td><%= order.created_at %></td>
             <td>
-              <%= link_to t("orders.actions.view"), "#", class: "btn btn-primary btn-sm" %>
+              <%= link_to t("orders.actions.view"), order_path(order), class: "btn btn-primary btn-sm" %>
               <%= check_status(order) %>
             </td>
           </tr>

diff --git a/app/views/orders/show.html.erb b/app/views/orders/show.html.erb
@@ -0,0 +1,53 @@
+<div class="container">
+  <%= render "layouts/flash" %>
+  <h1 class="mt-4"><%= t("orders.order_details") %></h1>
+
+  <div class="row">
+    <div class="col-md-6">
+      <p><strong><%= t("orders.receiver_name") %>:</strong> <%= @order.receiver_name %></p>
+      <p><strong><%= t("orders.status.title") %>:</strong> <%= order_status_button(@order.status) %></p>
+      <p><strong><%= t("orders.address") %>:</strong> <%= @order.receiver_address %></p>
+      <p><strong><%= t("orders.phone_number") %>:</strong> <%= @order.receiver_phone_number %></p>
+    </div>
+  </div>
+
+  <div class="row mt-4">
+    <div class="col-md-12">
+      <h2><%= t("orders.product_list") %></h2>
+      <div class="table-responsive">
+        <table class="table table-striped">
+          <thead>
+            <tr>
+              <th scope="col"><%= t("orders.product_name") %></th>
+              <th scope="col"><%= t("orders.quantity") %></th>
+              <th scope="col"><%= t("orders.price") %></th>
+              <th scope="col"><%= t("orders.total_price") %></th>
+              <th scope="col"><%= t("orders.columns.actions") %></th>
+            </tr>
+          </thead>
+          <tbody>
+            <% total_price = 0 %>
+            <% @order.order_histories.each do |order_history| %>
+              <tr>
+                <td><%= order_history.product.name %></td>
+                <td><%= order_history.quantity %></td>
+                <td><%= number_to_currency(order_history.current_price) %></td>
+                <% subtotal = order_history.quantity * order_history.current_price %>
+                <td><%= number_to_currency(subtotal) %></td>
+                <% total_price += subtotal %>
+                <td>
+                  <%= approved_status(@order) %>
+                </td>
+              </tr>
+            <% end %>
+            <tr>
+              <td colspan="3" class="text-end"><strong><%= t("orders.total_order_price") %>:</strong></td>
+              <td><%= number_to_currency(total_price) %></td>
+              <td></td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/app/views/products/_product.html.erb b/app/views/products/_product.html.erb
@@ -1,12 +1,12 @@
-<div class="col-md-4">
-  <div class="product-item-container">
-    <div class="product-item-info">
-      <%= product_image_tag(product) %>
-      <h4><%= link_to product.name, product_path(product) %></h4>
+<div class="col-md-4 my-3">
+  <div class="card">
+    <%= product_image_tag(product) %>
+    <div class="card-body">
+      <h5 class="card-title"><%= link_to product.name, product_path(product) %></h5>
       <%= render "shared/rating" %>
-      <p><%= number_to_currency(product.price) %></p>
+      <p class="card-text"><%= number_to_currency(product.price) %></p>
       <div class="add-to-cart">
-        <%= button_to t("products.add_to_cart"), cart_path(product_id: product.id), method: :post %>
+        <%= button_to t("products.add_to_cart"), cart_path(product_id: product.id), method: :post, class: "btn btn-primary" %>
       </div>
     </div>
   </div>

diff --git a/app/views/products/index.html.erb b/app/views/products/index.html.erb
@@ -10,7 +10,7 @@
     <%= render "shared/list_categories" %>
     <div class="col-md-9 justify-content-center">
       <%= render "shared/filter" %>
-      <div class="product-list">
+      <div class="row">
         <%= (render(@products)) || t("products.empty") %>
       </div>
       <div class="pagination justify-content-center">

diff --git a/app/views/products/show.html.erb b/app/views/products/show.html.erb
@@ -8,7 +8,7 @@
       <p><%= t("products.price", price: number_to_currency(@product.price)) %></p>
       <p><%= t("products.quantity", quantity: @product.quantity) %></p>
       <div class="add-to-cart">
-        <%= button_to t("products.add_to_cart"), "#", method: :post %>
+        <%= button_to t("products.add_to_cart"), cart_path(product_id: @product.id), method: :post %>
       </div>
       <div class="product-info">
         <div class="product-description">

diff --git a/yarn.lock b/yarn.lock
@@ -10,7 +10,7 @@
     "@nodelib/fs.stat" "2.0.5"
     run-parallel "^1.1.9"
 
-"@nodelib/[email protected].5", "@nodelib/fs.stat@^2.0.2":
+"@nodelib/fs.stat@^2.0.2", "@nodelib/[email protected].5":
   version "2.0.5"
   resolved "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz"
   integrity sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==
@@ -87,7 +87,7 @@ braces@^3.0.2, braces@~3.0.2:
   dependencies:
     fill-range "^7.0.1"
 
-browserslist@^4.23.0:
+browserslist@^4.23.0, "browserslist@>= 4.21.0":
   version "4.23.0"
   resolved "https://registry.npmjs.org/browserslist/-/browserslist-4.23.0.tgz"
   integrity sha512-QW8HiM1shhT2GuzkvklfjcKDiWFXHOeFCIA/huJPwHsslwcydgk7X+z2zXpEijP98UCY7HbubZt5J2Zgvf0CaQ==
@@ -102,7 +102,7 @@ caniuse-lite@^1.0.30001587, caniuse-lite@^1.0.30001599:
   resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001599.tgz"
   integrity sha512-LRAQHZ4yT1+f9LemSMeqdMpMxZcc4RMWdj4tiFe3G8tNkWK+E58g+/tzotb5cU6TbcVJLr4fySiAW7XmxQvZQA==
 
-"chokidar@>=3.0.0 <4.0.0", chokidar@^3.3.0:
+chokidar@^3.3.0, "chokidar@>=3.0.0 <4.0.0":
   version "3.6.0"
   resolved "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz"
   integrity sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==
@@ -197,11 +197,6 @@ fs-extra@^11.0.0:
     jsonfile "^6.0.1"
     universalify "^2.0.0"
 
-fsevents@~2.3.2:
-  version "2.3.3"
-  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.3.tgz#cac6407785d03675a2a5e1a5305c697b347d90d6"
-  integrity sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==
-
 get-caller-file@^2.0.5:
   version "2.0.5"
   resolved "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz"
@@ -381,7 +376,7 @@ postcss-value-parser@^4.2.0:
   resolved "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz"
   integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==
 
-postcss@^8.4.38:
+postcss@^8.0.0, postcss@^8.1.0, postcss@^8.4.38, postcss@>=8.0.9:
   version "8.4.38"
   resolved "https://registry.npmjs.org/postcss/-/postcss-8.4.38.tgz"
   integrity sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==
@@ -445,7 +440,7 @@ slash@^5.0.0, slash@^5.1.0:
   resolved "https://registry.npmjs.org/slash/-/slash-5.1.0.tgz"
   integrity sha512-ZA6oR3T/pEyuqwMgAKT0/hAv8oAXckzbkmR0UkUosQ+Mc4RxGoJkRmwHgHufaenlyAgE1Mxgpdcrf75y6XcnDg==
 
-"source-map-js@>=0.6.2 <2.0.0", source-map-js@^1.2.0:
+source-map-js@^1.2.0, "source-map-js@>=0.6.2 <2.0.0":
   version "1.2.0"
   resolved "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz"
   integrity sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==