spina-admin-conferences-fork 2.1.2 → 3.0.0.rc1

data/app/views/spina/admin/conferences/presentation_types/_presentation_type.html.haml

@@ -1,8 +1,11 @@
-%tr{ data: { presentation_type_id: presentation_type.id } }
-  %td= presentation_type.conference.name
-  %td= link_to presentation_type.name, edit_admin_conferences_presentation_type_path(presentation_type)
-  %td= time_tag presentation_type.duration, t('datetime.distance_in_words.x_minutes', count: presentation_type.minutes)
-  %td.align-right
-    = link_to edit_admin_conferences_presentation_type_path(presentation_type), class: %w[button button-small button-link] do
-      = icon 'pencil-outline'
-      = t 'spina.edit'
+%tr.border-b{ data: { presentation_type_id: presentation_type.id } }
+  %td
+    .block.font-light.text-sm.p-4= presentation_type.conference.name
+  %td= link_to presentation_type.name, edit_admin_conferences_presentation_type_path(presentation_type), class: 'block text-spina font-medium text-sm p-4 hover:text-spina-dark'
+  %td
+    .block.font-light.text-sm.p-4= time_tag presentation_type.duration, t('datetime.distance_in_words.x_minutes', count: presentation_type.minutes)
+  %td
+    = link_to edit_admin_conferences_presentation_type_path(presentation_type), class: 'btn btn-default mx-4 w-max' do
+      .flex.flex-nowrap.items-center.px-8.py-1
+        = heroicon 'pencil-alt', style: :outline, class: 'w-4 h-4'
+        .ml-2= t 'spina.edit'

data/app/views/spina/admin/conferences/presentation_types/index.html.haml

@@ -1,7 +1,25 @@
-- content_for(:header_actions) do
-  = link_to new_admin_conferences_presentation_type_path, class: %w[button button-primary], style: 'margin-right: 0' do
-    = icon 'plus'
-    = t '.new'
+= render Spina::UserInterface::HeaderComponent.new do |header|
+  - header.actions do
+    .ml-3
+      = link_to new_admin_conferences_presentation_type_path, class: 'btn btn-primary w-full' do
+        = heroicon 'plus', style: :solid, class: 'w-7 h-7 -m1-2'
+        = t '.new'
+
+  - header.navigation do
+    %nav.-mb-1.md:-mb-3.mt-4
+      %ul.inline-flex.w-auto.rounded-md.bg-white
+        %li
+          = render Spina::UserInterface::TabLinkComponent.new(Spina::Admin::Conferences::Conference.model_name.human(count: 0),
+                                                              admin_conferences_conferences_path,
+                                                              active: controller_name == 'conferences')
+        %li
+          = render Spina::UserInterface::TabLinkComponent.new(Spina::Admin::Conferences::PresentationType.model_name.human(count: 0),
+                                                              admin_conferences_presentation_types_path,
+                                                              active: controller_name == 'presentation_types')
+        %li
+          = render Spina::UserInterface::TabLinkComponent.new(Spina::Admin::Conferences::Session.model_name.human(count: 0),
+                                                              admin_conferences_sessions_path,
+                                                              active: controller_name == 'sessions')
 
 = render partial: 'presentation_types', object: @presentation_types
 = link_to_next_page @presentation_types, 'Next'

data/app/views/spina/admin/conferences/presentations/_attachment_fields.html.haml

@@ -1,18 +1,12 @@
-.structure-form-pane{ class: ('active' if (local_assigns[:active] == true) || (f.index == 0)), id: "structure_form_pane_#{f.index}", data: { 'spina--admin--conferences--presentation_attachments_form': { target: 'formPane' } } }
-  .structure-form-part
-    .page-form-label
-      = Spina::Admin::Conferences::PresentationAttachment.human_attribute_name :attachment_type
-    .page-form-control
-      .select-dropdown
-        = f.collection_select :attachment_type_id, Spina::Admin::Conferences::PresentationAttachmentType.all, :id, :name, {}, data: { action: 'spina--admin--conferences--presentation-attachments-form#updateType' }
-  .structure-form-part
-    .page-form-label
-      = Spina::Admin::Conferences::PresentationAttachment.human_attribute_name :attachment
-    .page-form-content{ data: { controller: "attachment-picker" } }
-      .select-dropdown
-        = f.collection_select :attachment_id, Spina::Attachment.sorted, :id, :name, { include_blank: t("spina.attachments.choose_attachment") }
-
+%div{ data: { 'part-id': "#{f.object.object_id}", 'tabs-target': 'pane' }, id: "pane_#{f.object.object_id}" }
   = f.hidden_field :id
 
