From 0ccc9edc765940314938df18d0c885339c862a62 Mon Sep 17 00:00:00 2001 From: Bilel Kihal <61744974+Bilelkihal@users.noreply.github.com> Date: Fri, 28 Jul 2023 14:23:10 +0000 Subject: [PATCH 1/6] install tom select --- package.json | 3 ++- yarn.lock | 20 ++++++++++++++++++++ 2 files changed, 22 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index dbe55880b..94282d913 100644 --- a/package.json +++ b/package.json @@ -9,7 +9,8 @@ "split.js": "^1.6.5", "stimulus-flatpickr": "^3.0.0-0", "stimulus-rails-nested-form": "^4.0.0", - "stimulus-read-more": "^4.1.0" + "stimulus-read-more": "^4.1.0", + "tom-select": "^2.2.2" }, "scripts": { "build": "esbuild app/javascript/*.* --bundle --sourcemap --outdir=app/assets/builds" diff --git a/yarn.lock b/yarn.lock index d1dfe0e17..8d77bcaa5 100644 --- a/yarn.lock +++ b/yarn.lock @@ -25,6 +25,18 @@ resolved "https://registry.yarnpkg.com/@hotwired/turbo/-/turbo-7.2.4.tgz#0d35541be32cfae3b4f78c6ab9138f5b21f28a21" integrity sha512-c3xlOroHp/cCZHDOuLp6uzQYEbvXBUVaal0puXoGJ9M8L/KHwZ3hQozD4dVeSN9msHWLxxtmPT1TlCN7gFhj4w== +"@orchidjs/sifter@^1.0.3": + version "1.0.3" + resolved "https://registry.yarnpkg.com/@orchidjs/sifter/-/sifter-1.0.3.tgz#43f42519472282eb632d0a1589184f044d64129b" + integrity sha512-zCZbwKegHytfsPm8Amcfh7v/4vHqTAaOu6xFswBYcn8nznBOuseu6COB2ON7ez0tFV0mKL0nRNnCiZZA+lU9/g== + dependencies: + "@orchidjs/unicode-variants" "^1.0.4" + +"@orchidjs/unicode-variants@^1.0.4": + version "1.0.4" + resolved "https://registry.yarnpkg.com/@orchidjs/unicode-variants/-/unicode-variants-1.0.4.tgz#6d2f812e3b19545bba2d81caffff1204de9a6a58" + integrity sha512-NvVBRnZNE+dugiXERFsET1JlKZfM5lJDEpSMilKW4bToYJ7pxf0Zne78xyXB2ny2c2aHfJ6WLnz1AaTNHAmQeQ== + "@rails/actioncable@^7.0": version "7.0.4" resolved "https://registry.yarnpkg.com/@rails/actioncable/-/actioncable-7.0.4.tgz#70a3ca56809f7aaabb80af2f9c01ae51e1a8ed41" @@ -183,3 +195,11 @@ stimulus-read-more@^4.1.0: version "4.1.0" resolved "https://registry.yarnpkg.com/stimulus-read-more/-/stimulus-read-more-4.1.0.tgz#f34efb2dcb33fd091936d84c569937bc100506c8" integrity sha512-SJyCJqZrhDSKpfrepnhStBaxtyv6Jnvr+b84GDg3l+/BzL5HaFLYmc6QkSNCeR6y0x+Zw7lwKuzv+XzyAm1KzQ== + +tom-select@^2.2.2: + version "2.2.2" + resolved "https://registry.yarnpkg.com/tom-select/-/tom-select-2.2.2.tgz#8e5f9296e6d80254feccb57f0986bd6c44d126e2" + integrity sha512-igGah1yY6yhrnN2h/Ky8I5muw/nE/YQxIsEZoYu5qaA4bsRibvKto3s8QZZosKpOd0uO8fNYhRfAwgHB4IAYew== + dependencies: + "@orchidjs/sifter" "^1.0.3" + "@orchidjs/unicode-variants" "^1.0.4" From 981605a21b28790ec2d8fe69641c8f634fcbed78 Mon Sep 17 00:00:00 2001 From: Bilel Kihal <61744974+Bilelkihal@users.noreply.github.com> Date: Fri, 28 Jul 2023 14:50:14 +0000 Subject: [PATCH 2/6] update select component with tom select --- .../stylesheets/application.css.scss.erb | 1 + .../stylesheets/components/input_field.scss | 49 ++++++- .../select_input_component.html.haml | 16 +- .../select_input_component_controller.js | 137 +----------------- 4 files changed, 59 insertions(+), 144 deletions(-) diff --git a/app/assets/stylesheets/application.css.scss.erb b/app/assets/stylesheets/application.css.scss.erb index 03650e79d..8e531e211 100644 --- a/app/assets/stylesheets/application.css.scss.erb +++ b/app/assets/stylesheets/application.css.scss.erb @@ -44,6 +44,7 @@ @import "register"; @import "lostpassword"; @import "flatpickr/dist/themes/light"; +@import "tom-select/dist/scss/tom-select"; @import "feedback"; @import "login"; @import "components/index"; diff --git a/app/assets/stylesheets/components/input_field.scss b/app/assets/stylesheets/components/input_field.scss index 2ca9a7e74..9a5ad99c9 100644 --- a/app/assets/stylesheets/components/input_field.scss +++ b/app/assets/stylesheets/components/input_field.scss @@ -1,4 +1,4 @@ -.input-field-component{ +.input-field-component { width: 100%; font-size: 13px; padding: 10px; @@ -8,23 +8,62 @@ resize: none; } -.input-field-component:focus{ +.input-field-component:focus { border: 1px solid var(--primary-color); } -.text-input-label{ +.text-input-label { font-size: 12px; color: #666666; margin-bottom: 5px; } -.text-input-error-text{ +.text-input-error-text { font-size: 12px; color: var(--error-color) } -.text-input-helper-text{ +.text-input-helper-text { font-size: 12px; color: #666666; 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; } \ No newline at end of file diff --git a/app/components/select_input_component/select_input_component.html.haml b/app/components/select_input_component/select_input_component.html.haml index 00fd00cfe..c7ac32bbc 100644 --- a/app/components/select_input_component/select_input_component.html.haml +++ b/app/components/select_input_component/select_input_component.html.haml @@ -1,10 +1,6 @@ -%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;'}"} - = 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') - - %button.btn.btn-primary.btn-sm.add-value-btn{id: "btnAdd#{@id}", style: "display: none;", - data: { action: "select-input#addValue", "select-input-target": "btnValueField"}} - Add new value \ No newline at end of file +%select#upload-ontology-visibility{autocomplete:"off", multiple: @multiple ,data: {controller: "select-input", 'select-input':{'multiple-value':@multiple, 'open-add-value':@open_to_add_values}}} + - @values.each do |value| + - is_selected_value = value == @selected + %option{value:@value, selected:is_selected_value} + = value + \ No newline at end of file diff --git a/app/components/select_input_component/select_input_component_controller.js b/app/components/select_input_component/select_input_component_controller.js index 7fb94e380..45c50a4d4 100644 --- a/app/components/select_input_component/select_input_component_controller.js +++ b/app/components/select_input_component/select_input_component_controller.js @@ -1,137 +1,16 @@ -import {Controller} from "@hotwired/stimulus" -import {useChosen} from "../../javascript/mixins/useChosen"; +import { Controller } from "@hotwired/stimulus" +import TomSelect from "tom-select" export default class extends Controller { - - static values = { - other: {type: Boolean, default: true}, - multiple: {type: Boolean, default: false} - } - - static targets = ["btnValueField", "inputValueField", "selectedValues"] - connect() { - this.initMultipleSelect() - this.#displayOtherValueField() - } - - toggleOtherValue() { - if (this.otherValue && !this.multipleValue) { - this.#toggle() + let myOptions = {} + if (this.data.get("multipleValue")) { + myOptions['plugins'] = ['remove_button']; } - } - - addValue(event) { - event.preventDefault() - - if (this.inputValueFieldTarget.value) { - let newOption = this.inputValueFieldTarget.value; - this.#addNewOption(newOption) - this.#selectNewOption(newOption) - if (!this.multipleValue) { - this.#hideOtherValueField() - } + if (this.data.get("openAddValue")) { + myOptions['create'] = true; } + new TomSelect(this.element, myOptions); } - - initMultipleSelect() { - this.#addEmptyOption() - useChosen(this.selectedValuesTarget, { - width: '100%', - search_contains: true, - allow_single_deselect: !this.multipleValue, - }, (event) => { - if(this.multipleValue){ - let selected = event.target.selectedOptions - if (selected.length === 0) { - this.#selectEmptyOption() - } else { - this.#unSelectEmptyOption() - } - } - }) - } - - #selectEmptyOption() { - this.emptyOption.selected = true - this.emptyOption.disabled = false - } - - #unSelectEmptyOption() { - this.emptyOption.selected = false - this.emptyOption.disabled = true - } - - #addEmptyOption() { - this.emptyOption = document.createElement("option") - this.emptyOption.innerHTML = '' - this.emptyOption.value = '' - this.selectedValuesTarget.prepend(this.emptyOption) - } - - #selectNewOption(newOption) { - let selectedOptions = this.#selectedOptions(); - - - if (Array.isArray(selectedOptions)) { - selectedOptions.push(newOption); - } else { - selectedOptions = []; - selectedOptions.push(newOption) - } - - this.selectedValuesTarget.value = selectedOptions - if (this.multipleValue) { - const options = this.selectedValuesTarget.options - for (const element of options) { - element.selected = selectedOptions.indexOf(element.value) >= 0; - } - jQuery(this.selectedValuesTarget).trigger("chosen:updated") - } - - } - - #addNewOption(newOption) { - let option = document.createElement("option"); - option.value = newOption; - option.text = newOption; - this.selectedValuesTarget.add(option) - } - - #selectedOptions() { - if (this.multipleValue) { - const selectedOptions = []; - for (let option of this.selectedValuesTarget.options) { - if (option.selected) { - selectedOptions.push(option.value); - } - } - return selectedOptions - } else { - return this.selectedValuesTarget.value - } - } - - #toggle() { - if (this.selectedValuesTarget.value === 'other') { - this.#displayOtherValueField() - } else { - this.#hideOtherValueField() - } - } - - #displayOtherValueField() { - this.inputValueFieldTarget.value = "" - this.btnValueFieldTarget.style.display = 'block' - this.inputValueFieldTarget.style.display = 'block' - } - - #hideOtherValueField() { - this.inputValueFieldTarget.value = "" - this.btnValueFieldTarget.style.display = 'none' - this.inputValueFieldTarget.style.display = 'none' - } - - } \ No newline at end of file From e05a417323ea4fdcdc34bed559cd8089591cec63 Mon Sep 17 00:00:00 2001 From: Bilel Kihal <61744974+Bilelkihal@users.noreply.github.com> Date: Mon, 31 Jul 2023 08:10:36 +0000 Subject: [PATCH 3/6] fix select component id --- .../select_input_component/select_input_component.html.haml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/components/select_input_component/select_input_component.html.haml b/app/components/select_input_component/select_input_component.html.haml index c7ac32bbc..1310e92f6 100644 --- a/app/components/select_input_component/select_input_component.html.haml +++ b/app/components/select_input_component/select_input_component.html.haml @@ -1,4 +1,4 @@ -%select#upload-ontology-visibility{autocomplete:"off", multiple: @multiple ,data: {controller: "select-input", 'select-input':{'multiple-value':@multiple, 'open-add-value':@open_to_add_values}}} +%select{id: "select_#{@id}", autocomplete:"off", multiple: @multiple ,data: {controller: "select-input", 'select-input':{'multiple-value':@multiple, 'open-add-value':@open_to_add_values}}} - @values.each do |value| - is_selected_value = value == @selected %option{value:@value, selected:is_selected_value} From 9f23b77c6781e6b253228b8cd3e205f723d00120 Mon Sep 17 00:00:00 2001 From: Syphax Bouazzouni Date: Mon, 31 Jul 2023 10:12:30 +0200 Subject: [PATCH 4/6] use not centred layout for the select input previews --- test/components/previews/input/select_component_preview.rb | 2 ++ 1 file changed, 2 insertions(+) diff --git a/test/components/previews/input/select_component_preview.rb b/test/components/previews/input/select_component_preview.rb index 95ba3e5ec..61599fb78 100644 --- a/test/components/previews/input/select_component_preview.rb +++ b/test/components/previews/input/select_component_preview.rb @@ -1,6 +1,8 @@ # frozen_string_literal: true class Input::SelectComponentPreview < ViewComponent::Preview + layout 'component_preview_not_centred' + def default(id: "", name: "", values: ["choices 1", "choices 2", "choices 3"], selected: "choices 2", multiple: false, open_to_add_values: false) render Input::SelectComponent.new(id: id, name: name, value: values, selected: selected, multiple: multiple, open_to_add_values: open_to_add_values) end From 9f3789a430df7c76d9a5b75ea7c2f3d7ba13da56 Mon Sep 17 00:00:00 2001 From: Syphax Bouazzouni Date: Mon, 31 Jul 2023 10:13:32 +0200 Subject: [PATCH 5/6] remove the select id in the select input component template --- .../select_input_component/select_input_component.html.haml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/components/select_input_component/select_input_component.html.haml b/app/components/select_input_component/select_input_component.html.haml index c7ac32bbc..34e3753dc 100644 --- a/app/components/select_input_component/select_input_component.html.haml +++ b/app/components/select_input_component/select_input_component.html.haml @@ -1,4 +1,4 @@ -%select#upload-ontology-visibility{autocomplete:"off", multiple: @multiple ,data: {controller: "select-input", 'select-input':{'multiple-value':@multiple, 'open-add-value':@open_to_add_values}}} +%select{autocomplete:"off", multiple: @multiple ,data: {controller: "select-input", 'select-input':{'multiple-value':@multiple, 'open-add-value':@open_to_add_values}}} - @values.each do |value| - is_selected_value = value == @selected %option{value:@value, selected:is_selected_value} From 8ff1fd5fb9ff549b0c3f13502994d518bb10bddb Mon Sep 17 00:00:00 2001 From: Syphax Bouazzouni Date: Mon, 31 Jul 2023 10:14:22 +0200 Subject: [PATCH 6/6] remove is_selected_value variable in the select input component --- .../select_input_component/select_input_component.html.haml | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/app/components/select_input_component/select_input_component.html.haml b/app/components/select_input_component/select_input_component.html.haml index 34e3753dc..067add66f 100644 --- a/app/components/select_input_component/select_input_component.html.haml +++ b/app/components/select_input_component/select_input_component.html.haml @@ -1,6 +1,5 @@ %select{autocomplete:"off", multiple: @multiple ,data: {controller: "select-input", 'select-input':{'multiple-value':@multiple, 'open-add-value':@open_to_add_values}}} - @values.each do |value| - - is_selected_value = value == @selected - %option{value:@value, selected:is_selected_value} + %option{value:@value, selected: value.eql?(@selected)} = value \ No newline at end of file