Rails7.1 | 動画学習アプリ作成 | 26 | タスクの登録 - 学生向けプログラミング入門

↓↓クリックして頂けると励みになります。

【25 | Dropzone】 << 【ホーム】 >> 【27 | プロジェクトビュー】

プロジェクトの登録と同じようにタスクの登録もできるようにします。
では早速、タスクを登録するためのビューを作成していきます。

app/views/tasks/new.html.erb

<div class="container">
    <div class="card mt-4">
        <div class="card-body">
            <h4 class="mt-4 mb-4"><b>タスクの新規登録</b></h4>
            <%= form_for @task do |f| %>

                <div class="form-check mb-4">
                    <%= f.check_box :header, class: "form-check-input" %>
                    <label class="form-check-label" for="flexCheckDefault">
                        ヘッダー
                    </label>
                </div>

                <div class="mb-4 mt-4">
                    <label>プロジェクト</label>
                    <%= f.select(:project_id, options_for_select(@projects.map{ |p| [p.name, p.id] })) %>
                </div>

                <div class="mb-4">
                    <label>タグ（タスクのソートに使用します）</label>
                    <%= f.select :tag, [ ["1", "1"], ["2", "2"], ["3", "3"], ["4", "4"], ["5", "5"], ["6", "6"], ["7", "7"], ["8", "8"], ["9", "9"], ["10", "10"], ["11", "11"], ["12", "12"], ["13", "13"], ["14", "14"], ["15", "15"], ["16", "16"], ["17", "17"], ["18", "18"], ["19", "19"], ["20", "20"]],
                        id: "tag", prompt: "選択してください", class: "form-control" %>
                </div>

                <div class="mb-4">
                    <label>タスクのタイトル</label>
                    <%= f.text_field :title, class: "form-control w-100", required: true %>
                </div>
                <div class="mb-4">
                    <label>ビデオのURL</label>
                    <%= f.text_field :video, class: "form-control w-100", required: true %>
                </div>
                <div class="mb-4">
                    <label>タスク内容</label>
                    <%= f.rich_text_area :description, class: "form-control w-100", required: true, style: "height: 200%;" %>
                </div>
                <div class="mb-4">
                    <label>コード（Markdown記法）</label>
                    <%= f.text_area :note, class: "form-control w-100", required: true, style: "height: 300px;" %>
                </div>

                <%= f.submit "登録する", class: "btn btn-danger w-100" %>
            <% end %>
        </div>
    </div>    
</div>

サーバ起動
rails s

タスクを新規登録して保存してください。
ブラウザ確認
http://localhost:3000/tasks/new

「app\views\tasks」フォルダに「_task_menu.html.erb」ファイルを新規作成します。

app/views/tasks/_task_menu.html.erb(新規作成したファイル)

<div class="card">
    <div class="card-body">
        <ul class="list-group">
            <li class="list-group-item" style="border:none;">
                <%= link_to "タイトル", naming_task_path, class: "btn btn-light" %>
                <% if !@task.title.blank? %>
                    <span class="text-danger"><i class="fa fa-check"></i></span>
                <% end %>    
            </li>
            <li class="list-group-item" style="border:none;">
                <%= link_to "ヘッダー・タグ・ビデオ", video_task_path, class: "btn btn-light" %>
                <% if !@task.video.blank? %>
                    <span class="text-danger"><i class="fa fa-check"></i></span>
                <% end %>    
            </li>
            <li class="list-group-item" style="border:none;">
                <%= link_to "内容", description_task_path, class: "btn btn-light" %>
                <% if !@task.description.blank? %>
                    <span class="text-danger"><i class="fa fa-check"></i></span>
                <% end %>        
            </li>
            <li class="list-group-item" style="border:none;">
                <%= link_to "コード（MarkDown記法）", code_task_path, class: "btn btn-light" %>
                <% if !@task.note.blank? %>
                    <span class="text-danger"><i class="fa fa-check"></i></span>
                <% end %>
            </li>
        </ul>
        <div class="mt-4">
            <% is_ready = !@task.active && !@task.title.blank? && !@task.note.blank? && !@task.description.blank? && !@task.video.blank? %>
            <%= form_for @task do |f| %>
            <%= f.hidden_field :active, value: true %>
            <%= f.submit "公開する", class: "btn btn-danger w-100", disabled: !is_ready %>
            <% end %>
        </div>
    </div>
