Fix: MultiLingual selectors to have a more clear usage (#407)

* update dropdown component to have a selected item

* update select input component to add searchable and displayField options

* update language field component to au generate language name using ISO

* update platform language  to not use JS and add tooltip

* update search language selector to add a tooltip and show more languages

* update content language selector to have a tooltip and a button to edit

app/assets/stylesheets/bioportal.scss

@@ -50,6 +50,7 @@ body{
 }
 
 .disabled-link{
+  pointer-events: none;
   color: #888888 !important;
   span{
     opacity: 0.6;

app/assets/stylesheets/components/dropdown.scss

@@ -14,4 +14,8 @@
   border-radius: 5px;
   margin-bottom: 20px;
   margin-top: 20px;
+}
+
+.dropdown-item-selected {
+  background-color: var(--light-color) !important;
 }

app/assets/stylesheets/components/index.scss

@@ -26,3 +26,4 @@
 @import "image";
 @import "alert";
 @import "progress_pages";
+@import "select";

app/assets/stylesheets/components/input_field.scss

@@ -34,62 +34,9 @@
   margin-top: 5px;
 }
 
-.ts-control {
-  padding: 12px;
-  border-radius: 5px;
-  border-color: #BDBDBD;
-}
-
-.ts-dropdown-content .option {
-  padding: 12px;
-}
-
-.ts-dropdown .active {
-  background-color: #f8f8f8;
-
-}
-
-.ts-dropdown {
-  margin: 0;
-  color: #666666;
-}
 
 .chosen-container {
   padding: 0;
   border-radius: 5px;
 }
 
-.ts-wrapper.single .ts-control:after {
-  border-color: #343a40 transparent transparent;
-  border-style: solid;
-  border-width: 5px 5px 0;
-  content: " ";
-  display: block;
-  height: 0;
-  margin-top: -3px;
-  position: absolute;
-  right: calc(0.75rem + 5px);
-  top: 50%;
-  width: 0;
-}
-
-.ts-wrapper.multi .ts-control>div{
-  border-radius: 5px;
-  font-size: 11px;
-  padding: 2px 0 4px 6px;
-  color: #888888;
-}
-
-.ts-wrapper.plugin-remove_button:not(.rtl) .item .remove{
-  border-left: none;
-  color: #888888 !important;
-  margin-left: 0;
-}
-
-.ts-wrapper.plugin-remove_button .item .remove:hover {
-  background: unset;
-}
-
-.has-items .ts-control > input {
-  width: unset !important;
-}

app/assets/stylesheets/components/select.scss

@@ -0,0 +1,60 @@
+.ts-wrapper{
+    display: flex;
+}
+
+.ts-control {
+    padding: 12px;
+    border-radius: 5px;
+}
+
+.ts-dropdown-content .option {
+    padding: 12px;
+}
+
+.ts-dropdown .active {
+    background-color: #f8f8f8;
+}
+
+.ts-dropdown {
+    flex: 1 1 auto;
+    min-width: 9rem;
+    margin: 0;
+    color: #666666;
+}
+
+
+.ts-wrapper.single .ts-control:after {
+    border-color: #343a40 transparent transparent;
+    border-style: solid;
+    border-width: 5px 5px 0;
+    content: " ";
+    display: block;
+    height: 0;
+    margin-top: -3px;
+    position: absolute;
+    right: calc(0.5rem);
+    top: 50%;
+    width: 0;
+}
+
+.ts-wrapper.multi .ts-control>div{
+    border-radius: 5px;
+    font-size: 11px;
+    padding: 2px 0 4px 6px;
+    color: #888888;
+}
+
+.ts-wrapper.plugin-remove_button:not(.rtl) .item .remove{
+    border-left: none;
+    color: #888888 !important;
+    margin-left: 0;
+}
+
+.ts-wrapper.plugin-remove_button .item .remove:hover {
+    background: unset;
+}
+
+.has-items .ts-control > input {
+    width: unset !important;
+}
+

app/assets/stylesheets/nav_bar.scss

@@ -96,15 +96,21 @@
 
 }
 
-.nav-language{
-    background-color: transparent;
-    width: 47px;
-    color: white;
-    border: none;
-    outline: none;
-    cursor: pointer;
+.nav-language {
+    width: 47px !important;
+    .ts-control{
+        background-color: transparent;
+        color: white;
+        border: none;
+        outline: none;
+        cursor: pointer;
+    }
 
+    &.single.input-active .ts-control{
+        background: transparent !important;
+    }
 }
+
 .nav-language option{
     background-color: white;
     color: black;

app/assets/stylesheets/ontologies.scss

@@ -284,3 +284,12 @@ $widget-table-border-color: #EFEFEF;
   flex-direction: row;
 }
 
+
+#select_content_language{
+  & ~ .ts-wrapper .ts-control{
+    padding: 6px 8px !important;
+    .item{
+      margin-right: 15px;
+    }
+  }
+}

app/components/dropdown_section_button_component.rb

