商品出品ページ

####商品出品ページの配送のセレクトボックスを実装した際の自分用の忘備録。

#1 最初から表示されている３つのセレクトボックス内の値はモデルにenumを書く(string型になっていてはいけない？確認する。)

"---"は初期表示用に０で記述しておく。
同じモデル内で同じ用語は利用できないらしく、今回は"---"が複数あるのでArgumentErrorになった。
下記URLを参考に末尾に_prefix: trueをつけることで解決できた。

<参考>https://www.changesworlds.com/blog/2017/08/how-to-use-activerecord-enum-and-how-to-avoid-duplicate-errors/

product.rb

class Product < ApplicationRecord
  has_many :products_photos, dependent: :destroy
  # belongs_to :user
  belongs_to :brand
  belongs_to :category
  belongs_to :products_size


  enum delivery_charge: {
  "---":0,送料込み（出品者負担）:1,着払い（購入者負担）:2
  }


  enum delivery_area:{
  "---":0,
  北海道:1,青森県:2,岩手県:3,宮城県:4,秋田県:5,山形県:6,福島県:7,
  茨城県:8,栃木県:9,群馬県:10,埼玉県:11,千葉県:12,東京都:13,神奈川県:14,
  新潟県:15,富山県:16,石川県:17,福井県:18,山梨県:19,長野県:20,
  岐阜県:21,静岡県:22,愛知県:23,三重県:24,
  滋賀県:25,京都府:26,大阪府:27,兵庫県:28,奈良県:29,和歌山県:30,
  鳥取県:31,島根県:32,岡山県:33,広島県:34,山口県:35,
  徳島県:36,香川県:37,愛媛県:38,高知県:39,
  福岡県:40,佐賀県:41,長崎県:42,熊本県:43,大分県:44,宮崎県:45,鹿児島県:46,沖縄県:47
  },_prefix: true

  enum delivery_days:{
  "---":0,
  "1~2日で発送":1, "2~3日で発送":2, "4~7日で発送":3
},_prefix: true
end

    -# 商品の配送について
    .listing-content.clearfix
      .listing-sub-head 配送について
      = link_to '#', class: 'listing-product-help' do
        ?
      .listing-form-box
        .listing-product-delivery-charge-burden
          = f.label '配送料の負担', class: 'listing-default__label' 
          %span.listing-default--require 必須
          .listing-select-wrapper
            .listing-select-wrapper__box
              = f.select :delivery_charge, Product.delivery_charges.keys, {}, {class: 'listing-select-wrapper__box--select',id:"delivery_charge"}
              %i.fas.fa-chevron-down.listing-select-wrapper__box--arrow-down
        

        .listing-product-regional-original-delivery
          .listing-default__label 配送元の地域
          %span.listing-default--require 必須
          .listing-select-wrapper
            .listing-select-wrapper__box
              = f.select :delivery_area, Product.delivery_areas, {}, {class: 'listing-select-wrapper__box--select'}
              %i.fas.fa-chevron-down.listing-select-wrapper__box--arrow-down

        .listing-product-days-up-to-delivery
          .listing-default__label 配送までの日数
          %span.listing-default--require 必須
          .listing-select-wrapper
            .listing-select-wrapper__box
              = f.select :delivery_days, Product.delivery_days, {}, {class: 'listing-select-wrapper__box--select'}
              %i.fas.fa-chevron-down.listing-select-wrapper__box--arrow-down

####（上記の補足）enumをVIEWで読みこむ。
= f.select :今回はカラム名に合わせた名前, モデル名.今回はカラム名に合わせたenum名の複数形, {オプションが必要なら記述、今回は特にないがオプションなしを明示しなければならないので、空欄で記載}, {このセレクトボックスのクラス名}

#2 配送料の負担を選択後　配送の方法のセレクトボックスを出現させる。

products_controller

   # 配送料の負担が選ばれた後のアクションを追加
   def get_delivery_method
   end

routes.rb

  resources :products, only: [:index, :show, :new, :edit, :destroy] do
    collection do
      get 'get_category_children', defaults: { format: 'json' }
      get 'get_category_grandchildren', defaults: { format: 'json' }
      get 'get_size', defaults: { format: 'json' }
      get 'get_delivery_method'
    end
  end

product_delivery.js

