headmin 0.1.1

data/docs/README.md

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

data/docs/blocks.md

@@ -0,0 +1,116 @@
+# Blocks & Fields
+
+## Database
+blocks
+```
+id = 1	resource_type="Page" resource_id="1" name = 'people', position = 1
+```
+
+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
+
+
+```rb
+# models/page.rb
+
+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
+end
+```
+
+```rb
+# models/block/fields.rb
+
+class Block::Field < ActiveRecord::Model
+  self.table_name = 'block_fields'
+
+  belongs_to :block
+end
+```
+
+## Controllers
+```ruby
+# website/pages_controller.rb
+
+class PagesController < ApplicationController
+  def show
+    @page = Page.friendly.find(params[:slug])
+  end
+end
+```
+
+## Views
+```erb
+# admin/pages/_form.html.erb
+
+<input type="text" name="title" value="test">
+
+<%= 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 %>
+
+<%= 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
+# 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>
+```
+
+```erb
+# website/pages/show.html.erb
+
+<% @page.blocks.each do |block| %>
+  <%= render "block_#{block.name}", block: block %>
+<% end %>
+```
+
+```erb
+# website/blocks/_people.html.erb
+
+<% fields = block.fields_hash %>
+<%= fields[:title] %>
+<% fields[:people].each do |person| %>
+  <%= person[:name] %>
+<% end %>
+```

data/docs/devise.md