</div>

続いて「app\views\tasks\naming.html.erb」を編集し、タスクのタイトルを修正できるようにします。

app\views\tasks\naming.html.erb

<div class="container mt-4">
    <div class="row">
        <div class="col-md-3">
            <%= render 'task_menu' %>
        </div>
        <div class="col-md-9">
            <div class="card">
                <div class="card-body">
                <h4 class="mt-4 mb-4"><b>タイトル修正</b></h4>
                    <%= form_for @task do |f| %>
                        <div class="mb-4">
                            <label>タスクのタイトル</label>
                            <%= f.text_field :title, class: "form-control w-100", required: true %>
                        </div>
                        <%= f.submit "修正する", class: "btn btn-danger w-100" %>        
                    <% end %>            
                </div>
            </div>
        </div>
    </div>
</div>

登録したタスクのタイトルを修正できるようになりました。
ブラウザで動作を確認してください。
http://localhost:3000/tasks/7/naming

タスクのヘッダー、タグ、ビデオのURLを編集できるようにします。

「app/views/tasks」フォルダに「video.html.erb」ファイルを新規作成します。
作成した「app/views/tasks/video.html.erb」ファイルを以下のように編集します。

新規作成　【app/views/tasks/video.html.erb】

<div class="container mt-4">
    <div class="row">
        <div class="col-md-3">
            <%= render 'task_menu' %>
        </div>
        <div class="col-md-9">
            <div class="card">
                <div class="card-body">
                <h4 class="mt-4 mb-4"><b>ヘッダー・タグ・ビデオ</b></h4>
                    <%= form_for @task do |f| %>

                        <div class="mb-4 mt-4">
                            <label>プロジェクト</label>
                            <%= f.select(:project_id, options_for_select(@projects.map{ |p| [p.name, p.id] })) %>
                        </div>

                        <div class="form-check mb-4">
                        <%= f.check_box :header, class: "form-check-input" %>
                            <label class="form-check-label" for="flexCheckDefault">
                                ヘッダー
                            </label>
                        </div>
        
                        <div class="mb-4">
                            <label>タグ（タスクのソートに使用します）</label>
                            <%= f.select :tag, [ ["1", "1"], ["2", "2"], ["3", "3"], ["4", "4"], ["5", "5"], ["6", "6"], ["7", "7"], ["8", "8"], ["9", "9"], ["10", "10"], ["11", "11"], ["12", "12"], ["13", "13"], ["14", "14"], ["15", "15"], ["16", "16"], ["17", "17"], ["18", "18"], ["19", "19"], ["20", "20"]],
                                id: "tag", prompt: "選択してください", class: "form-control" %>
                        </div>
    
                        <div class="mb-4">
                            <label>ビデオのURL</label>
                            <%= f.text_field :video, class: "form-control w-100", required: true %>
                        </div>


                        <%= f.submit "修正する", class: "btn btn-danger w-100" %>        
                    <% end %>            
                </div>
            </div>
        </div>
    </div>
</div>

ブラウザを確認します。
http://localhost:3000/tasks/7/video

タスクの内容ページを編集します。
app/views/tasks/description.html.erb

<div class="container mt-4">
    <div class="row">
        <div class="col-md-3">
            <%= render 'task_menu' %>
        </div>
        <div class="col-md-9">
            <div class="card">
                <div class="card-body">
                <h4 class="mt-4 mb-4"><b>内容修正</b></h4>
                    <%= form_for @task do |f| %>
                        <div class="mb-4">
                            <label>タスクの内容</label>
                            <%= f.rich_text_area :description, class: "form-control w-100", required: true, style: "height: 200%;" %>
                        </div>
                        <%= f.submit "修正する", class: "btn btn-danger w-100" %>        
                    <% end %>            
                </div>
            </div>
        </div>
    </div>
