Alexandr SaVBaD Waltz
e8e0675d7d
Enhanced store filters with a refined price range slider, accommodating category-specific min/max prices and dynamic updates. Optimized reactivity for product filtering by consolidating watchers into a unified approach. Adjusted UI elements for consistent spacing and modern icon usage in filters. - Added `minMaxPrices` and debounce logic to improve price filtering performance. - Updated filter UI with collapsible headers and better styling for usability. - Refactored multiple watchers into a single handler for better efficiency. - Introduced global constants for currency symbol usage. Breaking Changes: Components relying on price filters must adapt to new props and event names (`filterMinPrice`, `filterMaxPrice`). Styles may require alignment with refined SCSS rules for filters.
94 lines
2.2 KiB
TypeScript
94 lines
2.2 KiB
TypeScript
import { GET_PRODUCTS } from '@graphql/queries/standalone/products';
|
|
import type { IProduct, IProductResponse } from '@types';
|
|
|
|
interface IProdArgs {
|
|
categoriesSlugs: string;
|
|
attributes?: string;
|
|
productOrderBy?: string;
|
|
minPrice?: number;
|
|
maxPrice?: number;
|
|
productAfter?: string;
|
|
brand?: string;
|
|
tags?: string;
|
|
}
|
|
|
|
interface IProdVars {
|
|
productFirst: number;
|
|
categoriesSlugs: string;
|
|
attributes?: string;
|
|
productOrderBy?: string;
|
|
minPrice?: number;
|
|
maxPrice?: number;
|
|
productAfter?: string;
|
|
brand?: string;
|
|
tags?: string;
|
|
}
|
|
|
|
export function useStore(args: IProdArgs) {
|
|
const variables = reactive<IProdVars>({
|
|
productFirst: 12,
|
|
categoriesSlugs: args.categoriesSlugs,
|
|
attributes: args.attributes,
|
|
productOrderBy: args.orderBy,
|
|
minPrice: args.minPrice,
|
|
maxPrice: args.maxPrice,
|
|
productAfter: args.productAfter,
|
|
brand: args.brand,
|
|
tags: args.tags,
|
|
});
|
|
|
|
const pending = ref(false);
|
|
const products = ref<IProduct>([]);
|
|
const pageInfo = ref<{
|
|
hasNextPage: boolean;
|
|
endCursor: string;
|
|
}>([]);
|
|
const error = ref<string | null>(null);
|
|
|
|
const getProducts = async (): Promise<void> => {
|
|
pending.value = true;
|
|
|
|
const queryVariables = {
|
|
productFirst: variables.productFirst,
|
|
categoriesSlugs: variables.categoriesSlugs,
|
|
productOrderBy: variables.orderBy || undefined,
|
|
productAfter: variables.productAfter || undefined,
|
|
attributes: variables.attributes || undefined,
|
|
minPrice: variables.minPrice || undefined,
|
|
maxPrice: variables.maxPrice || undefined,
|
|
brand: variables.brand || undefined,
|
|
tags: variables.tags || undefined,
|
|
};
|
|
|
|
const { data, error: mistake } = await useAsyncQuery<IProductResponse>(GET_PRODUCTS, queryVariables);
|
|
|
|
if (data.value?.products.edges) {
|
|
pageInfo.value = data.value?.products.pageInfo;
|
|
|
|
if (variables.productAfter) {
|
|
products.value = [
|
|
...products.value,
|
|
...data.value.products.edges,
|
|
];
|
|
} else {
|
|
products.value = data.value?.products.edges;
|
|
}
|
|
}
|
|
|
|
if (mistake.value) {
|
|
error.value = mistake.value;
|
|
}
|
|
|
|
pending.value = false;
|
|
};
|
|
|
|
watch(error, (e) => e && console.error('useStore products error', e));
|
|
|
|
return {
|
|
pending,
|
|
products,
|
|
pageInfo,
|
|
variables,
|
|
getProducts,
|
|
};
|
|
}
|