diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 22a3fc1..99a5467 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -3,7 +3,7 @@ import { ScrollingModule } from '@angular/cdk/scrolling';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';
import { OverlayModule } from '@angular/cdk/overlay';
-import { VCLDrawerModule, IconResolverService } from '@vcl/ng-vcl';
+import { IconResolverService } from '@vcl/ng-vcl';
import {
TranslateModule,
TranslateLoader,
@@ -22,8 +22,6 @@ import {
LazyLoadImageModule,
ScrollHooks,
} from 'ng-lazyload-image';
-import { ClickStopPropagation } from './shared/click-stop-propagation.directive';
-import { HoverColorPickerDirective } from './directives/hover-color-picker-directive.service';
import { GraphQLModule } from './graphql.module';
import { ProductsModule } from './features/products/products.module';
import { SharedModule } from './shared/shared.module';
@@ -35,10 +33,8 @@ export function HttpLoaderFactory(http: HttpClient) {
return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}
-const vclModules = [];
-
@NgModule({
- declarations: [AppComponent, ClickStopPropagation, HoverColorPickerDirective],
+ declarations: [AppComponent],
imports: [
BrowserModule.withServerTransition({ appId: 'serverApp' }),
BrowserAnimationsModule,
@@ -60,7 +56,6 @@ const vclModules = [];
GraphQLModule,
OverlayModule,
ScrollingModule,
- ...vclModules,
SharedModule,
],
exports: [TranslateModule],
diff --git a/src/app/components/products-old/products.component.html b/src/app/components/products-old/products.component.html
deleted file mode 100644
index c193c15..0000000
--- a/src/app/components/products-old/products.component.html
+++ /dev/null
@@ -1,18 +0,0 @@
-
diff --git a/src/app/components/products-old/products.component.scss b/src/app/components/products-old/products.component.scss
deleted file mode 100644
index 80f3393..0000000
--- a/src/app/components/products-old/products.component.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-.page-products {
- background-color: #f2f2f2;
-
- &__title {
- margin: 0;
- text-align: center;
- padding: 1em 0;
- }
-
- &__panel {
- box-sizing: border-box;
- }
-}
diff --git a/src/app/components/products-old/products.component.ts b/src/app/components/products-old/products.component.ts
deleted file mode 100644
index cda091d..0000000
--- a/src/app/components/products-old/products.component.ts
+++ /dev/null
@@ -1,83 +0,0 @@
-import {
- AfterViewInit,
- Component,
- Input,
- OnDestroy,
- OnInit,
-} from '@angular/core';
-import { ScreenService } from 'src/app/services/screen.service';
-
-@Component({
- selector: 'products',
- templateUrl: './products.component.html',
- styleUrls: ['./products.component.scss'],
-})
-export class ProductsComponent implements AfterViewInit, OnDestroy {
- mediaBreakPoint: string;
-
- groups: { title: string; productCount: number }[] = [
- { title: 'all', productCount: 244 },
- { title: 'brand 1', productCount: 170 },
- { title: 'brand 2', productCount: 74 },
- ];
-
- selectedGroup = this.groups[0].title;
-
- selectedGridSize = '2x2';
-
- sortOptions: string[] = [
- 'most popular',
- 'newest',
- 'price (low-high)',
- 'price (high-low)',
- ];
- sortDropdownExpanded = false;
- sortBy = this.sortOptions[0];
-
- filterOptions: string[] = [
- 'size',
- 'color',
- 'brand',
- 'wearing occasion',
- 'season',
- 'capsule',
- ];
-
- @Input() currency: string;
- @Input() products: Product[] = [];
- @Input() pageTitle: string;
-
- constructor(public screenService: ScreenService) {}
-
- ngAfterViewInit(): void {
- this.screenService.mediaBreakpoint$.subscribe((value) => {
- this.mediaBreakPoint = value;
- });
- }
-
- ngOnDestroy(): void {
- this.screenService.ngOnDestroy();
- }
-
- sortOptionClicked(option: string, event) {
- this.sortBy = option;
- this.sortDropdownExpanded = false;
- event.stopPropagation();
- }
-}
-
-export function timeout(ms) {
- return new Promise((resolve) => setTimeout(resolve, ms));
-}
-
-export class Product {
- id: string | number;
- title: string;
- price: number;
- like: boolean;
- additionalLabel: string;
- colors: string[];
- selectedColor: string;
- images: {};
- urls: {};
-}
diff --git a/src/app/core/components/footer-top/footer-top.component.ts b/src/app/core/components/footer-top/footer-top.component.ts
index c733b3e..9e7ce49 100644
--- a/src/app/core/components/footer-top/footer-top.component.ts
+++ b/src/app/core/components/footer-top/footer-top.component.ts
@@ -1,5 +1,5 @@
import { Component } from '@angular/core';
-import { ScreenService } from 'src/app/services/screen.service';
+import { ScreenService } from '../../services/screen.service';
@Component({
selector: 'app-footer-top',
diff --git a/src/app/core/components/header/header.component.ts b/src/app/core/components/header/header.component.ts
index fdc2f73..b0f400e 100644
--- a/src/app/core/components/header/header.component.ts
+++ b/src/app/core/components/header/header.component.ts
@@ -1,5 +1,5 @@
import { Component } from '@angular/core';
-import { ScreenService } from 'src/app/services/screen.service';
+import { ScreenService } from '../../services/screen.service';
@Component({
selector: 'app-header',
diff --git a/src/app/core/components/top-bar/top-bar.component.ts b/src/app/core/components/top-bar/top-bar.component.ts
index a3cc87f..ec38ea0 100644
--- a/src/app/core/components/top-bar/top-bar.component.ts
+++ b/src/app/core/components/top-bar/top-bar.component.ts
@@ -2,7 +2,7 @@ import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { TranslateService } from '@ngx-translate/core';
import { CartService } from 'src/app/features/cart/services/cart.service';
-import { ScreenService } from 'src/app/services/screen.service';
+import { ScreenService } from '../../services/screen.service';
@Component({
selector: 'app-top-bar',
diff --git a/src/app/services/notification.service.ts b/src/app/core/services/notification.service.ts
similarity index 100%
rename from src/app/services/notification.service.ts
rename to src/app/core/services/notification.service.ts
diff --git a/src/app/services/screen.service.ts b/src/app/core/services/screen.service.ts
similarity index 100%
rename from src/app/services/screen.service.ts
rename to src/app/core/services/screen.service.ts
diff --git a/src/app/directives/hover-color-picker-directive.service.ts b/src/app/directives/hover-color-picker-directive.service.ts
deleted file mode 100644
index 7da99ed..0000000
--- a/src/app/directives/hover-color-picker-directive.service.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { Directive, ElementRef, HostListener, Input } from '@angular/core';
-import { ProductService } from '../features/products/services/product.service';
-
-@Directive({
- selector: '[appHoverColorPicker]',
-})
-export class HoverColorPickerDirective {
- @Input() appHoverColorPicker = '';
-
- @HostListener('mouseenter')
- onMouseEnter() {
- this.highlight(this.appHoverColorPicker);
- }
-
- @HostListener('mouseleave')
- onMouseLeave() {
- this.highlight('');
- }
-
- private highlight(value: string) {
- this.productService.productImageColorHover.next(value);
- }
-
- constructor(private el: ElementRef, private productService: ProductService) {}
-}
diff --git a/src/app/features/products/components/product-description/product-description.component.ts b/src/app/features/products/components/product-description/product-description.component.ts
index e15eb92..acd9e7a 100644
--- a/src/app/features/products/components/product-description/product-description.component.ts
+++ b/src/app/features/products/components/product-description/product-description.component.ts
@@ -1,5 +1,5 @@
import { Component, Input } from '@angular/core';
-import { ProductImage } from 'src/app/models/product';
+import { ProductImage } from '../../models/product';
import { CartService } from 'src/app/features/cart/services/cart.service';
@Component({
diff --git a/src/app/features/products/components/product-main/product-gallery/product-gallery.component.ts b/src/app/features/products/components/product-main/product-gallery/product-gallery.component.ts
index bd160ec..30b0704 100644
--- a/src/app/features/products/components/product-main/product-gallery/product-gallery.component.ts
+++ b/src/app/features/products/components/product-main/product-gallery/product-gallery.component.ts
@@ -5,7 +5,7 @@ import {
OnChanges,
SimpleChanges,
} from '@angular/core';
-import { ScreenService } from 'src/app/services/screen.service';
+import { ScreenService } from 'src/app/core/services/screen.service';
import { IoRestorecommerceImageImage, IoRestorecommerceProductPhysicalVariant } from 'src/app/generated/graphql';
@Component({
diff --git a/src/app/features/products/components/product-main/product-info/product-info.component.ts b/src/app/features/products/components/product-main/product-info/product-info.component.ts
index e493766..1d41451 100644
--- a/src/app/features/products/components/product-main/product-info/product-info.component.ts
+++ b/src/app/features/products/components/product-main/product-info/product-info.component.ts
@@ -7,7 +7,7 @@ import {
} from '@angular/core';
import { Decimal } from '@restorecommerce/cart/lib/model/primitives';
import { CartService } from 'src/app/features/cart/services/cart.service';
-import { NotificationService } from 'src/app/services/notification.service';
+import { NotificationService } from 'src/app/core/services/notification.service';
import { IItem } from '@restorecommerce/cart/lib/model/IItem';
import { IoRestorecommerceProductPhysicalVariant } from 'src/app/generated/graphql';
diff --git a/src/app/features/products/components/product-main/product-main.component.ts b/src/app/features/products/components/product-main/product-main.component.ts
index 02debf6..478043b 100644
--- a/src/app/features/products/components/product-main/product-main.component.ts
+++ b/src/app/features/products/components/product-main/product-main.component.ts
@@ -1,7 +1,5 @@
-import { Component, OnInit, Input } from '@angular/core';
+import { Component, Input } from '@angular/core';
import { IoRestorecommerceProductPhysicalVariant } from 'src/app/generated/graphql';
-import { Product } from 'src/app/models/product';
-
@Component({
selector: 'app-product-main',
templateUrl: './product-main.component.html',
diff --git a/src/app/features/products/components/product-navigation/product-navigation.component.ts b/src/app/features/products/components/product-navigation/product-navigation.component.ts
index 20b743a..11e2e60 100644
--- a/src/app/features/products/components/product-navigation/product-navigation.component.ts
+++ b/src/app/features/products/components/product-navigation/product-navigation.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
@Component({
selector: 'app-product-navigation',
diff --git a/src/app/features/products/components/product-recommend/product-recommend.service.ts b/src/app/features/products/components/product-recommend/product-recommend.service.ts
index cb3b1df..c2743db 100644
--- a/src/app/features/products/components/product-recommend/product-recommend.service.ts
+++ b/src/app/features/products/components/product-recommend/product-recommend.service.ts
@@ -1,9 +1,9 @@
-import { ProductImage } from 'src/app/models/product';
+import { ProductImage } from '../../models/product';
-import * as blackSneakers from 'src/app/data/blackSneakers.json';
-import * as brownSneakers from 'src/app/data/brownSneakers.json';
-import * as whiteSneakers from 'src/app/data/whiteSneakers.json';
-import * as whiteShirt from 'src/app/data/whiteShirt.json';
+import * as blackSneakers from '../../data/blackSneakers.json';
+import * as brownSneakers from '../../data/brownSneakers.json';
+import * as whiteSneakers from '../../data/whiteSneakers.json';
+import * as whiteShirt from '../../data/whiteShirt.json';
export class ProductRecommendationService {
private color: string = 'brown';
diff --git a/src/app/features/products/components/product-zoom/product-zoom.component.ts b/src/app/features/products/components/product-zoom/product-zoom.component.ts
index d6d8d21..dd020d2 100644
--- a/src/app/features/products/components/product-zoom/product-zoom.component.ts
+++ b/src/app/features/products/components/product-zoom/product-zoom.component.ts
@@ -9,7 +9,7 @@ import {
HostListener,
AfterViewChecked,
} from '@angular/core';
-import { ProductImage } from 'src/app/models/product';
+import { ProductImage } from '../../models/product';
@Component({
selector: 'app-product-zoom',
diff --git a/src/app/features/products/components/product/product.component.ts b/src/app/features/products/components/product/product.component.ts
index 3956e4a..fec260a 100644
--- a/src/app/features/products/components/product/product.component.ts
+++ b/src/app/features/products/components/product/product.component.ts
@@ -1,8 +1,8 @@
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
-import { ScreenService } from 'src/app/services/screen.service';
import { ProductService } from 'src/app/features/products/services/product.service';
import { combineLatest, map, switchMap } from 'rxjs';
+import { ScreenService } from 'src/app/core/services/screen.service';
@Component({
selector: 'app-product',
diff --git a/src/app/data/blackSneakers.json b/src/app/features/products/data/blackSneakers.json
similarity index 100%
rename from src/app/data/blackSneakers.json
rename to src/app/features/products/data/blackSneakers.json
diff --git a/src/app/data/brownSneakers.json b/src/app/features/products/data/brownSneakers.json
similarity index 100%
rename from src/app/data/brownSneakers.json
rename to src/app/features/products/data/brownSneakers.json
diff --git a/src/app/data/product-samples.ts b/src/app/features/products/data/product-samples.ts
similarity index 100%
rename from src/app/data/product-samples.ts
rename to src/app/features/products/data/product-samples.ts
diff --git a/src/app/data/products-shoes.ts b/src/app/features/products/data/products-shoes.ts
similarity index 100%
rename from src/app/data/products-shoes.ts
rename to src/app/features/products/data/products-shoes.ts
diff --git a/src/app/data/whiteShirt.json b/src/app/features/products/data/whiteShirt.json
similarity index 100%
rename from src/app/data/whiteShirt.json
rename to src/app/features/products/data/whiteShirt.json
diff --git a/src/app/data/whiteSneakers.json b/src/app/features/products/data/whiteSneakers.json
similarity index 100%
rename from src/app/data/whiteSneakers.json
rename to src/app/features/products/data/whiteSneakers.json
diff --git a/src/app/features/products/models/product.ts b/src/app/features/products/models/product.ts
new file mode 100644
index 0000000..983cf82
--- /dev/null
+++ b/src/app/features/products/models/product.ts
@@ -0,0 +1,27 @@
+export interface ProductImage {
+ src: string;
+ srcThumb: string;
+ alt: string;
+}
+
+// TODO Map BackendTypes to a More useful Frontend type.
+
+// export interface MultiColorsProductImage {
+// [key: string]: ProductImage[];
+// }
+
+// export interface Product {
+// id: string;
+// title: string;
+// description: string;
+// price: number;
+// isBestSeller: boolean;
+// liked: boolean;
+// productImageSources: MultiColorsProductImage;
+// materialInfo: string;
+// additionalLabel: string;
+// selectedColor: string;
+// colors: string[];
+// selectedSize: number;
+// sizes: number[];
+// }
diff --git a/src/app/features/products/products.module.ts b/src/app/features/products/products.module.ts
index aa44091..b64091f 100644
--- a/src/app/features/products/products.module.ts
+++ b/src/app/features/products/products.module.ts
@@ -5,7 +5,7 @@ import { ShoesComponent } from './components/shoes/shoes.component';
import { ShoesProductsComponent } from './components/shoes-products/shoes-products.component';
import { ProductComponent } from './components/product/product.component';
import { ProductVariantsComponent } from './components/product-variants/product-variants.component';
-import { ProductsTemplateComponent } from '../../templates/products-template/products-template.component';
+import { ProductsTemplateComponent } from './templates/products-template/products-template.component';
import { ProductCardComponent } from './components/product-card/product-card.component';
import { ProductColorPickerComponent } from './components/product-color-picker/product-color-picker.component';
import { ProductInterestComponent } from './components/product-interest/product-interest.component';
diff --git a/src/app/features/products/services/product.service.ts b/src/app/features/products/services/product.service.ts
index a72dbfe..5f650e8 100644
--- a/src/app/features/products/services/product.service.ts
+++ b/src/app/features/products/services/product.service.ts
@@ -1,9 +1,6 @@
-import { Injectable, EventEmitter, OnDestroy } from '@angular/core';
-import { HttpClient } from '@angular/common/http';
+import { Injectable, EventEmitter } from '@angular/core';
-import { Product } from '../../../models/product';
-import { Product as ProductCard } from '../components/products/products.component';
-import { Subject, Subscription, map, catchError, of, tap } from 'rxjs';
+import { map, catchError, of, tap } from 'rxjs';
import {
IoRestorecommerceProductProduct,
IoRestorecommerceResourcebaseFilterOperation,
@@ -13,19 +10,10 @@ import {
@Injectable({
providedIn: 'root',
})
-export class ProductService implements OnDestroy {
- productImageColorHover = new Subject();
-
- sub: Subscription;
-
+export class ProductService {
productColorChanged = new EventEmitter();
- constructor(private http: HttpClient, private productGQL: ProductsQueryGQL) {}
-
- getShoe(shoeId: number | string) {
- const url = `/assets/shoes/${shoeId}.json`;
- return this.http.get(url);
- }
+ constructor(private productGQL: ProductsQueryGQL) {}
products$ = this.productGQL
.fetch({
@@ -58,36 +46,4 @@ export class ProductService implements OnDestroy {
return of([] as IoRestorecommerceProductProduct[]);
})
);
-
- getShoes() {
- this.sub = this.productGQL
- .fetch({
- input: {
- offset: 0,
- limit: 10,
- filters: [
- {
- // TODO This refactor this code as In-house boilerplate code.
- filters: [
- {
- field: 'meta.owners[*].attributes[0].value',
- operation: IoRestorecommerceResourcebaseFilterOperation.In,
- value: 'r-ug',
- },
- ],
- },
- ],
- },
- })
- .subscribe((response) => console.log('Products', response));
- return this.http.get('/assets/shoes/shoes.json');
- }
-
- ngOnDestroy(): void {
- if (this.sub) {
- this.sub.unsubscribe();
- }
- }
-
- onProductColorChanged(color: string) {}
}
diff --git a/src/app/templates/.keep b/src/app/features/products/templates/.keep
similarity index 100%
rename from src/app/templates/.keep
rename to src/app/features/products/templates/.keep
diff --git a/src/app/templates/products-template/products-template.component.html b/src/app/features/products/templates/products-template/products-template.component.html
similarity index 100%
rename from src/app/templates/products-template/products-template.component.html
rename to src/app/features/products/templates/products-template/products-template.component.html
diff --git a/src/app/templates/products-template/products-template.component.scss b/src/app/features/products/templates/products-template/products-template.component.scss
similarity index 100%
rename from src/app/templates/products-template/products-template.component.scss
rename to src/app/features/products/templates/products-template/products-template.component.scss
diff --git a/src/app/templates/products-template/products-template.component.ts b/src/app/features/products/templates/products-template/products-template.component.ts
similarity index 100%
rename from src/app/templates/products-template/products-template.component.ts
rename to src/app/features/products/templates/products-template/products-template.component.ts
diff --git a/src/app/models/product.ts b/src/app/models/product.ts
deleted file mode 100644
index 4d58de4..0000000
--- a/src/app/models/product.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import { IItem } from '@restorecommerce/cart/lib/model/IItem';
-
-export interface ProductImage {
- src: string;
- srcThumb: string;
- alt: string;
-}
-
-export interface MultiColorsProductImage {
- [key: string]: ProductImage[];
-}
-
-export interface Product {
- id: string;
- title: string;
- description: string;
- price: number;
- isBestSeller: boolean;
- liked: boolean;
- productImageSources: MultiColorsProductImage;
- materialInfo: string;
- additionalLabel: string;
- selectedColor: string;
- colors: string[];
- selectedSize: number;
- sizes: number[];
-}
diff --git a/src/app/shared/click-stop-propagation.directive.ts b/src/app/shared/click-stop-propagation.directive.ts
index d7da3f9..b8ac587 100644
--- a/src/app/shared/click-stop-propagation.directive.ts
+++ b/src/app/shared/click-stop-propagation.directive.ts
@@ -1,11 +1,11 @@
import { Directive, HostListener } from '@angular/core';
@Directive({
- selector: '[click-stop-propagation]',
+ selector: '[appStopClickPropagation]',
})
-export class ClickStopPropagation {
+export class StopClickPropagationDirective {
@HostListener('click', ['$event'])
- public onClick(event: any): void {
+ public onClick(event: Event): void {
event.stopPropagation();
}
}
diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts
index 5a64cb9..269aaa3 100644
--- a/src/app/shared/shared.module.ts
+++ b/src/app/shared/shared.module.ts
@@ -14,6 +14,7 @@ import {
} from '@vcl/ng-vcl';
import { TranslateModule } from '@ngx-translate/core';
import { FormsModule } from '@angular/forms';
+import { StopClickPropagationDirective } from './click-stop-propagation.directive';
const vclModules = [
VCLBadgeModule,
@@ -28,9 +29,11 @@ const vclModules = [
VCLPanelModule,
];
+const directives = [StopClickPropagationDirective];
+
@NgModule({
- declarations: [],
+ declarations: [...directives],
imports: [CommonModule],
- exports: [...vclModules, TranslateModule, FormsModule],
+ exports: [TranslateModule, FormsModule, ...vclModules, ...directives],
})
export class SharedModule {}