Merge pull request #319 from ontoportal-lirmm/feature/extract-form-in…

…put-components

Feature: Extract form input components

app/assets/stylesheets/components/nested_form.scss

@@ -8,7 +8,7 @@
 
 
 .nested-form-input-container  input:focus{
-  border: 1px solid #31B404 !important;
+  border: 1px solid var(--primary-color) !important;
 }
 
 .nested-form-input-container .delete{

app/components/chips_component.rb

@@ -1,6 +1,12 @@
 class ChipsComponent < ViewComponent::Base
-    def initialize(name:, value:)
+    def initialize(id: '', name:, value:, checked: false)
+        @id = id || name
         @name = name
         @value = value
+        @checked = checked
+    end
+
+    def checked?
+        @checked
     end
 end

app/components/chips_component/chips_component.html.haml

@@ -1,7 +1,7 @@
 .chips-container
   %div
-    %label{:for => "chips-#{@name}-check"}
-      %input{:id => "chips-#{@name}-check", :name => @name, :type => "checkbox", :value => @value}/
+    %label{:for => "chips-#{@id}-check"}
+      %input{:id => "chips-#{@id}-check", :name => @name, :type => "checkbox", :value => @value, checked: checked?}
       %span
         %svg.chips-check-icon{:fill => "none", :height => "8", :viewbox => "0 0 10 8", :width => "10", :xmlns => "http://www.w3.org/2000/svg"}
           %path{:d => "M9.76764 0.232287C9.45824 -0.0775267 8.95582 -0.0773313 8.646 0.232287L3.59787 5.28062L1.35419 3.03696C1.04438 2.72714 0.542174 2.72714 0.23236 3.03696C-0.0774534 3.34677 -0.0774534 3.84897 0.23236 4.15879L3.03684 6.96326C3.19165 7.11807 3.39464 7.19567 3.59765 7.19567C3.80067 7.19567 4.00386 7.11827 4.15867 6.96326L9.76764 1.3541C10.0775 1.0445 10.0775 0.542081 9.76764 0.232287Z"}

app/components/input/date_component.rb

@@ -1,7 +1,11 @@
 # frozen_string_literal: true
 
-class Input::DateComponent < InputFieldComponent
+class Input::DateComponent < Input::InputFieldComponent
   def initialize(label: '', name:, value: Date.today, placeholder: '', error_message: '', helper_text: '')
     super(label: label, name: name, value: value,  placeholder: placeholder, error_message: error_message, helper_text: helper_text)
   end
+
+  def call
+    render Input::InputFieldComponent.new(label: @label, name: @name, value: @value,  placeholder: @placeholder, error_message: @error_message, helper_text: @helper_text, type: 'date')
+  end
 end

app/components/input/email_component.rb

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+class Input::EmailComponent < Input::InputFieldComponent
+  def initialize(label: '', name:, value: nil, placeholder: '', error_message: '', helper_text: '')
+    super(label: label, name: name, value: value,  placeholder: placeholder, error_message: error_message, helper_text: helper_text)
+  end
+
+  def call
+    render Input::InputFieldComponent.new(label: @label, name: @name, value: @value,  placeholder: @placeholder, error_message: @error_message, helper_text: @helper_text, type: "email")
+  end
+end

app/components/input_field_component.rb → app/components/input/input_field_component.rb

@@ -1,4 +1,4 @@
-class InputFieldComponent < ViewComponent::Base
+class Input::InputFieldComponent < ViewComponent::Base
     def initialize(label: "" , name:, value: 'Syphax', type: 'text', placeholder: "", error_message: "", helper_text: "")
         @label = label
         @name = name

app/components/input_field_component/input_field_component.html.haml → app/components/input/input_field_component/input_field_component.html.haml

@@ -20,9 +20,9 @@
 
 
 
-
 
-
 
 
-
+
+
+

app/components/input/password_component.rb

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+class Input::PasswordComponent < Input::InputFieldComponent
+  def initialize(label: '', name:, value: nil, placeholder: '', error_message: '', helper_text: '')
+    super(label: label, name: name, value: value,  placeholder: placeholder, error_message: error_message, helper_text: helper_text)
+  end
+
+  def call
+    render Input::InputFieldComponent.new(label: @label, name: @name, value: @value,  placeholder: @placeholder, error_message: @error_message, helper_text: @helper_text, type: "password")
+  end
+end

app/components/input/select_component.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-class Input::SelectComponent < InputFieldComponent
+class Input::SelectComponent < Input::InputFieldComponent
 
   def initialize(id: nil, label: '', name:, value: [], selected: '', placeholder: '', error_message: '', helper_text: '', multiple: false, open_to_add_values: false)
     super(label: label, name: name, value: value,  placeholder: placeholder, error_message: error_message, helper_text: helper_text)

app/components/input/select_component/select_component.html.haml

@@ -1,2 +1,2 @@
-= render InputFieldComponent.new(name: @name, error_message: @error_message, helper_text: @helper_text) do
+= render Input::InputFieldComponent.new(name: @name, error_message: @error_message, helper_text: @helper_text, label: @label) do
   = render SelectInputComponent.new(id: @id, name: @name, values: @values , selected: @selected , multiple: @multiple, open_to_add_values: @open_to_add_values )

app/components/input/text_area_component.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-class Input::TextAreaComponent < InputFieldComponent
+class Input::TextAreaComponent < Input::InputFieldComponent
   def initialize(label: '', name:, value: nil, placeholder: '', error_message: '', helper_text: '', rows: "5")
     super(label: label, name: name, value: value,  placeholder: placeholder, error_message: error_message, helper_text: helper_text)
     @rows = rows

app/components/input/text_area_component/text_area_component.html.haml

@@ -1,2 +1,3 @@
-= render InputFieldComponent.new(label: @label, name: @name, value: @value,  placeholder: @placeholder, error_message: @error_message, helper_text: @helper_text) do
-  %textarea.input-field-component{name: @name, rows: @rows, placeholder: @placeholder, style: error_style, value: @value}
+= render Input::InputFieldComponent.new(label: @label, name: @name, value: @value,  placeholder: @placeholder, error_message: @error_message, helper_text: @helper_text) do
+  %textarea.input-field-component{name: @name, rows: @rows, placeholder: @placeholder, style: error_style}
+    = @value

app/components/input/text_input_component.rb

@@ -1,7 +1,11 @@
 # frozen_string_literal: true
 
-class Input::TextInputComponent < InputFieldComponent
+class Input::TextInputComponent < Input::InputFieldComponent
   def initialize(label: '', name:, value: nil, placeholder: '', error_message: '', helper_text: '')
     super(label: label, name: name, value: value,  placeholder: placeholder, error_message: error_message, helper_text: helper_text)
   end
+
+  def call
+    render Input::InputFieldComponent.new(label: @label, name: @name, value: @value,  placeholder: @placeholder, error_message: @error_message, helper_text: @helper_text, type: @type)
+  end
 end

app/components/input/url_component.rb

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+class Input::UrlComponent < Input::InputFieldComponent
+  def initialize(label: '', name:, value: nil, placeholder: '', error_message: '', helper_text: '')
+    super(label: label, name: name, value: value,  placeholder: placeholder, error_message: error_message, helper_text: helper_text)
+  end
+
+  def call
+    render Input::InputFieldComponent.new(label: @label, name: @name, value: @value,  placeholder: @placeholder, error_message: @error_message, helper_text: @helper_text, type: "url")
+  end
+end

app/components/nested_form_inputs_component/nested_form_inputs_component.html.haml

@@ -6,6 +6,7 @@
       %div.d-flex.justify-content-end{style: 'width: 10%'}
         %div.delete{data: {action:"click->nested-form#remove"}}
           = inline_svg 'icons/delete.svg'
+
   %div.titles
     = header
   %div.d-none
@@ -18,6 +19,14 @@
         %div.delete{data: {action:"click->nested-form#remove"}}
           = inline_svg 'icons/delete.svg'
 
+  - if rows.empty?
+    %div.d-flex.align-items-center.nested-form-wrapper.my-1{'data-new-record': 'true'}
+      %div{style: 'width: 90%'}
+        = template
+      %div.d-flex.justify-content-end{style: 'width: 10%'}
+        %div.delete{data: {action:"click->nested-form#remove"}}
+          = inline_svg 'icons/delete.svg'
+
   %div{'data-nested-form-target': "target"}
   %div.add-another-object{data: {action:"click->nested-form#add"}}
     = inline_svg 'icons/plus.svg'

app/components/select_input_component.rb

@@ -4,19 +4,35 @@ class SelectInputComponent < ViewComponent::Base
 
   def initialize(id:, name:, values:, selected:, multiple: false, open_to_add_values: true)
     super
-    @id = id
+    @id = id || ""
     @name = name
     @values = values
     @selected = selected
     @multiple = multiple
     @open_to_add_values = open_to_add_values
   end
+
+  def call 
+    select_input_tag(@id, @values, @selected, multiple: @multiple, open_to_add_values: @open_to_add_values)
+  end
+
+  private
+
+  def select_input_tag(id, values, selected, options = {})
+    multiple = options[:multiple] || false
+    open_to_add_values = options[:open_to_add_values] || false
 
-  def options_values
-    if @selected.nil? || @selected.empty?
-      @selected = 0
-      @values.unshift('')
-    end
-    options_for_select(@values, @selected)
+    select_html_options = {
+      id: "select_#{id}",
+      autocomplete: "off",
+      multiple: multiple,
+      data: {
+        controller: "select-input",
+        'select-input-multiple-value': multiple,
+        'select-input-open-add-value': open_to_add_values
+      }
+    }
+    #binding.pry
+    select_tag(id, options_for_select(values, selected), select_html_options)
   end
 end

app/components/select_input_component/select_input_component_controller.js

@@ -2,12 +2,16 @@ import { Controller } from "@hotwired/stimulus"
 import TomSelect from "tom-select"
 
 export default class extends Controller {
+    static values = {
+        multiple: Boolean,
+        openAdd : Boolean
+    }
     connect() {
         let myOptions = {}
-        if (this.data.get("multipleValue")) {
+        if (this.multipleValue) {
             myOptions['plugins'] = ['remove_button'];
         }
-        if (this.data.get("openAddValue")) {
+        if (this.openAddValue) {
             myOptions['create'] = true;
         }
         new TomSelect(this.element, myOptions);

test/components/previews/input/input_field_component_preview.rb

@@ -0,0 +1,90 @@
+# frozen_string_literal: true
+
+class Input::InputFieldComponentPreview < ViewComponent::Preview
+
+  # This is a date input field:
+  # - To use it without a label: don't give a value to the param label or leave it empty.
+  # - To put it in error state: define the param error_message with the error message you want to be displayed.
+  # - To give it a helper text (a text displayed under the input field): define the param helper_text with the helper text you want to be displayed.
+  # @param label text
+  # @param error_message text
+  # @param helper_text text
+
+  def date(label: "Label", placeholder: "", error_message: "", helper_text: "")
+    render Input::DateComponent.new(label: label, name: "name", placeholder: placeholder, error_message: error_message, helper_text: helper_text)
+  end
+
+
+  # This is a url input field:
+  # - To use it without a label: don't give a value to the param label or leave it empty.
+  # - To put it in error state: define the param error_message with the error message you want to be displayed.
+  # - To give it a helper text (a text displayed under the input field): define the param helper_text with the helper text you want to be displayed.
+  # @param label text
+  # @param error_message text
+  # @param helper_text text
+
+  def email(label: "Label", placeholder: "", error_message: "", helper_text: "")
+    render Input::EmailComponent.new(label: label, name: "name", placeholder: placeholder, error_message: error_message, helper_text: helper_text)
+  end
+
+
+  def file
+    render Input::FileInputComponent.new(name: "file")
+  end
+
+
+  # This is a url input field:
+  # - To use it without a label: don't give a value to the param label or leave it empty.
+  # - To put it in error state: define the param error_message with the error message you want to be displayed.
+  # - To give it a helper text (a text displayed under the input field): define the param helper_text with the helper text you want to be displayed.
+  # @param label text
+  # @param error_message text
+  # @param helper_text text
+
+  def password(label: "Label", placeholder: "", error_message: "", helper_text: "")
+    render Input::PasswordComponent.new(label: label, name: "name", placeholder: placeholder, error_message: error_message, helper_text: helper_text)
+  end
+
+
+  # This is a url input field:
+  # - To use it without a label: don't give a value to the param label or leave it empty.
+  # - To put it in error state: define the param error_message with the error message you want to be displayed.
+  # - To give it a helper text (a text displayed under the input field): define the param helper_text with the helper text you want to be displayed.
+  # @param label text
+  # @param error_message text
+  # @param helper_text text
+
+  def url(label: "Label", placeholder: "", error_message: "", helper_text: "")
+    render Input::UrlComponent.new(label: label, name: "name", placeholder: placeholder, error_message: error_message, helper_text: helper_text)
+  end
+
+  # This is a text input field:
+  # - To use it without a label: don't give a value to the param label or leave it empty.
+  # - To give it a hint (placeholder): define the param hint with the hind you want to be displayed.
+  # - To put it in error state: define the param error_message with the error message you want to be displayed.
+  # - To give it a helper text (a text displayed under the input field): define the param helper_text with the helper text you want to be displayed.
+  # @param label text
+  # @param placeholder text
+  # @param error_message text
+  # @param helper_text text
+
+  def text(label: "Label", placeholder: "", error_message: "", helper_text: "")
+    render Input::TextInputComponent.new(label: label, name: "name", placeholder: placeholder, error_message: error_message, helper_text: helper_text)
+  end
+
+  # This is a textarea field:
+  # - To use it without a label: don't give a value to the param label or leave it empty.
+  # - To give it a hint (placeholder): define the param hint with the hind you want to be displayed.
+  # - To put it in error state: define the param error_message with the error message you want to be displayed.
+  # - To give it a helper text (a text displayed under the input field): define the param helper_text with the helper text you want to be displayed.
+
+  # @param label text
+  # @param placeholder text
+  # @param error_message text
+  # @param helper_text text
+  # @param rows number
+
+  def text_area(label: "Label", placeholder: "", error_message: "", helper_text: "", rows: 5)
+    render Input::TextAreaComponent.new(label: label, name: "name",value: '', placeholder: placeholder, error_message: error_message, helper_text: helper_text, rows: rows)
+  end
+end