custom_inputs 0.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: f9096f6fc66e82395b149079a7a2d4ecbcb7cca373642fa1004d70b24faed964
+  data.tar.gz: 65566a633b1e6d5081797a66142a6819adf79d6732e10f01c21893b91350574b
+SHA512:
+  metadata.gz: c941894463a216ff2d2c256923b114531bff25724eb293b677bee915724c96e00ea5f31b27b5c75ff22cca1c5533bd3a1512f2403d454d731bf0868ce37cb120
+  data.tar.gz: a27ffbcd6432b1b1a0b2d1e5767c5e943678c9f69653555fe266019970bf24a9a5023cc84c167a73443e55166b967e1531b0293ab8ffcda02b8a08202c31e5fb

data/.gitignore

@@ -0,0 +1,12 @@
+/.bundle/
+/.yardoc
+/_yardoc/
+/coverage/
+/doc/
+/pkg/
+/spec/reports/
+/tmp/
+
+# rspec failure tracking
+.rspec_status
+.idea

data/.rspec

@@ -0,0 +1,3 @@
+--format documentation
+--color
+--require spec_helper

data/.travis.yml

@@ -0,0 +1,7 @@
+---
+sudo: false
+language: ruby
+cache: bundler
+rvm:
+  - 2.6.4
+before_install: gem install bundler -v 1.17.2

data/CODE_OF_CONDUCT.md