-  = f.hidden_field :_destroy, data: { 'spina--admin--conferences--presentation_attachments_form_target': 'destroyField' }
-  = button_tag t('spina.delete'), type: 'button', class: %w[button button-mini button-link pull-right], data: { action: 'spina--admin--conferences--presentation-attachments-form#removeForm' }
+  = render Spina::Forms::GroupComponent.new(label: Spina::Admin::Conferences::PresentationAttachment.human_attribute_name(:attachment_type)) do
+    = f.collection_select :attachment_type_id, Spina::Admin::Conferences::PresentationAttachmentType.all, :id, :name
+
+  = render Spina::Forms::GroupComponent.new(label: Spina::Admin::Conferences::PresentationAttachment.human_attribute_name(:attachment)) do
+    .mt-6{ data: { controller: 'attachment-picker' } }
+      = f.collection_select :attachment_id, Spina::Attachment.sorted, :id, :name, { include_blank: t('spina.attachments.choose_attachment') }, { class: 'form-select mt-1', data: { action: 'attachment-picker#pick' } }
+
+  .text-right
+    = button_tag t('spina.ui.delete'), type: :button, class: 'btn btn-default bg-transparent hover:bg-white hover:text-red-500 h-8 px-3 inline-block mt-3', data: { action: 'repeater#removeFields', id: "pane_#{f.object.object_id}" }

data/app/views/spina/admin/conferences/presentations/_form.html.haml

@@ -1,23 +1,28 @@
-- if @presentation.errors.any?
-  - content_for :notifications do
-    = render 'errors', errors: @presentation.errors
+%div{ data: { controller: 'tabs',
+              tabs: { active: 'cursor-default text-gray-900 bg-spina-dark bg-opacity-10',
+                      inactive: 'cursor-pointer bg-transparent text-gray-400 border-transparent' } } }
+  = render Spina::UserInterface::HeaderComponent.new do |header|
+    - header.actions do
+      - if @presentation.persisted?
+        = render Spina::UserInterface::DropdownComponent.new do |dropdown|
+          - dropdown.button(classes: "btn btn-default px-3") do
+            = heroicon('dots-horizontal', style: :solid, class: "w-5 h-5 text-gray-600")
 
-= form_for [:admin_conferences, @presentation], html: { autocomplete: 'off' } do |f|
-  %header#header
-    = render partial: 'spina/admin/shared/breadcrumbs'
+          - dropdown.menu do
+            = button_to t('spina.permanently_delete'), admin_conferences_presentation_path(@presentation), method: :delete, class: "block w-full text-left px-4 py-2 text-sm leading-5 font-medium text-red-500 cursor-pointer bg-white hover:bg-red-100 hover:bg-opacity-50 hover:text-red-500 focus:outline-none focus:bg-gray-100 focus:text-gray-900", form: {data: { controller: 'confirm', confirm_message: t('.delete_confirmation', presentation: @presentation.title) } }
 
-    #header_actions
-      %button.button.button-primary{ type: 'submit' }
-        = icon 'check'
+      = button_tag type: :submit, form: dom_id(@presentation), class: 'btn btn-primary', data: { controller: 'button', action: 'button#loading', loading_message: t('spina.ui.saving')} do
+        = heroicon('check', style: :solid, class: 'w-5 h-5 mr-1 -ml-2')
         = t '.save'
 
-      = link_to t('spina.cancel'), admin_conferences_presentations_path, class: 'button', style: 'margin-right: 0'
+    - header.navigation do
+      %nav.-mb-3.mt-4
+        %ul.inline-flex.w-auto.rounded-md.bg-white
+          - @tabs.each do |tab|
+            %button.block.px-3.leading-relaxed.py-1.hover:text-gray-800.rounded-md.text-gray-400.font-medium.text-sm.flex.items-center.whitespace-nowrap{ type: 'button', data: { action: 'tabs#show', 'tabs-target': 'button', 'pane-id': "#{tab}" } }
+              = t ".#{tab}"
 
-    %nav#secondary.tabs
-      %ul
-        - @tabs.each_with_index do |tab, i|
-          %li{ class: ('active' if i == 0) }
-            = link_to t(".#{tab}"), "##{tab}"
-
-  #presentation_details.tab-content.active= render 'form_presentation_details', f: f
-  #presenters.tab-content= render partial: 'delegates', object: @presentation.presenters
+  .p-4.md:p-8
+    - @tabs.each_with_index do |tab, i|
+      %div{ 'data-tabs-target': 'pane', id: tab, hidden: i != 0 }
+        = render "form_#{tab}"

data/app/views/spina/admin/conferences/presentations/_form_presentation_details.html.haml

