[ADD] HORILLA_THEME: Add quick actions in HLV
This commit is contained in:
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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) {
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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
|
||||
})
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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",
|
||||
|
||||
Reference in New Issue
Block a user