Skip to content

V
venshop
Commit b1d3796b by Tan Phat Nguyen
Options

Change layout template for crud product on venshop

parent e805d506
Showing with 172 additions and 287 deletions
app/assets/javascripts/products.js.coffee
# Place all the behaviors and hooks related to the matching controller here.
# All this logic will automatically be available in application.js.
# You can use CoffeeScript in this file: http://coffeescript.org/
$(document).ready -> $(document).ready ->
$('#product_photo').bind 'change', -> $('#product_photo').bind 'change', ->
size_in_megabytes = this.files[0].size/1024/1024 size_in_megabytes = this.files[0].size/1024/1024
if (size_in_megabytes > 5) if (size_in_megabytes > 5)
......
app/assets/stylesheets/custom.css.scss
@import "bootstrap-sprockets"; @import "bootstrap-sprockets";
@import "bootstrap"; @import "bootstrap";
/* mixins, variables, etc. */ .navbar-fixed-top {
border: 0;
$gray-medium-light: #eaeaea;
@mixin box_sizing {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
} }
/* miscellaneous */ .sidebar {
.debug_dump { display: none;
clear: both;
float: left;
width: 100%;
margin-top: 45px;
@include box_sizing;
} }
/* universal */ .sidebar {
position: fixed;
html { top: 51px;
overflow-y: scroll; bottom: 0;
left: 0;
z-index: 1000;
display: block;
padding: 20px;
overflow-x: hidden;
overflow-y: auto;
background-color: #f5f5f5;
border-right: 1px solid #eee;
} }
body { .nav-sidebar {
padding-top: 60px; margin-right: -21px;
margin-bottom: 20px;
margin-left: -20px;
} }
section { .nav-sidebar > .active > a, .nav-sidebar > .active > a:hover, .nav-sidebar > .active > a:focus {
overflow: auto; color: #fff;
background-color: #428bca;
} }
textarea { .nav-sidebar > li > a {
resize: vertical; padding-right: 20px;
padding-left: 20px;
} }
.center { .main {
text-align: center; padding: 75px;
h1 {
margin-bottom: 10px;
}
} }
/* typography */ .main {
padding-right: 40px;
h1, h2, h3, h4, h5, h6 { padding-left: 40px;
line-height: 1;
} }
h1 { .main .page-header {
font-size: 3em; margin-top: 0;
letter-spacing: -2px;
margin-bottom: 30px;
text-align: center;
} }
h2 { .placeholders {
font-size: 1.2em;
letter-spacing: -1px;
margin-bottom: 30px; margin-bottom: 30px;
text-align: center; text-align: center;
font-weight: normal;
color: $gray-light;
}
p {
font-size: 1.1em;
line-height: 1.7em;
}
/* header */
#logo {
float: left;
margin-right: 10px;
font-size: 1.7em;
color: white;
text-transform: uppercase;
letter-spacing: -1px;
padding-top: 9px;
font-weight: bold;
&:hover {
color: white;
text-decoration: none;
}
}
/* footer */
footer {
margin-top: 45px;
padding-top: 5px;
border-top: 1px solid $gray-medium-light;
color: $gray-light;
a {
color: $gray;
&:hover {
color: $gray-darker;
}
}
small {
float: left;
}
ul {
float: right;
list-style: none;
li {
float: left;
margin-left: 15px;
}
}
}
/* sidebar */
aside {
section.user_info {
margin-top: 20px;
}
section {
padding: 10px 0;
margin-top: 20px;
&:first-child {
border: 0;
padding-top: 0;
}
span {
display: block;
margin-bottom: 3px;
line-height: 1;
}
h1 {
font-size: 1.4em;
text-align: left;
letter-spacing: -1px;
margin-bottom: 3px;
margin-top: 0px;
}
}
}
.gravatar {
float: left;
margin-right: 10px;
}
.gravatar_edit {
margin-top: 15px;
}
/* forms */
input, textarea, select, .uneditable-input {
border: 1px solid #bbb;
width: 100%;
margin-bottom: 15px;
@include box_sizing;
} }
input { .sub-header {
height: auto !important; padding-bottom: 10px;
border-bottom: 1px solid #eee;
} }
#error_explanation { #error_explanation {
...@@ -172,84 +68,4 @@ input { ...@@ -172,84 +68,4 @@ input {
color: red; color: red;
margin: 0 0 30px 0; margin: 0 0 30px 0;
} }
}
.field_with_errors {
@extend .has-error;
.form-control {
color: $state-danger-text;
}
}
.checkbox {
margin-top: -10px;
margin-bottom: 10px;
span {
margin-left: 20px;
font-weight: normal;
}
}
#session_remember_me {
width: auto;
margin-left: 0;
}
/* Users index */
.users {
list-style: none;
margin: 0;
li {
overflow: auto;
padding: 10px 0;
border-bottom: 1px solid $gray-lighter;
}
}
/* microposts */
.microposts {
list-style: none;
padding: 0;
li {
padding: 10px 0;
border-top: 1px solid #e8e8e8;
}
.user {
margin-top: 5em;
padding-top: 0;
}
.content {
display: block;
margin-left: 60px;
img {
display: block;
padding: 5px 0;
}
}
.timestamp {
color: $gray-light;
display: block;
margin-left: 60px;
}
.gravatar {
float: left;
margin-right: 10px;
margin-top: 5px;
}
}
aside {
textarea {
height: 100px;
margin-bottom: 5px;
}
}
span.picture {
margin-top: 10px;
input {
border: 0;
}
} }
\ No newline at end of file
app/controllers/products_controller.rb
class ProductsController < ApplicationController class ProductsController < ApplicationController
before_action :set_product, only: [:show, :edit, :update, :destroy] before_action :set_product, only: [:show, :edit, :update, :destroy]
def index def index
@products = Product.all @products = Product.all
...@@ -20,11 +20,9 @@ class ProductsController < ApplicationController ...@@ -20,11 +20,9 @@ class ProductsController < ApplicationController
end end
def show def show
end end
def edit def edit
end end
def update def update
......
app/helpers/application_helper.rb
module ApplicationHelper module ApplicationHelper
def full_title(page_title = '')
base_title = "VenShop Deploy Application"
if page_title.empty?
base_title
else
"#{page_title} | #{base_title}"
end
end
end end
app/models/product.rb
...@@ -3,6 +3,9 @@ class Product < ActiveRecord::Base ...@@ -3,6 +3,9 @@ class Product < ActiveRecord::Base
belongs_to :category belongs_to :category
validates :name, presence: true, length: { maximum: 50 } validates :name, presence: true, length: { maximum: 50 }
validates :price, presence: true, numericality: true,
format: { with: /\A\d+(?:\.\d{0,2})?\z/ }
validates :description, presence: true
validate :photo_size validate :photo_size
mount_uploader :photo, ImageUploader mount_uploader :photo, ImageUploader
......
app/views/layouts/_footer.html.erb 0 → 100644
<footer class="footer">
<small>
The Venshop 2014 by <a href="http://wwww.zigexn.vn">Zigexn</a>
</small>
<nav>
<ul>
<li><%= link_to 'About', '#' %></li>
<li><%= link_to 'Contact', '#' %></li>
<li><a href="http://zigexn.vn">Zigexn VeNtura</a></li>
</ul>
</nav>
</footer>
\ No newline at end of file
app/views/layouts/_header.html.erb 0 → 100644
<nav class='navbar navbar-inverse navbar-fixed-top'>
<div class='container-fluid'>
<div class='navbar-header'>
<%= link_to 'VenShop Apps', root_path, class: 'navbar-brand' %>
</div>
<div id='navbar' class='navbar-collapse collapse'>
<ul class='nav navbar-nav navbar-right'>
<li><%= link_to 'Home', root_path %></li>
<li><%= link_to 'Log in', '#' %></li>
</ul>
<form class='navbar-form navbar-right'>
<input type='text' class='form-control' placeholder='Search...'>
</form>
</div>
</div>
</nav>
\ No newline at end of file
app/views/layouts/application.html.erb
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<title>Venshop</title> <title><%= full_title(yield(:title)) %></title>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %> <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %> <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %> <%= csrf_meta_tags %>
</head> </head>
<body> <body>
<%= render 'layouts/header' %>
<%= yield %> <div class='container-fluid'>
<div class='row'>
<div class='col-sm-3 col-md-2 sidebar'>
<ul class='nav nav-sidebar'>
<li class='active'><a href='#'>Categories</a></li>
<li><a href='#'>Books</a></li>
<li><a href='#'>Toys</a></li>
<li><a href='#'>Clothing</a></li>
<li><a href='#'>DVD</a></li>
<li><a href='#'>Magazine</a></li>
</ul>
</div>
<div class='col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main'>
<%= yield %>
</div>
</div>
</div>
</body> </body>
<%= render 'layouts/footer' %>
</html> </html>
app/views/products/_form.html.erb
<%= form_for @product do |f| %> <%= form_for @product, html: {multipart: true} do |f| %>
<%= render 'shared/error_messages', object: f.object %> <%= render 'shared/error_messages', object: f.object %>
<%= image_tag @product.photo.url %> <br> <div class="form-group">
<%= f.label :name %> <%= image_tag @product.photo.url, width: '140', height: '140', class: 'img-rounded' %>
<%= f.text_field :name, class: 'form-control' %> </div>
<%= f.label :price %> <div class="form-group">
<%= f.text_field :price, class: 'form-control' %> <%= f.label :name %>
<%= f.text_field :name, class: 'form-control', placeholder: 'Name of Item' %>
</div>
<%= f.label :description %> <div class="form-group">
<%= f.text_area :description, class: 'form-control' %> <%= f.label :price %>
<%= f.text_field :price, class: 'form-control', placeholder: 'Price of Item' %>
<%= f.label :category %> </div>
<%= f.select :category_id, Category.all.collect { |category| [category.name, category.id] } %> <div class="form-group">
<%= f.file_field :photo, accept: 'image/jpeg,image/gif,image/png' %> <%= f.label :description %>
<%= f.text_area :description, class: 'form-control', placeholder: 'Description' %>
</div>
<div class="form-group">
<%= f.label :category %>
<%= f.select :category_id, Category.all.collect { |category| [category.name, category.id] } %>
</div>
<div class="form-group">
<%= f.label :photo %>
<%= f.file_field :photo, accept: 'image/jpeg,image/gif,image/png' %>
</div>
<%= f.submit class: "btn btn-primary" %> <%= f.submit class: "btn btn-primary" %>
<%= link_to 'Cancel', products_path, class: "btn btn-primary" %>
<% end %> <% end %>
\ No newline at end of file
app/views/products/_product.html.erb
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
<td><%= product.price %></td> <td><%= product.price %></td>
<td><%= product.description %></td> <td><%= product.description %></td>
<td><%= product.category.name %></td> <td><%= product.category.name %></td>
<td><%= image_tag product.photo_url.to_s %></td> <td><%= image_tag product.photo_url.to_s, width: '140', height: '140', class: 'img-rounded' %></td>
<td><%= link_to 'Show', product_path(product) %></td> <td><%= link_to 'Show', product_path(product) %></td>
<td><%= link_to 'Edit', edit_product_path(product) %></td> <td><%= link_to 'Edit', edit_product_path(product) %></td>
<td><%= link_to 'Destroy', product_path(product), method: :delete, data: { confirm: 'Are you sure?' } %></td> <td><%= link_to 'Destroy', product_path(product), method: :delete, data: { confirm: 'Are you sure?' } %></td>
......
app/views/products/edit.html.erb
<h1>Edit Product</h1> <% provide(:title, "Edit Product") %>
<h1 class='page-header'>Edit Product</h1>
<%= render 'form' %> <%= render 'form' %>
\ No newline at end of file
app/views/products/index.html.erb
<h1>Welcome to Venshop</h1> <% provide(:title, 'Product Lists') %>
<table class='table'> <h1 class='page-header'>Item Management</h1>
<tr> <div class='table-responsive'>
<th>Name</th> <table class='table table-striped'>
<th>Price</th> <tr>
<th>Description</th> <th>Name</th>
<th>Category</th> <th>Price</th>
<th>Photo</th> <th>Description</th>
<th colspan='3'></th> <th>Category</th>
</tr> <th>Photo</th>
<%= render @products %> <th colspan='3'></th>
</table> </tr>
<%= link_to 'New Product', new_product_path %> <%= render @products %>
</table>
</div>
<%= link_to 'New Product', new_product_path, class: "btn btn-primary" %>
app/views/products/new.html.erb
<h1>Add New Product</h1> <% provide(:title, 'New Product') %>
<%= render partial: 'products/form', locals: { product: @product } %> <h1 class='page-header'>Add New Product</h1>
\ No newline at end of file <%= render 'form' %>
\ No newline at end of file
app/views/products/show.html.erb
<h1>Show Product</h1> <% provide(:title, @product.name) %>
<h1 class='page-header'>Show Product</h1>
<p>Name: <b><%= @product.name%></b></p> <p>Name: <b><%= @product.name%></b></p>
<p>Price: <b><%= @product.price%></b></p> <p>Price: <b><%= @product.price%></b></p>
<p>Description: <b><%= @product.description%></b></p> <p>Description: <b><%= @product.description%></b></p>
<p>Category: <b><%= @product.category.name%></b></p> <p>Category: <b><%= @product.category.name%></b></p>
<%= image_tag @product.photo.url %> <br/> <%= image_tag @product.photo.url, width: '140', height: '140', class: 'img-rounded' %> <br/><br>
<%= link_to 'Back', products_path %> <%= link_to 'Back', products_path, class: 'btn btn-primary' %>
| <%= link_to 'Edit', edit_product_path(@product) %> <%= link_to 'Edit', edit_product_path(@product), class: 'btn btn-primary' %>
\ No newline at end of file \ No newline at end of file
db/migrate/20141111033549_change_scale_price_in_products.rb 0 → 100644
class ChangeScalePriceInProducts < ActiveRecord::Migration
def change
change_column :products, :price, :decimal, precision: 10, scale: 2
end
end
db/schema.rb
...@@ -11,7 +11,7 @@ ...@@ -11,7 +11,7 @@
# #
# It's strongly recommended that you check this file into your version control system. # It's strongly recommended that you check this file into your version control system.
ActiveRecord::Schema.define(version: 20141110093259) do ActiveRecord::Schema.define(version: 20141111033549) do
create_table "categories", force: true do |t| create_table "categories", force: true do |t|
t.string "name", limit: 255 t.string "name", limit: 255
...@@ -21,7 +21,7 @@ ActiveRecord::Schema.define(version: 20141110093259) do ...@@ -21,7 +21,7 @@ ActiveRecord::Schema.define(version: 20141110093259) do
create_table "products", force: true do |t| create_table "products", force: true do |t|
t.string "name", limit: 255 t.string "name", limit: 255
t.decimal "price", precision: 10 t.decimal "price", precision: 10, scale: 2
t.text "description", limit: 65535 t.text "description", limit: 65535
t.integer "category_id", limit: 4 t.integer "category_id", limit: 4
t.datetime "created_at" t.datetime "created_at"
......
test/controllers/product_controller_test.rb deleted 100644 → 0
require 'test_helper'
class ProductControllerTest < ActionController::TestCase
# test "the truth" do
# assert true
# end
end
test/helpers/product_helper_test.rb deleted 100644 → 0
require 'test_helper'
class ProductHelperTest < ActionView::TestCase
end
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment