fix: empty results state and validation error display on homepage
This commit is contained in:
@@ -108,14 +108,20 @@
|
|||||||
<!-- Error -->
|
<!-- Error -->
|
||||||
<div v-else-if="error" class="flex items-center gap-3 p-4 bg-white border border-zinc-300 rounded-xl text-status-bad">
|
<div v-else-if="error" class="flex items-center gap-3 p-4 bg-white border border-zinc-300 rounded-xl text-status-bad">
|
||||||
<iconify-icon icon="lucide:circle-alert" style="font-size:1.25rem"></iconify-icon>
|
<iconify-icon icon="lucide:circle-alert" style="font-size:1.25rem"></iconify-icon>
|
||||||
<span class="font-medium">{{ error.general?.[0] ?? 'Unable to load stations. Please try again.' }}</span>
|
<span class="font-medium">{{ Object.values(error).flat()[0] ?? 'Unable to load stations. Please try again.' }}</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Results -->
|
<!-- Results -->
|
||||||
|
<template v-else>
|
||||||
|
<div v-if="!stations.length" class="flex items-center gap-3 p-4 bg-white border border-zinc-300 rounded-xl text-zinc-500">
|
||||||
|
<iconify-icon icon="lucide:map-pin-off" style="font-size:1.25rem"></iconify-icon>
|
||||||
|
<span class="font-medium">No stations found near you. Try a different postcode or increase the radius.</span>
|
||||||
|
</div>
|
||||||
<template v-else>
|
<template v-else>
|
||||||
<LeafletMap :stations="stations" :default-open="true" />
|
<LeafletMap :stations="stations" :default-open="true" />
|
||||||
<StationList :stations="stations" :current-sort="sort" @sort="onSort" />
|
<StationList :stations="stations" :current-sort="sort" @sort="onSort" />
|
||||||
</template>
|
</template>
|
||||||
|
</template>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|||||||
Reference in New Issue
Block a user