@@ -1,55 +1,59 @@
-.page-form{ data: { controller: 'spina--admin--conferences--select-options', 'spina--admin--conferences--select_options': { record_value: @conferences } } }
-  .page-form-group
-    .page-form-label= Spina::Admin::Conferences::Presentation.human_attribute_name :conference
-    .page-form-control
-      .select-dropdown= select_tag :conference_id, options_from_collection_for_select(Spina::Admin::Conferences::Conference.all, :id, :name, (@presentation.conference.id unless @presentation.conference.blank?)), include_blank: true, required: true, data: { action: 'spina--admin--conferences--select-options#setVisibility', 'spina--admin--conferences--select_options_target': 'select', text_key: 'name' }
-
-  .page-form-group
-    .page-form-label= Spina::Admin::Conferences::Presentation.human_attribute_name :session
-    .page-form-control
-      .input-group
-        .select-dropdown= select_tag :presentation_type_id, options_from_collection_for_select((@presentation.conference || Spina::Admin::Conferences::Conference.first).presentation_types, :id, :name, (@presentation.presentation_type.id unless @presentation.presentation_type.blank?)), include_blank: true, required: true, data: { action: 'spina--admin--conferences--select-options#setVisibility','spina--admin--conferences--select_options_target': 'select', key_path: 'presentation_types', text_key: 'name' }
-        .select-dropdown= f.collection_select :session_id, (@presentation.presentation_type || Spina::Admin::Conferences::Conference.first).sessions, :id, :name, { include_blank: true }, required: true, data: {'spina--admin--conferences--select_options_target': 'select', key_path: 'presentation_types:sessions', text_key: 'name' }
-
-  .page-form-group
-    .page-form-label
-      = Spina::Admin::Conferences::Presentation.human_attribute_name :start_datetime
-    .page-form-control= f.datetime_field :start_datetime, required: true
-
-  .page-form-group
-    .page-form-label= Spina::Admin::Conferences::Presentation.human_attribute_name :title
-    .page-form-control= f.text_field :title, placeholder: Spina::Admin::Conferences::Presentation.human_attribute_name(:title), required: true, class: 'input-large'
-
-  .page-form-group
-    .page-form-label= Spina::Admin::Conferences::Presentation.human_attribute_name :abstract
-    .page-form-content
-      .page-form-rich-text= f.rich_text_area :abstract
-
-  .page-form-group
-    .page-form-label= Spina::Admin::Conferences::Presentation.human_attribute_name :presenters
-    .page-form-content
-      .well{ style: 'margin: 0' }
-        .table-container
-          %table.table{ style: 'margin: 0' }
-            %tbody
-              = f.collection_check_boxes :presenter_ids, Spina::Admin::Conferences::Delegate.order(:last_name, :first_name), :id, :reversed_name_and_institution do |builder|
-                %tr
-                  %td{ style: "padding-left: 16px" }
-                    .form-checkbox
-                      = builder.check_box
-                      = builder.label
-
-  .page-form-group{ class: dom_class(@presentation.attachments) }
-    .page-form-label= Spina::Admin::Conferences::Presentation.human_attribute_name :attachments
-    .page-form-control
-      .structure-form{ data: { controller: 'spina--admin--conferences--presentation-attachments-form', 'spina--admin--conferences--presentation_attachments_form': { active_class: 'active' } } }
-        .structure-form-menu
-          %ul= render partial: 'attachment_row', collection: f.object.attachments, as: :attachment
-          = link_to icon('plus'), @presentation.new_record? ? new_admin_conferences_presentation_attachment_path : new_admin_conferences_presentation_presentation_attachment_path(@presentation, index: @presentation.attachments.size), remote: true, class: %w[button button-link icon], data: { 'spina--admin--conferences--presentation_attachments_form_target': 'addFormLink', disable_with: '' }
-
-        .structure-form-content{ data: { action: 'presentationAttachmentFieldsAdded->spina--admin--conferences--presentation-attachments-form#updateURL' } }
-          = f.fields_for :attachments do |attachment_fields|
-            = render 'attachment_fields', f: attachment_fields
-
-- unless @presentation.new_record?
-  .pull-right= link_to t('spina.permanently_delete'), admin_conferences_presentation_path(@presentation), method: :delete, data: { confirm: t('.delete_confirmation', presentation: @presentation.title) }, class: %w[button button-link button-danger]
+= form_with model: [spina, :admin_conferences, @presentation], id: dom_id(@presentation), html: { autocomplete: 'off' } do |f|
+  %div{ data: { controller: 'select-options', select_options: { record_value: @conferences } } }
+    = render Spina::Forms::GroupComponent.new(label: Spina::Admin::Conferences::Presentation.human_attribute_name(:conference)) do
+      = select_tag :conference_id, options_from_collection_for_select(Spina::Admin::Conferences::Conference.all, :id, :name, (@presentation.conference.id unless @presentation.conference.blank?)), include_blank: true, required: true, data: { action: 'spina--admin--conferences--select-options#setVisibility', 'spina--admin--conferences--select_options_target': 'select', text_key: 'name' }
+    = render Spina::Forms::GroupComponent.new(label: Spina::Admin::Conferences::Presentation.human_attribute_name(:presentation_type)) do
+      = select_tag :presentation_type_id, options_from_collection_for_select((@presentation.conference || Spina::Admin::Conferences::Conference.first).presentation_types, :id, :name, (@presentation.presentation_type.id unless @presentation.presentation_type.blank?)), include_blank: true, required: true, data: { action: 'spina--admin--conferences--select-options#setVisibility','spina--admin--conferences--select_options_target': 'select', key_path: 'presentation_types', text_key: 'name' }
+    = render Spina::Forms::GroupComponent.new(label: Spina::Admin::Conferences::Presentation.human_attribute_name(:session)) do
+      = f.collection_select :session_id, (@presentation.presentation_type || Spina::Admin::Conferences::Conference.first).sessions, :id, :name, { include_blank: true }, required: true, data: {'spina--admin--conferences--select_options_target': 'select', key_path: 'presentation_types:sessions', text_key: 'name' }
+
+  = render Spina::Forms::GroupComponent.new(label: Spina::Admin::Conferences::Presentation.human_attribute_name(:start_datetime)) do
+    = f.datetime_field :start_datetime
+  = render Spina::Forms::GroupComponent.new(label: Spina::Admin::Conferences::Presentation.human_attribute_name(:title)) do
+    = render Spina::Forms::TextFieldComponent.new(f, :title)
+
+  = render Spina::Forms::GroupComponent.new(label: Spina::Admin::Conferences::Presentation.human_attribute_name(:abstract)) do
+    .mt-1.relative
+      = f.hidden_field :abstract, id: "#{f.object.object_id}_input"
+
+      .relative.form-textarea.p-4.pt-0.shadow-sm.max-w-5xl(data-controller='trix' id="insert_#{f.object.object_id}_trix-toolbar" data-action='media-picker:done->trix#insertAttachment')
+        = render Spina::Forms::TrixToolbarComponent.new("#{f.object.object_id}_trix-toolbar")
+
+        %trix-editor(class='prose prose-sm focus:outline-none max-w-3xl xl:border-r border-dashed border-gray-200 pr-3' toolbar="#{f.object.object_id}_trix-toolbar" input="#{f.object.object_id}_input" data-trix-target='editor' data-action='trix-file-accept->trix#preventDefault')
+
+  = render Spina::Forms::GroupComponent.new(label: Spina::Admin::Conferences::Presentation.human_attribute_name(:presenters)) do
+    %table.table{ style: 'margin: 0' }
+      %tbody
+        = f.collection_check_boxes :presenter_ids, Spina::Admin::Conferences::Delegate.order(:last_name, :first_name), :id, :reversed_name_and_institution do |builder|
+          %tr
+            %td{ style: "padding-left: 16px" }
+              .form-checkbox
+                = builder.check_box
+                = builder.label
+
+
+  .mt-6{ 'data-controller': 'repeater' }
+    %label.block.text-sm.leading-5.font-medium.text-gray-700= Spina::Admin::Conferences::Presentation.human_attribute_name :attachments
+    .-mt-4.flex.flex-col.md:flex-row{ data: { 'controller': 'tabs', 'tabs-active': 'bg-spina-dark bg-opacity-10 text-gray-900', 'tabs-inactive': 'text-gray-500' }  }
+      .md:w-64.md:pr-6
+
+        -# Fields for new attachment
+        - new_attachment = Spina::Admin::Conferences::PresentationAttachment.new
+        - fields = f.fields_for(:attachments, [new_attachment], child_index: new_attachment.object_id) { |ff| render('attachment_fields', f: ff) }.gsub('\n', '')
+
+        -# Tabs
+        .pt-6.-ml-3
+          %div{ data: { action: 'exists->tabs#added', 'repeater-target' => 'list', 'tabs-target' => 'list' } }
+            - (f.object.attachments || []).each.with_index do |attachment, index|
+              %button.text-gray-500.hover:text-gray-900.rounded-md.px-3.truncate.text-sm.font-medium.flex.items-center.w-full.h-9{ data: { 'action': 'tabs#show', 'pane-id': "pane_#{attachment.object_id}", 'repeater-target': 'listItem', 'tabs-target': 'button' }, type: 'button' }
+                %svg.w-4.h-4.mr-2{ fill: 'currentColor', viewbox: '0 0 448 512', xmlns: 'http://www.w3.org/2000/svg' }
+                  %path{ d: 'M432 288H16c-8.8 0-16 7.2-16 16v16c0 8.8 7.2 16 16 16h416c8.8 0 16-7.2 16-16v-16c0-8.8-7.2-16-16-16zm0-112H16c-8.8 0-16 7.2-16 16v16c0 8.8 7.2 16 16 16h416c8.8 0 16-7.2 16-16v-16c0-8.8-7.2-16-16-16z' }
+                = attachment&.attachment_type.name
+          %button.text-gray-400.pl-2.hover:text-gray-900.rounded-md.truncate.text-sm.font-medium.flex.items-center.w-full.h-10{ data: { 'action': 'repeater#addFields', 'child-index': "#{new_attachment.object_id}", 'fields': fields }, type: 'button' }
+            = heroicon 'plus', style: :solid, class: 'w-6 h-6 mr-1' 
+            = t 'spina.ui.new_entry'
+
+      -# Content
+      .flex-1.pl-6.md:pl-0{ 'data-repeater-target': 'content' }
+        = f.fields_for :attachments do |attachment_fields|
+          = render 'attachment_fields', f: attachment_fields

