angular-ngrx-pattern/src/app/pages/companies-manager/companies-management/company-update/company-update.component.ts

import { CompanyType } from './../../../../shared/models/company/company.type';
import { MsgState } from './../../../../ngrx/msg.state';
import {
  CreateFormToUpdateCompanyAction,
  UpdateCompanyWithFormDataAction,
} from './../../../../ngrx/companies/companies.actions';
import { CompaniesServices } from './../../../../shared/services/companies.service';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { CompanyState } from './../../../../ngrx/companies/company.state';
import { ActivatedRoute, Router } from '@angular/router';
import { Component, OnInit } from '@angular/core';
import { Store } from '@ngrx/store';
import { Company } from 'src/app/shared/models/company/company.model';

@Component({
  selector: 'app-company-update',
  templateUrl: './company-update.component.html',
  styleUrls: ['./company-update.component.css'],
})
export class CompanyUpdateComponent implements OnInit {
  companyId: number;
  companyFormGroup!: FormGroup;
  companyState!: CompanyState;
  msgState = MsgState;
  companyTypes = CompanyType;

  constructor(
    activatedRoute: ActivatedRoute,
    private store: Store<{ companyReducerKey: CompanyState }>,
    private formBuilder: FormBuilder,
    private companiesService: CompaniesServices,
    private router: Router
  ) {
    this.companyId = activatedRoute.snapshot.params['companyId'];
  }

  ngOnInit(): void {
    this.companiesService
      .getCompanyById(this.companyId)
      .subscribe((company: Company) => {
        this.store.dispatch(new CreateFormToUpdateCompanyAction(company));

        this.store.subscribe((state) => {
          this.companyState = state.companyReducerKey;
          this.companyFormGroup = this.formBuilder.group({
            id: [this.companyState.currentCompany?.id, Validators.required],
            companyName: [
              this.companyState.currentCompany?.companyName,
              [Validators.required, Validators.minLength(5)],
            ],
            companyType: [
              this.companyState.currentCompany?.companyType,
              Validators.required,
            ],
            creationDate: [
              this.companyState.currentCompany?.creationDate,
              Validators.required,
            ],
          });
        });
      });
  }

  onCompanyUpdate() {
    let company: Company = this.companyFormGroup.value;

    if (window.confirm(this.msgState.CONFIRM_UPDATE)) {
      this.store.dispatch(new UpdateCompanyWithFormDataAction(company));
    }
  }

  onUpdateOk() {
    this.router.navigate(['/companies-management']);
  }
}