[UPDT] HORILLA VIEWS: htmxLoadIndicator updates

horilla_views/generic/cbv/views.py

@@ -961,6 +961,9 @@ class HorillaFormView(FormView):
                         label=form.fields[field].label,
                         required=form.fields[field].required,
                     )
+                    form.fields[field].widget.option_template_name = (
+                        "horilla_widgets/select_option.html",
+                    )
                     form.fields[field].widget.attrs = attrs
                     form.initial[field] = value
             if pk:

horilla_views/templates/generic/horilla_card.html

@@ -2,7 +2,7 @@
 <div id="{{view_id|safe}}">
   <script>
     if (!$(".HTV").length) {
-      $("#reloadMessagesButton").click()
+        reloadMessage(null);
     }
   </script>
   <div class="d-flex justify-content-between mb-2">
@@ -66,7 +66,7 @@
       {% endif %}
       <div class="oh-kanban-card__details">
         <span class="oh-kanban-card__title">{{details.title|format:instance|selected_format:request.user.employee_get.employee_work_info.company_id|safe}}</span>
-        <span class="oh-kanban-card__subtitle">{{details.subtitle|format:instance|selected_format:request.user.employee_get.employee_work_info.company_id|safe}}</span>
+        <div class="" style="display: grid;">{{details.subtitle|format:instance|selected_format:request.user.employee_get.employee_work_info.company_id|safe}}</div>
       </div>
       {% if actions %}
       <div class="oh-kanban-card__dots" onclick="event.stopPropagation()">
@@ -121,6 +121,7 @@
           hx-get="{{search_url}}?{{request.GET.urlencode}}&filter_applied=on"
           hx-swap="outerHTML"
           hx-target="#{{view_id|safe}}"
+          hx-on-htmx-before-request="htmxLoadIndicator(this);"
         />
         <span class="oh-pagination__label"
           >{% trans "of" %} {{queryset.paginator.num_pages}}</span
@@ -134,6 +135,7 @@
             hx-get="{{search_url}}?{{request.GET.urlencode}}&page=1&filter_applied=on"
             hx-swap="outerHTML"
             hx-target="#{{view_id|safe}}"
+            hx-on:click="htmxLoadIndicator(this);"
             class="oh-pagination__link"
             >{% trans "First" %}</a
           >
@@ -143,6 +145,7 @@
             hx-get="{{search_url}}?{{request.GET.urlencode}}&page={{ queryset.previous_page_number }}&filter_applied=on"
             hx-swap="outerHTML"
             hx-target="#{{view_id|safe}}"
+            hx-on:click="htmxLoadIndicator(this);"
             class="oh-pagination__link"
             >{% trans "Previous" %}</a
           >
@@ -153,6 +156,7 @@
             hx-get="{{search_url}}?{{request.GET.urlencode}}&page={{ queryset.next_page_number }}&filter_applied=on"
             hx-swap="outerHTML"
             hx-target="#{{view_id|safe}}"
+            hx-on:click="htmxLoadIndicator(this);"
             class="oh-pagination__link"
             >{% trans "Next" %}</a
           >
@@ -162,6 +166,7 @@
             hx-get="{{search_url}}?{{request.GET.urlencode}}&page={{ queryset.paginator.num_pages }}&filter_applied=on"
             hx-swap="outerHTML"
             hx-target="#{{view_id|safe}}"
+            hx-on:click="htmxLoadIndicator(this);"
             class="oh-pagination__link"
             >{% trans "Last" %}</a
           >

horilla_views/templates/generic/horilla_detailed_view.html

@@ -1,109 +1,92 @@
 {% load generic_template_filters %}
 <div class="oh-modal__dialog-header">
-  <span class="oh-modal__dialog-title" id="genericModalLabel">
-    {{title}}
-  </span>
-  <button class="oh-modal__close--custom" onclick="$(this).closest('.oh-modal--show').removeClass('oh-modal--show')" aria-label="Close">
-    <ion-icon name="close-outline"></ion-icon>
-  </button>
+    <span class="oh-modal__dialog-title" id="genericModalLabel">
+        {{title}}
+    </span>
+    <button class="oh-modal__close--custom" onclick="$(this).closest('.oh-modal--show').removeClass('oh-modal--show');" aria-label="Close">
+        <ion-icon name="close-outline"></ion-icon>
+    </button>
 </div>
 
