From ea593db77f6f32ecbc01dca2e22e02debd301a82 Mon Sep 17 00:00:00 2001
From: Horilla <teamhorilla@gmail.com>
Date: Mon, 13 Nov 2023 12:10:18 +0530
Subject: [PATCH] [UPDT] ASSET: Group By separate button in asset

---
 .../asset_request_allocation_view.html        | 414 +++++++++++-------
 1 file changed, 246 insertions(+), 168 deletions(-)

diff --git a/asset/templates/request_allocation/asset_request_allocation_view.html b/asset/templates/request_allocation/asset_request_allocation_view.html
index d1db7d2f4..dff0cd11c 100644
--- a/asset/templates/request_allocation/asset_request_allocation_view.html
+++ b/asset/templates/request_allocation/asset_request_allocation_view.html
@@ -1,49 +1,71 @@
-{% extends 'index.html' %} {% block content %}
-{% load static i18n %}
-{% load i18n %}
-{% load mathfilters %}
-{% load widget_tweaks %}
-{% comment %} {% include 'filter_tags.html' %} {% endcomment %}
+{% extends 'index.html' %} {% block content %} {% load static i18n %} {% load i18n %} {% load mathfilters %} {% load widget_tweaks %} {% comment %} {% include
+'filter_tags.html' %} {% endcomment %}
 <main :class="sidebarOpen ? 'oh-main__sidebar-visible' : ''">
-    <section class="oh-wrapper oh-main__topbar" x-data="{searchShow: false}">
-        <div class="oh-main__titlebar oh-main__titlebar--left">
-            <h1 class="oh-main__titlebar-title fw-bold">{% trans "Asset" %}</h1>
+	<section class="oh-wrapper oh-main__topbar" x-data="{searchShow: false}">
+		<div class="oh-main__titlebar oh-main__titlebar--left">
+			<h1 class="oh-main__titlebar-title fw-bold">{% trans "Asset" %}</h1>
 
-            <a class="oh-main__titlebar-search-toggle" role="button" aria-label="Toggle Search"
-                @click="searchShow = !searchShow">
-                <ion-icon name="search-outline" class="oh-main__titlebar-serach-icon"></ion-icon>
-            </a>
-        </div>
+			<a
+				class="oh-main__titlebar-search-toggle"
+				role="button"
+				aria-label="Toggle Search"
+				@click="searchShow = !searchShow"
+			>
+				<ion-icon
+					name="search-outline"
+					class="oh-main__titlebar-serach-icon"
+				></ion-icon>
+			</a>
+		</div>
 
-        <div class="oh-main__titlebar oh-main__titlebar--right">
-            <div class="oh-input-group oh-input__search-group"
-                :class="searchShow ? 'oh-input__search-group--show' : ''">
-                <ion-icon name="search-outline" class="oh-input-group__icon oh-input-group__icon--left"></ion-icon>
-                <input name="search" hx-get="{% url 'asset-request-allocation-view-search-filter' %}"
-                    hx-target="#asset_request_allocation_list" hx-trigger='keyup delay:500ms' type="text"
-                    class="oh-input oh-input__icon" aria-label="Search Input" placeholder="{% trans 'Search' %}" />
-            </div>
-            <div class="oh-main__titlebar-button-container">
-
-                <div class="oh-dropdown" x-data="{open: false}">
-                    <button class="oh-btn ml-2" @click="open = !open">
-                        <ion-icon name="filter" class="mr-1"></ion-icon>{% trans "Filter" %}<div id="filterCount"></div>
-                    </button>
-                    <div class="oh-dropdown__menu oh-dropdown__menu--right oh-dropdown__filter p-4" x-show="open"
-                        @click.outside="open = false" style="display: none;">
-                        <form hx-get="{% url 'asset-request-allocation-view-search-filter' %}"
-                            hx-target="#asset_request_allocation_list"
-                            id="filterForm">
+		<div class="oh-main__titlebar oh-main__titlebar--right">
+			<div
+				class="oh-input-group oh-input__search-group"
+				:class="searchShow ? 'oh-input__search-group--show' : ''"
+			>
+				<ion-icon
+					name="search-outline"
+					class="oh-input-group__icon oh-input-group__icon--left"
+				></ion-icon>
+				<input
+					name="search"
+					hx-get="{% url 'asset-request-allocation-view-search-filter' %}"
+					hx-target="#asset_request_allocation_list"
+					hx-trigger="keyup delay:500ms"
+					type="text"
+					class="oh-input oh-input__icon"
+					aria-label="Search Input"
+					placeholder="{% trans 'Search' %}"
+				/>
+			</div>
 
