Feature: Implement the new upload ontology form (#292)

* use inline svg in file input loader component

* add hint to text input component

* add error state to input field component

* add helper text to input field component

* add notes to input field component to explain how to use it

* combine text area input component with input field component

* groupe inputs in one folder in the lookbook

* fix style issues in input field component

* refactor input field component code to remove repetition

* remove the  duplicated alert component preview

* make the input field component generic using a the content slot

* implement form date component

* implement form text area component

* implement form text input component

* duplicate the select component to be in the "form" namespace

* fix select input component inversed open_to_add_values argument usage

* move and rename file input loader  component to be in the form module

* update select component to use InputFieldComponent to have a label

* remove unsed text in NestedFormInputComponentPreview

* Fix bug of select list view of ontology (#289)

* Add Chosen.js functionality to fix bug of select views of ontolgy

* Add Chosen.js functionality for list views ontologies

* fix bug of update ontology where there is no view

* Refactor code

* Delete ponse = @ontology.update

* fix nested form component  inputs focus color to use primary variable

* add upload ontology from style file

* extract from upload ontology from the location partial

* update upload ontology form design

* make the upload ontology form button style apply also submit button

* add id argument to chips components to permit having multiple chips with same name

* fix label not showing for the from select component

* put the correct input names in the new ontology form

* replace the finish div in the new ontology form with a submit tag

* use for the administrated_by input with the form select component

* implement the backend create action for the new upload ontology form

* fix text area component not showing the value given as argument

* add the default values for the inputs in the new ontology form

* extract submission_from_params method from the save_submission concern

* handle new ontology upload errors  in the create action

* add default empty submission in the new action

* add type parametre to text_input_component so we can specify type as email, number ..

* make nested form component start by default by one form initialized

* add URI field to the upload ontology process

* add search input component

* add ontology search input component re-using search-input component

* re-use ontology search input component in the topnav

* re-use the ontology-search-input in the home

* update search-input component to make it more generic

* rename view components "form" namespace to "input"

* create the display namespace for the data display  components

* create the layout namespace for view component that structure content

* use the table component in the ontology mappings tab

* add table component (style, preview and code)

* make dropdown content. with no default padding

* update concept details component to use the Table and dropdown component

* add concept details component preview

* update collection, concept, label_xl and scheme views with the new concept details component

* migrate notes table to use Table component

* install tom select

* update select component with tom select

* use not centred layout for the select input previews

* remove the select id in the select input component template

* remove is_selected_value variable in the select input component

* fix select component id

* add pill button component

* add loader component small option and previews

* update ontology subscribe component design and add preview

* move rounded button preview to the button  namespace

* extract modal helpers into a helper file

* use the new modal helpers instead of writing the view component or frame

* add option to modal to show in connect alone

* add modal component style

* add modal component preview

* move the modal component preview into the layout namespace

* Update the design of the switch component

* add switch input  component preview

* update search input component to handle custom link turbo targets

* update search input component to have form-control style by default

* remove no used home search controller replaced with search input

* fix. ontology search input  component ajax_url argument to add ?acronym=

* fix home page search input style

* migrate search input style from home.scss to search_input.scss

* add margin top and bottom for the nested form component

* update nested form component to have an empty state to send to the back

* handle contact nested form empty state

* migrate the fair score js code to stimulus to make it work with turbo

* remove the old fair_score.js code

* fix home page responsiveness issues

* fix footer responsiveness

* fix nav bar responsiveness and add admin to nav items

* fix home annotator/recommender section title

* fix home responsiveness for small screens

* add link text component

* use link text component to implement popup link component

* use link text component to implement external link component

* use link text component to implement internal link component

* use internal and external links component in the label link component

* add previews to link text components

* change internal link icon in link text component

tmp

tmp

tmp

tmp

tmp

tmp

tmp

tmp

tmp

tmp

* refactor select input component template to use the rails helper

* use stimulus values in select input component controller

* Add email, password, url components to lookbook

* use url component in upload ontology process

* fix location subform selection via text on upload ontology

* change date of creation by modification date field, and add comment of changes field when upload new version of an ontology

* fix select input component to use the name

* use the correct name for the visibility and  allowed to view inputs

* make ontology edit and new form use multi part

* fix URI input name and value to replace ontology by submission

* add disable state to input field component

* make acronym field disabled when uploading a new version of an ontology

* migrate the ontology picker single partial  to select component

* Add the checked property to the chips component

* update date component with flatpicker

* add disabled state to input field component

* update submission helpers with the new components

* refactor update ontology code to remove undesired ifs

* add text field and text area components to lookbook

* add select component to lookbook

* add date field to the lookbook

* add "inline_svg" gem  to use svg in files

* make the components preview container include JS cod if needed

* add language field component

* add link field component

* add date_time field component

* add license field component

* add text area field component

* add summary section component preview

* add dropdown component

* add field container component to show a label with it's value vertically

* add nested form input component preview

* add a pop-up with list of ontologies in group and category admin table

* Revert "add a pop-up with list of ontologies in group and category admin table"

This reverts commit c4b391a.

* add a select to update ontologies in the pop-up edit of group in admin table

* add a select to update ontologies in the pop-up edit of category in admin table

* Refactor code

* refactor code and fix bug

* remove old undesired text area input from lookbook

* add Upload file input component to lookbook

* combine all input components in one globale component

* remove style params from input field component

* recover text area field component (after deleting it by mistake in a previous commit

* add hint to text input component

* add error state to input field component

* add helper text to input field component

* add notes to input field component to explain how to use it

* combine text area input component with input field component

* groupe inputs in one folder in the lookbook

* make the input field component generic using a the content slot

* implement form date component

* implement form text area component

* implement form text input component

* duplicate the select component to be in the "form" namespace

* move and rename file input loader  component to be in the form module

* update select component to use InputFieldComponent to have a label

* remove unsed text in NestedFormInputComponentPreview

* fix nested form component  inputs focus color to use primary variable

* add upload ontology from style file

* extract from upload ontology from the location partial

* update upload ontology form design

* make the upload ontology form button style apply also submit button

* add id argument to chips components to permit having multiple chips with same name

* fix label not showing for the from select component

* put the correct input names in the new ontology form

* replace the finish div in the new ontology form with a submit tag

* use for the administrated_by input with the form select component

* implement the backend create action for the new upload ontology form

* fix text area component not showing the value given as argument

* add the default values for the inputs in the new ontology form

* extract submission_from_params method from the save_submission concern

* handle new ontology upload errors  in the create action

* add default empty submission in the new action

* add type parametre to text_input_component so we can specify type as email, number ..

* make nested form component start by default by one form initialized

* add URI field to the upload ontology process

* rename view components "form" namespace to "input"

* create the display namespace for the data display  components

* create the layout namespace for view component that structure content

* add modal component preview

* move the modal component preview into the layout namespace

* change internal link icon in link text component

tmp

tmp

tmp

tmp

tmp

tmp

tmp

tmp

tmp

tmp

* add text field and text area components to lookbook

* add date field to the lookbook

* fix label not showing for the from select component

* fix text area component not showing the value given as argument

* add type parametre to text_input_component so we can specify type as email, number ..

* refactor select input component template to use the rails helper

* use stimulus values in select input component controller

* Add email, password, url components to lookbook

* use url component in upload ontology process

* fix location subform selection via text on upload ontology

* fix select input component to use the name

* use the correct name for the visibility and  allowed to view inputs

* make ontology edit and new form use multi part

* fix URI input name and value to replace ontology by submission

* migrate the ontology picker single partial  to select component

* Add the checked property to the chips component

* Merge remote-tracking branch 'origin/feature/update-upload-ontology' into feature/update-upload-ontology

* change date of creation by modification date field, and add comment of changes field when upload new version of an ontology

* add disable state to input field component

* update submission helpers with the new components

* refactor update ontology code to remove undesired ifs

* add id parameter to input field component

* replace finish button in upload ontology by the button component

* Add size parameter to button component

* Add color parameter to button component

* Add state parameter to the button component

* make finish button animated in upload ontology process

* add progress pages component

* put again the type argument for button component

* fix progress pages item not center if test is long

* migrate upload ontology form to use progress pages component

* make progress pages container take full width by default

* update login page button component usage to have an ID

* put again the removed JS code for visibility and is a view

* fix chips style padding removed from merging with the browse branch

* update date input in the ontology form to use the metadata helper

* fix chips style in upload ontology form

* remove old new submission form from the bottom of the new ontology page

* Fix select multiple items, delete icon style in select component

* fix upload ontology style to have less margin bottom

* extract ontology updater and saver concern form ontologies controller code

* update submission create action tu update also the ontology

* use AlertComponent to display ontology form error messages

* create input helpers to use inputs component more easily and use them in ontology form

* remove no more used style code in upload ontology style file

* fix ontology form date and contact inputs not showing error message

* set update ontology to true in the create action of submission controller

* fix alignement of chips and button components

---------

Co-authored-by: Syphax Bouazzouni <[email protected]>
Co-authored-by: SirineMhedhbi <[email protected]>
Co-authored-by: Sirine Mhedhbi <[email protected]>

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

@@ -50,7 +50,7 @@
 @import "components/index";
 @import "account";
 @import "agents";
-
+@import "upload_ontology";
 @import "nav_bar";
 @import "ontology_details_header";
 @import "ontology_viewer";

app/assets/stylesheets/components/chips.scss

@@ -1,3 +1,7 @@
+.chips-container > div{
+    margin-right: 10px;
+}
+
 .chips-container svg path{
     fill: var(--primary-color);
 }
@@ -7,6 +11,7 @@
     display: none;
 }
 
+
 .chips-container div label{
     cursor: pointer;
 }
@@ -20,9 +25,9 @@
     background:white;
     border: 0.5px solid #BDBDBD;
     color: #a7a7a7;
-    padding: 3px;
+    padding: 8px;
     border-radius: 5px;
-    font-size: 12px;
+    font-size: 13px;
     user-select: none;
 
 }

app/assets/stylesheets/components/input_field.scss

@@ -66,4 +66,20 @@
     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;
 }

