Fairoj : Unwanted images removed

ng8-seed/src/app/components/payment-status/success/success.component.html

@@ -1,7 +1,7 @@
 
 <div fxLayout="column" fxLayoutAlign="center center" fxFlex="100">
 
-   <div class="pt-2" fxFlex="100" fxFlex.lg="80" fxFlex.sm="80" fxFlex.xs="80" fxLayoutAlign="center" fxLayoutGap="5px" class="div_over">
+   <div class="pt-2" fxFlex="100" fxFlex.lg="80" fxFlex.sm="80" fxFlex.xs="100" fxLayoutAlign="center" fxLayoutGap="5px" class="div_over">
        <mat-icon  [ngClass]="{
         'success_icon' : status_text == 'success',
         'failure_icon' : status_text == 'failure',
@@ -14,8 +14,8 @@
    </div>
    <!-- <div fxLayout="row wrap"> -->
     <div class="pt-2" fxLayoutAlign="center" fxFlex.sm="100" fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="100" fxFlex.lg="100" fxFlex.xl="100">
-        <h1 *ngIf="status_text == 'success'">Thank You for your Support</h1><br>
+        <h1 *ngIf="status_text == 'success'"    style="text-align: center">Thank You for your Support</h1><br>
-        <h3 *ngIf="status_text == 'failure'">Sorry there has been a problem in getting payment approval</h3>
+        <h3 *ngIf="status_text == 'failure'"    style="text-align: center">Sorry there has been a problem in getting payment approval</h3>
         <!-- <p>We have received confirmation of your payment as detailed below</p> -->
     </div> 
     <div fxLayoutAlign="center" fxFlex.sm="100" fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="100" fxFlex.lg="100" fxFlex.xl="100">

ng8-seed/src/app/components/payment-status/success/success.component.scss

@@ -15,6 +15,16 @@
     padding: 5px;
     border-radius: 10px;
 }
