angular-ngrx-pattern/src/app/pages/projects-manager/projects-management/project-update/project-update.component.ts

import { GetAllCompaniesAction } from './../../../../ngrx/companies/companies.actions';
import { CompanyState } from './../../../../ngrx/companies/company.state';
import { UpdateProjectWithFormDataAction } from './../../../../ngrx/projects/projects.actions';
import { GetAllUsersAction } from 'src/app/ngrx/users/users.actions';
import { UserState } from './../../../../ngrx/users/user.state';
import { ProjectMsgState } from '../../../../shared/models/project/project.msgstate';
import { Priority } from '../../../../shared/models/project/project.priority';
import { MsgState } from './../../../../ngrx/msg.state';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { ProjectsService } from './../../../../shared/services/projects.service';
import { ProjectState } from './../../../../ngrx/projects/project.state';
import { ActivatedRoute, Router } from '@angular/router';
import { Component, OnInit } from '@angular/core';
import { Store } from '@ngrx/store';
import { CreateProjectFormUpdateAction } from 'src/app/ngrx/projects/projects.actions';

@Component({
  selector: 'app-project-update',
  templateUrl: './project-update.component.html',
  styleUrls: ['./project-update.component.css'],
})
export class ProjectUpdateComponent implements OnInit {
  projectId!: number;
  projectState!: ProjectState;
  projectFormGroup!: FormGroup;
  msgState = MsgState;

  constructor(
    activatedRoute: ActivatedRoute,
    private projectsService: ProjectsService,
    private store: Store<{
      projectReducerKey: ProjectState;
      userReducerKey: UserState;
      companyReducerKey: CompanyState;
    }>,
    private fb: FormBuilder,
    private router: Router
  ) {
    this.projectId = activatedRoute.snapshot.params['projectId'];
  }

  priorities = [
    Priority.PRIORITY1,
    Priority.PRIORITY2,
    Priority.PRIORITY3,
    Priority.PRIORITY4,
    Priority.PRIORITY5,
  ];

  projectMsgState = ProjectMsgState;

  userState!: UserState;
  companySate!: CompanyState;

  ngOnInit(): void {

    this.store.dispatch(new GetAllUsersAction({}));
    this.store
      .select('userReducerKey')
      .subscribe((userState) => (this.userState = userState));

    this.store.dispatch(new GetAllCompaniesAction({}));
    this.store.subscribe(
      (companyState) => (this.companySate = companyState.companyReducerKey)
    );

    this.projectsService.getProjectById(this.projectId).subscribe((project) => {
      this.store.dispatch(new CreateProjectFormUpdateAction(project));

      this.store.subscribe((state) => {
        this.projectState = state.projectReducerKey;

        this.projectFormGroup = this.fb.group({
          id: [this.projectState.currentProject?.id, Validators.required],
          projectName: [
            this.projectState.currentProject?.projectName,
            [
              Validators.required,
              Validators.minLength(5),
              Validators.maxLength(20),
            ],
          ],
          priority: [
            this.projectState.currentProject?.priority,
            Validators.required,
          ],
          creationDate: [
            this.projectState.currentProject?.creationDate,
            Validators.required,
          ],
          companyId: [
            this.projectState.currentProject?.companyId,
            Validators.required,
          ],
          description: [
            this.projectState.currentProject?.description,
            [Validators.required, Validators.minLength(15)],
          ],
          userId: [
            this.projectState.currentProject?.userId,
            Validators.required,
          ],
          state: [this.projectState.currentProject?.state, Validators.required],
        });
      });
    });
  }

  onProjectUpdate() {
    if(window.confirm(this.msgState.CONFIRM_UPDATE)){
      this.store.dispatch(
        new UpdateProjectWithFormDataAction(this.projectFormGroup.value)
      );
    }
  }

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