title : ps

src/app/app.module.ts

@@ -115,10 +115,6 @@ import { PdPipe } from '../pipes/pd/pd';
 import { PdQuestionAssessedBusinessIncomePage } from '../pages/pd-question/pd-question-assessed-business-income/pd-question-assessed-business-income';
 import { PdGeneralImagesPage } from '../pages/pd-general-images/pd-general-images';
 import { PdQuestionSalaryInfoPage } from '../pages/pd-question/pd-question-salary-info/pd-question-salary-info';
-import { DatabaseProvider } from '../providers/database/database'
-import { SQLite } from '@ionic-native/sqlite'
-import { AndroidPermissions } from '@ionic-native/android-permissions';
-
 
 @NgModule({
     declarations: [

src/pages/pd-question-category/pd-question-category.ts

@@ -18,11 +18,11 @@ import { PdQuestionBankingPage } from '../pd-question/pd-question-banking/pd-que
 import { PdQuestionFamilyPage } from '../pd-question/pd-question-family/pd-question-family';
 import { PdQuestionAssestsPage } from '../pd-question/pd-question-assests/pd-question-assests';
 import { PdQuestionOtherIncomePage } from '../pd-question/pd-question-other-income/pd-question-other-income';
-import { PdQuestionSupplierInfoPage } from '../pd-question/pd-question-supplier-info/pd-question-supplier-info';
+import { PdQuestionSupplierInfoPage } from '../pd-question/pd-question-business-group/pd-question-supplier-info/pd-question-supplier-info';
 import { PdQuestionPersonalInfoPage } from '../pd-question/pd-question-personal-info/pd-question-personal-info';
-import { PdQuestionStockInfoPage } from '../pd-question/pd-question-stock-info/pd-question-stock-info';
+import { PdQuestionStockInfoPage } from '../pd-question/pd-question-business-group/pd-question-stock-info/pd-question-stock-info';
 import { PdQuestionFinancialInfoPage } from '../pd-question/pd-question-financial-info/pd-question-financial-info';
-import { PdQuestionClientInfoPage } from '../pd-question/pd-question-client-info/pd-question-client-info';
+import { PdQuestionClientInfoPage } from '../pd-question/pd-question-business-group/pd-question-client-info/pd-question-client-info';
 import { PdQuestionRentalInfoPage } from '../pd-question/pd-question-rental-info/pd-question-rental-info';
 import { PdQuestionAssessedInfoPage } from '../pd-question/pd-question-assessed-info/pd-question-assessed-info';
 import { PdQuestionAssessedDashPage } from '../pd-question/pd-question-assessed-dash/pd-question-assessed-dash';

src/pages/pd-question/pd-question-business-group/pd-question-business-banking/pd-question-business-banking.html

@@ -7,7 +7,7 @@
 <ion-header>
 
   <ion-navbar color="optblue">
-    <ion-title>Banking Details</ion-title>
+      <ion-title>{{formDetails.form_name}}</ion-title>
   </ion-navbar>
 
 </ion-header>

src/pages/pd-question/pd-question-business-group/pd-question-business-banking/pd-question-business-banking.scss

@@ -1,3 +1,16 @@
 page-pd-question-business-banking {
-
+    mat-hint{
+        font-size:12px;
+    }
+    .scroll-content{
+        background-color: #eee;
+      }
+   .mat-card{
+        margin-bottom: 15px;
+        border-radius: 10px !important;
+        box-shadow: 0 16px 38px -12px rgba(0, 0, 0, 0.56), 0 4px 25px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2) !important;
+    }
+    .mat-card-content{
+        margin-bottom: 0px !important;
+    }
 }

src/pages/pd-question/pd-question-business-group/pd-question-business-banking/pd-question-business-banking.ts

@@ -46,15 +46,16 @@ step:number
 
   constructor(public navCtrl: NavController, public navParams: NavParams,public aws: AwsServiceProvider,public fb:FormBuilder,public qustCat:QuestionCategoryProvider,public cons:ConstantsProvider,public toast:ToastProvider) {
     this.pdDetails=this.navParams.get('pdDetails')
-    console.log("pd",this.pdDetails);
+    // console.log("pd",this.pdDetails);
-    this.pdDetails = this.navParams.get('pdDetails');
     this.pd_cus_segment=this.pdDetails.customer_segment_abbr.toUpperCase();
     this.pd_cus_segment=this.pd_cus_segment.substring(0,3)
     this.pdid=this.pdDetails.pd_id;
     this.formDetails=this.navParams.get('formDetails');
     this.form_id = this.formDetails.form_id;
     this.company_id=this.pdDetails.company_id
-    // console.log("Form Id",this.FormId);
+    // console.log(" business bank Form Id fetched",this.form_id);
+    // console.log(" business bank Form Details",this.formDetails);
+    // console.log(" business bank Form Id",this.formDetails.form_id);
     this.applicants = this.pdDetails.applicat_details;
     this.applicants = this.applicants.filter(appt=>appt.applicant_type != 2)
     this.applicants.push({'pd_co_applicant_id':'0','applicant_name':'Others'}); 

src/pages/pd-question/pd-question-business-group/pd-question-business-group.ts

@@ -82,15 +82,15 @@ export class PdQuestionBusinessGroupPage {
     // console.log("form_id",details.form_id)
   }
   if(details.form_id==15){
-    this.navCtrl.push(PdQuestionSupplierInfoPage,{'formDetails':details.form_id,'pdDetails':this.pdDetails});
+    this.navCtrl.push(PdQuestionSupplierInfoPage,{'formDetails':details,'pdDetails':this.pdDetails});
     // console.log("form_id",details.form_id)
   }
   if(details.form_id==21){
-    this.navCtrl.push(PdQuestionBusinessBankingPage,{'formDetails':details.form_id,'pdDetails':this.pdDetails});
+    this.navCtrl.push(PdQuestionBusinessBankingPage,{'formDetails':details,'pdDetails':this.pdDetails});
     // console.log("form_id",details.form_id)
   }
   if(details.form_id==22){
-    this.navCtrl.push(PdQuestionBusinessAssetsPage,{'formDetails':details.form_id,'pdDetails':this.pdDetails});
+    this.navCtrl.push(PdQuestionBusinessAssetsPage,{'formDetails':details,'pdDetails':this.pdDetails});
     // console.log("form_id",details.form_id)
   }
 

src/pages/pd-question/pd-question-business-group/pd-question-client-info/pd-question-client-info.html

@@ -1,40 +1,35 @@
 <ion-header>
-
     <ion-navbar color="optblue">
         <button ion-button menuToggle>
             <ion-icon name="menu"></ion-icon>
         </button>
         <ion-title *ngIf="!viewchange">{{formDetails.form_name}}</ion-title>
     </ion-navbar>
-
 </ion-header>
-<ion-content padding *ngIf="noRecordsFound">
+<ion-content padding>
+    <div *ngIf="noRecordsFound">
         <form [formGroup]="clientInfoForm">
-      
+            <div fxLayout="row" fxLayoutAlign="start none">
                 <mat-card *ngIf="manufacturingForm">
-              <mat-card-title>Manufacturing Product Details</mat-card-title>
+                    <mat-card-title><h5>Manufacturing Product Details</h5></mat-card-title>
                     <div formArrayName="manufacturing_details">
-                  <div *ngFor="let item of clientInfoForm.controls.manufacturing_details['controls']; let i=index" [formGroupName]="i">
+                        <div *ngFor="let item of clientInfoForm.controls.manufacturing_details['controls']; let i=index"
+                            [formGroupName]="i">
                             <div formArrayName="main_raw_materials">
-                          <div *ngFor="let items of item.controls.main_raw_materials['controls']; let l=index;let last =last" [formGroupName]="l">
+                                <div *ngFor="let items of item.controls.main_raw_materials['controls']; let l=index;let last =last"
-                              <mat-card>
+                                    [formGroupName]="l">
                                     <mat-card-subtitle>Product #{{l+1}}</mat-card-subtitle>
                                     <mat-card-content>
                                         <div fxLayout="row nowrap" fxLayoutGap="2px" fxLayoutAlign="start none">
                                             <mat-form-field style="width:100%">
                                                 <mat-select placeholder="Manufacturing Product Name" formControlName="manufacturing_product_name">
-                                              <mat-option *ngFor="let pm of m_manufacturingProducts[0]" [value]="pm.name">{{ pm.name }}</mat-option>
+                                                    <mat-option *ngFor="let pm of m_manufacturingProducts[0]" [value]="pm.name">{{
+                                                        pm.name }}</mat-option>
                                                 </mat-select>
                                             </mat-form-field>
-                                      
-                                      <!--<mat-form-field style="width: 100%">
-                                          <input matInput placeholder="Raw Material Name" formControlName="manufacturing_raw_material_name">
-                                      </mat-form-field>-->
                                             <mat-form-field style="width: 100%">
                                                 <input matInput placeholder="Client Name" formControlName="manufacturing_client_name">
                                             </mat-form-field>
-                                  
-                                  
                                             <mat-form-field style="width: 100%">
                                                 <mat-select placeholder="Title" formControlName="person_title_name">
                                                     <mat-option *ngFor="let tl of titleList" [value]="tl.title_id">
@@ -43,114 +38,113 @@
                                                 </mat-select>
                                             </mat-form-field>
                                             <mat-form-field style="width: 100%">
-                                          <input matInput placeholder="Client Contact Person Name" formControlName="manufacturing_contact_person_name">
+                                                <input matInput placeholder="Client Contact Person Name"
+                                                    formControlName="manufacturing_contact_person_name">
                                             </mat-form-field>
                                             <mat-form-field style="width: 100%">
-                                              <mat-select placeholder="Contact Person Designation" formControlName="person_designation" (selectionChange)="selectedPersonDesignation(items,$event.value,1)" >
+                                                <mat-select placeholder="Contact Person Designation" formControlName="person_designation"
+                                                    (selectionChange)="selectedPersonDesignation(items,$event.value,1)">
                                                     <mat-option>Select</mat-option>
-                                                  <mat-option *ngFor="let comrelShip of companyRelationShipList" [value]="comrelShip.company_relationship_id">
+                                                    <mat-option *ngFor="let comrelShip of companyRelationShipList"
+                                                        [value]="comrelShip.company_relationship_id">
                                                         {{comrelShip.name}}
                                                     </mat-option>
                                                     <!-- <mat-option value="1" > Not Applicable </mat-option> -->
                                                 </mat-select>
                                             </mat-form-field>
                                             <mat-form-field style="width: 100%" *ngIf="items.get('person_designation').value == 1">
-                                              <input matInput placeholder="Specify Person Designation" formControlName="other_person_designation">
+                                                <input matInput placeholder="Specify Person Designation"
+                                                    formControlName="other_person_designation">
                                             </mat-form-field>
-                                  
                                             <mat-form-field style="width: 100%">
-                                          <input matInput placeholder="Client Contact Person Mobile Number" formControlName="manufacturing_contact_person_mobile_number" type="number"  maxlength="10">
+                                                <input matInput placeholder="Client Contact Person Mobile Number"
+                                                    formControlName="manufacturing_contact_person_mobile_number" type="number"
+                                                    maxlength="10">
                                                 <mat-error>Enter Valid Mobile Number.</mat-error>
                                             </mat-form-field>
                                             <mat-form-field style="width: 100%">
-                                              <input matInput autocomplete="off" placeholder="STD Code" formControlName="person_stdcode"  type="number">
+                                                <input matInput autocomplete="off" placeholder="STD Code"
+                                                    formControlName="person_stdcode" type="number">
                                                 <mat-error>Enter Valid STD Code Number.</mat-error>
                                             </mat-form-field>
                                             <!-- &nbsp; - &nbsp; -->
                                             <mat-form-field style="width: 100%">
-                                              <input matInput autocomplete="off" placeholder="Client Contact Person Landline Number" formControlName="person_landline"  type="number">
+                                                <input matInput autocomplete="off" placeholder="Client Contact Person Landline Number"
+                                                    formControlName="person_landline" type="number">
                                                 <mat-error>Enter Valid LandLine Number.</mat-error>
                                             </mat-form-field>
-                                  
-                                  
                                             <mat-form-field style="width: 100%">
-                                          <!-- <mat-select placeholder="Payment Type" formControlName="manufacturing_payment_type">
+                                                <mat-select placeholder="Payment Terms" formControlName="manufacturing_payment_type"
-                                              <mat-option *ngFor="let pm of m_paymentModeType" [value]="pm.id">{{ pm.name }}</mat-option>
+                                                    (selectionChange)="checkCard($event.value,1,l);">
-                                          </mat-select> -->
+                                                    <mat-option *ngFor="let pm of m_paymentType" [value]="pm.id">{{
-                                          <mat-select placeholder="Payment Terms" formControlName="manufacturing_payment_type" (selectionChange)="checkCard($event.value,1,l);">
+                                                        pm.name }}</mat-option>
-                                                  <mat-option *ngFor="let pm of m_paymentType" [value]="pm.id">{{ pm.name }}</mat-option>
                                                 </mat-select>
-                                          
                                             </mat-form-field>
                                             <mat-form-field style="width: 100%">
                                                 <mat-select placeholder="Payment Mode" formControlName="manufacturing_payment_mode">
-                                                      <mat-option value="Payment received in Cash.">Payment received in Cash.</mat-option>
+                                                    <mat-option value="Payment received in Cash.">Payment received in
-                                                      <mat-option value="Payment received through Banking channels.">Payment received through Banking channels.</mat-option>
+                                                        Cash.</mat-option>
+                                                    <mat-option value="Payment received through Banking channels.">Payment
+                                                        received through Banking channels.</mat-option>
                                                 </mat-select>
-                                              
                                             </mat-form-field>
-                                      
-                                  
                                             <span *ngIf="items.get('manufacturing_payment_type').value == 3">
                                                 <mat-label>No of days of Credit provided to Client for payment</mat-label>
-                                      
                                                 <mat-form-field style="width: 100%">
-                                              <input matInput placeholder="Days From" formControlName="manufacturing_credit_days_from" type="number">
+                                                    <input matInput placeholder="Days From" formControlName="manufacturing_credit_days_from"
+                                                        type="number">
                                                 </mat-form-field>
                                                 <mat-form-field style="width: 100%">
-                                              <input matInput placeholder="Days To" formControlName="manufacturing_credit_days_to" type="number">
+                                                    <input matInput placeholder="Days To" formControlName="manufacturing_credit_days_to"
+                                                        type="number">
                                                 </mat-form-field>
                                             </span>
                                         </div>
-                                  <ion-col offset-6 col-3>
+                                        <ion-buttons end>
-                                      <a (click)="addMoreRawMaterials($event); false" *ngIf="last">
+                                            <ion-col col-3 offset-3>
-                                          <ion-icon name="md-add" color="optblue" style="font-size: 22px;"></ion-icon>
-                                      </a>
-                                  </ion-col>
-                                  <ion-col offset-3 col-1>
                                                 <a *ngIf="item.controls.main_raw_materials.controls.length > 1" (click)="removeRawMaterials(l)">
-                                          <ion-icon name="md-close" color="optblue" style="font-size: 22px;"></ion-icon>
+                                                    <ion-icon name="md-trash" color="optblue" style="font-size: 22px;"></ion-icon>
                                                 </a>
                                             </ion-col>
+                                            <ion-col col-2 offset-1>
+                                                <a (click)="addMoreRawMaterials($event); false" *ngIf="last">
+                                                    <ion-icon name="add-circle" color="optblue" style="font-size: 24px;"></ion-icon>
+                                                </a>
+                                            </ion-col>
+                                        </ion-buttons>
                                     </mat-card-content>
-                              </mat-card>
-                              
                                 </div>
                             </div>
-                              <!-- <div fxlayout="row">
+                            <div *ngIf="mfgCreditCardFlag">
-                          <mat-form-field style="width: 80%" *ngIf="mfgCreditCardFlag">
+                                <mat-form-field style="width: 100%">
-                              <input matInput placeholder="What Percentage of Total Sales is done on Credit ?" formControlName="main_raw_materials_total_payments_percent_on_credit"
+                                    <input matInput placeholder="What Percentage of Total Sales is done on Credit ?"
-                                  type="number">
+                                        formControlName="main_raw_materials_total_payments_percent_on_credit" type="number">
                                 </mat-form-field>
-                      </div> -->
+                            </div>
-                         
                         </div>
                     </div>
                 </mat-card>
                 <mat-card *ngIf="tradingForm">
-              <mat-card-title>Trading Product Details</mat-card-title>
+                    <mat-card-title><h5>Trading Product Details</h5></mat-card-title>
                     <div formArrayName="trade_details">
-                  <div *ngFor="let item of clientInfoForm.controls.trade_details['controls']; let i=index" [formGroupName]="i">
+                        <div *ngFor="let item of clientInfoForm.controls.trade_details['controls']; let i=index"
+                            [formGroupName]="i">
                             <div formArrayName="trading_products">
-                          <div *ngFor="let items of item.controls.trading_products['controls']; let l=index;let last =last" [formGroupName]="l">
+                                <div *ngFor="let items of item.controls.trading_products['controls']; let l=index;let last =last"
-                              <mat-card>
+                                    [formGroupName]="l">
                                     <mat-card-subtitle>Trading Product #{{l+1}}</mat-card-subtitle>
                                     <mat-card-content>
-                                  
                                         <div fxLayout="row nowrap" fxLayoutGap="2px" fxLayoutAlign="start none">
                                             <mat-form-field style="width: 100%">
+                                                <!-- <input matInput placeholder="Trade Product Name" formControlName="trade_product_name"> -->
                                                 <mat-select placeholder="Trading Product Name" formControlName="trade_product_name">
-                                              <mat-option *ngFor="let pm of m_tradingProducts" [value]="pm.name">{{ pm.name }}</mat-option>
+                                                    <mat-option *ngFor="let pm of m_tradingProducts" [value]="pm.name">{{
+                                                        pm.name }}</mat-option>
                                                 </mat-select>
                                             </mat-form-field>
-                                      <!--<mat-form-field style="width: 100%">
-                                          <input matInput placeholder="Trade Product Name" formControlName="trade_product_name">
-                                      </mat-form-field>-->
                                             <mat-form-field style="width: 100%">
                                                 <input matInput placeholder="Client Name" formControlName="trade_client_name">
                                             </mat-form-field>
-                                  
-                                  
                                             <mat-form-field style="width: 100%">
                                                 <mat-select placeholder="Title" formControlName="person_title_name">
                                                     <mat-option *ngFor="let tl of titleList" [value]="tl.title_id">
@@ -159,111 +153,116 @@
                                                 </mat-select>
                                             </mat-form-field>
                                             <mat-form-field style="width: 100%">
-                                          <input matInput placeholder="Client Contact Person Name" formControlName="trade_product_contact_person_name">
+                                                <input matInput placeholder="Client Contact Person Name"
+                                                    formControlName="trade_product_contact_person_name">
                                             </mat-form-field>
                                             <mat-form-field style="width: 100%">
-                                              <mat-select placeholder="Contact Person Designation" formControlName="person_designation" (selectionChange)="selectedPersonDesignation(items,$event.value,2)">
+                                                <mat-select placeholder="Contact Person Designation" formControlName="person_designation"
+                                                    (selectionChange)="selectedPersonDesignation(items,$event.value,2)">
                                                     <mat-option>Select</mat-option>
-                                                  <mat-option *ngFor="let comrelShip of companyRelationShipList" [value]="comrelShip.company_relationship_id">
+                                                    <mat-option *ngFor="let comrelShip of companyRelationShipList"
+                                                        [value]="comrelShip.company_relationship_id">
                                                         {{comrelShip.name}}
                                                     </mat-option>
                                                     <!-- <mat-option value="1" > Not Applicable </mat-option> -->
                                                 </mat-select>
                                             </mat-form-field>
                                             <mat-form-field style="width: 100%" *ngIf="items.get('person_designation').value == 1">
-                                              <input matInput placeholder="Specify Person Designation" formControlName="other_person_designation">
+                                                <input matInput placeholder="Specify Person Designation"
+                                                    formControlName="other_person_designation">
                                             </mat-form-field>
-                                  
-                                  
                                             <mat-form-field style="width: 100%">
-                                          <input matInput placeholder="Client Contact Person Mobile Number" formControlName="trade_product_contact_person_mobile_number" type="number"  maxlength="10">
+                                                <input matInput placeholder="Client Contact Person Mobile Number"
+                                                    formControlName="trade_product_contact_person_mobile_number" type="number"
+                                                    maxlength="10">
                                                 <mat-error>Enter Valid Mobile Number.</mat-error>
                                             </mat-form-field>
                                             <mat-form-field style="width: 100%">
-                                              <input matInput autocomplete="off" placeholder="STD Code" formControlName="person_stdcode"  type="number">
+                                                <input matInput autocomplete="off" placeholder="STD Code"
+                                                    formControlName="person_stdcode" type="number">
                                                 <mat-error>Enter Valid STD Code Number.</mat-error>
-                                      </mat-form-field> &nbsp; - &nbsp;
+                                            </mat-form-field>
+                                            <!-- &nbsp; - &nbsp; -->
                                             <mat-form-field style="width: 100%">
-                                              <input matInput autocomplete="off" placeholder="Client Contact Person Landline Number" formControlName="person_landline"  type="number">
+                                                <input matInput autocomplete="off" placeholder="Client Contact Person Landline Number"
+                                                    formControlName="person_landline" type="number">
                                                 <mat-error>Enter Valid LandLine Number.</mat-error>
                                             </mat-form-field>
-                                      
-
                                             <mat-form-field style="width: 100%">
-                                          <!-- <mat-select placeholder="Payment Type" formControlName="trade_product_payment_type">
+                                                <mat-select placeholder="Payment Terms" formControlName="trade_product_payment_type"
-                                              <mat-option *ngFor="let pm of m_paymentModeType" [value]="pm.id">{{ pm.name }}</mat-option>
+                                                    (selectionChange)="checkCard($event.value,2,l);">
-                                          </mat-select> -->
+                                                    <mat-option *ngFor="let pm of m_paymentType" [value]="pm.id">{{
-                                              <mat-select placeholder="Payment Terms" formControlName="trade_product_payment_type" (selectionChange)="checkCard($event.value,2,l);">
+                                                        pm.name }}</mat-option>
-                                                  <mat-option *ngFor="let pm of m_paymentType" [value]="pm.id">{{ pm.name }}</mat-option>
                                                 </mat-select>
 
                                             </mat-form-field>
                                             <mat-form-field style="width: 100%">
                                                 <mat-select placeholder="Payment Mode" formControlName="trade_product_payment_mode">
-                                                      <mat-option value="Payment received in Cash.">Payment received in Cash.</mat-option>
+                                                    <mat-option value="Payment received in Cash.">Payment received in
-                                                      <mat-option value="Payment received through Banking channels.">Payment received through Banking channels.</mat-option>
+                                                        Cash.</mat-option>
+                                                    <mat-option value="Payment received through Banking channels.">Payment
+                                                        received through Banking channels.</mat-option>
                                                 </mat-select>
 
                                             </mat-form-field>
                                             <!-- <mat-form-field style="width: 45%" *ngIf="items.get('trade_product_payment_type').value == 3">
                                           <input matInput placeholder="No. of Days of Credit Given for Payment Receipt" formControlName="trade_product_credit_days">
                                       </mat-form-field> -->
-                                  
-                                  
                                             <mat-label>No of days of Credit provided to Client for payment</mat-label>
                                             <mat-form-field style="width: 100%">
-                                              <input matInput placeholder="Days From" formControlName="trade_product_credit_days_from" type="number">
+                                                <input matInput placeholder="Days From" formControlName="trade_product_credit_days_from"
+                                                    type="number">
                                             </mat-form-field>
                                             <mat-form-field style="width: 100%">
-                                              <input matInput placeholder="Days To" formControlName="trade_product_credit_days_to" type="number">
+                                                <input matInput placeholder="Days To" formControlName="trade_product_credit_days_to"
-                                          </mat-form-field>
-                                  </div>
-                                  <ion-col offset-6 col-3>
-                                      <a (click)="addMoretradeProduct($event); false" *ngIf="last">
-                                          <ion-icon name="md-add" color="optblue" style="font-size: 22px;"></ion-icon>
-                                      </a>
-                                  </ion-col>
-                                  <ion-col offset-3 col-1>
-                                      <a *ngIf="item.controls.trading_products.controls.length > 1" (click)="removeTradingProduct(l)">
-                                          <ion-icon name="md-close" color="optblue" style="font-size: 22px;"></ion-icon>
-                                      </a>
-                                  </ion-col>
-                                </mat-card-content>
-                              </mat-card>
-                              
-                          </div>
-                      </div>
-                              <div fxlayout="row">
-                                      <mat-form-field style="width: 80%" *ngIf="trdCreditCardFlag">
-                                              <input matInput placeholder="What Percentage of Total Sales is done on Credit ?" formControlName="trading_products_total_payments_percent_on_credit"
                                                     type="number">
                                             </mat-form-field>
                                         </div>
+                                        <ion-buttons end>
+                                            <ion-col col-3 offset-3>
+                                                <a *ngIf="item.controls.trading_products.controls.length > 1" (click)="removeTradingProduct(l)">
+                                                    <ion-icon name="md-trash" color="optblue" style="font-size: 22px;"></ion-icon>
+                                                </a>
+                                            </ion-col>
+                                            <ion-col col-2 offset-1>
+                                                <a (click)="addMoretradeProduct($event); false" *ngIf="last">
+                                                    <ion-icon name="add-circle" color="optblue" style="font-size: 24px;"></ion-icon>
+                                                </a>
+                                            </ion-col>
+                                        </ion-buttons>
+                                    </mat-card-content>
+                                </div>
+                            </div>
+                            <div *ngIf="trdCreditCardFlag">
+                                <mat-form-field style="width: 100%">
+                                    <input matInput placeholder="What Percentage of Total Sales is done on Credit ?"
+                                        formControlName="trading_products_total_payments_percent_on_credit" type="number">
+                                </mat-form-field>
+                            </div>
                         </div>
                     </div>
                 </mat-card>
-          <!--===========================: service provider details : START-->
                 <mat-card *ngIf="serviceProviderForm">
+                    <mat-card-title><h5>Service Provider Product Details</h5></mat-card-title>
                     <!--<h5 style="margin: 12px;padding:10px !important;">Service Provider Product Details</h5>-->
                     <div formArrayName="service_provider_details">
-                  <div *ngFor="let item of clientInfoForm.controls.service_provider_details['controls']; let i=index" [formGroupName]="i">
+                        <div *ngFor="let item of clientInfoForm.controls.service_provider_details['controls']; let i=index"
+                            [formGroupName]="i">
                             <div formArrayName="service_products">
-                          <div *ngFor="let items of item.controls.service_products['controls']; let l=index;let last =last" [formGroupName]="l">
+                                <div *ngFor="let items of item.controls.service_products['controls']; let l=index;let last =last"
-                              <mat-card>
+                                    [formGroupName]="l">
                                     <mat-card-subtitle>Service Provided #{{l+1}}</mat-card-subtitle>
                                     <mat-card-content>
-                                  
                                         <div fxLayout="row wrap" fxLayoutGap="2px" fxLayoutAlign="start none">
                                             <mat-form-field style="width: 100%">
                                                 <mat-select placeholder="Select the Service Provided" formControlName="service_provider_product_name">
-                                              <mat-option *ngFor="let pm of m_suplierProducts[0]" [value]="pm.name">{{ pm.name }}</mat-option>
+                                                    <mat-option *ngFor="let pm of m_suplierProducts[0]" [value]="pm.name">{{
+                                                        pm.name }}</mat-option>
                                                 </mat-select>
                                             </mat-form-field>
                                             <mat-form-field style="width: 100%">
                                                 <input matInput placeholder="Client Name" formControlName="service_provider_client_name">
                                             </mat-form-field>
-                                      
-                                      
                                             <mat-form-field style="width: 100%">
                                                 <mat-select placeholder="Title" formControlName="person_title_name">
                                                     <mat-option *ngFor="let tl of titleList" [value]="tl.title_id">
@@ -272,49 +271,55 @@
                                                 </mat-select>
                                             </mat-form-field>
                                             <mat-form-field style="width: 100%">
-                                          <input matInput placeholder="Client Contact Person Name" formControlName="service_provider_product_contact_person_name">
+                                                <input matInput placeholder="Client Contact Person Name"
+                                                    formControlName="service_provider_product_contact_person_name">
                                             </mat-form-field>
                                             <mat-form-field style="width: 100%">
-                                              <mat-select placeholder="Contact Person Designation" formControlName="person_designation" (selectionChange)="selectedPersonDesignation(items,$event.value,3)">
+                                                <mat-select placeholder="Contact Person Designation" formControlName="person_designation"
+                                                    (selectionChange)="selectedPersonDesignation(items,$event.value,3)">
                                                     <mat-option>Select</mat-option>
-                                                  <mat-option *ngFor="let comrelShip of companyRelationShipList" [value]="comrelShip.company_relationship_id">
+                                                    <mat-option *ngFor="let comrelShip of companyRelationShipList"
+                                                        [value]="comrelShip.company_relationship_id">
                                                         {{comrelShip.name}}
                                                     </mat-option>
                                                     <!-- <mat-option value="1" > Not Applicable </mat-option> -->
                                                 </mat-select>
                                             </mat-form-field>
                                             <mat-form-field style="width: 100%" *ngIf="items.get('person_designation').value == 1">
-                                              <input matInput placeholder="Specify Person Designation" formControlName="other_person_designation">
+                                                <input matInput placeholder="Specify Person Designation"
+                                                    formControlName="other_person_designation">
                                             </mat-form-field>
-                                  
                                             <mat-form-field style="width: 100%">
-                                          <input matInput placeholder="Client Contact Person Mobile Number" formControlName="service_provider_product_contact_person_mobile_number" type="number"  maxlength="10">
+                                                <input matInput placeholder="Client Contact Person Mobile Number"
+                                                    formControlName="service_provider_product_contact_person_mobile_number"
+                                                    type="number" maxlength="10">
                                                 <mat-error>Enter Valid Mobile Number.</mat-error>
                                             </mat-form-field>
                                             <mat-form-field style="width: 100%">
-                                              <input matInput autocomplete="off" placeholder="STD Code" formControlName="person_stdcode"  type="number">
+                                                <input matInput autocomplete="off" placeholder="STD Code"
+                                                    formControlName="person_stdcode" type="number">
                                                 <mat-error>Enter Valid STD Code Number.</mat-error>
-                                      </mat-form-field> &nbsp; - &nbsp;
+                                            </mat-form-field>
+                                            <!-- &nbsp; - &nbsp; -->
                                             <mat-form-field style="width: 100%">
-                                              <input matInput autocomplete="off" placeholder="Client Contact Person Landline Number" formControlName="person_landline"  type="number">
+                                                <input matInput autocomplete="off" placeholder="Client Contact Person Landline Number"
+                                                    formControlName="person_landline" type="number">
                                                 <mat-error>Enter Valid LandLine Number.</mat-error>
                                             </mat-form-field>
-                                      
                                             <mat-form-field style="width: 100%">
-                                          <!-- <mat-select placeholder="Payment Type" formControlName="service_provider_product_payment_type">
+                                                <mat-select placeholder="Payment Terms" formControlName="service_provider_product_payment_type"
-                                              <mat-option *ngFor="let pm of m_paymentModeType" [value]="pm.id">{{ pm.name }}</mat-option>
+                                                    (selectionChange)="checkCard($event.value,3,l);">
-                                          </mat-select> -->
+                                                    <mat-option *ngFor="let pm of m_paymentType" [value]="pm.id">{{
-                                          <mat-select placeholder="Payment Terms" formControlName="service_provider_product_payment_type" (selectionChange)="checkCard($event.value,3,l);">
+                                                        pm.name }}</mat-option>
-                                                  <mat-option *ngFor="let pm of m_paymentType" [value]="pm.id">{{ pm.name }}</mat-option>
                                                 </mat-select>
-                                          
                                             </mat-form-field>
                                             <mat-form-field style="width: 100%">
                                                 <mat-select placeholder="Payment Mode" formControlName="service_provider_product_payment_mode">
-                                                      <mat-option value="Payment received in Cash.">Payment received in Cash.</mat-option>
+                                                    <mat-option value="Payment received in Cash.">Payment received in
-                                                      <mat-option value="Payment received through Banking channels.">Payment received through Banking channels.</mat-option>
+                                                        Cash.</mat-option>
+                                                    <mat-option value="Payment received through Banking channels.">Payment
+                                                        received through Banking channels.</mat-option>
                                                 </mat-select>
-                                              
                                             </mat-form-field>
                                             <!-- <mat-form-field style="width: 45%" *ngIf="items.get('service_provider_product_payment_type').value == 3">
                                           <input matInput placeholder="No. of Days of Credit Given for Payment Receipt" formControlName="service_provider_product_credit_days">
@@ -323,35 +328,35 @@
                                         <span *ngIf="items.get('service_provider_product_payment_type').value == 3">
                                             <mat-label>No of days of Credit provided to Client for payment</mat-label>
                                             <mat-form-field style="width: 100%">
-                                              <input matInput placeholder="Days From" formControlName="service_provider_product_credit_days_from" type="number">
+                                                <input matInput placeholder="Days From" formControlName="service_provider_product_credit_days_from"
-                                          </mat-form-field>
-                                          <mat-form-field style="width: 100%" >
-                                              <input matInput placeholder="Days To" formControlName="service_provider_product_credit_days_to" type="number">
-                                          </mat-form-field>
-                                        </span>
-                                  <ion-col offset-6 col-3>
-                                      <a (click)="addMoreServiceProduct($event); false" *ngIf="last">
-                                          <ion-icon name="md-add" color="optblue" style="font-size: 22px;"></ion-icon>
-                                      </a>
-                                  </ion-col>
-                                  <ion-col offset-3 col-1>
-                                      <a *ngIf="item.controls.service_products.controls.length > 1" (click)="removeServiceProduct(l)">
-                                          <ion-icon name="md-close" color="optblue" style="font-size: 22px;"></ion-icon>
-                                      </a>
-                                  </ion-col>
-                                  
-                                  </mat-card-content>
-                              </mat-card>
-                          </div>
-                      </div>
-                      
-                      <div fxlayout="row">
-                              <mat-form-field style="width: 80%" *ngIf="spCreditCardFlag">
-                                      <input matInput placeholder="What Percentage of Total Sales is done on Credit ?" formControlName="service_products_total_payments_percent_on_credit"
                                                     type="number">
                                             </mat-form-field>
+                                            <mat-form-field style="width: 100%">
+                                                <input matInput placeholder="Days To" formControlName="service_provider_product_credit_days_to"
+                                                    type="number">
+                                            </mat-form-field>
+                                        </span>
+                                        <ion-buttons end>
+                                            <ion-col col-3 offset-3>
+                                                <a *ngIf="item.controls.service_products.controls.length > 1" (click)="removeServiceProduct(l)">
+                                                    <ion-icon name="md-trash" color="optblue" style="font-size: 22px;"></ion-icon>
+                                                </a>
+                                            </ion-col>
+                                            <ion-col col-2 offset-1>
+                                                <a (click)="addMoreServiceProduct($event); false" *ngIf="last">
+                                                    <ion-icon name="add-circle" color="optblue" style="font-size: 24px;"></ion-icon>
+                                                </a>
+                                            </ion-col>
+                                        </ion-buttons>
+                                    </mat-card-content>
+                                </div>
+                            </div>
+                            <div *ngIf="spCreditCardFlag">
+                                <mat-form-field style="width: 100%">
+                                    <input matInput placeholder="What Percentage of Total Sales is done on Credit ?"
+                                        formControlName="service_products_total_payments_percent_on_credit" type="number">
+                                </mat-form-field>
                             </div>
-                         
                         </div>
                     </div>
                 </mat-card>
@@ -369,96 +374,14 @@
                     <button ion-button full color="optblue" (click)="saveClientInfo(clientInfoForm.value)"> Save</button>
 
                 </ion-row>
+            </div>
         </form>
-</ion-content>
+    </div>
-
+    <div *ngIf="!noRecordsFound">
-
-
-
-<!-- <div formArrayName="clientArray" fxFill>
-        
-    <div *ngFor="let sup of clientForms.controls.clientArray['controls']; let i=index;let last=last;">
         <mat-card>
-      <div [formGroupName]="i">
+            <div fxLayout="row" fxLayoutAlign="start none">
-        <div fxLayout="row wrap" fxLayoutGap="12px" fxLayoutAlign="start none">
+                <div style="margin: 12px; font-size: 18px;"> {{ errorMessage }} </div>
-          <div>
-            <mat-form-field style="width: 100%">
-              <input matInput placeholder="Client Name" formControlName="client_name">
-              <!--<mat-error *ngIf="submitted && f.supplier_name.hasError('required')" class="mat-text-warn">You must Include Supplier Name.</mat-error>--
-            </mat-form-field>
             </div>
-          <div>
-            <mat-form-field style="width: 100%">
-              <input matInput placeholder="Contact Person Name" formControlName="contact_person">
-              <!--<mat-error *ngIf="submitted && f.supplier_name.hasError('required')" class="mat-text-warn">You must Include Supplier Name.</mat-error>--
-            </mat-form-field>
-          </div>
-          <div>
-            <mat-form-field style="width: 100%">
-              <input matInput placeholder="Contact Mobile Number" formControlName="mobile_number" type="number"  maxlength="10">
-              <!--<mat-error *ngIf="submitted && f.supplier_name.hasError('required')" class="mat-text-warn">You must Include Supplier Name.</mat-error>--
-            </mat-form-field>
-          </div>
-        </div>
-        <div fxLayout="row wrap" fxLayoutGap="12px" fxLayoutAlign="start none">
-          <div>
-            <mat-form-field style="width: 100%">
-              <mat-select (selectionChange)="selectedPM($event)" placeholder="Payment Mode" formControlName="payment_mode">
-                <mat-option *ngFor="let pm of m_paymentModeType" [value]="pm.id">{{ pm.name }}</mat-option>
-              </mat-select>
-            </mat-form-field>
-          </div>
-          <div *ngIf="sup.get('payment_mode').value == 1 ||  sup.get('payment_mode').value == 3">
-            <mat-form-field style="width: 100%">
-              <input matInput type="number" placeholder="% of immediate / Advance Payment Purchase to Total Purchase?" formControlName="per_of_immediate_advance_payment">
-              <!--<mat-error *ngIf="submitted && f.supplier_name.hasError('required')" class="mat-text-warn">You must Include Supplier Name.</mat-error>--
-            </mat-form-field>
-          </div>
-          <div *ngIf="sup.get('payment_mode').value == 2  || sup.get('payment_mode').value == 3">
-            <mat-form-field style="width: 100%">
-              <input type="number" matInput placeholder="Credit Period" formControlName="credit_period">
-              <!--<mat-error *ngIf="submitted && f.supplier_name.hasError('required')" class="mat-text-warn">You must Include Supplier Name.</mat-error>--
-            </mat-form-field>
-          </div>
-        </div>
-        <div fxLayout="row" fxLayoutGap="12px" fxLayoutAlign="start none">
-          <div>
-            <mat-form-field style="width: 100%">
-              <mat-select (selectionChange)="selectedFreqPurchase($event)" placeholder="Select Frequency of Purchase" formControlName="frequency_of_purchase">
-                <mat-option *ngFor="let feq of m_freqOfPurchase" [value]="feq.frequency_id">{{ feq.name }}</mat-option>
-              </mat-select>
-            </mat-form-field>
-          </div>
-          <div *ngIf="sup.get('frequency_of_purchase').value == 8">
-            <mat-form-field style="width: 100%">
-              <input matInput placeholder="Others Details" formControlName="freq_purchase_others_text_value">
-              <!--<mat-error *ngIf="submitted && f.supplier_name.hasError('required')" class="mat-text-warn">You must Include Supplier Name.</mat-error>--
-            </mat-form-field>
-          </div>
-
-          <div fxFlex="20">
-            <!-- <span *ngIf="clientForms.controls.clientArray.controls.length > 1" (click)="removeLanguage(i)">
-                 <button mat-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Delete" matTooltipPosition="above"><mat-icon>delete</mat-icon></button>
-               </span> --
-          </div>
-        </div>
-      </div>
-      <ion-col offset-6 col-3>
-          <a (click)="addClientDetails()" *ngIf="last">
-              <ion-icon name="md-add" color="optblue" style="font-size: 22px;"></ion-icon>
-          </a>
-      </ion-col>
-      <ion-col offset-3 col-1>
-          <a (click)="removeClientDetails(i)">
-              <ion-icon name="md-close" color="optblue" style="font-size: 22px;"></ion-icon>
-          </a>
-      </ion-col>
         </mat-card>
-    <br/>
     </div>
-    </div>
+</ion-content>
-    <ion-row>
-            
-        <button ion-button full color="optblue" (click)="saveclientDetails(clientForms.value)"> Save</button>
-        <!-- </ion-buttons> --
-    </ion-row> -->

src/pages/pd-question/pd-question-business-group/pd-question-client-info/pd-question-client-info.scss

@@ -2,6 +2,9 @@ page-pd-question-client-info {
     mat-hint{
         font-size:12px;
     }
+    .scroll-content{
+        background-color: #eee;
+      }
     .mat-card{
         margin-bottom: 15px;
         border-radius: 10px !important;

src/pages/pd-question/pd-question-business-group/pd-question-client-info/pd-question-client-info.ts

@@ -530,8 +530,7 @@ if(answerFormValues.service_provider_details[0]==null){
 
     //To Remove The "Null" With Key also
     Object.keys(answerFormValues).forEach((key) => { if (answerFormValues[key] === null || answerFormValues[key] === undefined || answerFormValues[key] === '') { delete answerFormValues[key] }; });
-        this.qustCat.saveForm(answerFormValues).subscribe(responsed=>
+    this.qustCat.saveForm(answerFormValues).subscribe(responsed => {
-        {
       if (responsed['status'] == 200) {
         this.navCtrl.pop();
         this.toast.pdTriggerappmessage('Record Saved Successfully.!');
@@ -597,135 +596,4 @@ checkCard(e,flag,index){
 
   }
 
-
 }
-//paymentModeTextBox: any;
-//clientDataArray:FormArray;
-//apiLoadFinish:boolean = false;
-// this.clientForms  = this.fb.group({
-//   clientArray:this.fb.array([])
-// });
-// this.getClientDetails();
-// this.getdropdown();
-
-
-// createClientItem()
-//   {
-//     return this.fb.group(
-//       {
-//         client_name: [''],
-//       contact_person: [''],
-//       mobile_number: [''],
-//       payment_mode: [''],
-//       per_of_immediate_advance_payment:[''],
-//       credit_period:[''],
-//       frequency_of_purchase: [''],
-//       freq_purchase_others_text_value: ['']
-//       })
-//   }
-//   selectedPM(e) {
-//     this.paymentModeTextBox = e.value;
-//     // this.f.supplier_details.controls.get('payment_mode_value');
-//   }
-//   public freqPurchaseTextBox: number;
-//   selectedFreqPurchase(e){
-//      this.freqPurchaseTextBox = e.value;
-//   }
-//   getdropdown()
-//   {
-//     this.qustCat.getcommondrop('FREQUENCY').subscribe(
-//       data => {
-//         this.m_freqOfPurchase = data['records'].filter(data => data.isactive == 1);
-//       },
-//       error => {
-//         // this.notifier.notify('warning', 'No Category Records Found.!');
-//         // this.m_assets_type = "No Category Records Found.";
-//       }
-//     )
-//     this.qustCat.getcommondrop('PAYMENTMODE').subscribe(
-//       data => {
-//         this.m_paymentModeType = data['records'].filter(data => data.isactive == 1);
-//       },
-//       error => {
-//         // this.notifier.notify('warning', 'No Category Records Found.!');
-//         // this.m_assets_type = "No Category Records Found.";
-//       }
-//     )
-//   }
-//   addClientDetails()
-//   {
-//     this.clientDataArray = this.clientForms.get('clientArray') as FormArray;
-//     this.clientDataArray.push(this.createClientItem());
-//   }
-//   removeClientDetails(i)
-//   {
-    
-//     if(this.clientDataArray.length==1)
-//     {
-//       this.clientForms.controls['clientArray'].reset();
-//     }else{
-//     this.clientDataArray = this.clientForms.get('clientArray') as FormArray;    
-//     this.clientDataArray.removeAt(i);
-//   }
-//   }
-
-//   saveclientDetails(answerData)
-// {
-//   let records:any ={};
-
-//         records.pdid = this.pdDetails.pd_id;
-//         records.formid = this.FormId.form_id;
-//         records.fk_createdby = this.users;
-        
-//         records.client_details = answerData.clientArray;
-
-//       this.qustCat.saveForm(records).subscribe(res=>
-//         {
-//           if(res['dataStatus']==true)
-//       {
-//         this.toast.pdTriggerappmessage('Record Saved Successfully.!');
-//         this.navCtrl.pop();
-//       }
-//         });
-
-      
-// }
-//   getClientDetails()
-//   {
-//     let records = {'pd_id':this.pdDetails.pd_id,'pd_form_id':this.FormId.form_id}
-//     let clientData:any = [];
-//     this.qustCat.retiverForm(records).subscribe(
-//       data => {
-//           if(data['dataStatus']==true)
-//           {
-//             let clientDetails = data['records'];
-
-//                 clientData = Object.keys(data['records'].client_details).map(function(key) {
-           
-//             return clientDetails.client_details[key];
-//         });
-//         this.clientDataArray = this.clientForms.get('clientArray') as FormArray;
-          
-//         if(clientData.length ==0)
-//         {
-          
-//           this.clientDataArray.push(this.createClientItem());          
-//         }else
-//         {
-
-//           clientData.forEach(datas=>
-//             {
-//               this.clientDataArray.push(this.createClientItem());
-//             })
-            
-//         this.clientForms.controls['clientArray'].setValue(clientData);
-//               this.apiLoadFinish = true;
-//         }
-//       }else{
-
-//         this.addClientDetails();
-//         this.apiLoadFinish = true;
-//       }
-//   }
-// );
-//   }

src/pages/pd-question/pd-question-business-group/pd-question-stock-info/pd-question-stock-info.html

@@ -1,25 +1,23 @@
 <ion-header>
-
     <ion-navbar color="optblue">
         <button ion-button menuToggle>
             <ion-icon name="menu"></ion-icon>
         </button>
         <ion-title>{{formDetails.form_name}}</ion-title>
     </ion-navbar>
-
 </ion-header>
-
+<ion-content padding>
-<ion-content padding *ngIf="noRecordsFound">
+    <div *ngIf="noRecordsFound">
-
         <form [formGroup]="stockForm">
-        
+            <div fxLayout="row" fxLayoutAlign="start none">
                 <mat-card *ngIf="manufacturingForm">
-                                    <mat-card-title>Manufacturing Stock Details</mat-card-title>
+                    <mat-card-title><h5>Manufacturing Stock Details</h5></mat-card-title>
                     <div formArrayName="manufacturing_details">
-                                        <div *ngFor="let md of stockForm.controls.manufacturing_details['controls']; let i=index" [formGroupName]="i">        
+                        <div *ngFor="let md of stockForm.controls.manufacturing_details['controls']; let i=index"
+                            [formGroupName]="i">
                             <div formArrayName="manufacturing_raw_materials">
-                                                <div *ngFor="let mrm of md.controls.manufacturing_raw_materials['controls']; let a=index; let last=last" [formGroupName]="a">    
+                                <div *ngFor="let mrm of md.controls.manufacturing_raw_materials['controls']; let a=index; let last=last"
-                                                    <mat-card>
+                                    [formGroupName]="a">
                                     <mat-card-subtitle>Raw Material #{{a+1}}</mat-card-subtitle>
                                     <mat-card-content class="matcard">
                                         <mat-form-field style="width:100%">
@@ -34,62 +32,59 @@
                                         </mat-form-field>
                                         <span *ngIf="mrm.get('stock_observed').value == 'yes'">
                                             <mat-form-field style="width:100%">
-                                                                        <input matInput autocomplete="off" placeholder="Estimated Quantity" formControlName="raw_quantity" type="number">
+                                                <input matInput autocomplete="off" placeholder="Estimated Quantity"
+                                                    formControlName="raw_quantity" type="number">
                                             </mat-form-field>
                                             <mat-form-field style="width:100%">
-                                                                        <mat-select placeholder="Unit of Mearsurement"
+                                                <mat-select placeholder="Unit of Mearsurement" formControlName="raw_uom">
-                                                                            formControlName="raw_uom"  >
                                                     <mat-option value="{{uom.uom_id}}" *ngFor="let uom of uomData">{{uom.name}}</mat-option>
                                                 </mat-select>
                                             </mat-form-field>
-                                                                    <mat-form-field *ngIf="mrm.get('raw_uom').value == 1" style="width:28%">
+                                            <mat-form-field *ngIf="mrm.get('raw_uom').value == 1" style="width:100%">
-                                                                        <input matInput autocomplete="off" placeholder="Specify UOM" formControlName="other_uom" >
+                                                <input matInput autocomplete="off" placeholder="Specify UOM"
+                                                    formControlName="other_uom">
                                             </mat-form-field>
                                             <mat-form-field style="width:100%">
-                                                                        <input matInput autocomplete="off" placeholder="Estimated Value of Stock Observed" formControlName="raw_value" type="number" (keyup)="inWords($event.target.value,1,a)" >
+                                                <input matInput autocomplete="off" placeholder="Estimated Value of Stock Observed"
-                                                                        <mat-hint align="start" style="font-size:70%" *ngIf="mrm.get('raw_value').value != ''">{{"&#8377;"}} {{M_rawValueInWords[a]}} Only</mat-hint> 
+                                                    formControlName="raw_value" type="number" (keyup)="inWords($event.target.value,1,a)">
+                                                <mat-hint align="start" style="font-size:70%" *ngIf="mrm.get('raw_value').value != ''">{{"&#8377;"}}
+                                                    {{M_rawValueInWords[a]}} Only</mat-hint>
                                             </mat-form-field>
-                                                                    
                                             <mat-form-field style="width:100%">
-                                                                        <mat-select placeholder="Is the stock of Raw Materials observed, sufficient considering the size of operations" formControlName="is_sufficiant_raw"  (selectionChange)="checkComments($event.value,1,a)">
+                                                <mat-select placeholder="Is the stock of Raw Materials observed, sufficient considering the size of operations"
+                                                    formControlName="is_sufficiant_raw" (selectionChange)="checkComments($event.value,1,a)">
                                                     <mat-option value="yes">Yes</mat-option>
                                                     <mat-option value="no">No</mat-option>
                                                 </mat-select>
                                             </mat-form-field>
-                                                                    <mat-form-field *ngIf="mrmCommentFlag[a]" appearance="outline" style="width: 90%">
+                                            <mat-form-field *ngIf="mrmCommentFlag[a]" appearance="outline" style="width: 100%">
-                                                                    
+                                                <mat-label> <i>Please comment on the stock level observed?</i>
-                                                                        <mat-label> <i>Please comment on the stock level observed?</i> </mat-label>
+                                                </mat-label>
-                                                                        <textarea matInput autocomplete="off" placeholder="Please comment on the stock level observed" formControlName="rawmaterial_remarks"></textarea>
+                                                <textarea matInput autocomplete="off" placeholder="Please comment on the stock level observed"
+                                                    formControlName="rawmaterial_remarks"></textarea>
                                             </mat-form-field>
                                         </span>
                                     </mat-card-content>
-                                                                  <!-- <ion-col offset-6 col-3>
-                                                                    <a (click)="addMoreRawMaterials($event); false" *ngIf="last">
-                                                                    <ion-icon name="md-add" color="optblue"  style="font-size: 22px;"></ion-icon></a> 
-                                                                  </ion-col>
-                                                                  <ion-col offset-1 col-3>
-                                                                      <a *ngIf="item.controls.main_raw_materials.controls.length > 1" (click)="removeRawMaterials(l)">
-                                                                      <ion-icon name="md-close" color="optblue"  style="font-size: 22px;"></ion-icon></a> 
-                                                                  </ion-col> -->
                                     <mat-card-actions>
-                                                                    <ion-col offset-6 col-3>
+                                        <ion-buttons end>
-                                                                        <a (click)="addRawMaterials(1)" *ngIf="last">
+                                            <ion-col col-3 offset-3>
-                                                                        <ion-icon name="md-close" name="md-add" color="optblue"  style="font-size: 22px;"></ion-icon></a> 
-                                                                    </ion-col>
-                                                                    <ion-col offset-3 col-1>
                                                 <a (click)="deleteRawMaterials(a,1)" *ngIf="md.controls.manufacturing_raw_materials.controls.length>1">
-                                                                            <ion-icon name="md-close" color="optblue"  style="font-size: 22px;"></ion-icon></a> 
+                                                    <ion-icon name="md-trash" color="optblue" style="font-size: 22px;"></ion-icon>
+                                                </a>
                                             </ion-col>
+                                            <ion-col col-2 offset-1>
+                                                <a (click)="addRawMaterials(1)" *ngIf="last">
+                                                    <ion-icon name="add-circle" color="optblue" style="font-size: 24px;"></ion-icon>
+                                                </a>
+                                            </ion-col>
+                                        </ion-buttons>
                                     </mat-card-actions>
-                                                    </mat-card>
                                 </div>
                             </div>
-        
                             <div formArrayName="manufacturing_finished_goods">
-                                                <div *ngFor="let mfg of md.controls.manufacturing_finished_goods['controls']; let b=index;let last=last" [formGroupName]="b">    
+                                <div *ngFor="let mfg of md.controls.manufacturing_finished_goods['controls']; let b=index;let last=last"
-                                                        <mat-card>
+                                    [formGroupName]="b">
                                     <mat-card-subtitle>Finished Goods #{{b+1}}</mat-card-subtitle>
-                                                        
                                     <mat-card-content class="matcard">
                                         <mat-form-field style="width:100%">
                                             <input matInput autocomplete="off" placeholder="Name" formControlName="goods_name">
@@ -102,73 +97,66 @@
                                         </mat-form-field>
                                         <span *ngIf="mfg.get('goods_observed').value == 'yes'">
                                             <mat-form-field style="width:100%">
-                                                                    <input matInput autocomplete="off" placeholder="Estimated Quantity" formControlName="goods_quantity" type="number">
+                                                <input matInput autocomplete="off" placeholder="Estimated Quantity"
+                                                    formControlName="goods_quantity" type="number">
                                             </mat-form-field>
                                             <mat-form-field style="width:100%">
-                                                                        <mat-select placeholder="Unit of Mearsurement"
+                                                <mat-select placeholder="Unit of Mearsurement" formControlName="goods_uom">
-                                                                            formControlName="goods_uom"  >
                                                     <mat-option value="{{uom.uom_id}}" *ngFor="let uom of uomData">{{uom.name}}</mat-option>
                                                 </mat-select>
                                             </mat-form-field>
-                                                                <mat-form-field *ngIf="mfg.get('goods_uom').value == 1" style="width:28%">
+                                            <mat-form-field *ngIf="mfg.get('goods_uom').value == 1" style="width:100%">
-                                                                        <input matInput autocomplete="off" placeholder="Specify  UOM" formControlName="goods_other_uom" >
+                                                <input matInput autocomplete="off" placeholder="Specify  UOM"
+                                                    formControlName="goods_other_uom">
                                             </mat-form-field>
                                             <mat-form-field style="width:100%">
-                                                                    <input matInput autocomplete="off" placeholder="Estimated Value of Stock Observed" formControlName="goods_value" type="number" (keyup)="inWords($event.target.value,2,b)"  >
+                                                <input matInput autocomplete="off" placeholder="Estimated Value of Stock Observed"
-                                                                        <mat-hint align="start" style="font-size:70%" *ngIf="mfg.get('goods_value').value != ''">{{"&#8377;"}} {{M_goodsValueInWords[b]}} Only</mat-hint> 
+                                                    formControlName="goods_value" type="number" (keyup)="inWords($event.target.value,2,b)">
+                                                <mat-hint align="start" style="font-size:70%" *ngIf="mfg.get('goods_value').value != ''">{{"&#8377;"}}
+                                                    {{M_goodsValueInWords[b]}} Only</mat-hint>
                                             </mat-form-field>
-                                                                
                                             <mat-form-field style="width:100%">
-                                                                    <mat-select placeholder="Is the stock of Finished Goods Observed sufficient considering the size of operations?" formControlName="is_sufficiant_goods"  (selectionChange)="checkComments($event.value,2,b)">
+                                                <mat-select placeholder="Is the stock of Finished Goods Observed sufficient considering the size of operations?"
+                                                    formControlName="is_sufficiant_goods" (selectionChange)="checkComments($event.value,2,b)">
                                                     <mat-option value="yes">Yes</mat-option>
                                                     <mat-option value="no">No</mat-option>
                                                 </mat-select>
                                             </mat-form-field>
-                                                                <mat-form-field *ngIf="mfgCommentFlag[b]" appearance="outline" style="width: 90%">
+                                            <mat-form-field *ngIf="mfgCommentFlag[b]" appearance="outline" style="width: 100%">
-                                                                    <mat-label class="highlight"> <i>Please comment on the finished goods stock level observed?</i> </mat-label>
+                                                <mat-label class="highlight"> <i>Please comment on the finished goods
-                                                                    <textarea matInput autocomplete="off" placeholder="Please comment on the finished goods observed" formControlName="finishedgoods_remarks"></textarea>
+                                                        stock level observed?</i> </mat-label>
+                                                <textarea matInput autocomplete="off" placeholder="Please comment on the finished goods observed"
+                                                    formControlName="finishedgoods_remarks"></textarea>
                                             </mat-form-field>
                                         </span>
-                                                        
                                     </mat-card-content>
                                     <mat-card-actions>
-                                                                    <ion-col offset-6 col-3>
+                                        <ion-buttons end>
-                                                                        <a (click)="addGoods(1)" *ngIf="last">
+                                            <ion-col col-3 offset-3>
-                                                                        <ion-icon name="md-close" name="md-add" color="optblue"  style="font-size: 22px;"></ion-icon></a> 
-                                                                    </ion-col>
-                                                                    <ion-col offset-3 col-1>
                                                 <a (click)="deleteGoods(b,1)" *ngIf="md.controls.manufacturing_finished_goods.controls.length>1">
-                                                                            <ion-icon name="md-close" color="optblue"  style="font-size: 22px;"></ion-icon></a> 
+                                                    <ion-icon name="md-trash" color="optblue" style="font-size: 22px;"></ion-icon>
+                                                </a>
                                             </ion-col>
-                                                                <!-- <div align="right">
+                                            <ion-col col-2 offset-1>
-                                                                <button type="button" mat-raised-button mat-icon-button (click)="deleteGoods(b,1)"
+                                                <a (click)="addGoods(1)" *ngIf="last">
-                                                                matTooltip="Delete" matTooltipPosition="above" class="mr-1 mb-1 hover-icon" *ngIf="md.controls.manufacturing_finished_goods.controls.length>1">
+                                                    <ion-icon name="add-circle" color="optblue" style="font-size: 24px;"></ion-icon>
-                                                                <mat-icon>delete</mat-icon>
+                                                </a>
-                                                                </button>
+                                            </ion-col>
-                                                                </div>
+                                        </ion-buttons>
-                                                                <div align="center">
-                                                                <button type="button" mat-flat-button (click)="addGoods(1)"
-                                                                matTooltip="Add More" matTooltipPosition="left" color="primary" *ngIf="last">
-                                                                <strong>Add More Finished Goods </strong>
-                                                                </button> 
-                                                                </div> -->
                                     </mat-card-actions>
-                                                    </mat-card>
                                 </div>
                             </div>
                         </div>
                     </div>
                 </mat-card>
-                            
                 <mat-card *ngIf="retailForm">
-                                    <mat-card-title>Retail Trading Details</mat-card-title>
+                    <mat-card-title><h5>Retail Trading Details</h5></mat-card-title>
                     <div formArrayName="retail_details">
-                                        <div *ngFor="let rd of stockForm.controls.retail_details['controls']; let j=index" [formGroupName]="j">
+                        <div *ngFor="let rd of stockForm.controls.retail_details['controls']; let j=index"
-        
+                            [formGroupName]="j">
                             <div formArrayName="retail_traded_goods">
-                                                <div *ngFor="let item of rd.controls.retail_traded_goods['controls']; let e=index;let last =last" [formGroupName]="e">    
+                                <div *ngFor="let item of rd.controls.retail_traded_goods['controls']; let e=index;let last =last"
-                                                       
+                                    [formGroupName]="e">
-                                                        <mat-card>
                                     <mat-card-subtitle>Traded Goods #{{e+1}}</mat-card-subtitle>
                                     <mat-card-content class="matcard">
                                         <mat-form-field style="width:100%">
@@ -182,62 +170,67 @@
                                         </mat-form-field>
                                         <span *ngIf="item.get('traded_goods_observed').value == 'yes'">
                                             <mat-form-field style="width:100%">
-                                                                        <input matInput autocomplete="off" placeholder="Estimated Quantity" formControlName="traded_goods_quantity" type="number">
+                                                <input matInput autocomplete="off" placeholder="Estimated Quantity"
+                                                    formControlName="traded_goods_quantity" type="number">
                                             </mat-form-field>
                                             <mat-form-field style="width:100%">
-                                                                            <mat-select placeholder="Unit of Mearsurement"
+                                                <mat-select placeholder="Unit of Mearsurement" formControlName="traded_goods_uom">
-                                                                                formControlName="traded_goods_uom"  >
                                                     <mat-option value="{{uom.uom_id}}" *ngFor="let uom of uomData">{{uom.name}}</mat-option>
                                                 </mat-select>
                                             </mat-form-field>
-                                                                        <mat-form-field *ngIf="item.get('traded_goods_uom').value == 1" style="width:28%">
+                                            <mat-form-field *ngIf="item.get('traded_goods_uom').value == 1" style="width:100%">
-                                                                            <input matInput autocomplete="off" placeholder="Specify  UOM" formControlName="traded_goods_other_uom" >
+                                                <input matInput autocomplete="off" placeholder="Specify  UOM"
+                                                    formControlName="traded_goods_other_uom">
                                             </mat-form-field>
                                             <mat-form-field style="width:100%">
-                                                                        <input matInput autocomplete="off" placeholder="Estimated Value of Stock Observed" formControlName="estimated_traded_goods_value" type="number"  (keyup)="inWords($event.target.value,3,e)" >
+                                                <input matInput autocomplete="off" placeholder="Estimated Value of Stock Observed"
-                                                                        <mat-hint align="start" style="font-size:70%" *ngIf="item.get('estimated_traded_goods_value').value != ''">{{"&#8377;"}} {{R_tradedGoodsValueInWords[e]}} Only</mat-hint>
+                                                    formControlName="estimated_traded_goods_value" type="number"
+                                                    (keyup)="inWords($event.target.value,3,e)">
+                                                <mat-hint align="start" style="font-size:70%" *ngIf="item.get('estimated_traded_goods_value').value != ''">{{"&#8377;"}}
+                                                    {{R_tradedGoodsValueInWords[e]}} Only</mat-hint>
                                             </mat-form-field>
                                             <mat-form-field style="width:100%">
-        
+                                                <mat-select placeholder="Is the stock of Traded goods observed ?"
-                                                                        <mat-select placeholder="Is the stock of Traded goods observed ?" formControlName="is_sufficiant_traded_goods"  (selectionChange)="checkComments($event.value,3,e)">
+                                                    formControlName="is_sufficiant_traded_goods" (selectionChange)="checkComments($event.value,3,e)">
                                                     <mat-option value="yes">Yes</mat-option>
                                                     <mat-option value="no">No</mat-option>
                                                 </mat-select>
                                             </mat-form-field>
-                                                                    <mat-form-field *ngIf="rtrdCommentFlag[e]"  appearance="outline" style="width: 90%">
+                                            <mat-form-field *ngIf="rtrdCommentFlag[e]" appearance="outline" style="width: 100%">
-                                                                        
+                                                <mat-label> <i>Please comment on the Traded Goods stock level observed?</i>
-                                                                        <mat-label> <i>Please comment on the Traded Goods stock level observed?</i> </mat-label>
+                                                </mat-label>
-                                                                        <textarea matInput autocomplete="off" placeholder="Please comment on the traded goods stock level observed" formControlName="traded_goods_remarks"></textarea>
+                                                <textarea matInput autocomplete="off" placeholder="Please comment on the traded goods stock level observed"
+                                                    formControlName="traded_goods_remarks"></textarea>
                                             </mat-form-field>
                                         </span>
-                                                            
-                                                            
                                     </mat-card-content>
                                     <mat-card-actions>
-                                                                <ion-col offset-6 col-3>
+                                        <ion-buttons end>
-                                                                        <a (click)="addTradedGoods(1)" *ngIf="last">
+                                            <ion-col col-3 offset-3>
-                                                                        <ion-icon name="md-close" name="md-add" color="optblue"  style="font-size: 22px;"></ion-icon></a> 
-                                                                </ion-col>
-                                                                <ion-col offset-3 col-1>
                                                 <a (click)="deleteTradedGoods(e,1)" *ngIf="rd.controls.retail_traded_goods.controls.length>1">
-                                                                            <ion-icon name="md-close" color="optblue"  style="font-size: 22px;"></ion-icon></a> 
+                                                    <ion-icon name="md-trash" color="optblue" style="font-size: 22px;"></ion-icon>
+                                                </a>
                                             </ion-col>
+                                            <ion-col col-2 offset-1>
+                                                <a (click)="addTradedGoods(1)" *ngIf="last">
+                                                    <ion-icon name="add-circle" color="optblue" style="font-size: 24px;"></ion-icon>
+                                                </a>
+                                            </ion-col>
+                                        </ion-buttons>
                                     </mat-card-actions>
-                                                    </mat-card>
-                                                                       
                                 </div>
                             </div>
                         </div>
                     </div>
                 </mat-card>
-                               
                 <mat-card *ngIf="tradingForm">
-                                    <mat-card-title>Wholesale Trading Details</mat-card-title>
+                    <mat-card-title><h5>Wholesale Trading Details</h5></mat-card-title>
                     <div formArrayName="trade_details">
-                                        <div *ngFor="let td of stockForm.controls.trade_details['controls']; let k=index" [formGroupName]="k">
+                        <div *ngFor="let td of stockForm.controls.trade_details['controls']; let k=index"
+                            [formGroupName]="k">
                             <div formArrayName="trading_traded_goods">
-                                                <div *ngFor="let tradetg of td.controls.trading_traded_goods['controls']; let g=index;let last = last" [formGroupName]="g">    
+                                <div *ngFor="let tradetg of td.controls.trading_traded_goods['controls']; let g=index;let last = last"
-                                                        <mat-card>
+                                    [formGroupName]="g">
                                     <mat-card-subtitle>Traded Goods #{{g+1}}</mat-card-subtitle>
                                     <mat-card-content class="matcard">
                                         <mat-form-field style="width:100%">
@@ -251,202 +244,82 @@
                                         </mat-form-field>
                                         <span *ngIf="tradetg.get('traded_goods_observed').value == 'yes'">
                                             <mat-form-field style="width:100%">
-                                                                                        <input matInput autocomplete="off" placeholder="Estimated Quantity" formControlName="traded_goods_quantity" type="number">
+                                                <input matInput autocomplete="off" placeholder="Estimated Quantity"
+                                                    formControlName="traded_goods_quantity" type="number">
                                             </mat-form-field>
                                             <mat-form-field style="width:100%">
-                                                                                            <mat-select placeholder="Unit of Mearsurement"
+                                                <mat-select placeholder="Unit of Mearsurement" formControlName="traded_goods_uom">
-                                                                                                formControlName="traded_goods_uom"  >
                                                     <mat-option value="{{uom.uom_id}}" *ngFor="let uom of uomData">{{uom.name}}</mat-option>
                                                 </mat-select>
                                             </mat-form-field>
-                                                                                        <mat-form-field *ngIf="tradetg.get('traded_goods_uom').value == 1" style="width:28%">
+                                            <mat-form-field *ngIf="tradetg.get('traded_goods_uom').value == 1" style="width:100%">
-                                                                                            <input matInput autocomplete="off" placeholder="Specify  UOM" formControlName="traded_goods_other_uom" >
+                                                <input matInput autocomplete="off" placeholder="Specify  UOM"
+                                                    formControlName="traded_goods_other_uom">
                                             </mat-form-field>
                                             <mat-form-field style="width:100%">
-                                                                                        <input matInput autocomplete="off" placeholder="Estimated Value of Stock Observed" formControlName="estimated_traded_goods_value" type="number" (keyup)="inWords($event.target.value,4,g)">
+                                                <input matInput autocomplete="off" placeholder="Estimated Value of Stock Observed"
-                                                                                        <mat-hint align="start" style="font-size:70%" *ngIf="tradetg.get('estimated_traded_goods_value').value != ''">{{"&#8377;"}} {{T_tradedGoodsValueInWords[g]}} Only</mat-hint> 
+                                                    formControlName="estimated_traded_goods_value" type="number"
+                                                    (keyup)="inWords($event.target.value,4,g)">
+                                                <mat-hint align="start" style="font-size:70%" *ngIf="tradetg.get('estimated_traded_goods_value').value != ''">{{"&#8377;"}}
+                                                    {{T_tradedGoodsValueInWords[g]}} Only</mat-hint>
                                             </mat-form-field>
-                                                                                    
                                             <mat-form-field style="width:100%">
-                                                                                    
+                                                <mat-select placeholder="Is the stock of Traded goods observed ?"
-                                                                                        <mat-select placeholder="Is the stock of Traded goods observed ?" formControlName="is_sufficiant_traded_goods"  (selectionChange)="checkComments($event.value,4,g)">
+                                                    formControlName="is_sufficiant_traded_goods" (selectionChange)="checkComments($event.value,4,g)">
                                                     <mat-option value="yes">Yes</mat-option>
                                                     <mat-option value="no">No</mat-option>
                                                 </mat-select>
                                             </mat-form-field>
-                                                                                    <mat-form-field *ngIf="wtrdCommentFlag[g]" appearance="outline" style="width: 90%">
+                                            <mat-form-field *ngIf="wtrdCommentFlag[g]" appearance="outline" style="width: 100%">
-                                                                                    
+                                                <mat-label> <i>Please comment on the Traded Goods stock level observed?</i>
-                                                                                            <mat-label> <i>Please comment on the Traded Goods stock level observed?</i> </mat-label>
+                                                </mat-label>
-                                                                                            <textarea matInput autocomplete="off" placeholder="Please comment on the traded goods stock level observed" formControlName="traded_goods_remarks"></textarea>
+                                                <textarea matInput autocomplete="off" placeholder="Please comment on the traded goods stock level observed"
+                                                    formControlName="traded_goods_remarks"></textarea>
                                             </mat-form-field>
                                         </span>
-                                                                    
                                     </mat-card-content>
                                     <mat-card-actions>
-                                                                        <ion-col offset-6 col-3>
+                                        <ion-buttons end>
-                                                                                <a (click)="addTradedGoods(2)" *ngIf="last">
+                                            <ion-col col-3 offset-3>
-                                                                                <ion-icon name="md-close" name="md-add" color="optblue"  style="font-size: 22px;"></ion-icon></a> 
-                                                                        </ion-col>
-                                                                        <ion-col offset-3 col-1>
                                                 <a (click)="deleteTradedGoods(g,2)" *ngIf="td.controls.trading_traded_goods.controls.length>1">
-                                                                                    <ion-icon name="md-close" color="optblue"  style="font-size: 22px;"></ion-icon></a> 
+                                                    <ion-icon name="md-trash" color="optblue" style="font-size: 22px;"></ion-icon>
+                                                </a>
                                             </ion-col>
-                                                                        <!-- <div align="center">
+                                            <ion-col col-2 offset-1>
-                                                                        <button type="button" mat-flat-button (click)="addTradedGoods(2)"
+                                                <a (click)="addTradedGoods(2)" *ngIf="last">
-                                                                        matTooltip="Add More" matTooltipPosition="left" color="primary" *ngIf="last">
+                                                    <ion-icon name="add-circle" color="optblue" style="font-size: 24px;"></ion-icon>
-                                                                        <strong>Add More Traded Goods </strong>
+                                                </a>
-                                                                        </button> 
+                                            </ion-col>
-                                                                        </div>
+                                        </ion-buttons>
-                                                                        <div align="right">
-                                                                        <button type="button" mat-raised-button mat-icon-button (click)="deleteTradedGoods(g,2)"
-                                                                                                    matTooltip="Delete Traded Goods" matTooltipPosition="above" class="mr-1 mb-1 hover-icon" *ngIf="td.controls.trading_traded_goods.controls.length>1">
-                                                                        <mat-icon>delete</mat-icon>
-                                                                        </button>
-                                                                        </div> -->
                                     </mat-card-actions>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
                 </mat-card>
-                                                </div>
-                                            </div>
-                                        </div>
-                                    </div>
-        
-                            </mat-card>
-        
                 <mat-card *ngIf="serviceProviderForm">
-                                    <mat-card-title>Service Provider Details</mat-card-title>
+                    <mat-card-title><h5>Service Provider Details</h5></mat-card-title>
                     <div style="text-align: center; margin: 12px;">Service Provider Details Not applicable here !!</div>
                 </mat-card>
-                            
                 <mat-card>
                     <mat-form-field style="width: 100%">
                         <mat-label>Remarks</mat-label>
                         <textarea matInput autocomplete="off" placeholder="Remarks" formControlName="stock_remarks"></textarea>
                     </mat-form-field>
                 </mat-card>
-     
-            
-        
                 <mat-dialog-actions>
-            
                     <ion-row>
                         <button ion-button full color="optblue" (click)="saveStockInfo(stockForm.value)"> Save</button>
                     </ion-row>
-
-            <!-- <div fxFlex="40" align="end">
-                <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Save" matTooltipPosition="above" type="submit"><mat-icon>save</mat-icon></button>
-            </div> -->
                 </mat-dialog-actions>
-        
+            </div>
-        
         </form>
-    
+    </div>
-</ion-content>
+    <div *ngIf="!noRecordsFound">
-<ion-content padding *ngIf="!noRecordsFound">
+        <mat-card *ngIf="!noRecordsFound">
+            <div fxLayout="row" fxLayoutAlign="start none" *ngIf="!noRecordsFound">
                 <div style="margin: 12px; font-size: 18px;"> {{ errorMessage }} </div>
+            </div>
+        </mat-card>
+    </div>
 </ion-content>
-
-<!--<mat-card>
-        <mat-card-header>
-            <h3>Raw Materials</h3>
-        </mat-card-header>
-        <div formArrayName="raw_materials">
-            <div *ngFor="let details of stockForm.controls.raw_materials['controls']; let i=index;let last=last;"
-                 [formGroupName]="i">
-                <mat-card-content class="matcard">
-                    <mat-form-field style="width:100%">
-                        <input matInput placeholder="Name" formControlName="raw_name">
-                    </mat-form-field>
-                    <mat-form-field style="width:100%">
-                            <mat-select placeholder="is the Stock is Observed ?"
-                                        formControlName="stock_observed"  required>
-                                <mat-option value="yes" >Yes</mat-option>
-                                <mat-option value="no" >No</mat-option>
-                            </mat-select>
-                        </mat-form-field>
-                        <div *ngIf="details.get('stock_observed').value == 'no'" >
-                        <mat-form-field style="width:100%">
-                            <input matInput placeholder="Estimated Quantity" formControlName="raw_quantity" required>
-                        </mat-form-field>
-                        <mat-form-field style="width:100%">
-                            <mat-select placeholder="Unit of Mearsurement"
-                                        formControlName="raw_uom"  required>
-                                <mat-option value="{{uom.uom_id}}" *ngFor="let uom of uomData">{{uom.name}}</mat-option>
-                            </mat-select>
-                        </mat-form-field>
-                        <mat-form-field style="width:100%" *ngIf="details.get('raw_uom').value == 61" >
-                            <input matInput placeholder="Specify Other UOM" formControlName="other_uom" required>
-                        </mat-form-field>
-                        <mat-form-field style="width:100%">
-                            <input matInput placeholder="Value" formControlName="raw_value" type="number"  required>
-                        </mat-form-field>
-                        <mat-form-field style="width:100%">
-                            <input matInput placeholder="Value of raw materials as per latest financial Statements" formControlName="rawmaterial_value" type="number" required>
-                        </mat-form-field>
-                        <mat-form-field style="width:100%">
-                            <input matInput placeholder="Is the stock of raw materials observed ?" formControlName="is_sufficiant_raw"  required>
-                        </mat-form-field>
-                    </div>
-                    <ion-buttons end>
-                      <ion-col offset-3 col-3>
-                        <a (click)="addRawMaterials()" *ngIf="last">
-                        <ion-icon name="md-add" color="optblue"  style="font-size: 22px;"></ion-icon></a> 
-                        </ion-col>
-                        <ion-col offset-3 col-1>
-                        <a (click)="deleteRawMaterials(i)" >
-                            <ion-icon name="md-close" color="optblue"  style="font-size: 22px;"></ion-icon></a> 
-                          </ion-col>
-                      </ion-buttons>
-                </mat-card-content>
-            </div>
-        </div>
-    </mat-card>
-    <br/>
-    <mat-card>
-        <mat-card-header>
-            <h3>Finished Goods</h3>
-        </mat-card-header>
-        <div formArrayName="finished_goods">
-            <div *ngFor="let details of stockForm.controls.finished_goods['controls']; let i=index;let last=last;"
-                 [formGroupName]="i">
-                <mat-card-content class="matcard">
-                    <mat-form-field style="width: 100%">
-                        <input matInput placeholder="Name" formControlName="goods_name">
-                    </mat-form-field>
-                    <mat-form-field style="width: 100%">
-                        <input matInput placeholder="Quantity" formControlName="goods_quantity">
-                    </mat-form-field>
-                    <mat-form-field style="width: 100%">
-                        <input matInput placeholder="Value" formControlName="goods_value">
-                    </mat-form-field>
-                    <mat-form-field style="width:100%">
-                        <input matInput placeholder="Value of finished goods as per financial statements" formControlName="finished_goods_value">
-                    </mat-form-field>
-                    <mat-form-field style="width:100%">
-                        <input matInput placeholder="Is the stock of finished goods sufficient ?" formControlName="is_sufficiant_goods">
-                    </mat-form-field>
-                      <ion-buttons end>
-                      <ion-col offset-3 col-3>
-                        <a (click)="addGoods()" *ngIf="last">
-                        <ion-icon name="md-add" color="optblue"  style="font-size: 22px;"></ion-icon></a> 
-                        </ion-col>
-                        <ion-col offset-3 col-1>
-                        <a (click)="deleteGoods(i)" >
-                            <ion-icon name="md-close" color="optblue"  style="font-size: 22px;"></ion-icon></a> 
-                          </ion-col>
-                      </ion-buttons>                        
-                </mat-card-content>
-            </div>
-        </div>
-    </mat-card>
-    <br/>
-    <mat-card>
-    <div fxLayout="row">
-        <div fxFlex="60" class="pb-0 text-sm-left">
-            <mat-form-field appearance="outline" style="width: 100%">
-                <mat-label>Remarks</mat-label>
-                <textarea matInput placeholder="Remarks" formControlName="stock_remarks"></textarea>
-            </mat-form-field>
-        </div>
-    </div>
-    </mat-card>
--->

src/pages/pd-question/pd-question-business-group/pd-question-stock-info/pd-question-stock-info.scss

@@ -2,6 +2,9 @@ page-pd-question-stock-info {
     mat-hint{
         font-size:12px;
     }
+    .scroll-content{
+        background-color: #eee;
+      }
    .mat-card{
         margin-bottom: 15px;
         border-radius: 10px !important;

src/pages/pd-question/pd-question-business-group/pd-question-stock-info/pd-question-stock-info.ts

@@ -28,20 +28,16 @@ export class PdQuestionStockInfoPage {
   company_id : any;
   pdid:any;
   stockForm: FormGroup;
-
   noRecordsFound: Boolean;
   errorMessage: any = '';
-
   M_rawValueInWords : any = [];  
   M_goodsValueInWords : any = [];
   R_tradedGoodsValueInWords : any = [];
   T_tradedGoodsValueInWords : any = [];
-
   mrmCommentFlag:any=[];
   mfgCommentFlag:any=[];
   rtrdCommentFlag:any=[];
   wtrdCommentFlag:any=[];
-
   serviceProviderForm: Boolean = false;
   suppliers_raw_materials : any = [];
   suppliers_retail_trade_details : any = [];
@@ -54,9 +50,7 @@ export class PdQuestionStockInfoPage {
     this.users = this.aws.getlocale();
     this.company_id=this.pdDetails.company_id;
     this.pdid=this.pdDetails.pd_id;
-
     this.qustCat.stockFormAccess(this.pdid,this.company_id).subscribe(data => {
-       
       if(data.dataStatus == true){
         this.initstockForm(data.record);
       }
@@ -78,26 +72,21 @@ export class PdQuestionStockInfoPage {
       this.noRecordsFound = false;
       this.errorMessage = 'No Records Found , Something went Wrong!';
     })
-    
   this.getdropdown();
   }
 
   public initstockForm(record){
-    
     let api = Object.keys(record.from_business).map(function (key) {
       return record.from_business[key];
     });
     let rm_api = record.from_supplier;
-    
       let params: any = {};
       params.pd_id = this.pdid;
       params.pd_form_id  = this.formDetails.form_id;
       params.company_id = this.company_id;
       this.qustCat.retiverForm(params).subscribe(value => {
-    
           if (value['status'] == 200) {
               let dataForm = value['records'];         
-              
               if(dataForm !== undefined) {
                       this.stockForm = this.fb.group({
                           pdid: [this.pdid],
@@ -143,7 +132,6 @@ export class PdQuestionStockInfoPage {
                    }
               }
               else{
-                
                 this.stockForm = this.fb.group({
                   pdid: [this.pdid],
                   formid: [this.formDetails.form_id],
@@ -154,7 +142,6 @@ export class PdQuestionStockInfoPage {
                   retail_details : this.fb.array([this.retailFormCreation(record.from_business)]),
                   trade_details: this.fb.array([this.tradingFormCreation(record.from_business)]),
                 });
-
                 if(api.length > 0){     
                   api.forEach(val => {
                     if (val.type_of_activity_id == 2) {
@@ -180,9 +167,7 @@ export class PdQuestionStockInfoPage {
                       // this.suppliers_service_product = val.products;
                       this.serviceProviderForm = true;
                       }   
-                      
                     }
-                    
                   });
                   this.noRecordsFound = true;
                 }
@@ -241,21 +226,16 @@ export class PdQuestionStockInfoPage {
   getdropdown()
   {
     this.qustCat.getcommondrop('UOM').subscribe(data => {
-            
       if(data['dataStatus']==true){
-          
               this.uomData = data['records'].filter(uom=>uom.isactive==1);
-          
       }
   });
   }
 
   manufacturingForm: Boolean = false;
   manufacturingFormCreation(record) {
-
     let arr = record.from_business.filter(data => data.type_of_activity_id == 2);
     let rm_arr = record.from_supplier;
-    
     if (arr.length > 0) {
       this.manufacturingForm = true;
         return this.fb.group({
@@ -269,13 +249,16 @@ export class PdQuestionStockInfoPage {
 
   retailForm: Boolean = false;
   retailFormCreation(val) {
-
     let arr = val.filter(data => data.type_of_activity_id == 3);
     if (arr.length > 0) {
+      // if(arr.products != undefined){
         this.retailForm = true;
         return this.fb.group({
           retail_traded_goods: this.fb.array([])
-        })
+        });  
+      // }else{
+      //   this.retailForm = false;
+      //   return;
       // }  
     } else {
       return;
@@ -284,8 +267,17 @@ export class PdQuestionStockInfoPage {
 
   tradingForm: Boolean = false;
   tradingFormCreation(val) {
+    // console.log('val',val);
+    // console.log('tradingForm',this.tradingForm);
     let arr = val.filter(data => data.type_of_activity_id == 4);
+    
     if (arr.length > 0) {
+      // console.log(arr.products);
+      // if(arr.products === undefined){
+      //   console.log(arr.products);
+      //   this.tradingForm = false;
+      //   return;
+      // }
       this.tradingForm = true;
       return this.fb.group({
           trading_traded_goods: this.fb.array([])
@@ -296,13 +288,10 @@ export class PdQuestionStockInfoPage {
   }
 
   initManufacturingDetails(datas) {
-
       const rawMaterial = <FormArray>this.stockForm.controls['manufacturing_details']['controls'][0].controls['manufacturing_raw_materials'];
       const finishedGoods = <FormArray>this.stockForm.controls['manufacturing_details']['controls'][0].controls['manufacturing_finished_goods'];
       const control = <FormArray>this.stockForm.controls['manufacturing_details']['controls'][0].controls['main_raw_materials'];    
       if(datas === null){
-  
-  
         if(this.suppliers_raw_materials.length > 0){
           this.suppliers_raw_materials.forEach(val => {
             let Ref_RawMaterials : any = {'raw_name': val,
@@ -319,9 +308,7 @@ export class PdQuestionStockInfoPage {
         else{ 
           rawMaterial.push(this.createRawmaterial(null)); 
         }     
-
         if(this.suppliers_finished_goods.length > 0){
-          // for (let val of this.suppliers_finished_goods) {
             this.suppliers_finished_goods.forEach(val => {
             let Ref_Finished_Goods : any = {'goods_name': val,
                                           'goods_observed': '',
@@ -332,17 +319,13 @@ export class PdQuestionStockInfoPage {
                                           'is_sufficiant_goods': '',
                                           'finishedgoods_remarks':''};
               finishedGoods.push(this.createGoods(Ref_Finished_Goods));     
-            // finishedGoods.push(this.createGoods(null));     
           });
         }
         else{      
           finishedGoods.push(this.createGoods(null));       
         }
-
       } else {
-        
         if(datas.manufacturing_raw_materials != undefined){
-        //  for (let val of datas.manufacturing_raw_materials) {
           datas.manufacturing_raw_materials.forEach((val,index) => {
           if(val.raw_value){
             this.inWords(val.raw_value,1,index);
@@ -355,9 +338,7 @@ export class PdQuestionStockInfoPage {
           rawMaterial.push(this.createRawmaterial(null)); 
         }
         if(datas.manufacturing_finished_goods != undefined){  
-        // for (let val of datas.manufacturing_finished_goods) {
           datas.manufacturing_finished_goods.forEach((val,index) => {
-          
             if(val.goods_value){
               this.inWords(val.goods_value,2,index);
             }
@@ -373,9 +354,7 @@ export class PdQuestionStockInfoPage {
   }
 
   createRawmaterial(records) {
-    
       if(records === null) {
-    
         return this.fb.group({
           raw_name: [''],
           stock_observed:[''],
@@ -383,21 +362,17 @@ export class PdQuestionStockInfoPage {
           raw_uom: [''],
           other_uom : [''],
           raw_value: [''],
-          // rawmaterial_value: [''],
           is_sufficiant_raw: [''],
           rawmaterial_remarks:['']
         })
       } else {        
-        
           return this.fb.group({
-          // manufacturing_raw_material_name: [records.manufacturing_raw_material_name || null],
           raw_name: [records.raw_name],
           stock_observed:[records.stock_observed],
           raw_quantity: [records.raw_quantity],
           raw_uom: [records.raw_uom],
           other_uom : [records.other_uom],
           raw_value: [records.raw_value],
-          // rawmaterial_value: [records.rawmaterial_value],
           is_sufficiant_raw: [records.is_sufficiant_raw],
           rawmaterial_remarks:[records.rawmaterial_remarks]
         })
@@ -405,14 +380,10 @@ export class PdQuestionStockInfoPage {
   }
   
   initRetailDetails(datas) {
-    
     const tradedGoods = <FormArray>this.stockForm.controls['retail_details']['controls'][0].controls['retail_traded_goods'];
-      
       if(datas === null){
-
         if(this.suppliers_retail_trade_details.length > 0){
           // this.rawMaterialAccess = true;
-          
           this.suppliers_retail_trade_details.forEach(val => {
             let Ref_Trade_Goods : any = {
               'traded_goods_name': val,
@@ -429,18 +400,14 @@ export class PdQuestionStockInfoPage {
         else{      
           tradedGoods.push(this.createTradedGoods(null));     
         }
-
        } else {
         if(datas.retail_traded_goods !== undefined){
-        // for (let val of datas.retail_traded_goods) {
           datas.retail_traded_goods.forEach((val,index) => {
-          
           if(val.estimated_traded_goods_value){
             this.inWords(val.estimated_traded_goods_value,3,index);
           }
           this.checkComments(val.is_sufficiant_traded_goods,3,index);
            tradedGoods.push(this.createTradedGoods(val));     
-                
           });
         }
         else{
@@ -459,7 +426,6 @@ export class PdQuestionStockInfoPage {
           goods_uom: [''],
           goods_other_uom: [''],
           goods_value: [''],
-          // finished_goods_value: [''],
           is_sufficiant_goods: [''],
           finishedgoods_remarks:['']
       });
@@ -472,7 +438,6 @@ export class PdQuestionStockInfoPage {
           goods_uom: [records.goods_uom],
           goods_other_uom: [records.goods_other_uom],
           goods_value: [records.goods_value],
-          // finished_goods_value: [records.finished_goods_value],
           is_sufficiant_goods: [records.is_sufficiant_goods],
           finishedgoods_remarks:[records.finishedgoods_remarks]
     })
@@ -482,10 +447,7 @@ export class PdQuestionStockInfoPage {
   initTradingDetails(datas) {
     const tradedGoods  = <FormArray>this.stockForm.controls['trade_details']['controls'][0].controls['trading_traded_goods'];  
       if(datas === null){
-
-        
         if(this.suppliers_wholesale_trade_details.length > 0){
-          // for (let val of this.suppliers_trade_details) {
             this.suppliers_wholesale_trade_details.forEach(val => {
             let Ref_Trade_Goods : any = {
               'traded_goods_name': val,
@@ -506,9 +468,7 @@ export class PdQuestionStockInfoPage {
        } else {
         if(datas.trading_traded_goods !==undefined)
         {
-        // for (let val of datas.trading_traded_goods) {
           datas.trading_traded_goods.forEach((val,index) => { 
-          
           if(val.estimated_traded_goods_value){
             this.inWords(val.estimated_traded_goods_value,4,index);
           }
@@ -519,7 +479,6 @@ export class PdQuestionStockInfoPage {
         else{
           tradedGoods.push(this.createTradedGoods(null));            
         }
-
        }
   }
 
@@ -532,7 +491,6 @@ export class PdQuestionStockInfoPage {
               traded_goods_uom: [''],
               traded_goods_other_uom: [''],
               estimated_traded_goods_value: [''],
-              // traded_goods_value: [''],
               is_sufficiant_traded_goods: [''],
               traded_goods_remarks:['']
       });
@@ -545,7 +503,6 @@ export class PdQuestionStockInfoPage {
               traded_goods_uom: [records.traded_goods_uom],
               traded_goods_other_uom: [records.traded_goods_other_uom],
               estimated_traded_goods_value: [records.estimated_traded_goods_value],
-              // traded_goods_value: [records.traded_goods_value],
               is_sufficiant_traded_goods: [records.is_sufficiant_traded_goods],
               traded_goods_remarks:[records.traded_goods_remarks]
     })
@@ -590,7 +547,6 @@ export class PdQuestionStockInfoPage {
    */
   addTradedGoods(flag) {
     switch(flag){
-        
         case 1: {
           const control = <FormArray>this.stockForm.controls['retail_details']['controls'][0].controls['retail_traded_goods'];
           control.push(this.createTradedGoods(null));
@@ -633,7 +589,6 @@ export class PdQuestionStockInfoPage {
   }
 
   checkComments(e,flag,index){
-   
     if(flag == 1 && e=='no'){
       this.mrmCommentFlag[index] = true;
     }
@@ -662,10 +617,8 @@ export class PdQuestionStockInfoPage {
 
   /** To Save/Edited Popup Data */
   saveStockInfo(answerFormValues) {
-  
     //To Remove The "Null" With Key also
     Object.keys(answerFormValues).forEach((key) => (answerFormValues[key] == null) && delete answerFormValues[key]);
-    
     this.qustCat.saveForm(answerFormValues).subscribe(responsed => {
           if(responsed['status'] == 200) { 
             this.navCtrl.pop();
@@ -677,7 +630,6 @@ export class PdQuestionStockInfoPage {
   }
 
   inWords(e,flag:number,i){
-
     switch(flag){
     case 1 :
         this.M_rawValueInWords[i] = this.constant.convertNumberToWords(e);    
@@ -696,108 +648,4 @@ export class PdQuestionStockInfoPage {
  }
 }
 
-  // createRawmaterial() {
-  //   return this.fb.group({
-  //     raw_name: [''],
-  //     stock_observed:[''],
-  //     raw_quantity: [''],
-  //     raw_uom: [''],
-  //     other_uom : [''],
-  //     raw_value: [''],
-  //     rawmaterial_value: [''],
-  //     is_sufficiant_raw: [''],
-  //   });
-  // }
-  // createGoods() {
-  //   return this.fb.group({
-  //     goods_name: [''],
-  //     goods_quantity: [''],
-  //     goods_value: [''],
-  //     finished_goods_value: [''],
-  //     is_sufficiant_goods: [''],
-  //   });
-  // }
-  // addRawMaterials() {
-  //   const control = <FormArray>this.stockForm.controls['raw_materials'];
-  //   control.push(this.createRawmaterial());
-  // }
-  // deleteRawMaterials(index) {
-  //   const control = <FormArray>this.stockForm.controls['raw_materials'];
-  //   if(control.length==1)
-  //   {
-  //     this.stockForm.controls['raw_materials'].reset();
-  //   }else{
-  //   control.removeAt(index);
-  // }
-  // }
-  // addGoods() {
-  //   const control = <FormArray>this.stockForm.controls['finished_goods'];
-
-  //   control.push(this.createGoods());
-  // }
-  // deleteGoods(index) {
-  //   const control = <FormArray>this.stockForm.controls['finished_goods'];
-  //  if(control.length==1)
-  //   {
-  //     this.stockForm.controls['finished_goods'].reset();
-  //   }else{
-  //   control.removeAt(index);
-  // }
-  // }
-
-
-  // submitDetails(answerData) {
-    
-  //   let records: any = {};
-  //   records.pdid = this.pdDetails.pd_id;
-  //   records.formid = this.FormId.form_id;
-  //   records.fk_createdby = this.users;
-  //   records.raw_materials = answerData.raw_materials;
-  //   records.stock_remarks = answerData.stock_remarks;
-  //   records.finished_goods = answerData.finished_goods;
-  
-  //   this.qustCat.saveForm(records).subscribe(data => {
-  //     this.navCtrl.pop();
-  //     this.toast.pdTriggerappmessage('Record Saved Successfully.!');
-  //   });
-  // }
-  
-  // getStockDetails() {
-  //   let records = { 'pd_id': this.pdDetails.pd_id, 'pd_FormId': this.FormId.form_id };
-
-  //   this.qustCat.retiverForm(records).subscribe(value => {
-  
-  //     const rawMaterial = <FormArray>this.stockForm.controls['raw_materials'];
-  //     const finishedGoods = <FormArray>this.stockForm.controls['finished_goods'];
-  //     if (value['dataStatus'] == true) {
-  //       let stockDetails = value['records'];
-  //       let result = Object.keys(stockDetails.raw_materials).map(function (key) {
-  //         return stockDetails.raw_materials[key];
-  //       });
-  //       let result_Goods = Object.keys(stockDetails.finished_goods).map(function (key) {
-  //         return stockDetails.finished_goods[key];
-  //       });
-  //       this.stockForm.controls['stock_remarks'].setValue(stockDetails.stock_remarks);
-  //       if (result.length > 0) {
-  //         result.forEach(val => {
-  //           rawMaterial.push(this.createRawmaterial());
-  //         });
-  //         this.stockForm.controls['raw_materials'].setValue(result);
-  //       } else {
-  //         rawMaterial.push(this.createRawmaterial());
-  //       }
-  //       if (result_Goods.length > 0) {
-  //         result_Goods.forEach(val => {
-  //           finishedGoods.push(this.createGoods());
-  //         });
-  //         this.stockForm.controls['finished_goods'].setValue(result_Goods);
-  //       } else {
-  //         finishedGoods.push(this.createGoods());
-  //       }
-  //     } else {
-  //     this.addRawMaterials();
-  //     this.addGoods();
-  //     }
-  //   })
-  // }
 }

src/pages/pd-question/pd-question-business-group/pd-question-supplier-info/pd-question-supplier-info.html

@@ -1,38 +1,34 @@
 <ion-header>
-
   <ion-navbar color="optblue">
     <button ion-button menuToggle>
       <ion-icon name="menu"></ion-icon>
     </button>
     <ion-title>{{formDetails.form_name}}</ion-title>
   </ion-navbar>
-
 </ion-header>
-
+<ion-content padding>
-<ion-content padding *ngIf="noRecordsFound">
+  <div *ngIf="noRecordsFound">
-
     <form [formGroup]="supplierInfoForm">
-
+      <div fxLayout="row" fxLayoutAlign="start none">
         <mat-card *ngIf="manufacturingForm">
-
+          <mat-card-title>
-      <mat-card-title>Manufacturing Product Details</mat-card-title>
+            <h5>Manufacturing Product Details</h5>
+          </mat-card-title>
           <div formArrayName="manufacturing_details">
-        <div *ngFor="let item of supplierInfoForm.controls.manufacturing_details['controls']; let i=index" [formGroupName]="i">
+            <div *ngFor="let item of supplierInfoForm.controls.manufacturing_details['controls']; let i=index"
+              [formGroupName]="i">
               <div formArrayName="main_raw_materials">
-            <div *ngFor="let items of item.controls.main_raw_materials['controls']; let l=index let last =last" [formGroupName]="l">
+                <div *ngFor="let items of item.controls.main_raw_materials['controls']; let l=index let last =last"
-                <mat-card>
+                  [formGroupName]="l">
                   <mat-card-subtitle>Raw Material #{{l+1}}</mat-card-subtitle>
                   <mat-card-content>
-
                     <div fxLayout="row nowrap" fxLayoutGap="2px" fxLayoutAlign="start none">
                       <mat-form-field style="width: 100%">
                         <input matInput placeholder="Raw Material Name" formControlName="manufacturing_raw_material_name">
                       </mat-form-field>
-
                       <mat-form-field style="width: 100%">
                         <input matInput placeholder="Supplier Name" formControlName="manufacturing_supplier_name">
                       </mat-form-field>
-
                       <mat-form-field style="width: 100%">
                         <mat-select placeholder="Title" formControlName="person_title_name">
                           <mat-option *ngFor="let tl of m_titleList" [value]="tl.title_id">
@@ -43,7 +39,6 @@
                       <mat-form-field style="width: 100%">
                         <input matInput placeholder="Contact Person Name" formControlName="manufacturing_contact_person_name">
                       </mat-form-field>
-
                       <mat-form-field style="width: 100%">
                         <mat-select placeholder="Contact Person Designation" formControlName="person_designation"
                           (selectionChange)="selectedPersonDesignation(items,$event.value,1)">
@@ -54,17 +49,14 @@
                           <!-- <mat-option value="1" > Not Applicable </mat-option> -->
                         </mat-select>
                       </mat-form-field>
-
                       <mat-form-field style="width: 100%" *ngIf="items.get('person_designation').value == 1">
                         <input matInput placeholder="Specify Person Designation" formControlName="other_person_designation">
                       </mat-form-field>
-                
                       <mat-form-field style="width: 100%">
                         <input matInput placeholder="Contact Person Mobile Number" autocomplete="off" formControlName="manufacturing_contact_person_mobile_number"
                           maxlength="10" type="number">
                         <mat-error>Enter Valid Mobile Number.</mat-error>
                       </mat-form-field>
-
                       <mat-form-field style="width: 100%">
                         <input matInput autocomplete="off" placeholder="STD Code" formControlName="person_stdcode" type="number">
                         <mat-error>Enter Valid STD Code Number.</mat-error>
@@ -75,15 +67,12 @@
                           type="number">
                         <mat-error>Enter Valid LandLine Number.</mat-error>
                       </mat-form-field>
-                
-                
                       <mat-form-field style="width: 100%">
                         <mat-select placeholder="Payment Terms" formControlName="manufacturing_payment_type"
                           (selectionChange)="selectedPaymentTerms(items,$event.value,1);checkCard($event.value,1,l);">
                           <mat-option *ngFor="let pm of m_paymentList" [value]="pm.id">{{ pm.name }}</mat-option>
                         </mat-select>
                       </mat-form-field>
-
                       <mat-form-field style="width: 100%">
                         <mat-select placeholder="Payment Mode" formControlName="manufacturing_payment_mode">
                           <mat-option value="Payment made in Cash.">Payment made in Cash.</mat-option>
@@ -91,7 +80,6 @@
                             channels.</mat-option>
                         </mat-select>
                       </mat-form-field>
-
                       <span *ngIf="items.get('manufacturing_payment_type').value == 3">
                         <mat-label>No.of days of Credit Provided by Supplier </mat-label>
                         <mat-form-field style="width: 100%">
@@ -101,54 +89,44 @@
                           <input matInput placeholder="Days To" formControlName="manufacturing_credit_days_to" type="number">
                         </mat-form-field>
                       </span>
-
                     </div>
-
                   </mat-card-content>
-              <ion-col offset-6 col-3>
+                  <ion-buttons end>
-                  <a (click)="addMoreRawMaterials($event); false" *ngIf="last">
+                    <ion-col col-3 offset-3>
-                  <ion-icon name="md-add" color="optblue"  style="font-size: 22px;"></ion-icon></a> 
-                </ion-col>
-                <ion-col offset-3 col-1>
                       <a *ngIf="item.controls.main_raw_materials.controls.length > 1" (click)="removeRawMaterials(l)">
-                    <ion-icon name="md-close" color="optblue"  style="font-size: 22px;"></ion-icon></a> 
+                        <ion-icon name="md-trash" color="optblue" style="font-size: 22px;"></ion-icon>
+                      </a>
                     </ion-col>
-                </mat-card>
+                    <ion-col col-2 offset-1>
-
+                      <a (click)="addMoreRawMaterials($event); false" *ngIf="last">
-              
+                        <ion-icon name="add-circle" color="optblue" style="font-size: 24px;"></ion-icon>
-
+                      </a>
+                    </ion-col>
+                  </ion-buttons>
                 </div>
               </div>
-          
+              <div *ngIf="mfgCreditCardFlag">
-
-          
-
-            <!-- <mat-card-footer> -->
-                <div fxLayout="row nowrap" style="padding-left: 2%;" *ngIf="mfgCreditCardFlag">
                 <mat-form-field style="width: 100%">
                   <input matInput placeholder="What % of Total Purchase is Done on Credit?" formControlName="main_raw_materials_total_payments_percent_on_credit"
                     type="number" autocomplete="off" maxlength="3">
                 </mat-form-field>
               </div>
-             <!-- </mat-card-footer> -->
-
             </div>
           </div>
-
         </mat-card>
-
         <mat-card *ngIf="tradingForm">
-      <mat-card-title>Trading Product Details</mat-card-title>
+
+          <mat-card-title>
+            <h5>Trading Product Details</h5>
+          </mat-card-title>
 
           <div formArrayName="trade_details">
             <div *ngFor="let item of supplierInfoForm.controls.trade_details['controls']; let i=index" [formGroupName]="i">
               <div formArrayName="trading_products">
-            <div *ngFor="let items of item.controls.trading_products['controls']; let l=index; let last = last" [formGroupName]="l">
+                <div *ngFor="let items of item.controls.trading_products['controls']; let l=index; let last = last"
-                <mat-card>
+                  [formGroupName]="l">
                   <mat-card-subtitle>Trading Product #{{l+1}}</mat-card-subtitle>
                   <mat-card-content>
-
-
                     <div fxLayout="row nowrap" fxLayoutGap="2px" fxLayoutAlign="start none">
                       <mat-form-field style="width: 100%">
                         <mat-select placeholder="Trading Product Name" formControlName="trade_product_name">
@@ -186,7 +164,6 @@
                         <input matInput placeholder="Contact Person Mobile Number" autocomplete="off" formControlName="trade_product_contact_person_mobile_number"
                           type="number" maxlength="10">
                         <mat-error>Enter Valid Mobile Number.</mat-error>
-
                       </mat-form-field>
                       <mat-form-field style="width: 100%">
                         <input matInput autocomplete="off" placeholder="STD Code" formControlName="person_stdcode" type="text"
@@ -208,12 +185,11 @@
                       <mat-form-field style="width: 100%">
                         <mat-select placeholder="Payment Mode" formControlName="trade_product_payment_mode">
                           <mat-option value="Payment received in Cash.">Payment received in Cash.</mat-option>
-                      <mat-option value="Payment received through Banking channels.">Payment received through Banking
+                          <mat-option value="Payment received through Banking channels.">Payment received through
+                            Banking
                             channels.</mat-option>
                         </mat-select>
-
                       </mat-form-field>
-                
                       <span *ngIf="items.get('trade_product_payment_type').value == 3">
                         <mat-label>No.of days of Credit Provided by Supplier </mat-label>
                         <mat-form-field style="width: 100%">
@@ -225,54 +201,54 @@
                       </span>
                     </div>
                   </mat-card-content>
-              <ion-col offset-6 col-3>
+                  <ion-buttons end>
-                  <a (click)="addMoretradeProduct($event); false" *ngIf="last">
+                    <ion-col col-3 offset-3>
-                  <ion-icon name="md-add" color="optblue"  style="font-size: 22px;"></ion-icon></a> 
-                </ion-col>
-                <ion-col offset-3 col-1>
                       <a (click)="removeTradingProduct(l)" *ngIf="item.controls.trading_products.controls.length > 1">
-                    <ion-icon name="md-close" color="optblue"  style="font-size: 22px;"></ion-icon></a> 
+                        <ion-icon name="md-trash" color="optblue" style="font-size: 22px;"></ion-icon>
+                      </a>
                     </ion-col>
-              </mat-card>              
+                    <ion-col col-2 offset-1>
+                      <a (click)="addMoretradeProduct($event); false" *ngIf="last">
+                        <ion-icon name="add-circle" color="optblue" style="font-size: 24px;"></ion-icon>
+                      </a>
+                    </ion-col>
+                  </ion-buttons>
                 </div>
               </div>
-          
+              <div *ngIf="trdCreditCardFlag">
-          
+                <mat-form-field style="width: 100%">
-            
-            <!-- <mat-card-footer> -->
-                <div fxLayout="row nowrap" style="padding-left: 2%;" *ngIf="trdCreditCardFlag">
-                    <mat-form-field style="width: 90%">
                   <input matInput placeholder="What % of Total Trade is done on Credit?" formControlName="trading_products_total_payments_percent_on_credit"
                     type="number" autocomplete="off">
                 </mat-form-field>
               </div>
-            <!-- </mat-card-footer> -->
-
-        
             </div>
           </div>
         </mat-card>
-
         <mat-card *ngIf="serviceProviderForm">
-        <mat-card-title>Service Provider Product Details</mat-card-title>
+
+          <mat-card-title>
+            <h5>Service Provider Product Details</h5>
+          </mat-card-title>
+
           <div style="text-align: center; margin: 12px;">Service Provider Details Not applicable here !!</div>
         </mat-card>
-
         <mat-card>
           <mat-form-field style="width: 100%">
             <mat-label>Remarks</mat-label>
             <textarea matInput placeholder="Remarks" formControlName="supplier_info_form_remark"></textarea>
           </mat-form-field>
         </mat-card>
-
         <ion-row>
           <button ion-button full color="optblue" (click)="saveSupplierInfo(supplierInfoForm.value)"> Save</button>
         </ion-row>
-
+      </div>
     </form>
-
+  </div>
-</ion-content>
+  <div *ngIf="!noRecordsFound">
-
+    <mat-card>
-<ion-content padding *ngIf="!noRecordsFound">
+      <div fxLayout="row" fxLayoutAlign="start none">
         <div style="margin: 12px; font-size: 18px;"> {{ errorMessage }} </div>
+      </div>
+    </mat-card>
+  </div>
 </ion-content>

src/pages/pd-question/pd-question-business-group/pd-question-supplier-info/pd-question-supplier-info.scss

@@ -2,6 +2,9 @@ page-pd-question-supplier-info {
         mat-hint{
             font-size:12px;
         }
+        .scroll-content{
+            background-color: #eee;
+          }
        .mat-card{
             margin-bottom: 15px;
             border-radius: 10px !important;

src/pages/pd-question/pd-question-business-group/pd-question-supplier-info/pd-question-supplier-info.ts

@@ -12,7 +12,6 @@ import { ToastProvider } from '../../../../providers/common-provider/toast';
  * Ionic pages and navigation.
  */
 
-
 @Component({
   selector: 'page-pd-question-supplier-info',
   templateUrl: 'pd-question-supplier-info.html',
@@ -43,7 +42,6 @@ export class PdQuestionSupplierInfoPage {
     this.pdDetails = this.navParams.get('pdDetails');
     this.formDetails = this.navParams.get('formDetails');
     this.form_id = this.formDetails.form_id;
-    // console.log(this.formDetails);
     this.company_id = this.pdDetails.company_id;
     this.users = this.aws.getlocale();