app/assets/stylesheets/components/primary_button.scss

@@ -0,0 +1,101 @@
+.button-container{
+    width: 100%;
+}
+.primary-button {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 16px;
+    color: white;
+    height: 60px;
+    background-color: var(--primary-color);
+    border: none;
+    border-radius: 9px;
+    transition: background-color ease 0.3s;
+}
+.primary-button:hover {
+    background-color: var(--hover-color);
+    cursor: pointer;
+}
+
+
+.animation-container{
+    width: 100%;
+    height: 60px;
+    font-size: 16px;
+    background-color: var(--hover-color);
+    border: none;
+    border-radius: 9px;
+    justify-content: center;
+    align-items: center;
+    display: none;
+
+}
+.lds-ellipsis {
+    display: inline-block;
+    position: relative;
+    margin-top: 50px;
+    width: 80px;
+    height: 80px;
+    transform: scale(0.7);
+}
+
+.lds-ellipsis div {
+    position: absolute;
+    width: 13px;
+    height: 13px;
+    border-radius: 50%;
+    background: white;
+    animation-timing-function: cubic-bezier(0, 1, 1, 0);
+}
+
+.lds-ellipsis div:nth-child(1) {
+    left: 8px;
+    animation: lds-ellipsis1 0.6s infinite;
+}
+
+.lds-ellipsis div:nth-child(2) {
+    left: 8px;
+    animation: lds-ellipsis2 0.6s infinite;
+}
+
+.lds-ellipsis div:nth-child(3) {
+    left: 32px;
+    animation: lds-ellipsis2 0.6s infinite;
+}
+
+.lds-ellipsis div:nth-child(4) {
+    left: 56px;
+    animation: lds-ellipsis3 0.6s infinite;
+}
+
+@keyframes lds-ellipsis1 {
+    0% {
+        transform: scale(0);
+    }
+
+    100% {
+        transform: scale(1);
+    }
+}
+
+@keyframes lds-ellipsis3 {
+    0% {
+        transform: scale(1);
+    }
+
+    100% {
+        transform: scale(0);
+    }
+}
+
+@keyframes lds-ellipsis2 {
+    0% {
+        transform: translate(0, 0);
+    }
+
+    100% {
+        transform: translate(24px, 0);
+    }
+}

