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

@@ -49,7 +49,7 @@
 @import "login";
 @import "components/index";
 @import "account";
-
+@import "upload_ontology";
 /* Bootstrap and Font Awesome */
 @import "bootstrap";
 @import "bootstrap_overrides";

app/assets/stylesheets/components/chips.scss

@@ -1,4 +1,4 @@
-.chips-container div{
+.chips-container > div{
     margin-right: 10px;
 }
 
@@ -11,6 +11,7 @@
     display: none;
 }
 
+
 .chips-container div label{
     cursor: pointer;
 }

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/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/chips_component/chips_component.html.haml

@@ -5,4 +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"}
-        = @value
+        %div
+          = @label
+        = count

app/components/nested_form_inputs_component/nested_form_inputs_component.html.haml

@@ -16,6 +16,7 @@
             %i.fas.fa-minus.fa-lg
 
   %div{'data-nested-form-target': "target"}
-  %div.float-right
-    %button.btn.btn-success{data: {action:"nested-form#add"}}
-      %i.fas.fa-plus.fa-lg
+  %div.add-another-object{data: {action:"click->nested-form#add"}}
+    = inline_svg 'icons/plus.svg'
+    %div
+      Add another #{@object_name}

app/components/select_input_component.rb

@@ -10,12 +10,28 @@ def initialize(id:, name:, values:, selected:, multiple: false)
     @selected = selected
     @multiple = multiple
   end
+
+  def call 
+    select_input_tag(@name, @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
+
+    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
+      }
+    }
 
-  def options_values
-    if @selected.nil? || @selected.empty?
-      @selected = 0
-      @values.unshift('')
-    end
-    options_for_select(@values, @selected)
+    select_tag(id, options_for_select(values, selected), select_html_options)
   end
 end