[Fix] UI Fixes (#266)

Rather than have a bunch of pull-requests that @jebus will have to merge shall we collect some of the fixes for the UI issues I found in here.

- [x] #259
- [x] #260
- [x] #261
- [x] #262
- [x] #263
- [x] #264
- [x] #265

Co-authored-by: Tobias O <tobias.olenyi@envipath.com>
Reviewed-on: enviPath/enviPy#266
Co-authored-by: Liam Brydon <lbry121@aucklanduni.ac.nz>
Co-committed-by: Liam Brydon <lbry121@aucklanduni.ac.nz>
This commit is contained in:
2025-12-15 21:28:43 +13:00
committed by jebus
parent 8adb93012a
commit 4bf20e62ef
15 changed files with 279 additions and 170 deletions

View File

@ -45,43 +45,36 @@
class="mt-6 w-full"
x-data="{
activeTab: 'reviewed',
reviewedCount: 0,
unreviewedCount: 0,
reviewedLoaded: false,
unreviewedLoaded: false,
reviewedCount: null,
unreviewedCount: null,
get bothLoaded() { return this.reviewedCount !== null && this.unreviewedCount !== null },
get isEmpty() { return this.bothLoaded && this.reviewedCount === 0 && this.unreviewedCount === 0 },
updateTabSelection() {
// Only auto-select unreviewed tab if both have loaded and there are no reviewed items
if (this.reviewedLoaded && this.unreviewedLoaded && this.reviewedCount === 0 && this.unreviewedCount > 0) {
if (this.bothLoaded && this.reviewedCount === 0 && this.unreviewedCount > 0) {
this.activeTab = 'unreviewed';
}
}
}"
>
{# No items found message #}
<div
x-show="reviewedCount === 0 && unreviewedCount === 0"
class="text-base-content/70 py-8 text-center"
>
{# No items found message - only show after both tabs have loaded #}
<div x-show="isEmpty" class="text-base-content/70 py-8 text-center">
<p>No items found.</p>
</div>
{# Tabs Navigation #}
<div
role="tablist"
class="tabs tabs-border"
x-show="reviewedCount > 0 || unreviewedCount > 0"
>
<div role="tablist" class="tabs tabs-border" x-show="!isEmpty">
<button
role="tab"
class="tab"
:class="{ 'tab-active': activeTab === 'reviewed' }"
@click="activeTab = 'reviewed'"
x-show="reviewedCount > 0"
x-show="reviewedCount === null || reviewedCount > 0"
>
Reviewed
<span
class="badge badge-xs badge-dash badge-info mb-2 ml-2"
x-text="reviewedCount"
:class="{ 'animate-pulse': reviewedCount === null }"
x-text="reviewedCount ?? '…'"
></span>
</button>
<button
@ -89,12 +82,13 @@
class="tab"
:class="{ 'tab-active': activeTab === 'unreviewed' }"
@click="activeTab = 'unreviewed'"
x-show="unreviewedCount > 0"
x-show="unreviewedCount === null || unreviewedCount > 0"
>
Unreviewed
<span
class="badge badge-xs badge-dash badge-info mb-2 ml-2"
x-text="unreviewedCount"
:class="{ 'animate-pulse': unreviewedCount === null }"
x-text="unreviewedCount ?? '…'"
></span>
</button>
</div>
@ -102,14 +96,14 @@
{# Reviewed Tab Content #}
<div
class="mt-6"
x-show="activeTab === 'reviewed' && (reviewedCount > 0 || unreviewedCount > 0)"
x-show="activeTab === 'reviewed' && !isEmpty"
x-data="remotePaginatedList({
endpoint: '{{ api_endpoint }}?review_status=true',
instanceId: '{{ entity_type }}_reviewed',
isReviewed: true,
perPage: {{ per_page|default:50 }}
})"
@items-loaded="reviewedCount = totalItems; reviewedLoaded = true; updateTabSelection()"
@items-loaded="reviewedCount = totalItems; updateTabSelection()"
>
{% include "collections/_paginated_list_partial.html" with empty_text="reviewed "|add:list_title|default:"items" show_review_badge=True always_show_badge=True %}
</div>
@ -117,14 +111,14 @@
{# Unreviewed Tab Content #}
<div
class="mt-6"
x-show="activeTab === 'unreviewed' && (reviewedCount > 0 || unreviewedCount > 0)"
x-show="activeTab === 'unreviewed' && !isEmpty"
x-data="remotePaginatedList({
endpoint: '{{ api_endpoint }}?review_status=false',
instanceId: '{{ entity_type }}_unreviewed',
isReviewed: false,
perPage: {{ per_page|default:50 }}
})"
@items-loaded="unreviewedCount = totalItems; unreviewedLoaded = true; updateTabSelection()"
@items-loaded="unreviewedCount = totalItems; updateTabSelection()"
>
{% include "collections/_paginated_list_partial.html" with empty_text="unreviewed "|add:list_title|default:"items" %}
</div>