data/app/views/spina/admin/conferences/presentations/_form_presenters.html.haml

@@ -0,0 +1 @@
+= render partial: 'delegates', object: @presentation.presenters

data/app/views/spina/admin/conferences/presentations/_presentation.html.haml

@@ -1,11 +1,13 @@
-%tr{ data: { presentation_id: presentation.id } }
-  %td= presentation.conference.name
-  %td= link_to presentation.title, edit_admin_conferences_presentation_path(presentation)
+%tr.border-b{ data: { presentation_id: presentation.id } }
+  %td
+    .block.font-light.text-sm.p-4= presentation.conference.name
+  %td= link_to presentation.title, edit_admin_conferences_presentation_path(presentation), class: 'block text-spina font-medium text-sm p-4 hover:text-spina-dark'
   %td
     %ul
       - presentation.presenters.each do |presenter|
-        %li= link_to presenter.full_name, edit_admin_conferences_delegate_path(presenter)
-  %td.align-right
-    = link_to edit_admin_conferences_presentation_path(presentation), class: %w[button button-small button-link] do
-      = icon 'pencil-outline'
-      = t 'spina.edit'
+        %li= link_to presenter.full_name, edit_admin_conferences_delegate_path(presenter), class: 'block text-spina font-medium text-sm p-4 hover:text-spina-dark'
+  %td
+    = link_to edit_admin_conferences_presentation_path(presentation), class: 'btn btn-default mx-4 w-max' do
+      .flex.flex-nowrap.items-center.px-8.py-1
+        = heroicon 'pencil-alt', style: :outline, class: 'w-4 h-4'
+        .ml-2= t 'spina.edit'