@@ -5,9 +5,10 @@ class DropdownSectionButtonComponent < ViewComponent::Base
   renders_one :header
   renders_many :items
 
-  def initialize(divide: true)
+  def initialize(divide: true, selected_index: nil)
     super
     @divide = divide
+    @selected = selected_index
   end
 
   def show_divider?

app/components/dropdown_section_button_component/dropdown_section_button_component.html.haml

@@ -2,6 +2,6 @@
   %div.dropdown-divider
 - if header?
   %h6.dropdown-header= header
-- items.each do |i|
-  %span.dropdown-item
-    = i
+- items.each_with_index do |text,  index|
+  %span.dropdown-item{class: index.eql?(@selected) ? 'dropdown-item-selected' : ''}
+    = text

app/components/input/language_selector_component.rb

@@ -2,25 +2,34 @@
 
 class Input::LanguageSelectorComponent < ViewComponent::Base
 
-  def initialize(languages:, selected: nil,  id: '', name: '' )
+  def initialize(languages:, selected: nil,  id: '', name: '' , enable_all: false, **html_options)
     super
     @languages = languages
     @id = id
-    @name = languages
+    @name = name
     @selected = selected
+    @data = html_options[:data] || {}
+    @enable_all = enable_all
+    @html_options = html_options
   end
 
-  def languages_options
-    values = [['All languages', 'all']]
+  def languages
+    values = []
+    values = [["<div>#{render(LanguageFieldComponent.new(label: 'All languages', icon: 'icons/earth.svg', value: 'en'))}</div>", 'all']] if @enable_all
 
     @languages.each do |key, label|
-      option = "<div>#{render(LanguageFieldComponent.new(value: key.to_s.downcase, label: label))}</div>"
+      option = "<div>#{render(LanguageFieldComponent.new(value: key.to_s.downcase, label: label, auto_label: true))}</div>"
       values += [[option, key.to_s.downcase]]
     end
     values
   end
 
   def call
-    render SelectInputComponent.new(id: @id, name: @name, values: languages_options, selected: @selected, placeholder: 'Select a language')
+    render SelectInputComponent.new(id: @id, name: @name, values: languages,
+                                    selected: @selected,
+                                    data: @data,
+                                    required: true,
+                                    open_to_add_values: false,
+                                    placeholder: 'Select a language', **@html_options)
   end
 end

app/components/language_field_component.rb

@@ -5,15 +5,35 @@ class LanguageFieldComponent < ViewComponent::Base
 
   include FlagIconsRails::Rails::ViewHelpers
 
-  def initialize(value:, label: nil)
+  def initialize(value:, label: nil, auto_label: false, icon: nil)
     super
     @value = value
-    @lang_code = value&.is_a?(String) ? ISO_639.find(value.split('/').last)&.alpha2 : nil
+    @lang_code = nil
     @label = label
+    @icon = icon
+
+    iso = ISO_639.find(value.to_s.split('/').last)
+    if iso
+      @lang_code = iso.alpha2
+      @label ||= iso.english_name if auto_label
+    end
   end
 
   def lang_code
-    @lang_code = 'gb' if @lang_code.eql?('en')
+    case @lang_code
+    when 'en'
+      @lang_code = 'gb'
+    when 'ar'
+      @lang_code = 'sa'
+    when 'hi'
+      @lang_code = 'in'
+    when 'ur'
+      @lang_code =  'pk'
+    when 'zh'
+      @lang_code =  'cn'
+    when 'ja'
+      @lang_code = 'jp'
+    end
     @lang_code
   end
 

app/components/language_field_component/language_field_component.html.haml

@@ -1,6 +1,6 @@
 - if @lang_code
   .d-flex.align-items-center
-    = flag_icon(lang_code)
+    = @icon ? inline_svg_tag(@icon, width: "17px", height: "17px") : flag_icon(lang_code)
     - if @label
       %div.ml-1
         = @label

app/components/select_input_component.rb

@@ -2,7 +2,7 @@
 
 class SelectInputComponent < ViewComponent::Base
 
-  def initialize(id:, name:, values:, selected: nil, multiple: false, open_to_add_values: false, required: false, data: {}, placeholder: '')
+  def initialize(id:, name:, values:, selected: nil, multiple: false, open_to_add_values: false, required: false, data: {}, placeholder: '', **html_options)
     super
     @id = id || ''
     @name = name
@@ -13,6 +13,7 @@ def initialize(id:, name:, values:, selected: nil, multiple: false, open_to_add_
     @placeholder = placeholder
     @data = data
     @required = required
+    @html_options = html_options
   end
 
   def call
@@ -39,8 +40,11 @@ def select_input_tag(id, name, values, selected, options = {})
       placeholder: placeholder,
       autocomplete: 'off',
       multiple: multiple,
-      data: data
-    }
+      data: data,
+    }.merge(@html_options)
+
+    select_html_options[:style] = "#{select_html_options[:style]}; visibility: hidden"
+
     select_tag(name, options_for_select(values, selected), select_html_options)
 
   end