headmin 0.1.1 → 0.2.2

data/docs/README.md

@@ -1,4 +1,5 @@
 # Features
 
-- [Blocks and fields link](blocks.md)
+- [Working with Blocks](blocks.md)
+- [Working with Fields](fields.md)
 - [Authentication with Devise](devise.md)

data/docs/blocks.md

@@ -1,116 +1,101 @@
-# Blocks & Fields
+# Blocks 
 
-## Database
-blocks
+## Installation
+Run the following generators to generate the migration files.
 ```
-id = 1	resource_type="Page" resource_id="1" name = 'people', position = 1
+rails generate headmin:blocks
+rails db:migrate
 ```
 
-fields
-```
-id = 1  block_id="1" name = 'people_title' 			type = 'string'                                 value = 'test'
-id = 2  block_id="1" name = 'people_people' 			type = 'list'				
-id = 3  block_id="1" name = 'people_people_1_person' 		type = 'group'		parent_id = 2
-id = 4  block_id="1" name = 'people_people_1_person_name' 	type = 'string'		parent_id = 3		value = 'Jef'
-id = 5  block_id="1" name = 'people_people_2_person' 		type = 'group'		parent_id = 2
-id = 6  block_id="1" name = 'people_people_2_person_name' 	type = 'string'		parent_id = 6		value = 'Gert-Jan'
-```
-
-## Models
-
+## Getting Started
 
-```rb
-# models/page.rb
+### Setup model
 
-class Page < ActiveRecord::Model
-  has_many :blocks, as: :blockable
-end
-```
-
-```rb
-# models/block.rb
-
-class Block < ActiveRecord::Model
-  belongs_to :blockable, polymorphic: true
-  has_many :fields
-    
-  # db to hash
-  def fields_hash
-    {
-      title: 'test',
-      people: [
-        {name: 'Jef'},
-        {name: 'Gert-Jan'}
-      ]
-    }
-  end
+```ruby
+class Page < ApplicationRecord
+  include Headmin::Blockable
 end
 ```
 
-```rb
-# models/block/fields.rb
+### Setup forms
 
-class Block::Field < ActiveRecord::Model
-  self.table_name = 'block_fields'
+The view "headmin/forms/blocks" will render all the form views for the blocks in the database.
+A hidden template form will be rendered for all types defined in `allow:`
 
-  belongs_to :block
-end
+```erb
+# app/views/admin/pages/_form.html.erb
+<%= render 'headmin/form', model: [:admin, @page] do |form| %>
+  <%= render "headmin/forms/blocks", form: form %>
+<% end %>
 ```
 
-## Controllers
-```ruby
-# website/pages_controller.rb
+For each type of block you want to include, create a template in `views/admin/blocks`.
+Make sure to include a hidden field to store the name of the block.
 
-class PagesController < ApplicationController
-  def show
-    @page = Page.friendly.find(params[:slug])
-  end
-end
+```erb
+# app/views/admin/blocks/_contact.html.erb
+<%= form.hidden_field :name, value: :contact %>
+...
 ```
 
-## Views
+### Render blocks in frontend
+
 ```erb
-# admin/pages/_form.html.erb
+# app/views/website/pages/show.html.erb
+<%= render 'headmin/blocks', blockable: @page %>
+```
 
-<input type="text" name="title" value="test">
+This will render all the blocks associated with the blockable model (e.g. Page).
 
-<%= render 'blocks/people', required: true, moveable: false %>
-<%= render 'blocks/menu', required: true, moveable: false %>
-<%= render 'blocks/contact_form', required: true, moveable: false %>
-<%= render 'blocks/map', required: true, moveable: false %>
+For each block in the admin, you'll need to create a corresponding template in your frontend.
 
-<%= render 'blocks/heading', required: false, moveable: true %>
-<%= render 'blocks/text', required: false, moveable: true %>
-<%= render 'blocks/image', required: false, moveable: true %>
-<%= render 'blocks/video', required: false, moveable: true %>
+```erb
+# app/views/website/blocks/_contact.html.erb
+<%= block.name %>
 ```
 
-```erb
-# admin/blocks/_people.html.erb
-
-<input type="text" name="people_title" value="title" value="test">
-<div class="repeater" data-min="2" data-max="3">
-  <div class="group">
-    <input type="text" name="people_people_1_person_name" value="name" value="Jef">
-    <input type="text" name="people_people_2_person_name" value="name" value="Gert-Jan">
-  </div>
-</div>
+## Blocks + fields = Magic
+
+### Add fields to blocks
+
+Setup a block model by including `Headmin::Fieldable`
+
+```ruby
+class Block < ApplicationRecord
+  include Headmin::Block
+  include Headmin::Fieldable
+end
 ```
 
