sn_filterable 0.1.1

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: 4789bdaca59f8fe8a8aa1adfc7725d69ec7fdded65ee794b13cf155c8ff3ad09
+  data.tar.gz: a172fe3b19ce43a61ffb511c66a224f0caf1a533b7bd3414cdc752bbe2fd59c0
+SHA512:
+  metadata.gz: 90af89cc97840f7f5c3cb53632ddbf3e99e197c01fcbf1f8e96a82daa0b7ff7d2a5c7e884aaeedb17f553a8a1e16ef73c298b7b9257ba9591e2a3020337321c0
+  data.tar.gz: 5e6fa1d8e79e29abd6683e3d8756949feeebc23f1e99f92d57f39b55b3e162ef8d3f4233f2846e8a271e0f62f6fd9e6b515c9c85d7a982c2ed57c3584f52869a

data/README.md

@@ -0,0 +1,199 @@
+# SnFilterable
+
+Welcome to the Skills Network Filterable gem!
+
+This gem provides a method for developers to quickly implement a customizable search and filter for their data with live-reloading.
+
+Live examples of the gem's use can be viewed at [Skills Network's Author Workbench](https://author.skills.network), primarily under the [organizations tab](https://author.skills.network/organizations)
+
+![](sn_filterable_demo.gif)
+
+## Requirements
+
+There are a couple key requirements for your app to be compatible with this gem:
+
+1. You need to have [AlpineJS](https://alpinejs.dev/essentials/installation) loaded into the page where you plan to use SnFilterable
+2. Your app needs to be running [TailwindCSS](https://tailwindcss.com/docs/guides/ruby-on-rails)
+
+## Installation
+
+Add this line to your application's Gemfile:
+
+```ruby
+gem "sn_filterable", git: "https://github.com/ibm-skills-network/sn_filterable.git"
+```
+
+And then execute:
+```bash
+bundle install
+```
+
+##### Make the following adjustments to your codebase
+
+1. Add the necessary translations and customize as desired
+```yaml
+# en.yml
+en:
+    # Other translations
+    shared:
+        filterable:
+        view_filter_button: "View filters"
+        results_per_page: "Results per page"
+        clear_all: "Clear all"
+        pagination:
+            previous_page: "Previous"
+            next_page: "Next"
+```
+
+2. Require the necessary JavaScript (dependent on AlpineJS being included with your App)
+```javascript
+// application.js converted to application.js.erb
+
+// other imports
+<%= SnFilterable.load_js %>
+```
+
+3. Configure your app's Tailwind to scan the gem
+```javascript
+// tailwind.config.js
+const execSync = require('child_process').execSync;
+const output = execSync('bundle show sn_filterable', { encoding: 'utf-8' });
+
+module.exports = {
+  // other config settings
+  content: [
+    // other content
+    output.trim() + '/app/**/*.{erb,rb}'
+  ]
+  // other config settings
+};
+```
+
+## Usage
+
+
+#### The MainComponent: Search Bar and sidebar
+
+The MainComponent is what is demo'd in the introduction. It consists of the search bar and a sidebar for filters.
+
+If you only wish to use the Search bar an optional `show_sidebar: false` parameter can be passed to `SnFilterable::MainComponent` in the view.
+
+There are three components which work to provide the text search functionality:
+
+1. Filters in the given model:
+```ruby
+# model.rb
+class Model < ApplicationRecord
+    include SnFilterable::Filterable
+
+    FILTER_SCOPE_MAPPINGS = {
+        "search_name": :filter_by_name
+        # 'search_name' will be referenced from the view
+    }.freeze
+
+
+    SORT_SCOPE_MAPPINGS = {
+        "sort_name": :sort_by_name
+        # 'sort_name' will be referenced from the controller
+    }.freeze
+
+    scope :filter_by_name, ->(search) { where(SnFilterable::WhereHelper.contains("name", search)) }
+    scope :sort_by_name, -> { order :name }
+    # 'name' is a string column defined on the Model
+
+    # Model code...
+end
+```
+
+2. Setting up the controller
+* While `:default_sort` is an optional parameter it is recommended
+```ruby
+# models_controller.rb
+@search = Model.filter(params:, default_sort: ["sort_name", :asc].freeze)
+@models = @search.items
+```
+
+3. Rendering the ViewComponent
+```html
+<%= render SnFilterable::MainComponent.new(frame_id: "some_unique_id", filtered: @search, filters: [], search_filter_name: "search_name") do %>
+    <% @models.each do |model| %>
+        <%= model.name %>
+    <% end %>
+    <%= filtered_paginate @search %> # Kaminari Gem Pagination
+<% end %>
+```
+
+#### The MainComponent: Adding filters to the sidebar
+
+Adding filters to the sidebar requires changes to two files though we recommend storing the data across three files and will demsontrate as such.
+
+1. Add filters to Model
+```ruby
+# app/models/model.rb
+class Model < ApplicationRecord
+    # inclusion statement from introduction
+
+    FILTER_SCOPE_MAPPINGS = {
+        # other filter scopes...
+        "model_type_filter": :filter_by_type
+    }.freeze
+    # 'model_type_filter' will be referenced in step 2
+
+    ARRAY_FILTER_SCOPES = %i[model_type_filter].freeze
+    # safelist of all filters we will be rendering in our sidebar
+    
+    scope :filter_by_type, ->(model_type_input) { where(model_type: model_type_input) }
+    # where 'model_type' is an attribute defined on Model
+end
+```
+
+2. Create filter options
+```ruby
+# app/models/filter.rb
+# We store in a filter.rb model, but you can store as desired
+class Filter
+  MODEL_FILTERS = [
+    {
+      multi: true,
+      title: "Type",
+      filter_name: "model_type_filter",
+      filters: %w(Special Normal).map { |type| { name: type, value: type } }
+      # Allows us to filter between 'Special' and 'Normal' model types
+      # Note we recommend storing the %w(Special Normal) array at a central location for easier validation and manipulation
+    }
+  ].freeze
+end
+```
+
+3. Render as part of our MainComponent
+```html
+<!-- Notice the addition of a non-empty 'filters' argument which references step 2 -->
+<%= render SnFilterable::MainComponent.new(frame_id: "some_unique_id", filtered: @search, filters: Filter::MODEL_FILTERS, search_filter_name: "search_name") do %>
+    <!-- display code.. -->
+<% end %>
+```
+
+## Testing / Development
+
+This gem using [RSpec](https://rspec.info) for testing. Tests can be running locally by first setting up the dummy database/app as follows:
+
+```bash
+docker compose up -d
+cd spec/dummy
+rails db:create
+rails db:schema:load
+```
+
+
+Now the test suite can be run from the project root using 
+```bash
+bundle exec rspec
+```
+
+## Contributing
+
+Bug reports and pull requests are welcome on [GitHub](https://github.com/ibm-skills-network/sn_filterable).
+
+## 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,12 @@
+# frozen_string_literal: true
+
+require "bundler/gem_tasks"
+require "rspec/core/rake_task"
+
+RSpec::Core::RakeTask.new(:spec)
+
+require "rubocop/rake_task"
+
+RuboCop::RakeTask.new
+
+task default: %i[spec rubocop]

data/app/assets/javascripts/sn_filtering.js

@@ -0,0 +1,63 @@
+document.addEventListener("alpine:init", () => {
+  Alpine.data("filteringSearchInput", (searchKey) => ({
+    currentTimeout: null,
+    hasValue: false,
+    onInit: function () {
+      this.onValueUpdate()
+    },
+    onUpdate: function (force) {
+      this.clearTimeout();
+      this.onValueUpdate();
+
+      this.$data.currentTimeout = setTimeout(() => {
+        this.$data.currentTimeout = null;
+
+        this.$data.filteringForm.requestSubmit();
+      }, force ? 0 : 500);
+    },
+    onValueUpdate: function () {
+      this.$data.hasValue = this.$el.value.length > 0;
+    },
+    clearTimeout: function () {
+      if (this.$data.currentTimeout != null) {
+        clearInterval(this.$data.currentTimeout);
+        this.$data.currentTimeout = null;
+      }
+    }
+  }));
+  Alpine.data("filteringChipContainer", () => ({
+    updateSidebarGap: function () {
+      this.$data.sidebarGapTarget.style.paddingTop = `${this.$el.clientHeight}px`;
+    }
+  }));
+  Alpine.data("filteringChip", (filter) => ({
+    onClick: function (chipElem) {
+      const inputElem = this.$data.filteringForm.querySelector(`input[data-filter-name=${JSON.stringify(filter.parent)}][value=${JSON.stringify(filter.value)}]`);
+      if (filter.multi) {
+        inputElem.click()
+      } else {
+        inputElem.checked = false;
+        this.$data.filteringForm.requestSubmit();
+      }
+
+      if (this.$el.closest(".app-filter-chips-container").children.length == 1) {
+        this.$el.closest(".app-filter-chips-content").remove();
+      } else {
+        this.$el.closest(".app-filter-chip").remove();
+      }
+
+      this.$data.updateSidebarGap();
+    }
+  }));
+  Alpine.data("filteringClear", (filter) => ({
+    onClick: function (chipElem) {
+      const chips = Array.from(this.$data.entireComponenet.querySelector(".app-filter-chips-container").querySelectorAll(".app-filter-chip"));
+
+      for (const chip of chips) {
+        chip.querySelector("a").click();
+      }
+
+      this.$el.closest(".app-filter-chips-content").remove();
+    }
+  }));
+});

data/app/components/sn_filterable/base_components/base_component.rb

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+require "view_component"
+require "rails"
+
+class SnFilterable::BaseComponents::BaseComponent < ViewComponent::Base
+  include ClassNameHelper
+  include FetchOrFallbackHelper
+
+  def initialize(tag:, classes: nil, **system_arguments)
+    @tag = tag
+    @system_arguments = system_arguments
+
+    # TODO
+    # Implement a more native way of adding custom CSS class instead of stupid string concat
+    # Similar to the Claasifier Primer build
+    # https://github.com/primer/view_components/blob/41b277aa047ba7d1a669a48dc392115bf4948435/app/components/primer/base_component.rb
+    @system_arguments[:class] = class_names(
+      system_arguments[:class],
+      classes
+    )
+  end
+
+  def call
+    content_tag(@tag, content, **@system_arguments)
+  end
+end

data/app/components/sn_filterable/base_components/button_component.rb

@@ -0,0 +1,71 @@
+# frozen_string_literal: true
+require_relative "base_component"
+
+class SnFilterable::BaseComponents::ButtonComponent < SnFilterable::BaseComponents::BaseComponent
+  DEFAULT_BUTTON_TYPE = :default
+  BUTTON_TYPE_MAPPINGS = {
+    DEFAULT_BUTTON_TYPE => "shadow-sm border-gray-300 text-gray-700 bg-white hover:bg-gray-50 focus:ring-indigo-500",
+    :primary => "shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:ring-indigo-500",
+    :danger => "border-transparent text-red-700 bg-red-100 hover:bg-red-200 focus:ring-red-500",
+    :disabled => "shadow-sm border-gray-300 text-gray-700 bg-gray-200 cursor-default"
+  }.freeze
+  BUTTON_TYPE_OPTIONS = BUTTON_TYPE_MAPPINGS.keys
+
+  DEFAULT_VARIANT = :medium
+  VARIANT_MAPPINGS = {
+    :small => "px-3 py-2 text-sm leading-4 font-medium",
+    DEFAULT_VARIANT => "px-4 py-2 text-sm font-medium",
+    :large => "px-4 py-2 text-base font-medium"
+  }.freeze
+  VARIANT_OPTIONS = VARIANT_MAPPINGS.keys
+
+  DEFAULT_TAG = :button
+  TAG_OPTIONS = [DEFAULT_TAG, :a, :summary].freeze
+
+  DEFAULT_TYPE = :button
+  TYPE_OPTIONS = [DEFAULT_TYPE, :reset, :submit].freeze
+
+  # @example 50|Button types
+  #   <%= render(ButtonComponent.new) { "Default" } %>
+  #   <%= render(ButtonComponent.new(button_type: :primary)) { "Primary" } %>
+  #   <%= render(ButtonComponent.new(button_type: :danger)) { "Danger" } %>
+  #
+  # @example 50|Variants
+  #   <%= render(ButtonComponent.new(variant: :small)) { "Small" } %>
+  #   <%= render(ButtonComponent.new(variant: :medium)) { "Medium" } %>
+  #   <%= render(ButtonComponent.new(variant: :large)) { "Large" } %>
+  #
+  # @param button_type [Symbol] <%= one_of(ButtonComponent::BUTTON_TYPE_OPTIONS) %>
+  # @param variant [Symbol] <%= one_of(ButtonComponent::VARIANT_OPTIONS) %>
+  # @param tag [Symbol] <%= one_of(ButtonComponent::TAG_OPTIONS) %>
+  # @param type [Symbol] <%= one_of(ButtonComponent::TYPE_OPTIONS) %>
+  def initialize(
+    button_type: DEFAULT_BUTTON_TYPE,
+    variant: DEFAULT_VARIANT,
+    tag: DEFAULT_TAG,
+    type: DEFAULT_TYPE,
+    **arguments
+  )
+    @arguments = arguments
+    @arguments[:tag] = tag || DEFAULT_TAG
+
+    if @arguments[:tag] == :a
+      @arguments[:role] = :button
+    else
+      @arguments[:type] = type
+    end
+
+    show_focus_ring = arguments[:show_focus_ring].nil? ? true : arguments[:show_focus_ring]
+    focus_ring_class = show_focus_ring ? "focus:ring-2 focus:ring-offset-2" : ""
+
+    @arguments[:classes] = class_names(
+      "inline-flex items-center border rounded-md #{focus_ring_class} focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed",
+      BUTTON_TYPE_MAPPINGS[fetch_or_fallback(BUTTON_TYPE_OPTIONS, button_type, DEFAULT_BUTTON_TYPE)],
+      VARIANT_MAPPINGS[fetch_or_fallback(VARIANT_OPTIONS, variant, DEFAULT_VARIANT)]
+    )
+  end
+
+  def call
+    render(SnFilterable::BaseComponents::BaseComponent.new(**@arguments)) { content }
+  end
+end

data/app/components/sn_filterable/category_component.html.erb

@@ -0,0 +1,11 @@
+<%= content_tag :fieldset, class: "w-full text-xs lg:text-sm app-word-break",
+                "x-data": { open: @open }.to_json do %>
+  <button class="flex border-b justify-between w-full px-4 py-3 font-medium text-left text-gray-900 transition-colors hover:bg-gray-200 rounded-sm focus:outline-none focus-visible:ring focus-visible:ring-gray-500 focus-visible:ring-opacity-75" type="button" @click="open = !open">
+    <span><%= @title %></span>
+    <%= heroicon "chevron-down", options: { class: "transform w-5 h-5 text-gray-500 transition ease-out", ":class": "open && 'rotate-180'"} %>
+  </button>
+  <div class="pb-2 text-gray-500" x-show="open" x-cloak>
+    <%= filter %>
+    <%= content %>
+  </div>
+<% end %>

data/app/components/sn_filterable/category_component.rb

@@ -0,0 +1,18 @@
+require_relative "filter_category_component"
+
+module SnFilterable
+  # Renders a category to be displayed in the filtering sidebar/popup.
+  # Simple view component, logic to display filters should render a [:filter] (see [Filterable::FilterCategoryComponent])
+  class CategoryComponent < ViewComponent::Base
+    include Heroicon::Engine.helpers
+
+    renders_one :filter, SnFilterable::FilterCategoryComponent
+
+    # @param [String] title Optional, the title of the category, will default to the filter's title (if specified)
+    # @param [Boolean] open Optional, determines if the category should be opened by default
+    def initialize(title: nil, open: false)
+      @title = title
+      @open = open
+    end
+  end
+end

data/app/components/sn_filterable/chips_component.html.erb

@@ -0,0 +1,37 @@
+<% unless @known_filters.empty? %>
+  <div class="relative app-filter-chips-content bg-gray-50 -mx-8 mt-4" x-data="filteringChipContainer" x-init="updateSidebarGap()">
+    <div class="mx-auto py-3 px-4 flex items-center px-4 sm:px-6 lg:px-8">
+      <h3 class="sm:pr-0 text-xs font-semibold uppercase tracking-wide text-gray-500">
+        <span>Filters</span>
+        <span class="sr-only">, active</span>
+      </h3>
+
+      <div aria-hidden="true" class="w-px h-5 bg-gray-300 block ml-2 sm:ml-4"></div>
+
+      <div class="ml-2 sm:ml-4 flex-1">
+        <div class="app-filter-chips-container -m-1 flex flex-wrap items-center">
+          <% @known_filters.each do |filter| %>
+            <span class="app-filter-chip m-1 inline-flex rounded-full border border-gray-200 items-center py-1.5 pl-3 pr-2 text-xs sm:text-sm font-medium bg-white text-gray-900" x-data>
+              <span><%= filter[:name] %></span>
+              <%= content_tag :a,
+                              href: filter[:multi] ? remove_sub_filter_url(@filtered, filter[:parent], filter[:value], url: @url) : remove_filter_url(@filtered, filter[:parent], url: @url),
+                              class: "flex-shrink-0 ml-1 h-4 w-4 p-1 rounded-full inline-flex text-gray-400 hover:bg-gray-200 hover:text-gray-500",
+                              "x-data": "filteringChip(#{filter.to_json})",
+                              "@click": "$event.preventDefault(); onClick()" do %>
+                <span class="sr-only">Remove filter for Objects</span>
+                <svg class="h-2 w-2" stroke="currentColor" fill="none" viewBox="0 0 8 8">
+                  <path stroke-linecap="round" stroke-width="1.5" d="M1 1l6 6m0-6L1 7" />
+                </svg>
+              <% end %>
+            </span>
+          <% end %>
+        </div>
+      </div>
+      <div class="pl-2 sm:pl-6">
+        <%= link_to t("shared.filterable.clear_all"), clear_filter_url(@filtered, url: @url), class: "text-sm text-gray-500", "x-data": "filteringClear", "@click": "$event.preventDefault(); onClick()" %>
+      </div>
+    </div>
+  </div>
+<% else %>
+  <div class="hidden" x-data="filteringChipContainer" x-init="updateSidebarGap()"></div>
+<% end %>

data/app/components/sn_filterable/chips_component.rb

@@ -0,0 +1,78 @@
+module SnFilterable
+  # Handles rendering of the chips for the filters
+  class ChipsComponent < ViewComponent::Base
+    include FilteredHelper
+
+    # @param [Filtered] filtered The filtered instance
+    # @param [Array<Hash>] filters An array of the filters' info
+    # @param [String] url The base URL of where the filters are displayed
+    def initialize(filtered:, filters:, url:)
+      @filtered = filtered
+      @filters = filters
+      @url = url
+      @known_filters = parsed_filters
+    end
+
+    private
+
+    # Parses all the queries and builds a [Hash] array that contains info about each filter used
+    def parsed_filters
+      filters = []
+
+      @filtered.queries["filter"].each do |filter_name, filter_value|
+        filter = @filters.find { |x| x[:filter_name] == filter_name }
+        next if filter.nil?
+
+        if filter_value.is_a?(Array)
+          filter_value.each do |sub_filter|
+            value = parse_multi_filter(filter, sub_filter)
+
+            filters.append(value) if value.present?
+          end
+        else
+          value = parse_single_filter(filter, filter_value)
+
+          filters.append(value) if value.present?
+        end
+      end
+
+      filters
+    end
+
+    # Parses a value from filter that supports multiple values
+    #
+    # @param [Hash] filter The filter info
+    # @param [String] sub_filter_value The sub filter's value
+    # @return [Hash]
+    def parse_multi_filter(filter, sub_filter_value)
+      value = filter[:filters].find { |x| x[:value].to_s == sub_filter_value }
+
+      return nil if value.blank?
+
+      {
+        multi: true,
+        parent: filter[:filter_name],
+        name: value[:name],
+        value: sub_filter_value
+      }
+    end
+
+    # Parses a filter that supports a single value
+    #
+    # @param [Hash] filter The filter info
+    # @param [String] filter_value The filter's value
+    # @return [Hash]
+    def parse_single_filter(filter, filter_value)
+      value = filter[:filters].find { |x| x[:value].to_s == filter_value }
+
+      return nil if value.blank?
+
+      {
+        multi: false,
+        parent: filter[:filter_name],
+        name: value[:name],
+        value: filter_value
+      }
+    end
+  end
+end

data/app/components/sn_filterable/filter_button_component.html.erb

@@ -0,0 +1 @@
+<%= render(SnFilterable::BaseComponents::ButtonComponent.new("@click": "filtersPopupOpen = !filtersPopupOpen", "class": "after:content-[attr(data-active)] before:block", "data-active": @count)) { t("shared.filterable.view_filter_button") } %>

data/app/components/sn_filterable/filter_button_component.rb

@@ -0,0 +1,29 @@
+module SnFilterable
+  # Handles rendering of the `View filters` button for mobile layouts
+  class FilterButtonComponent < ViewComponent::Base
+    # @param [Filtered] filtered The filtered instance
+    # @param [Array<Hash>] filters An array of the filters' info
+    def initialize(filtered:, filters:)
+      @filtered = filtered
+      @filters = filters
+      @count = active_filter_count
+    end
+
+    private
+
+    # Generates the count for the button suffix
+    #
+    # @return [String] a string of format: ` (COUNT)` or nil if no filters applied
+    def active_filter_count
+      count = 0
+
+      @filtered.queries["filter"].each do |key, value|
+        count += (value.is_a?(Array) ? value.length : 1) if @filters.any? { |x| x[:filter_name] == key }
+      end
+
+      return nil if count.zero?
+
+      "\xA0(#{count})"
+    end
+  end
+end

data/app/components/sn_filterable/filter_category_component.html.erb

@@ -0,0 +1,32 @@
+<% @filter[:filters].each_with_index do |sub_filter, index| %>
+  <div class="relative flex items-start px-4 transition-colors hover:bg-gray-200 text-gray-700 hover:text-gray-900">
+    <div class="min-w-0 flex-1 flex-grow">
+      <%= content_tag :label, sub_filter[:name], class: "block py-2 pr-4 text-gray-600 select-none w-full cursor-pointer", for: "filter-#{@filter[:filter_name]}-#{index}" %>
+    </div>
+    <div class="my-2 flex items-center">
+      <% if @filter[:multi] %>
+        <%= content_tag :input, "",
+                        class: "focus:ring-purple-400 cursor-pointer h-5 w-5 text-purple-500 bg-purple-100 border-0 rounded",
+                        type: "checkbox",
+                        name: "filter[#{@filter[:filter_name]}][]",
+                        value: sub_filter[:value],
+                        id: "filter-#{@filter[:filter_name]}-#{index}",
+                        checked: sub_filter_checked?(sub_filter),
+                        "data-filter-name": @filter[:filter_name],
+                        "@click": "filteringForm.requestSubmit()"
+        %>
+      <% else %>
+        <%= content_tag :input, "",
+                        class: "focus:ring-purple-400 cursor-pointer h-5 w-5 text-purple-500 bg-purple-100 border-0",
+                        type: "radio",
+                        name: "filter[#{@filter[:filter_name]}]",
+                        value: sub_filter[:value],
+                        id: "filter-#{@filter[:filter_name]}-#{index}",
+                        checked: sub_filter_checked?(sub_filter),
+                        "data-filter-name": @filter[:filter_name],
+                        "@click": "filteringForm.requestSubmit()"
+        %>
+      <% end %>
+    </div>
+  </div>
+<% end %>

data/app/components/sn_filterable/filter_category_component.rb

@@ -0,0 +1,30 @@
+module SnFilterable
+  # Component for a filter's category for the filters sidebar
+  class FilterCategoryComponent < ViewComponent::Base
+    include Heroicon::Engine.helpers
+    include FilteredHelper
+
+    # @param [Filtered] filtered The filtered instance
+    # @param [Hash] filters The filter's info
+    def initialize(filtered:, filter:)
+      @filtered = filtered
+      @filter = filter
+    end
+
+    # Returns if this sub filter should be checked, denoting that the filter is active
+    #
+    # @param [String] sub_filter The sub filter's info
+    # @return [Boolean] True if the filter should be checked
+    def sub_filter_checked?(sub_filter)
+      filter_query_value = @filtered.queries.dig("filter", @filter[:filter_name])
+
+      return false if filter_query_value.blank?
+
+      if filter_query_value.is_a?(Array)
+        filter_query_value.include?((sub_filter[:value]).to_s)
+      else
+        filter_query_value == (sub_filter[:value]).to_s
+      end
+    end
+  end
+end