Merge pull request #14 from tungnt-580/add-admin-page

Create admin page with static pages

Gemfile

@@ -68,6 +68,7 @@ group :test do
   gem "simplecov-rcov", require: false
   gem "simplecov-json"
   gem "shoulda-matchers"
+  gem "rails-controller-testing"
 end
 
 group :staging, :production do

Gemfile.lock

@@ -445,6 +445,10 @@ GEM
       bundler (>= 1.3.0, < 2.0)
       railties (= 5.1.0.beta1)
       sprockets-rails (>= 2.0.0)
+    rails-controller-testing (1.0.1)
+      actionpack (~> 5.x)
+      actionview (~> 5.x)
+      activesupport (~> 5.x)
     rails-dom-testing (2.0.2)
       activesupport (>= 4.2.0, < 6.0)
       nokogiri (~> 1.6)
@@ -677,6 +681,7 @@ DEPENDENCIES
   passenger (>= 5.0.25)
   pry
   rails (>= 5.0.0.rc1, < 5.1)
+  rails-controller-testing
   rails_best_practices
   ransack
   react-rails

app/assets/javascripts/admin.js

@@ -0,0 +1,6 @@
+//= require jquery
+//= require jquery_ujs
+//= require bootstrap-sprockets
+//= require react
+//= require react_ujs
+//= require_tree .

app/assets/javascripts/components/admin/layouts/_left_navbar.es6.jsx

@@ -0,0 +1,28 @@
+class LeftNavbar extends React.Component {
+  render() {
+    const { area } = this.props
+
+    const nav_lists = (() => {
+      const links = [
+        { area: "index", href: "", fa: "dashboard", html: "Dashboard" },
+        { area: "users", href: "users", fa: "users", html: "Users" }
+      ]
+      let result = []
+      links.map((link) => {
+        const active = area == link.area ? "active" : ""
+        result.push(<li  key={link.area} className={active}>
+          <a href={"/admin/" + link.href}>
+            <i className={"fa fa-" + link.fa}></i>
+            {link.html}
+          </a>
+        </li>)
+      }) 
+      return result
+    })()
+    return <div className="collapse navbar-collapse navbar-ex1-collapse">
+      <ul className="nav navbar-nav side-nav">
+        {nav_lists}
+      </ul>
+    </div>
+  }
+}

app/assets/javascripts/components/admin/layouts/header.es6.jsx

@@ -0,0 +1,63 @@
+class AdminHeader extends React.Component {
+  render() {
+    const { area } = this.props
+
+    return <nav className="navbar navbar-inverse navbar-fixed-top" role="navigation">
+      <div className="navbar-header">
+        <button type="button" className="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
+          <span className="sr-only">Toggle navigation</span>
+          <span className="icon-bar"></span>
+          <span className="icon-bar"></span>
+          <span className="icon-bar"></span>
+        </button>
+        <a className="navbar-brand admin-brand" href="/admin">Admin</a>
+      </div>
+      <ul className="nav navbar-right top-nav">
+        <li className="dropdown">
+          <a href="#" className="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
+            <i className="fa fa-bell"></i> 
+            <b className="caret"></b>
+          </a>
+          <ul className="dropdown-menu alert-dropdown">
+            <li>
+              <a href="#">Alert 1</a>
+            </li>
+            <li>
+              <a href="#">Alert 2</a>
+            </li>
+            <li className="divider">
+            </li>
+            <li>
+              <a href="#">View all</a>
+            </li>
+          </ul>
+        </li>
+        <li className="dropdown">
+          <a href="#" className="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
+            <i className="fa fa-user"></i> Tung Teng
+            <b className="caret"></b>
+          </a>
+          <ul className="dropdown-menu">
+            <li>
+              <a href="#">
+                <i className="fa fa-fw fa-user"></i> Profile
+              </a>
+            </li>
+            <li>
+              <a href="#">
+                <i className="fa fa-fw fa-gear"></i> Settings
+              </a>
+            </li>
+            <li className="divider"></li>
+            <li>
+                <a href="#">
+                  <i className="fa fa-fw fa-power-off"></i> Log Out
+                </a>
+            </li>
+          </ul>
+        </li>
+      </ul>
+      <LeftNavbar area={area}/>
+    </nav>
+  }
+}

app/assets/javascripts/components/admin/static_pages/dashboard.es6.jsx

@@ -0,0 +1,33 @@
+class Dashboard extends React.Component {
+  render() {
+    const { count } = this.props
+
+    return <div className="row">
+      <div className="col-lg-3 col-md-6">
+        <div className="panel panel-black">
+          <div className="panel-heading">
+            <div className="row">
+              <div className="col-xs-3">
+                <i className="fa fa-users fa-5x"></i>
+              </div>
+              <div className="col-xs-9 text-right">
+                <div className="huge">{count.user}</div>
+                <div>Users</div>
+              </div>
+            </div>
+          </div>
+          <a href="/admin/users">
+            <div className="panel-footer">
+              <span className="pull-left">View Details</span>
+              <span className="pull-right">
+                <i className="fa fa-arrow-circle-right"></i>
+              </span>
+              <div className="clearfix">
+              </div>
+            </div>
+          </a>
+        </div>
+      </div>
+    </div>
+  }
+}

app/assets/stylesheets/admin.scss

