diet-web-ui/projects/admin/src/app/pages/ingredients/ingredient-release/ingredient-release.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, MyResponse, OrgDTO, TableListOption } from "@cdk/public-api";
import { DishFormComponent } from "@admin/app/components";
import { ApiService } from "@cdk/services";
import { lastValueFrom, tap } from "rxjs";
import { endOfWeek, format, startOfWeek, subWeeks } from "date-fns";
import { NzModalService } from "ng-zorro-antd/modal";
import { NzMessageService } from "ng-zorro-antd/message";

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

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

	private drawerRef?: NzDrawerRef;

	public tableList = new TableListOption(this.fetchData.bind(this));

	public queryForm = new FormGroup({
		name: new FormControl(""),
		vender: new FormControl(""),
	});

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

	week: number = 0;

	dateRange: Date[] | null = null;

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

	initTableList() {
		this.tableList.scroll = { x: null };
		this.tableList = this.tableList.setColumns([
			{ key: "name", title: "食谱名称" },
			{ key: "vender", title: "单位" },
			{ key: "meals", title: "包含餐次" },
			{ key: "day", title: "周期" },
			{ key: "created", title: "创建时间" },
			{ key: "dateRange", title: "应用时间" },
		]);

		this.tableList = this.tableList.setOptions([
			{
				title: "详情",
				premissions: [],
				onClick: this.showFoodForm.bind(this),
			},
			{
				title: "导出食谱",
				premissions: [],
				onClick: this.showFoodForm.bind(this),
			},

			{
				title: "取消发布",
				premissions: [],
				onClick: this.cancelRelease.bind(this),
			},
		]);
	}

	fetchData(pager: AnyObject, query: AnyObject) {
		if (this.dateRange) {
			if (this.dateRange[0]) {
				query["startTime"] = format(this.dateRange[0], "yyyy-MM-dd");
			}
			if (this.dateRange[1]) {
				query["endTime"] = format(this.dateRange[1], "yyyy-MM-dd");
			}
		}

		return this.api.getMenuReleasePage(pager, query).pipe(
			tap((res) => {
				this.getTableColumData(res);
			})
		);
	}

	getTableColumData(res: MyResponse) {
		if (Array.isArray(res.body.content)) {
			const vendors = res.body.content.map((i: any) => i.vender);

			if (vendors.length > 0) {
				this.api.getOrgList({ vendors }).subscribe((org) => {
					if (Array.isArray(org.body)) {
						this.tableOrg = org.body.reduce((a, c) => {
							return {
								...a,
								[c.id]: c,
							};
						}, {} as AnyObject);
					}
				});
			}
		}
	}

	onWeekChange(e: -1 | 0 | 1) {
		if (e !== 0) {
			const range = this.getWeekDates(e);
			this.dateRange = range;
		} else {
			this.dateRange = null;
		}
	}

	getWeekDates(offset: -1 | 1) {
		const now = new Date();
		const startDate =
			offset === -1 ? startOfWeek(subWeeks(now, 1), { weekStartsOn: 1 }) : startOfWeek(now, { weekStartsOn: 1 });
		const endDate =
			offset === -1 ? endOfWeek(subWeeks(now, 1), { weekStartsOn: 1 }) : endOfWeek(now, { weekStartsOn: 1 });

		return [startDate, endDate];
	}

	showFoodForm(food?: any) {
		this.drawerRef = this.drawer.create({
			nzTitle: food ? "编辑菜品" : "新增菜品",
			nzWidth: 700,
			nzContent: DishFormComponent,
			nzFooter: this.foofFormFooterTpl,
		});
	}

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

	cancelRelease({ id }: any) {
		this.modal.confirm({
			nzTitle: "警告",
			nzContent: "是否要取消发布该食谱？",
			nzOkDanger: true,
			nzOnOk: async () => {
				const res = await lastValueFrom(this.api.cancelRelease(id));
				this.msg.success(res.desc);
				this.tableList.run();
			},
		});
	}
}