@@ -0,0 +1,62 @@
+# 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
+```

data/headmin.gemspec

@@ -0,0 +1,35 @@
+# frozen_string_literal: true
+
+require_relative "lib/headmin/version"
+
+Gem::Specification.new do |spec|
+  spec.name = "headmin"
+  spec.version = Headmin::VERSION
+  spec.authors = ["Jef Vlamings"]
+  spec.email = ["vlamingsjef@gmail.com"]
+
+  spec.summary = "Admin component library"
+  spec.description = "A complete library of commonly used components to build an admin interface in your Ruby on Rails project."
+  spec.homepage = "https://github.com/insiting/headmin"
+  spec.license = "MIT"
+  spec.required_ruby_version = Gem::Requirement.new(">= 3.0.0")
+
+  spec.metadata["homepage_uri"] = spec.homepage
+  spec.metadata["source_code_uri"] = "https://github.com/insiting/headmin"
+  spec.metadata["changelog_uri"] = "https://github.com/insiting/headmin/releases"
+
+  # Specify which files should be added to the gem when it is released.
+  # The `git ls-files -z` loads the files in the RubyGem that have been added into git.
+  spec.files = Dir.chdir(File.expand_path(__dir__)) do
+    `git ls-files -z`.split("\x0").reject { |f| f.match(%r{\A(?:test|spec|features)/}) }
+  end
+  spec.bindir = "exe"
+  spec.executables = spec.files.grep(%r{\Aexe/}) { |f| File.basename(f) }
+  spec.require_paths = ["lib"]
+
+  # Uncomment to register a new dependency of your gem
+  # spec.add_dependency "example-gem", "~> 1.0"
+
+  # For more information and examples about making a new gem, checkout our
+  # guide at: https://bundler.io/guides/creating_gem.html
+end

data/lib/headmin/engine.rb

@@ -0,0 +1,10 @@
+module Headmin
+  class Engine < Rails::Engine
+    engine_name 'headmin'
+
+    # Add translations to main app
+    config.before_configuration do
+      config.i18n.load_path += Dir["#{config.root}/config/locales/**/*.yml"]
+    end
+  end
+end

data/lib/headmin/version.rb

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

data/lib/headmin.rb

@@ -0,0 +1,4 @@
+# frozen_string_literal: true
+
+require_relative "headmin/version"
+require_relative "headmin/engine"

data/package.json

@@ -0,0 +1,62 @@
+{
+  "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.",
+  "main": "src/js/headmin.js",
+  "sass": "src/scss/headmin.scss",
+  "style": "src/css/headmin.css",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/insiting/headmin.git"
+  },
+  "keywords": [
+    "headmin",
+    "insiting"
+  ],
+  "author": "Jef Vlamings <vlamingsjef@gmail.com>",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/insiting/headmin/issues"
+  },
+  "homepage": "https://github.com/insiting/headmin#readme",
+  "dependencies": {
+    "@rails/ujs": "^6.0.0",
+    "bootstrap": "^5.0.0-beta2",
+    "choices.js": "^9.0.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"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.12.10",
+    "@babel/preset-env": "^7.12.11",
+    "autoprefixer": "^10.2.3",
+    "babel-loader": "^8.2.2",
+    "node-sass": "^5.0.0",
+    "node-sass-tilde-importer": "^1.0.2",
+    "onchange": "^7.1.0",
+    "path": "^0.12.7",
+    "postcss": "^8.2.4",
+    "postcss-cli": "^8.3.1",
+    "watch": "^1.0.2",
+    "webpack": "4.44.2",
+    "webpack-cli": "^4.4.0"
+  },
+  "browserslist": [
+    "last 2 versions",
+    "ie >= 11"
+  ],
+  "scripts": {
+    "autoprefixer": "postcss -u autoprefixer -b 'last 2 versions' -r dist/css/headmin.css",
+    "compile:sass": "node-sass --importer=node_modules/node-sass-tilde-importer src/scss/headmin.scss dist/css/headmin.css",
+    "build:css": "yarn compile:sass && yarn autoprefixer",
+    "build:js": "webpack",
+    "build": "yarn build:css & yarn build:js",
+    "watch:css": "onchange src/scss/**/*.scss -- yarn build:css",
+    "watch:js": "onchange src/js/**/*.js -- yarn build:js",
+    "watch": "yarn watch:css & yarn watch:js",
+    "dev": "yarn build & yarn watch"
+  }
+}

data/src/js/headmin/controllers/filter_controller.js

@@ -0,0 +1,47 @@
+import {Controller} from "stimulus"
+
+export default class extends Controller {
+    static get targets() {
+        return ["button", "popup"]
+    }
+
+    // Attaches controller logic to the element itself
+    // This allows calling controller methods from the element in other controllers
+    connect () {
+        this.element['controller'] = this
+    }
+
+    toggle(event) {
+        event.preventDefault()
+        const expanded = this.buttonTarget.getAttribute('aria-expanded') === 'true'
+        if (expanded) {
+            this.close(null)
+        } else {
+            this.open()
+        }
+    }
+
+    open() {
+        this.buttonTarget.setAttribute('aria-expanded', 'true')
+        this.popupTarget.classList.remove('closed')
+    }
+
+    close(event) {
+        if (this.isClickedInside(event)) {
+            event.preventDefault()
+            return
+        }
+        this.buttonTarget.setAttribute('aria-expanded', 'false')
+        this.popupTarget.classList.add('closed')
+    }
+
+    isClickedInside(event) {
+        if (!event) {
+            return false
+        }
+        const inPopup = this.popupTarget.contains(event.target)
+        const inButton = this.buttonTarget.contains(event.target)
+        const inAddButton = event.target.dataset.action === "click->filters#add"
+        return (inPopup || inButton || inAddButton)
+    }
+}

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

@@ -0,0 +1,53 @@
+import {Controller} from "stimulus"
+import {Headmin} from "../headmin";
+
+export default class extends Controller {
+    static get targets() {
+        return ["form", "list", "input", "template", "button"]
+    }
+
+    add(event) {
+        event.preventDefault()
+        const name = event.target.dataset.filterName
+        const button = this.getButtonByName(name)
+        if (button) {
+            this.openFilter(button)
+        } else {
+            const template = this.getTemplateByName(name)
+            this.listTarget.insertAdjacentHTML('beforeend', template.innerHTML)
+            const button = this.getButtonByName(name)
+            Headmin.initPlugins()
+        }
+    }
+
+    remove(event) {
+        const filter = event.currentTarget.closest('.h-filter')
+        filter.remove()
+        this.formTarget.submit()
+    }
+
+    removeAll(event) {
+        this.listTarget.innerHTML = ""
+        this.formTarget.submit()
+    }
+
+    update(event) {
+        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
+        })
+    }
+
+    openFilter(button) {
+        button.controller.open()
+    }
+}

data/src/js/headmin/controllers/index_controller.js

@@ -0,0 +1,79 @@
+import {Controller} from "stimulus"
+
+export default class extends Controller {
+    static get targets() {
+        return ["actions", "idCheckbox", "idsCheckbox"]
+    }
+
+    toggleIds(event) {
+        const checkbox = event.target
+        this.toggleIdsCheckboxes(checkbox.checked)
+        this.toggleIdCheckboxes(checkbox.checked)
+        this.syncFields()
+    }
+
+    toggleId(event) {
+        this.toggleIdsCheckboxes(false)
+        this.syncFields()
+    }
+
+    toggleIdsCheckboxes(checked) {
+        this.idsCheckboxTargets.forEach((checkbox) => {
+            checkbox.checked = checked
+        });
+    }
+
+    toggleIdCheckboxes(checked) {
+        this.idCheckboxTargets.forEach((checkbox) => {
+            checkbox.checked = checked
+        });
+    }
+
+    syncFields() {
+        this.removeIds()
+        if(this.idsCheckboxTarget.checked) {
+            this.addId('')
+        } else {
+            this.idCheckboxTargets.forEach((checkbox) => {
+                if(checkbox.checked) {
+                    this.addId(checkbox.value)
+                }
+            });
+        }
+    }
+
+    addId(id) {
+        let field = this.getIdField(id)
+        if (!field) {
+            field = this.newIdField(id)
+            this.actionsTarget.insertAdjacentHTML('afterbegin', field)
+        }
+    }
+
+    removeIds() {
+        const fields = this.getIdFields()
+        fields.forEach((field) => {
+            this.actionsTarget.removeChild(field)
+        });
+    }
+
+    removeId(id) {
+        const field = this.getIdField(id)
+        if (field) {
+            this.actionsTarget.removeChild(field)
+        }
+    }
+
+    newIdField(id) {
+        const template = this.actionsTarget.querySelector('[data-index-target="idFieldTemplate"]')
+        return template.innerHTML.replace(/ID/g, id)
+    }
+
+    getIdFields() {
+        return this.actionsTarget.querySelectorAll(`input[name="ids[]"]`);
+    }
+
+    getIdField(id) {
+        return this.actionsTarget.querySelector(`input[name="ids[]"][value="${id}"]`);
+    }
+}

data/src/js/headmin/controllers/repeater_controller.js

@@ -0,0 +1,35 @@
+import {Controller} from "stimulus"
+import {Headmin} from "../headmin";
+
+export default class extends Controller {
+    static get values() {
+        return {
+            id: String
+        }
+    }
+    static get targets() {
+        return ["links", "template"]
+    }
+
+    add_association(event) {
+        event.preventDefault()
+
+        let html = this.getTemplateHTML()
+        html = this.replaceIdsWithTimestamps(html)
+        this.addNewRow(html)
+    }
+
+    getTemplateHTML() {
+        return this.templateTarget.innerHTML
+    }
+
+    replaceIdsWithTimestamps(html) {
+        const regex = new RegExp(this.idValue, "g");
+        return html.replace(regex, new Date().getTime())
+    }
+
+    addNewRow(html) {
+        this.linksTarget.insertAdjacentHTML('beforebegin', html)
+        Headmin.initPlugins()
+    }
+}

data/src/js/headmin/controllers/repeater_row_controller.js

@@ -0,0 +1,54 @@
+import {Controller} from "stimulus"
+import {Headmin} from '../headmin'
+
+export default class extends Controller {
+    static get targets() {
+        return ["row"]
+    }
+
+    add_association(event) {
+        event.preventDefault()
+
+        let html = this.getTemplateHTML()
+        html = this.replaceIdsWithTimestamps(html)
+        this.addRow(html)
+    }
+
+    remove_association(event) {
+        event.preventDefault()
+
+        let row = event.target.closest(".repeater-row")
+
+        if (row.dataset.newRecord === "true") {
+            // New records are simply removed from the page
+            row.remove()
+        } else {
+            // Existing records are hidden and flagged for deletion
+            row.querySelector("input[name*='_destroy']").value = 1
+            row.style.display = 'none'
+        }
+    }
+
+    addRow(html) {
+        this.rowTarget.insertAdjacentHTML('afterend', html)
+        Headmin.initPlugins()
+    }
+
+    replaceIdsWithTimestamps(html) {
+        const regex = new RegExp(this.idValue(), "g");
+        return html.replace(regex, new Date().getTime())
+    }
+
+    getTemplateHTML() {
+        const templateTarget = this.templateTarget()
+        return templateTarget.innerHTML
+    }
+
+    templateTarget() {
+        return this.rowTarget.closest('.repeater').querySelector('[data-repeater-target="template"]')
+    }
+
+    idValue() {
+        return this.rowTarget.closest('.repeater').dataset.repeaterIdValue
+    }
+}

data/src/js/headmin/controllers/table_actions_controller.js

@@ -0,0 +1,22 @@
+import {Controller} from "stimulus"
+
+export default class extends Controller {
+    static get targets() {
+        return ["form", "select", "method"]
+    }
+
+    connect() {
+        this.wrapperClass = "table-actions"
+    }
+
+    update(event) {
+        event.preventDefault()
+        const option = this.selectTarget.options[this.selectTarget.selectedIndex]
+        const action = this.selectTarget.value
+        const method = option.dataset.method
+
+        // Replace form action
+        this.formTarget.action = action
+        this.methodTarget.value = method
+    }
+}

data/src/js/headmin/controllers/table_controller.js

@@ -0,0 +1,36 @@
+import {Controller} from "stimulus"
+import Sortable from "sortablejs";
+import Rails from "@rails/ujs";
+
+export default class extends Controller {
+    static get values() {
+        return {url: String}
+    }
+
+    static get targets() {
+        return ["table", "body"]
+    }
+
+    connect() {
+        new Sortable(this.bodyTarget, {
+            handle: '.table-drag-sort-handle',
+            onEnd: (event) => {
+                Rails.ajax({
+                    url: this.urlValue,
+                    type: "PATCH",
+                    data: this.getIdsDataString(),
+                });
+            }
+        })
+    }
+
+    getIdsDataString() {
+        const table = this.tableTarget
+        let data = ""
+        const handles = [...table.querySelectorAll(".table-drag-sort-handle")]
+        handles.map(handle => {
+            data += `ids[]=${handle.dataset.id}&`
+        })
+        return data
+    }
+}