Railsで下書き機能の作成を行った


今回はRailsで下書き機能の作成ついて紹介します。

### displayカラムの追加

今回は下書き記事かどうかを判断するために、displayカラムを追加します。
add columnコマンドなどを使ってみます。

```ruby
#db/migrate/20220928135436_add_coumuns_to_posts.rb
class AddCoumunsToPosts < ActiveRecord::Migration[6.1]
  def change
    add_column :posts, :display, :string
  end
end
```

そしてmigrateします。

```ruby
rails db:migrate
```

次にコントローラーを記述します。
内容としては、１だったときは、0にし、elseだと逆に処理をします。
0が下書き、1が投稿です。

```ruby
#posts_controller.rb

  def draft
    @post = Post.find(params[:id])
    if @post.display == "1"
      @post.update(display: 0)
      redirect_to post_path(@post)
    else
      @post.update(display: 1)
      redirect_to post_path(@post)
    end
  end

```

そしてViewを作成します。
今回は、投稿ボタンと下書きボタンを分けて作成します。

```Ruby
#post/new.html.erb
<%= render partial: 'layouts/header' %>
<div id="new">

  <%= form_with(model: @post, local: true) do |form| %>
    <div class="field">
      <div class="post_type">
        <div class="label"><%= form.label :post_type, "カテゴリー" %></div>
        <div><%=form.collection_select(:post_type_id, @post_types, :id, :name, include_blank: "選択して下さい") %></div>
      </div>

      <div class="eye_catch">
        <div class="label"><%= form.label :image, "アイキャッチ" %></div>
        <div><%= form.file_field :image %></div>
      </div>

      <div class="title">
        <div class="label"><%= form.label :title, "タイトル" %></div>
        <div><%= form.text_field :title %></div>
      </div>

      <div class="content">
        <div class="label"><%= form.label :content, "投稿内容" %></div>
        <div><%= form.rich_text_area :content %></div>
      </div>

      <%= form.hidden_field :approvement, value: "0" %>

      <div class="submit">
        <%= form.submit "上記内容で投稿する" , name: "release"  %>
      </div>

      <div class="submit">
        <%= form.submit "上記内容を下書きにする" , name: "draft"  %>
      </div>

    </div>
  <% end %>
</div>
<%= render partial: 'layouts/footer' %>
```
ポイントとしては、nameは投稿はrelease, 下書きはdraftにしている点です。
ここをもし、
```Ruby
 <%= form.submit "上記内容で投稿する" , name: "post"  %>
```
にするとエラーが出てしまい、上手く処理ができないので、post以外の名前を何か付けましょう。
最後に表示できるか見ます。

### 表示の確認

```Ruby
#show.html.erb

<%= render partial: 'layouts/header' %>
<div class="blog_page">
  <%# ここにパンくず %>

  <div class="main_contents">
    <%# if user_signed_in? %>
      <%# if current_user.admin == "管理者" %>
        <div class="buttons">
        <% if @post.display == "1" %>

          <%= link_to draft_post_path(@post) do %>
            <div class="edit">
              下書きに戻す
            </div>
          <% end %>
        <% else %> 
          <%= link_to draft_post_path(@post) do %>
            <div class="edit">
              下書き
            </div>
          <% end %>

        <% end %>

          <%= link_to edit_post_path(@post) do %>
            <div class="edit">
              編集
            </div>
          <% end %>
          <%= link_to post_path(@post), method: :delete, data: { confirm: '本当に削除しますか？'} do %>
            <div class="delete">
              削除
            </div>
          <% end %>
        </div>
      <%# end %>
    <%# end %>
    <div class="upper_content">
      <div class="category_names">
        <%= image_tag('icon_all.png', alt: "all", class: "icon_m") %>
        <div class="article_category">
          <%= @post.post_type.name %>
        </div>
      </div>
      <div class="date">
        <% if @post.present? %>
          <%= @post.created_at.to_s(:datetime_jp) %>
        <% end %>
      </div>
    </div>
  

```

showでうまく切り替えられるか確認しましょう。

![スクリーンショット 2022-11-15 20.46.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/569989/4be20633-0c32-2a3e-4192-7ff113e95627.png)

![スクリーンショット 2022-11-15 20.46.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/569989/26140e32-5168-fd30-eae6-0b5709ffe7b9.png)

![スクリーンショット 2022-11-15 20.46.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/569989/7174aff3-2ab3-c4dc-bc01-fc42ca951a5d.png)

下書きボタンを押すと、下書きに戻すに切り替わりました。

あとは一覧ページで下書きだと表示しない用に設定すれば完成です。