From 474656f3151cb38f866fd90a9ea142795de4326a Mon Sep 17 00:00:00 2001 From: Gopal Shimpi Date: Mon, 4 Jun 2018 11:19:33 +0530 Subject: [PATCH 1/2] quick fix --- src/app/core/services/product.service.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/core/services/product.service.ts b/src/app/core/services/product.service.ts index 6e74d2c1..7494a356 100644 --- a/src/app/core/services/product.service.ts +++ b/src/app/core/services/product.service.ts @@ -34,7 +34,7 @@ export class ProductService { * * @memberof ProductService */ - getTaxonomies(): any { return this.http.get>(`api/v1/taxonomies`) } + getTaxonomies(): any { return this.http.get>(`api/v1/taxonomies?set=nested`) } /** * From c1327b8200d2421bcf831820ace64ff7bce56b64 Mon Sep 17 00:00:00 2001 From: Gopal Shimpi Date: Tue, 5 Jun 2018 01:07:43 +0530 Subject: [PATCH 2/2] 1. Changed tosty notification timeout 2. added method to submit review 3. Added componant & rating plugin 4. Added routes for review 5. Added tosty for favorite product [delivers #158024102] --- package.json | 3 +- src/app/app.module.ts | 5 +- src/app/core/services/product.service.ts | 21 +++++- .../product-details.component.html | 2 +- .../product-details.component.ts | 16 +++- .../write-product-review.component.html | 31 ++++++++ .../write-product-review.component.scss | 0 .../write-product-review.component.spec.ts | 25 +++++++ .../write-product-review.component.ts | 73 +++++++++++++++++++ src/app/product/index.ts | 11 ++- src/app/product/product.routes.ts | 4 +- yarn.lock | 6 ++ 12 files changed, 184 insertions(+), 13 deletions(-) create mode 100644 src/app/product/components/product-detail-page/write-product-review/write-product-review.component.html create mode 100644 src/app/product/components/product-detail-page/write-product-review/write-product-review.component.scss create mode 100644 src/app/product/components/product-detail-page/write-product-review/write-product-review.component.spec.ts create mode 100644 src/app/product/components/product-detail-page/write-product-review/write-product-review.component.ts diff --git a/package.json b/package.json index 2df0f8b9..9d60f472 100644 --- a/package.json +++ b/package.json @@ -37,6 +37,7 @@ "@ngrx/effects": "^6.0.1", "@ngrx/router-store": "^6.0.1", "@ngrx/store": "^6.0.1", + "@ngx-lite/input-star-rating": "^0.1.5", "@ngx-progressbar/core": "^5.0.1", "@ngx-progressbar/http": "^5.0.1", "bootstrap": "^4.1.1", @@ -89,4 +90,4 @@ "main": "index.js", "repository": "git@github.com:aviabird/angularspree.git", "author": "Pankaj Rawat " -} \ No newline at end of file +} diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 8ce21c53..d93ff588 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -27,6 +27,7 @@ import { DragScrollModule } from 'ngx-drag-scroll'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { ToastrModule } from 'ngx-toastr'; + @NgModule({ declarations: [ AppComponent, @@ -66,7 +67,7 @@ import { ToastrModule } from 'ngx-toastr'; Ng2UiAuthModule.forRoot(myAuthConfig), DragScrollModule, ToastrModule.forRoot({ - timeOut: 3000, + timeOut: 1500, positionClass: 'toast-top-right', preventDuplicates: true, progressBar: true, @@ -78,4 +79,4 @@ import { ToastrModule } from 'ngx-toastr'; providers: [], bootstrap: [AppComponent] }) -export class AppModule {} +export class AppModule { } diff --git a/src/app/core/services/product.service.ts b/src/app/core/services/product.service.ts index 7494a356..d4ada61d 100644 --- a/src/app/core/services/product.service.ts +++ b/src/app/core/services/product.service.ts @@ -1,10 +1,12 @@ +import { ToastrService } from 'ngx-toastr'; import { getUserFavoriteProducts } from './../../user/reducers/selector'; import { getTaxonomies } from './../../product/reducers/selectors'; import { Taxonomy } from './../models/taxonomy'; import { HttpClient } from '@angular/common/http'; -import { Observable } from 'rxjs'; import { Injectable } from '@angular/core'; import { Product } from '../models/product'; +import { catchError, map, tap } from 'rxjs/operators'; +import { of as observableOf, Observable } from 'rxjs'; @Injectable() export class ProductService { @@ -15,7 +17,8 @@ export class ProductService { * * @memberof ProductService */ - constructor(private http: HttpClient) { } + constructor(private http: HttpClient, + private toastrService: ToastrService) { } /** * @@ -72,4 +75,18 @@ export class ProductService { getRecentlyViewedProducts() { return this.http.get(`api/v1/products?per_page=20`); } + + submitReview(productId: any, params: any) { + return this.http.post(`products/${productId}/reviews`, params) + .pipe( + map(_ => this.toastrService.success( + 'Review Submitted.', + 'Success') + ), + tap( + _ => _, + _ => this.toastrService.error('something went wrong (reviws)', 'ERROR!!') + ) + ) + } } diff --git a/src/app/product/components/product-detail-page/product-details/product-details.component.html b/src/app/product/components/product-detail-page/product-details/product-details.component.html index aaa45454..b04cfb18 100644 --- a/src/app/product/components/product-detail-page/product-details/product-details.component.html +++ b/src/app/product/components/product-detail-page/product-details/product-details.component.html @@ -16,7 +16,7 @@ - +
diff --git a/src/app/product/components/product-detail-page/product-details/product-details.component.ts b/src/app/product/components/product-detail-page/product-details/product-details.component.ts index 729bd272..1062fdc2 100644 --- a/src/app/product/components/product-detail-page/product-details/product-details.component.ts +++ b/src/app/product/components/product-detail-page/product-details/product-details.component.ts @@ -1,3 +1,5 @@ +import { ToastrService } from 'ngx-toastr'; +import { Router } from '@angular/router'; import { AppState } from './../../../../interfaces'; import { Store } from '@ngrx/store'; import { CheckoutActions } from './../../../../checkout/actions/checkout.actions'; @@ -24,13 +26,16 @@ export class ProductDetailsComponent implements OnInit { variantId: any; productID: any productdata: any; + constructor( private variantParser: VariantParserService, private variantRetriver: VariantRetriverService, private checkoutActions: CheckoutActions, private store: Store, private productService: ProductService, - ) {} + private router: Router, + private toastrService: ToastrService + ) { } ngOnInit() { this.description = this.product.description; @@ -93,8 +98,15 @@ export class ProductDetailsComponent implements OnInit { markAsFavorite() { this.productService.markAsFavorite(this.product.id).subscribe((res) => { - alert(res['message']); + this.toastrService.info(res['message'], 'info') }); } + showReviewForm() { + this.router.navigate([this.product.slug, 'write_review'], { queryParams: { 'prodId': this.productID } }); + } + } + + + diff --git a/src/app/product/components/product-detail-page/write-product-review/write-product-review.component.html b/src/app/product/components/product-detail-page/write-product-review/write-product-review.component.html new file mode 100644 index 00000000..fe770603 --- /dev/null +++ b/src/app/product/components/product-detail-page/write-product-review/write-product-review.component.html @@ -0,0 +1,31 @@ +
+
+
+
+

Write Review

+
+
+ + +
+
+ + +
+
+ + +
+ +
+
+
+

Thanks for your review!

+ +

Your review has been submitted.Please note that your review may take up to 48 hours to appear.

+ +
+
+
+
diff --git a/src/app/product/components/product-detail-page/write-product-review/write-product-review.component.scss b/src/app/product/components/product-detail-page/write-product-review/write-product-review.component.scss new file mode 100644 index 00000000..e69de29b diff --git a/src/app/product/components/product-detail-page/write-product-review/write-product-review.component.spec.ts b/src/app/product/components/product-detail-page/write-product-review/write-product-review.component.spec.ts new file mode 100644 index 00000000..c85effa4 --- /dev/null +++ b/src/app/product/components/product-detail-page/write-product-review/write-product-review.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { WriteProductReviewComponent } from './write-product-review.component'; + +describe('WriteProductReviewComponent', () => { + let component: WriteProductReviewComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ WriteProductReviewComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(WriteProductReviewComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/product/components/product-detail-page/write-product-review/write-product-review.component.ts b/src/app/product/components/product-detail-page/write-product-review/write-product-review.component.ts new file mode 100644 index 00000000..dbb6270f --- /dev/null +++ b/src/app/product/components/product-detail-page/write-product-review/write-product-review.component.ts @@ -0,0 +1,73 @@ +import { ToastrService } from 'ngx-toastr'; +import { ActivatedRoute, Router } from '@angular/router'; +import { ProductService } from './../../../../core/services/product.service'; +import { FormGroup, FormBuilder, Validators } from '@angular/forms'; +import { Component, OnInit, Input } from '@angular/core'; + +@Component({ + selector: 'app-write-product-review', + templateUrl: './write-product-review.component.html', + styleUrls: ['./write-product-review.component.scss'] +}) +export class WriteProductReviewComponent implements OnInit { + + reviewForm: FormGroup; + queryParams: any + showThanks = false + constructor(private fb: FormBuilder, + private productService: ProductService, + private activeRoute: ActivatedRoute, + private toastrService: ToastrService, + private router: Router) { + this.activeRoute.queryParams + .subscribe(params => { + this.queryParams = params + }); + } + + ngOnInit() { + this.initForm(); + } + + initForm() { + const rating = ''; + const name = ''; + const title = ''; + const review = ''; + + this.reviewForm = this.fb.group({ + rating: [rating, Validators.required], + name: [JSON.parse(localStorage.getItem('user')).email], + title: [title, Validators.required], + review: [review, Validators.required] + } + ); + } + + parse(formData) { + return { + review: { + rating: formData.rating.toString(), + name: formData.name, + title: formData.title, + review: formData.review + } + } + } + + onSubmit() { + if (this.reviewForm.valid) { + const values = this.reviewForm.value; + const params = this.parse(values) + this.productService.submitReview(this.queryParams.prodId, params) + .subscribe((res) => { + this.showThanks = true + }) + } else { + this.toastrService.error('Enter data in all fields', 'Error!') + } + } + goToProduct() { + this.router.navigate([this.queryParams.prodId]) + } +} diff --git a/src/app/product/index.ts b/src/app/product/index.ts index 9047b1b9..06fc8ade 100644 --- a/src/app/product/index.ts +++ b/src/app/product/index.ts @@ -16,7 +16,7 @@ import { ProductPriceInfoComponent } from './components/product-detail-page/prod import { ProductCountComponent } from './components/product-detail-page/product-price-info/product-count/product-count.component'; import { ProductVariantsComponent } from './components/product-detail-page/product-variants/product-variants.component'; import { ProductComponent } from './product.component'; - +import { WriteProductReviewComponent } from './components/product-detail-page/write-product-review/write-product-review.component'; // Routes import { ProductRoutes as routes } from './product.routes'; @@ -24,7 +24,7 @@ import { ProductRoutes as routes } from './product.routes'; // Effects import { EffectsModule } from '@ngrx/effects'; import { ProductEffects } from './effects/product.effects'; - +import { NgxInputStarRatingModule } from '@ngx-lite/input-star-rating'; @NgModule({ declarations: [ @@ -36,7 +36,8 @@ import { ProductEffects } from './effects/product.effects'; ProductPriceInfoComponent, ProductDescriptionComponent, ProductVariantsComponent, - ProductCountComponent + ProductCountComponent, + WriteProductReviewComponent // pipes ], exports: [ @@ -52,8 +53,10 @@ import { ProductEffects } from './effects/product.effects'; imports: [ SharedModule, RouterModule.forChild(routes), + NgxInputStarRatingModule, + ], providers: [ ] }) -export class ProductModule {} +export class ProductModule { } diff --git a/src/app/product/product.routes.ts b/src/app/product/product.routes.ts index 78976c45..339a3f46 100644 --- a/src/app/product/product.routes.ts +++ b/src/app/product/product.routes.ts @@ -1,9 +1,11 @@ +import { WriteProductReviewComponent } from './components/product-detail-page/write-product-review/write-product-review.component'; import { Routes } from '@angular/router'; import { ProductDetailPageComponent } from './components/product-detail-page/product-detail-page.component'; import { ProductComponent } from './product.component'; export const ProductRoutes: Routes = [ { path: '', component: ProductComponent, pathMatch: 'full' }, - { path: ':id', component: ProductDetailPageComponent } + { path: ':id', component: ProductDetailPageComponent }, + { path: ':id/write_review', component: WriteProductReviewComponent } ]; diff --git a/yarn.lock b/yarn.lock index 2f376ade..dc9d440c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -273,6 +273,12 @@ tree-kill "^1.0.0" webpack-sources "^1.1.0" +"@ngx-lite/input-star-rating@^0.1.5": + version "0.1.5" + resolved "https://registry.yarnpkg.com/@ngx-lite/input-star-rating/-/input-star-rating-0.1.5.tgz#dbfa3e74a540e619d332058bc5af49de3cb2fa9d" + dependencies: + tslib "^1.9.0" + "@ngx-progressbar/core@^5.0.1": version "5.0.1" resolved "https://registry.yarnpkg.com/@ngx-progressbar/core/-/core-5.0.1.tgz#a8566384638512b7e53945a3995ccbd79ce21c31"