[Admin] Show Product

app/assets/stylesheets/layout/header.scss

@@ -4,6 +4,9 @@
 .logo_link:hover {
   text-decoration: none;
 }
+.nav-section {
+  width: 100%;
+}
 .header-nav-section li > a {
   display: inline-block !important;
 }

app/controllers/admin/base_controller.rb

@@ -0,0 +1,14 @@
+class Admin::BaseController < ApplicationController
+  include Pagy::Backend
+  layout "admin/layouts/application"
+  before_action :check_admin
+
+  private
+  def check_admin
+    return if current_user.is_admin?
+
+    store_location_for(:admin, request.fullpath)
+    flash[:danger] = t "admin.permission"
+    redirect_to root_path
+  end
+end

app/controllers/admin/products_controller.rb

@@ -0,0 +1,18 @@
+class Admin::ProductsController < Admin::BaseController
+  before_action :find_product, except: :index
+
+  def index
+    @pagy, @products = pagy Product.order_by_name, items: Settings.per_page_5
+  end
+
+  def show; end
+
+  private
+  def find_product
+    @product = Product.find_by id: params[:id]
+    return if @product
+
+    flash[:danger] = t ".not_found"
+    redirect_to admin_products_path
+  end
+end

app/controllers/admin/static_pages_controller.rb

@@ -0,0 +1,8 @@
+class Admin::StaticPagesController < Admin::BaseController
+  def home; end
+
+  def destroy
+    log_out_admin
+    redirect_to home_path
+  end
+end

app/helpers/products_helper.rb

@@ -1,2 +1,9 @@
 module ProductsHelper
+  def show_image product
+    if product.image.attached?
+      product.image
+    else
+      "products/default.png"
+    end
+  end
 end

app/javascript/packs/admin.js

@@ -0,0 +1,7 @@
+$('#sidebarToggle, #sidebarToggleTop').on('click', function(e) {
+  $('body').toggleClass('sidebar-toggled');
+  $('.sidebar').toggleClass('toggled');
+  if ($('.sidebar').hasClass('toggled')) {
+    $('.sidebar .collapse').collapse('hide');
+  };
+});

app/javascript/packs/application.js

@@ -7,7 +7,13 @@ import Rails from '@rails/ujs'
 import Turbolinks from 'turbolinks'
 import * as ActiveStorage from '@rails/activestorage'
 import 'channels'
+require('jquery');
+import '@fortawesome/fontawesome-free/css/all'
 
 Rails.start()
 Turbolinks.start()
 ActiveStorage.start()
+
+var jQuery = require('jquery')
+global.$ = global.jQuery = jQuery;
+window.$ = window.jQuery = jQuery;

app/models/product.rb

@@ -2,5 +2,8 @@ class Product < ApplicationRecord
   belongs_to :category
   has_many :order_details, dependent: :destroy
   has_many :comments, dependent: :destroy
+  has_one_attached :image
+
+  scope :order_by_name, ->{order :name}
   scope :sort_by_price, ->{order :price}
 end

app/views/admin/layouts/_footer.html.erb

@@ -0,0 +1,7 @@
+<footer class="sticky-footer bg-white">
+  <div class="container my-auto">
+    <div class="copyright text-center my-auto">
+      <span><%= t ".content" %></span>
+    </div>
+  </div>
+</footer>

app/views/admin/layouts/_header.html.erb

@@ -0,0 +1,23 @@
+<nav class="navbar navbar-expand navbar-light bg-white topbar mb-4 static-top shadow">
+  <button id="sidebarToggleTop" class="btn btn-link d-md-none rounded-circle mr-3">
+    <i class="fa fa-bars"></i>
+  </button>
+  <div class="language-admin">
+    <%= link_to image_tag("lang-en.png"), locale: :en %>
+    <%= link_to image_tag("lang-vi.png"), locale: :vi %>
+  </div>
+  <ul class="navbar-nav ml-auto d-flex align-items-center">
+    <div class="topbar-divider d-none d-sm-block"></div>
+    <li class="nav-item dropdown no-arrow">
+      <%= link_to "#", id: "userDropdown", class: "nav-link" do %>
+        <% image_tag "https://upload.wikimedia.org/wikipedia/commons/thumb/7/7e/Circle-icons-profile.svg/512px-Circle-icons-profile.svg.png", class: "img-profile rounded-circle" %>
+      <% end %>
+    </li>
+    <li class="nav-item">
+      <%= link_to t(".profile"), "#", class: "dropdown-item" %>
+    </li>
+    <li class="nav-item">
+      <%= link_to t(".logout"), "#", class: "dropdown-item" %>
+    </li>
+  </ul>
+</nav>

