[UPDT] ASSET: Group By separate button in asset

This commit is contained in:
Horilla
2023-11-13 12:10:18 +05:30
parent 17f403347b
commit ea593db77f

View File

@@ -1,49 +1,71 @@
{% extends 'index.html' %} {% block content %} {% extends 'index.html' %} {% block content %} {% load static i18n %} {% load i18n %} {% load mathfilters %} {% load widget_tweaks %} {% comment %} {% include
{% load static i18n %} 'filter_tags.html' %} {% endcomment %}
{% load i18n %}
{% load mathfilters %}
{% load widget_tweaks %}
{% comment %} {% include 'filter_tags.html' %} {% endcomment %}
<main :class="sidebarOpen ? 'oh-main__sidebar-visible' : ''"> <main :class="sidebarOpen ? 'oh-main__sidebar-visible' : ''">
<section class="oh-wrapper oh-main__topbar" x-data="{searchShow: false}"> <section class="oh-wrapper oh-main__topbar" x-data="{searchShow: false}">
<div class="oh-main__titlebar oh-main__titlebar--left"> <div class="oh-main__titlebar oh-main__titlebar--left">
<h1 class="oh-main__titlebar-title fw-bold">{% trans "Asset" %}</h1> <h1 class="oh-main__titlebar-title fw-bold">{% trans "Asset" %}</h1>
<a class="oh-main__titlebar-search-toggle" role="button" aria-label="Toggle Search" <a
@click="searchShow = !searchShow"> class="oh-main__titlebar-search-toggle"
<ion-icon name="search-outline" class="oh-main__titlebar-serach-icon"></ion-icon> role="button"
</a> aria-label="Toggle Search"
</div> @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-main__titlebar oh-main__titlebar--right">
<div class="oh-input-group oh-input__search-group" <div
:class="searchShow ? 'oh-input__search-group--show' : ''"> class="oh-input-group oh-input__search-group"
<ion-icon name="search-outline" class="oh-input-group__icon oh-input-group__icon--left"></ion-icon> :class="searchShow ? 'oh-input__search-group--show' : ''"
<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" <ion-icon
class="oh-input oh-input__icon" aria-label="Search Input" placeholder="{% trans 'Search' %}" /> name="search-outline"
</div> class="oh-input-group__icon oh-input-group__icon--left"
<div class="oh-main__titlebar-button-container"> ></ion-icon>
<input
<div class="oh-dropdown" x-data="{open: false}"> name="search"
<button class="oh-btn ml-2" @click="open = !open"> hx-get="{% url 'asset-request-allocation-view-search-filter' %}"
<ion-icon name="filter" class="mr-1"></ion-icon>{% trans "Filter" %}<div id="filterCount"></div> hx-target="#asset_request_allocation_list"
</button> hx-trigger="keyup delay:500ms"
<div class="oh-dropdown__menu oh-dropdown__menu--right oh-dropdown__filter p-4" x-show="open" type="text"
@click.outside="open = false" style="display: none;"> class="oh-input oh-input__icon"
<form hx-get="{% url 'asset-request-allocation-view-search-filter' %}" aria-label="Search Input"
hx-target="#asset_request_allocation_list" placeholder="{% trans 'Search' %}"
id="filterForm"> />
</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-dropdown__filter-body">
<div class="oh-accordion"> <div class="oh-accordion">
<div class="oh-accordion-header">{% trans "Asset" %}</div> <div class="oh-accordion-header">{% trans "Asset" %}</div>
<div class="oh-accordion-body"> <div class="oh-accordion-body">
<div class="row"> <div class="row">
<div class="col-sm-12 col-md-12 col-lg-12"> <div class="col-sm-12 col-md-12 col-lg-12">
<div class="oh-input-group"> <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}} {{assets_filter_form.asset_id__asset_name}}
</div> </div>
</div> </div>
@@ -57,22 +79,30 @@
</div> </div>
</div> </div>
<div class="oh-accordion"> <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="oh-accordion-body">
<div class="row"> <div class="row">
<div class="col-sm-12 col-md-12 col-lg-6"> <div class="col-sm-12 col-md-12 col-lg-6">
<div class="oh-input-group"> <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}} {{asset_request_filter_form.requested_employee_id}}
</div> </div>
<div class="oh-input-group"> <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}} {{asset_request_filter_form.asset_category_id}}
</div> </div>
</div> </div>
<div class="col-sm-12 col-md-12 col-lg-6"> <div class="col-sm-12 col-md-12 col-lg-6">
<div class="oh-input-group"> <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" }} {{ asset_request_filter_form.asset_request_date|attr:"type:date" }}
</div> </div>
<div class="oh-input-group"> <div class="oh-input-group">
@@ -80,39 +110,20 @@
{{asset_request_filter_form.asset_request_status}} {{asset_request_filter_form.asset_request_status}}
</div> </div>
</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>
</div> </div>
<div class="oh-accordion"> <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="oh-accordion-body">
<div class="row"> <div class="row">
<div class="col-sm-12 col-md-12 col-lg-6"> <div class="col-sm-12 col-md-12 col-lg-6">
<div class="oh-input-group"> <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}} {{asset_allocation_filter_form.assigned_to_employee_id}}
</div> </div>
<div class="oh-input-group"> <div class="oh-input-group">
@@ -122,7 +133,9 @@
</div> </div>
<div class="col-sm-12 col-md-12 col-lg-6"> <div class="col-sm-12 col-md-12 col-lg-6">
<div class="oh-input-group"> <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" }} {{ asset_allocation_filter_form.assigned_date | attr:"type:date" }}
</div> </div>
<div class="oh-input-group"> <div class="oh-input-group">
@@ -132,133 +145,198 @@
</div> </div>
<div class="col-sm-12 col-md-12 col-lg-6"> <div class="col-sm-12 col-md-12 col-lg-6">
<div class="oh-input-group"> <div class="oh-input-group">
<label class="oh-label">{% trans "Return Date" %}</label> <label class="oh-label"
{{ asset_allocation_filter_form.return_date | attr:"type:date" }} >{% trans "Return Date" %}</label
>
{{ asset_allocation_filter_form.return_date |attr:"type:date" }}
</div> </div>
</div> </div>
<div class="col-sm-12 col-md-12 col-lg-6"> <div class="col-sm-12 col-md-12 col-lg-6">
<div class="oh-input-group"> <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}} {{asset_allocation_filter_form.assigned_by_employee_id}}
</div> </div>
</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> </div>
</div> </div>
<div class="oh-dropdown__filter-footer"> <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> </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>
</div> </form>
</div> </div>
</section> </section>
<div class="oh-wrapper"> <div class="oh-wrapper">
<div class="oh-tabs"> <div class="oh-tabs">
<ul class="oh-tabs__tablist"> <ul class="oh-tabs__tablist">
<li class="oh-tabs__tab " data-target="#tab_3"> <li class="oh-tabs__tab" data-target="#tab_3">{% trans "Asset" %}</li>
{% trans "Asset" %} <li class="oh-tabs__tab" data-target="#tab_1">
{% trans "Asset Request" %}
</li> <a
<li class="oh-tabs__tab " data-target="#tab_1"> href="#"
{% trans "Asset Request" %} class="link-danger oh-btn oh-btn--secondary-outline"
<a href="#" class="link-danger oh-btn oh-btn--secondary-outline" role="" data-toggle="oh-modal-toggle" role=""
data-target="#asset-request-allocation-modal" hx-get="{%url 'asset-request-creation'%}" hx-target="#asset-request-allocation-modal-target" title='{% trans "Create request" %}'> data-toggle="oh-modal-toggle"
<ion-icon name="add-outline" role="img" class="md hydrated" aria-label="add outline"></ion-icon> data-target="#asset-request-allocation-modal"
</a> hx-get="{%url 'asset-request-creation'%}"
</li> hx-target="#asset-request-allocation-modal-target"
{% if perms.asset.view_assetassignment %} title='{% trans "Create request" %}'
<li class="oh-tabs__tab" data-target="#tab_2"> >
{% trans "Asset Allocation" %} <ion-icon
<a href="#" class="oh-btn oh-btn--secondary-outline" role="button" data-toggle="oh-modal-toggle" name="add-outline"
data-target="#asset-request-allocation-modal" hx-get="{%url 'asset-allocate-creation' %}" hx-target="#asset-request-allocation-modal-target" title='{% trans "Create allocation" %}'> role="img"
<ion-icon name="add-outline" role="img" class="md hydrated" aria-label="add outline"></ion-icon> class="md hydrated"
</a> aria-label="add outline"
</li> ></ion-icon>
{% endif %} </a>
</ul> </li>
<div id="asset_request_allocation_list"> {% if perms.asset.view_assetassignment %}
{% include 'request_allocation/asset_request_allocation_list.html' %} <li class="oh-tabs__tab" data-target="#tab_2">
</div> {% trans "Asset Allocation" %}
</div> <a
href="#"
</div> 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> </main>
<!-- asset request and allocation modal start --> <!-- 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"> <!-- htmx form -->
<div class="oh-modal__dialog-header"> <div
<button type="button" class="oh-modal__close" aria-label="Close"> class="oh-modal__dialog-body"
<ion-icon name="close-outline"></ion-icon> id="asset-request-allocation-modal-target"
</button> ></div>
</div> </div>
<!-- htmx form -->
<div class="oh-modal__dialog-body" id="asset-request-allocation-modal-target">
</div>
</div>
</div> </div>
<!-- end of asset request modal start --> <!-- end of asset request modal start -->
<!--
<script> <script>
$(document).on('htmx:load','#asset-request-allocation-modal-target',function () { $(document).ready(function () {
{% include "select2.js" %} $("#gp_request").on("change", function () {
// select2 for modal $(".filterButton")[0].click();
var selectEl = $('#asset-request-allocation-modal-target').find('.oh-select')
selectEl.select2()
}); });
$(document).on('htmx:load','#asset_request_allocation_list',function () { $("#gp_allocation").on("change", function () {
// modal js after pagination $(".filterButton")[0].click();
$("[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(){
})
}); });
</script> --> });
</script>
<script src="{% static '/base/filter.js' %}"></script> <script src="{% static '/base/filter.js' %}"></script>
{% endblock content %} {% endblock content %}