-<div
-  class="oh-modal__dialog-body oh-modal__dialog-relative"
-  style="padding-bottom: 0px"
->
-  {% if instance_ids %}
-  <div class="oh-modal__dialog oh-modal__dialog--navigation m-0 p-0">
-    <button
-      data-action = "previous"
-      hx-get="{{previous_url}}?{{ids_key}}={{instance_id}}&{{request.GET.urlencode}}"
-      hx-target="#genericModalBody"
-      class="oh-modal__diaglog-nav oh-modal__nav-prev"
-    >
-      <ion-icon name="chevron-back-outline"></ion-icon>
-    </button>
+<div class="oh-modal__dialog-body oh-modal__dialog-relative pb-4" style="padding-bottom: 0px">
+    {% if instance_ids %}
+        <div class="oh-modal__dialog oh-modal__dialog--navigation m-0 p-0">
+            <button data-action="previous" hx-get="{{previous_url}}?{{ids_key}}={{instance_id}}&{{request.GET.urlencode}}"
+                hx-target="#genericModalBody" class="oh-modal__diaglog-nav oh-modal__nav-prev"
+                hx-on:click="htmxLoadIndicator(this);">
+                <ion-icon name="chevron-back-outline"></ion-icon>
+            </button>
 
-    <button
-      data-action = "next"
-      hx-get="{{next_url}}?{{ids_key}}={{instance_id}}&{{request.GET.urlencode}}"
-      hx-target="#genericModalBody"
-      class="oh-modal__diaglog-nav oh-modal__nav-next"
-    >
-      <ion-icon name="chevron-forward-outline"></ion-icon>
-    </button>
-  </div>
-  {% endif %}
-  <div id="keyResultsContainer">
-    <div class="my-3" id="keyResultCard">
-      <div class="oh-card oh-card--no-shadow oh-card__body">
-        {% if header %}
-        <a
-          class="oh-timeoff-modal__profile-content"
-          style="text-decoration: none"
-          {{header.attrs|format:object|safe}}
-        >
-          <div class="oh-profile mb-3">
-            <div class="oh-profile__avatar">
-              <img
-                src="{{object|getattribute:header.avatar}}"
-                class="oh-profile__image me-2"
-              />
-            </div>
-            <div class="oh-timeoff-modal__profile-info">
-              <span class="oh-timeoff-modal__user fw-bold">
-                {{object|getattribute:header.title|selected_format:request.user.employee_get.employee_work_info.company_id}}
-              </span>
-              <span
-                class="oh-timeoff-modal__user m-0"
-                style="font-size: 18px; color: #4d4a4a"
-              >
-                {{object|getattribute:header.subtitle|selected_format:request.user.employee_get.employee_work_info.company_id}}</span
-              >
-            </div>
-          </div>
-        </a>
-        {% endif %}
-        <div
-          class="oh-modal__dialog-header {% if header %} oh-card__footer--border-top{% endif %}"
-          style="padding-top: 5px; padding-rigth: 0px; padding-left: 0px"
-        >
-          <div class="row">
-            {% for col in body %}
-            <div class="col-{% if cols|get_item:col.1 %}{{cols|get_item:col.1}}{% else %}6{% endif %} mt-3">
-              {% if not col.2 %}
-              <div class="oh-timeoff-modal__stat">
-                <span class="oh-timeoff-modal__stat-title">{{col.0}}</span>
-                <span class="oh-timeoff-modal__stat-count"
-                >{{object|getattribute:col.1|selected_format:request.user.employee_get.employee_work_info.company_id|safe}}</span
+            <button data-action="next" hx-get="{{next_url}}?{{ids_key}}={{instance_id}}&{{request.GET.urlencode}}"
+                hx-target="#genericModalBody" class="oh-modal__diaglog-nav oh-modal__nav-next"
+                hx-on:click="htmxLoadIndicator(this);"
                 >
