diet-web-ui/projects/admin/src/app/components/role-permission/role-permission.component.ts

import { PermItemDTO, UserRoleDTO } from "@admin/app/dtos/user.dto";
import { ApiService } from "@admin/app/services";
import { Component, Input, OnChanges, SimpleChanges } from "@angular/core";
import { ActivatedRoute } from "@angular/router";
import { AnyObject } from "@cdk/types";
import { NzMessageService } from "ng-zorro-antd/message";
import { finalize } from "rxjs";

@Component({
	selector: "app-role-permission",
	templateUrl: "./role-permission.component.html",
	styleUrls: ["./role-permission.component.less"],
})
export class RolePermissionComponent implements OnChanges {
	constructor(private api: ApiService, private route: ActivatedRoute, private msg: NzMessageService) {}

	@Input() perms: PermItemDTO[] = [];

	@Input() role!: UserRoleDTO;

	loading = false;

	ngOnChanges(changes: SimpleChanges): void {
		if (changes["perms"]?.currentValue) {
			const perms: PermItemDTO[] = changes["perms"].currentValue;
			this.permissions = perms.reduce((a, c) => {
				const key = c["category"];
				const o = { ...c, label: c.itemName, value: c.id };
				if (a[key]) {
					a[key].push(o);
				} else {
					a[key] = [o];
				}
				return a;
			}, {} as Record<string, Array<{ label: string; value: number } & AnyObject>>);
		}
		if (changes["role"]?.currentValue) {
			const role: UserRoleDTO = changes["role"].currentValue;
			let perms: number[] = [];
			try {
				perms = JSON.parse(role.roleItems);
			} catch (error) {}
			this.hasPermissions.clear();
			perms.forEach((p) => {
				this.hasPermissions.add(p);
			});
		}
	}

	permissions = {};

	hasPermissions = new Set<number>();

	ngOnInit(): void {}

	returenZero() {
		return 0;
	}

	onPermissionChange(checked: boolean, key: number) {
		if (!checked && this.hasPermissions.has(key)) {
			this.hasPermissions.delete(key);
		} else {
			this.hasPermissions.add(key);
		}
	}

	onSubmit() {
		const role = { ...this.role, roleId: this.role.id, items: Array.from(this.hasPermissions) };
		this.loading = true;
		this.api
			.updateRole(role)
			.pipe(
				finalize(() => {
					this.loading = false;
				})
			)
			.subscribe((res) => {
				this.msg.success(res.desc);
			});
	}
}