DVR-Frontend/src/app/createentry/dvrentry.component.html

<div class="mainContainer">
  <div class="container-fluid p-lg-0 p-sm-0 p-md-0">
    <dvr-header></dvr-header>

  </div>



  <div class="wrapper d-flex align-items-stretch">
    <nav id="sidebar" style="background:#f0ebeb;box-shadow:7px 7px 13px #d1cece">
      <div class="custom-menu">

      </div>

      <ul class="list-unstyled components mb-5">
        <li class="active" style="text-align:center">
          <a routerLink="/home"><span class="fa fa-home "></span>
            <p style="font-size:15px;margin-bottom: 0px;"> Home</p>
          </a>
        </li>
        <li style="text-align:center">
          <a routerLink="/contactDetails"><span class="fa fa-user "></span>

            <p style="font-size:15px;margin-bottom: 0px;">Contact</p>
          </a>
        </li>
        <li style="text-align:center;background: #d9d5d5">
          <a routerLink="/dvrentry"><span class="fa fa-file-text "></span>

            <p style="font-size:15px;margin-bottom: 0px;"> DVR Entry</p>
          </a>
        </li>
        <li style="text-align:center" *ngIf="role == 'admin'">
          <a routerLink="/customer"><span class="fa fa-building"></span>
            <p style="font-size:15px;margin-bottom: 0px;">Customer</p>
          </a>
        </li>
      </ul>

    </nav>


    <!-- Page Content  -->
    <div id="content">


      <div class="row">
        <div class="col-lg-12 row formheaderrow">
          <p class="formheader"><i class="fa fa-file-text-o" style="padding-right:10px"></i>Visit Details</p>
        </div>
      </div>

      <div class=" p-4 p-md-5 pt-5">




        <div class="col-lg-12 panelcss">


          <form [formGroup]='contactEntryForm' (ngSubmit)="dvrEntry(contactEntryForm)">


            <fieldset>

              <div class="row">
                <div class="col-lg-12 p-lg-0 p-md-0 p-sm-0 row">
                  <div class="col-lg-12 row" style="padding:0px">

                    <div class="col-lg-4">

                      <div class="form-group" [ngClass]="displayFieldCss('date')">
                        <label style="font-size: 16px;margin-top: 5px;margin-bottom: 0px;">Date of Visit<span
                            style="color: red;"> *</span></label>

                        <input type="Date" class="form-control" formControlName='date' name="Date" id="Date"
                          placeholder="Date of Visit" style="margin-top: 0px;">
                        <app-field-error-display [displayError]="isFieldValid('date')" errorMsg="Please enter date">
                        </app-field-error-display>
                      </div>
                    </div>





                    <div class="col-lg-4">
                      <div class="form-group" [ngClass]="displayFieldCss('custName')">
                        <label style="font-size: 16px;margin-top: 5px;margin-bottom: 0px;"> Customer<span
                            style="color: red;"> *</span></label>
                        <select id="Axis" class="form-control" formControlName='custName' style="margin-top: 0px;"
                          (change)="customerDetails(contactEntryForm)">
                          <!-- <option [selected]=true default disabled> Choose Customer</option> -->
                          <!-- <option value=""  selected >Choose Customer</option> -->

                          <option *ngIf="customer_name" default disabled>{{customer_name}}</option>
                          <option *ngFor="let cust of cust_data" [ngValue]="cust">
                            {{ cust.customer_name }}

                          </option>
                        </select>
                        <app-field-error-display [displayError]="isFieldValid('custName')"
                          errorMsg="Please enter Customer Name">
                        </app-field-error-display>

                      </div>
                    </div>

                    <div class="col-lg-4">

                      <div class="form-group" style="margin-bottom:2px" [ngClass]="displayFieldCss('contactName')">
                        <label style="font-size: 16px;margin-top: 5px;margin-bottom: 0px;"> Contact<span
                            style="color: red;"> *</span></label>

                        <select id="Axis" (change)="contactDetails(contactEntryForm)" class="form-control"
                          formControlName='contactName' style="margin-top: 0px;">
                          <!-- <option><a href="" (click)="contactDetails(contactEntryForm)"
                              style="cursor: pointer;color: #7f7f7f;"> Add New Contact</a></option> -->
                          <option (click)="contactDetails(contactEntryForm)" value="new">Add New Contact</option>
                          <option *ngIf="contact_name" default disabled>{{contact_name}}</option>
                          <option *ngFor="let contact of contact_data" [ngValue]="contact">
                            {{ contact.first_name }} {{ contact.last_name }}
                          </option>
                        </select>
                        <app-field-error-display [displayError]="isFieldValid('contactName')"
                          errorMsg="Please enter Contact Name">
                        </app-field-error-display>

                      </div>
                      <!-- <a (click)="contactDetails(contactEntryForm)" style="cursor: pointer;"> <span
                          style="color: #cd1212;text-decoration: underline;font-size:14px">Add New Contact
                        </span></a> -->
                    </div>


                    <div class="col-lg-4" style="margin-top:38px;">
                      <div class="form-group" *ngIf="currentSecondContact ==false" style="margin-bottom:2px"
                        [ngClass]="displayFieldCss('secondContact')">
                        <label style="font-size: 16px;margin-top: 5px;margin-bottom: 0px;"> Second Contact</label>

                        <select id="Axis" (change)="contactDetails(contactEntryForm)" class="form-control"
                          formControlName='secondContact' style="margin-top: 0px;">
                          <!-- <option><a href="" (click)="contactDetails(contactEntryForm)"
                              style="cursor: pointer;color: #7f7f7f;"> Add New Contact</a></option> -->
                          <option (click)="contactDetails(contactEntryForm)" value="new">Add New Contact</option>
                          <option *ngIf="second_contact" default disabled>{{second_contact}}</option>
                          <option *ngFor="let second_contact of contact_data" [ngValue]="second_contact">
                            {{ second_contact.first_name }} {{ second_contact.last_name }}
                          </option>
                        </select>
                      </div>
                      <div class="form-group" *ngIf="currentSecondContact ==true" style="margin-bottom:2px"
                        [ngClass]="displayFieldCss('secondContact')">
                        <label style="font-size: 16px;margin-top: 5px;margin-bottom: 0px;"> Second Contact</label>

                        <select id="Axis" (change)="contactDetails(contactEntryForm)" class="form-control"
                          formControlName='secondContact' style="margin-top: 0px;">
                          <option (click)="contactDetails(contactEntryForm)" value="new">Add New Contact</option>
                          <option *ngIf="second_contact" default disabled>{{second_contact}}</option>
                          <option *ngFor="let second_contact of secondContact_Details" [ngValue]="second_contact">
                            {{ second_contact.first_name }} {{ second_contact.last_name }}
                          </option>
                        </select>
                      </div>
                    </div>


                    <div class="col-lg-4" style="margin-top:38px">

                      <div class="form-group" style="margin-bottom:2px" [ngClass]="displayFieldCss('stageName')">
                        <label style="font-size: 16px;margin-top: 5px;margin-bottom: 0px;">Status<span
                            style="color: red;"> *</span></label>
                        <select id="Axis" class="form-control" formControlName="stageName"
                          style="margin: 6px;margin-top: 0px;">
                          <!-- <option default disabled> Choose Status</option> -->
                          <option *ngIf="stage_des" default disabled>{{stage_des}}</option>
                          <option *ngFor="let status of stage_data" [ngValue]="status">
                            {{ status.stage_desc }}
                          </option>

                        </select>
                        <app-field-error-display [displayError]="isFieldValid('stageName')"
                          errorMsg="Please enter Status">
                        </app-field-error-display>
                      </div>
                    </div>

                    <div class="col-lg-4" style="margin-top:38px;">

                      <div class="form-group" [ngClass]="displayFieldCss('nextstep')">
                        <label style="font-size: 16px;margin-top: 5px;margin-bottom: 0px;">Next Action
                          <span style="color: red;"> *</span></label>
                        <textarea type="text" name="First Name" formControlName="nextstep" class="textarea" id="user"
                          onkeyup="this.setAttribute('value', this.value);" value=""
                          style="margin: 25px 0;padding: 14px;height:auto !important;border-bottom: 2px solid #e0e0e0 !important;margin-top: -2px;padding: 0px;margin-left: -2px;"></textarea>
                        <app-field-error-display [displayError]="isFieldValid('nextstep')"
                          errorMsg="Please enter Next steps details">
                        </app-field-error-display>
                      </div>

                    </div>


                    <div class="col-lg-4" style="margin-top:38px;">
                      <div class="form-group" [ngClass]="displayFieldCss('message')">
                        <label style="font-size: 16px;margin-top: 5px;margin-bottom: 0px;">Activity Remark<span
                            style="color: red;"> *</span></label>
                        <textarea type="text" name="First Name" formControlName="message" class="textarea" id="user"
                          onkeyup="this.setAttribute('value', this.value);" value=""
                          style="margin: 25px 0;padding: 14px;height:auto !important;border-bottom: 2px solid #e0e0e0 !important;margin-top: -2px;padding: 0px;"></textarea>
                        <app-field-error-display [displayError]="isFieldValid('message')"
                          errorMsg="Please enter Message">
                        </app-field-error-display>
                      </div>
                    </div>



                    <div class="col-lg-4" style="margin-top:38px">
                      <span style="color:#7f7f7f;">Physical Meeting?<span style="color: red;"> *</span>
                      </span>
                      <div class="input-group" style="margin-top: 10px;">

                        <div class="switch-field">
                          <input type="radio" id="radio-one1" name="ph_meet" value="yes" formControlName="ph_meet"
                            checked />
                          <label for="radio-one1">Yes</label>
                          <input type="radio" id="radio-two1" name="ph_meet" value="no" formControlName="ph_meet" />
                          <label for="radio-two1">No</label>
                        </div>
                      </div>
                    </div>

                    <div class="col-lg-4" style="margin-top:38px;">
                      <div class="form-group" [ngClass]="displayFieldCss('date')">
                        <label style="font-size: 16px;margin-top: 5px;margin-bottom: 0px;">Estimate Date Of Closure Of
                          Deal</label>

                        <input type="date" class="form-control" formControlName="estDate" name="Date" id="Date"
                          placeholder="Estimate date of closure of deal" style="margin-top: 0px;">
                      </div>
                    </div>



                    <div class="col-lg-4" style="margin-top:38px;">
                      <div class="form-group" [ngClass]="displayFieldCss('objective')">
                        <label style="font-size: 16px;margin-top: 5px;margin-bottom: 0px;">Objective/Opportunity</label>
                        <textarea type="text" name="objective" formControlName="objective" class="textarea"
                          id="objective" onkeyup="this.setAttribute('value', this.value);" value=""
                          style="margin: 25px 0;padding: 14px;height:auto !important;border-bottom: 2px solid #e0e0e0 !important;margin-top: -2px;padding: 0px;"></textarea>

                      </div>
                    </div>

                    <div class="col-lg-4" style="margin-top:38px;">
                      <div class="form-group" [ngClass]="displayFieldCss('objective')">
                        <label style="font-size: 16px;margin-top: 5px;margin-bottom: 0px;">Estimated Value Of Deal
                        </label>
                        <textarea type="text" name="deal" formControlName="deal" class="textarea" id="deal"
                          onkeyup="this.setAttribute('value', this.value);" value=""
                          (keypress)="allowOnlyNumber($event)"
                          style="margin: 25px 0;padding: 14px;height:auto !important;border-bottom: 2px solid #e0e0e0 !important;margin-top: -2px;padding: 0px;"></textarea>

                      </div>
                    </div>

                    <div class="col-lg-4" style="margin-top:38px;">
                      <div class="form-group">
                        <label style="font-size: 16px; margin-top: 5px; margin-bottom: 5px;"> Next Action On:</label>
                        <!-- <span style="color: red;"> *</span> -->
                        <select id="function" class="form-control" formControlName="postion" (change)="funcPersonDetails(contactEntryForm)"
                          style="margin: 6px;margin-top: 0px;">
                          <option value="" disabled selected>Choose Function</option>
                          <option *ngIf="postion" default disabled>{{postion}}</option>
                          <option *ngFor="let postion of funcDetails" [ngValue]="postion">
                            {{ postion.func_name }}
                          </option>
                        </select>
                        <select id="function" class="form-control" formControlName="personData"
                          style="margin: 6px;margin-top: 0px;">
                          <option value="" disabled selected>Choose Person</option>
                          <option *ngIf="person" default disabled>{{person}}</option>
                          <option *ngFor="let person of personDetails" [ngValue]="person">
                            {{ person.person_name }}
                          </option>
                        </select>
                        <!-- <app-field-error-display [displayError]="isFieldValid('postion')"
                          errorMsg="Please select Function">
                        </app-field-error-display>
                        <app-field-error-display [displayError]="isFieldValid('personData')"
                          errorMsg="Please select Position">
                        </app-field-error-display> -->

                      </div>
                    </div>

                  </div>

                </div>



              </div>



              <div class="col-lg-12 row text-lg-right">

                <div class="col-lg-8 col-md-7">
                </div>

                <div class="col-lg-4 col-sm-12 col-md-12">
                  <input class="cancelbutton" type="button" value="Delete" (click)="deleteEntry()"
                    style="margin-right:15px" *ngIf="checkupdatedelete == true">

                  <input class="submitbutton" type="submit" value="Save" style="margin-right:15px">

                  <input class="cancelbutton" type="reset" value="reset" (click)="onReset()">
                </div>

              </div>



              <div class="modal" tabindex="-1" role="dialog" [ngStyle]="{'display':displayStyle}">
                <div class="modal-dialog" role="document">
                  <div class="modal-content">
                    <div class="modal-header">
                      <h4 class="modal-title">{{status_msg}}</h4>

                    </div>
                    <div class="modal-body">
                      <p>{{error_msg}}</p>

                    </div>
                    <div class="modal-footer">
                      <button type="button" class="btn btn-danger" (click)="closePopup()">
                        Close
                      </button>
                    </div>
                  </div>
                </div>
              </div>

              <div class="modal_new" tabindex="-4" role="dialog" *ngIf="checkupdatedelete == false">
                <div class="modal-dialog" role="document">
                  <div class="modal-content">
                    <div class="modal-header">
                      <h4 class="modal-title">Warning</h4>

                    </div>
                    <div class="modal-body">
                      <p>You can not Update and Delete DVR Entry after 1 day of creation.</p>

                    </div>
                    <div class="modal-footer">
                      <button type="button" class="submitbutton">
                        <a routerLink="/home" style="color: white;">
                          Home
                        </a>
                      </button>
                    </div>
                  </div>
                </div>
              </div>

            </fieldset>


          </form>


        </div>


      </div>

      <div class=" p-4 p-md-5 pt-5" style="padding-top: 20px !important;">
        <div class="col-lg-12 " style="    border: 1px solid #cbcbcb;
        padding: 10px;
        border-radius: 5px;overflow: auto;">
          <!-- <table id="datatableexample" class="display" cellspacing="0" width="100%"> -->
          <table datatable [dtOptions]="dtOptions" [dtTrigger]="dtTrigger" class="row-border hover table" cellspacing="0"
            width="100%">

            <thead>
              <tr>

                <th>Date of Visit</th>
                <th>Customer Name</th>
                <th>Contact Name</th>
                <th>Mobile Number</th>
                <th>Second Contact</th>
                <th>Next Action</th>
                <th>Physical Meeting</th>
                <th >Message</th>
                <th>Status</th>
                <th>Estimate Date Of Closure Of Deal</th>
                <th>Objective/Opportunity</th>
                <th>Estimated Value Of Deal</th>
                <th>Function</th>
                <th>Person</th>



              </tr>
            </thead>

            <tbody>
              <tr *ngFor="let current of currentDateData; let i = index">
                <td>{{current.date_of_visit | datePipe}}</td>
                <td>{{current.customer_name }}</td>
                <td>{{current.contact_name }}</td>
                <td>{{current.mobile_number }}</td>
                <td>{{current.second_contact }}</td>
                <!-- <td style="    width: 85%;
             
                min-height: 150px !important;
              
                display: block;
                overflow-x: auto;">{{current.nextstep }}</td> -->
                <td>{{ current.nextstep }}</td>
                <td>{{current.physical_meeting | titlecase}}</td>
                <!-- <td style="    width: auto;
             
                min-height: 150px !important;
              
                display: block;
                overflow-x: auto;">{{current.message }}</td> -->
                <td>{{ current.message }}</td>
                <td>{{current.stage_desc }}</td>
                <td>{{current.est_Date | datePipe}}</td>
                <!-- <td style="    width: auto;
             
                min-height: 150px !important;
              
                display: block;
                overflow-x: auto;">{{current.objective}}</td> -->
                <td>{{current.objective}}</td>
                <td>{{current.estvalue}}</td>
                <td>{{current.func}}</td>
                <td>{{current.person}}</td>

              </tr>
            </tbody>
          </table>

        </div>
      </div>



    </div>
  </div>



  <div class="row footer">
    <p>Copyright © MindCraft Software Pvt. Ltd.</p>
  </div>

</div>