spina-admin-journal 0.6.1 → 1.0.0.rc3

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

@@ -1,62 +1,43 @@
-.page-form
-  .page-form-group
-    .page-form-label
-      = ::Spina::Admin::Journal::Issue.model_name.human count: :one
-    .page-form-content
-      = f.collection_select :issue_id, ::Spina::Admin::Journal::Issue.sorted_desc, :id, ->(issue) { t '.volume_issue', volume_number: issue.volume.number, issue_number: issue.number }
-  .page-form-group
-    .page-form-label
-      = ::Spina::Admin::Journal::Article.human_attribute_name :number
-      %small= t '.unchangeable'
-    .page-form-content
-      = f.number_field :number, disabled: true
-  .page-form-group
-    .page-form-label
-      = ::Spina::Admin::Journal::Article.human_attribute_name :title
-    .page-form-content
-      = f.text_field :title
-  .page-form-group
-    .page-form-label
-      = Spina::Admin::Journal::Article.human_attribute_name :status
-    .page-form-content
-      = f.select :status, Spina::Admin::Journal::Article.statuses.keys.map { |key| [key.humanize, key] }
-  .page-form-group
-    .page-form-label
-      = Spina::Admin::Journal::Article.human_attribute_name :licence
-    .page-form-content
-      = f.collection_select :licence_id, Spina::Admin::Journal::Licence.sorted, :id, :name, prompt: true
-  .page-form-group
-    .page-form-label
-      = ::Spina::Admin::Journal::Author.model_name.human count: :many
-    .page-form-content
-      .well{ style: 'margin: 0' }
-        .table-container
-          %table.table{ style: 'margin: 0' }
-            %tbody.collection-check-boxes
-              = f.collection_check_boxes :affiliation_ids, Spina::Admin::Journal::Affiliation.sorted, :id, :name do |builder|
-                %tr
-                  %td{ style: "padding-left: 16px" }
-                    .form-checkbox
-                      = builder.check_box
-                      = builder.label
-  .page-form-group
-    .page-form-label
-      = ::Spina::Admin::Journal::Article.human_attribute_name :url
-    .page-form-content
-      = f.text_field :url
-  .page-form-group
-    .page-form-label
-      = ::Spina::Admin::Journal::Article.human_attribute_name :doi
-    .page-form-content
-      = f.text_field :doi
+= form_with model: [spina, :admin_journal, @article], id: dom_id(@article), html: { autocomplete: 'off' } do |f|
+  .-mt-6
+  = render Spina::Admin::Journal::FormGroupComponent.new(label: Spina::Admin::Journal::Issue.model_name.human(count: :one)) do
+    = f.collection_select(:issue_id,
+                          ::Spina::Admin::Journal::Issue.sorted_desc,
+                          :id,
+                          ->(issue) { t '.volume_issue', volume_number: issue.volume.number, issue_number: issue.number },
+                          {},
+                          class: 'form-select')
+  = render Spina::Admin::Journal::FormGroupComponent.new(label: Spina::Admin::Journal::Article.human_attribute_name(:number),
+                                                         description: t('.unchangeable')) do
+    = f.number_field :number, disabled: true, class: 'form-input'
+  = render Spina::Admin::Journal::FormGroupComponent.new(label: Spina::Admin::Journal::Article.human_attribute_name(:title)) do
+    = render Spina::Forms::TextFieldComponent.new(f, :title)
+  = render Spina::Admin::Journal::FormGroupComponent.new(label: Spina::Admin::Journal::Article.human_attribute_name(:status)) do
+    = f.select :status, Spina::Admin::Journal::Article.statuses.keys.map { |key| [key.humanize, key] }, {}, class: 'form-select'
+  = render Spina::Admin::Journal::FormGroupComponent.new(label: Spina::Admin::Journal::Article.human_attribute_name(:licence)) do
+    = f.collection_select :licence_id, Spina::Admin::Journal::Licence.sorted, :id, :name, { prompt: true }, { class: 'form-select' }
+  = render Spina::Admin::Journal::FormGroupComponent.new(label: Spina::Admin::Journal::Author.model_name.human(count: :many),
+                                                         description: t('.affiliation_info')) do
+    %ul.list-none.ml-4
+      = f.collection_check_boxes(:affiliation_ids,
+                                 Spina::Admin::Journal::Affiliation.sorted,
+                                 :id,
+                                 ->(affiliation) { t '.name_institution', name: affiliation.name, institution: affiliation.institution.name },
+                                 {},
+                                 class: 'form-checkbox rounded') do |builder|
+        %li
+          .form-checkbox
+            = builder.check_box
+            %span.text-sm.font-medium.text-gray-600= builder.label
+  = render Spina::Admin::Journal::FormGroupComponent.new(label: Spina::Admin::Journal::Article.human_attribute_name(:url)) do
+    = render Spina::Forms::TextFieldComponent.new(f, :url)
+  = render Spina::Admin::Journal::FormGroupComponent.new(label: Spina::Admin::Journal::Article.human_attribute_name(:doi)) do
+    = render Spina::Forms::TextFieldComponent.new(f, :doi)
 
   = 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 @article.new_record?
