[FIX] HORILLA VIEWS: Duplicate table issue

This commit is contained in:
Horilla
2024-10-19 16:07:10 +05:30
parent 7ec08d1784
commit 29f6939c59

View File

@@ -25,70 +25,6 @@
{% endif %}
<div class="oh-table_sticky--wrapper">
<div class="oh-sticky-dropdown--header" style="z-index:13;">
<div class="oh-dropdown" x-data="{open: false}">
<button class="oh-sticky-dropdown_btn" @click="open = !open">
<ion-icon
name="ellipsis-vertical-sharp"
role="img"
class="md hydrated"
aria-label="ellipsis vertical sharp"
></ion-icon>
</button>
<div
class="oh-dropdown__menu oh-sticky-table_dropdown"
x-show="open"
@click.outside="
open = false
$($el).closest('.oh-table_sticky--wrapper').parent().find('.reload-record').click();
"
>
{{toggle_form.as_list}}
</div>
</div>
</div>
<div class="oh-sticky-table">
<div class="oh-sticky-table__table oh-table--sortable" style="
width: 100%;
width: -moz-available; /* WebKit-based browsers will ignore this. */
width: -webkit-fill-available; /* Mozilla-based browsers will ignore this. */
width: fill-available;
">
<div class="oh-sticky-table__thead">
<div class="oh-sticky-table__tr">
{% if bulk_select_option %}
<div
class="oh-sticky-table__th"
style="width: 10px; z-index: 12 !important"
>
<div class="centered-div" align="center">{% load static i18n generic_template_filters %}
<div id="{{view_id|safe}}">
<div
class="oh-modal"
id="bulkUpdateModal{{view_id|safe}}"
role="dialog"
aria-labelledby="bulkUpdateModal{{view_id|safe}}"
aria-hidden="true"
>
<div class="oh-modal__dialog" id="bulkUpdateModalBody{{view_id|safe}}"></div>
</div>
{% include "generic/export_fields_modal.html" %}
<script>
if (!$(".HTV").length) {
$("#reloadMessagesButton").click()
}
</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">
</button>
{% if show_filter_tags %} {% include "generic/filter_tags.html" %} {% endif %}
{% if queryset|length %}
{% if bulk_select_option %}
{% include "generic/quick_actions.html" %}
{% endif %}
<div class="oh-table_sticky--wrapper">
<div class="oh-sticky-dropdown--header" style="z-index:13;">
<div class="oh-dropdown" x-data="{open: false}">
@@ -421,298 +357,3 @@
</div>
{% endif %}
</div>
<input
type="checkbox"
class="oh-input oh-input__checkbox bulk-list-table-row"
onchange="
$(this).closest('.oh-sticky-table').find('.list-table-row').prop('checked',$(this).is(':checked')).change();
$(document).ready(function () {
reloadSelectedCount($('#count_{{view_id|safe}}'),'{{selected_instances_key_id}}');
reloadSelectedCount($('.count_{{view_id|safe}}'));
});
"
title="Select All"
/>
</div>
</div>
{% endif %} {% for cell in columns %}
<div
id="{{view_id}}-{{ forloop.counter }}-{{cell.1}}-header"
class="oh-sticky-table__th"
style="z-index: 11;width:200px;">
<div
{% for sort_map in sortby_mapping %}
{% if sort_map.0 == cell.0 %}
hx-get="{{search_url}}?{{saved_filters.urlencode}}&{{sortby_key}}={{sort_map.1}}&filter_applied=on"
hx-target="#{{view_id}}"
class="
{% if request.sort_order == "asc" and request.sort_key == sort_map.1 %}
arrow-up
{% elif request.sort_order == "desc" and request.sort_key == sort_map.1 %}
arrow-down
{% else %}
arrow-up-down
{% endif %}
"
{% endif %}
{% endfor %}
style="width: 200px;"
>
{{cell.0}}
</div>
</div>
{% endfor %} {% if options or option_method%}
<div class="oh-sticky-table__th" >
<div style="width: 200px;">
{% trans "Options" %}
</div>
</div>
{% endif %} {% if actions or action_method %}
<div class="oh-sticky-table__th oh-sticky-table__right" style="z-index:12 !important;">
<div style="width: 200px;">
{% trans "Actions" %}
</div>
</div>
{% endif %}
</div>
</div>
<div class="oh-sticky-table__tbody">
{% for instance in queryset %}
<div
class="oh-sticky-table__tr oh-permission-table__tr oh-permission-table--collapsed"
draggable="true"
data-instance-id="{{instance.id}}"
{{row_attrs|format:instance|safe}}
>
{% if bulk_select_option %}
<div
class="oh-sticky-table__sd {{row_status_class|format:instance|safe}}"
onclick="event.stopPropagation()"
style="width: 10px; z-index: 11 !important"
>
<div class="centered-div" align="center">
<input
type="checkbox"
class="oh-input oh-input__checkbox list-table-row"
data-view-id="{{view_id|safe}}"
onchange="
element = $(this)
highlightRow(element);
$(document).ready(function () {
if (!element.is(':checked')) {
removeId(element)
}
reloadSelectedCount($('#count_{{view_id|safe}}'),'{{selected_instances_key_id}}');
reloadSelectedCount($('.count_{{view_id|safe}}'));
});
"
value = "{{instance.pk}}"
/>
</div>
</div>
{% endif %} {% for cell in columns %}
{% with attribute=cell.1 index=forloop.counter %} {% if not cell.2 %}
<div
data-header-id="{{view_id}}-{{ forloop.counter }}-{{cell.1}}-header"
class="{% if index == 1 %} oh-sticky-table__sd {% else %} oh-sticky-table__td{% endif %} t-body"
>
{{instance|getattribute:attribute|selected_format:request.user.employee_get.employee_work_info.company_id|safe}}
</div>
{% else %}
<div
data-header-id="{{view_id}}-{{ forloop.counter }}-{{cell.1}}-header"
class="{% if index == 1 %} oh-sticky-table__sd {% else %} oh-sticky-table__td{% endif %} t-body"
>
<div class="oh-profile oh-profile--md">
<div class="oh-profile__avatar mr-1">
<img
src="{{instance|getattribute:cell.2}}"
class="oh-profile__image"
/>
</div>
<span class="oh-profile__name oh-text--dark">
{{instance|getattribute:attribute}}
</span>
</div>
</div>
{% endif %} {% endwith %} {% endfor %} {% if options or option_method %}
<div class="oh-sticky-table__td oh-permission-table--toggle">
{% if not option_method %}
<div class="oh-btn-group">
{% for option in options %}
{% if option.accessibility|accessibility:instance %}
<a
href="#"
title="{{option.option|safe}}"
{{option.attrs|format:instance|safe}}
>
<ion-icon name="{{option.icon}}"></ion-icon>
</a>
{% endif %}
{% endfor %}
</div>
{% else %} {{instance|getattribute:option_method|safe}} {% endif %}
</div>
{% endif %} {% if actions or action_method %}
<div class="oh-sticky-table__td oh-sticky-table__right">
{% if not action_method %}
<div class="oh-btn-group">
{% for action in actions %}
{% if action.accessibility|accessibility:instance %}
<button
href="#"
title="{{action.action|safe}}"
{{action.attrs|format:instance|safe}}
>
<ion-icon name="{{action.icon}}"></ion-icon>
</button>
{% endif %}
{% endfor %}
</div>
{% else %} {{instance|getattribute:action_method|safe}} {% endif %}
</div>
{% endif %}
</div>
{% endfor %}
</div>
</div>
</div>
</div>
{% if queryset.paginator.count %}
<div class="oh-pagination">
<span
class="oh-pagination__page"
data-toggle="modal"
data-target="#addEmployeeModal"
>{% trans "Page" %} {{queryset.number}} {% trans "of" %}
{{queryset.paginator.num_pages}}</span
>
<nav class="oh-pagination__nav">
<div class="oh-pagination__input-container me-3">
<span class="oh-pagination__label me-1">{% trans "Page" %}</span>
<input
type="number"
class="oh-pagination__input"
value="{{queryset.number}}"
min="1"
name="page"
hx-get="{{search_url}}?{{saved_filters.urlencode}}&filter_applied=on"
hx-swap="outerHTML"
hx-target="#{{view_id|safe}}"
/>
<span class="oh-pagination__label"
>{% trans "of" %} {{queryset.paginator.num_pages}}</span
>
</div>
<ul class="oh-pagination__items" data-search-url="{{search_url}}">
{% if queryset.has_previous %}
<li class="oh-pagination__item oh-pagination__item--wide">
<a
hx-get="{{search_url}}?{{saved_filters.urlencode}}&page=1&filter_applied=on"
hx-swap="outerHTML"
hx-target="#{{view_id|safe}}"
class="oh-pagination__link"
>{% trans "First" %}</a
>
</li>
<li class="oh-pagination__item oh-pagination__item--wide">
<a
hx-get="{{search_url}}?{{saved_filters.urlencode}}&page={{ queryset.previous_page_number }}&filter_applied=on"
hx-swap="outerHTML"
hx-target="#{{view_id|safe}}"
class="oh-pagination__link"
>{% trans "Previous" %}</a
>
</li>
{% endif %} {% if queryset.has_next %}
<li class="oh-pagination__item oh-pagination__item--wide">
<a
hx-get="{{search_url}}?{{saved_filters.urlencode}}&page={{ queryset.next_page_number }}&filter_applied=on"
hx-swap="outerHTML"
hx-target="#{{view_id|safe}}"
class="oh-pagination__link"
>{% trans "Next" %}</a
>
</li>
<li class="oh-pagination__item oh-pagination__item--wide">
<a
hx-get="{{search_url}}?{{saved_filters.urlencode}}&page={{ queryset.paginator.num_pages }}&filter_applied=on"
hx-swap="outerHTML"
hx-target="#{{view_id|safe}}"
class="oh-pagination__link"
>{% trans "Last" %}</a
>
</li>
{% endif %}
</ul>
</nav>
</div>
<script>
reloadSelectedCount($('#count_{{view_id|safe}}'),'{{selected_instances_key_id}}');
reloadSelectedCount($('.count_{{view_id|safe}}'));
var tabId = $("#{{view_id}}").closest(".oh-tabs__content").attr("id");
let badge = $(`#badge-${tabId}`);
let count = "{{queryset.paginator.count}}";
let label = badge.attr("data-badge-label") || "";
let title = count + " " + label;
badge.html(count);
badge.attr("title", title);
</script>
{% if bulk_select_option %}
<script>
selectSelected("#{{view_id|safe}}",'{{selected_instances_key_id}}')
</script>
{% endif %}
{% endif %}
<script>
$("ul[data-search-url] a").click(function (e) {
e.preventDefault();
const url = $(this).attr("hx-get")
const $urlObj = $('<a>', { href: url });
const searchParams = new URLSearchParams($urlObj[0].search);
let lastPageParam = null;
let lastPageValue = 1;
searchParams.forEach((value, param) => {
if (param === "page") {
lastPageParam = param;
lastPageValue = value.split(",").pop();
}
});
form = $(`form[hx-get="{{search_url}}"]`)
pageInput = form.find("#pageInput")
pageInput.attr("name",lastPageParam)
pageInput.attr("value",lastPageValue)
});
</script>
{% else %}
{% if row_status_indications %}
<div class="d-flex flex-row-reverse">
{% for indication in row_status_indications %}
<span class="m-1" style="cursor: pointer;margin-left: 7px;" {{indication.2|safe}}>
<span class="oh-dot oh-dot--small me-1 {{indication.0}}"></span>
{{indication.1}}
</span>
{% endfor %}
</div>
{% endif %}
<div class="oh-wrapper" align="center" style="margin-top: 7vh; margin-bottom:7vh;">
<div align="center">
<img src="{% static "images/ui/search.svg" %}" class="oh-404__image" alt="Page not found. 404.">
<h1 class="oh-404__title">{% trans "No Records found" %}</h1>
<p class="oh-404__subtitle">
{% trans "No records found." %}
</p>
</div>
</div>
{% endif %}
</div>