spina-admin-journal 0.5.0 → 1.0.0.rc1

data/app/views/spina/admin/journal/authors/_form_details.html.haml

@@ -1,6 +1,2 @@
-.page-form
-  = f.fields_for :affiliations, @author.affiliations do |ff|
-    .well= render 'form_affiliation', ff: ff
-
-- unless @author.new_record?
-  .pull-right= link_to t('spina.permanently_delete'), admin_journal_author_path(@author), method: :delete, data: { confirm: t('.delete_confirmation', name: @author.primary_affiliation.name) }, class: 'button button-link button-danger'
+= f.fields_for :affiliations, @author.affiliations do |ff|
+  .well= render 'form_affiliation', ff: ff

data/app/views/spina/admin/journal/authors/index.html.haml

@@ -1,17 +1,9 @@
-- content_for(:header_actions) do
-  = link_to new_admin_journal_author_path, class: 'button button-primary' do
-    = icon 'plus'
-    = t '.new'
+= render Spina::UserInterface::HeaderComponent.new do |header|
+  - header.actions do
+    .ml-3
+      = link_to new_admin_journal_author_path, class: 'btn btn-primary w-full' do
+        = heroicon 'plus', style: :solid, class: 'w-7 h-7 -m1-2'
+        = t '.new'
 
-.well
-  .table-container
-    %table.table
-      %thead
-        %tr
-          %th= ::Spina::Admin::Journal::Affiliation.human_attribute_name :name
-          %th= ::Spina::Admin::Journal::Institution.model_name.human count: :one
-          %th= t '.number_of_articles'
-          %th
+= render Spina::Admin::Journal::AuthorsListComponent.new(authors: @authors)
 
-      %tbody
-        = render @authors.any? ? @authors : 'empty_list', message: t('.empty')

data/app/views/spina/admin/journal/institutions/_form.html.haml

@@ -1,29 +1,29 @@
-- if @institution.errors.any?
-  - content_for :notifications do
-    .notification.notification-danger.animated.fadeInRight
-      = icon 'exclamation'
-      .notification-message
-        = t 'spina.notifications.alert'
-        %small= @institution.errors.full_messages.join('<br />').html_safe
-      = link_to '#', data: { close_notification: true } do
-        = icon 'cross'
+%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 @institution.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 @institution, html: {autocomplete: "off"} do |f|
-  %header#header
-    = render partial: 'spina/admin/shared/breadcrumbs'
+          - dropdown.menu do
+            = button_to t('spina.permanently_delete'), admin_journal_institution_path(@institution), 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', name: @institution.name) } }
 
-    #header_actions
-      %button.button.button-primary{ type: 'submit', style: 'margin-right: 0', data: { disable_with: t('spina.pages.saving') } }
-        = icon 'check'
+      = button_tag type: :submit, form: dom_id(@institution), 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'
 
-      .button{ style: 'margin-right: 0' }= link_to t('spina.cancel'), admin_journal_institutions_path
+    - 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}"
-
-  #details.tab-content.active= render 'form_details', f: f
-  #view_affiliations.tab-content= render 'form_view_affiliations', f: f
+  .p-4.md:p-8
+    = form_with model: [spina, :admin_journal, @institution], id: dom_id(@institution), html: { autocomplete: 'off' } do |f|
+      - @tabs.each_with_index do |tab, i|
+        %div{ 'data-tabs-target': 'pane', id: tab, hidden: i != 0 }
+          = render "form_#{tab}", f: f

data/app/views/spina/admin/journal/institutions/_form_details.html.haml

@@ -1,9 +1,3 @@
-.page-form
-  .page-form-group
-    .page-form-label
-      = ::Spina::Admin::Journal::Institution.human_attribute_name :name
-    .page-form-content
-      = f.text_field :name
+= render Spina::Forms::GroupComponent.new(label: Spina::Admin::Journal::Institution.human_attribute_name(:name)) do
+  = render Spina::Forms::TextFieldComponent.new(f, :name)
 