+### Use fields in admin blocks
+
 ```erb
-# website/pages/show.html.erb
+# app/views/admin/blocks/_contact.html.erb
+<%= form.hidden_field :name, value: :contact %>
 
-<% @page.blocks.each do |block| %>
-  <%= render "block_#{block.name}", block: block %>
+<!-- Title -->
+<%= render 'headmin/forms/fields/text', form: form, name: :title do |field, attribute, label| %>
+  <%= render 'headmin/forms/text', form: field, attribute: attribute, label: label %>
+<% end %>
+
+<!-- People list -->
+<%= render 'headmin/forms/fields/list', form: form, name: :people do |item| %>
+  <%= render 'headmin/forms/fields/text', form: item, name: :name do |field, attribute, label| %>
+    <%= render 'headmin/forms/text', form: field, attribute: attribute, label: label %>
+  <% end %>
 <% end %>
 ```
 
-```erb
-# website/blocks/_people.html.erb
+### Render blocks in your frontend
 
+```erb
+# app/views/website/blocks/_contact.html.erb
 <% fields = block.fields_hash %>
-<%= fields[:title] %>
-<% fields[:people].each do |person| %>
-  <%= person[:name] %>
-<% end %>
-```
+
+<h1><%= fields["title"] %></h1>
+<ul>
+  <% fields["people"].each do |person| %>
+    <li><%= person["name"] %></h2></li>
+  <% end %>
+</ul>
+```

data/docs/devise.md

@@ -1,62 +1,3 @@
 # Authentication
 
-We use the gem Devise for authentication. In this example, two different user types will be set up:
-Admin and normal User. Only admins have access to the headmin back office. It is optional if normal users
-are allowed to login/register from the website.
-
-##Installation
-
-#### Setup devise
-Add the gem devise and bundle install. Create a user model:
-
-```
-rails generate devise User
-```
-
-Add the field "type" to the user model
-```
-rails g migration AddTypeToUsers type:string
-rails db:migrate
-```
-
-In models/ add the file admin.rb
-```
-class Admin < User
-end
-```
-
-#### Setup routes
-In routes.rb
-```
-namespace(:admin) do
-    devise_for :admins, path: 'users', singular: 'admin', controllers: {
-        sessions: 'admin/users/sessions',
-        registrations: 'admin/users/registrations',
-        passwords: 'admin/users/passwords',
-        unlocks: 'admin/users/unlocks',
-        confirmations: 'admin/users/confirmations',
-    }
-end
-```
-
-In case, no normal users are necessary, you can discard the next step:
-``` 
-scope module: 'website' do
-    devise_for :users, controllers: {
-        sessions: 'website/users/sessions',
-        registrations: 'website/users/registrations',
-        passwords: 'website/users/passwords',
-        unlocks: 'website/users/unlocks',
-        confirmations: 'website/users/confirmations',
-    }
-end
-```
-
-#### Setup protected routes and configuration for headmin
-In controllers/admin_controller.rb
-```
-class AdminController < ApplicationController
-  alias_method :devise_current_user, :current_user
-  include Headmin::Authentication
-end
-```
+TODO: rewrite

data/docs/fields.md

