マンダラートを作りたい #1

https://navi.dropbox.jp/mandal-art



![マンダラート](https://2fnflu14pimi44odtt128jit-wpengine.netdna-ssl.com/wp-content/uploads/2017/01/mandal-art-06.jpg)



マンダラートとはアイデア出しの手法の一つ。
こんな漢字で、連想してアイデアを出してく。

最初から、こんな漢字のマス目を用意して、投稿表示するのが意外と難しい。

投稿ページ、投稿一覧表示ページ、投稿編集ページを合体させたいのだが、それが意外と難しい。(大事なことなので２回言った)



```ruby
class MandalartsController < ApplicationController
  def index
    @mandalarts = Mandalart.all
    new
  end

  def new
    @mandalart = Mandalart.new
  end

  def create
    @mandalart = Mandalart.new(mandalart_params)
    if @mandalart.save
      redirect_to mandalarts_path
    else
      render 'new'
    end
  end
```


```erb:index.html.erb

<table class="mandalarts">
  <% 3.times do %>
    <tr>
      <% 3.times do %>
        <td>
          <% if @mandalarts %>
            <%= render "mandalarts/form", %>
          <% end %>
          <%= render "mandalarts/form"%>
        </td>
      <% end %>
    </tr>
  <% end %>
</table>
```


```erb:mandalarts/_form.html.erb

<%= form_with model: @mandalart do |f|%>
  <% if @mandalart %>
    <%= f.text_area :text ,value: @mandalart.text%>
  <% else %>
    <%= f.text_area :text %>
  <% end %>
  <%= f.submit%>
<% end %>
```




ひとまずこんな感じ。



```erb
    <%= f.text_area :text ,value: @mandalart.text%>
```

とすることで、
すでにあるオブジェクトのテキストが、フォームの中にある状態にはなったが、submitを押すと、また新しいオブジェクトが生成されて、
フォームの中にあるテキストは、変わっていない。

# 編集のフォームをindex.html.erbに表示したい！

問題点は、form_withの性質上modelオプションの引数のオブジェクトが空なら、newアクションを呼び出してしまう。


```

<%if @mandalart == nil %>
  <%= @mandalart.text = "" %>
<% end %>
<%= form_with model: @mandalart do |f|%>
```

とかにすれば、editアクションが呼び出されて、
マンダラートができるのではないか。


# 一旦諦めて、投稿フォームと、編集フォームを別々にすることに



```mandalarts_controller.rb

class MandalartsController < ApplicationController
  def index


    # 最初から配列の要素を9つ入れとく
    # 配列の要素の中身があれば、何もしない
    # 配列の要素の中身があれば、""の要素を入れとく


    @mandalarts = Mandalart.all

    if @mandalarts == []
      @mandalarts = []
      9.times do |mandalart|
        mandalart = Mandalart.create(text: '')
        @mandalarts << mandalart
      end
    end

  end

  def new
    @mandalart = Mandalart.new
  end

  def create
    @mandalart = Mandalart.new(mandalart_params)
    if @mandalart.save
      redirect_to mandalarts_path
    else
      render 'new'
    end
  end

  def edit
    @mandalart = Mandalart.find(params[:id]) 
  end

  def update
    @mandalart = Mandalart.find(params[:id])
    if @mandalart.update(mandalart_params)
      redirect_to mandalarts_path
    else
      render 'edit'
    end
  end

  private
    def mandalart_params
      params.require(:mandalart).permit(:text)
    end
end

```


```mandalarts/index.html.erb

<table class="mandalart-table">

    <tr>
      <% @mandalarts[0..2].each do |mandalart| %>
        <td>
            <div class="mandalart-text">
              <%= mandalart.text%>
            </div>
            <%= link_to "記入", edit_mandalart_path(mandalart.id)%>
        </td>
      <% end %>
    </tr>

    <tr>
       <% @mandalarts[3..5].each do |mandalart| %>
      <td>
        <div class="mandalart-text">
          <%= mandalart.text%>
        </div>
          <%= link_to "記入", edit_mandalart_path(mandalart.id)%>
      </td>
        <% end %>
    </tr>

    <tr>
       <% @mandalarts[6..8].each do |mandalart| %>
      <td>
        <div class="mandalart-text">
          <%= mandalart.text%>
        </div>
          <%= link_to "記入", edit_mandalart_path(mandalart.id)%>
      </td>
        <% end %>
    </tr>

</table>



```


こうすることで3×3のマンダラートが一応完成した。
DRYとはいい難いが、今の自分の技術でマス目状にするにはこうするしかなかった。



![スクリーンショット 2021-12-03 19.46.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/653881/41208ccf-902b-c8d1-ac01-159df4789699.png)



```

  def index


    # 最初から配列の要素を9つ入れとく
    # 配列の要素の中身があれば、何もしない
    # 配列の要素の中身があれば、""の要素を入れとく


    @mandalarts = Mandalart.all

    if @mandalarts == []
      @mandalarts = []
      9.times do |mandalart|
        mandalart = Mandalart.create(text: '')
        @mandalarts << mandalart
      end
    end

  end
```


コメントにもあるが、最初に、9個要素がある配列を用意しないと、
viewでエラーが起きるので、9個要素がある配列を用意する処理を書いた。
(この処理は切り出してもいいかもしれない)

```ruby
if @mandalarts == []
```

とすることで、すでに配列の中身があれば、9.timesとかいう処理は実行されない。
常に3×3のマンダラートを表示させることに成功

次回はこのテストを書いていくことにする。