-- unless @institution.new_record?
-  .pull-right= link_to t('spina.permanently_delete'), admin_journal_institution_path(@institution), method: :delete, data: { confirm: t('.delete_confirmation', name: @institution.name) }, class: 'button button-link button-danger'

data/app/views/spina/admin/journal/institutions/_form_view_affiliations.html.haml

@@ -1,10 +1 @@
-.table-container
-  %table.table
-    %thead
-      %tr
-        %th= ::Spina::Admin::Journal::Affiliation.human_attribute_name :name
-        %th= ::Spina::Admin::Journal::Affiliation.human_attribute_name :institution
-        %th= t '.number_of_articles'
-        %th
-    %tbody
-      = render @institution.affiliations.any? ? @institution.affiliations : 'empty_list', message: t('.no_affiliations')
+= render Spina::Admin::Journal::AffiliationsListComponent.new(affiliations: @institution.affiliations.sorted)

data/app/views/spina/admin/journal/institutions/index.html.haml

@@ -1,16 +1,8 @@
-- content_for(:header_actions) do
-  = link_to new_admin_journal_institution_path, class: 'button button-primary' do
-    = icon 'plus'
-    = t '.new'
+= render Spina::UserInterface::HeaderComponent.new do |header|
+  - header.actions do
+    .ml-3
+      = link_to new_admin_journal_institution_path, class: 'btn btn-primary w-full' do
+        = heroicon 'plus', style: :solid, class: 'w-7 h-7 -m1-2'
+        = t '.new'
 
-.well
-  .table-container
-    %table.table
-      %thead
-        %tr
-          %th= ::Spina::Admin::Journal::Institution.human_attribute_name :name
-          %th= t '.number_of_affiliations'
-          %th
-
-      %tbody
-        = render @institutions.any? ? @institutions : 'empty_list', message: t('.empty')
+= render Spina::Admin::Journal::InstitutionsListComponent.new(institutions: @institutions)

data/app/views/spina/admin/journal/issues/_form.html.haml

@@ -1,29 +1,29 @@
-- if @issue.errors.any?
-  - content_for :notifications do
-    .notification.notification-danger.animated.fadeInRight
-      = icon 'exclamation'
-      .notification-message
-        = t 'spina.notifications.alert'
-        %small= @issue.errors.full_messages.join('<br />').html_safe
-      = link_to '#', data: { close_notification: true } do
-        = icon 'cross'
+%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 @issue.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 @issue, html: { autocomplete: 'off' } do |f|
-  %header#header
-    = render partial: 'spina/admin/shared/breadcrumbs'
+          - dropdown.menu do
+            = button_to t('spina.permanently_delete'), admin_journal_issue_path(@issue), 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', number: @issue.number) } }
 
-    #header_actions
-      %button.button.button-primary{ type: 'submit', style: 'margin-right: 0', data: { disable_with: t('spina.pages.saving') } }
-        = icon 'check'
+      = button_tag type: :submit, form: dom_id(@issue), 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'
 
-      .button{style: 'margin-right: 0'}= link_to t('spina.cancel'), admin_journal_institutions_path
+    - 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}"
+  .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}"
 
-  #details.tab-content.active= render 'form_details', f: f
-  #articles.tab-content= render 'form_articles', f: f

data/app/views/spina/admin/journal/issues/_form_articles.html.haml

@@ -1,14 +1 @@
-.sort-message
-.well
-  .table-container
-    %table.table
-      %thead
-        %tr
-          %th= ::Spina::Admin::Journal::Volume.human_attribute_name :number
-          %th= ::Spina::Admin::Journal::Issue.human_attribute_name :number
-          %th= ::Spina::Admin::Journal::Article.human_attribute_name :number
-          %th= ::Spina::Admin::Journal::Issue.human_attribute_name :date
-          %th= ::Spina::Admin::Journal::Article.human_attribute_name :title
-          %th
-      %tbody.html5sortable{ data: { id: @issue.id, sorted_collection: 'admin_journal_articles', sort_url: !@issue.id.nil? && sort_admin_journal_articles_url(@issue) } }
-        = render @issue.articles.any? ? @issue.articles : 'empty_list', message: t('.no_articles')
+= render Spina::Admin::Journal::ArticlesListComponent.new(articles: @issue.articles, sortable: true)

