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(); 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(); } }