+            <form
+            hx-get="{% url 'asset-request-allocation-view-search-filter' %}"
+            hx-target="#asset_request_allocation_list"
+            id="filterForm"
+            >
+                <div class="oh-main__titlebar-button-container">
+                    <div class="oh-dropdown" x-data="{open: false}">
+                        <button class="oh-btn ml-2" @click="open = !open" onclick="event.preventDefault()">
+                            <ion-icon name="filter" class="mr-1"></ion-icon>{% trans "Filter" %}
+                            <div id="filterCount"></div>
+                        </button>
+                        <div
+                            class="oh-dropdown__menu oh-dropdown__menu--right oh-dropdown__filter p-4"
+                            x-show="open"
+                            @click.outside="open = false"
+                            style="display: none"
+                        >
                             <div class="oh-dropdown__filter-body">
-
                                 <div class="oh-accordion">
                                     <div class="oh-accordion-header">{% trans "Asset" %}</div>
                                     <div class="oh-accordion-body">
                                         <div class="row">
                                             <div class="col-sm-12 col-md-12 col-lg-12">
                                                 <div class="oh-input-group">
-                                                    <label class="oh-label">{% trans "Asset Name" %}</label>
+                                                    <label class="oh-label"
+                                                        >{% trans "Asset Name" %}</label
+                                                    >
                                                     {{assets_filter_form.asset_id__asset_name}}
                                                 </div>
                                             </div>
@@ -57,22 +79,30 @@
                                     </div>
                                 </div>
                                 <div class="oh-accordion">
-                                    <div class="oh-accordion-header">{% trans "Asset Request" %}</div>
+                                    <div class="oh-accordion-header">
+                                        {% trans "Asset Request" %}
+                                    </div>
                                     <div class="oh-accordion-body">
                                         <div class="row">
                                             <div class="col-sm-12 col-md-12 col-lg-6">
                                                 <div class="oh-input-group">
-                                                    <label class="oh-label">{% trans "Requested Employee" %}</label>
+                                                    <label class="oh-label"
+                                                        >{% trans "Requested Employee" %}</label
+                                                    >
                                                     {{asset_request_filter_form.requested_employee_id}}
                                                 </div>
                                                 <div class="oh-input-group">
-                                                    <label class="oh-label">{% trans "Asset Category" %}</label>
+                                                    <label class="oh-label"
+                                                        >{% trans "Asset Category" %}</label
+                                                    >
                                                     {{asset_request_filter_form.asset_category_id}}
                                                 </div>
                                             </div>
                                             <div class="col-sm-12 col-md-12 col-lg-6">
                                                 <div class="oh-input-group">
-                                                    <label class="oh-label">{% trans "Asset Request Date" %}</label>
+                                                    <label class="oh-label"
+                                                        >{% trans "Asset Request Date" %}</label
+                                                    >
                                                     {{ asset_request_filter_form.asset_request_date|attr:"type:date" }}
                                                 </div>
                                                 <div class="oh-input-group">
@@ -80,39 +110,20 @@
                                                     {{asset_request_filter_form.asset_request_status}}
                                                 </div>
                                             </div>
-                                            <div class="col-sm-12 col-md-12 col-lg-12">
-                                                <div class="row">
-                                                    <div class="col-sm-12 col-md-12 col-lg-6">
-                                                      <div class="oh-input-group">
-                                                        <label class="oh-label">{% trans "Group By" %}</label>
-                                                      </div>
-                                                    </div>
-                                                    <div class="col-sm-12 col-md-12 col-lg-6 w-100">
-                                                      <div class="oh-input-group">
-                                                        <select
-                                                          class="oh-select mt-1"
-                                                          name="request_field"
-                                                          class="select2-selection select2-selection--single"
-                                                          id="gp_request"
-                                                        >
-                                                          {% for field in gp_request_fields %}
-                                                          <option value="{{ field.0 }}">{% trans field.1 %}</option>
-                                                          {% endfor %}
-                                                        </select>
-                                                      </div>
-                                                    </div>
-                                                  </div>
-                                            </div>
                                         </div>
                                     </div>
                                 </div>
                                 <div class="oh-accordion">
