[FIX] HORILLA VIEWS: Inside htmx not trigger due to one-time hx

horilla_views/generic/cbv/pipeline.py

@@ -0,0 +1,59 @@
+"""
+horilla_views/generic/cbv/pipeline
+"""
+
+from django.views.generic import ListView
+from django.db import models
+from django_filters import FilterSet
+from horilla_views.cbv_methods import get_short_uuid
+from horilla.horilla_middlewares import _thread_locals
+
+
+class Pipeline(ListView):
+    """
+    Pipeline
+    """
+
+    model: models.Model = None
+    filter_class: FilterSet = None
+    field: str = ""
+    field_filter_class: FilterSet = None
+    field_model: models.Model = None
+    selected_instances_key_name: str = ""
+    allowed_fields: list = []
+    columns: list = []
+    view_id: str = get_short_uuid(10, "pipeline")
+    actions: list = []
+
+    template_name = "generic/pipeline/pipeline.html"
+
+    def __init__(self, **kwargs):
+        super().__init__(**kwargs)
+        self.request = getattr(_thread_locals, "request", None)
+        self.grouper = self.request.GET.get("grouper", self.grouper)
+        for allowed_field in self.allowed_fields:
+            if self.grouper == allowed_field["field"]:
+                self.field_model = allowed_field["model"]
+                self.field_filter_class = allowed_field["filter"]
+                self.url = allowed_field["url"]
+                self.parameters = allowed_field["parameters"]
+                self.actions = allowed_field["actions"]
+
+    def get_queryset(self):
+        if not self.queryset:
+            self.queryset = self.field_filter_class(self.request.GET).qs.filter(
+                **self.kwargs
+            )
+        return self.queryset
+
+    def get_context_data(self, **kwargs):
+
+        context = super().get_context_data(**kwargs)
+        context["groups"] = self.queryset
+        context["view_id"] = self.view_id
+        context["allowed_fields"] = self.allowed_fields
+        context["url"] = self.url
+        context["parameters"] = self.parameters
+        context["actions"] = self.actions
+        context["selected_instances_key_name"] = self.selected_instances_key_name
+        return context

horilla_views/templates/generic/horilla_tabs.html

@@ -15,14 +15,11 @@
       <li
         class="oh-tabs__tab d-flex {% if forloop.counter == 1 and not active_target %} oh-tabs__tab--active {% endif %}"
         data-target="#{{view_id}}{{forloop.counter}}"
-        {% comment %} hx-get="{{tab.url}}?{{request.GET.urlencode}}"
-        hx-target="#{{view_id}}{{forloop.counter}}" {% endcomment %}
         onclick="
         switchTab(event);
-        if (!this.dataset.processed) {
+        if (!$(this).attr('data-loaded')) {
             htmx.ajax('GET', '{{tab.url}}?{{request.GET.urlencode}}', {target: '#{{view_id}}{{forloop.counter}}'});
-            this.setAttribute('hx-disable', '[true]');
-            this.dataset.processed = 'true';
+            this.setAttribute('data-loaded', 'true');
         }
         "
       >
@@ -68,7 +65,7 @@
                 {% if instance %}
                 {% if action.accessibility|accessibility:instance %}
                 <li class="oh-dropdown__item">
-                  <a {{action.attrs|safe}}>{{action.action}}</a>
+                  <a {{action.attrs|safe}} hx-on::after-settle="Alpine.initTree($el)">{{action.action}}</a>
                 </li>
                 {% endif %}
                 {% else %}

horilla_views/templates/generic/pipeline/pipeline.html

@@ -0,0 +1,64 @@
+{% load i18n recruitmentfilters %}
+{% load generic_template_filters %}
+<div id="{{view_id}}">
+  {% for group in groups %}
+  <div id="{{selected_instances_key_name}}{{ group.id }}" data-ids="[]"></div>
+  <div class="oh-tabs__movable-area mb-2">
+    <div class="oh-tabs__movable">
+      <div class="oh-tabs__movable-header"  onclick="$(this).parent().find('.oh-tabs__movable-body').toggleClass('d-none');">
+        <input class="oh-tabs__movable-title oh-table__editable-input" value="{{group.stage}}" readonly />
+
+        <div onclick="event.stopPropagation()" class="oh-dropdown" x-data="{open: false}">
+          <div style="cursor: pointer;" onclick="event.stopPropagation()" class="oh-dropdown" x-data="{open: false}">
+            <button
+              class="oh-btn oh-stop-prop oh-btn--transparent oh-accordion-meta__btn"
+              @click="open = !open"
+              @click.outside="open = false"
+              title="Actions"
+            >
+              <ion-icon
+                name="ellipsis-vertical"
+                role="img"
+                class="md hydrated"
+                aria-label="ellipsis vertical"
+              ></ion-icon>
+            </button>
+            <div
+              class="oh-dropdown__menu oh-dropdown__menu--right"
+              x-show="open"
+              style="display: none"
+            >
+              <ul class="oh-dropdown__items">
+                {% for action in actions %}
+                {% if action.accessibility|accessibility:group %}
+                <li class="oh-dropdown__item">
+                  <a {{action.attrs|format:group|safe}}>{{action.action}}</a>
+                </li>
+                {% endif %}
+                {% endfor %}
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div 
+      class="oh-tabs__movable-body position-relative"
+      hx-get="{{url}}?{% for parameter in parameters %}{{parameter|format:group}}&{% endfor %}{{request.GET.urlencode}}"
+      hx-trigger="load"
+      
+      >
+    </div>
+    </div>
+  </div>
+  {% endfor %}
+  <script>
+    var tabId = $("#{{view_id}}").closest(".oh-tabs__content").attr("id");
+    var badge = $(`#badge-${tabId}`);
+    var count = "{{groups|length}}";
+    var label = badge.attr("data-badge-label") || "";
+    var title = count + " " + label;
+    badge.html(count);
+    badge.attr("title", title);
+  </script>
+</div>
+