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

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

@Component({
  selector: 'app-project-create',
  templateUrl: './project-create.component.html',
  styleUrls: ['./project-create.component.css'],
})
export class ProjectCreateComponent implements OnInit {
  projectFormGroup!: FormGroup;
  projectState!: ProjectState;

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

  projectMsgState = ProjectMsgState;
  msgState = MsgState;

  userState!: UserState;
  companyState!: CompanyState;

  constructor(
    private fb: FormBuilder,
    private store: Store<{
      projectReducerKey: ProjectState,
      userReducerKey: UserState,
      companyReducerKey: CompanyState
    }>,
    private datePipe: DatePipe,
    private projectsServices: ProjectsService,
    private router: Router
  ) {}

  ngOnInit(): void {

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

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

    this.store.dispatch(new CreateProjectFormAddAction({}));
    this.store.subscribe((projectState) => {
      this.projectState = projectState.projectReducerKey;

      this.projectFormGroup = this.fb.group({
        id: [0, Validators.required],
        projectName: [
          'Project-',
          [
            Validators.required,
            Validators.minLength(5),
            Validators.maxLength(15),
          ],
        ],
        priority: [this.priorities[0], Validators.required],
        creationDate: [
          this.datePipe.transform(new Date(), 'MM dd yyyy'),
          Validators.required,
        ],
        companyId: ['', Validators.required],
        description: ['', [Validators.required, Validators.minLength(20)]],
        userId: ['', Validators.required],
        state: [this.projectMsgState.INPROGRESS, Validators.required]
      });
    });
  }

  onProjectSave(){

    let project: Project = this.projectFormGroup.value;
    let projectName: string = project.projectName;
    this.projectsServices.getProjectByName(projectName).subscribe((projects: Project[])=>{
      if(projects.length>0){
        alert(projectName+' '+this.msgState.EXIST);
        return;
      }
      else{
        if(window.confirm(this.msgState.CONFIRM_ADD)){
          this.store.dispatch(new SaveProjectFormDataAction(project));
        }
      }
    })

  }
  onSaveOk() {
    this.router.navigateByUrl('/projects-management')
  }
  tryEgain() {
    this.router.navigateByUrl('/project-create')
  }
}