chasebaker21

<div class="timesheet-project-container">
    <form [formGroup]="projectForm">
        <span id="projectForm">
            <div class="project-header">
                <div class="header-cells header-cell-one">Project</div>
                <span class="row-block">
                    <div class="header-cells">SUN: {{ sunday | date:'MM/dd'}}</div>
                    <div class="header-cells">MON: {{ monday | date:'MM/dd'}}</div>
                    <div class="header-cells">TUE: {{ tuesday | date:'MM/dd'}}</div>
                    <div class="header-cells">WED: {{ wednesday | date:'MM/dd'}}</div>

chasebaker21

  // creates a form after checking the tasks length in order to start setting
  // the taskSeq number properly
  createForm() {
    if (this.tasks.length === 0) {
      this.taskSeq = 1;
    }
    this.taskForm = this.fb.group({
      comments: new FormControl(null),
      day: new FormControl(null),
      hours: new FormControl(null),

chasebaker21

  // checks if day selected has exisiting task data (backend or sessionStorage)
  // then adds those tasks to the FormArray
  checkForData() {
    let storageCheck = sessionStorage.getItem(this.storageKey);
    let sessionData = JSON.parse(storageCheck);
    if (storageCheck === null) {
      this.taskSeq = this.tasks.length;
      if (this.tasks.length > 0) {
        for (let i = 0; this.tasks.length > i; i++) {
          this.taskSeq++;

chasebaker21

  setDataFromParent() {
    this.dayOfWeek = this.data.dayOfWeek
    this.timesheetHours = this.data.taskData.hours
    this.projectDesc = this.data.currentProject
    this.client = this.data.client
    this.tasks = this.data.taskData.tasks
    this.taskSeq = this.data.taskData.tasks.length
    this.storageKey = this.projectDesc.concat(this.dayOfWeek);
    this.taskData = this.data.taskData;
    this.taskDate = this.data.date;

chasebaker21

import { Component, OnInit, Inject } from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
import { FormGroup, FormBuilder, FormArray, FormControl } from '@angular/forms';

@Component({
  selector: 'app-project-modal',
  templateUrl: './project-modal.component.html',
  styleUrls: ['./project-modal.component.scss']
})
export class ProjectInputModalComponent implements OnInit {

chasebaker21

<div mat-dialog-content class="dialog-container">
    <header>
        <div>Tasks for {{dayOfWeek}}</div>
        <div>{{ client }}: {{ projectDesc }}</div>
        <div class="timesheet-hours">Timesheet Hours: <span
                [ngClass]="{'red-text': hoursExceedTimesheet}">{{ enteredHours }}</span> / {{ timesheetHours }}</div>
    </header>
    <div class="input-container">
        <form [formGroup]="taskForm">
            <span class="header-row">

chasebaker21

// updates the timesheet hours everytime the inputs are changed

onChanges() {
  this.projectForm.get('projectTime').valueChanges.subscribe(val => {
     let x = val.length;
     for (let i = 0; x > i;) {
       let total = (Number(val[i].hoursHashMap.Sunday.hours)
       + Number(val[i].hoursHashMap.Monday.hours)
       + Number(val[i].hoursHashMap.Tuesday.hours)
       + Number(val[i].hoursHashMap.Wednesday.hours) 

chasebaker21

// sets initial weekly hour totals until user changes value

setWeekTotals() {
   let array = this.projectForm.get('projectTime').value
      for (let i = 0; i < array.length; i++) {
         let total = (Number(array[i].hoursHashMap.Sunday.hours)
          + Number(array[i].hoursHashMap.Monday.hours)
          + Number(array[i].hoursHashMap.Tuesday.hours)
          + Number(array[i].hoursHashMap.Wednesday.hours) 
          + Number(array[i].hoursHashMap.Thursday.hours)

chasebaker21

// sends data to project input dialog modal
// when closed the projectForm updates the day selected tasks

openProjectInputDialog(day: string, index: number, taskData: any, clientName: string, project: string, date: Date) {
  const dialogRef = this.dialog.open(ProjectInputModalComponent, {
      data: {
          dayOfWeek: day,
          taskData: taskData,
          client: clientName,
          currentProject: project,

chasebaker21

// sets form array data for tasks

initTaskInfo(tasks: TaskInfoProject[]): FormArray {
  const taskArray = this.fb.array([]);
    tasks.forEach(d => {
      taskArray.push(this.fb.group({
      comments: new FormControl(d.comments),
      hours: new FormControl(d.hours),
      statusReportFlag: new FormControl(d.statusReportFlag),
      taskCategoryId: new FormControl(d.taskCategoryId),