Requirements added and issue fixes

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

@@ -2,11 +2,11 @@
   <!--starts-->
   <div fxLayout fxLayout="row"  fxLayout.xs="column"  >
     <!-- <div fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="40" fxFlex.lg="1000" fxFlex.xl="40"> -->
-<mat-card class="p-2" fxFlex="71%" fxFlex.xs="100" fxFlex.sm="100">
+<mat-card class="p-2" fxFlex.lg="72.5%" fxFlex.xs="100" fxFlex.sm="70%" fxFlex.md="68%"  fxFlex.xl="70%">
         <mat-card-title class="mb-1"><h5 class="mt-0 text-center">Contribute to Specific Need </h5></mat-card-title>
         <hr>
          <form [formGroup]="Contribute">
-              <div fxLayout="row" fxLayoutAlign="start center" class="mb-2 pt-1">
+              <div fxLayout="row" fxLayout.sm="column" fxLayoutAlign="start center" class="mb-2 pt-1">
 <mat-form-field dividerColor="primary" class="ml-xs mr-xs" style="width: 40%;">
 <mat-select placeholder="Select District" formControlName="district_id" (selectionChange)="getFilterValue($event.value,'school')">
         <mat-option *ngFor="let item of district" [value]="item.district_id" >
@@ -22,7 +22,7 @@
     </mat-select>
 </mat-form-field>
 </div> 
-<div fxLayout="row" >
+<div fxLayout="row"  fxLayout.xs="column">
 <mat-form-field dividerColor="warn" class="ml-xs mr-xs" style="width: 100%;">
 <mat-select placeholder="Select Category" formControlName="cad_id" (selectionChange)="getFilterValue($event.value,'material')">
         <mat-option *ngFor="let item of category" [value]="item.cat_id" >
@@ -48,8 +48,8 @@
 </form>
 
     <!--*********************--> 
-      <div class="mat-elevation-z8" >
+      <div [ngClass]="{'example-container mat-elevation-z8':clientWidth >= 500}" #table_element>
-        <table mat-table [dataSource]="dataSource" matSort *ngIf="dataStatus;else status">
+        <mat-table [dataSource]="dataSource" matSort *ngIf="dataStatus;else status">
       
           <!-- Requirement Column -->
           <!-- <ng-container matColumnDef="Requirement">
@@ -59,8 +59,8 @@
 
           <!-- Item Need Column -->
           <ng-container matColumnDef="Item Need">
-            <th style="width: 25% !important;text-align: right;float: center" mat-header-cell *matHeaderCellDef mat-sort-header>Item Needed</th>
+            <mat-header-cell  *matHeaderCellDef mat-sort-header>Item Needed</mat-header-cell>
-            <td style="width: 25% !important;" mat-cell *matCellDef="let row" class="product-thumbnail"><span> {{row.material_name}} </span></td>
+            <mat-cell  *matCellDef="let row" class="product-thumbnail"><span> {{row.material_name}} </span></mat-cell>
           </ng-container>
 
           <!-- School Column -->
@@ -71,17 +71,17 @@
       
           <!-- Quantity Column -->
           <ng-container matColumnDef="Required Qty">
-            <th style="width: 8% !important;text-align: center;" mat-header-cell *matHeaderCellDef > Required Qty </th>
+            <th style="width: 4% !important;text-align: center;" mat-header-cell *matHeaderCellDef > Required Qty </th>
-            <td style="width: 8% !important;text-align: center;" mat-cell *matCellDef="let row"> {{row.qty}}</td>
+            <td style="width: 4% !important;text-align: center;" mat-cell *matCellDef="let row"> {{row.qty}}</td>
           </ng-container>
 
           <ng-container matColumnDef="Received Qty">
-              <th style="width: 8% !important;text-align: center;" mat-header-cell *matHeaderCellDef > Received Qty </th>
+              <th style="width: 4% !important;text-align: center;" mat-header-cell *matHeaderCellDef > Received Qty </th>
-              <td style="width: 8% !important;text-align: center;" mat-cell *matCellDef="let row"> {{row.received_qty}}</td>
+              <td style="width: 4% !important;text-align: center;" mat-cell *matCellDef="let row"> {{row.received_qty}}</td>
             </ng-container>
             <ng-container matColumnDef="balance Qty">
-                <th style="width: 8% !important;text-align: center;" mat-header-cell *matHeaderCellDef > Balance Qty </th>
+                <th style="width: 4% !important;text-align: center;" mat-header-cell *matHeaderCellDef > Balance Qty </th>
-                <td style="width: 8% !important;text-align: center;" mat-cell *matCellDef="let row"> {{row.qty-row.received_qty <= 0 ? '' : row.qty-row.received_qty }}</td>
+                <td style="width: 4% !important;text-align: center;" mat-cell *matCellDef="let row"> {{row.qty-row.received_qty <= 0 ? '' : row.qty-row.received_qty }}</td>
               </ng-container>
       
           <!-- Sponsor Column -->