+@media(max-width:580px){
+    .div_over{
+        margin-top:8%;
+        text-align: center;
+        border: 2px solid rgb(25, 183, 211);
+        width: 100%;
+        padding: 5px;
+        border-radius: 10px;
+    }
+}
 .failure_text{
     font-size:35px;
     color:red;

ng8-seed/src/app/components/payment/payment.component.html

@@ -48,10 +48,11 @@
                 <mat-card-content style="text-align: center;">
                    <h3><strong><span class="amount"><span class="currency-symbol">&#8377;&nbsp;</span>{{grand_tot_value}}</span></strong></h3><br/>
 
-                   <mat-radio-group aria-label="Payment Mode" [(ngModel)]="payment_mode">
+                   <mat-radio-group aria-label="Payment Mode" [(ngModel)]="payment_mode"  (click)="changeValidation($event)">
                         <mat-radio-button value="1" >Online</mat-radio-button>&nbsp;
                         <mat-radio-button value="2">Offline</mat-radio-button>
                       </mat-radio-group>
+                     
                 </mat-card-content>
                
              </mat-card>
@@ -111,12 +112,14 @@
                                           <mat-select placeholder="Payment Mode" formControlName="payment_type">
                                              <mat-option *ngFor="let value of payment_mode_data" [value]="value.id">{{value.name}}</mat-option>
                                           </mat-select>
+                                          <mat-error>Please Choose the option </mat-error>
                                        </mat-form-field>
                                        <div *ngIf="offlineDetForm.value.payment_type == '1' && offlineDetForm.controls['check_branch_bank']">
                                           
                                           <div fxLayout="row">
                                           <mat-form-field style="width: 50%;" class="mr-1">
                                              <input matInput type="text" formControlName="payment_ref" placeholder="Cheque / DD Number">
+                                         
                                           </mat-form-field>
                                              <mat-form-field  style="width: 50%;">                             
                                                    <input matInput [matDatepicker]="picker"  placeholder="Date" formControlName="check_date">

ng8-seed/src/app/components/payment/payment.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
 import { Router } from '@angular/router';
-import { FormBuilder, FormGroup, FormControl } from '@angular/forms';
+import { FormBuilder, FormGroup, FormControl, Validators } from '@angular/forms';
 import { ApiService } from 'app/shared/api.service';
 
 @Component({
@@ -48,7 +48,7 @@ export class PaymentComponent implements OnInit {
   contribute_type: any;
   contributeKind: FormGroup;
   contribute_params: any;
-  payment_mode:any; //1-online 2-offline
+  payment_mode:any=''; //1-online 2-offline
   maxDate=new Date()
   reqjson=''
   action_url=''
@@ -118,6 +118,10 @@ export class PaymentComponent implements OnInit {
     
   }
   proceed_for_payment(){
+    if(this.payment_mode  ==  ''){
+      alert('Please Choose the Payment Option')
+      return;
+    }
     let params=this.contribute_params
     if(this.contribute_type == '2'){
     params.records.mat_delivery_point=this.contributeKind.value.delivery_point
@@ -126,6 +130,10 @@ export class PaymentComponent implements OnInit {
     }
      
     if(this.payment_mode == '2'){
+      if(this.offlineDetForm.invalid){
+        alert('Please Choose the  Payment Mode');
+        return;
+      }
      params.records.payment_type=this.offlineDetForm.value.payment_type
      params.records.payment_ref=this.offlineDetForm.value.payment_ref
      params.records.payment_date=this.offlineDetForm.value.check_date
@@ -199,5 +207,14 @@ export class PaymentComponent implements OnInit {
   //   }
 
   // }
+  changeValidation(value){
+    if(value.target.innerText == 'Offline'){
+      this.offlineDetForm.controls['payment_type'].setValidators(Validators.compose([Validators.required]))
+    }
+    else{
+      this.offlineDetForm.controls['payment_type'].clearValidators();
+      this.offlineDetForm.controls['payment_type'].updateValueAndValidity();
+    }
+  }
 
 }

ng8-seed/src/app/components/user-profile/user-profile.component.html

@@ -147,8 +147,9 @@
                      <div style="text-align: right;">
                         <button  mat-raised-button class="mb-1" color="primary" (click)="certificateDialog()">Certificate</button>
                      </div>
-                     <div>
+                     <div    id="table_element">
-        <table   mat-table #table_element [ngClass]="{'example-container mat-elevation-z8':clientWidth <= 500}"
+                         <!--[ngClass]="{'example-container mat-elevation-z8':clientWidth <= 500}"-->
+        <table   mat-table class="example-container mat-elevation-z8"
        [dataSource]="dataSource" multiTemplateDataRows
        >
        <ng-container matColumnDef="Date">

ng8-seed/src/app/components/user-profile/user-profile.component.scss

@@ -98,7 +98,7 @@
           width: 110px;
           display: inline-block;
               font-weight: bold;
-             // margin-right: 20px;
+              margin-right: 25px;
         }
       
         .mat-header-row {

ng8-seed/src/app/components/user-profile/user-profile.component.ts

@@ -33,7 +33,7 @@ export class UserProfileComponent implements OnInit {
   pdf_data_source: any={amount:'',name:'',org_pan:''};
   slide1: boolean;
   slide2: boolean;
- @ViewChild('table_element',{static:false}) table_element : ElementRef
+ @ViewChild('table_element',{static:true}) table_element
   clientWidth: any;
   
   constructor(private apiService:ApiService,private _fb:FormBuilder,private matSnackBar:MatSnackBar,public router:Router,private matDialog:MatDialog) { }
@@ -56,10 +56,12 @@ export class UserProfileComponent implements OnInit {
     //this.generatePDF()
   }
   ngAfterViewInit(){
+    setTimeout(()=>{
     console.log("table elemnt",this.table_element);
     // this.table_element=this.table_element.nativeElement.clientWidth
     this.clientWidth=this.table_element.nativeElement.clientWidth
     console.log("table elemnt",this.clientWidth);
+  })
   }
   getProfile(){
     this.apiService.getMyProfile().subscribe(res=>{