@@ -0,0 +1,124 @@
+@import 'bootstrap-sprockets';
+@import 'bootstrap';
+@import 'font-awesome';
+@import 'config/settings';
+
+body {
+  margin-top: 100px;
+  background-color: $white-color;
+  @media (min-width: 768px) {
+    margin-top: 50px;
+  }
+}
+
+#wrapper {
+  padding-left: 0;
+  @media (min-width: 768px) {
+    padding-left: 225px;
+  }
+}
+
+.navbar-brand.admin-brand {
+  color: $white-color;
+  text-transform: uppercase;
+  font-weight: 900;
+}
+
+@mixin top_nav_li {
+  display: inline-block;
+  float: left;
+  >a {
+    &:hover, &:focus {
+      color: $white-color;
+      background-color: $black-color;
+    }
+  }
+}
+
+.top-nav {
+  padding: 0 15px;
+  >li {
+    @include top_nav_li;
+    >a {
+      padding-top: 15px;
+      padding-bottom: 15px;
+      line-height: 20px;
+      color: $grey-color;
+    }
+  }
+  .open {
+    @include top_nav_li;
+    >a {
+      color: $white-color;
+      background-color: $black-color;
+    }
+    >.dropdown-menu {
+      float: left;
+      margin-top: 0;
+      border: 1px solid rgba(0, 0, 0, .15);
+      border-top-left-radius: 0;
+      border-top-right-radius: 0;
+      background-color: $white-color;
+      box-shadow: 0 6px 12px rgba(0,0,0,.175);
+      -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
+    }
+  }
+}
+
+ul.alert-dropdown {
+  width: 200px;
+}
+
+
+.side-nav {
+  @media (min-width: 768px) {
+    position: fixed;
+    top: 51px;
+    left: 225px;
+    width: 225px;
+    margin-left: -225px;
+    border: none;
+    border-radius: 0;
+    overflow-y: auto;
+    background-color: $mine-shaft-color;
+    bottom: 0;
+    overflow-x: hidden;
+    padding-bottom: 40px;
+    >li>a {
+      width: 225px;
+    }
+  }
+}
+
+#page-wrapper {
+  width: 100%;
+  padding: 0;
+  background-color: $white-color;
+  @media (min-width: 768px) {
+    padding: 10px;
+  }
+}
+
+@mixin panel_color($color, $bold-color, $inverse-color: $white-color) {
+  border-color: $color;
+  .panel-heading {
+    border-color: $color;
+    color: $inverse-color;
+    background-color: $color;
+  }
+  a {
+    color: $color;
+    &:hover, &:focus {
+      color: $bold-color
+    }
+  }
+}
+
+.panel-black {
+  @include panel_color(#333, #000);
+}
+
+.huge {
+  font-size: 40px;
+  line-height: normal;
+}

app/assets/stylesheets/config/settings.scss

@@ -3,3 +3,5 @@ $white-color: #fff;
 $emperor-color: #555;
 $mine-shaft-color: #222;
 $mercury-color: #eaeaea;
+$grey-color: #999;
+$black-color: #000;

app/controllers/admin/base_controller.rb

@@ -0,0 +1,20 @@
+class Admin::BaseController < ApplicationController
+  layout "./admin/layouts/admin"
+  before_action :last_page
+
+  protected
+
+  def authenticate_user!
+    if user_signed_in? && current_user.admin?
+      super
+    else 
+      redirect_to admin_login_path
+    end
+  end 
+
+  private
+
+  def last_page
+    session[:last_page] = request.env["HTTP_REFERER"]
+  end
+end

app/controllers/admin/static_pages_controller.rb

@@ -0,0 +1,5 @@
+class Admin::StaticPagesController < Admin::BaseController
+  def index
+    @count = {user: User.count}
+  end
+end

app/helpers/admin/base_helper.rb

@@ -0,0 +1,10 @@
+module Admin::BaseHelper
+  def area_name
+    controller_name == "static_pages" ? action_name : controller_name
+  end
+
+  def page_header
+    headers = {"users" => t(".users"), "index" => t(".dashboard")}
+    headers[area_name]
+  end
+end 

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

@@ -0,0 +1 @@
+<%= react_component "AdminHeader", area: area_name %>

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

@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title><%= full_title yield :title %></title>
+    <%= csrf_meta_tags %>
+    <%= stylesheet_link_tag "admin", media: "all" %>
+    <%= javascript_include_tag "admin" %>
+    <%= render "layouts/shim" %>
+  </head>
+
+  <body>
+    <div id="wrapper">
+      <%= render "admin/layouts/header" %>
+      <div id="page-wrapper">
+        <div class="container-fluid">
+          <div class="row">
+            <div class="col-lg-12">
+              <h1 class="page-header">
+                <%= page_header %>
+              </h1>
+              <%= yield :breadcrumb %>
+            </div>
+          </div>
+          <%= yield %>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>

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

@@ -0,0 +1,10 @@
+<% provide :title, t(".title") %>
+<% content_for :breadcrumb do %>
+  <ol class="breadcrumb">
+    <li class="active">
+      <i class="fa fa-dashboard"></i>
+      <%= t ".dashboard" %>
+    </li>
+  </ol>
+<% end %>
+<%= react_component "Dashboard", count: @count %>

config/application.rb

@@ -2,14 +2,13 @@
 
 require "rails/all"
 
-# Require the gems listed in Gemfile, including any gems
-# you"ve limited to :test, :development, or :production.
 Bundler.require(*Rails.groups)
 
 module CvMaker
   class Application < Rails::Application
     config.to_prepare do
       DeviseController.respond_to :html
     end
+    config.assets.precompile += ["admin.scss", "admin.js"]
   end
 end