data/app/views/spina/admin/journal/issues/_form_details.html.haml

@@ -1,32 +1,17 @@
-.page-form
-  .page-form-group
-    .page-form-label
-      = ::Spina::Admin::Journal::Volume.human_attribute_name :number
-    .page-form-content
-      = f.collection_select :volume_id, ::Spina::Admin::Journal::Volume.sorted_desc, :id, :number
-  .page-form-group
-    .page-form-label
-      = ::Spina::Admin::Journal::Issue.human_attribute_name :number
-      %small= t '.issue_unchangeable'
-    .page-form-content
-      = f.number_field :number, disabled: true
-  .page-form-group
-    .page-form-label
-      = ::Spina::Admin::Journal::Issue.human_attribute_name :title
-    .page-form-content
-      = f.text_field :title
-  .page-form-group
-    .page-form-label
-      = ::Spina::Admin::Journal::Issue.human_attribute_name :date
-    .page-form-content
-      = f.date_field :date
+= form_with model: [spina, :admin_journal, @issue], id: dom_id(@issue), html: { autocomplete: 'off' } do |f|
+  = render Spina::Forms::GroupComponent.new(label: Spina::Admin::Journal::Volume.human_attribute_name(:number)) do
+    = f.collection_select :volume_id, ::Spina::Admin::Journal::Volume.sorted_desc, :id, :number
+  = render Spina::Forms::GroupComponent.new(label: Spina::Admin::Journal::Issue.human_attribute_name(:number),
+                                            description: t('.issue_unchangeable')) do
+    = f.number_field :number, disabled: true
+  = render Spina::Forms::GroupComponent.new(label: Spina::Admin::Journal::Issue.human_attribute_name(:title)) do
+    = render Spina::Forms::TextFieldComponent.new(f, :title)
+  = render Spina::Forms::GroupComponent.new(label: Spina::Admin::Journal::Issue.human_attribute_name(:date)) do
+    = f.date_field :date
+
   = f.fields_for :"#{@locale}_content", @parts do |ff|
-    = ff.hidden_field :type, value: ff.object.class.name
+    = ff.hidden_field :type, value: ff.object.class
     = ff.hidden_field :title
     = ff.hidden_field :name
 
-    .page-form-group.page-part{ data: { name: ff.object.name } }
-      = render "spina/admin/parts/#{parts_partial_namespace(ff.object.class.name)}/form", f: ff
-
-- unless @issue.new_record?
-  .pull-right= link_to t('spina.permanently_delete'), admin_journal_issue_path(@issue), method: :delete, data: { confirm: t('.delete_confirmation', number: @issue.number) }, class: 'button button-link button-danger'
+    = render "spina/admin/parts/#{parts_partial_namespace(ff.object.class.to_s)}/form", f: ff

data/app/views/spina/admin/journal/issues/index.html.haml

@@ -1,18 +1,9 @@
-- content_for(:header_actions) do
-  = link_to new_admin_journal_issue_path, class: 'button button-primary' do
-    = icon 'plus'
-    = t '.new'
+= render Spina::UserInterface::HeaderComponent.new do |header|
+  - header.actions do
+    .ml-3
+      = link_to new_admin_journal_issue_path, class: 'btn btn-primary w-full' do
+        = heroicon 'plus', style: :solid, class: 'w-7 h-7 -m1-2'
+        = t '.new'
 
