zgo/src/app/order/order.component.ts

import { Component, OnInit } from '@angular/core';
import { MatDialog, MatDialogConfig} from '@angular/material/dialog';
import { Observable } from 'rxjs';
import { Order } from './order.model';
import { FullnodeService } from '../fullnode.service';
import { UserService } from '../user.service';
import { OrderService } from './order.service';
import { CancelComponent } from '../cancel/cancel.component';

@Component({
	selector: 'app-order',
	templateUrl: './order.component.html',
	styleUrls: ['./order.component.css']
})

export class OrderComponent implements OnInit{
	public order: Order = {address: '', session: '', timestamp: '', closed: false, lines: [{qty: 1, name: '', cost: 0}]};
	public price: number = 1;
	public total: number = 0;
	public orderUpdate: Observable<Order>;
	public priceUpdate: Observable<number>;
	public totalUpdate: Observable<number>;

	constructor(
		public fullnodeService: FullnodeService,
		public orderService: OrderService,
		private dialog: MatDialog
	) {
		this.priceUpdate = fullnodeService.priceUpdate;
		this.priceUpdate.subscribe((price) => {
			this.price = price;
		});
		this.orderUpdate = orderService.orderUpdate;
		this.orderUpdate.subscribe((order) => {
			this.order = order;
		});
		this.totalUpdate = orderService.totalUpdate;
		this.totalUpdate.subscribe((total) => {
			this.total = total;
		});
	}

	ngOnInit() {
	}

	cancelOrder() {
		const dialogConfig = new MatDialogConfig();

		dialogConfig.disableClose = true;
		dialogConfig.autoFocus = true;

		const dialogRef = this.dialog.open(CancelComponent, dialogConfig);
		dialogRef.afterClosed().subscribe((val) => {
			if (val) {
				console.log('Canceling');
				this.orderService.cancelOrder(this.order._id!).subscribe((response) => {
					this.orderService.getOrder();
				});;
			} else {
				console.log('Returning to page');
			}
			this.orderService.getOrder();
		});
	}
}