Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 | 2x 2x 2x 2x 2x 2x 1x 1x 1x 1x 1x 1x 1x | import { ChangeDetectionStrategy, Component, OnInit, ViewChild } from '@angular/core';
import { UntypedFormGroup } from '@angular/forms';
import { FormlyFieldConfig } from '@ngx-formly/core';
import { Observable, map, tap } from 'rxjs';
import { AccountFacade } from 'ish-core/facades/account.facade';
import { ModalDialogComponent } from 'ish-shared/components/common/modal-dialog/modal-dialog.component';
import { ProductReviewsFacade } from '../../facades/product-reviews.facade';
import { ProductReview } from '../../models/product-reviews/product-review.model';
@Component({
selector: 'ish-product-review-create-dialog',
templateUrl: './product-review-create-dialog.component.html',
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ProductReviewCreateDialogComponent implements OnInit {
@ViewChild('modal') modalDialog: ModalDialogComponent<unknown>;
form = new UntypedFormGroup({});
fields: FormlyFieldConfig[];
model$: Observable<Partial<ProductReview>>;
constructor(
private accountFacade: AccountFacade,
private reviewFacade: ProductReviewsFacade
) {}
ngOnInit() {
this.model$ = this.accountFacade.user$.pipe(
tap(user => {
if (!user && this.modalDialog) {
this.modalDialog.hide();
}
}),
map(user => ({ authorFirstName: `${user.firstName} ${user.lastName.charAt(0)}.` }))
);
this.fields = [
{
key: 'authorFirstName',
type: 'ish-plain-text-field',
props: {
label: 'product.review.name.label',
labelClass: 'col-md-3',
fieldClass: 'col-md-9',
},
},
{
key: 'rating',
type: 'ish-rating-stars-field',
props: {
label: 'product.review.rating.label',
labelClass: 'col-md-3',
fieldClass: 'col-md-9',
required: true,
},
validation: {
messages: {
required: 'product.review.rating.error.required',
},
},
},
{
key: 'title',
type: 'ish-text-input-field',
props: {
label: 'product.review.title.label',
labelClass: 'col-md-3',
fieldClass: 'col-md-9',
required: true,
},
validation: {
messages: {
required: 'product.review.title.error.required',
},
},
},
{
key: 'content',
type: 'ish-textarea-field',
props: {
label: 'product.review.content.label',
labelClass: 'col-md-3',
fieldClass: 'col-md-9',
required: true,
rows: 5,
placeholder: 'product.review.content.placeholder',
maxLength: 4000,
maxLengthDescription: 'product.review.content.max_limit',
},
validation: {
messages: {
required: 'product.review.content.error.required',
},
},
},
];
}
/** Opens the modal. */
show() {
this.form.reset();
this.modalDialog.show();
}
/** Send the review to the server */
submitForm(sku: string) {
if (this.form.valid) {
this.reviewFacade.createProductReview(sku, this.form.value);
this.modalDialog.hide();
}
}
}
|