fix: range price slider

stardustmeg · May 31, 2024 · a83659d · a83659d · Kleostro · May 31, 2024
1 parent 6001804
commit a83659d
Show file tree

Hide file tree

Showing 8 changed files with 32 additions and 40 deletions.
diff --git a/src/entities/ProductCard/view/productCardView.module.scss b/src/entities/ProductCard/view/productCardView.module.scss
@@ -77,9 +77,6 @@
   width: var(--small-offset);
   height: var(--small-offset);
   background-color: var(--noble-gray-1000);
-  transition:
-    transform 0.2s,
-    outline 0.2s;
   backdrop-filter: blur(10px);
 
   svg {

diff --git a/src/entities/UserAddress/model/UserAddressModel.ts b/src/entities/UserAddress/model/UserAddressModel.ts
@@ -46,6 +46,7 @@ class UserAddressModel {
     }
   }
 
+  // eslint-disable-next-line max-lines-per-function
   private async handleAddressType(user: User, activeType: AddressTypeType, inactive: boolean): Promise<void> {
     const customerModel = getCustomerModel();
 
@@ -87,7 +88,6 @@ class UserAddressModel {
         case ADDRESS_TYPE.DEFAULT_SHIPPING:
           await customerModel.editCustomer([CustomerModel.actionRemoveShippingAddress(this.currentAddress)], user);
           break;
-
         default:
           break;
       }

diff --git a/src/features/ProductFilters/view/ProductFiltersView.ts b/src/features/ProductFilters/view/ProductFiltersView.ts
@@ -1,4 +1,4 @@
-import type { PriceRange, SizeProductCount } from '@/shared/API/types/type';
+import type { SizeProductCount } from '@/shared/API/types/type';
 import type { Category } from '@/shared/types/product';
 import type ProductFiltersParams from '@/shared/types/productFilters';
 
@@ -263,6 +263,7 @@ class ProductFiltersView {
 
     link.getHTML().addEventListener('click', (event) => {
       event.preventDefault();
+
       RouterModel.setSearchParams(SEARCH_PARAMS_FIELD.META, id);
       RouterModel.deleteSearchParams(SEARCH_PARAMS_FIELD.PAGE);
       this.metaLinks.forEach((link) => this.switchSelectedFilter(link, false));
@@ -556,6 +557,19 @@ class ProductFiltersView {
     this.callback();
   }
 
+  private updatePriceRange(): void {
+    this.priceSlider.updateOptions(
+      {
+        start: [this.params?.priceRange?.min ?? 0, this.params?.priceRange?.max ?? 0],
+      },
+      true,
+    );
+    const fromInput = this.priceInputs.get(PRICE_RANGE_LABEL[getStore().getState().currentLanguage].FROM);
+    const toInput = this.priceInputs.get(PRICE_RANGE_LABEL[getStore().getState().currentLanguage].TO);
+    fromInput?.setValue((this.params?.priceRange?.min ?? 0).toFixed(2));
+    toInput?.setValue((this.params?.priceRange?.max ?? 0).toFixed(2));
+  }
+
   private updateSelectedPrice(from: InputModel | null = null, to: InputModel | null = null): void {
     RouterModel.setSearchParams(SEARCH_PARAMS_FIELD.MIN_PRICE, from?.getValue() ?? '0');
     RouterModel.setSearchParams(SEARCH_PARAMS_FIELD.MAX_PRICE, to?.getValue() ?? '0');
@@ -638,25 +652,9 @@ class ProductFiltersView {
       const currentSpan = span;
       currentSpan.innerText = BASE_PRODUCT_COUNT;
     });
+    this.updatePriceRange();
     this.redrawProductsCount();
   }
-
-  public updatePriceRange(params: PriceRange): void {
-    if (this.params) {
-      this.params.priceRange = params;
-    }
-    this.priceSlider.updateOptions(
-      {
-        range: { max: params.max ?? 0, min: params.min ?? 0 },
-        start: [params.min ?? 0, params.max ?? 0],
-      },
-      true,
-    );
-    const fromInput = this.priceInputs.get(PRICE_RANGE_LABEL[getStore().getState().currentLanguage].FROM);
-    const toInput = this.priceInputs.get(PRICE_RANGE_LABEL[getStore().getState().currentLanguage].TO);
-    fromInput?.setValue(params.min.toFixed(2) ?? '');
-    toInput?.setValue(params.max.toFixed(2) ?? '');
-  }
 }
 
 export default ProductFiltersView;
diff --git a/src/pages/ProductPage/model/ProductPageModel.ts b/src/pages/ProductPage/model/ProductPageModel.ts
@@ -47,9 +47,9 @@ class ProductPageModel implements Page {
       });
     }
 
