nestict/ihrm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[UPDT] HORILLA VIEWS: htmxLoadIndicator updates

Browse Source
This commit is contained in:
Horilla
2024-11-25 14:51:22 +05:30
parent 3f9cf97b58
commit 712a3395d6
10 changed files with 156 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
horilla_views/generic/cbv/views.py
View File

@@ -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:

9
horilla_views/templates/generic/horilla_card.html
View File

@@ -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
>

75
horilla_views/templates/generic/horilla_detailed_view.html
View File

@@ -3,79 +3,60 @@
<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">
<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"
>
<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"
>
<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"
<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);"
>
<ion-icon name="chevron-forward-outline"></ion-icon>
</button>
</div>
{% endif %}
<div id="keyResultsContainer">
<div class="my-3" id="keyResultCard">
<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}}
>
<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"
/>
<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
>
<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="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
>
<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}}
@@ -85,11 +66,7 @@
</div>
</div>
<div class="m-3 " id="enlargeattachmentContainer"></div>
</div>
</div>
</div>
</div>
<div class="oh-modal__dialog-footer">
<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%">
@@ -100,8 +77,14 @@
</a>
{% endfor %}
</div>
{% else %} {{object|getattribute:action_method|safe}} {% endif %}
{% else %}
{{object|getattribute:action_method|safe}}
{% endif %}
{% endif %}
</div>
</div>
</div>
</div>
</div>
<script>

1
horilla_views/templates/generic/horilla_form.html
View File

@@ -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);

4
horilla_views/templates/generic/horilla_list_table.html
View File

@@ -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

3
horilla_views/views.py
View File

@@ -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(

2
static/build/css/style.min.css vendored
View File

File diff suppressed because one or more lines are too long

64
static/index/index.js
View File

@@ -302,6 +302,27 @@ function reloadMessage(e) {
$('#reloadMessagesButton').click();
}
function htmxLoadIndicator(e) {
var target = $(e).attr('hx-target');
var table = $(target).find('table');
var card = $(target).find('.oh-card__body');
var kanban = $(target).find('.oh-kanban-card');
if (table.length) {
table.addClass('is-loading');
table.find('th, td').empty();
}
if (card.length) {
card.addClass('is-loading');
}
if (kanban.length) {
kanban.addClass('is-loading');
}
if (!table.length && !card.length && !kanban.length) {
$(target).html(`<div class="animated-background"></div>`);
}
}
function ajaxWithResponseHandler(event) {
$(event.target).each(function () {
$.each(this.attributes, function () {
@@ -422,13 +443,7 @@ $(document).on("htmx:beforeRequest", function (event, data) {
}
}
});
function htmxLoadIndicator(e) {
var target = $(e).attr('hx-target');
$(target).find('th').empty();
$(target).find('th').addClass('skeleton');
$(target).find('td').empty();
$(target).find('td').addClass('skeleton');
}
$(document).on('keydown', function (event) {
// Check if the cursor is not focused on an input field
@@ -516,3 +531,38 @@ function updateUserPanelCount(e) {
}, 100);
}
function enlargeImage(src, $element) {
$(".enlargeImageContainer").empty()
var enlargeImageContainer = $element.parents().closest("li").find(".enlargeImageContainer")
enlargeImageContainer.empty()
style = 'width:100%; height:90%; box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.2); background:white'
var enlargedImage = $('<iframe>').attr({ src: src, style: style })
var name = $('<span>').text(src.split('/').pop().replace(/_/g, ' '))
enlargeImageContainer.append(enlargedImage)
enlargeImageContainer.append(name)
setTimeout(function () {
enlargeImageContainer.show()
const iframe = document.querySelector('iframe').contentWindow
var iframe_document = iframe.document
iframe_image = iframe_document.getElementsByTagName('img')[0]
$(iframe_image).attr('style', 'width:100%; height:100%;')
}, 100)
}
function hideEnlargeImage() {
var enlargeImageContainer = $('.enlargeImageContainer')
enlargeImageContainer.empty()
}
$(document).on('click', function (event) {
if (!$(event.target).closest('#enlargeImageContainer').length) {
hideEnlargeImage()
}
})
function submitForm(elem) {
$(elem).siblings(".add_more_submit").click();
}