familytree/UI/src/app/attachphoto/add.photo.ts

import { ChangeDetectorRef, Component, inject, Inject, OnDestroy, OnInit, signal } from '@angular/core';
import { DynamicDialogModule, DynamicDialogRef ,DynamicDialogConfig} from 'primeng/dynamicdialog';

import { LookupEdit } from '../models';
import { UntypedFormBuilder, Validators, ReactiveFormsModule } from '@angular/forms';
import { Subject, Subscription } from 'rxjs';
import { ConfirmationService, MessageService } from 'primeng/api';
import { LookupService } from '../shares';
import { CommonModule } from '@angular/common';
import { CheckboxModule } from 'primeng/checkbox';
import { InputTextModule } from 'primeng/inputtext';
import { ButtonModule } from 'primeng/button';
@Component({
    selector: 'add-photo',
    imports: [CommonModule, ReactiveFormsModule,
        ButtonModule, InputTextModule,
        DynamicDialogModule, CheckboxModule],
    templateUrl: './add.photo.html',
    styleUrls: ['./add.photo.css'],
    providers: [ConfirmationService]
})
export class AddPhoto implements OnInit, OnDestroy {
  isChange = true; // disable use false//true for not disable. make sure it true is disable button. 
  selType = "";
  _error = "";
  downloadFile = signal(false);
	 files: File[] = [];
   fileName = "";
  disabled: boolean = true;
  subChanged$ = new Subject<boolean>();
  private formBuilder = inject(UntypedFormBuilder);
  private cdr = inject(ChangeDetectorRef);
  private subscription: Subscription = new Subscription();
  lookupForm = this.formBuilder.group({
    id: [0], //Validators.required		
    description: ['', [Validators.required, Validators.maxLength(50)]],
    codeId: ['', [Validators.required]],
    parentId: [0],
    
    active: [false], //Validators.required		
  });

  constructor(

    private lookupService: LookupService,
    private messageService: MessageService,
    private confirmationService: ConfirmationService,
    public ref: DynamicDialogRef, public config: DynamicDialogConfig) { }

  ngOnInit(): void {
    const id = this.config.data.id;
    this.selType = this.config.data.type;
    const maxcodeId = this.config.data.maxCodeId;
    if (id > 0) {
      this.lookupService.loadLookupById(id, this.selType).subscribe({
        next: x => {
          this.assignValue(x.data);
          this.cdr.markForCheck();
          this.subscription.add(this.lookupForm.valueChanges.subscribe(x => this.isChange = false));
          this.subscription.add(this.subChanged$.subscribe(x => this.isChange = x));

        },
        error: e => {
          console.error("error", e);
          this.messageService.add({ severity: 'error', summary: 'Error on load cleaner ', detail: e.message });
        }
      });
    }
    else {
      //new photo
      const ward:LookupEdit = {
        id, description: '', codeId: maxcodeId, type: this.selType, active: true,
       
      };
      this.assignValue(ward);
      this.subscription.add(this.lookupForm.valueChanges.subscribe(x => this.isChange = false));
      this.subscription.add(this.subChanged$.subscribe(x => this.isChange = x));
    }
  }

  getClassForRequire(prev: string, name: string) {
    const notok = !this.lookupForm.controls[name].valid &&
      this.lookupForm.controls[name].touched;
    let str = prev;
    if (notok)
      str += " ng-invalid ng-dirty";
    return str;
  }
  get isFieldsChange() {
    const chan = this.isChange || !this.lookupForm.valid; // this disable so need true valid = true not
    //console.log(this.msg + 'is fields change', chan);
    return chan;
  }

  assignValue(item: LookupEdit): void {
    this.lookupForm.patchValue({
      id: item.id,
      codeId: item.codeId,
      description: item.description,
      active: item.active,
     
      
    });
    // disable use false//true for not disable.
    this.subChanged$.next(true);
  }
  validate(item: LookupEdit): boolean {
    let result = true;
    if (item.description!.trim() == "") {
      this._error = "Description is empty or blank";
      result = false;
    }
    return result;

  }
  deleteFile() : void {
  //const filename = this.requestForm.value.attachmentFile;
  //  const data = { filename };
	this.fileName ="";
	//this.requestForm.patchValue({ attachmentFile: "" });
    /*
	const delete$ = this.tradePersonService.deleteUploadFile(data);
    this.subscription.add(delete$.subscribe(
      {
        next: x => {
          if (x.statusCode == 1) {
            {
              this.requestForm.patchValue({ attachmentFile: "" });
            }
          }
          else {
            this.messageService.add({ severity: 'error', summary: 'Error delete upload file', detail: 'Fail to delete upload file: ' + x.message });
          }
        },
        error: e => {
          this.messageService.add({ severity: 'error', summary: 'Error delete upload file', detail: 'Fail to delete upload file: ' + e });
        }
      }
    ));
	*/
}
 onFileSelected(event: any) {

  let i =0;
  for (i = 0; i < event.target.files.length; i++)
  {
    const file: File = event.target.files[i];
    this.files.push(file);
    if (this.fileName != "")
      this.fileName = this.fileName + "," + file.name;
    else
      this.fileName = file.name;

    this.subChanged$.next(false);
    
  }
  }
upload(e: Event): void {
  e.preventDefault();
  if (this.files.length > 0)
  {
    this.ref.close(this.files);
  }
  else
  {
    this.messageService.add({severity: 'error', summary: 'No File to upload file', detail: 'select file first then upload file'});
  }
}

  cancel(e: Event): void {
    e.preventDefault();
    this.ref.close(null);
  }

  ngOnDestroy(): void {
    this.subscription.unsubscribe();
  }
}