-.well
-  .table-container
-    %table.table
-      %thead
-        %tr
-          %th= ::Spina::Admin::Journal::Volume.human_attribute_name :number
-          %th= ::Spina::Admin::Journal::Issue.human_attribute_name :number
-          %th= ::Spina::Admin::Journal::Issue.human_attribute_name :title
-          %th= ::Spina::Admin::Journal::Issue.human_attribute_name :date
-          %th
+= render Spina::Admin::Journal::IssuesListComponent.new(issues: @issues, sortable: false)
 
-      %tbody
-        = render @issues.any? ? @issues : 'empty_list', message: t('.empty')

data/app/views/spina/admin/journal/journals/_form.html.haml

@@ -1,35 +1,25 @@
-- if @journal.errors.any?
-  - content_for :notifications do
-    .notification.notification-danger.animated.fadeInRight
-      = icon 'exclamation'
-      .notification-message
-        = t 'spina.notifications.alert'
-        %small= @journal.errors.full_messages.join('<br />').html_safe
-      = link_to '#', data: { close_notification: true } do
-        = icon 'cross'
+= render Spina::UserInterface::HeaderComponent.new do |header|
+  - header.actions do
+    - if @journal.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 @journal, html: { autocomplete: "off" } do |f|
-  %header#header
-    .breadcrumbs
-      = render_breadcrumbs
-    #header_actions
-      %button.button.button-primary{ type: 'submit', style: 'margin-right: 0', data: { disable_with: t('spina.pages.saving') } }
-        = icon 'check'
-        = t '.save'
-  .tab-content.active
-    .page-form
-      .page-form-group
-        .page-form-label
-          = ::Spina::Admin::Journal::Journal.human_attribute_name :name
-        .page-form-content
-          = f.text_field :name
-      = f.fields_for :"#{@locale}_content", @parts do |ff|
-        = ff.hidden_field :type, value: ff.object.class.name
-        = ff.hidden_field :title
-        = ff.hidden_field :name
+        - dropdown.menu do
+          = button_to t('spina.permanently_delete'), admin_journal_journal_path(@journal), 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', name: @journal.name) } }
 
-        .page-form-group.page-part{ data: { name: ff.object.name } }
-          = render "spina/admin/parts/#{parts_partial_namespace(ff.object.class.name)}/form", f: ff
+    = button_tag type: :submit, form: dom_id(@journal), 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'
 
-  - unless @journal.new_record?
-    .pull-right= link_to t('spina.permanently_delete'), admin_journal_journal_path(@journal), method: :delete, data: { confirm: t('.delete_confirmation', name: @journal.name) }, class: 'button button-link button-danger'
+.p-4.md:p-8
+  = form_with model: [spina, :admin_journal, @journal], id: dom_id(@journal), html: { autocomplete: 'off' } do |f|
+    = render Spina::Forms::GroupComponent.new(label: Spina::Admin::Journal::Journal.human_attribute_name(:name)) do
+      = render Spina::Forms::TextFieldComponent.new(f, :name)
+
+    = f.fields_for :"#{@locale}_content", @parts do |ff|
+      = ff.hidden_field :type, value: ff.object.class
+      = ff.hidden_field :title
+      = ff.hidden_field :name
+
+      = render "spina/admin/parts/#{parts_partial_namespace(ff.object.class.to_s)}/form", f: ff

data/app/views/spina/admin/journal/licences/_form.html.haml

@@ -1,43 +1,28 @@
-- if @licence.errors.any?
-  - content_for :notifications do
-    .notification.notification-danger.animated.fadeInRight
-      = icon 'exclamation'
-      .notification-message
-        = t 'spina.notifications.alert'
-        %small= @licence.errors.full_messages.join('<br />').html_safe
-      = link_to '#', data: { close_notification: true } do
-        = icon 'cross'
+= render Spina::UserInterface::HeaderComponent.new do |header|
+  - header.actions do
+    - if @licence.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 @licence, html: { autocomplete: 'off' } do |f|
-  %header#header
-    = render partial: 'spina/admin/shared/breadcrumbs'
+        - dropdown.menu do
+          = button_to t('spina.permanently_delete'), admin_journal_licence_path(@licence), 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', name: @licence.name) } }
 