data/app/views/spina/admin/conferences/presentations/index.html.haml

@@ -1,13 +1,18 @@
-- content_for(:header_actions) do
-  %label.button{ for: 'file' }
-    = icon('cog')
-    = t '.import'
-    = form_with url: import_admin_conferences_presentations_path do |f|
-      = f.submit style: 'display: none'
-      = f.file_field :file, multiple: false, style: 'display: none'
-  = link_to new_admin_conferences_presentation_path, class: %w[button button-primary], style: 'margin-right: 0' do
-    = icon 'plus'
-    = t '.new'
+= render Spina::UserInterface::HeaderComponent.new do |header|
+  - header.actions do
+    .ml-3
+      %label.btn.btn-primary.w-full{ for: 'file' }
+        = heroicon 'cog', style: :solid, class: 'w-7 h-7 -m1-2'
+        = t '.import'
+        = form_with url: import_admin_conferences_presentations_path do |f|
+          = f.submit style: 'display: none'
+          = f.file_field :file, multiple: false, style: 'display: none'
+
+    .ml-3
+      = link_to new_admin_conferences_presentation_path, class: 'btn btn-primary w-full' do
+        = heroicon 'plus', style: :solid, class: 'w-7 h-7 -m1-2'
+        = t '.new'
+
 
 = render partial: 'presentations', object: @presentations
 = link_to_next_page @presentations, 'Next'

data/app/views/spina/admin/conferences/rooms/_form.html.haml

@@ -1,23 +1,28 @@
-- if @room.errors.any?
-  - content_for :notifications do
-    = render 'errors', errors: @room.errors
+%div{ data: { controller: 'tabs',
+              tabs: { active: 'cursor-default text-gray-900 bg-spina-dark bg-opacity-10',
+                      inactive: 'cursor-pointer bg-transparent text-gray-400 border-transparent' } } }
+  = render Spina::UserInterface::HeaderComponent.new do |header|
+    - header.actions do
+      - if @room.persisted?
+        = render Spina::UserInterface::DropdownComponent.new do |dropdown|
+          - dropdown.button(classes: "btn btn-default px-3") do
+            = heroicon('dots-horizontal', style: :solid, class: "w-5 h-5 text-gray-600")
 
-= form_for [:admin_conferences, @room], html: { autocomplete: 'off' } do |f|
-  %header#header
-    = render partial: 'spina/admin/shared/breadcrumbs'
+          - dropdown.menu do
+            = button_to t('spina.permanently_delete'), admin_conferences_room_path(@room), method: :delete, class: "block w-full text-left px-4 py-2 text-sm leading-5 font-medium text-red-500 cursor-pointer bg-white hover:bg-red-100 hover:bg-opacity-50 hover:text-red-500 focus:outline-none focus:bg-gray-100 focus:text-gray-900", form: {data: { controller: 'confirm', confirm_message: t('.delete_confirmation', room: @room.name) } }
 
-    #header_actions
-      %button.button.button-primary{ type: 'submit' }
-        = icon 'check'
+      = button_tag type: :submit, form: dom_id(@room), class: 'btn btn-primary', data: { controller: 'button', action: 'button#loading', loading_message: t('spina.ui.saving')} do
+        = heroicon('check', style: :solid, class: 'w-5 h-5 mr-1 -ml-2')
         = t '.save'
 
-      = link_to t('spina.cancel'), admin_conferences_rooms_path, class: 'button', style: 'margin-right: 0'
+    - header.navigation do
+      %nav.-mb-3.mt-4
+        %ul.inline-flex.w-auto.rounded-md.bg-white
+          - @tabs.each do |tab|
+            %button.block.px-3.leading-relaxed.py-1.hover:text-gray-800.rounded-md.text-gray-400.font-medium.text-sm.flex.items-center.whitespace-nowrap{ type: 'button', data: { action: 'tabs#show', 'tabs-target': 'button', 'pane-id': "#{tab}" } }
+              = t ".#{tab}"
 
-    %nav#secondary.tabs
-      %ul
-        - @tabs.each_with_index do |tab, i|
-          %li{ class: ('active'if i == 0)}
-            = link_to t(".#{tab}"), "##{tab}"
-
-  #room_details.tab-content.active= render 'form_room_details', f: f
-  #presentations.tab-content= render partial: 'presentations', object: @room.presentations
+  .p-4.md:p-8
+    - @tabs.each_with_index do |tab, i|
+      %div{ 'data-tabs-target': 'pane', id: tab, hidden: i != 0 }
+        = render "form_#{tab}"

data/app/views/spina/admin/conferences/rooms/_form_presentations.html.haml

@@ -0,0 +1 @@
+= render partial: 'presentations', object: @room.presentations

data/app/views/spina/admin/conferences/rooms/_form_room_details.html.haml