@@ -0,0 +1,74 @@
+# Contributor Covenant Code of Conduct
+
+## Our Pledge
+
+In the interest of fostering an open and welcoming environment, we as
+contributors and maintainers pledge to making participation in our project and
+our community a harassment-free experience for everyone, regardless of age, body
+size, disability, ethnicity, gender identity and expression, level of experience,
+nationality, personal appearance, race, religion, or sexual identity and
+orientation.
+
+## Our Standards
+
+Examples of behavior that contributes to creating a positive environment
+include:
+
+* Using welcoming and inclusive language
+* Being respectful of differing viewpoints and experiences
+* Gracefully accepting constructive criticism
+* Focusing on what is best for the community
+* Showing empathy towards other community members
+
+Examples of unacceptable behavior by participants include:
+
+* The use of sexualized language or imagery and unwelcome sexual attention or
+advances
+* Trolling, insulting/derogatory comments, and personal or political attacks
+* Public or private harassment
+* Publishing others' private information, such as a physical or electronic
+  address, without explicit permission
+* Other conduct which could reasonably be considered inappropriate in a
+  professional setting
+
+## Our Responsibilities
+
+Project maintainers are responsible for clarifying the standards of acceptable
+behavior and are expected to take appropriate and fair corrective action in
+response to any instances of unacceptable behavior.
+
+Project maintainers have the right and responsibility to remove, edit, or
+reject comments, commits, code, wiki edits, issues, and other contributions
+that are not aligned to this Code of Conduct, or to ban temporarily or
+permanently any contributor for other behaviors that they deem inappropriate,
+threatening, offensive, or harmful.
+
+## Scope
+
+This Code of Conduct applies both within project spaces and in public spaces
+when an individual is representing the project or its community. Examples of
+representing a project or community include using an official project e-mail
+address, posting via an official social media account, or acting as an appointed
+representative at an online or offline event. Representation of a project may be
+further defined and clarified by project maintainers.
+
+## Enforcement
+
+Instances of abusive, harassing, or otherwise unacceptable behavior may be
+reported by contacting the project team at hasan.a.ayar@gmail.com. All
+complaints will be reviewed and investigated and will result in a response that
+is deemed necessary and appropriate to the circumstances. The project team is
+obligated to maintain confidentiality with regard to the reporter of an incident.
+Further details of specific enforcement policies may be posted separately.
+
+Project maintainers who do not follow or enforce the Code of Conduct in good
+faith may face temporary or permanent repercussions as determined by other
+members of the project's leadership.
+
+## Attribution
+
+This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
+available at [http://contributor-covenant.org/version/1/4][version]
+
+[homepage]: http://contributor-covenant.org
+[version]: http://contributor-covenant.org/version/1/4/

data/Gemfile

@@ -0,0 +1,6 @@
+source "https://rubygems.org"
+
+git_source(:github) {|repo_name| "https://github.com/#{repo_name}" }
+
+# Specify your gem's dependencies in custom_inputs.gemspec
+gemspec

data/Gemfile.lock

@@ -0,0 +1,35 @@
+PATH
+  remote: .
+  specs:
+    custom_inputs (0.1.0)
+
+GEM
+  remote: https://rubygems.org/
+  specs:
+    diff-lcs (1.3)
+    rake (13.0.1)
+    rspec (3.9.0)
+      rspec-core (~> 3.9.0)
+      rspec-expectations (~> 3.9.0)
+      rspec-mocks (~> 3.9.0)
+    rspec-core (3.9.1)
+      rspec-support (~> 3.9.1)
+    rspec-expectations (3.9.0)
+      diff-lcs (>= 1.2.0, < 2.0)
+      rspec-support (~> 3.9.0)
+    rspec-mocks (3.9.1)
+      diff-lcs (>= 1.2.0, < 2.0)
+      rspec-support (~> 3.9.0)
+    rspec-support (3.9.2)
+
+PLATFORMS
+  ruby
+
+DEPENDENCIES
+  bundler (~> 2)
+  custom_inputs!
+  rake (~> 13.0)
+  rspec (~> 3.0)
+
+BUNDLED WITH
+   2.1.4

data/LICENSE.txt

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2020 Hasan Ali Ayar
+
+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,129 @@
+# Custom Inputs for Formtastic (Active Admin)
+
+I've been using [Active Admin](https://github.com/activeadmin/activeadmin) for developing admin panels for my clients.
+There are number of custom input components accumulated along the way. 
+
+I've decided to make a gem and share all these custom input components that I think may be very useful.
+
+   
+These inputs are optimised for [Arctic Admin](https://github.com/cprodhomme/arctic_admin) theme. 
+If you are using any other theme you can ignore the css files of this gem and implement your own css. 
+
+*Note:* Although these inputs are being actively used in a production app you should use them at your own risk.
+
+- [Array input](#array-input)
+- [List input](#list-input)
+
+
+(More to come...)
+- Code Editor input (...)
+- Query Builder input (...)
+- Remote Image Select input (...)
+- Rich Text input (...)
+- Upload To S3 input (...)
+
+## Installation
+
+Add this line to your application's Gemfile:
+
+```ruby
+gem 'custom_inputs'
+```
+
+And then execute:
+
+    $ bundle
+
+Or install it yourself as:
+
+    $ gem install custom_inputs
+
+## Usage
+
+All inputs comes with a javascript and scss file. You need to include these files wherever and whenever you want them to be included.
+
+For a quick start you can add them to the base active admin asset files like so:
+
+
+Append @ app/assets/javascripts/active_admin.js:
+```javascript 
+    //= require custom_inputs/array-input
+    //= require custom_inputs/list-input
+``` 
+
+Append @ app/assets/stylesheets/active_admin.scss :
+```scss 
+    @import "custom_inputs/array_input";
+    @import "custom_inputs/list_input";
+``` 
+
+### Array Input
+![Array input sample](examples/images/array-input-sample.png)
+Array input is specially made for PostgreSQL array fields.
+You can add/remove string items to the input and they'll be packed in an array field.
+
+Add the field to the permitted parameter as an array.
+```ruby
+permit_params  colors: []
+```
+
+```ruby
+  form do |f|
+    f.inputs do
+      f.input :colors, as: :array, undoable: true
+    end
+    f.actions
+  end
+```
+
+#### Available Options
+
+- **`undoable`:** deleted array items can be un-deleted if this flag set to true.   
+
+### List Input
+![List input sample](examples/images/list-input-sample.png)
+
+List input helps you generate a selection of items (array of hashes) from the supplied `collection_object` option.
+
+You can select items from a drop down list, with an optional quantity. 
+
+The selected items are displayed in an html table. 
+
+You can determine which fields of the items are to be used by `fields` option.  
+
+This input will eventually generate an array of hashes with specified fields to be submitted.
+  
+
+```ruby
+form do |f|
+    f.inputs do
+      f.input :order_items, as: :list,
+              has_quantity: true,
+              collection_object: Product.all,
+              to_s_method: :name,
+              unique_field: :id,
+              fields: [
+                  {'Product number': :id},
+                  {'Name': :name}
+              ]
+    end
+    f.actions
+  end
+```
+#### Available Options
+
+- **`has_quantity`:** append quantity field to the items in the list.
+- **`collection_object*`:** the list of items to choose from. 
+- **`to_s_method`:** (default `to_s`) the method to call for each item in the `collection_object` to display it in the dropdown list.
+- **`unique_field`:** (default `id`) the field that uniquely identifies the items in the `collection_object`.    
+- **`fields*`:** only the supplied fields of the items will be used in the input. 
+The keys are used as table column headers and the values ara the actual field names.   
+ 
+
+## Contributing
+
+Bug reports and pull requests are very welcome.
+
+## License
+
+The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).

data/Rakefile

@@ -0,0 +1,6 @@
+require "bundler/gem_tasks"
+require "rspec/core/rake_task"
+
+RSpec::Core::RakeTask.new(:spec)
+
+task :default => :spec

data/app/assets/javascripts/custom_inputs/array-input.js

@@ -0,0 +1,67 @@
+class ArrayModifier {
+    static removeFromArrayInput(e) {
+        let button = this;
+        let input = button.previousSibling;
+        let undoable = button.classList.contains('undoable');
+
+        if (undoable) {
+            if (input.disabled) {
+                button.innerHTML = `<i class="fa fa-minus-circle"></i>`;
+                input.disabled = false;
+                return input.classList.remove('text--strike');
+            } else {
+                button.innerHTML = `<i class="fa fa-undo"></i>`;
+                input.disabled = true;
+                input.classList.add('text--strike');
+            }
+        } else {
+            button.parentElement.remove();
+        }
+    }
+
+    static createNewInput(value) {
+        let template = document.querySelector('.input-group--array__item.template');
+        let clone = template.cloneNode(true);
+
+        clone.classList.remove('template', 'hidden')
+
+        let input = clone.querySelector('input');
+        input.removeAttribute('disabled');
+        input.value = value;
+        input.focus();
+
+        return clone;
+    }
+
+    static handleKeyDown(event) {
+        if (event.key === 'Enter') {
+            ArrayModifier.handleAddClick(event, this.nextSibling);
+            return false;
+        }
+    }
+
+    static handleAddClick(e, b) {
+        e.preventDefault();
+
+        let button = b || this;
+        let newItemField = button.parentNode;
+        let input = button.previousSibling;
+
+        let value = input.value;
+        if (value !== '') {
+            input.value = '';
+            let clone = ArrayModifier.createNewInput(value);
+            newItemField.parentNode.insertBefore(clone, newItemField);
+        } else {
+            return input.focus();
+        }
+    }
+}
+
+$(document).ready(function () {
+    $('.js-add-to-array-input').click(ArrayModifier.handleAddClick);
+
+    let arrayInputContainer = $('.input-group--array');
+    $(arrayInputContainer).on('click', '.js-remove-from-array-input', ArrayModifier.removeFromArrayInput);
+    $(arrayInputContainer).on('keydown', '.input-group--array__item input', ArrayModifier.handleKeyDown)
+});

data/app/assets/javascripts/custom_inputs/custom_inputs.js

@@ -0,0 +1,12 @@
+function clearEmptyValues() {
+    console.log('custom_inputs.js : clearEmptyValues');
+    document.querySelectorAll('.custom-inputs--input-field').forEach((input) => {
+        if (!input.value) {
+            input.setAttribute('disabled', 'disabled');
+        }
+    });
+}
+
+$(document).ready(function () {
+    $('form').submit(clearEmptyValues);
+});

data/app/assets/javascripts/custom_inputs/list-input.js

@@ -0,0 +1,79 @@
+//= require ./custom_inputs
+
+class ListModifier {
+    static removeFromArrayInput(button) {
+        button.parentElement.parentElement.remove();
+    }
+
+// Add item button click
+    static addToItems(e) {
+        e.preventDefault;
+
+        let add_button = this;
+        if (add_button.classList.contains('array-action--add')) {
+            let container = add_button.parentElement.parentElement;
+            let item_table = container.querySelector('.item-table tbody');
+            let template_row = container.querySelector('.item-row');
+
+            //Get selected values
+            let quantity_val = container.querySelector('input').value;
+            let item_val = JSON.parse(container.querySelector('select').value);
+            let row_id = 'row_' + item_val['id'];
+
+            //If this item is selected before, we'll update it's quantity instead of inserting a new row.
+            let row_to_be_updated = item_table.querySelector('#' + row_id);
+
+            let new_row = false;
+            if (!row_to_be_updated) {
+                //Clone the item row and show it.
+                row_to_be_updated = template_row.cloneNode(true);
+                row_to_be_updated.classList.remove('hidden');
+                row_to_be_updated.setAttribute('id', row_id);
+                new_row = true;
+            }
+
+            // Find elements to manipulate.
+            // Html td cells contain field attributes with the key of contained value.
+            let fields = row_to_be_updated.querySelectorAll('td[field]');
+            fields.forEach(field => {
+                let fieldKey = field.getAttribute('field');
+                let fieldValue = item_val[fieldKey];
+
+                //        Put value in table cell
+                let cell = row_to_be_updated.querySelector('.' + fieldKey + '-cell');
+                cell.innerHTML = fieldValue;
+
+                //        put value in hidden input
+                let hidden_input = row_to_be_updated.querySelector('.hidden-' + fieldKey);
+                hidden_input.value = fieldValue;
+            });
+
+            //Assign selected quantity to hidden inputs#
+            let hidden_quantity = row_to_be_updated.querySelector('.hidden-quantity');
+            let prev_quantity = hidden_quantity.value || 0;
+
+            quantity_val = Number(quantity_val) + Number(prev_quantity);
+            hidden_quantity.value = quantity_val;
+
+            //Show selected quantity on table
+            let quantity_cell = row_to_be_updated.querySelector('.quantity-cell');
+            quantity_cell.innerHTML = quantity_val;
+
+            if (new_row) {
+                //Add cloned row to table
+                return item_table.appendChild(row_to_be_updated);
+            }
+        } else {
+            return removeFromArrayInput(this);
+        }
+    }
+}
+
+$(document).ready(function () {
+    $('.item-list-container').on('click', '.js-remove-from-items-input', function (e) {
+        e.preventDefault();
+        ListModifier.removeFromArrayInput(this);
+    });
+
+    $('.js-add-to-items-input').click(ListModifier.addToItems);
+});

data/app/assets/stylesheets/custom_inputs/array_input.scss

@@ -0,0 +1,57 @@
+//array input
+
+@mixin reset-aa-button {
+  background: none;
+  border-radius: 0;
+  border: 0;
+  box-shadow: none;
+  line-height: 1;
+  padding: 0;
+  text-shadow: none;
+  vertical-align: middle;
+
+  &:not(.disabled) {
+    &:hover,
+    &:active,
+    &:focus {
+      background: none;
+      border: 0;
+      box-shadow: none;
+    }
+  }
+}
+
+.formtastic li.array.input {
+  .input-group--array {
+    width: 75%;
+    margin: 0 0 0 25%;
+    .input-group--array__item {
+      padding: 4px 0;
+      input {
+        display: inline-block;
+        margin: 0 10px 0 0;
+        &.text--strike {
+          text-decoration: line-through;
+        }
+      }
+      &.hidden {
+        display: none;
+      }
+    }
+
+    .array-action--add,
+    .array-action--remove {
+      @include reset-aa-button;
+      display: inline-block;
+      font-size: rem(15);
+    }
+
+    .array-action--add {
+      color: green;
+    }
+
+    .array-action--remove {
+      color: red;
+    }
+  }
+}

data/app/assets/stylesheets/custom_inputs/list_input.scss

@@ -0,0 +1,41 @@
+//item_with_quantity input
+@import "./variables";
+
+.list{
+  &.view{
+    width: auto;
+  }
+
+  th{
+    text-align: left;
+  }
+  &.error {
+    table tr {
+      border-color: $danger-color
+    }
+  }
+  .item-list-container {
+    width: 100%;
+    padding-left: 25%;
+    padding-right: 25%;
+  }
+  .hidden {
+    display: none;
+  }
+  .item-quantity-group:first-child {
+    margin-left: 0;
+  }
+  .item-quantity-group {
+    display: flex;
+    max-width: 50%;
+    margin-left: 25%;
+    justify-content: space-between;
+    .item-item, .select2 {
+      flex: 3;
+    }
+    .item-quantity {
+      flex: 1;
+      margin-left: 10px;
+    }
+  }
+}

data/app/assets/stylesheets/custom_inputs/variables.scss

@@ -0,0 +1,4 @@
+$danger-color: #EA5E5B;
+$warning-color: #F4D23E;
+$success-color: #B9CF4E;
+$optimal-color: #72BD48;

data/app/views/custom_inputs/_list.html.erb

@@ -0,0 +1,22 @@
+<div class="item_with_quantity view">
+
+  <table class="item-table">
+    <tbody>
+    <tr>
+      <% items[0].each do |key, value| %>
+        <th><%= key %></th>
+      <% end %>
+    </tr>
+    <% items.each do |item| %>
+      <tr class="item-row">
+        <% item.each do |key, value| %>
+
+          <td><%= value %></td>
+
+        <% end %>
+      </tr>
+    <% end %>
+    </tbody>
+  </table>
+
+</div>

data/bin/console

@@ -0,0 +1,14 @@
+#!/usr/bin/env ruby
+
+require "bundler/setup"
+require "custom_inputs"
+
+# You can add fixtures and/or initialization code here to make experimenting
+# with your gem easier. You can also use a different console, if you like.
+
+# (If you use this, don't forget to add pry to your Gemfile!)
+# require "pry"
+# Pry.start
+
+require "irb"
+IRB.start(__FILE__)

data/bin/setup

@@ -0,0 +1,8 @@
+#!/usr/bin/env bash
+set -euo pipefail
+IFS=$'\n\t'
+set -vx
+
+bundle install
+
+# Do any other automated setup that you need to do here

data/custom_inputs.gemspec

@@ -0,0 +1,53 @@
+lib = File.expand_path("../lib", __FILE__)
+app = File.expand_path("../app", __FILE__)
+
+$LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib)
+$LOAD_PATH.unshift(app) unless $LOAD_PATH.include?(app)
+require "custom_inputs/version"
+
+Gem::Specification.new do |spec|
+  spec.name = "custom_inputs"
+  spec.version = CustomInputs::VERSION
+  spec.authors = ["Hasan Ali Ayar"]
+  spec.email = ["hasan.a.ayar@gmail.com"]
+
+  spec.summary = "Custom form input fields for active admin + formtastic."
+  spec.description = `I've been using Active Admin for developing admin panels for my clients.
+There are number of custom input components accumulated along the way.
+
+I've decided to make a gem and share all these custom input components that I think may be very useful.
+
+These inputs are optimised for Arctic Admin theme.
+If you are using any other theme you can ignore the css files of this gem and implement your own css.
+
+Note: Although these inputs are being actively used in a production app you should use them at your own risk.
+`
+  spec.homepage = "https://github.com/hasan-aa/custom_inputs"
+  spec.license = "MIT"
+
+  # Prevent pushing this gem to RubyGems.org. To allow pushes either set the 'allowed_push_host'
+  # to allow pushing to a single host or delete this section to allow pushing to any host.
+  if spec.respond_to?(:metadata)
+    spec.metadata["allowed_push_host"] = "https://rubygems.org/"
+
+    spec.metadata["homepage_uri"] = spec.homepage
+    spec.metadata["source_code_uri"] = "https://github.com/hasan-aa/custom_inputs"
+    # spec.metadata["changelog_uri"] = "TODO: Put your gem's CHANGELOG.md URL here."
+  else
+    raise "RubyGems 2.0 or newer is required to protect against " \
+      "public gem pushes."
+  end
+
+  # 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('..', __FILE__)) do
+    `git ls-files -z`.split("\x0").reject {|f| f.match(%r{^(test|spec|features|examples)/})}
+  end
+  spec.bindir = "exe"
+  spec.executables = spec.files.grep(%r{^exe/}) {|f| File.basename(f)}
+  spec.require_paths = ["lib", "app"]
+
+  spec.add_development_dependency "bundler", "~> 2"
+  spec.add_development_dependency "rake", "~> 13.0"
+  spec.add_development_dependency "rspec", "~> 3.0"
+end

data/lib/custom_inputs.rb

@@ -0,0 +1,9 @@
+require "formtastic"
+
+module CustomInputs
+  class Engine < ::Rails::Engine
+    config.autoload_paths += Dir["#{config.root}/lib"]
+    # ActiveSupport::Dependencies.explicitly_unloadable_constants << 'Formtastic::Inputs::ArrayInput'
+  end
+end
+

data/lib/custom_inputs/version.rb

@@ -0,0 +1,3 @@
+module CustomInputs
+  VERSION = "0.1.0"
+end

data/lib/formtastic/input_helpers.rb

@@ -0,0 +1,22 @@
+module Formtastic
+  module InputHelpers
+    def icon_tag(icon_name)
+      template.content_tag(:i, '', class: "fa fa-#{icon_name}")
+    end
+
+    def input_classes(options)
+      classes = 'custom-inputs--input-field'
+      classes += ' ' + options[:class] if options[:class]
+      classes
+    end
+
+    def ci_hidden_field(name, value = nil, options = {})
+      template.hidden_field_tag(name, value, options.merge(class: input_classes(options)))
+    end
+
+    def ci_text_field(name, value = nil, options = {})
+      template.text_field_tag(name, value, options.merge(class: input_classes(options)))
+    end
+
+  end
+end

data/lib/formtastic/inputs/array_input.rb

@@ -0,0 +1,50 @@
+module Formtastic
+  module Inputs
+    class ArrayInput
+      include Base
+      include InputHelpers
+
+      def to_html
+        @undoable = options[:undoable]
+        input_wrapping do
+          inputs = []
+
+          values = @object.send(method)
+          if values
+            values.each_with_index do |v, x|
+              inputs << array_input_html(v)
+            end
+          end
+
+          label_html <<
+              template.content_tag(:div, class: 'input-group--array') do
+                inputs.join.html_safe <<
+                    array_input_html('', false) <<
+                    array_input_html('', true, true) # template for creating new array input field
+              end
+        end
+      end
+
+      private
+
+      def array_input_html(value, remove = true, hidden = false)
+        icon_name = remove ? 'minus-circle' : 'plus-circle'
+        button_classes = remove ? 'array-action--remove js-remove-from-array-input' : 'array-action--add js-add-to-array-input'
+        button_classes += ' undoable' if @undoable
+
+        button = template.content_tag(:button,
+                                      icon_tag(icon_name),
+                                      class: button_classes,
+                                      type: 'button')
+
+        wrapper_classes = 'input-group--array__item'
+        wrapper_classes += ' hidden template' if hidden
+
+        template.content_tag(:div, class: wrapper_classes) do
+          ci_text_field("#{object_name}[#{method}][]", value, id: nil, disabled: hidden) << button
+        end
+      end
+
+    end
+  end
+end

data/lib/formtastic/inputs/list_input.rb

@@ -0,0 +1,126 @@
+module Formtastic
+  module Inputs
+    class ListInput
+      include Base
+      include InputHelpers
+
+      def has_quantity?
+        if @has_quantity.nil?
+          @has_quantity = options[:has_quantity]
+          @has_quantity = true if @has_quantity.nil?
+        end
+        @has_quantity
+      end
+
+      def to_html
+        fields = options[:fields] # [{'Header Text': :key}... ]
+        values = @object ? @object.send(method) : nil
+
+        input_wrapping do
+          label_html <<
+              template.content_tag(:div, class: 'item-quantity-group') do
+                tags = select_html
+                tags << quantity_html if has_quantity?
+                tags << buttons(false)
+              end <<
+              template.content_tag(:div, nil, class: 'item-list-container') do
+                # Table
+                template.content_tag(:table, class: 'item-table') do
+                  # Headers
+                  template.content_tag(:tr) do
+                    headers = fields.map {|field|
+                      header = field.first[0]
+                      template.content_tag(:th, header.to_s)
+                    }.join.html_safe
+                    # Quantity header
+                    headers << template.content_tag(:th, 'Quantity') if has_quantity?
+                    # Button header
+                    headers << template.content_tag(:th)
+                  end <<
+                      table_row << #hidden template row for js use.
+                      if values
+                        values.map {|value| table_row(false, value)}.join.html_safe
+                      end
+                end
+              end
+        end
+      end
+
+      private
+
+      def table_row(hidden = true, item = nil)
+        # Generating sample hidden row
+        unique_field = options[:unique_field] || 'id'
+        unique_value = item
+        quantity = nil
+        if item and has_quantity?
+          unique_value = item[unique_field.to_s]
+          quantity = item['quantity']
+        end
+
+        item_data = options[:collection_object].find_by("#{unique_field}": unique_value)
+        item_data ||= {}
+        fields = options[:fields]
+
+        css_classes = 'item-row'
+        css_classes += ' hidden' if hidden
+        template.content_tag(:tr, class: css_classes, id: "row_#{item_data[:id]}") do
+          cells = fields.map {|field|
+            key = field.first[1]
+            cell = template.content_tag(:td, "", class: "#{key}-cell", field: key.to_s) do
+              item_data[key].to_s
+            end
+            cell << hidden_field(key, true, item_data[key]) if has_quantity?
+            cell
+          }.join.html_safe
+
+          if has_quantity?
+            # Quantity cell
+            cells << template.content_tag(:td, class: 'quantity-cell') do
+              quantity
+            end
+            cells << hidden_field('quantity', false, quantity)
+          else
+            cells << hidden_field(unique_field, false, unique_value)
+          end
+
+          # Button cell
+          cells << template.content_tag(:td, width: '26px') do
+            buttons(true)
+          end
+        end
+      end
+
+      def select_html
+        template.select_tag('', template.options_from_collection_for_select(options[:collection_object], 'to_json', options[:to_s_method] || 'to_s'), input_html_options.merge({class: 'item-item', name: ''}))
+      end
+
+      def quantity_html
+        builder.number_field('', input_html_options.merge({class: 'item-quantity', value: 1, name: ''}))
+      end
+
+      def hidden_field(key, insert_field_attr = true, value = nil)
+        options = {class: "hidden-#{key}"}
+        options['field'] = key.to_s if insert_field_attr
+
+        if has_quantity?
+          # When with quantity build an array of objects with fields given in options.
+          # template.hidden_field_tag("#{object_name}[#{method}][][#{key}]", value = value, options = options)
+          ci_hidden_field("#{object_name}[#{method}][][#{key}]", value = value, options = options)
+        else
+          # When without quantity build an array of IDs
+          ci_hidden_field("#{object_name}[#{method}][]", value = value, options = options)
+        end
+      end
+
+      def buttons(remove = true)
+        if remove
+          button = template.content_tag(:button, icon_tag('minus-circle'), class: 'array-action--remove js-remove-from-items-input', type: 'button')
+        else
+          button = template.content_tag(:button, icon_tag('plus-circle'), class: 'array-action--add js-add-to-items-input', type: 'button')
+        end
+        button
+      end
+    end
+  end
+end

metadata

@@ -0,0 +1,113 @@
+--- !ruby/object:Gem::Specification
+name: custom_inputs
+version: !ruby/object:Gem::Version
+  version: 0.1.0
+platform: ruby
+authors:
+- Hasan Ali Ayar
+autorequire: 
+bindir: exe
+cert_chain: []
+date: 2020-03-20 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: bundler
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '2'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '2'
+- !ruby/object:Gem::Dependency
+  name: rake
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '13.0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '13.0'
+- !ruby/object:Gem::Dependency
+  name: rspec
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '3.0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '3.0'
+description: ''
+email:
+- hasan.a.ayar@gmail.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- ".gitignore"
+- ".rspec"
+- ".travis.yml"
+- CODE_OF_CONDUCT.md
+- Gemfile
+- Gemfile.lock
+- LICENSE.txt
+- README.md
+- Rakefile
+- app/assets/javascripts/custom_inputs/array-input.js
+- app/assets/javascripts/custom_inputs/custom_inputs.js
+- app/assets/javascripts/custom_inputs/list-input.js
+- app/assets/stylesheets/custom_inputs/array_input.scss
+- app/assets/stylesheets/custom_inputs/list_input.scss
+- app/assets/stylesheets/custom_inputs/variables.scss
+- app/views/custom_inputs/_list.html.erb
+- bin/console
+- bin/setup
+- custom_inputs.gemspec
+- lib/custom_inputs.rb
+- lib/custom_inputs/version.rb
+- lib/formtastic/input_helpers.rb
+- lib/formtastic/inputs/array_input.rb
+- lib/formtastic/inputs/list_input.rb
+homepage: https://github.com/hasan-aa/custom_inputs
+licenses:
+- MIT
+metadata:
+  allowed_push_host: https://rubygems.org/
+  homepage_uri: https://github.com/hasan-aa/custom_inputs
+  source_code_uri: https://github.com/hasan-aa/custom_inputs
+post_install_message: 
+rdoc_options: []
+require_paths:
+- lib
+- app
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubygems_version: 3.0.3
+signing_key: 
+specification_version: 4
+summary: Custom form input fields for active admin + formtastic.
+test_files: []