forked from enviPath/enviPy
[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:
@ -2,7 +2,12 @@
|
||||
{# Variables: empty_text (string), show_review_badge (bool), always_show_badge (bool) #}
|
||||
|
||||
{# Loading state #}
|
||||
<div x-show="isLoading">{% include "components/loading-spinner.html" %}</div>
|
||||
<div
|
||||
x-show="isLoading"
|
||||
class="mx-auto flex h-32 w-32 items-center justify-center"
|
||||
>
|
||||
{% include "components/loading-spinner.html" %}
|
||||
</div>
|
||||
|
||||
{# Error state #}
|
||||
<div
|
||||
|
||||
@ -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>
|
||||
|
||||
Reference in New Issue
Block a user