@@ -92,7 +92,7 @@
          
           <!-- price Column -->
           <ng-container matColumnDef="Cost Per Unit">
-            <th align="right" style="width: 8% !important;text-align: center;" mat-header-cell *matHeaderCellDef  > Cost Per Unit<br> (in Rs) </th>
+            <th align="right" style="width: 8% !important;text-align: right;" mat-header-cell *matHeaderCellDef  > Cost Per Unit<br> (in Rs) </th>
             <td style="width: 8% !important;text-align: right;" mat-cell *matCellDef="let row;" > {{row.cost_per_unit === null?0:row.cost_per_unit}} </td>
             <!-- <td mat-footer-cell *matFooterCellDef> Total </td> -->
           </ng-container>
@@ -107,7 +107,7 @@
           <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
           <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
           <!-- <tr mat-footer-row *matFooterRowDef="tableColumns"></tr> -->
-        </table> 
+        </mat-table> 
         <div class="clearfix order-total" style="padding-bottom: 0px !important;">
                 <div class="calculated-shipping" style="text-align: -webkit-right !important;">
         <table class="table-responsive" cellspacing="0" style="width: 50% !important;" *ngIf="dataStatus"> 
@@ -121,7 +121,7 @@
         <mat-paginator [pageSize]="pageSize" [pageSizeOptions]="[5, 10, 25, 50, 100]" showFirstLastButtons ></mat-paginator>
         
         <div class="pt-1 pr-1" style="text-align: right;" *ngIf="dataStatus">
-        <button mat-raised-button color="primary" (click)="finalSave(2)" class="mr-1 mb-1">I'd like to Contribute in kind</button>
+        <button mat-raised-button color="primary" (click)="finalSave(2)" class="mr-1 mb-1">I'd like to Contribute in Kind</button>
         <button (click)="finalSave(1)" mat-raised-button style="background-color:rgb(69, 189, 189);color:white" >I'd like to Contribute in Cash</button>
           </div> 
     </div>
@@ -146,7 +146,7 @@
 </mat-card>
 
 <!-- <div fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="40" fxFlex.lg="20" fxFlex.xl="40"> -->
-<mat-card class="support_mat sidescroll" fxFlex="27%" fxFlex.xs="100" fxFlex.sm="100px">
+<mat-card class="support_mat sidescroll" fxFlex="27%" fxFlex.xs="25%" fxFlex.sm="25%">
   
     <!-- <mat-card-header  style="padding: 0;margin: 0;"> -->
         <!-- <mat-card-title> -->

ng8-seed/src/app/components/contribute/contribute.component.scss

@@ -2,17 +2,25 @@
     padding: 0px !important;
 }
 .sidescroll{
-    right: 45px !important;  
+    // right: 45px !important;  
     height: fit-content;
-    position: fixed; 
+    // position: fixed; 
     z-index: 0;
 }
