Alexandr SaVBaD Waltz
c889c20b61
Added a global error page to improve user experience during navigation issues, with localized messages and redirect options. Enhanced error handling for brand, product, and category slug composables by introducing explicit 404 responses. - Introduced `/error.vue` template for custom error displays using `NuxtError`. - Updated `useBrandBySlug`, `useProductBySlug`, `useCategoryBySlug` to throw 404 errors when data is not found. - Expanded i18n files (`en-gb.json` and `ru-ru.json`) with additional error-related translations. - Replaced plain text input with a `.search`-scoped class for cleaner styling. Enhances robustness and user feedback during navigation errors. No breaking changes introduced.
94 lines
No EOL
2.2 KiB
Vue
94 lines
No EOL
2.2 KiB
Vue
<template>
|
|
<div class="brands">
|
|
<ui-title>
|
|
<h1>{{ t('brands.title') }}</h1>
|
|
<p>{{ t('brands.text') }}</p>
|
|
<div class="search">
|
|
<input
|
|
type="text"
|
|
inputmode="text"
|
|
:placeholder="t('fields.brandsSearch')"
|
|
v-model="searchInput"
|
|
>
|
|
<icon name="tabler:search" size="20" />
|
|
</div>
|
|
</ui-title>
|
|
<div class="brands__main">
|
|
<div class="container">
|
|
<div class="brands__main-wrapper">
|
|
<cards-brand
|
|
v-for="brand in brands"
|
|
:key="brand.node.uuid"
|
|
:brand="brand.node"
|
|
/>
|
|
<div v-if="pending" class="brands__loading">
|
|
<skeletons-cards-brand
|
|
v-for="idx in 8"
|
|
:key="idx"
|
|
/>
|
|
</div>
|
|
<div class="brands__list-observer" ref="observer"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import {usePageTitle} from "@composables/utils";
|
|
import {useBrands} from "@composables/brands";
|
|
|
|
const {t} = useI18n();
|
|
|
|
const observer = ref(null);
|
|
const name = useRouteQuery<string>('name', '');
|
|
const searchInput = ref<string>(name.value);
|
|
|
|
const { setPageTitle } = usePageTitle();
|
|
const { brands, pending, pageInfo, variables, getBrands } = useBrands({
|
|
brandSearch: name.value
|
|
});
|
|
|
|
await getBrands();
|
|
|
|
useIntersectionObserver(
|
|
observer,
|
|
async ([{ isIntersecting }]) => {
|
|
if (isIntersecting && pageInfo.value?.hasNextPage && !pending.value) {
|
|
variables.brandAfter = pageInfo.value.endCursor;
|
|
await getBrands();
|
|
}
|
|
},
|
|
);
|
|
|
|
const updateNameDebounced = useDebounceFn(() => {
|
|
name.value = searchInput.value;
|
|
}, 500);
|
|
watch(searchInput, newVal => {
|
|
updateNameDebounced();
|
|
});
|
|
watch(name, async (newVal) => {
|
|
variables.brandName = newVal || '';
|
|
variables.brandAfter = '';
|
|
brands.value = [];
|
|
await getBrands();
|
|
});
|
|
|
|
setPageTitle(t('breadcrumbs.brands'));
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.brands {
|
|
&__main {
|
|
background-color: $main;
|
|
padding-block: 70px;
|
|
border-top: 1px solid $border;
|
|
|
|
&-wrapper {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
|
|
gap: 24px;
|
|
}
|
|
}
|
|
}
|
|
</style> |