wip menu

app/assets/javascripts/admin/communication/menu_items.js

+/* global $ */
 window.osuny.communication.menuItems = {
     init: function () {
         'use strict';
-        this.kindInput = document.querySelector('form #communication_website_menu_item_kind');
+        this.kindInput = document.querySelector('form .js-kind-input');
         if (this.kindInput === null) {
             return;
         }
 
-        this.elementsForKindUrl = document.querySelectorAll('.kind-url');
-        this.requiredInputsForKindUrl = document.querySelectorAll('.kind-url .required select, .kind-url .required input');
-
-        this.elementsForKindPage = document.querySelectorAll('.kind-page');
-        this.requiredInputsForKindPage = document.querySelectorAll('.kind-page .required select, .kind-page .required input');
+        this.switchUrl = this.kindInput.dataset.url;
 
         this.kindInput.addEventListener('change', this.onKindChange.bind(this));
         this.onKindChange();
@@ -20,38 +17,12 @@ window.osuny.communication.menuItems = {
         'use strict';
         var kind = this.kindInput.value;
 
-        if (kind === 'url') {
-            this.showElements(this.elementsForKindUrl, this.requiredInputsForKindUrl);
-            this.hideElements(this.elementsForKindPage, this.requiredInputsForKindPage);
-        } else if (kind === 'page') {
-            this.showElements(this.elementsForKindPage, this.requiredInputsForKindPage);
-            this.hideElements(this.elementsForKindUrl, this.requiredInputsForKindUrl);
-        } else if (kind === 'blank') {
-            this.hideElements(this.elementsForKindPage, this.requiredInputsForKindPage);
-            this.hideElements(this.elementsForKindUrl, this.requiredInputsForKindUrl);
-        }
-    },
-
-    showElements: function (elements, requiredInputs) {
-        'use strict';
-        var i;
-        for (i = 0; i < elements.length; i += 1) {
-            elements[i].classList.remove('d-none');
-        }
-        for (i = 0; i < requiredInputs.length; i += 1) {
-            requiredInputs[i].setAttribute('required', 'required');
-        }
-    },
-
-    hideElements: function (elements, requiredInputs) {
-        'use strict';
-        var i;
-        for (i = 0; i < elements.length; i += 1) {
-            elements[i].classList.add('d-none');
-        }
-        for (i = 0; i < requiredInputs.length; i += 1) {
-            requiredInputs[i].removeAttribute('required');
-        }
+        $.ajax(this.switchUrl, {
+            method: 'GET',
+            data: 'kind=' + kind,
+            processData: false,
+            contentType: false
+        });
     },
 
     invoke: function () {

app/controllers/admin/communication/website/menu/items_controller.rb

@@ -25,6 +25,12 @@ class Admin::Communication::Website::Menu::ItemsController < Admin::Communicatio
     @children = @item.children.ordered
   end
 
+  def kind_switch
+    return unless request.xhr?
+    @kind = params[:kind]
+    return if @kind.blank?
+  end
+
   def new
     @item.menu = @menu
     @item.website = @website

app/views/admin/communication/website/menu/items/_form.html.erb

@@ -11,13 +11,16 @@
           <%= f.input :kind,
                       include_blank: false,
                       label_method: -> (p) { I18n.t(p[1], scope: 'enums.communication/website/menu/item.kind') },
-                      class: 'js-kind-input' %>
-          <div class="kind-url">
+                      input_html: {
+                        class: 'js-kind-input',
+                        data: { url: kind_switch_admin_communication_website_menu_items_path }
+                       } %>
+          <div class="d-none js-url-field">
             <%= f.input :url, as: :string %>
           </div>
-          <div class="kind-page">
-            <%= f.input :about_type, as: :hidden, input_html: { value: 'Communication::Website::Page' } %>
-            <%= f.association :about, collection: @website.list_of_pages, label_method: ->(p) { sanitize p[:label] }, value_method: ->(p) { p[:id] } %>
+          <div class="d-none js-about-fields">
+            <%= f.input :about_type, as: :hidden, input_html: { class: 'js-about-id' } %>
+            <%= f.association :about, collection: @website.list_of_pages, label_method: ->(p) { sanitize p[:label] }, value_method: ->(p) { p[:id] }, input_html: { class: 'js-about-id' } %>
           </div>
         </div>
       </div>

app/views/admin/communication/website/menu/items/kind_switch.js.erb

+function displayAbout(options) {
+    $('.js-url-field').addClass('d-none');
+    $('.js-about-fields').removeClass('d-none');
+    $('.js-about-id').html(options);
+}
+
+function hideAbout() {
+    $('.js-about-fields').addClass('d-none');
+}
+
+<% if @kind == 'url' %>
+    $('.js-url-field').removeClass('d-none');
+    hideAbout();
+<% elsif @kind == 'page' %>
+    <%
+        options = ['<option value="" label=" "></option>']
+        @website.list_of_pages.each do |page|
+            options << "<option value=\"#{page[:id]}\">#{page[:label]}</option>"
+        end
+    %>
+    displayAbout("<%= j(raw(options.join(''))) %>");
+<% elsif @kind == 'program' %>
+    displayAbout();
+<% elsif @kind == 'news_category' %>
+    displayAbout();
+<% elsif @kind == 'news_article' %>
+    displayAbout();
+<% else %>
+    $('.js-url-field').addClass('d-none');
+    hideAbout();
+<% end %>

config/routes/admin/communication.rb

@@ -39,6 +39,7 @@ namespace :communication do
     resources :menus, controller: 'website/menus' do
       resources :items, controller: 'website/menu/items', except: :index do
         collection do
+          get :kind_switch
           post :reorder
         end
         member do