implement tabs container stimulus controller tu update URL on tab change

app/components/tab_item_component.rb

@@ -17,7 +17,7 @@ def selected_item?
   end
 
   def item_id
-    @title.parameterize.underscore
+    id.parameterize.underscore
   end
 
   def target_id
@@ -28,12 +28,19 @@ def target
     "##{target_id}"
   end
 
+  def id
+    @title
+  end
+  def title
+    @title.humanize
+  end
+
   def active_class
     selected_item? ? 'active show' : ''
   end
 
   def call
-    link_to(@title.humanize, "#hello", id: "#{item_id}_tab")
+    link_to(title, @path, id: "#{item_id}_tab")
   end
 
 end

app/components/tabs_container_component.rb

@@ -5,8 +5,20 @@ class TabsContainerComponent < ViewComponent::Base
   renders_many :items, TabItemComponent
   renders_many :item_contents
 
-  def initialize
+  def initialize(url_parameter: nil)
     super
+    @url_parameter = url_parameter
+  end
+
+  def tabs_container_data(item)
+    {
+      toggle: 'tab',
+      target: item.target,
+      'tab-id': item.id,
+      'tab-title': item.title,
+      'url-parameter': @url_parameter,
+      action: 'click->tabs-container#selectTab'
+    }
   end
 
 end

app/components/tabs_container_component/tabs_container_component.html.haml

@@ -1,7 +1,7 @@
-.tabs-container
+.tabs-container{data: {controller:'tabs-container'}}
   .tab-items.nav-tabs.nav
     - items.each do |item|
-      %div{data: { toggle: 'tab', target: item.target}, class: item.active_class}
+      %div{data:  tabs_container_data(item), class: item.active_class}
         = item
         %hr
 

app/components/tabs_container_component/tabs_container_component_controller.js

@@ -0,0 +1,39 @@
+import { Controller } from "@hotwired/stimulus";
+import {HistoryService} from "../../javascript/mixins/useHistory";
+
+export default class extends Controller {
+
+  connect() {
+    this.event = null
+  }
+
+
+  selectTab(event) {
+    this.event = event
+    if(this.#parameter()){
+      this.#updateURL()
+    }
+  }
+
+  #pageId(){
+    return this.event.currentTarget.getAttribute("data-tab-id")
+  }
+
+  #title(){
+    return this.event.currentTarget.getAttribute("data-tab-title")
+  }
+
+  #parameter(){
+    return this.event.currentTarget.getAttribute("data-url-parameter")
+  }
+
+
+  #url(){
+    return `?${this.#parameter()}=${this.#pageId()}`
+  }
+
+  #updateURL(){
+    (new HistoryService()).pushState({[this.#parameter()]: this.#pageId()}, this.#title(), this.#url());
+  }
+
+}

app/javascript/component_controllers/index.js

@@ -13,9 +13,13 @@ import Ontology_subscribe_button_component_controller
 import Search_input_component_controller
     from "../../components/search_input_component/search_input_component_controller";
 
+import Tabs_container_component_controller
+    from "../../components/tabs_container_component/tabs_container_component_controller";
+
 application.register("turbo-modal", TurboModalController)
 application.register("file-input", FileInputLoaderController)
 application.register("select-input", Select_input_component_controller)
 application.register("metadata-select", Metadata_selector_component_controller)
 application.register("subscribe-notes", Ontology_subscribe_button_component_controller)
 application.register("search-input", Search_input_component_controller)
+application.register("tabs-container", Tabs_container_component_controller)