Feature: Add modal component preview and helpers

app/assets/stylesheets/components/index.scss

@@ -6,6 +6,7 @@
 @import 'summary_section';
 @import 'dropdown';
 @import 'field_container';
+@import 'modal';
 @import 'search_input';
 @import 'nested_form';
 @import 'input_field';

app/assets/stylesheets/components/modal.scss

@@ -0,0 +1,20 @@
+.modal-content{
+    border-radius: 20px !important;
+}
+
+.modal-title {
+    text-align: center;
+    flex: 1px;
+}
+
+.close {
+    margin-left: 0px;
+    &:focus{
+        outline: none;
+    }
+}
+
+.shape {
+    border-radius: 50% !important;
+    width: 35px;
+}

app/components/turbo_modal_component.rb

@@ -3,11 +3,12 @@
 class TurboModalComponent < ViewComponent::Base
   include Turbo::FramesHelper
 
-  def initialize(id: '', title:'', size: 'modal-lg')
+  def initialize(id: '', title: '', size: 'modal-lg', show: false)
     super
     @id = id
     @title = title
     @size = size
+    @show = show
   end
 
 end

app/components/turbo_modal_component/turbo_modal_component.html.haml

@@ -1,11 +1,11 @@
-%div.modal{id: @id, 'data-controller':"turbo-modal"}
+%div.modal{id: @id, 'data-controller':"turbo-modal", 'data-turbo-modal-show-value': @show.to_s}
   %div.modal-dialog{class: @size}
     %div.modal-content
       %div.modal-header
         %h5.modal-title
           = @title
         %button.close{type:'button', data: { action: "turbo-modal#hide" }}
-          %span ×
+          %span.shape.btn.btn-primary.p-1 ×
       %div.modal-body
         = render TurboFrameComponent.new(id: 'application_modal_content', data: { 'turbo-modal-target': 'content'}) do
           = content

app/components/turbo_modal_component/turbo_modal_component_controller.js