-  .pull-right= link_to t('spina.permanently_delete'), admin_journal_article_path(@article), method: :delete, data: { confirm: t('.delete_confirmation', title: @article.title) }, class: 'button button-link button-danger'

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

@@ -1,19 +1,9 @@
-- content_for(:header_actions) do
-  = link_to new_admin_journal_article_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_article_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::Article.human_attribute_name :number
-          %th= ::Spina::Admin::Journal::Issue.human_attribute_name :date
-          %th= ::Spina::Admin::Journal::Article.human_attribute_name :title
-          %th
+=  render Spina::Admin::Journal::ArticlesListComponent.new(articles: @articles)
 
-      %tbody
-        = render @articles.any? ? @articles : 'empty_list', message: t('.empty')

data/app/views/spina/admin/journal/articles/view_authors.html.haml

@@ -0,0 +1,2 @@
+%turbo-frame#article_authors
+  = render Spina::Admin::Journal::AuthorshipsListComponent.new(authorships: @article.authorships.sorted_within_article, sortable: true)

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

@@ -1,29 +1,29 @@
-- if @author.errors.any?
-  - content_for :notifications do
-    .notification.notification-danger.animated.fadeInRight
-      = icon 'exclamation'
-      .notification-message
-        = t 'spina.notifications.alert'
-        %small= @author.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 @author.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_journal, @author], html: {autocomplete: "off"} do |f|
-  %header#header
-    = render partial: 'spina/admin/shared/breadcrumbs'
+          - dropdown.menu do
+            = button_to t('spina.permanently_delete'), admin_journal_author_path(@author), 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: @author.primary_affiliation.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(@author), 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_authors_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
-  #articles.tab-content= render 'form_articles', f: f
+  .p-4.md:p-8
+    = form_with model: [spina, :admin_journal, @author], id: dom_id(@author), html: { autocomplete: 'off' } do |f|
+      - @tabs.each_with_index do |tab, i|
+        %div{ 'data-tabs-target': 'pane', id: tab, hidden: i != 0 }
+          .max-w-5xl= render "form_#{tab}", f: f

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

@@ -1,20 +1,12 @@
-.page-form-group
-  .page-form-label
-    = ::Spina::Admin::Journal::Affiliation.human_attribute_name :first_name
-  .page-form-content
-    = ff.text_field :first_name
-.page-form-group
-  .page-form-label
-    = ::Spina::Admin::Journal::Affiliation.human_attribute_name :surname
-  .page-form-content
-    = ff.text_field :surname
-.page-form-group
-  .page-form-label
-    = ::Spina::Admin::Journal::Affiliation.human_attribute_name :institution
-  .page-form-content
-    = ff.collection_select :institution_id, ::Spina::Admin::Journal::Institution.sorted, :id, :name
-.page-form-group
-  .page-form-label
-    = t '.primary'
-  .page-form-content
-    = radio_button_tag 'author[primary_affiliation_index]', ff.index, ff.object.status == 'primary'
+%div{ data: { 'part-id': "#{f.object.object_id}", 'tabs-target': 'pane' }, id: "pane_#{f.object.object_id}" }
+  = render Spina::Admin::Journal::FormGroupComponent.new(label: Spina::Admin::Journal::Affiliation.human_attribute_name(:first_name)) do
+    = render Spina::Forms::TextFieldComponent.new(f, :first_name)
+  = render Spina::Admin::Journal::FormGroupComponent.new(label: Spina::Admin::Journal::Affiliation.human_attribute_name(:surname)) do
+    = render Spina::Forms::TextFieldComponent.new(f, :surname)
+  = render Spina::Admin::Journal::FormGroupComponent.new(label: Spina::Admin::Journal::Affiliation.human_attribute_name(:institution)) do
+    = f.collection_select :institution_id, Spina::Admin::Journal::Institution.sorted, :id, :name, {}, class: 'form-select'
+  = render Spina::Admin::Journal::FormGroupComponent.new(label: t('.primary'), description: t('.primary_explanation')) do
+    = radio_button_tag 'author[primary_affiliation_index]', f.index, f.object.status == 'primary', class: 'form-radio'
+
+  .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/journal/authors/_form_articles.html.haml

