Merge pull request #288 from ontoportal-lirmm/feature/add-upload-onto…

…logy-components-to-lookbook

Feature: Add form inputs components to lookbook

app/assets/stylesheets/application.css.scss.erb

@@ -41,7 +41,6 @@
 @import "ontolobridge";
 @import "fair_assement";
 @import "instances_table";
-@import "file_uploader";
 @import "register";
 @import "lostpassword";
 @import "flatpickr/dist/themes/light";

app/assets/stylesheets/components/file_input_loader.scss

@@ -0,0 +1,54 @@
+.file_uploader {
+    color: #D7D7EF;
+    font-family: 'Lato', sans-serif;
+    border: 1px dashed #CFCFCF;
+    border-radius: 5px;
+}
+
+.file-message {
+    display: flex;
+    margin-top: 10px;
+    font-size: 12px;
+    color: #888888;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.file_uploader>h2 {
+    margin: 50px 0;
+}
+
+.file-drop-area {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    padding: 25px;
+    transition: 0.2s;
+    position: relative;
+}
+
+.choose-file-button {
+    flex-shrink: 0;
+    background-color: rgba(255, 255, 255, 0.04);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: 3px;
+    padding: 8px 15px;
+    margin-right: 10px;
+    font-size: 12px;
+    text-transform: uppercase;
+}
+
+.file-input {
+    height: 100%;
+    width: 100%;
+    cursor: pointer;
+    opacity: 0;
+    position: absolute;
+}
+
+.file-drop-area svg path {
+    fill: #CECECE;
+}

app/assets/stylesheets/components/index.scss

@@ -4,6 +4,8 @@
 @import 'chip_button';
 @import 'rounded_button';
 @import 'summary_section';
-@import 'text_area_field';
 @import 'dropdown';
-@import 'field_container';
+@import 'field_container';
+@import 'input_field';
+@import 'file_input_loader';
+@import 'text_area_field';

app/assets/stylesheets/components/input_field.scss

@@ -0,0 +1,30 @@
+.input-field-component{
+    width: 100%;
+    font-size: 13px;
+    padding: 10px;
+    border: 1px solid #BDBDBD;
+    border-radius: 5px;
+    outline: none;
+    resize: none;
+}
+
+.input-field-component:focus{
+    border: 1px solid var(--primary-color);
+}
+
+.text-input-label{
+    font-size: 12px;
+    color: #666666;
+    margin-bottom: 5px;
+}
+
+.text-input-error-text{
+    font-size: 12px;
+    color: var(--error-color)
+}
+
+.text-input-helper-text{
+    font-size: 12px;
+    color: #666666;
+    margin-top: 5px;
+}

app/assets/stylesheets/components/text_area_field.scss

@@ -1,14 +1,14 @@
-.text-content{
-  overflow: hidden;
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: var(--read-more-line-clamp, 5);
+.text-content {
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: var(--read-more-line-clamp, 5);
 }
 
 
 .see_more_text {
-  color: var(--primary-color);
-  font-size: 15px;
-  margin-top: 10px;
-  text-align: end;
+    color: var(--primary-color);
+    font-size: 15px;
+    margin-top: 10px;
+    text-align: end;
 }

app/assets/stylesheets/theme-variables.scss.erb

@@ -7,28 +7,38 @@
             --hover-color: #40C811;
             --secondary-color: #ffc107;
             --light-color: #F1FAED;
+            --error-color: #EB4335;
         }
     <% when "stageportal" %>
         :root{
             --primary-color: #76A7CC;
             --hover-color: #6B96B7;
             --secondary-color: #ffc107;
             --light-color: #F1F6FA;
+            --error-color: #EB4335;
         }
     <% when "bioportal" %>
         :root{
             --primary-color: #76A7CC;
             --hover-color: #6B96B7;
             --secondary-color: #ffc107;
             --light-color: #F1F6FA;
+            --error-color: #EB4335;
         }
     <% when "ontoportal" %>
         :root{
             --primary-color: #6E98A2;
             --hover-color: #7BABB6;
             --secondary-color: #ffc107;
             --light-color: #F0F5F6;
+            --error-color: #EB4335;
         }
     <%# Here to add a new theme ... %>
     <% end %>
 <% end %>
+
+
+
+
+
+

app/components/form/date_component.rb

@@ -0,0 +1,7 @@
+# frozen_string_literal: true
+
+class Form::DateComponent < 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
+end

app/components/form/date_component/date_component.html.haml

@@ -0,0 +1 @@
+= render InputFieldComponent.new(label: @label, name: @name, value: @value,  placeholder: @placeholder, error_message: @error_message, helper_text: @helper_text, type: 'date')

