使用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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。