-    if (subcategory) {
+    if (subcategory && category) {
       links.push({
-        link: '',
+        link: buildPathName(PAGE_ID.CATALOG_PAGE, null, { category: [category.id], subcategory: [subcategory.id] }),
         name: subcategory.name[0].value,
       });
     }

diff --git a/src/pages/UserProfilePage/view/userProfilePageView.module.scss b/src/pages/UserProfilePage/view/userProfilePageView.module.scss
@@ -45,7 +45,6 @@
   width: 25%;
   height: fit-content;
   background-color: var(--white);
-  gap: var(--extra-small-offset);
 }
 
 .accountMenuItem {
@@ -69,7 +68,7 @@
   align-items: center;
   align-self: center;
   width: 100%;
-  height: 2.5rem;
+  height: 4rem;
   font: var(--regular-font);
   letter-spacing: var(--one);
   text-align: center;
@@ -81,7 +80,7 @@
     content: '';
     position: absolute;
     left: 0;
-    bottom: -5px;
+    bottom: 1rem;
     width: 100%;
     height: var(--two);
     background-color: currentcolor;
@@ -90,7 +89,8 @@
     transform-origin: center;
     transition:
       transform 0.2s,
-      opacity 0.2s;
+      opacity 0.2s,
+      background-color 0.2s;
   }
 
   @media (hover: hover) {

diff --git a/src/widgets/Catalog/model/CatalogModel.ts b/src/widgets/Catalog/model/CatalogModel.ts
@@ -1,4 +1,4 @@
-import type { OptionsRequest, PriceRange, SortOptions } from '@/shared/API/types/type.ts';
+import type { OptionsRequest, SortOptions } from '@/shared/API/types/type.ts';
 import type ProductFiltersParams from '@/shared/types/productFilters.ts';
 import type { SelectedFilters } from '@/shared/types/productFilters.ts';
 import type { SelectedSorting } from '@/shared/types/productSorting.ts';
@@ -54,7 +54,7 @@ class CatalogModel {
     }
   }
 
-  private decodeSearchParams(priceRange: PriceRange): {
+  private decodeSearchParams(): {
     page: string;
     searchValue: null | string;
     selectedFilters: SelectedFilters;
@@ -67,8 +67,8 @@ class CatalogModel {
     const metaFilter = searchParams.get(SEARCH_PARAMS_FIELD.META) ?? META_FILTERS.en.ALL_PRODUCTS;
     const size = searchParams.get(SEARCH_PARAMS_FIELD.SIZE) ?? null;
     const price = {
-      max: parseFloat(searchParams.get(SEARCH_PARAMS_FIELD.MAX_PRICE) ?? priceRange.max.toString()),
-      min: parseFloat(searchParams.get(SEARCH_PARAMS_FIELD.MIN_PRICE) ?? priceRange.min.toString()),
+      max: parseFloat(searchParams.get(SEARCH_PARAMS_FIELD.MAX_PRICE) ?? '0'),
+      min: parseFloat(searchParams.get(SEARCH_PARAMS_FIELD.MIN_PRICE) ?? '0'),
     };
 
     const field = searchParams.get(SEARCH_PARAMS_FIELD.FIELD);
@@ -93,7 +93,7 @@ class CatalogModel {
   private async drawProducts(): Promise<void> {
     const productList = this.view.getItemsList();
     productList.innerHTML = '';
-    const options = await this.getOptions();
+    const options = this.getOptions();
     const productsInfo = await this.getProductsInfo(options);
     this.pagination?.getHTML().remove();
     if (productsInfo?.products?.length) {
@@ -112,16 +112,13 @@ class CatalogModel {
       this.view.getRightTopWrapper().append(this.pagination.getHTML());
     }
     this.productFilters?.getView().updateParams(productsInfo);
-    const priceRange = await getProductModel().getPriceRange();
-    this.productFilters?.getView().updatePriceRange(priceRange);
     this.view.switchEmptyList(!productsInfo?.products?.length);
   }
 
-  private async getOptions(): Promise<OptionsRequest> {
+  private getOptions(): OptionsRequest {
     let result = {};
-    const priceRange = await getProductModel().getPriceRange();
 
-    const { page, searchValue, selectedFilters, selectedSorting } = this.decodeSearchParams(priceRange);
+    const { page, searchValue, selectedFilters, selectedSorting } = this.decodeSearchParams();
     this.productFilters?.getView().setInitialActiveFilters({
       categoryLinks: Array.from(selectedFilters.category),
       metaLinks: selectedFilters.metaFilter ? [selectedFilters.metaFilter] : [],

diff --git a/src/widgets/ProductInfo/view/ProductInfoView.ts b/src/widgets/ProductInfo/view/ProductInfoView.ts
@@ -205,7 +205,7 @@ class ProductInfoView {
 
   private createProductTitle(): HTMLHeadingElement {
     this.title = createBaseElement({
-      cssClasses: ['title'],
+      cssClasses: ['productTitle'],
       innerContent: this.params.name[Number(getStore().getState().currentLanguage === LANGUAGE_CHOICE.RU)].value,
       tag: 'h3',
     });

diff --git a/src/widgets/ProductInfo/view/productInfoView.scss b/src/widgets/ProductInfo/view/productInfoView.scss
@@ -33,7 +33,7 @@
   }
 }
 
-.title {
+.productTitle {
   order: 1;
   font: var(--medium-font);
   letter-spacing: var(--one);