Refactor/cells to components/catalogue sort arrows

CHANGELOG.md

@@ -38,6 +38,10 @@ All notable changes to this project will be documented in this file.
 - Cells -> ViewComponents refactoring:
   - Folio::Console::Form::HeaderCell -> Folio::Console::Form::HeaderComponent
   - Folio::PublishableHintCell -> Folio::Publishable::HintComponent
+  - Folio::Console::Ui::FlagCell -> Folio::Console::Ui::FlagComponent
+  - Folio::Console::Ui::WarningRibbonCell -> Folio::Console::Ui::WarningRibbonComponent
+  - Folio::Console::ConsoleNotes::CatalogueTooltipCell -> Folio::Console::ConsoleNotes::CatalogueTooltipComponent
+  - Folio::Console::CatalogueSortArrowsCell -> Folio::Console::CatalogueSortArrowsComponent
 - generalized tiptap_config.use_as_single_image_in_toolbar -> tiptap_config.toolbar with icon and slot names
 
 ### Fixed

app/cells/folio/console/catalogue_cell.rb

@@ -428,9 +428,9 @@ def label_for(attr = nil, skip_desktop_header: false, allow_sorting: false)
       else
         base = klass.human_attribute_name(attr)
 
-        if allow_sorting && arrows = cell("folio/console/catalogue_sort_arrows",
-                                          klass:,
-                                          attr:).show
+        component = Folio::Console::CatalogueSortArrowsComponent.new(klass:, attr:)
+        if allow_sorting && component.render?
+          arrows = render_view_component(component)
           content_tag(:span, "#{base} #{arrows}", class: "f-c-catalogue__label-with-arrows")
         else
           base

app/cells/folio/console/publishable_inputs/item/show.slim

@@ -37,6 +37,5 @@ div class=class_name data=data
                   atom_setting: model[:atom_setting] == false ? nil : "#{field}_until"
 
   - if field == :published
-    == cell('folio/console/ui/warning_ribbon',
-            t('.unpublished'),
-            class: "f-c-publishable-inputs-item__warning-ribbon")
+    == render_view_component(Folio::Console::Ui::WarningRibbonComponent.new(text: t('.unpublished'),
+                                                                            class_name: "f-c-publishable-inputs-item__warning-ribbon"))

app/components/folio/console/catalogue_sort_arrows_component.rb

@@ -0,0 +1,64 @@
+# frozen_string_literal: true
+
+class Folio::Console::CatalogueSortArrowsComponent < Folio::Console::ApplicationComponent
+  bem_class_name :active, :desc
+
+  def initialize(klass:, attr:)
+    @klass = klass
+    @attr = attr
+  end
+
+  def render?
+    return false unless @klass.present?
+
+    @klass.respond_to?("sort_by_#{asc_key}") && @klass.respond_to?("sort_by_#{desc_key}")
+  end
+
+  def url
+    h = request.query_parameters.dup
+    h.delete("page")
+
+    if asc?
+      h["sort"] = desc_key
+    else
+      h["sort"] = asc_key
+    end
+
+    "#{request.path}?#{h.to_query}"
+  end
+
+  def active?
+    @active
+  end
+
+  def asc?
+    @asc
+  end
+
+  def desc?
+    @desc
+  end
+
+  def title
+    if active?
+      t(".sort_desc")
+    else
+      t(".sort_asc")
+    end
+  end
+
+  private
+    def before_render
+      @asc = controller.params[:sort] == asc_key
+      @desc = controller.params[:sort] == desc_key
+      @active = @asc || @desc
+    end
+
+    def asc_key
+      @asc_key ||= "#{@attr}_asc"
+    end
+
+    def desc_key
+      @desc_key ||= "#{@attr}_desc"
+    end
+end

app/cells/folio/console/catalogue_sort_arrows/catalogue_sort_arrows.sass → app/components/folio/console/catalogue_sort_arrows_component.sass