@@ -1,16 +1,7 @@
-.page-form
-  .page-form-group
-    .page-form-label= Spina::Admin::Conferences::Room.human_attribute_name :institution
-    .page-form-control
-      .select-dropdown= f.collection_select :institution_id, Spina::Admin::Conferences::Institution.all, :id, :name, {}, required: true
-
-  .page-form-group
-    .page-form-label= Spina::Admin::Conferences::Room.human_attribute_name :building
-    .page-form-control= f.text_field :building, placeholder: Spina::Admin::Conferences::Room.human_attribute_name(:building), required: true
-
-  .page-form-group
-    .page-form-label= Spina::Admin::Conferences::Room.human_attribute_name :number
-    .page-form-control= f.text_field :number, placeholder: Spina::Admin::Conferences::Room.human_attribute_name(:number), required: true
-
-- unless @room.new_record?
-  .pull-right= link_to t('spina.permanently_delete'), admin_conferences_room_path(@room), method: :delete, data: { confirm: t('.delete_confirmation', room: @room.name) }, class: %w[button button-link button-danger]
+= form_with model: [spina, :admin_conferences, @room], id: dom_id(@room), html: { autocomplete: 'off' } do |f|
+  = render Spina::Forms::GroupComponent.new(label: Spina::Admin::Conferences::Room.human_attribute_name(:institution)) do
+    = f.collection_select :institution_id, Spina::Admin::Conferences::Institution.all, :id, :name, {}, class: 'form-select'
+  = render Spina::Forms::GroupComponent.new(label: Spina::Admin::Conferences::Institution.human_attribute_name(:building)) do
+    = render Spina::Forms::TextFieldComponent.new(f, :building)
+  = render Spina::Forms::GroupComponent.new(label: Spina::Admin::Conferences::Institution.human_attribute_name(:number)) do
+    = render Spina::Forms::TextFieldComponent.new(f, :number)

data/app/views/spina/admin/conferences/rooms/_room.html.haml

@@ -1,8 +1,11 @@
-%tr{ data: { room_id: room.id } }
-  %td= room.institution.name
-  %td= room.building
-  %td= link_to room.number, edit_admin_conferences_room_path(room)
-  %td.align-right
-    = link_to edit_admin_conferences_room_path(room), class: %w[button button-small button-link] do
-      = icon 'pencil-outline'
-      = t 'spina.edit'
+%tr.border-b{ data: { room_id: room.id } }
+  %td
+    .block.font-light.text-sm.p-4= room.institution.name
+  %td
+    .block.font-light.text-sm.p-4= room.building
+  %td= link_to room.number, edit_admin_conferences_room_path(room), class: 'block text-spina font-medium text-sm p-4 hover:text-spina-dark'
+  %td
+    = link_to edit_admin_conferences_room_path(room), class: 'btn btn-default mx-4 w-max' do
+      .flex.flex-nowrap.items-center.px-8.py-1
+        = heroicon 'pencil-alt', style: :outline, class: 'w-4 h-4'
+        .ml-2= t 'spina.edit'

data/app/views/spina/admin/conferences/rooms/index.html.haml

@@ -1,7 +1,22 @@
-- content_for(:header_actions) do
-  = link_to new_admin_conferences_room_path, class: %w[button button-primary], style: 'margin-right: 0' do
-    = icon 'plus'
-    = t '.new'
+= render Spina::UserInterface::HeaderComponent.new do |header|
+  - header.actions do
+    .ml-3
+      = link_to new_admin_conferences_room_path, class: 'btn btn-primary w-full' do
+        = heroicon 'plus', style: :solid, class: 'w-7 h-7 -m1-2'
+        = t '.new'
+
+  - header.navigation do
+    %nav.-mb-1.md:-mb-3.mt-4
+      %ul.inline-flex.w-auto.rounded-md.bg-white
+        %li
+          = render Spina::UserInterface::TabLinkComponent.new(Spina::Admin::Conferences::Institution.model_name.human(count: 0),
+                                                              admin_conferences_institutions_path,
+                                                              active: controller_name == 'institutions')
+        %li
+          = render Spina::UserInterface::TabLinkComponent.new(Spina::Admin::Conferences::Room.model_name.human(count: 0),
+                                                              admin_conferences_rooms_path,
+                                                              active: controller_name == 'rooms')
+
 
 = render partial: 'rooms', object: @rooms
 = link_to_next_page @rooms, 'Next'

data/app/views/spina/admin/conferences/sessions/_form.html.haml

@@ -1,23 +1,28 @@
-- if @session.errors.any?
-  - content_for :notifications do
-    = render 'errors', errors: @session.errors
+%div{ data: { controller: 'tabs',
+              tabs: { active: 'cursor-default text-gray-900 bg-spina-dark bg-opacity-10',
+                      inactive: 'cursor-pointer bg-transparent text-gray-400 border-transparent' } } }
+  = render Spina::UserInterface::HeaderComponent.new do |header|
+    - header.actions do
+      - if @session.persisted?
+        = render Spina::UserInterface::DropdownComponent.new do |dropdown|
+          - dropdown.button(classes: "btn btn-default px-3") do
+            = heroicon('dots-horizontal', style: :solid, class: "w-5 h-5 text-gray-600")
 