app/views/admin/layouts/_nav.html.erb

@@ -0,0 +1,49 @@
+<ul class="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion" id="accordionSidebar">
+  <!-- Sidebar - Brand -->
+  <%= link_to admin_home_path, class: "sidebar-brand" do %>
+    <div class="sidebar-brand-text mx-3"><%= t "admin.title" %></div>
+  <% end %>
+  <!-- Divider -->
+  <hr class="sidebar-divider my-0">
+  <!-- Nav Item - Dashboard -->
+  <li class="nav-item active">
+    <%= link_to admin_home_path, class: "nav-link" do %>
+      <i class="fas fa-fw fa-tachometer-alt"></i>
+      <span><%= t "admin.dashboard" %></span>
+    <% end %>
+  </li>
+  <!-- Divider -->
+  <hr class="sidebar-divider">
+  <!-- Heading -->
+  <div class="sidebar-heading">
+    <%= t "admin.function" %>
+  </div>
+  <li class="nav-item">
+    <%= link_to "#", class: "nav-link" do %>
+      <i class="fas fa-fw fa-cog"></i>
+      <span><%= t "admin.user_manager" %></span>
+    <% end %>
+  </li>
+  <li class="nav-item">
+    <%= link_to admin_products_path, class: "nav-link" do %>
+      <i class="fas fa-fw fa-cog"></i>
+      <span><%= t "admin.product_manager" %></span>
+    <% end %>
+  </li>
+  <li class="nav-item">
+    <%= link_to "#", class: "nav-link" do %>
+      <i class="fas fa-fw fa-cog"></i>
+      <span><%= t "admin.category_manager" %></span>
+    <% end %>
+  </li>
+  <li class="nav-item">
+    <%= link_to "#", class: "nav-link" do %>
+      <i class="fas fa-fw fa-cog"></i>
+      <span><%= t "admin.order_manager" %></span>
+    <% end %>
+  </li>
+  <hr class="sidebar-divider">
+  <div class="text-center d-none d-md-inline">
+      <button class="rounded-circle border-0" id="sidebarToggle"></button>
+  </div>
+</ul>

app/views/admin/layouts/application.html.erb

@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <link rel="icon" href="/assets/favicon.ico" type="image/x-icon">
+    <title><%= t "admin.title" %></title>
+    <%= csrf_meta_tags %>
+    <%= csp_meta_tag %>
+    <%= stylesheet_link_tag "/assets/admin/sb-admin-2.min.css", "data-turbolinks-track": "reload" %>
+    <%= javascript_pack_tag "application", "data-turbolinks-track": "reload" %>
+  </head>
+  <body id="page-top">
+    <div id="wrapper">
+      <%= render "admin/layouts/nav" %>
+      <div id="content-wrapper" class="d-flex flex-column">
+        <div id="content">
+          <%= render "admin/layouts/header" %>
+          <div class="container-fluid">
+            <% flash.each do |message_type, message| %>
+              <div class="alert alert-<%= message_type %> alert-dismissible fade show"><%= message %>
+                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
+                  <span aria-hidden="true">&times;</span>
+                </button>
+              </div>
+            <% end %>
+            <%= yield %>
+          </div>
+        </div>
+        <%= render "admin/layouts/footer" %>
+      </div>
+    </div>
+    <%= javascript_pack_tag "admin", "data-turbolinks-track": "reload" %>
+  </body>
+</html>

app/views/admin/products/_product.html.erb

@@ -0,0 +1,21 @@
+<tr>
+  <td><%= product.name %></td>
+  <td><%= number_to_currency(product.price, locale: :vi) %></td>
+  <td><%= product.quantity %></td>
+  <td><%= product.description %></td>
+  <td>
+    <%#= image_tag product.display_image_admin if product.image.attached? %>
+    <%= image_tag show_image(product) %>
+  </td>
+  <td>
+    <%= link_to admin_product_path(product), class: "px-1" do %>
+      <i class="fas fa-eye"></i>
+    <% end %>
+    <%= link_to edit_admin_product_path(product), class: "px-1" do %>
+      <i class="fas fa-edit"></i>
+    <% end %>
+    <%= link_to admin_product_path(product), class: "px-1", method: :delete, data: {confirm: t(".delete_confirm")} do %>
+      <i class="far fa-trash-alt"></i>
+    <% end %>
+  </td>
+</tr>

app/views/admin/products/index.html.erb