-              </div>
-              {% else %}
-              {{object|getattribute:col.1|safe}}
-              {% endif %}
-            </div>
-            {% endfor %}
-          </div>
+                <ion-icon name="chevron-forward-outline"></ion-icon>
+            </button>
+        </div>
+    {% endif %}
+    <div id="detailViewContainer">
+        <div class="mb-3" id="detailViewCard">
+            <div class="oh-card oh-card--no-shadow oh-card__body">
+                {% if header %}
+                    <a class="oh-timeoff-modal__profile-content" style="text-decoration: none"
+                        {{header.attrs|format:object|safe}}>
+                        <div class="oh-profile mb-3">
+                            <div class="oh-profile__avatar">
+                                <img src="{{object|getattribute:header.avatar}}" class="oh-profile__image me-2" />
+                            </div>
+                            <div class="oh-timeoff-modal__profile-info">
+                                <span class="oh-timeoff-modal__user fw-bold">
+                                    {{object|getattribute:header.title|selected_format:request.user.employee_get.employee_work_info.company_id}}
+                                </span>
+                                <span class="oh-timeoff-modal__user m-0" style="font-size: 18px; color: #4d4a4a">
+                                    {{object|getattribute:header.subtitle|selected_format:request.user.employee_get.employee_work_info.company_id}}
+                                </span>
+                            </div>
+                        </div>
+                    </a>
+                {% endif %}
+                <div class="oh-modal__dialog-header {% if header %} oh-card__footer--border-top{% endif %} pb-0"
+                    style="padding-top: 5px; padding-rigth: 0px; padding-left: 0px">
+                    <div class="row">
+                        {% for col in body %}
+                            <div class="col-{% if cols|get_item:col.1 %}{{cols|get_item:col.1}}{% else %}6{% endif %} mt-3">
+                                {% if not col.2 %}
+                                    <div class="oh-timeoff-modal__stat">
+                                        <span class="oh-timeoff-modal__stat-title">{{col.0}}</span>
+                                        <span class="oh-timeoff-modal__stat-count">
+                                            {{object|getattribute:col.1|selected_format:request.user.employee_get.employee_work_info.company_id|safe}}
+                                        </span>
+                                    </div>
+                                {% else %}
+                                    {{object|getattribute:col.1|safe}}
+                                {% endif %}
+                            </div>
+                        {% endfor %}
+                    </div>
+                </div>
+                <div class="m-3 " id="enlargeattachmentContainer"></div>
+                <div class="oh-modal__dialog-footer p-0">
+                    {% if actions or action_method %}
+                        {% if actions and not action_method %}
+                            <div class="oh-btn-group" style="width: 100%">
+                                {% for action in actions %}
+                                    <a {{action.attrs|format:object|safe}}>
+                                        <ion-icon name="{{action.icon}}"></ion-icon>
+                                        {{action.action}}
+                                    </a>
+                                {% endfor %}
+                            </div>
+                        {% else %}
+                            {{object|getattribute:action_method|safe}}
+                        {% endif %}
+                    {% endif %}
+                </div>
+            </div>
         </div>
-        <div class="m-3 " id="enlargeattachmentContainer"></div>
-      </div>
     </div>
-  </div>
-</div>
-<div class="oh-modal__dialog-footer">
-  {% if actions or action_method %}
-  {% if actions and not action_method %}
-  <div class="oh-btn-group" style="width: 100%">
-    {% for action in actions %}
-    <a {{action.attrs|format:object|safe}}>
-      <ion-icon name="{{action.icon}}"></ion-icon>
-      {{action.action}}
-    </a>
-    {% endfor %}
-  </div>
-  {% else %} {{object|getattribute:action_method|safe}} {% endif %}
-  {% endif %}
 </div>
 
 <script>
-  $("#reloadMessagesButton").click();
+    $("#reloadMessagesButton").click();
 </script>

horilla_views/templates/generic/horilla_form.html

@@ -43,6 +43,7 @@
       values = $(this).val();
       if (values == "dynamic_create") {
         $("#modalButton{{field_tuple.0}}").click()
+        $(this).val("")
       }else if (values.includes("dynamic_create")) {
         let index = values.indexOf("dynamic_create");
         values.splice(index, 1);

horilla_views/templates/generic/horilla_list_table.html

@@ -12,7 +12,7 @@
   {% include "generic/export_fields_modal.html" %}
   <script>
     if (!$(".HTV").length) {
-      $("#reloadMessagesButton").click()
+      reloadMessage(null);
     }
   </script>
   <button class="reload-record" id="{{view_id|safe}}Reload" hidden hx-get="{{request.path}}?{{saved_filters.urlencode}}" hx-target="#{{view_id|safe}}" hx-swap="outerHTML" hx-on:click="htmxLoadIndicator(this);">
@@ -226,7 +226,7 @@
           hx-get="{{search_url}}?{{saved_filters.urlencode}}&filter_applied=on"
           hx-swap="outerHTML"
           hx-target="#{{view_id|safe}}"
-          hx-on:click="htmxLoadIndicator(this);"
+          hx-on-htmx-before-request="htmxLoadIndicator(this);"
         />
         <span class="oh-pagination__label"
           >{% trans "of" %} {{queryset.paginator.num_pages}}</span

horilla_views/views.py

@@ -88,6 +88,9 @@ class ReloadField(View):
             label=field.label,
             required=field.required,
         )
+        parent_form.fields[cache_field].widget.option_template_name = (
+            "horilla_widgets/select_option.html",
+        )
         dynamic_initial = request.GET.get("dynamic_initial", [])
         parent_form.fields[cache_field].widget.attrs = field.widget.attrs
         parent_form.fields[cache_field].initial = eval(