app/assets/stylesheets/components/regular_button.scss

@@ -105,10 +105,12 @@
 
 .left-button-icon{
     margin-right: 10px;
+    margin-bottom: 3px;
 }
 
 .right-button-icon {
     margin-left: 10px;
+    margin-bottom: 3px;
 }
 
 .secondary-button-icon path {

app/assets/stylesheets/upload_ontology.scss

@@ -0,0 +1,105 @@
+.upload-ontology-container {
+    display: flex;
+    justify-content: center;
+    padding: 40px 0;
+}
+
+.upload-ontology-card {
+    width: 589px;
+    border-radius: 14px;
+    box-shadow: rgba(0, 0, 0, 0.05) 0px 20px 50px;
+    padding: 20px 40px;
+
+}
+
+.upload-ontology-center {
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+}
+
+.Upload-ontology-title {
+    font-size: 18px;
+    display: flex;
+    font-weight: bold;
+    flex-direction: column;
+    align-items: center;
+}
+
+.Upload-ontology-title hr {
+    border: 1px solid var(--primary-color);
+    width: 93px;
+    margin: 0;
+}
+
+.upload-ontology-progress {
+    display: flex;
+    align-items: center;
+    margin-top: 20px;
+    margin-bottom: 50px;
+}
+
+
+.upload-ontology-chips-container{
+    display: flex;
+    flex-wrap: wrap;
+}
+
+
+.hide {
+    display: none;
+}
+
+.show {
+    display: block;
+}
+
+.upload-ontology-desc {
+    font-size: 12px;
+    color: #777777;
+    margin-bottom: 23px;
+}
+
+.upload-ontology-desc a {
+    text-decoration: none;
+    color: var(--primary-color);
+}
+.upload-ontology-desc a svg{
+    transform: scale(1.2);
+}
+
+
+.upload-ontology-contact .add-another-contact div {
+    font-size: 11px;
+    color: #DADADA;
+    margin-left: 10px;
+
+}
+
+.upload-ontology-field-container .location-choice{
+    display: flex;
+    align-items: center;
+    margin-bottom: 3px;
+}
+
+.upload-ontology-field-container .location-choice .title{
+    font-size: 13px;
+    color: black;
+    margin-left: 13px;
+    margin-bottom: 0;
+    cursor: pointer;
+}
+
+.upload-ontology-field-container > div{
+    font-size: 12px;
+    color: #666666;
+}
+
+
+.upload-ontology-input-field-container{
+    margin-bottom: 10px;
+}
+
+.upload-ontology-input-field-container .switch-filter p{
+    font-size: 12px !important;
+}

app/components/buttons/primary_button_component/primary_button_component.html.haml

@@ -0,0 +1,23 @@
+- if @type == "submit"
+    .button-container{onclick: "displayAnimation()", id: "primary-button"}
+        %input.primary-button{:name => @name, :type => "submit", :value => @value, oncklick: @onclick}/
+- else
+    .button-container
+        .primary-button{:name => @name, onclick: "displayAnimation()", id: "primary-button", oncklick: @onclick}
+            = @value
+
+.animation-container#loading-animation
+    .lds-ellipsis
+        %div
+        %div
+        %div
+        %div
+
+:javascript
+    const button = document.getElementById("primary-button")
+    const loading = document.getElementById("loading-animation")
+    function displayAnimation(){
+        console.log("working")
+        button.style.display = 'none';
+        loading.style.display = 'flex';
+    }

app/components/buttons/regular_button_component.rb

@@ -16,7 +16,7 @@ def initialize(id: , value:, variant: "primary", color: "normal", href: "", size
   def button_label
     hide_icon_left = icon_left == nil ? "hide" : " "
     hide_icon_right = icon_right == nil ? "hide" : " "
-    content_tag(:span, icon_left, class: "#{@variant}-button-icon left-button-icon #{hide_icon_left}") + @value + content_tag(:span, icon_right, class: "#{@variant}-button-icon right-button-icon #{hide_icon_right}")
+    content_tag(:span, icon_left, class: "#{@variant}-button-icon left-button-icon #{hide_icon_left}") + content_tag(:div, @value)  + content_tag(:span, icon_right, class: "#{@variant}-button-icon right-button-icon #{hide_icon_right}")
   end
 
   def button_elem

app/components/chips_component/chips_component.html.haml

@@ -5,6 +5,6 @@
       %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"}
-        %div.ml-1
+        %div
           = @label
         = count

app/components/input/date_component.rb

@@ -1,11 +1,12 @@
 # frozen_string_literal: true
 
 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)
+  def initialize(label: '', name:, value: Date.today, placeholder: '', error_message: '', helper_text: '', id: nil)
+    data_flat_picker = { controller: "flatpickr", flatpickr_date_format: "Y-m-d", flatpickr_alt_input: "true", flatpickr_alt_format: "F j, Y" }
+    super(label: label, name: name, value: value,  placeholder: placeholder, error_message: error_message, helper_text: helper_text, data: data_flat_picker, id: id)
   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')
+    render Input::InputFieldComponent.new(label: @label, name: @name, value: @value,  placeholder: @placeholder, error_message: @error_message, helper_text: @helper_text, data: @data, type: 'date', id: @id)
   end
 end

app/components/input/input_field_component.rb

@@ -1,12 +1,15 @@
 class Input::InputFieldComponent < ViewComponent::Base
-    def initialize(label: "" , name:, value: 'Syphax', type: 'text', placeholder: "", error_message: "", helper_text: "")
+    def initialize(label: "" , name:, value: 'Syphax', type: 'text', placeholder: "", error_message: "", helper_text: "", disabled: false, data: nil, id: '')
         @label = label
         @name = name
         @placeholder  = placeholder
         @error_message = error_message
         @helper_text = helper_text
         @value = value
         @type = type
+        @disabled = disabled
+        @id = id
+        @data = data
     end
 
 

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

@@ -6,7 +6,7 @@
   - if content
     = content
   - else
-    %input.input-field-component.text-input{name: @name, type: @type, placeholder: @placeholder, style: error_style, value: @value}
+    %input.input-field-component.text-input{class: @disabled ? '' : 'not-disabled', name: @name, type: @type, placeholder: @placeholder, style: error_style, id: @id, data: @data, value: @value, disabled: @disabled}
 
 
 

app/components/input/text_input_component.rb

@@ -1,11 +1,13 @@
 # frozen_string_literal: true
 
 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)
+  def initialize(label: '', name:, value: nil, placeholder: '', error_message: '', helper_text: '', disabled: false, id: '')
+    super(label: label, name: name, value: value,  placeholder: placeholder, error_message: error_message, helper_text: helper_text, disabled: disabled, id: id)
   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)
+    render Input::InputFieldComponent.new(label: @label, name: @name, value: @value,  placeholder: @placeholder,
+                                          error_message: @error_message, helper_text: @helper_text,
+                                          type: @type, disabled: @disabled)
   end
 end