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 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 | 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 6x 6x 6x 6x 6x 6x 6x 6x 1x 1x 1x 1x 1x 1x 5x 5x 2x 5x 5x 5x 5x 5x 5x 5x 1x 4x 3x 1x 5x | import {
ChangeDetectionStrategy,
Component,
DestroyRef,
Input,
OnInit,
TemplateRef,
ViewChild,
inject,
} from '@angular/core';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { UntypedFormGroup } from '@angular/forms';
import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
import { Observable, of, shareReplay, switchMap } from 'rxjs';
import { AccountFacade } from 'ish-core/facades/account.facade';
import { AppFacade } from 'ish-core/facades/app.facade';
import { ProductContextFacade } from 'ish-core/facades/product-context.facade';
import { ProductView } from 'ish-core/models/product-view/product-view.model';
import { whenTruthy } from 'ish-core/utils/operators';
import { markAsDirtyRecursive } from 'ish-shared/forms/utils/form-utils';
import { ProductNotificationsFacade } from '../../facades/product-notifications.facade';
import { ProductNotification } from '../../models/product-notification/product-notification.model';
/**
* The Product Notification Edit Dialog Component shows the customer a dialog to either create,
* edit or delete a product notification. The dialog is called from either the detail page or
* the my account notifications list.
* If a product notification does not exist yet, the dialog shows the form to create a notification.
* If a product notification exists, the dialog shows the form to update the notification.
*
* Each form includes it's specific form elements and buttons, see product-notification-edit-form.component.
*
*
* @example
* <ish-product-notification-edit-dialog
* [productNotification]="productNotification"
* #modal></ish-product-notification-dialog>
*/
@Component({
selector: 'ish-product-notification-edit-dialog',
templateUrl: './product-notification-edit-dialog.component.html',
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ProductNotificationEditDialogComponent implements OnInit {
@Input() productNotification: ProductNotification;
modal: NgbModalRef;
product$: Observable<ProductView>;
userEmail$: Observable<string>;
private currentCurrency: string;
productNotificationForm = new UntypedFormGroup({});
private submitted = false;
productNotification$: Observable<ProductNotification>;
private destroyRef = inject(DestroyRef);
@ViewChild('modal', { static: false }) modalTemplate: TemplateRef<unknown>;
constructor(
private ngbModal: NgbModal,
private context: ProductContextFacade,
private accountFacade: AccountFacade,
private productNotificationsFacade: ProductNotificationsFacade,
private appFacade: AppFacade
) {}
ngOnInit() {
this.product$ = this.context.select('product');
const productAvailable$ = this.context.select('product', 'available');
this.userEmail$ = this.accountFacade.userEmail$;
// determine current currency
this.appFacade.currentCurrency$.pipe(whenTruthy(), takeUntilDestroyed(this.destroyRef)).subscribe(currency => {
this.currentCurrency = currency;
});
// if no product notification is given as @Input parameter, trigger a REST call to fetch the notification
this.productNotification$ = this.productNotification
? of(this.productNotification)
: productAvailable$.pipe(
switchMap(available =>
this.productNotificationsFacade
.productNotificationBySku$(this.context.get('sku'), available ? 'price' : 'stock')
.pipe(shareReplay(1))
)
);
}
// close modal
hide() {
this.productNotificationForm.reset();
Iif (this.modal) {
this.modal.close();
}
}
// open modal
show() {
this.modal = this.ngbModal.open(this.modalTemplate);
}
get formDisabled() {
return this.productNotificationForm.invalid && this.submitted;
}
// submit the form
submitForm() {
Iif (this.productNotificationForm.invalid) {
markAsDirtyRecursive(this.productNotificationForm);
this.submitted = true;
return;
} else {
const sku = this.context.get('sku');
const formValue = this.productNotificationForm.value;
const productNotificationType = formValue.priceValue === undefined ? 'stock' : 'price';
const productNotificationId =
formValue.productNotificationId !== undefined ? formValue.productNotificationId : '';
const productNotification: ProductNotification = {
id: undefined,
type: productNotificationType,
sku,
notificationMailAddress: this.productNotificationForm.value.email,
price: {
type: 'Money',
value: formValue.priceValue,
currency: this.currentCurrency,
},
};
if (formValue.alertType !== undefined && formValue.alertType === 'delete') {
// user selected the radio button to delete the notification
this.productNotificationsFacade.deleteProductNotification(sku, productNotificationType, productNotificationId);
} else if (
formValue.alertType !== undefined &&
(formValue.alertType === 'price' || formValue.alertType === 'stock')
) {
// update existing notification
this.productNotificationsFacade.updateProductNotification(sku, productNotification);
} else {
// there is no radio button
this.productNotificationsFacade.createProductNotification(productNotification);
}
this.hide();
}
}
}
|