-    #header_actions
-      %button.button.button-primary{ type: 'submit', style: 'margin-right: 0', data: { disable_with: t('spina.pages.saving') } }
-        = icon 'check'
-        = t '.save'
+    = button_tag type: :submit, form: dom_id(@licence), 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'
 
-      .button{ style: 'margin-right: 0' }= link_to t('spina.cancel'), admin_journal_licences_path
-
-  .page-form
-    .page-form-group
-      .page-form-label
-        = ::Spina::Admin::Journal::Licence.human_attribute_name :name
-      .page-form-content
-        = f.text_field :name
-    .page-form-group
-      .page-form-label
-        = ::Spina::Admin::Journal::Licence.human_attribute_name :abbreviated_name
-      .page-form-content
-        = f.text_field :abbreviated_name
+.p-4.md:p-8
+  = form_with model: [spina, :admin_journal, @licence], id: dom_id(@licence), html: { autocomplete: 'off' } do |f|
+    = render Spina::Forms::GroupComponent.new(label: Spina::Admin::Journal::Licence.human_attribute_name(:name)) do
+      = render Spina::Forms::TextFieldComponent.new(f, :name)
+    = render Spina::Forms::GroupComponent.new(label: Spina::Admin::Journal::Licence.human_attribute_name(:abbreviated_name)) do
+      = render Spina::Forms::TextFieldComponent.new(f, :abbreviated_name)
 
     = f.fields_for :"#{@locale}_content", @parts do |ff|
-      = ff.hidden_field :type, value: ff.object.class.name
+      = ff.hidden_field :type, value: ff.object.class
       = ff.hidden_field :title
       = ff.hidden_field :name
 
-      .page-form-group.page-part{ data: { name: ff.object.name } }
-        = render "spina/admin/parts/#{parts_partial_namespace(ff.object.class.name)}/form", f: ff
+      = render "spina/admin/parts/#{parts_partial_namespace(ff.object.class.to_s)}/form", f: ff
 
-  - unless @licence.new_record?
-    .pull-right= link_to t('spina.permanently_delete'), admin_journal_licence_path(@licence), method: :delete, data: { confirm: t('.delete_confirmation', name: @licence.name) }, class: 'button button-link button-danger'

data/app/views/spina/admin/journal/licences/index.html.haml

@@ -1,17 +1,8 @@
-- content_for(:header_actions) do
-  = link_to new_admin_journal_licence_path, class: 'button button-primary' do
-    = icon 'plus'
-    = t '.new'
+= render Spina::UserInterface::HeaderComponent.new do |header|
+  - header.actions do
+    .ml-3
+      = link_to new_admin_journal_licence_path, class: 'btn btn-primary w-full' do
+        = heroicon 'plus', style: :solid, class: 'w-7 h-7 -m1-2'
+        = t '.new'
 
-.well
-  .table-container
-    %table.table
-      %thead
-        %tr
-          %th= ::Spina::Admin::Journal::Licence.human_attribute_name :name
-          %th= ::Spina::Admin::Journal::Licence.human_attribute_name :abbreviated_name
-          %th= t '.num_articles'
-          %th
-
-      %tbody
-        = render @licences.any? ? @licences : 'empty_list', message: t('.empty')
+= render Spina::Admin::Journal::LicencesListComponent.new(licences: @licences)

data/app/views/spina/admin/journal/volumes/_form.html.haml

@@ -1,15 +1,28 @@
-= form_for @volume, html: { autocomplete: 'off' } do |f|
-  %header#header
-    = render partial: 'spina/admin/shared/breadcrumbs'
+%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 @volume.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")
 
-    #header_actions
-      .button{ style: 'margin-right: 0' }= link_to t('spina.cancel'), admin_journal_volumes_path
+          - dropdown.menu do
+            = button_to t('spina.permanently_delete'), admin_journal_volume_path(@volume), 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', number: @volume.number) } }
 
