familytree/UI/src/app/staff/staff.edit.component.ts

import { Component, inject, input, numberAttribute, OnDestroy, OnInit } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { ReactiveFormsModule, UntypedFormBuilder, Validators } from '@angular/forms';
import { Subject, Subscription} from 'rxjs';
import { MessageService } from '@openng/optimus-ui/api';

import {Staff, Code, userRole}  from '../models';
import { LookupService, Utils } from '../shares';
import { StaffService } from './staff.service';
import { ButtonModule } from '@openng/optimus-ui/button';
import { SelectModule } from '@openng/optimus-ui/select';
import { CheckboxModule } from '@openng/optimus-ui/checkbox';
import { InputTextModule } from '@openng/optimus-ui/inputtext';

@Component({
templateUrl: 'staff.edit.component.html',
selector: 'staff-edit',
imports:[ButtonModule,ReactiveFormsModule,SelectModule,CheckboxModule, InputTextModule],
styleUrls: ['staff.edit.component.css']
})
export class StaffEditComponent implements OnInit, OnDestroy {
	returnUrl ='';
	loginUser ='';
	_error ='';
	_id= -1;
	Roles: Code[] = [];
	id =  input(0);
	isNew = false;
	validationPoints?: Code[];
	private staffService = inject(StaffService);
	private messageService = inject(MessageService);
	private route = inject(ActivatedRoute);
	private router = inject(Router);
	private lookupService = inject(LookupService);
	msg="[adminUser Component] ";
	private formBuilder = inject(UntypedFormBuilder);
	//for focus input
//	@ViewChild('mystaffid') mystaffNo!: MatInput;
	isChange = true; // disable use false//true for not disable. make sure it true is disable button.
	private subscription:Subscription = new Subscription();
	subChanged$ = new Subject<boolean>();
	adminuserForm = this.formBuilder.group({
		id: [0], //Validators.required
		email: ['',Validators.required], //Validators.required
		firstname: ['',Validators.required], //Validators.required
		lastname: ['',Validators.required], //Validators.required
		phone: [''], //Validators.required
		password: [''],
		active: [false], //Validators.required
		
		roleType: [0,[Validators.required,  Validators.min(1)]],	
	});
constructor() {
		this.fillRole();
	}
fillRole() : void 
{
	this.Roles = [];
	let item:Code = {id:userRole.Admin, name: 'Admin', status:'Admin'};	
	this.Roles.push(item);
	item = {id:userRole.Accounting, name: 'Accounting', status:'Accounting'};
	this.Roles.push(item);
	item = {id:userRole.Normal, name: 'Normal', status:'Normal'};
	this.Roles.push(item);
	item = {id:userRole.ServiceManager, name: 'Service Manager', status:'ServiceManager'};
	this.Roles.push(item);
	//item = {id:userRole.Normal, name: 'Switch', status:'Switch'};
	//this.Roles.push(item);
}

getClassForRequire(prev:string,name:string): string {
  const notok = !this.adminuserForm.controls[name].valid &&
   this.adminuserForm.controls[name].touched;
  let str =prev;
  if (notok)
    str += " ng-invalid ng-dirty";
  return str;
}

ngOnInit(): void {
	this.returnUrl = this.route.snapshot.queryParams['returnUrl'] || '/';
	const id =  this.id(); // Number(this.route.snapshot.paramMap.get('id'));
	// now load thing up
	const user = Utils.getCurrentUser();
//	console.log(this.msg + "current login user ", user);
	if (user.username === '')
		alert("you are not login.");
	else
		this.loginUser = user.firstName;
	this._id = id;
	//console.log(this.msg + " " + id );
	this.subscription.add(this.adminuserForm.valueChanges.subscribe(x => this.isChange = false));
    this.subscription.add(this.subChanged$.subscribe(x => this.isChange = x));
	if (id > 0)
	{
		this.isNew = false;
	   this.subscription.add(
	   this.staffService.loadStaffById(id).subscribe({
		next: x => this.assignValue(x.data), 
		error: e => console.log(e)
		})
		);
  	}
	else
	{
		this.isNew = true;
	}	
}

getEditText(): string {
	if (this._id > 0)
		return "Edit Staff";
	else
		return "New Staff";
}
// this for disable submit button
get isFieldsChange() {
    const chan = this.isChange || !this.adminuserForm.valid; // this disable so need true valid = true not
	//console.log(this.msg + 'is fields change', chan);
    return chan;
  }
  
assignValue(adminuser:Staff): void {
	this.adminuserForm.patchValue({
		id: adminuser.id,
		email: adminuser.email,
		firstname: adminuser.firstname,
		lastname: adminuser.lastname,
		active: adminuser.active,
		phone: adminuser.phone,
		roleType: adminuser.roleType,
		
		});
		// disable use false//true for not disable.
		this.subChanged$.next(true);
	}
 
	// convenience getter for easy access in form fields
	get f() { return this.adminuserForm.controls;}
 validate(adminuser:Staff): boolean {
	let result = true;
	if (adminuser.email.trim() == '')
	{
		this._error = 'email is blank or empty';
		result = false;
	}
	else if (adminuser.firstname.trim() == '')
	{
		this._error = 'Firstname is blank or empty';
		result = false;
	}
	else if (adminuser.lastname.trim() == '')
	{
		this._error = 'lastname is blank or empty';
		result = false;
	}
	return result;
 }
onSubmit(): void {
		// if form valid then go save
		//make sure 
		const okToSave = this.adminuserForm.valid;
		if (okToSave)
		{
			let adminuserValue = this.adminuserForm.value;
			
			let adminuser:Staff = {
				id: adminuserValue.id,
				email: adminuserValue.email,
				firstname: adminuserValue.firstname,
				lastname: adminuserValue.lastname,
				active: adminuserValue.active,
				roleType: adminuserValue.roleType,
				phone: adminuserValue.phone,
				password: adminuserValue.password,

				type: 0
			};
			this._error ='';
			const allOK = this.validate(adminuser);
			if (allOK)
			{
				this.subscription.add (
					this.staffService.saveStaff(adminuser).subscribe({
						next:  	x => {
						if (x.statusCode >= 1)
						{
						this.messageService.add({severity:'success', summary: 'Save user', detail: adminuser.firstname + " " + adminuser.lastname });
							this.router.navigate([this.returnUrl]);
						}
						else
						{
						this.messageService.add({severity:'error', summary: 'Error', detail: x.message });  
						}
					},
					error: e => {      
					const message = e || e.message;
				//	this.toastr.error(message);
					console.log("error ", e);
						} 
					})
				);
			}
			else
				this.messageService.add({severity:'error', summary: 'Error', detail: this._error });
		}
}
goBack(): void {
	this.router.navigate([this.returnUrl]);
}
ngOnDestroy() {
	this.subscription.unsubscribe();
}
}