-                                    <div class="oh-accordion-header">{% trans "Asset Allocation" %}</div>
+                                    <div class="oh-accordion-header">
+                                        {% trans "Asset Allocation" %}
+                                    </div>
                                     <div class="oh-accordion-body">
                                         <div class="row">
                                             <div class="col-sm-12 col-md-12 col-lg-6">
                                                 <div class="oh-input-group">
-                                                    <label class="oh-label">{% trans "Allocated User" %}</label>
+                                                    <label class="oh-label"
+                                                        >{% trans "Allocated User" %}</label
+                                                    >
                                                     {{asset_allocation_filter_form.assigned_to_employee_id}}
                                                 </div>
                                                 <div class="oh-input-group">
@@ -122,7 +133,9 @@
                                             </div>
                                             <div class="col-sm-12 col-md-12 col-lg-6">
                                                 <div class="oh-input-group">
-                                                    <label class="oh-label">{% trans "Asset Allocated Date" %}</label>
+                                                    <label class="oh-label"
+                                                        >{% trans "Asset Allocated Date" %}</label
+                                                    >
                                                     {{ asset_allocation_filter_form.assigned_date | attr:"type:date" }}
                                                 </div>
                                                 <div class="oh-input-group">
@@ -132,133 +145,198 @@
                                             </div>
                                             <div class="col-sm-12 col-md-12 col-lg-6">
                                                 <div class="oh-input-group">
-                                                    <label class="oh-label">{% trans "Return Date" %}</label>
-                                                    {{ asset_allocation_filter_form.return_date | attr:"type:date" }}
+                                                    <label class="oh-label"
+                                                        >{% trans "Return Date" %}</label
+                                                    >
+                                                    {{ asset_allocation_filter_form.return_date |attr:"type:date" }}
                                                 </div>
                                             </div>
                                             <div class="col-sm-12 col-md-12 col-lg-6">
                                                 <div class="oh-input-group">
-                                                    <label class="oh-label">{% trans "Allocated By" %}</label>
+                                                    <label class="oh-label"
+                                                        >{% trans "Allocated By" %}</label
+                                                    >
                                                     {{asset_allocation_filter_form.assigned_by_employee_id}}
                                                 </div>
                                             </div>
-                                            <div class="col-sm-12 col-md-12 col-lg-12">
-                                                <div class="row">
-                                                    <div class="col-sm-12 col-md-12 col-lg-6">
-                                                      <div class="oh-input-group">
-                                                        <label class="oh-label">{% trans "Group By" %}</label>
-                                                      </div>
-                                                    </div>
-                                                    <div class="col-sm-12 col-md-12 col-lg-6 w-100">
-                                                      <div class="oh-input-group">
-                                                        <select
-                                                          class="oh-select mt-1"
-                                                          name="allocation_field"
-                                                          class="select2-selection select2-selection--single"
-                                                          id="gp_allocation"
-                                                        >
-                                                          {% for field in gp_Allocation_fields %}
-                                                          <option value="{{ field.0 }}">{% trans field.1 %}</option>
-                                                          {% endfor %}
-                                                        </select>
-                                                      </div>
-                                                    </div>
-                                                  </div>
-                                            </div>
                                         </div>
                                     </div>
                                 </div>
                             </div>
                             <div class="oh-dropdown__filter-footer">
-                                <button class="oh-btn oh-btn--secondary oh-btn--small w-100 filterButton">{% trans "Filter" %}</button>
+                                <button
+                                    class="oh-btn oh-btn--secondary oh-btn--small w-100 filterButton"
+                                >
+                                    {% trans "Filter" %}
+                                </button>
                             </div>
