id2 cities list

app/assets/stylesheets/application.scss

@@ -25,4 +25,9 @@
    height: 50px;
    background-color: $main-color;
  }
+
+ hr {
+   width: 100px;
+   border-top: 2px solid $main-color
+ }
  
\ No newline at end of file

app/controllers/home_controller.rb

 class HomeController < ApplicationController
   def index
     @total_jobs = Job.count
-    @locations = Location.all
-    @industries = Industry.all
+    @locations = Location.select(:id, :city)
+    @industries = Industry.select(:id, :name)
     @jobs = Job.order(created_at: :desc).limit(Job::NUMBER_LATEST_JOB)
     @top_cities = Location.top_locations(9)
     @top_industries = Industry.top_industries(9)

app/controllers/locations_controller.rb

+class LocationsController < ApplicationController
+  def index
+    @vn_cities_lists = Location.vietnam
+    @internal_cities_lists = Location.international
+  end
+end

app/models/location.rb

@@ -3,6 +3,8 @@ class Location < ApplicationRecord
                                     .group(:location_id)
                                     .order(Arel.sql('count(jobs.id) DESC'))
                                     .take(number) }
+  scope :international, ->{ where(oversea: true) }
+  scope :vietnam, ->{ where(oversea: false) }
 
   CITY_VIETNAM_NUMBER = 70
 

app/views/home/index.html.erb

@@ -6,22 +6,24 @@
     <%= render 'shared/searchbar' %>
   </div>
 </div>
-<div id='latest-job' class='my-4 text-center'>
-  <h1>Latest Job</h1>
+<div id='latest-jobs' class='my-4 text-center'>
+  <h1>Latest Jobs</h1>
+  <hr>
   <div class='row'>
     <%= render partial: 'home/job', collection: @jobs %>
   </div>
-  <a href='#'>All jobs</a>
 </div>
-<div id='top-city' class='my-4 text-center'>
+<div id='top-cities' class='my-4 text-center'>
   <h1>Top Cities</h1>
+  <hr>
   <div class='row'>
-    <%= render partial: 'home/city', collection: @top_cities, as: :location %>
+    <%= render partial: 'locations/city', collection: @top_cities, as: :location %>
   </div>
-  <a href='#'>All Cities</a>
+  <a href='<%= cities_path %>'>All Cities</a>
 </div>
-<div id='top-industry' class='my-4 text-center'>
+<div id='top-industries' class='my-4 text-center'>
   <h1>Top Industries</h1>
+  <hr>
   <div class='row'>
     <%= render partial: 'home/industry', collection: @top_industries, as: :industry %>
   </div>

app/views/home/_city.html.erb → app/views/locations/_city.html.erb

+<% if location.jobs.size.positive? %>
 <div class='col-4 my-2'>
   <div class='card'>
     <%= link_to '#', class: 'card-body text-decoration-none' do %>
@@ -6,3 +7,4 @@
     <% end %>
   </div>
 </div>
+<% end %>

app/views/locations/index.html.erb

+<div class='list my-3 text-center'>
+  <h2>Area List</h2>
+  <hr>
+  <ul class='list-group list-group-horizontal'>
+    <li class='list-group-item'>
+      <a href='#vietnam'>Việt Nam</a>
+      <span class='badge badge-primary badge-pill'><%= @vn_cities_lists.size %></span>
+    </li>
+    <li class='list-group-item'>
+      <a href='#international'>International</a>
+      <span class='badge badge-primary badge-pill'><%= @internal_cities_lists.size %></span>
+    </li>
+  </ul>
+</div>
+<div id='vietnam' class='text-center'>
+  <h2>Vietnam</h2>
+  <hr>
+  <div class='row'>
+    <%= render partial: 'locations/city', collection: @vn_cities_lists, as: :location %>
+  </div>
+</div>
+<div id='international' class='text-center'>
+  <h2>International</h2>
+  <hr>
+  <div class="row">
+    <%= render partial: 'locations/city', collection: @internal_cities_lists, as: :location %>
+  </div>
+</div>

app/views/shared/_header.html.erb

 <nav class='navbar navbar-expand-lg navbar-light sticky-top'>
-  <a class='navbar-brand' href='#'>
+  <a class='navbar-brand' href='<%= root_path %>'>
     <%= image_tag 'venjob-logo.png', alt: 'VeNJob', size: '120x50' %>
   </a>
   <button class='navbar-toggler' type='button' data-toggle='collapse' data-target='#navbarSupportedContent' aria-controls='navbarSupportedContent' aria-expanded='false' aria-label='Toggle navigation'>

config/routes.rb

 Rails.application.routes.draw do
   root to: 'home#index'
+  get 'cities', to: 'locations#index'
   # For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html
 end