@@ -4,6 +4,16 @@ import ShowModalController from "../../javascript/controllers/show_modal_control
 export default class extends ShowModalController {
 
     static targets = ["content"]
+    static values = {
+        show: Boolean
+    }
+
+    connect() {
+        super.connect();
+        if (this.showValue) {
+            this.show()
+        }
+    }
 
     show() {
         this.modal.showModal(this.element)

app/helpers/application_helper.rb

@@ -7,6 +7,8 @@
 
 module ApplicationHelper
 
+  include ModalHelper
+
   RESOLVE_NAMESPACE = {:omv => "http://omv.ontoware.org/2005/05/ontology#", :skos => "http://www.w3.org/2004/02/skos/core#", :owl => "http://www.w3.org/2002/07/owl#",
                        :rdf => "http://www.w3.org/1999/02/22-rdf-syntax-ns#", :rdfs => "http://www.w3.org/2000/01/rdf-schema#", :metadata => "http://data.bioontology.org/metadata/",
                        :metadata_def => "http://data.bioontology.org/metadata/def/", :dc => "http://purl.org/dc/elements/1.1/", :xsd => "http://www.w3.org/2001/XMLSchema#",
@@ -565,36 +567,7 @@ def ontology_viewer_page_name(ontology_name, concept_name_title , page)
     ontology_name + " | " +concept_name_title + " - #{page.capitalize}"
   end
 
-  def link_to_modal(name, options = nil, html_options = nil, &block)
-
-    new_data = {
-      controller: 'show-modal', turbo: true,
-      turbo_frame: 'application_modal_content',
-      action: 'click->show-modal#show'
-    }
-
-    html_options[:data].merge!(new_data) do |_, old, new|
-      "#{old} #{new}"
-    end
-    if name.nil?
-      link_to(options, html_options, &block)
-    else
-      link_to(name, options, html_options)
-    end
-  end
-  def submit_to_modal(name, html_options = nil, &block)
-    new_data = {
-      controller: 'show-modal', turbo: true,
-      turbo_frame: 'application_modal_content',
-      action: 'click->show-modal#show'
-    }
-
-    html_options[:data].merge!(new_data) do |_, old, new|
-      "#{old} #{new}"
-    end
 
-    submit_tag(name || "save", html_options)
-  end
 
   def uri?(url)
     url =~ /\A#{URI::DEFAULT_PARSER.make_regexp(%w[http https])}\z/

app/helpers/modal_helper.rb

@@ -0,0 +1,42 @@
+module ModalHelper
+
+  def link_to_modal(name, options = nil, html_options = nil, &block)
+    html_options = modal_controller_data(html_options)
+    if name.nil?
+      link_to(options, html_options, &block)
+    else
+      link_to(name, options, html_options)
+    end
+  end
+
+  def submit_to_modal(name, html_options = nil)
+    html_options = modal_controller_data(html_options)
+
+    submit_tag(name || 'save', html_options)
+  end
+
+  def modal_frame_container(id = 'application_modal')
+    render TurboModalComponent.new(id: id)
+  end
+
+  def render_in_modal(id = 'application_modal', &block)
+    render TurboFrameComponent.new(id: "#{id}_content") do
+      block.call.html_safe if block_given?
+    end
+  end
+
+  private
+
+  def modal_controller_data(html_options)
+    new_data = {
+      controller: 'show-modal', turbo: true,
+      turbo_frame: 'application_modal_content',
+      action: 'click->show-modal#show'
+    }
+
+    html_options[:data].merge!(new_data) do |_, old, new|
+      "#{old} #{new}"
+    end
+    html_options
+  end
+end

app/views/fair_score/_details.html.haml

@@ -1,4 +1,4 @@
-= turbo_frame_tag 'application_modal_content' do
+= render_in_modal do
   :javascript
     var scrollY = window.getScrollTop()
     $(document).ready(function(){

app/views/label_xl/show.html.haml

@@ -1,4 +1,4 @@
-= turbo_frame_tag 'application_modal_content' do
+= render_in_modal do
   - if @label_xl && !@label_xl.empty?
     = render ConceptDetailsComponent.new(id:'skos-xl-label', acronym: @ontology_acronym,
                 properties: @label_xl.properties,

app/views/layouts/_ontology_viewer.html.haml

@@ -35,7 +35,7 @@
 
 
 
-  = render TurboModalComponent.new(id: 'application_modal')
+  = modal_frame_container
 
   = render partial: 'concepts/perma_link_modal'
 

app/views/layouts/appliance.html.haml

@@ -30,7 +30,8 @@
 
     %div.container-fluid.flex-grow-1
       = render partial: "layouts/notices"
-      = render TurboModalComponent.new(id: 'application_modal')
+      = modal_frame_container
+
       = yield
 
     = render partial: "layouts/footer"

app/views/layouts/application.html.erb

@@ -8,7 +8,7 @@
   <%= javascript_include_tag "application"%>
 </head>
 <body class="<%= controller_name %> <%= action_name %>">
-<%= render TurboModalComponent.new(id: 'application_modal') %>
+<%= modal_frame_container %>
 <%= yield %>
 
 </body>

app/views/layouts/ontology.html.erb

@@ -1,6 +1,6 @@
 <%=render partial: 'layouts/header'%>
   <div id="bd">
-    <%= render TurboModalComponent.new(id: 'application_modal')%>
+    <%= modal_frame_container%>
 	 <%=yield%>
   </div>
 <%=render partial: 'layouts/footer'%>

app/views/mappings/bulk_loader/_loader.html.haml

@@ -1,4 +1,4 @@
-= turbo_frame_tag 'application_modal_content' do
+= render_in_modal do
   %div.d-flex.flex-column{:style => "overflow: auto; max-height: 600px;"}
     = render TurboFrameComponent.new(id: 'file_loader_result') do
       %div.my-2

app/views/mappings/edit.html.haml

@@ -1,2 +1,2 @@
-= turbo_frame_tag 'application_modal_content' do
+= render_in_modal do
   = render  partial: 'form', locals: {form_url: mapping_path}

app/views/mappings/new.html.haml

@@ -1,2 +1,2 @@
-= turbo_frame_tag 'application_modal_content' do
+= render_in_modal do
   = render partial: 'form', locals: {form_url: mappings_path}

app/views/notes/_new_comment.html.haml

@@ -1,4 +1,4 @@
-= turbo_frame_tag "application_modal_content" do
+= render_in_modal do
   = render_alerts_container
   = form_with url: notes_path, method: 'post', data:{turbo: true, 'turbo-frame': '_top'} do
     = hidden_field_tag 'parent', parent_id

app/views/notes/_new_proposal.html.haml

@@ -1,4 +1,4 @@
-= render TurboFrameComponent.new(id: 'application_modal_content') do
+= render_in_modal do
   :javascript
     function updateProposalForm(event){
       let frame = document.getElementById('application_modal_content')

app/views/notes/show.html.haml

@@ -1,4 +1,4 @@
-= turbo_frame_tag 'application_modal_content' do
+= render_in_modal do
   - ontology_name = @ontology ? " on #{@ontology.name}" : ""
   - @title = "Note#{ontology_name} | #{@note.subject}"
   #note_container{:style => "padding: 1em;"}

app/views/ontologies_metadata_curator/_form_edit.html.haml

@@ -1,4 +1,4 @@
-= turbo_frame_tag 'application_modal_content' do
+= render_in_modal do
   :javascript
     function saveSelectedTab(value){
       const input = document.getElementById("active_ontology")

test/components/previews/layout/turbo_modal_component_preview.rb

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+class Layout::TurboModalComponentPreview < ViewComponent::Preview
+  layout 'component_preview_not_centred'
+
+  include ActionView::Helpers::TagHelper
+  include ActionView::Context
+
+  # @param title text
+  # @param message text
+  def default(message: 'hello you !', title: 'title')
+    render TurboModalComponent.new(title: title, show: true) do
+      content_tag(:div, message, class: 'p-5')
+    end
+  end
+end