+@media(max-width:580px){
+    .sidescroll{
+    height: auto;
+    position: unset;
+    // right: -20px;
+
+    }
+}
 a {
     text-decoration: underline;
     color: #4CAF50;
 }
     table {
-        width: 100%;
+        // width: 100%;
       }
       
       .mat-form-field {
@@ -42,7 +50,7 @@ a {
     }
     
     .table-responsive {
-        text-align: left;
+        text-align: right;
     }
     
     .calculated-shipping {
@@ -67,7 +75,7 @@ a {
     table th {
         border: none;
         border-bottom: 1px solid #e9e9e9;
-        padding: 12px;
+        padding: 4px;
         vertical-align: middle;
     }
     
@@ -107,6 +115,7 @@ a {
         }
     }
      .footer {
+         z-index: -1;
     margin:0;
     width:100%;
     overflow: hidden;
@@ -114,12 +123,13 @@ a {
   // bottom: 10px;
   top:20px;
   // margin:0;
-  width: 100%;
+  width: 97%;
   padding-left:10px;
   /* Set the fixed height of the footer here */
   height: 40px;
   line-height: 60px;
   background-color:rgb(69, 189, 189);
+
 }
 .footer h5{
     font-size: 13px;
@@ -139,3 +149,4 @@ a {
     text-align: center;
     font-style: italic;
 }
+

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

@@ -1,4 +1,4 @@
-import { Component, OnInit, ViewChild } from '@angular/core';
+import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
 import { environment } from '../../../environments/environment';
 import { ApiService  } from '../../shared/api.service';
 import { FormGroup, FormBuilder, FormControl, Validators, } from '@angular/forms';
@@ -41,6 +41,8 @@ export class ContributeComponent implements OnInit {
   all_district:any=[];
   dataStatus :boolean = true;
   msg: any;
+  @ViewChild('table_element',{static:true}) table_element : ElementRef
+  clientWidth: any;
   constructor(public restApi:ApiService,public fb:FormBuilder,public router:Router,private apiService:ApiService,public schInfo:SchoolDetailsService) {
      // Create 100 users
    
@@ -161,6 +163,7 @@ export class ContributeComponent implements OnInit {
             this.dataLength  = data.length;
           this.dataSource.data = data;
           console.log("data",this.dataSource)
+        
           let store:any
            store=sessionStorage.getItem('contribute')
           store=JSON.parse(store)
@@ -205,6 +208,20 @@ export class ContributeComponent implements OnInit {
       // console.log(this.finalData)
       return
     }
+    else if(e <= 0){
+      alert("Given value is Invalid")
+      if(this.finalData.length > 0){
+        this.finalData=this.finalData.filter(val=>{
+        return val.req_id!=curr_data.school_req_id
+        })
+        this.whole_contribute_list=this.whole_contribute_list.filter(val=>val.school_req_id != curr_data.school_req_id)
+       //  console.log(this.finalData);
+       }
+       this.sponsor_qty[i]=''
+       this.Total[i]=''
+       // console.log(this.finalData)
+       return
+    }
     // console.log(this.finalData);
     // console.log(e,i,item);
     this.Total[i] = e*item;
@@ -309,6 +326,11 @@ export class ContributeComponent implements OnInit {
     }
     this.dataSource.paginator = this.paginator;
     this.dataSource.sort = this.sort;
+     console.log("table elemnt",this.table_element.nativeElement.offsetWidth);
+    // this.table_element=this.table_element.nativeElement.clientWidth
+    this.clientWidth=this.table_element.nativeElement.clientWidth
+    console.log("table elemnt",this.clientWidth);
+    
   }
 
 

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

@@ -48,7 +48,7 @@
                 <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)="changeType($event)">
                         <mat-radio-button value="1" >Online</mat-radio-button>&nbsp;
                         <mat-radio-button value="2">Offline</mat-radio-button>
                       </mat-radio-group>
@@ -91,6 +91,8 @@
                </mat-card>   
          </div>
             <div *ngIf="payment_mode == '2' && contribute_type != '2'" class="ac_det">
+               <div fxLayout="row" fxLayoutGap="20px">
+                  <div fxLayout="column">
                <p>A/c Name : Tamil Nadu State Parent Teacher Association - CSR Funds</p>
                <!-- <p>Association : CSR Funds</p> -->
                <p>A/C Number : 142301000022944</p>
@@ -99,8 +101,52 @@
                <p>Bank : Indian Overseas Bank</p>
                <p>Branch : College Road, Chennai</p>
             </div>
+            <!-- <div fxLayout="column" fxLayoutGap="14px">
+               <mat-card style="width: 80%; height:100%">
+                  <mat-card-header>
+                     <mat-card-title>Payment Details</mat-card-title>
+                  </mat-card-header>
+                  <form [formGroup]="offlineDetForm">
+                     <div fxLayout="column" style="padding:8px;" >
+                  <mat-form-field style="width: 100%">
+                   
+                     <mat-select placeholder="Payment Mode" formControlName="payment_mode">
+                        <mat-option *ngFor="let value of payment_mode_data" [value]="value.id">{{value.name}}</mat-option>
+                     </mat-select>
+                  </mat-form-field>
+                  <div *ngIf="offlineDetForm.value.payment_mode == '1'">
+                     <div fxLayout="column" >
+                     <div fxLayout="row" fxLayoutGap="20px">
+                     <mat-form-field class="half-field">
+                        <input matInput type="text" formControlName="check_no" placeholder="Cheque / DD Number">
+                     </mat-form-field>
+                        <mat-form-field  class="half-field">                             
+                              <input matInput [matDatepicker]="picker"  placeholder="Date" formControlName="check_date">
+                              <mat-datepicker-toggle matSuffix  [for]="picker"></mat-datepicker-toggle>
+                              <mat-datepicker #picker></mat-datepicker>
+                            </mat-form-field>
+                           </div>
+                           <div fxLayout="row">
+                            <mat-form-field class="half-field">
+                                 <input matInput type="text" formControlName="check_branch_bank" placeholder="Drawn on Bank and Branch">
+                              </mat-form-field>
+                              <mat-form-field class="half-field">
+                                   
+                                    <mat-select placeholder="Mode of deposit" formControlName="check_deposit_mode">
+                                       <mat-option *ngFor="let value of deposit_mode_data" [value]="value.id">{{value.name}}</mat-option>
+                                    </mat-select>  
+                                    </mat-form-field>
+                                 </div>
+                              </div>
+                  </div>
+               </div>
+               </form>
+               </mat-card>
+            </div> -->
+            </div>
+            </div>
         <ul>
-            <li *ngIf="payment_mode == '1'"><span>Government of Tamil Nadu accepts online voluntary contributions using Net Banking or VISA-Debit/Credit Cards in Indian Rupees (INR) from Individuals, Organizations, Trusts,Companies and Institutions etc.</span></li>
+            <li *ngIf="payment_mode == '1'"><span>Tamil Nadu State Parent Teacher Association (TNPTA) accepts online voluntary contributions using Net Banking or VISA-Debit/Credit Cards in Indian Rupees (INR) from Individuals, Organizations, Trusts,Companies and Institutions etc.</span></li>
             <li><span>All contributions towards Tamil Nadu State Parent Teacher Association (TNPTA) are exempt from Income Tax under section 80 (G).</span></li>
             <li><span>The PAN Number of Tamil Nadu State Tamil Nadu Parent Teacher Association (TNPTA) is AACAT2920R.</span></li>
         </ul>

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

@@ -201,3 +201,6 @@ $product-bg-color-hover: rgba(103, 58, 183, 0.7);
     margin-bottom: 4%;
     font-size: 15px;
 }
+.half-field{
+    width: 40%;
+}

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

@@ -48,11 +48,14 @@ export class PaymentComponent implements OnInit {
   contribute_type: any;
   contributeKind: FormGroup;
   contribute_params: any;
-  payment_mode:any="2"; //1-online 2-offline
+  payment_mode:any; //1-online 2-offline
   maxDate=new Date()
   reqjson=''
   action_url=''
   loader_control:boolean=false
+  offlineDetForm:FormGroup;
+  payment_mode_data=[{id:1,name:"Cheque/DD"},{id:2,name:"Bank Transfer"}]
+  deposit_mode_data=[{id:1,name:"Despatch"},{id:2,name:"Check Drop"}]
   constructor(public restApi:ApiService,public fb:FormBuilder,public router:Router,private apiService:ApiService) {
     this.isToken();
     
@@ -84,6 +87,7 @@ export class PaymentComponent implements OnInit {
         remarks:['']
       })
      }
+     
   //  }
   }
   ngAfterViewInit() {
@@ -158,5 +162,18 @@ export class PaymentComponent implements OnInit {
           console.log("Error")
         })
   }
+  changeType(value){
+    console.log(value)
+    if(value.target.innerText == 'Offline'){
+      this.offlineDetForm=this.fb.group({
+        payment_mode:[''],
+        check_no:[''],
+        check_date:[''],
+        check_branch_bank:[''],
+        check_deposit_mode:['']
+      })
+    }
+
+  }
 
 }

ng8-seed/src/app/components/project-detail/project-detail.component.ts

@@ -66,6 +66,20 @@ somethingChanged(e,i,item,mat_id,curr_data){
       // console.log(this.finalData)
       return
     }
+    else if(e <= 0){
+      alert("Given value is Invalid")
+      if(this.finalData.length > 0){
+        this.finalData=this.finalData.filter(val=>{
+        return val.req_id!=curr_data.school_req_id
+        })
+        this.whole_contribute_list=this.whole_contribute_list.filter(val=>val.school_req_id != curr_data.school_req_id)
+       //  console.log(this.finalData);
+       }
+       this.sponsor_qty[i]=''
+       this.Total[i]=''
+       // console.log(this.finalData)
+       return
+    }
   console.log(curr_data.school_req_id)
   // console.log(e,i,item);
   this.Total[i] = e*item;

ng8-seed/src/app/components/project-list/project-list.component.html

@@ -18,7 +18,7 @@
          <div fxFlex.sm="33.33" fxFlex.xs="100" fxFlex.md="23.33" fxFlex.lg="23.33" fxFlex.xl="23.33" class="m-gap p-gap" style="margin-left: 5px;" *ngFor="let schooldetails of school_list" (click)="getschDetails(schooldetails)"> 
             <div class="p-list-main mb-2">
                  <div class="p-list">                     
-                     <div class="top"><img src="{{schooldetails.images[0]}}" onerror="this.onerror=null;this.src='assets/images/csr-img/error_img.jpg';"></div>
+                     <div class="top"><img src="{{schooldetails.images[0] || schooldetails.images}}" onerror="this.onerror=null;this.src='assets/images/csr-img/error_img.jpg';"></div>
                      <div class="bottom">
                          <div class="left">
                              <div class="details" style="width: unset !important;">
@@ -28,8 +28,8 @@
                              <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
                          </div>
                      </div>
-                     <div class="inside">
+                     <div class="inside" *ngIf="schooldetails.school_name != 'More'">
-                         <div class="icon"><i class="material-icons">info_outline</i></div>
+                         <div class="icon"><mat-icon>info_outline</mat-icon></div>
                          <div class="contents">
                              <table>
                                  <!-- <tr>
@@ -54,11 +54,11 @@
                  </div>
              </div> 
         </div>
-         <div fxFlex.sm="33.33" fxFlex.xs="100" fxFlex.md="23.33" fxFlex.lg="23.33" fxFlex.xl="23.33" class="m-gap p-gap"> 
+         <!-- <div fxFlex.sm="33.33" fxFlex.xs="100" fxFlex.md="23.33" fxFlex.lg="23.33" fxFlex.xl="23.33" class="m-gap p-gap"> 
-            <mat-card style="height: 85%;" fxLayoutAlign="center center" [routerLink]="['/contribute']">
+            <mat-card style="height: 85%; background-image: linear-gradient(cyan, orange);border-radius: 10px;" fxLayoutAlign="center center" [routerLink]="['/contribute']">
             <h1 class="text"><span> More</span></h1>
             </mat-card>
-        </div>
+        </div> -->
           
          <!-- <div fxFlex.sm="33.33" fxFlex.xs="100" fxFlex.sm="50" fxFlex.md="23.33" fxFlex.lg="23.33" fxFlex.xl="23.33" class="m-gap p-gap"> -->
              <!-- <div class="p-list-main mb-2">

ng8-seed/src/app/components/project-list/project-list.component.scss

@@ -201,9 +201,9 @@ mat-card{
     border-radius: 4px;
     // background-color: #e91e63;
     border: none;
-    color: #51caca;
+    color: white;
     text-align: center;
-    font-size: 30px;
+    font-size: 35px;
     padding: 5px;
     width: 200px;
     transition: all 0.5s;
@@ -228,6 +228,7 @@ mat-card{
   
   .text:hover span {
     padding-right: 25px;
+    color:rgb(225, 0, 255)
   }
   
   .text:hover span:after {

ng8-seed/src/app/components/project-list/project-list.component.ts

@@ -31,6 +31,10 @@ export class ProjectListComponent implements OnInit {
       // this.school_list = schDet['records'].filter(sch=>sch.is_featured==this.is_featured)[0];
       this.school_list = schDet['records'];
       this.school_list = this.school_list.filter(sch=>sch.is_featured==1);
+      this.school_list.push({school_name:"More",images:['assets/images/csr-img/school_empty.jpg']})
+      // this.school_list[this.school_list.length-1].images.push('assets/images/csr-img/school_empty.jpg')
+      console.log(this.school_list);
+      
       // console.log(this.school_list); 
         
     })
@@ -50,9 +54,14 @@ export class ProjectListComponent implements OnInit {
 
   getschDetails(schDetails)
   { 
+    if(schDetails.school_name != 'More'){
       let data = {'school_name':schDetails.school_name,'images':schDetails.images,'district_name':schDetails.district_name,'total_b':schDetails.total_b,'total_g':schDetails.total_g,'total':schDetails.total,'teach_tot':schDetails.teach_tot,'nonteach_tot':schDetails.nonteach_tot,'totstaff':schDetails.totstaff,'total_cost':schDetails.total_cost,'total_recevied':schDetails.total_recevied,'school_id':schDetails.school_id,'block_name':schDetails.block_name,'management':schDetails.management,'category':schDetails.category,'high_class':schDetails.high_class,'low_class':schDetails.low_class,'latitude':schDetails.longitude,'longitude':schDetails.longitude,'school_req_id':schDetails.school_req_id}; 
 
       this.schInfo.updateDetails(data);
       this.router.navigate(['/home/project-detail',{schoolreqid:schDetails.school_id}]);
     }
+    else{
+      this.router.navigate(['/contribute']);
+    }
+  }
 }

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

@@ -18,7 +18,12 @@
                     <br>
                     <br>
                     <h5 style="color:#a8760d;text-align: center;">{{data.org_name != '' ?  'M/S'+' '+data.org_name : 'Mr/Ms'+' '+data.logged_user_name}}</h5>
-                    <p style="text-align: center;color:#5b5858de;font-size: 14px;">in acknowledgement of the valuable conribution made towards improvement of government<br> schools in tamil nadu </p>
+                    <div style="text-align: center;justify-content: center">
+                    <div style="text-align:center;justify-content: center">
+                    <p style="text-align: center;color:#5b5858de;font-size: 14px;">
+                        in acknowledgement of the valuable contribution made towards <br/>improvement of Government schools in Tamil Nadu </p>
+                </div>
+            </div>
                     <br>
                     <h4 style="text-align: center;">School Education Department </h4>
                     <h2 style="text-align: center;">Government of Tamil Nadu </h2>

ng8-seed/src/app/dashboard/dashboard.component.html

@@ -47,27 +47,47 @@ showCaptions="true"
 </div>
 <div class="text-center" fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="50" fxFlex.lg="50" fxFlex.xl="50">
    <h5 style="color:#e41f1f;font-style: italic;">"Be a Champion of Change for Government Schools"</h5>
-<div class="mt-0">
+<div class="mt-0" fxLayout="row" fxLayout.xs="column" fxLayout.sm="column" fxLayoutAlign="center" fxLayoutGap.lg="10px" fxLayoutGap="10px">
-    <mat-card-title><h5 class="mt-0 mb-1 text-center">Support Recieved</h5></mat-card-title>
+   <div fxLayout="column">
+   <h5 >Support Recieved<br/><small style="font-size:12px;">through this portal</small></h5>
     <hr style="border-top:2px solid rgb(81, 202, 202) !important;width:190px !important;">
-    <div fxLayout="row" class="text-center mt-2 mb-1">
+    <div fxLayout="column" class="text-center mt-2 mb-1">
          <div fxFlex="100">
-               <h2 class="mt-0 logo_one" style="color: #f9a22b !important;"><span>18</span></h2>
+               <h2 class="mt-0 logo_one" style="color: #f9a22b !important;"><span>{{support_and_req.supporters}}</span></h2>
                <p>Supporters</p>
             </div>
-      </div>
+      <!-- </div> -->
-      <div fxLayout="row" class="text-center mt-1 mb-1">
+      <!-- <div fxLayout="row" class="text-center mt-1 mb-1"> -->
             <div fxFlex="100">
-                  <h2 class="mt-0 logo_one" style="color: #a978e0 !important;"><span>Rs.8,00,000</span></h2>
+                  <h2 class="mt-0 logo_one" style="color: #a978e0 !important;"><span>&#8377;{{support_and_req.contributed_amount}}</span></h2>
                   <p>Contributed</p>
                </div>
+         </div> 
+      </div>
+      <div fxLayout="column">
+           <h5 >Requirements<small></small></h5>
+            <br/>
+            <hr style="border-top:2px solid rgb(81, 202, 202) !important;width:190px !important;">
+         <div fxLayout="column" class="text-center mt-2 mb-1">
+            <div fxFlex="100">
+                  <h2 class="mt-0 logo_one" style="color: #f9a22b !important;"><span>{{support_and_req.no_of_schools_posted}}</span></h2>
+                  <p>Schools </p>
+               </div>
+         <!-- </div> -->
+         <!-- <div fxLayout="row" class="text-center mt-1 mb-1"> -->
+               <div fxFlex="100">
+                     <h2 class="mt-0 logo_one" style="color: #a978e0 !important;"><span>&#8377;{{support_and_req.total_amount_required }}</span></h2>
+                     <p>Value of Support Needed</p>
+                  </div>
+            </div>
+      </div> 
    </div>
          <div fxLayout="row" class="text-center mt-1 mb-1">
                <div fxFlex="100">
                   <button mat-stroked-button class="text button" [routerLink]="['/contribute']"><span>Contribute</span></button>
                </div>
          </div>
-</div>
+
 </div>
 </div>
 

ng8-seed/src/app/dashboard/dashboard.component.ts

@@ -1,5 +1,6 @@
 import { Component, ViewChild } from '@angular/core';
 import { SlickCarouselComponent } from 'ngx-slick-carousel';
+import { ApiService } from 'app/shared/api.service';
 
 @Component({
   selector: 'app-dashboard',
@@ -23,7 +24,8 @@ export class DashboardComponent {
     {img: "assets/images/csr-img/TN_client_logo/12.png"},
     {img: "assets/images/csr-img/TN_client_logo/13.png"}
   ];
-  slideConfig = {"slidesToShow": 8, "slidesToScroll": 1,"dots": true,"infinite": true,"autoplay": true,"autoplaySpeed": 1200};
+  slideConfig = {"slidesToShow": 8, "slidesToScroll": 1,"dots": false,"infinite": true,"autoplay": true,"autoplaySpeed": 1200};
+  support_and_req: any={supporters:'',contributed_amount:'',no_of_schools_posted:'',total_amount_required:''};
   
   // addSlide() {
   //   this.slides.push({img: "http://placehold.it/350x150/777777"})
@@ -53,9 +55,12 @@ export class DashboardComponent {
   width:string="300px;"
   imageSources=[{
     // url:'https://cdn.vox-cdn.com/uploads/chorus_image/image/56748793/dbohn_170625_1801_0018.0.0.jpg',
-    url:'assets/images/csr-img/s1.jpg',
+    url:'assets/images/csr-img/s1m.jpg',
     // caption:'First'
   },
+  {
+    url:'assets/images/csr-img/s6m.jpg'
+  },
   {
     // url:'https://cdn.vox-cdn.com/uploads/chorus_asset/file/9278671/jbareham_170917_2000_0124.jpg',
     url:'assets/images/csr-img/s2.jpg',
@@ -114,8 +119,19 @@ export class DashboardComponent {
     name:'Kit',
     card_class:'mc-6'
   }]
-  constructor() {
+  constructor(private apiService:ApiService) {
+    var tenK=100000
+    console.log(tenK.toLocaleString('en-IN'));
+
     this.txt=this.txt;
+    this.apiService.csrDashboardContent().subscribe(result=>{
+      if(result['dataStatus']){
+      this.support_and_req=result['records']
+      this.support_and_req.contributed_amount=parseInt(this.support_and_req.contributed_amount).toLocaleString('en-IN')
+      this.support_and_req.total_amount_required=parseInt(this.support_and_req.total_amount_required).toLocaleString('en-IN')
+      console.log(this.support_and_req)
+      }
+    })
   }
   ngAfterViewInit() {
     // Hack: Scrolls to top of Page after page view initialized

ng8-seed/src/app/layouts/admin/admin-layout.component.html

@@ -4,7 +4,7 @@
       <div class="opt-side relative ">
          <div class="sidebar-container ">
             <div class="branding text-center">
-                  <h2><img src="assets/images/csr-img/tn_logo.png" style="width:95%;height:54px;">
+                  <h2><img src="assets/images/csr-img/tn_logo.png" height="500px">
                </h2>
             </div>
             <div class="main-nav">
@@ -29,7 +29,13 @@
                </div> -->
                <mat-nav-list appAccordion class="navigation relative">
                   <mat-list-item appAccordionLink *ngFor="let menuitem of menuItems.getAll()">
-                     <a appAccordionToggle class="relative" mat-ripple (click)="navRedirectionHorizontal(menuitem)" *ngIf="menuitem.type === 'link'">
+                     <a appAccordionToggle class="relative" mat-ripple (click)="navRedirectionHorizontal(menuitem)" *ngIf="menuitem.type === 'link' && menuitem.name != 'My Account'">
+                     <mat-icon>{{ menuitem.icon }}</mat-icon>
+                     <span>{{ menuitem.name == 'Login' ? user_name == '' ? menuitem.name : 'Log Out' : menuitem.name  | translate }}</span>
+                     <span fxFlex></span>
+                     <span class="menu-badge mat-{{ badge.type }}" *ngFor="let badge of menuitem.badge">{{ badge.value }}</span>
+                     </a>
+                     <a appAccordionToggle class="relative" mat-ripple (click)="navRedirectionHorizontal(menuitem)" *ngIf="menuitem.type === 'link' && menuitem.name == 'My Account' && user_name != ''">
                         <mat-icon>{{ menuitem.icon }}</mat-icon>
                         <span>{{ menuitem.name == 'Login' ? user_name == '' ? menuitem.name : 'Log Out' : menuitem.name  | translate }}</span>
                         <span fxFlex></span>
@@ -74,7 +80,11 @@
       </div>
       <div class="bg-overlay"></div>
       </mat-sidenav>
+      <!-- <div class="header-bg-css">
+         <img  src="assets/images/csr-img/header-bg.png"/>
+      </div> -->
       <mat-toolbar class="main-header" style="height: 95px !important;">
+        
          <div class="horizontal-top-bar w-100">
            <!-- <div fxFlex.sm="100" fxFlex.xs="100" fxFlex.md="33.33" fxFlex.lg="33.33" fxFlex.xl="33.33" fxFlex="100">
             <div class="search-bar" fxFlex>
@@ -87,16 +97,16 @@
             <div fxFlex.sm="100" fxFlex.xs="100" fxFlex.md="33.33" fxFlex.lg="100.33" fxFlex.xl="33.33" fxFlex="100">
              <div class="horizontal-logo">
                <div class="header-name">
-                  <h2><a href="#"><img src="assets/images/csr-img/tn_logo.png" style="width:40%;height:60px;"></a>
+                  <h2><a href="#"><img src="assets/images/csr-img/tn_logo.png" style="width:320px;height:80px;"></a>
                   </h2>
                </div>
             </div>
             </div>
-            <div fxFlex.sm="100" fxFlex.xs="100" fxFlex.md="33.33" fxFlex.lg="63.33" fxFlex.xl="33.33" fxFlex="100">
+            <div fxFlex.sm="100" fxFlex.xs="100" fxFlex.md="99.33" fxFlex.lg="63.33" fxFlex.xl="53.33" fxFlex="100">
-                  <div class="horizontal-menu" style="text-align: right;">
+                  <div class="horizontal-menu" style="text-align: right;margin-right: 40px;">
                   <nav>
-                        <ul class="main-h-list" style="font-size: 16px;">
+                        <ul class="main-h-list" style="font-size: 18px;font-weight: bold">
-                           <li *ngFor="let menuitem of horizontalMenuItems.getAll()">
+                           <li *ngFor="let menuitem of horizontalMenuItems.getAll()" class="vertical_nav">
                               <a  *ngIf="menuitem.type === 'link' && menuitem.name != 'Login'" (click)="navRedirection(menuitem)">
                               <!--<mat-icon>{{ menuitem.icon }}</mat-icon>-->
                               <span><strong>{{  menuitem.name == 'Login' ? user_name == '' ? menuitem.name : '' : menuitem.name | translate }}</strong></span>

ng8-seed/src/app/layouts/admin/admin-layout.component.ts

@@ -249,7 +249,7 @@ export class AdminLayoutComponent implements OnInit, OnDestroy {
         return;
       }
     }
-    if(menuitem.name == 'General Guidelines'){
+    if(menuitem.name == 'Guidelines'){
       window.open("https://contribute.tnschools.gov.in/img/Champion_Of_Change.pdf")
     }
     else{
@@ -276,13 +276,18 @@ export class AdminLayoutComponent implements OnInit, OnDestroy {
         // return
         // this.router.navigateByUrl('/user-profile')
         this.signOut()
+        return;
         
       }
       else{
         // this.router.navigateByUrl('/'+menuitem.state)
         this.loginScreen()
+        return;
       }
     }
+    if(menuitem.name == 'Guidelines'){
+      window.open("https://contribute.tnschools.gov.in/img/Champion_Of_Change.pdf")
+    }
     else{
     this.router.navigateByUrl('/'+menuitem.state)
     }

ng8-seed/src/app/shared/api.service.ts

@@ -174,6 +174,10 @@ export class ApiService {
   checkTxnStatus(param){
     return this.http.post(apiUrl+'checkTxnStatus',param).pipe(catchError(err=>this.handleError(err)))
   }
+  csrDashboardContent(){
+    return this.http.get(apiUrl+'csrDashboardContent').pipe
+    (catchError(err=>this.handleError(err)))
+  }
 
  
 }

ng8-seed/src/app/shared/menu-items/menu-items.ts

@@ -25,7 +25,7 @@ const MENUITEMS : Menu[] = [
     state: 'home',
     name: 'HOME',
     type: 'link',
-    icon: 'explore'
+    icon: 'home'
   },
   // {
   //   state: 'authentication',
@@ -61,6 +61,18 @@ const MENUITEMS : Menu[] = [
     type: 'link',
     icon: 'list'
   },
+  {
+    state: '',
+    name: 'Guidelines',
+    type: 'link',
+    icon: 'note'
+  },
+  {
+    state:'user-profile',
+    name:'My Account',
+    type:'link',
+    icon:'account_circle'
+  },
   // {
   //   state: 'apps',
   //   name: 'Pages',

ng8-seed/src/assets/styles/scss/core/_main-header.scss

@@ -70,13 +70,19 @@ mat-toolbar {
 }
 
 .branding {
-    height: 64px;
+    // height: 214px;
     padding: 1rem 0;
     h2 {
         margin: 0;
         font-size: 1.8rem;
     }
 }
+.vertical_nav  :hover{
+    // padding: 13px;
+    // font-size: 19px;
+    // color:cadetblue
+    color:rgb(167, 195, 196)
+}
 
 .search-in {
     .search-bar {
@@ -114,7 +120,7 @@ mat-toolbar {
             }
             .logo {
                 width: 87px;
-                height: 20px;
+                height: 50px;
                 -webkit-background-size: 87px 20px;
                 background-size: 87px 20px;
             }

ng8-seed/src/assets/styles/scss/core/_main-panel.scss

@@ -103,8 +103,10 @@ $mat-toolbar-height-mobile-landscape: 48px !default;
     .horizontal-menu {
         // background: #fff;
         // box-shadow: 0 0px 6px rgba(0, 0, 0, 0.1);
+        z-index: 3;
         color:rgb(248, 252, 250);
         .main-h-list {
+            z-index:3;
             padding: 0;
             margin: 0;
             >li {

ng8-seed/src/assets/styles/scss/core/_main-sidebar.scss

@@ -397,12 +397,34 @@
     }
     .header-cyan{
         .mat-toolbar.main-header{
-            background: rgb(81, 202, 202) !important
+            // background: rgb(81, 202, 202) !important;
+            // background: url('assets/images/csr-img/header-bg.png');
+            // background-image: linear-gradient(-70deg,rgb(81, 202, 202),rgba(103, 58, 183, 0.7));
+            background-image: linear-gradient(to bottom right,rgb(81, 202, 202),rgba(138, 99, 206, 0.7));
+            // background-size: 400px 100px;
+            // background-repeat: no-repeat;
+            // opacity: 0.10;
+        }
+    }
+    .header-bg-css{
+        display: none;
+        height: 100px;
+        width:260px;
+        opacity:0.10;
+        position: absolute;
+        top:1.5%;
+        left:40%;
+        z-index: 2;
+    }
+    @media(max-width:1072px){
+        .header-bg-css{
+            display: none;
         }
     }
     .color-cyan{
         .mat-toolbar.main-header{
             color:rgb(81, 202, 202) !important
+            
         }
     }