使用Bootstrap Bar来增长Onboarding Progress Bar功能。

时间 2019-12-11

标签使用 bootstrap 增长 onboarding progress 功能栏目 Bootstarp 繁體版

原文原文链接

git初始代码https://github.com/chentianwei411/at-mentions-with-action-textcss

首先，开分支onboardingbar.html

而后，git

rails g scaffold Team user:references name
rails g migration AddTwitterToUsers twitter
rails db:migrate

在user.rb上添加github

has_many :teams

在_navbar.html.erb上添加导航连接：数据库

<li class="nav-item"><%= link_to "Teams", teams_path, class: "nav-link" %></li>

在用户注册app/views/devise/registrations／edit.html.erb上添加twitter field:bootstrap

<div class="form-group">
  <%= f.text_field :twitter, class: 'form-control', placeholder: 'Twitter Username' %>
</div>

在application_controller.rb上添加参数白名单：数组

  protected

    def configure_permitted_parameters
      devise_parameter_sanitizer.permit(:sign_up, keys: [:name])
      devise_parameter_sanitizer.permit(:account_update, keys: [:name, :twitter])
    end

添加OnboardingBar:

在app/views/home/index.html.erbapp

<% if user_signed_in? %>
  <div class="progress">
    <div class="progress-bar" role="progressbar" style="width: 25%"></div>
  </div>

  <%= current_user.twitter? %>
  <%= current_user.teams.any? %>
<% end %>

下一步，user.rb添加方法来判断onboardingbar的进度：spa

  def onboarding_percent
    steps = [:twitter?, :has_team?]
    conplete = steps.select{ |step| send(step)}
    complete.length / steps.length.to_f * 100
  end

  def has_team?
    teams.any?
  end

# select()方法，筛选返回值为true的数组项
# Ruby#send()方法，可使用symbol符号方法
# 方法最后返回的值的计算必须使用浮点格式，不能是整数格式。使用to_f。

在views/home/index.html.erb，从bootstrap拷贝下来进度条代码，并修改👇：code

<% if user_signed_in? %>
  <div class="progress">
    <div class="progress-bar" role="progressbar" style="width: <%= current_user.onboarding_percent %>%"></div>
  </div>

  <%= current_user.onboarding_percent %>%
  <%= current_user.twitter? %>
  <%= current_user.teams.any? %>
<% end %>

这样进度条就能够根据数据库传来的数据显示进度了。

下一步是对进度条的说明，即缺哪一项：

在进度条下使用✅，❌图标和说明文字。

使用fontawesome.com的图标，把链接粘贴到<head>内

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">

在index.html.erb上加上：

  <ul>
    <li><%= current_user.onboarding_percent %>%</li>
    <li>
      <% if current_user.twitter? %>
        <i class="far fa-check-circle"></i>
      <% else %>
        <i class="far fa-window-close"></i>
      <% end %>
      Add your Twitter profile
    </li>
    <li>
      <% if current_user.teams.any? %>
        <i class="far fa-check-circle"></i>
      <% else %>
        <i class="far fa-window-close"></i>
      <% end %>
      Create a team
    </li>
  </ul>

重构：

上面的代码能够重构：使用helper

若是：

index内的代码太多
onboarding功能的代码反复使用

那么，能够用一个helper方法。

index.html.erb

<% if user_signed_in? %>
  Onboarding <%= current_user.onboarding_percent.round%>% Complete
  <div class="progress">
    <div class="progress-bar" role="progressbar" style="width: <%= current_user.onboarding_percent.round %>%"></div>
  </div>

  <div><%= onboarding_step_icon(current_user.twitter?)%> Add your Twitter profile</div>
  <div><%= onboarding_step_icon(current_user.has_team?)%> Create a team</div>
<% end %>

helper方法：

module ApplicationHelper
...
  def onboarding_step_icon(step_completed)
    color = step_completed ? "text-success" : "text-muted"
    tag.i class: ['fas', "fa-check", color]
  end
end

# tag.<tag name>代替了content_tag(name)的写法

user.rb中的user类内的实例方法的重构，

若是：

方法很是多，不方便区分。
不少方法只用于某一个功能。

那么，就能够把部分方法放到一个模块内，让User类include这个类。

例如：

module UserOnboarding
  extend ActiveSupport::Corcern

  def onboarding_percent
    steps = [:twitter?, :has_team?]
    complete = steps.select{ |step| send(step)}
    complete.length / steps.length.to_f * 100
  end

  def has_team?
    teams.any?
  end
end

而后user.rb内include UserOnboarding