diet-web-ui/projects/client/src/app/pages/dish/dish.component.ts

import { Component, OnInit, TemplateRef, ViewChild } from "@angular/core";
import { FormControl, FormGroup } from "@angular/forms";
import { NzDrawerRef, NzDrawerService } from "ng-zorro-antd/drawer";
import { AnyObject, OrgDTO, TableListOption } from "@cdk/public-api";
import { DishFormComponent } from "@client/app/components";
import { ApiService } from "@cdk/services";
import {
	Subject,
	debounceTime,
	distinctUntilChanged,
	filter,
	finalize,
	lastValueFrom,
	switchMap,
	takeUntil,
	tap,
} from "rxjs";
import { NzModalService } from "ng-zorro-antd/modal";
import { NzMessageService } from "ng-zorro-antd/message";
import { ResponseType } from "@cdk/types";
import { PrintComponent } from "@cdk/shared/components";

@Component({
	selector: "app-dish",
	templateUrl: "./dish.component.html",
	styleUrls: ["./dish.component.less"],
})
export class DishComponent {
	constructor(
		private drawer: NzDrawerService,
		private api: ApiService,
		private modal: NzModalService,
		private msg: NzMessageService
	) {}

	@ViewChild("formFooterTpl") formFooterTpl!: TemplateRef<{}>;

	@ViewChild("print") printRef!: PrintComponent;

	private drawerRef?: NzDrawerRef;

	private destroy$ = new Subject<void>();

	private orgSearch$ = new Subject<string>();

	public globalEnum = this.api.globalEnum;

	public printData: any | null;

	public tableList = new TableListOption(this.fetchData.bind(this), {
		selectable: true,
		frontPagination: false,
	});

	public queryForm = new FormGroup({
		keyword: new FormControl(""),
		mark: new FormControl(""),
		vendors: new FormControl(""),
	});

	public selectedIds: string[] = [];

	tableOrg: { [k: number]: OrgDTO } = {};

	tableFoods: { [k: string]: any } = {};

	listOfOption: Array<{ value: number; text: string }> = [];

	nzFilterOption = (): boolean => true;

	submitLoading = false;

	ngOnInit(): void {
		this.initTableList();

		this.tableList.getState$.pipe(takeUntil(this.destroy$)).subscribe((res) => {
			this.selectedIds = res.selectedKeys as Array<string>;
		});
	}

	searchOrg = (k: string) => {
		this.orgSearch$.next(k);
	};

	ngOnDestroy(): void {
		this.destroy$.next();
		this.destroy$.complete();
	}

	initTableList() {
		this.tableList.scroll = { x: null };
		this.tableList = this.tableList.setColumns([
			{ key: "icon", title: "菜品图片", width: "66px" },
			{ key: "name", title: "菜品名称" },
			{ key: "marks", title: "菜品标签" },
			{ key: "poly", title: "烹饪方式" },
			{ key: "ingredient", title: "食材及含量", width: "30%" },
		]);

		this.tableList = this.tableList.setOptions([
			{
				title: "打印营养标签",
				premissions: [],
				onClick: this.printTag.bind(this),
			},
			{
				title: "编辑",
				premissions: [],
				onClick: this.showFoodForm.bind(this),
			},
			{
				title: "删除",
				premissions: [],
				onClick: this.deleteItem.bind(this),
			},
		]);
	}

	fetchData(query: AnyObject, pager: AnyObject) {
		return this.api.getDishPage(pager, query).pipe(
			tap((res) => {
				this.getTableColumData(res);
			})
		);
	}

	getTableColumData(res: ResponseType) {
		if (Array.isArray(res.body.content)) {
			const vendors = res.body.content.map((i: any) => i.vender);
			const foodKeys = new Set(
				res.body.content.reduce((a: string[], c: any) => {
					return a.concat(c.ingredient.map((i: any) => i.key));
				}, [] as string[])
			);

			if (foodKeys.size > 0) {
				this.api.getFoodList({ keys: Array.from(foodKeys) }).subscribe((foods) => {
					if (Array.isArray(foods.body)) {
						this.tableFoods = foods.body.reduce((a, c) => {
							return {
								...a,
								[c.key]: c,
							};
						}, {} as AnyObject);
					}
				});
			}
		}
	}

	printTag(v?: any) {
		this.msg.loading("数据请求中，请不要刷新页面", {
			nzDuration: 0,
		});
		const ids = v ? [v.id] : this.selectedIds;
		this.api
			.getDishLabel(ids)
			.pipe(
				finalize(() => {
					setTimeout(() => {
						this.msg.remove();
					}, 1000);
				})
			)
			.subscribe((res) => {
				this.printData = res.body;
				this.printRef.print();
			});
	}

	showFoodForm(data?: any) {
		this.drawerRef = this.drawer.create({
			nzTitle: data ? "编辑菜品" : "新增菜品",
			nzWidth: 700,
			nzContent: DishFormComponent,
			nzContentParams: {
				data,
				orgs: Object.values(this.tableOrg),
				foods: Object.values(this.tableFoods),
			},
			nzFooter: this.formFooterTpl,
		});
	}

	cancelForm() {
		this.drawerRef?.close();
	}

	onSubmit() {
		if (this.drawerRef) {
			const com = this.drawerRef.getContentComponent() as DishFormComponent;
			const val = com.getValues();
			if (val) {
				this.submitLoading = true;
				this.api
					.saveDish(val)
					.pipe(
						finalize(() => {
							this.submitLoading = false;
						})
					)
					.subscribe((res) => {
						this.msg.success(res.desc);
						this.tableList.run();
						this.cancelForm();
					});
			}
		}
	}

	deleteItem(v?: any) {
		const ids = v ? [v.id] : this.selectedIds;
		this.modal.confirm({
			nzTitle: "警告",
			nzContent: `是否要删除${ids.length}个菜品？`,
			nzOkDanger: true,
			nzOnOk: async () => {
				const res = await lastValueFrom(this.api.deleteDish(ids));
				this.msg.success(res.desc);
				this.tableList.run();
			},
		});
	}
}