@@ -0,0 +1,57 @@
+<div class="row">
+  <div class="col-md-4">
+    <%= form_tag admin_products_path, method: :get do %>
+      <div class="row">
+        <div class="col-md-8">
+          <%= text_field_tag :search, params[:search], class: "form-control bg-white small" %>
+        </div>
+        <div class="col-md-4 pl-0">
+          <div class="input-group-append">
+            <%= submit_tag t("admin.search"), class: "btn btn-primary" %>
+          </div>
+        </div>
+      </div>
+    <% end %>
+  </div>
+  <div class="col-md-4">
+    <%= form_tag admin_products_path, method: :get do %>
+      <div class="row">
+        <div class="col-md-8">
+          <%= select_tag :option, options_for_select(Settings.admin.product_sorts), class: "form-control mr-sm-2 option-filter" %>
+        </div>
+        <div class="col-md-4 pl-0">
+          <%= submit_tag t(".sort"), class: "btn btn-info"%>
+        </div>
+      </div>
+    <% end %>
+  </div>
+</div>
+
+<div class="row mt-3">
+  <div class="col">
+    <%= link_to t(".add_product"), new_admin_product_path, class: "btn btn-success" %>
+  </div>
+</div>
+
+<% if @products.any? %>
+  <table class="table table-bordered table-hover table-inverse mt-4">
+    <thead class="thead-inverse|thead-default">
+      <tr>
+        <th><%= t ".name" %></th>
+        <th><%= t ".price" %></th>
+        <th><%= t ".quantity" %></th>
+        <th><%= t ".description" %></th>
+        <th><%= t ".image" %></th>
+        <th class="col-md-2"><%= t ".action" %></th>
+      </tr>
+    </thead>
+    <tbody>
+      <%= render @products %>
+    </tbody>
+  </table>
+  <%== pagy_bootstrap_nav(@pagy) %>
+<% else %>
+  <div class="alert alert-warning mt-4">
+    <strong><%= t ".no_product_found" %></strong>
+  </div>
+<% end %>

app/views/admin/products/show.html.erb

@@ -0,0 +1,22 @@
+<main class="container">
+  <div class="row">
+    <div class="col-md-4">
+      <%= image_tag show_image(@product), class: "w-100" %>
+    </div>
+    <div class="col-md-8">.
+      <div class="product-description">
+        <span><%= @product.name %></span>
+        <h1><%= t ".description" %></h1>
+        <p><%= @product.description %></p>
+      </div>
+      <hr>
+      <div class="product-price">
+        <span><%= number_to_currency(@product.price, locale: :vi) %></span>
+      </div>
+      <p>
+        <%= @product.quantity %>
+        <%= t ".product_left" %>
+      </p>
+    </div>
+  </div>
+</main>

app/views/admin/static_pages/home.html.erb

@@ -0,0 +1 @@
+<h1 class="page-home-admin"><%= t ".content" %></h1>

app/views/products/_product.html.erb

@@ -11,7 +11,7 @@
       <%= link_to product, class: "product-name" do %>
         <span><%= product.name %></span>
       <% end %>
-      <div class="wrap-price"><span class="product-price"><span><%= product.price %></span></div>
+      <div class="wrap-price"><span class="product-price"><span><%= number_to_currency(product.price, locale: :vi) %></span></div>
       <%= link_to t(".add_to_cart"), product, class: "btn add-to-cart" %>
     </div>
   </div>

app/views/shared/_header.html.erb

@@ -40,7 +40,7 @@
               <li class="menu-item lang-menu">
                 <%= link_to locale: :vi do %>
                   <span class="img label-before">
-                    <%= image_tag("lang-en.png", alt: "lang-en") %>
+                    <%= image_tag("lang-vi.png", alt: "lang-en") %>
                   </span>
                   <%= t("languages.vi") %>
                 <% end %>

config/locales/en.yml

@@ -5,6 +5,33 @@ en:
       on_sale: "On Sale"
       latest_products: "Latest Products"
       product_categories: "Product Categories"
+  admin:
+    title: "Admin E-com"
+    search: "Search"
+    dashboard: "Dashboard"
+    user_manager: "User Manager"
+    product_manager: "Product Manager"
+    category_manager: "Category Manager"
+    order_manager: "Order Manager"
+    products:
+      index:
+        sort: "Sort"
+        add_product: "Add Product"
+        id: "ID"
+        name: "Name"
+        price: "Price"
+        quantity: "Quantity"
+        description: "Description"
+        image: "Image"
+        action: "Action"
+      show:
+        description: "Description"
+        product_left: "Product Left"
+        not_found: "Product not found"
+    layouts:
+      header:
+        profile: "Profile"
+        logout: "Logout"
   shared:
     header:
       logo_text: "E-com"