app/components/file_input_loader_component.rb → app/components/form/file_input_component.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-class FileInputLoaderComponent < ViewComponent::Base
+class Form::FileInputComponent < ViewComponent::Base
   def initialize(name:, html_options: '')
     @name = name
     @html_options = html_options

app/components/form/file_input_component/file_input_component.html.haml

@@ -0,0 +1,5 @@
+.file_uploader{data: {controller: "file-input"}}
+  .file-drop-area.w-100
+    = inline_svg_tag "upload-file.svg"
+    %span.file-message{data:{'file-input': {target: 'message'}}} Drop your file here or, browse files on your device.
+    = file_field_tag @name, class: 'file-input', data:{'file-input-target': 'input', action: 'file-input#updateMessage'}

app/components/form/select_component.rb

@@ -0,0 +1,13 @@
+# frozen_string_literal: true
+
+class Form::SelectComponent < 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)
+    @values = value
+    @selected = selected
+    @open_to_add_values = open_to_add_values
+    @multiple = multiple
+    @id = id
+  end
+end

app/components/form/select_component/select_component.html.haml

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

app/components/form/text_area_component.rb

@@ -0,0 +1,8 @@
+# frozen_string_literal: true
+
+class Form::TextAreaComponent < 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
+  end
+end

app/components/form/text_area_component/text_area_component.html.haml

@@ -0,0 +1,2 @@
+= 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}

app/components/form/text_input_component.rb

@@ -0,0 +1,7 @@
+# frozen_string_literal: true
+
+class Form::TextInputComponent < 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
+end

app/components/form/text_input_component/text_input_component.html.haml

@@ -0,0 +1 @@
+= render InputFieldComponent.new(label: @label, name: @name, value: @value,  placeholder: @placeholder, error_message: @error_message, helper_text: @helper_text, type: 'text')

app/components/input_field_component.rb

@@ -0,0 +1,30 @@
+class InputFieldComponent < ViewComponent::Base
+    def initialize(label: "" , name:, value: 'Syphax', type: 'text', placeholder: "", error_message: "", helper_text: "")
+        @label = label
+        @name = name
+        @placeholder  = placeholder
+        @error_message = error_message
+        @helper_text = helper_text
+        @value = value
+        @type = type
+    end
+
+
+    def error_style
+        "border-color: var(--error-color);" if error?
+    end
+
+    def error?
+        !@error_message.empty?
+    end
+
+    def help?
+        !@helper_text.empty?
+    end
+
+    def label?
+        !@label.empty?
+    end
+end
+
+

app/components/input_field_component/input_field_component.html.haml

@@ -0,0 +1,28 @@
+%div
+  - if label?
+    .text-input-label
+      = @label
+
+  - if content
+    = content
+  - else
+    %input.input-field-component.text-input{name: @name, type: @type, placeholder: @placeholder, style: error_style, value: @value}
+
+
+
+  - if error?
+    .text-input-error-text
+      = @error_message
+  - if help?
+    .text-input-helper-text
+      = @helper_text
+
+
+
+
+
+
+
+
+
+

app/components/select_input_component.rb

@@ -2,7 +2,7 @@
 
 class SelectInputComponent < ViewComponent::Base
 
-  def initialize(id:, name:, values:, selected:, multiple: false, open_to_add_values: false)
+  def initialize(id:, name:, values:, selected:, multiple: false, open_to_add_values: true)
     super
     @id = id
     @name = name

app/components/select_input_component/select_input_component.html.haml

@@ -1,7 +1,7 @@
 %div{:data => { controller: "select-input", 'select-input': {'multiple-value': @multiple.to_s}}}
   = select_tag(@name, options_values, { multiple: @multiple, class: "form-control", id: "select_#{@id}", data: { action: "select-input#toggleOtherValue", "select-input-target": "selectedValues" } })
 
-  %div.d-flex.mt-1{style: "display:#{@open_to_add_values ? 'none !important;' : 'block;'}"}
+  %div.d-flex.mt-1{style: "display:#{!@open_to_add_values ? 'none !important;' : 'block;'}"}
     = text_field_tag("add_#{@id}", nil, :style => "margin-right: 1em;width: 16em;display: none;", :placeholder => "Or provide the value",
     data: {action: "keydown.enter->select-input#addValue",  "select-input-target": "inputValueField"}, class: 'metadataInput form-control form-control-sm')
 

app/components/text_area_field_component.rb

@@ -9,4 +9,4 @@ def initialize(value: , see_more_text:'See more...' , see_less_text: 'See less..
     @see_less_text = see_less_text
   end
 
-end
+end