</div>

ブラウザを確認します。
http://localhost:3000/tasks/7/description

タスクのコード入力ページを作成します。
「app/views/tasks」フォルダに「code.html.erb」ファイルを新規作成します。
作成した「app/views/tasks/code.html.erb」ファイルを以下のように編集します。

新規作成　app/views/tasks/code.html.erb

<div class="container mt-4">
    <div class="row">
        <div class="col-md-3">
            <%= render 'task_menu' %>
        </div>
        <div class="col-md-9">
            <div class="card">
                <div class="card-body">
                <h4 class="mt-4 mb-4"><b>内容修正</b></h4>
                    <%= form_for @task do |f| %>
                        <div class="mb-4">
                            <label>コード（MarkDown記法）</label>
                            <%= f.text_area :note, class: "form-control w-100", required: true, style: "height: 200%;" %>
                        </div>
                        <%= f.submit "修正する", class: "btn btn-danger w-100" %>        
                    <% end %>            
                </div>
            </div>
        </div>
    </div>
</div>

ブラウザを確認します。
http://localhost:3000/tasks/7/code

内容を全て登録して全項目にチェックマークが付くと「公開」ボタンが機能するようになります。
動作を確認してタスクを公開して下さい。

ナビゲーションバーに「タスクを新規登録」ボタンをつけます。

「app/views/shared/_navbar.html.erb」ファイルの37行目に以下の記述を追加します。

<li><%= link_to  "タスクを新規登録", new_task_path, class: "dropdown-item btn btn-light" %></li>

記述追加　【app/views/shared/_navbar.html.erb】

<nav class="navbar navbar-expand-lg bg-body-tertiary">
  <div class="container-fluid">
    <a class="navbar-brand" href="/"><span class="font1">StreamAcademe</span></a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <!-- もしログインしていなかったら-->
        <% if (!user_signed_in?) %>
        <li class="nav-item" style="margin-bottom: 0.1rem;">
          <span style="margin-left: 1rem;">
          <%= link_to  "新規登録", new_user_registration_path, class: "btn btn-danger" %>
          </span>
        </li>
        <li class="nav-item">
          <span style="margin-left: 1rem;">
            <%= link_to  "ログイン", new_user_session_path, class: "btn btn-success text-light" %>
          </span>
        </li>
      </ul>
      <!-- ログインしていたら -->
      <% else %>
      <ul class="navbar-nav" style="margin-left: 2rem;">
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">

          <figure style="position:relative; top: 0.2rem;" class="avatar <%= current_user.status ? "online" : "offline" %>"></figure>  
          <%= image_tag avatar_url(current_user), class: "bd-placeholder-img figure-img img-fluid rounded-pill", style: "width: 40px; height: 30px;" %>          
            <%= current_user.full_name %>
          </a>
          <ul class="dropdown-menu">
            <li><%= link_to  "ダッシュボード", dashboard_path, class: "dropdown-item btn btn-lightt" %></li>
            <li><%= link_to  "ユーザ登録情報編集", edit_user_registration_path, class: "dropdown-item btn btn-light" %></li>
            <li><hr class="dropdown-divider"><span class="badge bg-danger" style="margin-left: 1rem;">先生</span></li>
            <li><%= link_to  "プロジェクトを新規登録", new_project_path, class: "dropdown-item btn btn-light" %></li>
            <li><%= link_to  "タスクを新規登録", new_task_path, class: "dropdown-item btn btn-light" %></li>
            <li><hr class="dropdown-divider"><span class="badge bg-primary" style="margin-left: 1rem;">生徒</span></li>
            <li><%= link_to  "プロジェクト一覧", projects_path, class: "dropdown-item btn btn-light" %></li>
            <li><hr class="dropdown-divider"></li>
            <li><%= button_to  "ログアウト", destroy_user_session_path, method: :delete, class: "dropdown-item btn btn-light" %></li>
          </ul>
        </li>
      </ul>
      <% end %>

    </div>
  </div>
</nav>