@@ -0,0 +1,57 @@
+# Fields 
+
+## Installation
+Run the following generators to generate the migration files.
+```
+rails generate headmin:fields
+rails db:migrate
+```
+
+## Getting Started
+
+### Setup model
+
+```ruby
+class Settings < ApplicationRecord
+  include Headmin::Fieldable
+end
+```
+
+### Setup forms
+
+```erb
+# app/views/admin/settings/_form.html.erb
+
+<!-- Company name -->
+<%= render 'headmin/forms/fields/text', form: form, name: :company_name do |field, attribute, label| %>
+  <%= render 'headmin/forms/text', form: field, attribute: attribute, label: label %>
+<% end %>
+
+<!-- People list -->
+<%= render 'headmin/forms/fields/list', form: form, name: :people do |item| %>
+  <%= render 'headmin/forms/fields/text', form: item, name: :name do |field, attribute, label| %>
+    <%= render 'headmin/forms/text', form: field, attribute: attribute, label: label %>
+  <% end %>
+<% end %>
+```
+
+#### Type of fields
+- Text: `headmin/forms/fields/text`
+- File: `headmin/forms/fields/file`
+- Image: `headmin/forms/fields/image`
+- List: `headmin/forms/fields/list`
+- Group: `headmin/forms/fields/group`
+
+### Render fields in frontend 
+
+```erb
+# app/views/website/settings/show.html.erb
+<% fields = @setting.fields_hash %>
+
+<h1><%= fields["company_name"] %></h1>
+<ul>
+  <% fields["people"].each do |person| %>
+    <li><%= person["name"] %></h2></li>
+  <% end %>
+</ul>
+```

data/headmin.gemspec

@@ -29,6 +29,7 @@ Gem::Specification.new do |spec|
 
   # Uncomment to register a new dependency of your gem
   # spec.add_dependency "example-gem", "~> 1.0"
+  spec.add_runtime_dependency 'closure_tree', '~> 7.3'
 
   # For more information and examples about making a new gem, checkout our
   # guide at: https://bundler.io/guides/creating_gem.html

data/lib/generators/headmin/blocks_generator.rb

@@ -0,0 +1,19 @@
+module Headmin
+  class BlocksGenerator < Rails::Generators::Base
+    include Rails::Generators::Migration
+
+    source_root File.expand_path('../../templates', __FILE__)
+
+    def blocks
+      template 'models/block.rb', 'app/models/block.rb'
+      migration_template 'migrations/create_blocks.rb', 'db/migrate/create_blocks.rb'
+    end
+
+    private
+
+    def self.next_migration_number(dirname)
+      next_migration_number = current_migration_number(dirname) + 1
+      ActiveRecord::Migration.next_migration_number(next_migration_number)
+    end
+  end
+end

data/lib/generators/headmin/fields_generator.rb

@@ -0,0 +1,19 @@
+module Headmin
+  class FieldsGenerator < Rails::Generators::Base
+    include Rails::Generators::Migration
+
+    source_root File.expand_path('../../templates', __FILE__)
+
+    def blocks
+      template 'models/field.rb', 'app/models/field.rb'
+      migration_template 'migrations/create_fields.rb', 'db/migrate/create_fields.rb'
+    end
+
+    private
+
+    def self.next_migration_number(dirname)
+      next_migration_number = current_migration_number(dirname) + 1
+      ActiveRecord::Migration.next_migration_number(next_migration_number)
+    end
+  end
+end

data/lib/generators/templates/migrations/create_blocks.rb

@@ -0,0 +1,10 @@
+class CreateBlocks < ActiveRecord::Migration[6.1]
+  def change
+    create_table :blocks do |t|
+      t.references :blockable, polymorphic: true
+      t.string :name
+      t.integer :position
+      t.timestamps
+    end
+  end
+end

data/lib/generators/templates/migrations/create_fields.rb

@@ -0,0 +1,13 @@
+class CreateFields < ActiveRecord::Migration[6.1]
+  def change
+    create_table :fields do |t|
+      t.references :fieldable, polymorphic: true
+      t.string :name
+      t.string :field_type
+      t.integer :parent_id
+      t.integer :position
+      t.text :value
+      t.timestamps
+    end
+  end
+end

data/lib/generators/templates/models/block.rb

@@ -0,0 +1,3 @@
+class Block < ApplicationRecord
+  include Headmin::Block
+end

data/lib/generators/templates/models/field.rb

@@ -0,0 +1,3 @@
+class Field < ApplicationRecord
+  include Headmin::Field
+end

data/lib/headmin/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module Headmin
-  VERSION = "0.1.1"
+  VERSION = "0.2.2"
 end