-                        </form>
+                        </div>
+                    </div>
+
+                    <div
+                        class="oh-dropdown"
+                        x-data="{open: false}"
+                        onclick="event.preventDefault()"
+                    >
+                        <button class="oh-btn ml-2" @click="open = !open">
+                            <ion-icon name="library-outline" class="mr-1"></ion-icon>{% trans "Group By" %}
+                        </button>
+                        <div
+                            class="oh-dropdown__menu oh-dropdown__menu--right oh-dropdown__filter p-4"
+                            x-show="open"
+                            @click.outside="open = false"
+                            style="display: none"
+                        >
+                            <div class="oh-accordion">
+                                <div class="oh-accordion-header">{% trans "Asset Request" %}</div>
+                                <div class="oh-accordion-body">
+                                    <div class="row">
+                                        <div class="col-sm-12 col-md-12 col-lg-6">
+                                            <div class="oh-input-group">
+                                                <label class="oh-label">{% trans "Field" %}</label>
+                                            </div>
+                                        </div>
+                                        <div class="col-sm-12 col-md-12 col-lg-6">
+                                            <div class="oh-input-group">
+                                                <select
+                                                    class="oh-select mt-1  w-100"
+                                                    name="request_field"
+                                                    class="select2-selection select2-selection--single"
+                                                    id="gp_request"
+                                                >
+                                                    {% for field in gp_request_fields %}
+                                                    <option value="{{ field.0 }}">
+                                                        {% trans field.1 %}
+                                                    </option>
+                                                    {% endfor %}
+                                                </select>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="oh-accordion">
+                                <div class="oh-accordion-header">{% trans "Asset Allocation" %}</div>
+                                <div class="oh-accordion-body">
+                                    <div class="row">
+                                        <div class="col-sm-12 col-md-12 col-lg-6">
+                                            <div class="oh-input-group">
+                                                <label class="oh-label">{% trans "Field" %}</label>
+                                            </div>
+                                        </div>
+                                        <div class="col-sm-12 col-md-12 col-lg-6">
+                                            <div class="oh-input-group">
+                                                <select
+                                                    class="oh-select mt-1  w-100"
+                                                    name="allocation_field"
+                                                    class="select2-selection select2-selection--single"
+                                                    id="gp_allocation"
+                                                >
+                                                    {% for field in gp_Allocation_fields %}
+                                                    <option value="{{ field.0 }}">
+                                                        {% trans field.1 %}
+                                                    </option>
+                                                    {% endfor %}
+                                                </select>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
                     </div>
                 </div>
-            </div>
-        </div>
-    </section>
+            </form>
+		</div>
+	</section>
 
-    <div class="oh-wrapper">
-        <div class="oh-tabs">
-            <ul class="oh-tabs__tablist">
-                <li class="oh-tabs__tab " data-target="#tab_3">
-                    {% trans "Asset" %}
-
-                </li>
-                <li class="oh-tabs__tab " data-target="#tab_1">
-                    {% trans "Asset Request" %}
-                    <a href="#" class="link-danger oh-btn oh-btn--secondary-outline" role="" data-toggle="oh-modal-toggle"
-                        data-target="#asset-request-allocation-modal" hx-get="{%url 'asset-request-creation'%}" hx-target="#asset-request-allocation-modal-target" title='{% trans "Create request" %}'>
-                        <ion-icon name="add-outline" role="img" class="md hydrated" aria-label="add outline"></ion-icon>
-                    </a>
-                </li>
-                {% if perms.asset.view_assetassignment %} 
-                <li class="oh-tabs__tab" data-target="#tab_2">
-                    {% trans "Asset Allocation" %}
-                    <a href="#" class="oh-btn oh-btn--secondary-outline" role="button" data-toggle="oh-modal-toggle"
-                        data-target="#asset-request-allocation-modal" hx-get="{%url 'asset-allocate-creation' %}" hx-target="#asset-request-allocation-modal-target" title='{% trans "Create allocation" %}'>
-                        <ion-icon name="add-outline" role="img" class="md hydrated" aria-label="add outline"></ion-icon>
-                    </a>
-                </li>
-                {% endif %} 
-            </ul>
-            <div id="asset_request_allocation_list">
-                {% include 'request_allocation/asset_request_allocation_list.html' %}
-            </div>
-        </div>
-
-    </div>
+	<div class="oh-wrapper">
+		<div class="oh-tabs">
+			<ul class="oh-tabs__tablist">
+				<li class="oh-tabs__tab" data-target="#tab_3">{% trans "Asset" %}</li>
+				<li class="oh-tabs__tab" data-target="#tab_1">
+					{% trans "Asset Request" %}
+					<a
+						href="#"
+						class="link-danger oh-btn oh-btn--secondary-outline"
+						role=""
+						data-toggle="oh-modal-toggle"
+						data-target="#asset-request-allocation-modal"
+						hx-get="{%url 'asset-request-creation'%}"
+						hx-target="#asset-request-allocation-modal-target"
+						title='{% trans "Create request" %}'
+					>
+						<ion-icon
+							name="add-outline"
+							role="img"
+							class="md hydrated"
+							aria-label="add outline"
+						></ion-icon>
+					</a>
+				</li>
+				{% if perms.asset.view_assetassignment %}
+				<li class="oh-tabs__tab" data-target="#tab_2">
+					{% trans "Asset Allocation" %}
+					<a
+						href="#"
+						class="oh-btn oh-btn--secondary-outline"
+						role="button"
+						data-toggle="oh-modal-toggle"
+						data-target="#asset-request-allocation-modal"
+						hx-get="{%url 'asset-allocate-creation' %}"
+						hx-target="#asset-request-allocation-modal-target"
+						title='{% trans "Create allocation" %}'
+					>
+						<ion-icon
+							name="add-outline"
+							role="img"
+							class="md hydrated"
+							aria-label="add outline"
+						></ion-icon>
+					</a>
+				</li>
+				{% endif %}
+			</ul>
+			<div id="asset_request_allocation_list">
+				{% include 'request_allocation/asset_request_allocation_list.html' %}
+			</div>
+		</div>
+	</div>
 </main>
 
 <!-- asset request and allocation modal start -->