-= form_for [:admin_conferences, @session], html: { autocomplete: 'off' } do |f|
-  %header#header
-    = render partial: 'spina/admin/shared/breadcrumbs'
+          - dropdown.menu do
+            = button_to t('spina.permanently_delete'), admin_conferences_session_path(@session), method: :delete, class: "block w-full text-left px-4 py-2 text-sm leading-5 font-medium text-red-500 cursor-pointer bg-white hover:bg-red-100 hover:bg-opacity-50 hover:text-red-500 focus:outline-none focus:bg-gray-100 focus:text-gray-900", form: {data: { controller: 'confirm', confirm_message: t('.delete_confirmation', session: @session.name) } }
 
-    #header_actions
-      %button.button.button-primary{ type: 'submit' }
-        = icon 'check'
+      = button_tag type: :submit, form: dom_id(@session), class: 'btn btn-primary', data: { controller: 'button', action: 'button#loading', loading_message: t('spina.ui.saving')} do
+        = heroicon('check', style: :solid, class: 'w-5 h-5 mr-1 -ml-2')
         = t '.save'
 
-      = link_to t('spina.cancel'), admin_conferences_sessions_path, class: 'button', style: 'margin-right: 0'
+    - header.navigation do
+      %nav.-mb-3.mt-4
+        %ul.inline-flex.w-auto.rounded-md.bg-white
+          - @tabs.each do |tab|
+            %button.block.px-3.leading-relaxed.py-1.hover:text-gray-800.rounded-md.text-gray-400.font-medium.text-sm.flex.items-center.whitespace-nowrap{ type: 'button', data: { action: 'tabs#show', 'tabs-target': 'button', 'pane-id': "#{tab}" } }
+              = t ".#{tab}"
 
-    %nav#secondary.tabs
-      %ul
-        - @tabs.each_with_index do |tab, i|
-          %li{ class: ('active'if i == 0)}
-            = link_to t(".#{tab}"), "##{tab}"
-
-  #session_details.tab-content.active= render 'form_session_details', f: f
-  #presentations.tab-content= render partial: 'presentations', object: @session.presentations
+  .p-4.md:p-8
+    - @tabs.each_with_index do |tab, i|
+      %div{ 'data-tabs-target': 'pane', id: tab, hidden: i != 0 }
+        = render "form_#{tab}"

data/app/views/spina/admin/conferences/sessions/_form_presentations.html.haml

@@ -0,0 +1 @@
+= render partial: 'presentations', object: @session.presentations

data/app/views/spina/admin/conferences/sessions/_form_session_details.html.haml

@@ -1,21 +1,15 @@
-.page-form
-  .page-form-group
-    .page-form-label= Spina::Admin::Conferences::Session.human_attribute_name :name
-    .page-form-control= f.text_field :name, placeholder: Spina::Admin::Conferences::Session.human_attribute_name(:name), required: true
+= form_with model: [spina, :admin_conferences, @session], id: dom_id(@session), html: { autocomplete: 'off' } do |f|
+  = render Spina::Forms::GroupComponent.new(label: Spina::Admin::Conferences::Session.human_attribute_name(:name)) do
+    = render Spina::Forms::TextFieldComponent.new(f, :name)
 
-  .page-form-group
-    .page-form-label= Spina::Admin::Conferences::Session.human_attribute_name :presentation_type
-    .page-form-control
-      .input-group{ data: { controller: 'spina--admin--conferences--select-options', 'spina--admin--conferences--select_options': { record_value: @conferences } } }
-        .select-dropdown= select_tag :conference_id, options_from_collection_for_select(Spina::Admin::Conferences::Conference.all, :id, :name, (@session.conference.id unless @session.conference.blank?)), include_blank: true, required: true, data: { action: 'spina--admin--conferences--select-options#setVisibility','spina--admin--conferences--select_options_target': 'select', text_key: 'name' }
-        .select-dropdown= f.collection_select :presentation_type_id, @session.conference.present? ? @session.conference.presentation_types : Spina::Admin::Conferences::Conference.first.presentation_types, :id, :name, { include_blank: true }, required: true, data: {'spina--admin--conferences--select_options_target': 'select', text_key: 'name', key_path: 'presentation_types' }
+  %div{ data: { controller: 'select-options', 'select_options': { record_value: @conferences } } }
+    = render Spina::Forms::GroupComponent.new(label: Spina::Admin::Conferences::Session.human_attribute_name(:conference)) do
+      = select_tag :conference_id, options_from_collection_for_select(Spina::Admin::Conferences::Conference.all, :id, :name, (@session.conference.id unless @session.conference.blank?)), include_blank: true, data: { action: 'select-options#setVisibility','select_options_target': 'select', text_key: 'name' }
+    = render Spina::Forms::GroupComponent.new(label: Spina::Admin::Conferences::Session.human_attribute_name(:presentation_type)) do
+      = f.collection_select :presentation_type_id, @session.conference.present? ? @session.conference.presentation_types : Spina::Admin::Conferences::Conference.first.presentation_types, :id, :name, { include_blank: true }, data: {'select_options_target': 'select', text_key: 'name', key_path: 'presentation_types' }
 