data/package.json

@@ -1,7 +1,7 @@
 {
   "name": "headmin",
-  "version": "0.1.1",
-  "description": "A complete library of commonly used components to build an admin interface in your Ruby on Rails project.",
+  "version": "0.2.0",
+  "description": "Admin component library",
   "main": "src/js/headmin.js",
   "sass": "src/scss/headmin.scss",
   "style": "src/css/headmin.css",
@@ -20,14 +20,14 @@
   },
   "homepage": "https://github.com/insiting/headmin#readme",
   "dependencies": {
+    "@popperjs/core": "^2.9.3",
     "@rails/ujs": "^6.0.0",
-    "bootstrap": "^5.0.0-beta2",
-    "choices.js": "^9.0.1",
+    "bootstrap": "^5.1.1",
     "ckeditor5-build-classic-simple-upload-adapter-image-resize": "^1.0.4",
     "flatpickr": "^4.6.9",
-    "popper": "^1.0.1",
     "sortablejs": "^1.13.0",
-    "stimulus": "^2.0.0"
+    "stimulus": "^2.0.0",
+    "tom-select": "^2.0.0-rc.4"
   },
   "devDependencies": {
     "@babel/core": "^7.12.10",

data/src/js/headmin/controllers/blocks_controller.js

@@ -0,0 +1,103 @@
+import {Controller} from "stimulus"
+import Sortable from "sortablejs";
+import { createPopper } from '@popperjs/core';
+
+export default class extends Controller {
+    static get targets() {
+        return ["templateBlock", "block", "blocks", "templateEmpty", "button", "buttons"]
+    }
+
+    connect() {
+        new Sortable(this.blocksTarget, {
+            onEnd: () => {
+                this.reorderPositions()
+            }
+        })
+
+        this.toggleEmpty()
+    }
+
+    toggleEmpty() {
+        if(this.blockCount() > 0) {
+            const empty = this.blocksTarget.querySelector('#blocks-empty')
+            if(empty) {
+                empty.remove()
+            }
+        } else {
+            const empty = this.templateEmptyTarget.innerHTML
+            this.blocksTarget.insertAdjacentHTML('beforeend', empty)
+        }
+    }
+
+    add(event) {
+        event.preventDefault()
+        const blockType = event.target.dataset.type
+        let html = this.templateBlockTargets.filter(blockTarget => blockTarget.id === blockType)[0].innerHTML
+
+        html = this.setPosition(html)
+
+        const element = this.blocksTarget.querySelector(`li[data-position='${event.target.dataset.position}']`)
+
+        if (element) {
+            element.insertAdjacentHTML('afterend', html)
+        }
+        else {
+            this.blocksTarget.insertAdjacentHTML('afterbegin', html)
+        }
+
+        // Dispatch an event
+        this.blocksTarget.dispatchEvent(new CustomEvent('headmin:reinit', {bubbles: true}))
+
+        this.reorderPositions()
+        this.toggleEmpty()
+    }
+
+    remove(event) {
+        event.preventDefault()
+
+        const block = event.target.closest(".list-group-item")
+        const destroyInput = block.querySelector("input[name*='_destroy']")
+
+        if (destroyInput) {
+            destroyInput.value = 1
+            block.style.display = 'none'
+        } else {
+            block.remove()
+        }
+
+        this.reorderPositions()
+        this.toggleEmpty()
+    }
+
+    setPosition(html) {
+        const position = this.retrieveLastPosition() + 1
+
+        const regex = new RegExp('99999', "g");
+        return html.replace(regex, position)
+    }
+
+    retrieveLastPosition() {
+        const blocks = Array.from(this.blockTargets)
+        if (blocks.length < 1) {
+            return 0
+        }
+
+        const lastBlock = blocks.slice(-1)[0]
+        return parseInt(lastBlock.querySelector("[name*='position']").value)
+    }
+
+    reorderPositions() {
+        for (let [index, block] of this.blockTargets.entries()) {
+            this.changePositionInfo(block, index)
+        }
+    }
+
+    changePositionInfo(block, index) {
+        block.setAttribute("data-position", index)
+        block.querySelector("input[name*='position']").value = index
+    }
+
+    blockCount() {
+        return this.blockTargets.length;
+    }
+}

data/src/js/headmin/controllers/filters_controller.js

@@ -1,9 +1,8 @@
 import {Controller} from "stimulus"
-import {Headmin} from "../headmin";
 
 export default class extends Controller {
     static get targets() {
-        return ["form", "list", "input", "template", "button"]
+        return ["form", "list", "input", "template", "button", "menuItem"]
     }
 
     add(event) {
@@ -13,13 +12,19 @@ export default class extends Controller {
         if (button) {
             this.openFilter(button)
         } else {
-            const template = this.getTemplateByName(name)
-            this.listTarget.insertAdjacentHTML('beforeend', template.innerHTML)
-            const button = this.getButtonByName(name)
-            Headmin.initPlugins()
+            this.createFilter(name)
         }
     }
 
+    createFilter(name) {
+        let html = this.getTemplateHTML(name)
+        html = this.replaceIdsWithTimestamps(html)
+        this.listTarget.insertAdjacentHTML('beforeend', html)
+
+        // Dispatch an event
+        this.menuItemTarget.dispatchEvent(new CustomEvent('headmin:reinit', {bubbles: true}))
+    }
+
     remove(event) {
         const filter = event.currentTarget.closest('.h-filter')
         filter.remove()
@@ -35,12 +40,6 @@ export default class extends Controller {
         this.formTarget.submit()
     }
 
-    getTemplateByName(name) {
-        return this.templateTargets.find(function (element) {
-            return element.dataset.filterName === name
-        })
-    }
-
     getButtonByName(name) {
         return this.buttonTargets.find(function (element) {
             return element.dataset.filterName === name
@@ -50,4 +49,16 @@ export default class extends Controller {
     openFilter(button) {
         button.controller.open()
     }
+
+    getTemplateHTML(name) {
+        const template = this.templateTargets.filter((element) => {
+            return element.dataset.filterName === name
+        })[0]
+        return template.innerHTML
+    }
+
+    replaceIdsWithTimestamps(html) {
+        const regex = new RegExp('template_id', "g");
+        return html.replace(regex, new Date().getTime())
+    }
 }

data/src/js/headmin/controllers/popup_controller.js

@@ -0,0 +1,68 @@
+import {Controller} from "stimulus"
+import Sortable from "sortablejs";
+import {createPopper} from '@popperjs/core';
+
+export default class extends Controller {
+    static get targets() {
+        return ["popup", "button"]
+    }
+
+    static get values() {
+        return {id: String}
+    }
+
+    connect() {
+        // Clicked outside popup
+        document.addEventListener('click', (event) => {
+            this.handleOutsideClick(event)
+        })
+    }
+
+    handleOutsideClick(event) {
+        const inPopup = event.target.closest('[data-popup-target="popup"]') !== null
+        const inButton = event.target.closest('[data-popup-target="button"]') !== null
+        const openPopup = document.querySelector('[data-popup-target="popup"]:not(.closed)')
+
+        if(!inButton && !inPopup && openPopup) {
+            this.closePopup(openPopup)
+        }
+    }
+
+    open(event) {
+        const button = event.target.closest('[data-popup-target="button"]')
+        const popup = this.popupById(button.dataset['popupId'])
+        const passThru = button.dataset['popupPassThru']
+
+        if (passThru) {
+            // Pass click event to an element inside the popup
+            const passThruElement = popup.querySelector(passThru)
+            passThruElement.click()
+
+        } else {
+            // Open the popup
+            createPopper(button, popup)
+            this.openPopup(popup)
+        }
+    }
+
+    close(event) {
+        const button = event.target.closest('[data-popup-target="button"]')
+        const popup = this.popupById(button.dataset['popupId'])
+
+        this.closePopup(popup)
+    }
+
+    popupById(id) {
+        return this.popupTargets.find((popup) => {
+            return popup.dataset['popupId'] === id
+        })
+    }
+
+    openPopup(popup) {
+        popup.classList.remove('closed')
+    }
+
+    closePopup(popup) {
+        popup.classList.add('closed')
+    }
+}