mini_tree 0.0.4

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: cfcc12efe875d58a64a005b8bcf01c4287521f929dafe941e55abfe0774bd64e
+  data.tar.gz: 6314c4eecfbe0c7cf0df0b2db8e952515bb3bba14158c94aeb250eb89f5763e4
+SHA512:
+  metadata.gz: 264d652696e5c73cfda4b8b6e7094e9b8596d9ba30bf71be3361712845a41929fab44017fda6d6b9834b7c8eecf73ab3c5ca74469def6cb35119dcd1698a21d5
+  data.tar.gz: f3139e7a2cd685933b07341c2503aa3ba553c0279cfd6e52d41fed823f1d3eb7e8a0351f83bd7a29c6aa40280e2494133e6f74a9fab2c9aa0c77b03c01b71b0f

data/MIT-LICENSE

@@ -0,0 +1,20 @@
+Copyright (c) 2025 Dittmar Krall (www.matiq.com)
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

data/README.md

@@ -0,0 +1,136 @@
+# UNDER CONSTRUCTION
+
+# MiniTree
+
+[![Gem Version](https://img.shields.io/gem/v/mini_tree?color=168AFE&logo=rubygems&logoColor=FE1616)](https://rubygems.org/gems/mini_tree)
+[![Downloads](https://img.shields.io/gem/dt/mini_tree?color=168AFE&logo=rubygems&logoColor=FE1616)](https://rubygems.org/gems/mini_tree)
+[![GitHub Build](https://img.shields.io/github/actions/workflow/status/matique/mini_tree/rake.yml?logo=github)](https://github.com/matique/mini_tree/actions/workflows/rake.yml)
+[![Ruby Style Guide](https://img.shields.io/badge/code_style-standard-168AFE.svg)](https://github.com/standardrb/standard)
+[![MIT License](https://img.shields.io/badge/license-MIT-168AFE.svg)](http://choosealicense.com/licenses/mit/)
+
+_MiniTree_ is a Rails gem to display and handle a treeview.
+It supports moving/reordering items in the treeview,
+collapsing/expanding of a subtree
+and creating/deleting them.
+
+Items in the treeview can be enhanced with links
+to trigger actions.
+
+_MiniTree_ requires just a basic Rails system.
+Specifically, besides Stimulus no other Javascript package
+(i.e jQuery) is expected.
+Configuration is absent.
+
+_MiniTree_ includes a javascript component to handle
+the view on the client side
+as well as code for the server side.
+
+
+## Prerequisites
+
+Some preparation for the usage is required:
+- an additional database table storing the tree structure
+- a _legend_ method in the model
+- a call to _MiniTree_ to initialize the tree structure
+- calls in the model to _miniTree_ during creation, update
+  and deletion of an item
+
+~~~Ruby
+# ./app/models/<model>.rb
+class <model> < ApplicationRecord
+  def legend = "#{name} #{id}"   # an example
+end
+
+# ./app/models/<model>_tree.rb
+class <model>Tree < ApplicationRecord
+  include MiniTree::Utils
+end
+
+# ./db/migrate/<nnn>_create_<model>_trees.rb
+class Create<Model>Trees < ActiveRecord::Migration[8.0]
+  def change
+    create_table :<model>_trees do |t|
+      t.string :legend
+      t.integer :parent_id, index: true
+      t.integer :position, null: false, default: 0
+      t.boolean :collapsed, default: false
+      t.string :kind
+
+      t.timestamps
+    end
+    # add_foreign_key :items, :items, column: :parent_id
+  end
+end
+~~~
+
+You may specify your view of an item in the treeview:
+~~~Ruby
+# ./app/views/mini_trees/_mini_tree_title.html.erb
+# id and legend are defined
+<%= link_to "action", edit_<model>(id:), class: 'button' %>
+<%= legend %>
+~~~
+
+## Refresh
+
+~~~Ruby
+<Model>Tree.refresh
+<Model>Tree.refresh_item(<id>, <legend>)
+<Model>Tree.create_item(<id>, <legend>)
+<Model>Tree.del_item(<id>)
+~~~
+
+## Usage
+
+~~~Ruby
+# Example
+<% list = <Model>Tree.all %>
+<%= render "mini_trees/index", locals: {list:} %>
+~~~
+
+
+## Installation
+
+As usual:
+
+~~~~ruby
+# Gemfile
+...
+gem "mini_tree"
+...
+~~~~
+
+and run "bundle install".
+
+Furthermore, copy manually *app/javascript/controllers/tree_controller.js*
+from the _gem  mini-tree_
+into your own _app/javascript/controllers/_ directory.
+
+
+## System dependencies
+
+This software has been developed and tested with:
+- Ubuntu 24.04
+- Ruby 3.4.7
+- Rails 8.1.0
+
+See also:
+- ./.github/workflows/rake.yml
+
+No particular system dependency is known,
+i.e. _mini_tree_ is expected to run on other systems without trouble.
+
+
+## Curious
+
+There are quite a lot of TreeViews available.
+If you are curious you may search in particular for:
+- jqTree
+- sortableJS
+
+
+## License
+
+Copyright (c) 2025 Dittmar Krall (www.matiq.com),
+released as open source under the terms of the
+[MIT license](https://opensource.org/licenses/MIT).

data/app/controllers/mini_trees_controller.rb

@@ -0,0 +1,40 @@
+class MiniTreesController < ApplicationController
+  def sync
+    init_klasses(params[:owner])
+    id = params[:id]
+    value = params[:value]
+
+    case params[:function]
+    when "order"
+      client_order = JSON.parse(params[:order])
+      client_order.each_with_index do |pair, index|
+        id, parent_id = pair
+        row = @tree.find(id.to_i)
+        row.update!(position: index, parent_id: parent_id.to_i)
+      end
+    when "leaf2node"
+      row = @tree.find_by(id: value.to_i)
+      row.update! kind: "node"
+    when "node2leaf"
+      row = @tree.find_by(id: value.to_i)
+      row.update! kind: "leaf"
+    when "toggle"
+      id = id.to_i
+      row = @tree.find_by(id:)
+      row.update! collapsed: value
+    else
+      raise "MiniTreeView: unknown function <#{params}>"
+    end
+    # head :ok
+    render json: {status: "ok"}
+  rescue RuntimeError => e
+    # head :bad_request
+    render json: {status: "error", message: e.message}, status: :unprocessable_entity
+  end
+
+  private
+
+  def init_klasses(name)
+    @tree = Kernel.const_get("#{name}Tree")
+  end
+end

data/app/javascript/controllers/tree_controller.js

@@ -0,0 +1,252 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["item", "top"]
+  static values = {owner: String}
+
+  connect() {
+    this.expanded = "\u25BE" // down triangle
+    this.collapsed = "\u25b8" // right triangle
+    this.itemTargets.forEach(item => this.attach(item))
+  }
+
+  attach(item) {
+    item.addEventListener("dragstart", e => this.dragStart(e, item))
+    item.addEventListener("dragend",   e => this.dragEnd(e, item))
+    item.addEventListener("dragover",  e => this.dragOver(e, item))
+    item.addEventListener("drop",      e => this.drop(e, item))
+  }
+
+  dragStart(e, el) {
+    e.stopPropagation()
+
+    // ev.dataTransfer.setData("text/plain", "")
+    this.dragged = el
+    e.dataTransfer.effectAllowed = "move"
+    el.classList.add("dragging")
+  }
+
+  dragEnd(e) {
+    e.stopPropagation()
+    this.dragged.classList.remove("dragging")
+    this.dragged = null
+  }
+
+  dragOver(e, el) {
+    e.preventDefault()
+  }
+
+  drop(e) {
+    e.stopPropagation()
+
+    const dragged = this.dragged
+    const target = e.currentTarget
+    // this.testUtilities(target)
+
+    if (dragged == target) {
+      this.doGrouping(target)
+    } else {
+      this.drop2(e, dragged, target)
+      this.sendOrder(target)
+    }
+  }
+
+  drop2(e, dragged, target) {
+    const children = target.lastElementChild
+    if (this.isNode(target)) {
+      if (this.isNodeEmpty(target)) {
+        children.appendChild(dragged)
+        return
+      }
+    }
+
+    const rect = target.getBoundingClientRect()
+    const offset = e.clientY - rect.top
+    const threshold = (rect.height / 3) * 2
+
+    const target2 = (offset > threshold) ? target.nextSibling : target
+    target.parentNode.insertBefore(dragged, target2)
+  }
+
+  doGrouping(elem) {
+    if (this.isNode(elem)) {
+      if (!this.isNodeEmpty(elem)) {
+        throw "MiniTreeView: Node has children; can't be converted to leaf"
+      }
+
+      this.toLeaf(elem)
+    } else {
+      this.toNode(elem)
+    }
+  }
+
+  toLeaf(elem) {
+    var row = elem.firstElementChild
+    const newRow = this.create("span", {className: "toggle-space"})
+
+    this.removeUl(elem)
+    row.removeChild(row.firstElementChild)
+    row.insertBefore(newRow, row.children[0])
+
+    this.sync({owner: this.ownerValue, function: "node2leaf",
+      value: elem.dataset.itemId})
+  }
+
+  toNode(elem) {
+    var row = elem.firstElementChild
+    const newRow = this.create("button", {className: "toggle-btn",
+      type: "button", textContent: this.expanded})
+
+    this.removeUl(elem)
+    const ulRow2 = this.create("ul", {className: "nested"})
+    elem.insertBefore(ulRow2, elem.children[1])
+    row.removeChild(row.firstElementChild)
+    row.insertBefore(newRow, row.children[0])
+
+    this.sync({owner: this.ownerValue, function: "leaf2node",
+      value: elem.dataset.itemId})
+  }
+
+  removeUl(elem) {
+    const ulRow = elem.children[1]
+    if (ulRow) elem.removeChild(ulRow)
+  }
+
+  toggle(e) {
+    const li = e.currentTarget.closest(".tree-item")
+    const id = li.dataset.itemId
+    const list = li.querySelector(".nested")
+    if (!list) return
+
+    const btn  = li.querySelector(".toggle-btn")
+    const hide = list.classList.toggle("hidden")
+    if (btn) btn.textContent = hide ? this.collapsed : this.expanded
+    this.sync({owner: this.ownerValue, function: "toggle",
+      id: id, value: hide})
+  }
+
+  ///////////////////////// Utilities ////////////////////////////////
+
+  testUtilities(el) {
+    console.log("***** testUtilities *****", el)
+    console.log("isLeaf", this.isLeaf(el))
+    console.log("isNode", this.isNode(el))
+    console.log("isNodeEmpty", this.isNodeEmpty(el))
+    console.log("parent", this.parent(el))
+    console.log("parent_id", this.parent_id(el))
+  }
+
+  create(tag, attrs) {
+    var elem = document.createElement(tag)
+    Object.assign(elem, attrs)
+    return elem
+  }
+
+  isLeaf(elem) {
+    const el = elem.firstElementChild.firstElementChild
+    return el.tagName == "SPAN"
+  }
+
+  isNode(elem) {
+    return !this.isLeaf(elem)
+  }
+
+  isNodeEmpty(elem) {
+    const el = elem.lastElementChild
+    if (el.childElementCount == 0) return true
+    return false
+  }
+
+  parent(elem) {
+    return elem.parentElement.closest("li")
+  }
+
+  parent_id(elem) {
+    elem = this.parent(elem)
+    if (!elem) return null
+    return elem.dataset.itemId
+  }
+
+  ///////////////////////// AJAX ////////////////////////////////
+
+  flatted = (elem) => {
+    const result = []
+    var id = elem.dataset.itemId
+    var parent_id = this.parent_id(elem.parentElement)
+
+    if (id && id != 0) { result.push([id, parent_id]) }
+    for (var elem2 of elem.children) {
+      result.push(...this.flatted(elem2))
+    }
+    return result
+  }
+
+  sendOrder(el) {
+    const flat = this.flatted(this.topTarget.parentElement)
+    this.sync({owner: this.ownerValue, function: "order",
+      order: JSON.stringify(flat)})
+  }
+
+  async sync(params) {
+    const url = "/mini_trees/sync"
+    const token = document.querySelector("meta[name=csrf-token]").content
+    try {
+      const response = await fetch(url, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          "X-CSRF-Token": token
+        },
+        body: JSON.stringify(params)
+      })
+
+      if (!response.ok) {
+        throw new Error(`Response status: ${response.status}`);
+      }
+
+      // const result = await response.json();
+      // console.log(result);
+    } catch (error) {
+      console.error(error.message);
+    }
+  }
+}
+
+
+
+//  over(e, el) {
+//console.log("over")
+//    e.preventDefault()
+//    if (this.dragged === el) return
+//    const rect = el.getBoundingClientRect()
+//    const offset = e.clientY - rect.top
+//    const third = rect.height / 3
+//
+//    if (offset < third) {
+//      el.parentNode.insertBefore(this.placeholder, el)
+//    } else if (offset > 2 * third) {
+//      el.parentNode.insertBefore(this.placeholder, el.nextSibling)
+//    } else {
+//      let ul = el.querySelector(".nested")
+//      if (!ul) {
+//        ul = document.createElement("ul")
+//        ul.className = "nested"
+//        el.appendChild(ul)
+//      }
+//      ul.classList.remove("hidden")
+//      ul.appendChild(this.placeholder)
+//    }
+//  }
+//
+//  removePlaceholder() {
+//    this.placeholder?.remove()
+//  }
+//
+//
+// // rails javascript no jquery no sortablejs use stimulus sortable treeview
+// // expand collapse support
+// // nested reordering
+//
+//
+// // https://wiki.selfhtml.org/wiki/JavaScript/Drag_%26_Drop
+// // https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API

data/app/views/application/_mini_tree_title.html.erb

@@ -0,0 +1 @@
+<%= legend %>

data/app/views/mini_trees/_index.html.erb

@@ -0,0 +1,34 @@
+<style>
+.mini-tree {
+  xbackground: yellow;
+  .mini-tree-view, .nested {
+    list-style: none;
+    padding-left: 1rem;
+  }
+  .tree-row {
+    display: flex;
+    gap: 0.5rem;
+  }
+  .toggle-btn {
+    background: transparent;
+    border: none;
+  }
+  .dragging { opacity: 0.5; }
+  .hidden { display: none; }
+  .toggle-btn, .toggle-space { width: 1rem; }
+  .tree-row:hover { background: rgba(0,0,0,0.05); }
+}
+</style>
+
+<%
+  list = locals[:list]
+  owner = list.first.class.name[0..-5]
+%>
+<div class="mini-tree" data-item-id="0"
+    data-controller="tree" data-tree-owner-value="<%= owner %>">
+  <ul class="mini-tree-view" data-tree-target="top">
+    <%= render partial: "mini_trees/item",
+      collection: list.where(parent_id: 0).order(:position)
+    %>
+  </ul>
+</div>

data/app/views/mini_trees/_item.html.erb

@@ -0,0 +1,27 @@
+<%
+  icon = (item.collapsed ? "\u25b8" : "\u25be").html_safe
+  klass = item.collapsed ? "nested hidden" : "nested"
+%>
+
+<li class="tree-item" data-tree-target="item"
+    data-item-id="<%= item.id %>" draggable="true">
+  <div class="tree-row" data-action="click-&gt;tree#toggle">
+    <% if item.kind == "node" %>
+      <button class="toggle-btn" type="button"><%= icon %></button>
+    <% else %>
+      <span class="toggle-space"></span>
+    <% end %>
+    <span class="title">
+      <%= render partial: "mini_tree_title",
+          locals: {id: item.id, legend: item.legend}
+      %>
+    </span>
+  </div>
+
+  <% if item.kind == "node" %>
+    <ul class="<%= klass %>">
+      <%= render partial: "mini_trees/item", collection: item.children %>
+    </ul>
+  <% end %>
+
+</li>

data/config/routes.rb

@@ -0,0 +1,3 @@
+Rails.application.routes.draw do
+  post "mini_trees/sync", as: :sync
+end

data/lib/mini_tree/engine.rb

@@ -0,0 +1,4 @@
+module MiniTree
+  class Engine < ::Rails::Engine
+  end
+end

data/lib/mini_tree/utils.rb

@@ -0,0 +1,69 @@
+module MiniTree::Utils
+  def self.included(base)
+    base.extend(ClassMethods)
+  end
+
+  def children
+    self.class.where(parent_id: id).order(:position)
+  end
+
+  def to_s
+    "position <#{position}> parent_id <#{parent_id}> #{kind} \"#{legend}\""
+  end
+
+  module ClassMethods
+    def refresh
+      missing_cnt = delete_cnt = refresh_cnt = 0
+      owner_class = Kernel.const_get(name[0..-5])
+      owner_ids = owner_class.all.pluck(:id)
+      ids = all.pluck(:id)
+
+      (owner_ids - ids).each { |id|
+        legend = owner_class.find_by(id:).legend
+        create_item(id, legend)
+        missing_cnt += 1
+      }
+      (ids - owner_ids).each { |id|
+        del_item(id)
+        delete_cnt += 1
+      }
+      (owner_ids & ids).each { |id|
+        refresh_item(id, owner_class.find_by(id:).legend)
+        refresh_cnt += 1
+      }
+      [missing_cnt, delete_cnt, refresh_cnt]
+    end
+
+    def refresh_item(id, legend)
+      find_by(id:).update!(legend:)
+    end
+
+    def create_item(id, legend)
+      create! id:, legend:, parent_id: 0, position: id, kind: "leaf"
+    end
+
+    def del_item(id)
+      where(id:).delete_all
+    end
+
+    # used by tests
+    def flat
+      res = []
+      sorted.each { |item|
+        res << [item.id, item.parent_id]
+      }
+      res
+    end
+
+    def print
+      puts "*** #{name}.all ***"
+      sorted.each_with_index { |item, index|
+        puts "#{index}: #{item}"
+      }
+    end
+
+    def sorted
+      all.order(:position)
+    end
+  end
+end

data/lib/mini_tree/version.rb

@@ -0,0 +1,6 @@
+module MiniTree
+  VERSION = "0.0.4" # 2025-10-29
+  # VERSION = "0.0.3" # 2025-10-28
+  # VERSION = "0.0.2" # 2025-10-27
+  # VERSION = "0.0.1" # 2025-10-26
+end

data/lib/mini_tree/version.rb.bak

@@ -0,0 +1,5 @@
+module MiniTree
+  VERSION = "0.0.3" # 2025-10-28
+  # VERSION = "0.0.2" # 2025-10-27
+  # VERSION = "0.0.1" # 2025-10-26
+end

data/lib/mini_tree.rb

@@ -0,0 +1,2 @@
+require "mini_tree/engine"
+require "mini_tree/utils"

metadata

@@ -0,0 +1,130 @@
+--- !ruby/object:Gem::Specification
+name: mini_tree
+version: !ruby/object:Gem::Version
+  version: 0.0.4
+platform: ruby
+authors:
+- Dittmar Krall
+bindir: bin
+cert_chain: []
+date: 1980-01-02 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: rails
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 8.0.0
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 8.0.0
+- !ruby/object:Gem::Dependency
+  name: stimulus-rails
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+- !ruby/object:Gem::Dependency
+  name: combustion
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+- !ruby/object:Gem::Dependency
+  name: minitest
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+- !ruby/object:Gem::Dependency
+  name: minitest-spec-rails
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+description: |2
+      A simple TreeView Rails 8+ gem based on Stimulus
+      (no jQuery is required).
+      A server side handling of the tree is included.
+      The client side display of the usual legend can be
+      adapted to the user's requirements to include links.
+email:
+- dittmar.krall@gmail.com
+executables: []
+extensions: []
+extra_rdoc_files:
+- MIT-LICENSE
+- README.md
+files:
+- MIT-LICENSE
+- README.md
+- app/controllers/mini_trees_controller.rb
+- app/javascript/controllers/tree_controller.js
+- app/views/application/_mini_tree_title.html.erb
+- app/views/mini_trees/_index.html.erb
+- app/views/mini_trees/_item.html.erb
+- config/routes.rb
+- lib/mini_tree.rb
+- lib/mini_tree/engine.rb
+- lib/mini_tree/utils.rb
+- lib/mini_tree/version.rb
+- lib/mini_tree/version.rb.bak
+homepage: https://github.com/matique/mini_tree
+licenses:
+- MIT
+metadata: {}
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - "~>"
+    - !ruby/object:Gem::Version
+      version: '3'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubygems_version: 3.6.9
+specification_version: 4
+summary: MiniTree a simple TreeView Rails 8+ gem.
+test_files: []