@@ -1,18 +1,3 @@
-.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
-      - if @author.affiliations.any?
-        -# render empty list if no affiliation has any articles
-        = render 'empty_list', message: t('.no_articles') if @author.affiliations.reduce(true) do |memo, affiliation|
-          = render affiliation.articles
-          - memo && !affiliation.articles.any?
-      - else
-        = render 'empty_list', message: t('.no_articles')
+- if @author.persisted?
+  .-mt-4.md:-mt-8
+  %turbo-frame#author_articles{ src: spina.view_articles_admin_journal_author_path(@author), loading: 'lazy' }

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

@@ -1,6 +1,28 @@
-.page-form
-  = f.fields_for :affiliations, @author.affiliations do |ff|
-    .well= render 'form_affiliation', ff: ff
+.text-gray-700.text-sm.font-light= t '.explanation'
+.mt-6{ 'data-controller': 'repeater' }
+  %label.block.text-sm.leading-5.font-medium.text-gray-700= Spina::Admin::Journal::Author.human_attribute_name :affiliations
+  .-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
 
-- 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'
+      -# Fields for new affiliation
+      - new_affiliation = Spina::Admin::Journal::Affiliation.new
+      - fields = f.fields_for(:affiliations, [new_affiliation], child_index: new_affiliation.object_id) { |ff| render('form_affiliation', f: ff) }.gsub('\n', '')
+
+      -# Tabs
+      .pt-6.-ml-3
+        %div{ data: { action: 'exists->tabs#added', 'repeater-target' => 'list', 'tabs-target' => 'list' } }
+          - (f.object.affiliations || []).each.with_index do |affiliation, 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_#{affiliation.object_id}", 'repeater-target': 'listItem', 'tabs-target': 'button' }, type: 'button' }
+              = affiliation&.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_affiliation.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 :affiliations do |affiliation_fields|
+        = render 'form_affiliation', f: affiliation_fields
+
+= render Spina::Admin::Journal::FormGroupComponent.new(label: Spina::Admin::Journal::Author.human_attribute_name(:orcid),
+                                                       description: t('.orcid_info')) do
+  = render Spina::Forms::TextFieldComponent.new(f, :orcid)

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

@@ -0,0 +1,2 @@
+%turbo-frame#author_articles
+  = render Spina::Admin::Journal::ArticlesListComponent.new(articles: @author.affiliations.reduce([]) { |memo, affiliation| memo << affiliation.articles.to_a }.flatten )

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 [:admin_journal, @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 }
+          .max-w-5xl= render "form_#{tab}", f: f

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

@@ -1,9 +1,4 @@
-.page-form
-  .page-form-group
-    .page-form-label
-      = ::Spina::Admin::Journal::Institution.human_attribute_name :name
-    .page-form-content
-      = f.text_field :name
+.-mt-6
+= render Spina::Admin::Journal::FormGroupComponent.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,3 @@
-.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')
+- if @institution.persisted?
+  .-mt-4.md:-mt-8
+  %turbo-frame#institution_affiliations{ src: spina.view_affiliations_admin_journal_institution_path(@institution), loading: 'lazy' }

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

@@ -0,0 +1,2 @@
+%turbo-frame#institution_affiliations
+  = render Spina::Admin::Journal::AffiliationsListComponent.new(affiliations: @institution.affiliations.sorted)

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 [:admin_journal, @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 }
+        .max-w-5xl.max-w-5xl= 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,3 @@
-.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 @articles && @articles.any? ? @articles : 'empty_list', message: t('.no_articles')
+- if @issue.persisted?
+  .-mt-4.md:-mt-8
+    %turbo-frame#issue_articles{ src: spina.view_articles_admin_journal_issue_path(@issue), loading: 'lazy' }

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

@@ -1,32 +1,18 @@
-.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|
+  .-mt-6
+  = render Spina::Admin::Journal::FormGroupComponent.new(label: Spina::Admin::Journal::Volume.human_attribute_name(:number)) do
+    = f.collection_select :volume_id, ::Spina::Admin::Journal::Volume.sorted_desc, :id, :number, {}, class: 'form-select'
+  = render Spina::Admin::Journal::FormGroupComponent.new(label: Spina::Admin::Journal::Issue.human_attribute_name(:number),
+                                            description: t('.issue_unchangeable')) do
+    = f.number_field :number, disabled: true, class: 'form-input'
+  = render Spina::Admin::Journal::FormGroupComponent.new(label: Spina::Admin::Journal::Issue.human_attribute_name(:title)) do
+    = render Spina::Forms::TextFieldComponent.new(f, :title)
+  = render Spina::Admin::Journal::FormGroupComponent.new(label: Spina::Admin::Journal::Issue.human_attribute_name(:date)) do
+    = f.date_field :date, class: 'form-input'
+
   = 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/issues/view_articles.html.haml

@@ -0,0 +1,3 @@
+%turbo-frame#issue_articles
+  = render Spina::Admin::Journal::ArticlesListComponent.new(articles: @issue.articles, sortable: true)
+