-<div class="oh-modal" id="asset-request-allocation-modal" role="dialog" aria-labelledby="AssetRequestModal" aria-hidden="true">
+<div
+	class="oh-modal"
+	id="asset-request-allocation-modal"
+	role="dialog"
+	aria-labelledby="AssetRequestModal"
+	aria-hidden="true"
+>
+	<div class="oh-modal__dialog" style="max-width: 550px">
+		<div class="oh-modal__dialog-header">
+			<button type="button" class="oh-modal__close" aria-label="Close">
+				<ion-icon name="close-outline"></ion-icon>
+			</button>
+		</div>
 
-    <div class="oh-modal__dialog " style="max-width:550px">
-        <div class="oh-modal__dialog-header">
-            <button type="button" class="oh-modal__close" aria-label="Close">
-                <ion-icon name="close-outline"></ion-icon>
-            </button>
-        </div>
-     
-        <!-- htmx form -->
-        <div class="oh-modal__dialog-body" id="asset-request-allocation-modal-target"> 
-               
-        </div>
-    </div>
+		<!-- htmx form -->
+		<div
+			class="oh-modal__dialog-body"
+			id="asset-request-allocation-modal-target"
+		></div>
+	</div>
 </div>
 <!-- end  of  asset request modal start -->
-<!-- 
-
 <script>
-    $(document).on('htmx:load','#asset-request-allocation-modal-target',function () {
-        {% include "select2.js" %}
-        // select2 for modal
-        var selectEl = $('#asset-request-allocation-modal-target').find('.oh-select')
-        selectEl.select2()
-            
+$(document).ready(function () {
+    $("#gp_request").on("change", function () {
+        $(".filterButton")[0].click();
     });
-    $(document).on('htmx:load','#asset_request_allocation_list',function () {
-        // modal js after pagination
-        $("[data-toggle='oh-modal-toggle']").on('click', function () {
-
-        let clickedEl = $(this).closest('[data-toggle = "oh-modal-toggle"]');
-        if (clickedEl != null) {
-            const targetEl = clickedEl.data('target');
-            $(targetEl).addClass('oh-modal--show');
-        }
-        });
-
-        $('.oh-modal__close').on('click', function () {
-        $('.oh-modal--show').removeClass('oh-modal--show');
-        });
-        $('.oh-accordion-meta__header').on('click',function(){
-
-        })
-            
+    $("#gp_allocation").on("change", function () {
+        $(".filterButton")[0].click();
     });
-</script> -->
-
+});
+</script>
 <script src="{% static '/base/filter.js' %}"></script>
 
-{% endblock content %}
\ No newline at end of file
+{% endblock content %}