forked from ontoportal/ontoportal_web_ui
-
Notifications
You must be signed in to change notification settings - Fork 5
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Fix: the new ontology form bugs (#368)
* add the max date option to date inputs * show the validity date input in the ontology form if status is retired * fix in ontology form not revealed sections after not valid save * add show SKOS form information reveal in the ontologies new form * add reveal component to hide/show a content depending of a condition * use reveal component to display or hide conditional inputs in the ontology form
- Loading branch information
1 parent
1e8ae5b
commit 7606205
Showing
13 changed files
with
111 additions
and
159 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,20 @@ | ||
| # frozen_string_literal: true | ||
|
|
||
| class Layout::RevealComponent < ViewComponent::Base | ||
| renders_one :button | ||
|
|
||
| def initialize(init_show: false, show_condition: nil,hidden_class: 'd-none') | ||
| @hidden_class = hidden_class | ||
| @init_show = init_show | ||
| @show_condition = show_condition | ||
| end | ||
|
|
||
| def container_data | ||
| out = { | ||
| controller: 'reveal-component', | ||
| 'reveal-component-hidden-class': @hidden_class | ||
| } | ||
| out['reveal-component-condition-value'] = @show_condition if @show_condition | ||
| out | ||
| end | ||
| end |
5 changes: 5 additions & 0 deletions
5
app/components/layout/reveal_component/reveal_component.html.haml
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| %div{data: container_data} | ||
| %div{'data-action': "change->reveal-component#toggle"} | ||
| = button | ||
| %div{'data-reveal-component-target': "item", class: @init_show ? '' : @hidden_class} | ||
| = content |
30 changes: 30 additions & 0 deletions
30
app/components/layout/reveal_component/reveal_component_controller.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,30 @@ | ||
| import Reveal from 'stimulus-reveal-controller' | ||
|
|
||
| export default class extends Reveal { | ||
| static values = { | ||
| condition: String | ||
| } | ||
|
|
||
| connect() { | ||
| super.connect() | ||
| } | ||
|
|
||
| toggle(event) { | ||
| if (!this.conditionValue) { | ||
| super.toggle() | ||
| } else if (this.#shown() && !this.#conditionChecked(event)) { | ||
| super.toggle() | ||
| } else if (!this.#shown() && this.#conditionChecked(event)) { | ||
| super.toggle() | ||
| } | ||
| } | ||
|
|
||
| #conditionChecked(event) { | ||
| return this.conditionValue === event.target.value | ||
| } | ||
|
|
||
| #shown() { | ||
| return !this.itemTargets[0].classList.contains(this.class); | ||
| } | ||
|
|
||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -4,10 +4,12 @@ | |
| = text_input(name: 'ontology[acronym]', value: @ontology.acronym, disabled: @is_update_ontology) | ||
| = hidden_field_tag 'ontology[acronym]', @ontology.acronym if @is_update_ontology | ||
|
|
||
| .upload-ontology-input-field-container#visibilityContainer | ||
| = select_input(label: "Visibility", name: "ontology[viewingRestriction]", values: %w[public private], selected: @ontology.viewingRestriction ) | ||
| .upload-ontology-input-field-container#visibility-group{style: 'display: none'} | ||
| = select_input(label: "Add or remove accounts that are allowed to view classes in this ontology using the account name", name: "ontology[acl]", values: @user_select_list, selected: @ontology.acl, multiple: true) | ||
| .upload-ontology-input-field-container | ||
| = render Layout::RevealComponent.new(init_show: @ontology.viewingRestrictio&.eql?('private'), show_condition: 'private') do |c| | ||
| - c.button do | ||
| = select_input(label: "Visibility", name: "ontology[viewingRestriction]", values: %w[public private], selected: @ontology.viewingRestriction ) | ||
| .upload-ontology-input-field-container | ||
| = select_input(label: "Add or remove accounts that are allowed to view classes in this ontology using the account name", name: "ontology[acl]", values: @user_select_list, selected: @ontology.acl, multiple: true) | ||
|
|
||
| .upload-ontology-input-field-container | ||
| = select_input(label: "Administrator", name: "ontology[administeredBy]", values: @user_select_list, selected: @ontology.administeredBy || session[:user].id, multiple: true) | ||
|
|
@@ -25,36 +27,9 @@ | |
| = check_input(name: "ontology[group][]", id: group[:acronym] , label: group[:acronym], value: group[:id], checked: @ontology.group&.any?{|x| x.eql?(group[:id])}) | ||
|
|
||
| .upload-ontology-input-field-container.mt-2 | ||
| %span.d-flex | ||
| = switch_input(id: 'ontology_isView', name: 'ontology[isView]', label: 'Is a view of another ontology?', checked: @ontology.view?) | ||
| %div#ontology_viewOf{style: "display: #{ [email protected]? ? 'none' : 'block'}"} | ||
| = render partial: "shared/ontology_picker_single", locals: {placeholder: "", field_name: "viewOf", selected: @ontology.viewOf} | ||
| :javascript | ||
|
|
||
| function showPrivateAclSelect() { | ||
| const visibilityGroupDiv = document.getElementById('visibility-group'); | ||
| // Get the selected value from the select element | ||
| const selectElement = document.getElementById('select_ontology[viewingRestriction]'); | ||
| const selectedValue = selectElement.value; | ||
|
|
||
|
|
||
| // Check if the selected value is "private" | ||
| if (selectedValue === 'private') { | ||
| // If it's "private", show the visibility-group div | ||
| visibilityGroupDiv.style.display = 'block'; | ||
| } else { | ||
| // If it's not "private", hide the visibility-group div | ||
| visibilityGroupDiv.style.display = 'none'; | ||
| } | ||
| } | ||
| const parentDiv = document.getElementById('visibilityContainer'); | ||
| parentDiv.addEventListener('change', () => { showPrivateAclSelect() }); | ||
|
|
||
|
|
||
| jQuery("#ontology_isView").live("click", function(){ | ||
| if (jQuery("#ontology_isView").is(":checked")) { | ||
| jQuery("#ontology_viewOf").removeAttr('disabled').show(); | ||
| } else { | ||
| jQuery("#ontology_viewOf").attr('disabled', true).hide(); | ||
| } | ||
| }); | ||
| = render Layout::RevealComponent.new(init_show: @ontology.view?) do |c| | ||
| - c.button do | ||
| %span.d-flex | ||
| = switch_input(id: 'ontology_isView', name: 'ontology[isView]', label: 'Is a view of another ontology?', checked: @ontology.view?) | ||
| %div | ||
| = render partial: "shared/ontology_picker_single", locals: {placeholder: "", field_name: "viewOf", selected: @ontology.viewOf} | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters