[ADD] HORILLA_THEME: Add quick actions in HLV

This commit is contained in:
Horilla
2025-06-22 17:43:28 +05:30
parent 1d3f1c59bc
commit 03ee8e2d81
7 changed files with 155 additions and 60 deletions

View File

@@ -303,7 +303,7 @@
border: 1px solid hsl(221, 83%, 53%) !important;
}
.oh-input:not([type="file"]){
.oh-input:not([type="file"]) {
border: 1px solid hsl(213, 22%, 84%);
}
@@ -969,6 +969,7 @@
width: 100%;
}
}
.oh-btn {
display: flex;
align-items: center;
@@ -1299,17 +1300,17 @@
justify-content: center;
}
.oh-btn-group > * {
.oh-btn-group>* {
border-radius: 0;
border-right: 1px solid hsl(213, 22%, 93%);
}
.oh-btn-group > *:first-child {
.oh-btn-group>*:first-child {
border-top-left-radius: 0.375rem;
border-bottom-left-radius: 0.375rem;
}
.oh-btn-group > *:last-child {
.oh-btn-group>*:last-child {
border-right: none;
border-top-right-radius: 0.375rem;
border-bottom-right-radius: 0.375rem;
@@ -1738,3 +1739,11 @@ ul.errorlist ul.errorlist li {
padding-left: 5px;
color: #000000;
}
.d-none {
display: none;
}
.highlight-selected {
background: #00d6ff1f !important;
}

View File

@@ -578,20 +578,6 @@ function switchTab(e) {
}
}
function toggleHighlight(ids) {
$.each(ids, function (indexInArray, id) {
setTimeout(() => {
$(`#${id}`)
.closest(".oh-sticky-table__tr")
.removeClass("highlight-selected");
if ($(`#${id}`).is(":checked")) {
$(`#${id}`)
.closest(".oh-sticky-table__tr")
.addClass("highlight-selected");
}
}, 1);
});
}
$(document).on('htmx:afterSettle', function (event) {

View File

@@ -263,4 +263,79 @@
</div>
{% endif %}
</div>
<script>
reloadSelectedCount($('#count_{{view_id|safe}}'),'{{selected_instances_key_id}}');
reloadSelectedCount($('.count_{{view_id|safe}}'),'{{selected_instances_key_id}}');
{% if records_count_in_tab %}
var tabId = $("#{{view_id}}").closest(".oh-tabs__content").attr("id");
var badge = $(`#badge-${tabId}`);
var count = "{{queryset.paginator.count}}";
var label = badge.attr("data-badge-label") || "";
var title = count + " " + label;
badge.html(count);
badge.attr("title", title);
{% endif %}
</script>
{% if bulk_select_option %}
<script>
selectSelected("#{{view_id|safe}}",'{{selected_instances_key_id}}')
</script>
{% 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>
<script>
$(document).ready(function () {
attrAction = `{{header_attrs.action|safe}}`
if (!attrAction){
const widths = [];
let thWidth = 0;
$('#{{view_id}} .lastTd').each(function () {
widths.push(this.scrollWidth);
$(this).css('overflow', 'hidden');
});
widths.sort().reverse();
if (widths.length) {
thWidth = widths[0];
}
if (!thWidth) {
thWidth = 180
}
$('#{{view_id}} .lastTh').css("width", `${thWidth}px`);
}
});
</script>
<script>
setTimeout(() => {
$("#{{view_id}} [type=checkbox].list-table-row:checked").first().change();
$("#{{view_id}} [type=checkbox].list-table-row:checked").not().first().change();
var ids = JSON.parse($("#{{selected_instances_key_id}}").attr("data-ids"))
if (ids.length) {
$("#{{view_id}} .quick-bulk-action.d-none").removeClass("d-none");
}
}, 200);
</script>
</div>

View File

@@ -58,7 +58,7 @@
</form>
<script>
let htmxBusy = false
document.body.addEventListener('htmx:configRequest', function (event) {
if (htmxBusy) {
event.preventDefault()
@@ -67,11 +67,11 @@
htmxBusy = true
}
})
document.body.addEventListener('htmx:afterRequest', function () {
htmxBusy = false
})
document.body.addEventListener('htmx:responseError', function () {
htmxBusy = false
})

View File

@@ -53,13 +53,13 @@
{% include 'generic/import_block.html' %}
{% if filter_selected %}
<span id="filter_selected_{{ view_id }}" class="px-4 py-2 bg-[#a4933b] text-white rounded-md text-xs hover:bg-primary-800 transition duration-300" onclick="
<span id="filter_selected_{{ view_id }}" class="d-none quick-bulk-action px-4 py-2 bg-[#a4933b] text-white rounded-md text-xs hover:bg-primary-800 transition duration-300" onclick="
ids = $('#{{ selected_instances_key_id }}').attr('data-ids');
console.log(ids);
$('#filterSelectedForm{{ view_id }}').find('[name=selected_ids]').val(ids);
$('#filterSelectedForm{{ view_id }}').find('[type=submit]').click();
"><span class="label">{% trans 'Filter' %}</span> (<span class="count_{{ view_id }}">0</span>)</span>
<form id="filterSelectedForm{{view_id}}" style="display: inline;" hx-post="{{ request.path }}?show_all=false" hx-target="#{{ view_id|safe }}" hx-swap="outerHTML" onsubmit="event.preventDefault()" hx-on:submit="htmxLoadIndicator(this);">
<form id="filterSelectedForm{{ view_id }}" style="display: inline;" hx-post="{{ request.path }}?show_all=false" hx-target="#{{ view_id|safe }}" hx-swap="outerHTML" onsubmit="event.preventDefault()" hx-on:submit="htmxLoadIndicator(this);">
<input type="hidden" name="selected_ids" value="{{ request.session.hlv_selected_ids }}" />
<button hidden type="submit">Submit</button>
</form>

View File

@@ -38,4 +38,66 @@
// out
}
);
function highlightRow(checkbox) {
checkbox.closest(".oh-sticky-table__tr").removeClass("highlight-selected");
checkbox.closest("tr").removeClass("highlight-selected");
if (checkbox.is(":checked")) {
checkbox.closest(".oh-sticky-table__tr").addClass("highlight-selected");
checkbox.closest("tr").addClass("highlight-selected");
}
}
function toggleHighlight(ids) {
$.each(ids, function (indexInArray, id) {
setTimeout(() => {
$(`#${id}`)
.closest(".oh-sticky-table__tr")
.removeClass("highlight-selected");
if ($(`#${id}`).is(":checked")) {
$(`#${id}`)
.closest(".oh-sticky-table__tr")
.addClass("highlight-selected");
}
}, 1);
});
}
function reloadSelectedCount(targetElement, storeKey = "selectedInstances") {
var count = JSON.parse($(`#${storeKey}`).attr("data-ids") || "[]").length;
id = targetElement.attr("id");
if (id) {
id = id.split("count_")[1];
}
if (count) {
targetElement.html(count);
targetElement.parent().removeClass("d-none");
$(`#unselect_${id}, #export_${id}, #bulk_udate_${id}`).removeClass(
"d-none"
);
} else {
targetElement.parent().addClass("d-none");
$(`#unselect_${id}, #export_${id}, #bulk_udate_${id}`).addClass(
"d-none"
);
}
}
function removeHighlight() {
setTimeout(function () {
$(".toggle-highlight").removeClass("toggle-highlight");
}, 200);
}
function removeId(element, storeKey = "selectedInstances") {
id = element.val();
viewId = element.attr("data-view-id");
ids = JSON.parse($(`#${storeKey}`).attr("data-ids") || "[]");
let elementToRemove = 5;
if (ids[ids.length - 1] === id) {
ids.pop();
}
ids = JSON.stringify(ids);
$(`#${storeKey}`).attr("data-ids", ids);
}
</script>

View File

@@ -238,43 +238,6 @@ function toggleReimbursmentType(element) {
}
}
function reloadSelectedCount(targetElement, storeKey = "selectedInstances") {
var count = JSON.parse($(`#${storeKey}`).attr("data-ids") || "[]").length;
id = targetElement.attr("id");
if (id) {
id = id.split("count_")[1];
}
if (count) {
targetElement.html(count);
targetElement.parent().removeClass("d-none");
$(`#unselect_${id}, #export_${id}, #bulk_udate_${id}`).removeClass(
"d-none"
);
} else {
targetElement.parent().addClass("d-none");
$(`#unselect_${id}, #export_${id}, #bulk_udate_${id}`).addClass(
"d-none"
);
}
}
function removeHighlight() {
setTimeout(function () {
$(".toggle-highlight").removeClass("toggle-highlight");
}, 200);
}
function removeId(element, storeKey = "selectedInstances") {
id = element.val();
viewId = element.attr("data-view-id");
ids = JSON.parse($(`#${storeKey}`).attr("data-ids") || "[]");
let elementToRemove = 5;
if (ids[ids.length - 1] === id) {
ids.pop();
}
ids = JSON.stringify(ids);
$(`#${storeKey}`).attr("data-ids", ids);
}
function bulkStageUpdate(canIds, stageId, preStageId) {
$.ajax({
type: "POST",