$(function(){
  var array1 = [ '未定','らくらくメルカリ便','ゆうメール','レターパック','普通郵便（定型、定型外）',
  'クロネコヤマト','ゆうパック','クリックポスト','ゆうパケット' ]
  var array2 = ['ゆうメール','クロネコヤマト','ゆうパック']

  function appendOption(method){
    var html = `<option value="${method}">${method}</option>`;
    return html;
  }

  $("#delivery_charge").on('change',function(){
    var delivery_parentCategory = ""

    delivery_parentCategory = document.getElementById('delivery_charge').value;
    if (delivery_parentCategory  != "---"){

    
    $.ajax({
        url: 'get_delivery_method',
        type: 'GET',
        data: { parent_name: delivery_parentCategory },
        dataType: 'json'
      })

      .done(function(method) {
        $('#delivery_method-parent').remove();
        var methodBoxHtml = '';
        var insertHTML = '';
        if (delivery_parentCategory == "送料込み（出品者負担）"){
          array1.forEach(function(method){
          insertHTML += appendOption(method);
          });
        }else (delivery_parentCategory == "着払い（購入者負担）");{
            array2.forEach(function(method){
            insertHTML += appendOption(method);
            });
          }
        methodBoxHtml = `<div class="listing-product-delivery-method" id="delivery_method-parent"> 
                          <label class='listing-default__label'> 配送の方法</label> 
                          <span class='listing-default--require'>必須</span> 
                            <div class='listing-select-wrapper__box'>
                              <div class='listing-select-wrapper'></div>
                                <select class="listing-select-wrapper__box--select" id="delivery_charge">
                                  <option value="---">---</option>
                                  ${insertHTML}
                                </select>
                                <i class='fas fa-chevron-down listing-select-wrapper__box--arrow-down'></i>
                              </div>
                            </div>
                          </div>`;
      $('.listing-product-delivery-charge-burden').append(methodBoxHtml);

        console.log(delivery_parentCategory)
      })
    }
    else {$('#delivery_method-parent').remove();}

  });

});

#3上記のJSを分解して見ていく。
routesに加筆したget_delivery_methodにajaxの送り先を指定。
JS内でenumを呼び出せなかった為、まず配列を記入。

#この部分は要確認
  function appendOption(method){
    var html = `<option value="${method}">${method}</option>`;
    return html;

#親要素（配送料の負担）が、違う物を選ばれたということを認識。
#空の変数を用意
  $("#delivery_charge").on('change',function(){
    var delivery_parentCategory = ""

# value＝何が選択されたかを変数に渡す。
    delivery_parentCategory = document.getElementById('delivery_charge').value;

# ここのifで、!= "---"以外の物を選択した場合の条件分岐、"---"以外を選択したなら、Ajax以下を実行、
#"---"を選択したならば、 最下部のelse {$('#delivery_method-parent').remove();}を実行、出現してしまった「配送の方法」を削除する。（配送の方法を消すのだから#delivery_method-parentという名前は不適格かも？？確認する。）

　　if (delivery_parentCategory  != "---"){

# parent_name: delivery_parentCategoryについて確認
    $.ajax({
        url: 'get_delivery_method',
        type: 'GET',
        data: { parent_name: delivery_parentCategory },
        dataType: 'json'
      })

# methodBoxにはHTML要素が入る。
# insertHTMLにはappendOption(method)が追加されていく。

      .done(function(method) {
#下記のremoveがなにを消す用かを確認
        $('#delivery_method-parent').remove();
        var methodBoxHtml = '';
        var insertHTML = '';

#このif文でどっちの配列を選択するかを決定し、セレクトボックスの中身を変化させる。

        if (delivery_parentCategory == "送料込み（出品者負担）"){
          delivery_method1.forEach(function(method){
          insertHTML += appendOption(method);
          });
        }else (delivery_parentCategory == "着払い（購入者負担）");{
            delivery_method2.forEach(function(method){
            insertHTML += appendOption(method);
            });
          }
        methodBoxHtml = `<div class="listing-product-delivery-method" id="delivery_method-parent"> 
                          <label class='listing-default__label'> 配送の方法</label> 
                          <span class='listing-default--require'>必須</span> 
                            <div class='listing-select-wrapper__box'>
                              <div class='listing-select-wrapper'></div>
                                <select class="listing-select-wrapper__box--select" id="delivery_charge">
                                  <option value="---">---</option>
                                  ${insertHTML}
                                </select>
                                <i class='fas fa-chevron-down listing-select-wrapper__box--arrow-down'></i>
                              </div>
                            </div>
                          </div>`;
      $('.listing-product-delivery-charge-burden').append(methodBoxHtml);

      })
    }

    else {$('#delivery_method-parent').remove();}

  });

});