@@ -38,3 +38,4 @@
 
   &--desc &__inner
     transform: rotate(180deg)
+

app/cells/folio/console/catalogue_sort_arrows/show.slim → app/components/folio/console/catalogue_sort_arrows_component.slim

@@ -1,5 +1,5 @@
 a[
-  class=class_name
+  class=bem_class_name
   href=url
   title=title
 ]

app/components/folio/console/ui/warning_ribbon_component.rb

@@ -0,0 +1,8 @@
+# frozen_string_literal: true
+
+class Folio::Console::Ui::WarningRibbonComponent < Folio::Console::ApplicationComponent
+  def initialize(text:, class_name: nil)
+    @text = text
+    @class_name = class_name
+  end
+end

app/cells/folio/console/ui/warning_ribbon/show.slim → app/components/folio/console/ui/warning_ribbon_component.slim

@@ -1,5 +1,5 @@
-.f-c-ui-warning-ribbon class=options[:class]
+.f-c-ui-warning-ribbon class=@class_name
   == cell('folio/console/ui/with_icon',
-          model,
+          @text,
           icon: :alert,
           icon_options: { width: 16 })

app/views/folio/console/ui/warning_ribbons.slim

@@ -4,7 +4,7 @@ h2 Warning ribbon
 
 h3 Standalone
 
-== cell('folio/console/ui/warning_ribbon', 'Warning text')
+= render(Folio::Console::Ui::WarningRibbonComponent.new(text: 'Warning text'))
 
 h3 Publishable inputs
 

config/locales/console.cs.yml

@@ -350,7 +350,7 @@ cs:
           in: Nahradit z YAML
           out: Uložit do YAML
           in_new: Vytvořit nový z YAML
-      catalogue_sort_arrows:
+      catalogue_sort_arrows_component:
         sort_asc: Řadit vzestupně
         sort_desc: Řadit sestupně
       catalogue:

config/locales/console.en.yml

@@ -346,7 +346,7 @@ en:
           in: Replace from YAML
           out: Save to YAML
           in_new: Create new from YAML
-      catalogue_sort_arrows:
+      catalogue_sort_arrows_component:
         sort_asc: Ascending sort
         sort_desc: Descending sort
       catalogue:

test/components/folio/console/catalogue_sort_arrows_component_test.rb

@@ -0,0 +1,34 @@
+# frozen_string_literal: true
+
+require "test_helper"
+
+class Folio::Console::CatalogueSortArrowsComponentTest < Folio::Console::ComponentTest
+  class SortablePage < Folio::Page
+    scope :sort_by_title_asc, -> { order(title: :asc) }
+    scope :sort_by_title_desc, -> { order(title: :desc) }
+  end
+
+  test "render? returns false when klass does not have sort scopes" do
+    component = Folio::Console::CatalogueSortArrowsComponent.new(klass: Folio::Page, attr: :title)
+
+    assert_not component.render?
+  end
+
+  test "render? returns true when klass has sort scopes" do
+    component = Folio::Console::CatalogueSortArrowsComponent.new(klass: SortablePage, attr: :title)
+
+    assert component.render?
+  end
+
+  test "render" do
+    with_controller_class(Folio::Console::BaseController) do
+      with_request_url "/console" do
+        component = Folio::Console::CatalogueSortArrowsComponent.new(klass: SortablePage, attr: :title)
+
+        render_inline(component)
+
+        assert_selector(".f-c-catalogue-sort-arrows")
+      end
+    end
+  end
+end

test/components/folio/console/ui/warning_ribbon_component_test.rb

@@ -0,0 +1,10 @@
+# frozen_string_literal: true
+
+require "test_helper"
+
+class Folio::Console::Ui::WarningRibbonComponentTest < Folio::Console::ComponentTest
+  test "show" do
+    render_inline(Folio::Console::Ui::WarningRibbonComponent.new(text: "foo"))
+    assert_selector(".f-c-ui-warning-ribbon")
+  end
+end