-    %nav#secondary.tabs
-      %ul
-        - @tabs.each_with_index do |tab, i|
-          %li{ class: ('active' if i == 0) }
-            = link_to t(".#{tab}"), "##{tab}"
+      = button_tag type: :submit, form: dom_id(@volume), 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'
 
-  #details.tab-content.active= render 'form_details', f: f
-  #issues.tab-content= render 'form_issues', f: f
+    - 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}"
+
+  .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/journal/volumes/_form_details.html.haml

@@ -1,10 +1,4 @@
-.page-form
-  .page-form-group
-    .page-form-label
-      = ::Spina::Admin::Journal::Volume.human_attribute_name :number
-      %small= t '.unchangeable'
-    .page-form-content
-      = f.number_field :number, disabled: true
-
-- unless @volume.new_record?
-  .pull-right= link_to t('spina.permanently_delete'), admin_journal_volume_path(@volume), method: :delete, data: { confirm: t('.delete_confirmation', number: @volume.number) }, class: 'button button-link button-danger'
+= form_with model: [spina, :admin_journal, @volume], id: dom_id(@volume), html: { autocomplete: 'off' } do |f|
+  = render Spina::Forms::GroupComponent.new(label: Spina::Admin::Journal::Volume.human_attribute_name(:number),
+                                            description: t('.unchangeable')) do
+    = f.number_field :number, disabled: true

data/app/views/spina/admin/journal/volumes/_form_issues.html.haml

@@ -1,13 +1 @@
-.sort-message
-.well
-  .table-container
-    %table.table
-      %thead
-        %tr
-          %th= ::Spina::Admin::Journal::Volume.human_attribute_name :number
-          %th= ::Spina::Admin::Journal::Issue.human_attribute_name :number
-          %th= ::Spina::Admin::Journal::Issue.human_attribute_name :title
-          %th= ::Spina::Admin::Journal::Issue.human_attribute_name :date
-          %th
-      %tbody.html5sortable{ data: { id: @volume.id, sorted_collection: 'admin_journal_issues', sort_url: sort_admin_journal_issues_url(@volume) } }
-        = render @volume.issues.any? ? @volume.issues.sorted_asc : 'empty_list', message: t('.no_issues')
+= render Spina::Admin::Journal::IssuesListComponent.new(issues: @volume.issues, sortable: true)

data/app/views/spina/admin/journal/volumes/index.html.haml

@@ -1,17 +1,8 @@
-- content_for(:header_actions) do
-  = link_to admin_journal_volumes_path, method: :post, class: 'button button-primary' do
-    = icon 'plus'
-    = t '.new'
+= render Spina::UserInterface::HeaderComponent.new do |header|
+  - header.actions do
+    .ml-3
+      = link_to new_admin_journal_volume_path, class: 'btn btn-primary w-full' do
+        = heroicon 'plus', style: :solid, class: 'w-7 h-7 -m1-2'
+        = t '.new'
 
-.sort-message
-.well
-  .table-container
-    %table.table
-      %thead
-        %tr
-          %th= ::Spina::Admin::Journal::Volume.human_attribute_name :number
-          %th= t '.date'
-          %th
-
-      %tbody.html5sortable{ data: { id: ::Spina::Admin::Journal::Journal.instance.id, sorted_collection: 'admin_journal_volumes', sort_url: sort_admin_journal_volumes_url(::Spina::Admin::Journal::Journal.instance.id) } }
-        = render @volumes.any? ? @volumes : 'empty_list', message: t('.empty')
+= render Spina::Admin::Journal::VolumesListComponent.new(volumes: @volumes)

data/app/views/spina/admin/parts/admin/journal/page_ranges/_form.html.haml

@@ -0,0 +1,6 @@
+.page-form-label= f.object.title
+.page-form-control
+  = f.number_field :first_page, style: 'width: 10%;'
+  –
+  = f.number_field :last_page, style: 'width: 10%;'
+