wip pages tree

app/assets/javascripts/admin/pages/communication/website/pages.js

+/* global $ */
+window.osuny = window.osuny || {};
+window.osuny.pagesTree = {
+
+    init: function () {
+        'use strict';
+        $('.js-tree-element').click(this.branchClicked.bind(this));
+    },
+
+    branchClicked: function (e) {
+        'use strict';
+        var $target = $(e.currentTarget),
+            $branch = $target.parents('.js-treeview-element');
+
+        e.preventDefault();
+        e.stopPropagation();
+
+        $branch.toggleClass('opened');
+
+        if ($branch.hasClass('opened') && !$branch.hasClass('loaded')) {
+            this.loadBranch($branch, $target.attr('href'));
+        }
+    },
+
+    loadBranch: function ($branch, url) {
+        'use strict';
+        // TODO
+        console.log('ok');
+        $branch.addClass('loaded');
+    },
+
+    invoke: function () {
+        'use strict';
+        return {
+            init: this.init.bind(this)
+        };
+    }
+}.invoke();
+
+document.addEventListener('DOMContentLoaded', function () {
+    'use strict';
+    window.osuny.pagesTree.init();
+});

app/assets/stylesheets/admin/treeview.sass

+.treeview
+    .branch
+        .close_btn
+            display: none
+        .open_btn
+            display: inline
+        .children
+            display: none
+            margin-left: 15px
+
+        &.opened
+            .close_btn
+                display: inline
+            .open_btn
+                display: none
+            .children
+                display: block

app/controllers/admin/communication/website/pages_controller.rb

@@ -2,10 +2,16 @@ class Admin::Communication::Website::PagesController < Admin::Communication::Web
   load_and_authorize_resource class: Communication::Website::Page
 
   def index
-    @pages = @website.pages.ordered.page params[:page]
+    @pages = @website.pages.root.ordered
     breadcrumb
   end
 
+  def children
+    return unless request.xhr?
+    page = @website.pages.find(params[:id])
+    @children = page.children.ordered
+  end
+
   def show
     breadcrumb
   end

app/models/communication/website/page.rb

@@ -34,7 +34,7 @@
 
 class Communication::Website::Page < ApplicationRecord
   include WithSlug
-  
+
   belongs_to :university
   belongs_to :website,
              foreign_key: :communication_website_id
@@ -54,8 +54,9 @@ class Communication::Website::Page < ApplicationRecord
   before_save :make_path
   after_save :publish_to_github
 
-  scope :ordered, -> { order(:path) }
+  scope :ordered, -> { order(:position) }
   scope :recent, -> { order(updated_at: :desc).limit(5) }
+  scope :root, -> { where(parent_id: nil) }
 
   def content
     @content ||= github.read_file_at "_pages/#{id}.html"
@@ -65,6 +66,10 @@ class Communication::Website::Page < ApplicationRecord
     frontmatter.content
   end
 
+  def has_children?
+    children.any?
+  end
+
   def to_s
     "#{ title }"
   end

app/views/admin/communication/website/pages/children.js.erb

+$('.js-treeview-element-<%= @page.id %>').addClass('opened');

app/views/admin/communication/website/pages/index.html.erb

 <% content_for :title, Communication::Website::Page.model_name.human(count: 2) %>
 
-<%= render 'admin/communication/website/pages/list', pages: @pages %>
-<%= paginate @pages, theme: 'bootstrap-5' %>
+<ul class="list-unstyled treeview js-treeview">
+  <% @pages.each do |page| %>
+    <li class="branch <%= 'with-children' if page.has_children? %> js-treeview-element js-treeview-element-<%= page.id %>">
+      <div class="d-flex align-items-center">
+        <%= link_to children_admin_communication_website_page_path(website_id: page.website.id, id: page.id),
+                    class: 'js-tree-element' do %>
+          <span class="open_btn">+</span>
+          <span class="close_btn">-</span>
+          <%= page %>
+        <% end %>
+        <%= link_to 'Voir', admin_communication_website_page_path(website_id: page.website.id, id: page.id), class: button_classes %>
+      </div>
+      <ul class="list-unstyled children">
+        <li>loading...</li>
+      </ul>
+
+    </li>
+  <% end %>
+</ul>
+<%#= render 'admin/communication/website/pages/list', pages: @pages %>
+<%#= paginate @pages, theme: 'bootstrap-5' %>
 
 <% content_for :action_bar_right do %>
   <%= create_link Communication::Website::Page %>

config/routes/admin/communication.rb

@@ -4,7 +4,11 @@ namespace :communication do
       get :import
       post :import
     end
-    resources :pages, controller: 'website/pages'
+    resources :pages, controller: 'website/pages' do
+      member do
+        get :children
+      end
+    end
     resources :posts, controller: 'website/posts'
   end
 end