From 78aa0b89130fe3e09697c853bdd04c00d2ef7e72 Mon Sep 17 00:00:00 2001
From: Syphax Bouazzouni <gs_bouazzouni@esi.dz>
Date: Sat, 22 Jul 2023 20:13:37 +0200
Subject: [PATCH] implement tabs container stimulus controller tu update URL on
 tab change

---
 app/components/tab_item_component.rb          | 11 +++++-
 app/components/tabs_container_component.rb    | 14 ++++++-
 .../tabs_container_component.html.haml        |  4 +-
 .../tabs_container_component_controller.js    | 39 +++++++++++++++++++
 app/javascript/component_controllers/index.js |  4 ++
 5 files changed, 67 insertions(+), 5 deletions(-)
 create mode 100644 app/components/tabs_container_component/tabs_container_component_controller.js

diff --git a/app/components/tab_item_component.rb b/app/components/tab_item_component.rb
index cebb54a113..e7728cc092 100644
--- a/app/components/tab_item_component.rb
+++ b/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
diff --git a/app/components/tabs_container_component.rb b/app/components/tabs_container_component.rb
index 90f48194b9..f911eee1cb 100644
--- a/app/components/tabs_container_component.rb
+++ b/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
diff --git a/app/components/tabs_container_component/tabs_container_component.html.haml b/app/components/tabs_container_component/tabs_container_component.html.haml
index c456eb04fb..db2d498738 100644
--- a/app/components/tabs_container_component/tabs_container_component.html.haml
+++ b/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
 
diff --git a/app/components/tabs_container_component/tabs_container_component_controller.js b/app/components/tabs_container_component/tabs_container_component_controller.js
new file mode 100644
index 0000000000..a1d99677ee
--- /dev/null
+++ b/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());
+  }
+
+}
diff --git a/app/javascript/component_controllers/index.js b/app/javascript/component_controllers/index.js
index b9968423b4..cb96f8b3e1 100644
--- a/app/javascript/component_controllers/index.js
+++ b/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)