spina-admin-journal 0.6.2 → 1.0.0.rc1

data/app/controllers/spina/admin/journal/issues_controller.rb

@@ -5,7 +5,7 @@ module Spina
     module Journal
       # Controller for {Issue} records.
       # TODO: extract methods to helpers to reduce class length
-      class IssuesController < ApplicationController # rubocop:disable Metrics/ClassLength
+      class IssuesController < ApplicationController
         PARTS_PARAMS = [
           :name, :title, :type, :content, :filename, :signed_blob_id, :alt, :attachment_id, :image_id,
           { images_attributes: %i[filename signed_blob_id image_id alt],
@@ -46,23 +46,25 @@ module Spina
           add_breadcrumb t('spina.admin.journal.issues.issue_number', number: @issue.number)
         end
 
-        def create
+        def create # rubocop:disable Metrics/AbcSize
           @issue = Issue.new(issue_params)
           sister_issues = Issue.where(volume: @issue.volume_id)
           @issue.number = sister_issues.any? ? sister_issues.sorted_desc.first.number + 1 : 1
 
           if @issue.save
-            redirect_to admin_journal_issues_path, success: t('.saved')
+            redirect_to edit_admin_journal_issue_path(@issue), success: t('.saved')
           else
-            render :new
+            flash.now[:alert] = t('.failed')
+            render :new, status: :unprocessable_entity
           end
         end
 
         def update
           if @issue.update(issue_params)
-            redirect_to admin_journal_issues_path, success: t('.saved')
+            redirect_to edit_admin_journal_issue_path(@issue), success: t('.saved')
           else
-            render :edit
+            flash.now[:alert] = t('.failed')
+            render :edit, status: :unprocessable_entity
           end
         end
 
@@ -76,16 +78,11 @@ module Spina
         end
 
         def sort
-          ActiveRecord::Base.transaction do
-            sort_params.each do |id, new_pos|
-              # ignore uniqueness validation for now
-              Issue.find(id.to_i).update_attribute(:number, new_pos.to_i) # rubocop:disable Rails/SkipsModelValidations
-            end
-            validate_sort_order
+          params[:ids].each.with_index do |id, index|
+            Issue.where(id: id).update_all(number: index + 1) # rubocop:disable Rails/SkipsModelValidations
           end
-          render json: { success: true, message: t('.sort_success') }
-        rescue ActiveRecord::RecordInvalid
-          render json: { success: false, message: t('.sort_error') }
+          flash.now[:info] = t('spina.pages.sorting_saved')
+          render_flash
         end
 
         private
@@ -102,16 +99,6 @@ module Spina
           params.require(:issue).permit(PARAMS)
         end
 
-        def sort_params
-          params.require(:admin_journal_issues).require(:list).permit!
-        end
-
-        def validate_sort_order
-          Issue.where(volume_id: params[:volume_id]).each do |issue|
-            raise ActiveRecord::RecordInvalid if issue.invalid?
-          end
-        end
-
         def set_breadcrumb
           add_breadcrumb Issue.model_name.human(count: :many), admin_journal_issues_path
         end

data/app/controllers/spina/admin/journal/journals_controller.rb

@@ -35,7 +35,8 @@ module Spina
           if @journal.update(journal_params)
             redirect_to edit_admin_journal_journal_path(@journal), success: t('.saved')
           else
-            render :edit
+            flash.now[:alert] = t('.failed')
+            render :edit, status: :unprocessable_entity
           end
         end
 

data/app/controllers/spina/admin/journal/licences_controller.rb

@@ -42,17 +42,19 @@ module Spina
         def create
           @licence = Licence.new(licence_params)
           if @licence.save
-            redirect_to admin_journal_licences_path, success: t('.saved')
+            redirect_to edit_admin_journal_licence_path(@licence), success: t('.saved')
           else
-            render :new
+            flash.now[:alert] = t('.failed')
+            render :new, status: :unprocessable_entity
           end
         end
 
         def update
           if @licence.update(licence_params)
-            redirect_to admin_journal_licences_path, success: t('.saved')
+            redirect_to edit_admin_journal_licence_path(@licence), success: t('.saved')
           else
-            render :edit
+            flash.now[:alert] = t('.failed')
+            render :edit, status: :unprocessable_entity
           end
         end
 

data/app/controllers/spina/admin/journal/volumes_controller.rb

@@ -15,12 +15,16 @@ module Spina
 
         def edit; end
 
+        def new
+          create
+        end
+
         def create # rubocop:disable Metrics/AbcSize
           @volume = Volume.new
           @volume.journal_id = Journal.instance.id
           @volume.number = Volume.any? ? Volume.sorted_desc.first.number + 1 : 1
           @volume.save!
-          redirect_to admin_journal_volumes_path, success: t('.created', number: @volume.number)
+          redirect_to edit_admin_journal_volume_path(@volume), success: t('.created', number: @volume.number)
         rescue ActiveRecord::RecordNotUnique
           # can only happen because of some race condition where two Volumes are created at the same time
           logger.error 'Error when creating new volume. Retrying...'
@@ -37,30 +41,15 @@ module Spina
         end
 
         def sort
-          ActiveRecord::Base.transaction do
-            sort_params.each do |id, new_pos|
-              # ignore uniqueness validation for now
-              Volume.find(id.to_i).update_attribute(:number, new_pos.to_i) # rubocop:disable Rails/SkipsModelValidations
-            end
-            validate_sort_order
+          params[:ids].each.with_index do |id, index|
+            Volume.where(id: id).update_all(number: index + 1) # rubocop:disable Rails/SkipsModelValidations
           end
-          render json: { success: true, message: t('.sort_success') }
-        rescue ActiveRecord::RecordInvalid
-          render json: { success: false, message: t('.sort_error') }
+          flash.now[:info] = t('spina.pages.sorting_saved')
+          render_flash
         end
 
         private
 
-        def sort_params
-          params.require(:admin_journal_volumes).require(:list).permit!
-        end
-
-        def validate_sort_order
-          Volume.where(journal_id: params[:journal_id]).each do |volume|
-            raise ActiveRecord::RecordInvalid if volume.invalid?
-          end
-        end
-
         def set_breadcrumb
           add_breadcrumb Volume.model_name.human(count: :many), admin_journal_volumes_path
         end

data/app/views/spina/admin/hooks/journal/_primary_navigation.html.haml

@@ -1,29 +1,38 @@
-%li{ class: ('active' if %w[articles issues volumes].include? controller_name) }
-  = link_to spina.admin_journal_volumes_path do
-    = icon 'pages'
-    = ::Spina::Admin::Journal::Journal.instance.has_content?(:journal_abbreviation) ? ::Spina::Admin::Journal::Journal.instance.content(:journal_abbreviation) : ::Spina::Admin::Journal::Journal.instance.name
-    = icon 'caret-right'
+= render Spina::MainNavigation::SubNavComponent.new(:journal_content) do |nav|
+  - nav.icon do
+    = heroicon 'document-add', style: :solid, class: 'w-8 h-8 text-white md:mr-3'
+    .text-white.font-semibold.hidden{class: 'md:block transform -translate-x-2 ease-in-out duration-300 absolute md:relative opacity-0 transition-all', 'data-navigation-target': 'label'}
+      = Spina::Admin::Journal::Journal.instance.name
 
-    %ul
-      %li{ class: ('active' if %w[volumes].include? controller_name) }
-        = link_to ::Spina::Admin::Journal::Volume.model_name.human(count: :many), spina.admin_journal_volumes_path
-      %li{ class: ('active' if %w[issues].include? controller_name) }
-        = link_to ::Spina::Admin::Journal::Issue.model_name.human(count: :many), spina.admin_journal_issues_path
-      %li{ class: ('active' if %w[articles].include? controller_name) }
-        = link_to ::Spina::Admin::Journal::Article.model_name.human(count: :many), spina.admin_journal_articles_path
+  - nav.links do
+    = render Spina::MainNavigation::LinkComponent.new(Spina::Admin::Journal::Volume.model_name.human(count: :many),
+                                                      spina.admin_journal_volumes_path,
+                                                      active: controller_name == 'volumes')
+    = render Spina::MainNavigation::LinkComponent.new(Spina::Admin::Journal::Issue.model_name.human(count: :many),
+                                                      spina.admin_journal_issues_path,
+                                                      active: controller_name == 'issues')
+    = render Spina::MainNavigation::LinkComponent.new(Spina::Admin::Journal::Article.model_name.human(count: :many),
+                                                      spina.admin_journal_articles_path,
+                                                      active: controller_name == 'articles')
 
-%li{ class: ('active' if %w[journals authors institutions licences].include? controller_name) }
-  = link_to spina.edit_admin_journal_journal_path(::Spina::Admin::Journal::Journal.instance.id) do
-    = icon 'dots'
-    = t 'spina.admin.journal.navigation_title'
-    = icon 'caret-right'
 
-    %ul
-      %li{ class: ('active' if %w[journals].include? controller_name) }
-        = link_to ::Spina::Admin::Journal::Journal.model_name.human(count: :one), spina.edit_admin_journal_journal_path(::Spina::Admin::Journal::Journal.instance.id)
-      %li{ class: ('active' if %w[authors].include? controller_name) }
-        = link_to ::Spina::Admin::Journal::Author.model_name.human(count: :many), spina.admin_journal_authors_path
-      %li{ class: ('active' if %w[institutions].include? controller_name) }
-        = link_to ::Spina::Admin::Journal::Institution.model_name.human(count: :many), spina.admin_journal_institutions_path
-      %li{ class: ('active' if %w[licences].include? controller_name) }
-        = link_to ::Spina::Admin::Journal::Licence.model_name.human(count: :many), spina.admin_journal_licences_path
+= render Spina::MainNavigation::SubNavComponent.new(:journal_settings) do |nav|
+  - nav.icon do
+    = heroicon 'dots-horizontal', style: :solid, class: 'w-8 h-8 text-white md:mr-3'
+    .text-white.font-semibold.hidden{class: 'md:block transform -translate-x-2 ease-in-out duration-300 absolute md:relative opacity-0 transition-all', 'data-navigation-target': 'label'}
+      = t 'spina.admin.journal.navigation_title'
+
+  - nav.links do
+    = render Spina::MainNavigation::LinkComponent.new(Spina::Admin::Journal::Journal.model_name.human(count: :one),
+                                                      spina.edit_admin_journal_journal_path(Spina::Admin::Journal::Journal.instance.id),
+                                                      active: controller_name == 'journals')
+    = render Spina::MainNavigation::LinkComponent.new(Spina::Admin::Journal::Author.model_name.human(count: :many),
+                                                      spina.admin_journal_authors_path,
+                                                      active: controller_name == 'authors')
+    = render Spina::MainNavigation::LinkComponent.new(Spina::Admin::Journal::Institution.model_name.human(count: :many),
+                                                      spina.admin_journal_institutions_path,
+                                                      active: controller_name == 'institutions')
+    = render Spina::MainNavigation::LinkComponent.new(Spina::Admin::Journal::Licence.model_name.human(count: :many),
+                                                      spina.admin_journal_licences_path,
+                                                      active: controller_name == 'licences')
+

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

@@ -1,29 +1,28 @@
-- if @article.errors.any?
-  - content_for :notifications do
-    .notification.notification-danger.animated.fadeInRight
-      = icon 'exclamation'
-      .notification-message
-        = t 'spina.notifications.alert'
-        %small= @article.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 @article.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, @article], html: { autocomplete: "off" } do |f|
-  %header#header
-    = render partial: 'spina/admin/shared/breadcrumbs'
+          - dropdown.menu do
+            = button_to t('spina.permanently_delete'), admin_journal_article_path(@article), 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', title: @article.title) } }
 
-    #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(@article), 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_journal_articles_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}"
-
-  #details.tab-content.active= render 'form_details', f: f
-  #authors.tab-content= render 'form_authors', f: f
+  .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/articles/_form_authors.html.haml

@@ -1,15 +1 @@
-.sort-message
-.table-container
-  %table.table
-    %thead
-      %tr
-        %th= ::Spina::Admin::Journal::Affiliation.human_attribute_name :position
-        %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.html5sortable{ data: { id: @article.id, sorted_collection: 'admin_journal_authorships', sort_url: !@article.id.nil? && sort_admin_journal_authors_url(@article) } }
-      - if @article.authorships.any?
-        = render @article.authorships.sorted_within_article
-      - else
-        = render 'empty_list', message: t('.no_authors')
+= render Spina::Admin::Journal::AuthorshipsListComponent.new(authorships: @article.authorships.sorted_within_article, sortable: true)

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

@@ -1,62 +1,33 @@
-.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|
+  = render Spina::Forms::GroupComponent.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 }
+  = render Spina::Forms::GroupComponent.new(label: Spina::Admin::Journal::Article.human_attribute_name(:number),
+                                            description: t('.unchangeable')) do
+    = f.number_field :number, disabled: true
+  = render Spina::Forms::GroupComponent.new(label: Spina::Admin::Journal::Article.human_attribute_name(:title)) do
+    = render Spina::Forms::TextFieldComponent.new(f, :title)
+  = render Spina::Forms::GroupComponent.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] }
+  = render Spina::Forms::GroupComponent.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
+  = render Spina::Forms::GroupComponent.new(label: Spina::Admin::Journal::Author.model_name.human(count: :many)) do
+    %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
+  = render Spina::Forms::GroupComponent.new(label: Spina::Admin::Journal::Article.human_attribute_name(:url)) do
+    = render Spina::Forms::TextFieldComponent.new(f, :url)
+  = render Spina::Forms::GroupComponent.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/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 }
+          = render "form_#{tab}", f: f

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

@@ -1,20 +1,8 @@
-.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'
+= render Spina::Forms::GroupComponent.new(label: Spina::Admin::Journal::Affiliation.human_attribute_name(:first_name)) do
+  = render Spina::Forms::TextFieldComponent.new(ff, :first_name)
+= render Spina::Forms::GroupComponent.new(label: Spina::Admin::Journal::Affiliation.human_attribute_name(:surname)) do
+  = render Spina::Forms::TextFieldComponent.new(ff, :surname)
+= render Spina::Forms::GroupComponent.new(label: Spina::Admin::Journal::Affiliation.human_attribute_name(:institution)) do
+  = ff.collection_select :institution_id, Spina::Admin::Journal::Institution.sorted, :id, :name
+= render Spina::Forms::GroupComponent.new(label: t('.primary')) do
+  = radio_button_tag 'author[primary_affiliation_index]', ff.index, ff.object.status == 'primary'

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

@@ -1,18 +1 @@
-.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')
+= render Spina::Admin::Journal::ArticlesListComponent.new(articles: @author.affiliations.reduce([]) { |memo, affiliation| memo << affiliation.articles.to_a }.flatten )

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 [: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 }
+          = render "form_#{tab}", f: f