-  .page-form-group
-    .page-form-label= Spina::Admin::Conferences::Session.human_attribute_name :room
-    .page-form-control
-      .input-group{ data: { controller: 'spina--admin--conferences--select-options', 'spina--admin--conferences--select_options': { record_value: @institutions } } }
-        .select-dropdown= select_tag :institution_id, options_from_collection_for_select(Spina::Admin::Conferences::Institution.all, :id, :name, (@session.institution.id unless @session.institution.blank?)), include_blank: true, required: true, data: { action: 'spina--admin--conferences--select-options#setVisibility','spina--admin--conferences--select_options_target': 'select', text_key: 'name' }
-        .select-dropdown= f.collection_select :room_id, @session.institution.present? ? @session.institution.rooms : Spina::Admin::Conferences::Institution.first.rooms, :id, :name, { include_blank: true }, required: true, data: {'spina--admin--conferences--select_options_target': 'select', text_key: 'name', key_path: 'rooms' }
-
-- unless @session.new_record?
-  .pull-right= link_to t('spina.permanently_delete'), admin_conferences_session_path(@session), method: :delete, data: { confirm: t('.delete_confirmation', session: @session.name) }, class: %w[button button-link button-danger]
+  %div{ data: { controller: 'select-options', 'select_options': { record_value: @institutions } } }
+    = render Spina::Forms::GroupComponent.new(label: Spina::Admin::Conferences::Session.human_attribute_name(:institution)) do
+      = select_tag :institution_id, options_from_collection_for_select(Spina::Admin::Conferences::Institution.all, :id, :name, (@session.institution.id unless @session.institution.blank?)), include_blank: true, data: { action: 'select-options#setVisibility','select_options_target': 'select', text_key: 'name' }
+    = render Spina::Forms::GroupComponent.new(label: Spina::Admin::Conferences::Session.human_attribute_name(:room)) do
+      = f.collection_select :room_id, @session.institution.present? ? @session.institution.rooms : Spina::Admin::Conferences::Institution.first.rooms, :id, :name, { include_blank: true }, data: {'select_options_target': 'select', text_key: 'name', key_path: 'rooms' }

data/app/views/spina/admin/conferences/sessions/_session.html.haml

@@ -1,8 +1,11 @@
-%tr{ data: { session_id: session.id } }
-  %td= link_to session.name, edit_admin_conferences_session_path(session)
-  %td= session.presentation_type_name
-  %td= session.room_name
-  %td.align-right
-    = link_to edit_admin_conferences_session_path(session), class: %w[button button-small button-link] do
-      = icon 'pencil-outline'
-      = t 'spina.edit'
+%tr.border-b{ data: { session_id: session.id } }
+  %td= link_to session.name, edit_admin_conferences_session_path(session), class: 'block text-spina font-medium text-sm p-4 hover:text-spina-dark'
+  %td
+    .block.font-light.text-sm.p-4= session.presentation_type_name
+  %td
+    .block.font-light.text-sm.p-4= session.room_name
+  %td
+    = link_to edit_admin_conferences_session_path(session), class: 'btn btn-default mx-4 w-max' do
+      .flex.flex-nowrap.items-center.px-8.py-1
+        = heroicon 'pencil-alt', style: :outline, class: 'w-4 h-4'
+        .ml-2= t 'spina.edit'

data/app/views/spina/admin/conferences/sessions/index.html.haml

@@ -1,7 +1,25 @@
-- content_for(:header_actions) do
-  = link_to new_admin_conferences_session_path, class: %w[button button-primary], style: 'margin-right: 0' do
-    = icon 'plus'
-    = t '.new'
+= render Spina::UserInterface::HeaderComponent.new do |header|
+  - header.actions do
+    .ml-3
+      = link_to new_admin_conferences_session_path, class: 'btn btn-primary w-full' do
+        = heroicon 'plus', style: :solid, class: 'w-7 h-7 -m1-2'
+        = t '.new'
+
+  - header.navigation do
+    %nav.-mb-1.md:-mb-3.mt-4
+      %ul.inline-flex.w-auto.rounded-md.bg-white
+        %li
+          = render Spina::UserInterface::TabLinkComponent.new(Spina::Admin::Conferences::Conference.model_name.human(count: 0),
+                                                              admin_conferences_conferences_path,
+                                                              active: controller_name == 'conferences')
+        %li
+          = render Spina::UserInterface::TabLinkComponent.new(Spina::Admin::Conferences::PresentationType.model_name.human(count: 0),
+                                                              admin_conferences_presentation_types_path,
+                                                              active: controller_name == 'presentation_types')
+        %li
+          = render Spina::UserInterface::TabLinkComponent.new(Spina::Admin::Conferences::Session.model_name.human(count: 0),
+                                                              admin_conferences_sessions_path,
+                                                              active: controller_name == 'sessions')
 
 = render partial: 'sessions', object: @sessions
 = link_to_next_page @sessions, 'Next'

data/app/views/spina/admin/hooks/conferences/_head.html.haml

@@ -1,7 +1 @@
-%meta{ name: 'turbo-root', content: '/admin/conferences' }
-%meta{name: 'turbo-cache-control', content: 'no-preview'}
-= stylesheet_link_tag 'spina/admin/conferences/application', media: 'all', data: { turbolinks_track: true }
-= stimulus_include_tags
-= javascript_include_tag 'turbo', type: 'module-shim'
 = javascript_include_tag 'spina/admin/conferences/application'
-= yield :head