Fairoj : Mobile Responsive table implemented
This commit is contained in:
venbatechnologies@gmail.com
parent
477867e1bd
commit
79a3ebe2a3
@ -6,7 +6,7 @@
|
||||
<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" fxLayout.sm="column" 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" >
|
||||
@ -14,8 +14,8 @@
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
<mat-form-field dividerColor="accent" class="ml-xs mr-xs" style="width: 100%;">
|
||||
<mat-select placeholder="Select Schools" formControlName="schoold_id">
|
||||
<mat-form-field dividerColor="accent" class="ml-xs mr-xs" style="width: 100%;" fxFlex.xs="50">
|
||||
<mat-select placeholder="Select School" formControlName="schoold_id">
|
||||
<mat-option *ngFor="let item of school" [value]="item.school_id" >
|
||||
{{ item.school_name }}
|
||||
</mat-option>
|
||||
@ -48,7 +48,8 @@
|
||||
</form>
|
||||
|
||||
<!--*********************-->
|
||||
<div [ngClass]="{'example-container mat-elevation-z8':clientWidth >= 500}" #table_element>
|
||||
<!-- [ngClass]="{'example-container mat-elevation-z8':clientWidth >= 500}" -->
|
||||
<div #table_element>
|
||||
<mat-table [dataSource]="dataSource" matSort *ngIf="dataStatus;else status">
|
||||
|
||||
<!-- Requirement Column -->
|
||||
@ -58,61 +59,62 @@
|
||||
</ng-container> -->
|
||||
|
||||
<!-- Item Need Column -->
|
||||
<ng-container matColumnDef="Item Need">
|
||||
<ng-container matColumnDef="Item_Need">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header>Item Needed</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row" class="product-thumbnail"><span> {{row.material_name}} </span></mat-cell>
|
||||
<mat-cell *matCellDef="let row" data-label="Item Needed" class="product-thumbnail"><span> {{row.material_name}} </span></mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- School Column -->
|
||||
<ng-container matColumnDef="School">
|
||||
<th style="width: 25% !important;text-align: center !important;" mat-header-cell *matHeaderCellDef mat-sort-header>School</th>
|
||||
<td style="width: 25% !important;" mat-cell *matCellDef="let row"> <a (click)="goToProjectDet(row)">{{row.school_name}}</a>, {{row.block_name}} Block, {{row.district_name}} District.</td>
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header>School</mat-header-cell>
|
||||
<mat-cell data-label="School" *matCellDef="let row"><span> <a (click)="goToProjectDet(row)">{{row.school_name}}</a>,<br/> {{row.block_name}} Block, {{row.district_name}} District.</span></mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Quantity Column -->
|
||||
<ng-container matColumnDef="Required Qty">
|
||||
<th style="width: 4% !important;text-align: center;" mat-header-cell *matHeaderCellDef > Required Qty </th>
|
||||
<td style="width: 4% !important;text-align: center;" mat-cell *matCellDef="let row"> {{row.qty}}</td>
|
||||
<ng-container matColumnDef="Required_Qty">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header> Required Qty </mat-header-cell>
|
||||
<mat-cell data-label="Required Qty" *matCellDef="let row"> {{row.qty}}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="Received Qty">
|
||||
<th style="width: 4% !important;text-align: center;" mat-header-cell *matHeaderCellDef > Received Qty </th>
|
||||
<td style="width: 4% !important;text-align: center;" mat-cell *matCellDef="let row"> {{row.received_qty}}</td>
|
||||
<ng-container matColumnDef="Received_Qty">
|
||||
<mat-header-cell *matHeaderCellDef > Received Qty </mat-header-cell>
|
||||
<mat-cell data-label="Received Qty" *matCellDef="let row"> {{row.received_qty}}</mat-cell>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="balance Qty">
|
||||
<th style="width: 4% !important;text-align: center;" mat-header-cell *matHeaderCellDef > Balance Qty </th>
|
||||
<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 matColumnDef="balance_Qty">
|
||||
<mat-header-cell *matHeaderCellDef > Balance Qty </mat-header-cell>
|
||||
<mat-cell data-label="balance Qty" *matCellDef="let row"> {{row.qty-row.received_qty <= 0 ? '' : row.qty-row.received_qty }}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Sponsor Column -->
|
||||
<ng-container matColumnDef="Sponsor Qty">
|
||||
<th style="width: 10% !important;text-align: center;" mat-header-cell *matHeaderCellDef > Sponsored Qty </th>
|
||||
<td style="width: 10% !important;text-align: center;" mat-cell *matCellDef="let row;let i = index"> <input step="1" min="1" max="" title="Qty" [(ngModel)]="sponsor_qty[i]" class="text" size="2" type="number" (change)="somethingChanged($event.target.value,i,row.cost_per_unit,row.mat_id,row)" style="width: 100% !important;text-align: center;"> </td>
|
||||
<ng-container matColumnDef="Sponsor_Qty">
|
||||
<mat-header-cell *matHeaderCellDef > Sponsored Qty </mat-header-cell>
|
||||
<mat-cell data-label="Sponsored Qty" *matCellDef="let row;let i = index"> <input step="1" min="1" max="" title="Qty" [(ngModel)]="sponsor_qty[i]" class="text" size="2" type="number" (change)="somethingChanged($event.target.value,i,row.cost_per_unit,row.mat_id,row)"
|
||||
class="sponsor_input" > </mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- price Column -->
|
||||
<ng-container matColumnDef="Cost Per Unit">
|
||||
<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>
|
||||
<ng-container matColumnDef="Cost_Per_Unit">
|
||||
<mat-header-cell *matHeaderCellDef > Cost Per Unit<br> (in Rs) </mat-header-cell>
|
||||
<mat-cell data-label="Cost/Qty" style="text-align: right;" *matCellDef="let row;" > {{row.cost_per_unit === null?0:row.cost_per_unit}} </mat-cell>
|
||||
<!-- <td mat-footer-cell *matFooterCellDef> Total </td> -->
|
||||
</ng-container>
|
||||
|
||||
<!-- Total Column -->
|
||||
<ng-container matColumnDef="Amount">
|
||||
<th style="width: 8% !important;text-align: right;" mat-header-cell *matHeaderCellDef style="text-align: right;"> Amount <br/>(in Rs) </th>
|
||||
<td style="width: 8% !important;text-align: right;" mat-cell *matCellDef="let row ;let i=index" style="text-align: right;">{{Total[i]}} </td>
|
||||
<mat-header-cell *matHeaderCellDef > Amount <br/>(in Rs) </mat-header-cell>
|
||||
<mat-cell data-label="Amount" *matCellDef="let row ;let i=index" >{{Total[i]}} </mat-cell>
|
||||
<!-- <td mat-footer-cell *matFooterCellDef> {{somethingChanged()}} </td> -->
|
||||
</ng-container>
|
||||
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
|
||||
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
|
||||
<mat-row mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
|
||||
<!-- <tr mat-footer-row *matFooterRowDef="tableColumns"></tr> -->
|
||||
</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">
|
||||
<tr class="order-total" style="text-align: right;">
|
||||
<td style="font-weight: bold;">Total</td>
|
||||
<td style="font-weight: bold;text-align: right">Total</td>
|
||||
<td> <strong><span class="amount"><span class="currency-symbol">₹</span>{{grandTotal}}</span></strong></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
@ -19,19 +19,19 @@ a {
|
||||
text-decoration: underline;
|
||||
color: #4CAF50;
|
||||
}
|
||||
table {
|
||||
// width: 100%;
|
||||
}
|
||||
// table {
|
||||
// // width: 100%;
|
||||
// }
|
||||
|
||||
.mat-form-field {
|
||||
font-size: 14px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
td, th {
|
||||
width: 25%;
|
||||
// text-align: center;
|
||||
}
|
||||
// .mat-cell, .mat-header-cell {
|
||||
// // width: 35%;
|
||||
// // text-align: center;
|
||||
// }
|
||||
table.shop-table {
|
||||
// border-collapse: separate;
|
||||
border-spacing: 0;
|
||||
@ -51,6 +51,7 @@ a {
|
||||
|
||||
.table-responsive {
|
||||
text-align: right;
|
||||
// border:2px solid black;
|
||||
}
|
||||
|
||||
.calculated-shipping {
|
||||
@ -67,16 +68,17 @@ a {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
table.shop-table th {
|
||||
table.shop-table .mat-header-cell {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
table td,
|
||||
table th {
|
||||
.mat-table .mat-cell,
|
||||
.mat-table .mat-header-cell, mat-cell {
|
||||
border: none;
|
||||
border-bottom: 1px solid #e9e9e9;
|
||||
padding: 4px;
|
||||
// border-bottom: 1px solid #e9e9e9;
|
||||
padding: 12px 16px 12px 0;
|
||||
vertical-align: middle;
|
||||
|
||||
}
|
||||
|
||||
.order-total {
|
||||
@ -150,3 +152,100 @@ a {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 960px) {
|
||||
.mat-table {
|
||||
border: 0;
|
||||
vertical-align: middle
|
||||
}
|
||||
|
||||
.mat-table caption {
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
/* Enable this to hide header*/
|
||||
.mat-table .mat-header-cell {
|
||||
|
||||
border: 10px solid;
|
||||
clip: rect(0 0 0 0);
|
||||
height: 1px;
|
||||
margin: -1px;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
}
|
||||
|
||||
.mat-table .mat-row {
|
||||
border-bottom: 5px solid #ddd;
|
||||
display: block;
|
||||
}
|
||||
/*
|
||||
.mat-table .mat-row:nth-child(even) {background: #CCC}
|
||||
.mat-table .mat-row:nth-child(odd) {background: #FFF}
|
||||
*/
|
||||
.mat-table .mat-cell {
|
||||
border-bottom: 1px solid #ddd;
|
||||
display: block;
|
||||
font-size: 1em;
|
||||
text-align: right;
|
||||
font-weight: bold;
|
||||
//height:20px;
|
||||
// margin-bottom: 4%;
|
||||
}
|
||||
.mat-table .mat-cell:before {
|
||||
/*
|
||||
* aria-label has no advantage, it won't be read inside a table
|
||||
content: attr(aria-label);
|
||||
*/
|
||||
content: attr(data-label);
|
||||
float: left;
|
||||
text-transform: uppercase;
|
||||
font-weight: normal;
|
||||
|
||||
font-size: .85em;
|
||||
}
|
||||
.mat-table .mat-cell:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
.mat-table .mat-cell:first-child {
|
||||
margin-top: 4%;
|
||||
}
|
||||
}
|
||||
.mat-column-School{
|
||||
flex: 0 0 18%;
|
||||
}
|
||||
.mat-column-Item_Need{
|
||||
flex: 0 0 18%;
|
||||
|
||||
}
|
||||
.mat-column-Required_Qty{
|
||||
|
||||
justify-content: center;
|
||||
|
||||
}
|
||||
.mat-column-Received_Qty{
|
||||
justify-content: center;
|
||||
|
||||
}
|
||||
.mat-column-balance_Qty{
|
||||
justify-content: center;
|
||||
|
||||
}
|
||||
.mat-column-Cost_Per_Unit{
|
||||
flex: 0 0 12%;
|
||||
justify-content: flex-end !important;
|
||||
}
|
||||
.mat-column-Amount{
|
||||
justify-content: flex-end !important;
|
||||
|
||||
|
||||
}
|
||||
.sponsor_input{
|
||||
width: 100% ;
|
||||
text-align: center;
|
||||
}
|
||||
@media(max-width:580px){
|
||||
.sponsor_input{
|
||||
width:30%;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
@ -15,7 +15,7 @@ import { SchoolDetailsService } from 'app/shared/school-details.service';
|
||||
})
|
||||
export class ContributeComponent implements OnInit {
|
||||
|
||||
displayedColumns: string[] = [ 'Item Need', 'School', 'Required Qty','Received Qty','balance Qty', 'Sponsor Qty', 'Cost Per Unit', 'Amount'];
|
||||
displayedColumns: string[] = [ 'Item_Need', 'School', 'Required_Qty','Received_Qty','balance_Qty', 'Sponsor_Qty', 'Cost_Per_Unit', 'Amount'];
|
||||
dataSource:any = new MatTableDataSource();
|
||||
dataLength :number;
|
||||
@ViewChild(MatPaginator, {static: true}) paginator: MatPaginator;
|
||||
@ -330,6 +330,7 @@ export class ContributeComponent implements OnInit {
|
||||
// this.table_element=this.table_element.nativeElement.clientWidth
|
||||
this.clientWidth=this.table_element.nativeElement.clientWidth
|
||||
console.log("table elemnt",this.clientWidth);
|
||||
//this.clientWidth <=500 ? this.pageSize=4 : 10
|
||||
|
||||
}
|
||||
|
||||
|
||||
@ -288,88 +288,90 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</mat-card-content> -->
|
||||
<div class="mat-elevation-z8">
|
||||
<table mat-table [dataSource]="dataSource" matSort>
|
||||
|
||||
<!-- Requirement Column -->
|
||||
<!-- <ng-container matColumnDef="Requirement">
|
||||
<th style="width: 15% !important;" mat-header-cell *matHeaderCellDef mat-sort-header></th>
|
||||
<td style="width: 15% !important;" mat-cell *matCellDef="let row" class="product-thumbnail"><img src="{{row.img_url}}" onerror="this.onerror=null;this.src='assets/images/csr-img/error_img.jpg';" alt="School Img" width="70"></td>
|
||||
</ng-container> -->
|
||||
|
||||
<!-- Item Need Column -->
|
||||
<ng-container matColumnDef="Item Need">
|
||||
<th style="width: 20% !important;" mat-header-cell *matHeaderCellDef mat-sort-header>Item Needed</th>
|
||||
<td style="width: 20% !important;" mat-cell *matCellDef="let row" class="product-thumbnail">{{row.material_name}} </td>
|
||||
</ng-container>
|
||||
|
||||
<!-- School Column -->
|
||||
<!-- <ng-container matColumnDef="School">
|
||||
<th style="width: 25% !important;text-align: center !important;" mat-header-cell *matHeaderCellDef mat-sort-header>School</th>
|
||||
<td style="width: 25% !important;" mat-cell *matCellDef="let row"> <a (click)="goToProjectDet(row)">{{row.school_name}}</a>, {{row.block_name}} Block, {{row.district_name}} District.</td>
|
||||
</ng-container> -->
|
||||
<ng-container matColumnDef="School">
|
||||
<th style="width: 25% !important;text-align: center !important;" mat-header-cell *matHeaderCellDef mat-sort-header>Description</th>
|
||||
<td style="width: 25% !important;" mat-cell *matCellDef="let row"> {{row.desc}}</td>
|
||||
</ng-container>
|
||||
|
||||
<!-- Quantity Column -->
|
||||
<ng-container matColumnDef="Required Qty">
|
||||
<th style="width: 10% !important;" mat-header-cell *matHeaderCellDef mat-sort-header> Required Qty </th>
|
||||
<td style="width: 10% !important;text-align: center;" mat-cell *matCellDef="let row"> {{row.qty}}</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="Received Qty">
|
||||
<th style="width: 10% !important;" mat-header-cell *matHeaderCellDef mat-sort-header> Received Qty </th>
|
||||
<td style="width: 10% !important;text-align: center;" mat-cell *matCellDef="let row"> {{row.received_qty}}</td>
|
||||
</mat-card>-->
|
||||
<div #table_element>
|
||||
<mat-table [dataSource]="dataSource" matSort *ngIf="dataStatus;else status">
|
||||
|
||||
<!-- Requirement Column -->
|
||||
<!-- <ng-container matColumnDef="Requirement">
|
||||
<th style="width: 15% !important;" mat-header-cell *matHeaderCellDef ></th>
|
||||
<td style="width: 15% !important;" mat-cell *matCellDef="let row" class="product-thumbnail"><img src="{{row.img_url}}" onerror="this.onerror=null;this.src='assets/images/csr-img/error_img.jpg';" alt="School Img" width="70"></td>
|
||||
</ng-container> -->
|
||||
|
||||
<!-- Item Need Column -->
|
||||
<ng-container matColumnDef="Item_Need">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header>Item Needed</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row" data-label="Item Needed" class="product-thumbnail"><span> {{row.material_name}} </span></mat-cell>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="balance Qty">
|
||||
<th style="width: 8% !important;" mat-header-cell *matHeaderCellDef mat-sort-header> 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>
|
||||
|
||||
<!-- School Column -->
|
||||
<ng-container matColumnDef="School">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header>Description</mat-header-cell>
|
||||
<mat-cell data-label="Description" *matCellDef="let row"><span> {{row.desc}}</span></mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Quantity Column -->
|
||||
<ng-container matColumnDef="Required_Qty">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header> Required Qty </mat-header-cell>
|
||||
<mat-cell data-label="Required Qty" *matCellDef="let row"> {{row.qty}}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="Received_Qty">
|
||||
<mat-header-cell *matHeaderCellDef > Received Qty </mat-header-cell>
|
||||
<mat-cell data-label="Received Qty" *matCellDef="let row"> {{row.received_qty}}</mat-cell>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="balance_Qty">
|
||||
<mat-header-cell *matHeaderCellDef > Balance Qty </mat-header-cell>
|
||||
<mat-cell data-label="balance Qty" *matCellDef="let row"> {{row.qty-row.received_qty <= 0 ? '' : row.qty-row.received_qty }}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Sponsor Column -->
|
||||
<ng-container matColumnDef="Sponsor Qty">
|
||||
<th style="width: 10% !important;" mat-header-cell *matHeaderCellDef mat-sort-header> Sponsored Qty </th>
|
||||
<td style="width: 10% !important;" mat-cell *matCellDef="let row;let i = index"> <input step="1" min="1" max="" title="Qty" [(ngModel)]="sponsor_qty[i]" class="text" size="2" type="number" (change)="somethingChanged($event.target.value,i,row.cost_per_unit,row.mat_id,row)" style="width: 100% !important;text-align: center;"> </td>
|
||||
</ng-container>
|
||||
|
||||
<!-- price Column -->
|
||||
<ng-container matColumnDef="Cost Per Unit">
|
||||
<th style="width: 10% !important;text-align: right;" mat-header-cell *matHeaderCellDef mat-sort-header > Cost Per Unit <br/> (in Rs) </th>
|
||||
<td style="width: 10% !important;" mat-cell *matCellDef="let row;" style="text-align: right;"> {{row.cost_per_unit === null?0:row.cost_per_unit}} </td>
|
||||
<!-- <td mat-footer-cell *matFooterCellDef> Total </td> -->
|
||||
</ng-container>
|
||||
|
||||
<!-- Total Column -->
|
||||
<ng-container matColumnDef="Amount">
|
||||
<th style="width: 20% !important;" mat-header-cell *matHeaderCellDef mat-sort-header style="text-align: right;"> Amount (in Rs) </th>
|
||||
<td style="width: 20% !important;" mat-cell *matCellDef="let row ;let i=index" style="text-align: right;">{{Total[i]}} </td>
|
||||
<!-- <td mat-footer-cell *matFooterCellDef> {{somethingChanged()}} </td> -->
|
||||
</ng-container>
|
||||
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
|
||||
<!-- <tr mat-footer-row *matFooterRowDef="tableColumns"></tr> -->
|
||||
</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;">
|
||||
<tr class="order-total" style="text-align: right;">
|
||||
<td style="font-weight: bold;">Total</td>
|
||||
<td> <strong><span class="amount"><span class="currency-symbol">₹</span>{{grandTotal}}</span></strong></td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <mat-paginator [pageSize]="pageSize" [pageSizeOptions]="[5, 10, 25, 50, 100]" showFirstLastButtons></mat-paginator> -->
|
||||
|
||||
<div class="pt-1 pr-1" style="text-align: right;font-weight: bold;">
|
||||
<button mat-raised-button color="primary" (click)="finalSave(2)" class="mr-1 mb-1"><span style="font-weight: bold;font-size: 16px">I'd like to Contribute in kind</span></button>
|
||||
<button (click)="finalSave(1)" color="secondary" mat-raised-button style="font-style:bold;background-color:rgb(69, 189, 189);color:white" ><span style="font-weight: bold;background-color:rgb(69, 189, 189);color:white;font-size: 16px">I'd like to Contribute in Cash</span></button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Sponsor Column -->
|
||||
<ng-container matColumnDef="Sponsor_Qty">
|
||||
<mat-header-cell *matHeaderCellDef > Sponsored Qty </mat-header-cell>
|
||||
<mat-cell data-label="Sponsored Qty" *matCellDef="let row;let i = index"> <input step="1" min="1" max="" title="Qty" [(ngModel)]="sponsor_qty[i]" class="text" size="2" type="number" (change)="somethingChanged($event.target.value,i,row.cost_per_unit,row.mat_id,row)"
|
||||
[ngClass]="{
|
||||
'sponsor_input_desk':clientWidth >= 500,
|
||||
'sponsor_input_mob':clientWidth <= 500
|
||||
}" > </mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- price Column -->
|
||||
<ng-container matColumnDef="Cost_Per_Unit">
|
||||
<mat-header-cell *matHeaderCellDef > Cost Per Unit<br> (in Rs) </mat-header-cell>
|
||||
<mat-cell data-label="Cost/Qty" style="text-align: right;" *matCellDef="let row;" > {{row.cost_per_unit === null?0:row.cost_per_unit}} </mat-cell>
|
||||
<!-- <td mat-footer-cell *matFooterCellDef> Total </td> -->
|
||||
</ng-container>
|
||||
|
||||
<!-- Total Column -->
|
||||
<ng-container matColumnDef="Amount">
|
||||
<mat-header-cell *matHeaderCellDef > Amount <br/>(in Rs) </mat-header-cell>
|
||||
<mat-cell data-label="Amount" style="text-align: right;" *matCellDef="let row ;let i=index" style="text-align: right;">{{Total[i]}} </mat-cell>
|
||||
<!-- <td mat-footer-cell *matFooterCellDef> {{somethingChanged()}} </td> -->
|
||||
</ng-container>
|
||||
|
||||
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
|
||||
<mat-row mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
|
||||
<!-- <tr mat-footer-row *matFooterRowDef="tableColumns"></tr> -->
|
||||
</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;justify-content: right;float:right;" *ngIf="dataStatus">
|
||||
<tr class="order-total" style="text-align: right;">
|
||||
<td style="font-weight: bold;text-align: right">Total</td>
|
||||
<td> <strong><span class="amount"><span class="currency-symbol">₹</span>{{grandTotal}}</span></strong></td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<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 (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>
|
||||
<ng-template #status><h2>{{msg}}</h2></ng-template>
|
||||
|
||||
<!-- </mat-tab>-->
|
||||
<!-- <mat-tab>
|
||||
<ng-template mat-tab-label>Updates</ng-template>
|
||||
|
||||
@ -92,7 +92,7 @@ table {
|
||||
width: 60%;
|
||||
}
|
||||
|
||||
td, th {
|
||||
.mat-cell, .mat-header-cell {
|
||||
border: 1px solid #dddddd;
|
||||
text-align: left;
|
||||
padding: 1%;
|
||||
@ -162,7 +162,7 @@ td, th {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
table {
|
||||
.mat-table {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@ -171,10 +171,10 @@ td, th {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
td, th {
|
||||
width: 25%;
|
||||
// text-align: center;
|
||||
}
|
||||
// .mat-cell, .mat-header-cell {
|
||||
// // width: 25%;
|
||||
// // text-align: center;
|
||||
// }
|
||||
table.shop-table {
|
||||
// border-collapse: separate;
|
||||
border-spacing: 0;
|
||||
@ -194,6 +194,7 @@ td, th {
|
||||
|
||||
.table-responsive {
|
||||
text-align: left;
|
||||
// border:2px solid black;
|
||||
}
|
||||
|
||||
.calculated-shipping {
|
||||
@ -209,15 +210,15 @@ td, th {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
table.shop-table th {
|
||||
.mat-table.shop-table .mat-header-cell {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
table td,
|
||||
table th {
|
||||
.mat-table .mat-cell,
|
||||
.mat-table .mat-header-cell {
|
||||
border: none;
|
||||
border-bottom: 1px solid #e9e9e9;
|
||||
padding: 12px;
|
||||
//border-bottom: 1px solid #e9e9e9;
|
||||
// padding: 12px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
@ -303,3 +304,94 @@ table th {
|
||||
font-size: 14px;
|
||||
display: inline-block;
|
||||
}
|
||||
@media screen and (max-width: 960px) {
|
||||
.mat-table {
|
||||
border: 0;
|
||||
vertical-align: middle
|
||||
}
|
||||
|
||||
.mat-table caption {
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
/* Enable this to hide header*/
|
||||
.mat-table .mat-header-cell {
|
||||
|
||||
border: 10px solid;
|
||||
clip: rect(0 0 0 0);
|
||||
height: 1px;
|
||||
margin: -1px;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
}
|
||||
|
||||
.mat-table .mat-row {
|
||||
border-bottom: 5px solid #ddd;
|
||||
display: block;
|
||||
}
|
||||
/*
|
||||
.mat-table .mat-row:nth-child(even) {background: #CCC}
|
||||
.mat-table .mat-row:nth-child(odd) {background: #FFF}
|
||||
*/
|
||||
.mat-table .mat-cell {
|
||||
border-bottom: 1px solid #ddd;
|
||||
display: block;
|
||||
font-size: 1em;
|
||||
text-align: right;
|
||||
font-weight: bold;
|
||||
//height:20px;
|
||||
// margin-bottom: 4%;
|
||||
}
|
||||
.mat-table .mat-cell:before {
|
||||
/*
|
||||
* aria-label has no advantage, it won't be read inside a table
|
||||
content: attr(aria-label);
|
||||
*/
|
||||
content: attr(data-label);
|
||||
float: left;
|
||||
text-transform: uppercase;
|
||||
font-weight: normal;
|
||||
|
||||
font-size: .85em;
|
||||
}
|
||||
.mat-table .mat-cell:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
.mat-table .mat-cell:first-child {
|
||||
margin-top: 4%;
|
||||
}
|
||||
}
|
||||
.mat-column-School{
|
||||
flex: 0 0 18%;
|
||||
}
|
||||
.mat-column-Item_Need{
|
||||
flex: 0 0 18%;
|
||||
|
||||
}
|
||||
.mat-column-Required_Qty{
|
||||
|
||||
justify-content: center;
|
||||
|
||||
}
|
||||
.mat-column-Received_Qty{
|
||||
justify-content: center;
|
||||
|
||||
}
|
||||
.mat-column-Balance_Qty{
|
||||
justify-content: center;
|
||||
|
||||
}
|
||||
.mat-column-Cost_Per_Unit{
|
||||
justify-content: right;
|
||||
}
|
||||
.mat-column-Amount{
|
||||
justify-content: right;
|
||||
}
|
||||
.sponsor_input_desk{
|
||||
width: 100% ;
|
||||
text-align: center;
|
||||
}
|
||||
.sponsor_input_mob{
|
||||
width: 30%;
|
||||
}
|
||||
@ -1,10 +1,10 @@
|
||||
import { Component, OnInit, ViewChild } from '@angular/core';
|
||||
import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
|
||||
import { environment } from 'environments/environment';
|
||||
import { ApiService } from 'app/shared/api.service';
|
||||
import { FormBuilder } from '@angular/forms';
|
||||
import { Router, ActivatedRoute } from '@angular/router';
|
||||
import { SchoolDetailsService } from 'app/shared/school-details.service';
|
||||
import { MatTableDataSource } from '@angular/material';
|
||||
import { MatTableDataSource, MatPaginator } from '@angular/material';
|
||||
|
||||
@Component({
|
||||
selector: 'app-project-detail',
|
||||
@ -18,7 +18,7 @@ export class ProjectDetailComponent implements OnInit {
|
||||
|
||||
schoolInfo: any ;
|
||||
all_material_list: any;
|
||||
displayedColumns: string[] = [ 'Item Need', 'School', 'Required Qty','Received Qty','balance Qty', 'Sponsor Qty', 'Cost Per Unit', 'Amount'];
|
||||
displayedColumns: string[] = [ 'Item_Need', 'School', 'Required_Qty','Received_Qty','balance_Qty', 'Sponsor_Qty', 'Cost_Per_Unit', 'Amount'];
|
||||
dataSource:any = new MatTableDataSource();
|
||||
dataLength:any;
|
||||
pageSize = 10;
|
||||
@ -29,6 +29,11 @@ export class ProjectDetailComponent implements OnInit {
|
||||
grandTotal: any=[];
|
||||
general_devlop_amt: string;
|
||||
gen_dev_fund_remarks: any;
|
||||
dataStatus :boolean = true;
|
||||
msg: any;
|
||||
@ViewChild('table_element',{static:true}) table_element : ElementRef
|
||||
clientWidth: any;
|
||||
@ViewChild(MatPaginator, {static: true}) paginator: MatPaginator;
|
||||
|
||||
// types_of_funds=['State Fund','District Fund','School common Fund','For this Project']
|
||||
constructor(public restApi:ApiService,public fb:FormBuilder,public router:Router,public schInfo:SchoolDetailsService,private activatedRoute:ActivatedRoute) { }
|
||||
@ -49,6 +54,13 @@ export class ProjectDetailComponent implements OnInit {
|
||||
this.getSchoolReqList(this.schoolInfo.school_id);
|
||||
}
|
||||
}
|
||||
applyFilter(filterValue: string) {
|
||||
this.dataSource.filter = filterValue.trim().toLowerCase();
|
||||
|
||||
if (this.dataSource.paginator) {
|
||||
this.dataSource.paginator.firstPage();
|
||||
}
|
||||
}
|
||||
|
||||
somethingChanged(e,i,item,mat_id,curr_data){
|
||||
let bal_qty=curr_data.qty-curr_data.received_qty
|
||||
@ -180,6 +192,7 @@ getIndividualSchoolReqData(id){
|
||||
mat_id: ''
|
||||
};
|
||||
this.restApi.post(url, data).subscribe(schDet => {
|
||||
this.dataStatus = schDet.dataStatus;
|
||||
if (schDet.dataStatus == true) {
|
||||
// schDet.records.filter(val=>{
|
||||
// console.log("school det",val)
|
||||
@ -199,7 +212,7 @@ getIndividualSchoolReqData(id){
|
||||
this.dataLength=schDet.records.length
|
||||
this.all_material_list=schDet.records
|
||||
let projectList = schDet.records.filter(sch=>sch.school_id==this.schoolInfo.school_id)[0];
|
||||
|
||||
this.dataSource.paginator = this.paginator;
|
||||
// console.log(projectList);
|
||||
if(projectList !==undefined)
|
||||
{
|
||||
@ -228,6 +241,13 @@ getIndividualSchoolReqData(id){
|
||||
top.scrollIntoView();
|
||||
top = null;
|
||||
}
|
||||
setTimeout(() =>{
|
||||
console.log("da",this.dataSource)
|
||||
this.dataSource.paginator = this.paginator});
|
||||
this.clientWidth=this.table_element.nativeElement.clientWidth
|
||||
console.log("table elemnt",this.clientWidth);
|
||||
this.clientWidth <=500 ? this.pageSize=4 : 10
|
||||
|
||||
}
|
||||
|
||||
thumbnailClick(index){
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { RouterModule } from '@angular/router';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { MatIconModule, MatCardModule, MatButtonModule, MatListModule, MatProgressBarModule, MatMenuModule, MatFormField, MatFormFieldModule, MatInputModule, MatButtonToggleModule, MatTabsModule,MatSelectModule, MatRadioModule, MatTableDataSource, MatTableModule } from '@angular/material';
|
||||
import { MatIconModule, MatCardModule, MatButtonModule, MatListModule, MatProgressBarModule, MatMenuModule, MatFormField, MatFormFieldModule, MatInputModule, MatButtonToggleModule, MatTabsModule,MatSelectModule, MatRadioModule, MatTableDataSource, MatTableModule, MatPaginator, MatPaginatorModule } from '@angular/material';
|
||||
import { FlexLayoutModule } from '@angular/flex-layout';
|
||||
|
||||
import { ChartsModule } from 'ng2-charts/ng2-charts';
|
||||
@ -45,7 +45,7 @@ import { SlickCarouselModule } from 'ngx-slick-carousel';
|
||||
SlideshowModule,
|
||||
MatButtonToggleModule,
|
||||
MatTabsModule,
|
||||
|
||||
MatPaginatorModule,
|
||||
|
||||
],
|
||||
declarations: [ DashboardComponent,ProjectListComponent,ProjectDetailComponent ]
|
||||
|
||||
@ -1,12 +1,16 @@
|
||||
<div class="app search-i" [dir]="layoutDir" [ngClass]="[ menuLayout, selectedSidebarImage, selectedSidebarColor, selectedHeaderColor, collapsedClass]" [class.app-dark]="dark" [class.boxed]="boxed" [class.collapsed-sidebar]="collapseSidebar" [class.compact-sidebar]="compactSidebar" [class.bg-img-disable]="!sidebarBg">
|
||||
<mat-sidenav-container class="app-inner">
|
||||
<mat-sidenav #sidemenu class="sidebar-panel" id="sidebar-panel" [mode]="isOver() ? 'over' : 'side'" [opened]="!isOver()" (mouseover)="menuMouseOver()" (mouseout)="menuMouseOut()">
|
||||
<mat-sidenav #sidemenu class="sidebar-panel" id="sidebar-panel" [mode]="isOver() ? 'over' : 'side'" [opened]="!isOver()" (mouseover)="menuMouseOver()" (mouseout)="menuMouseOut()" (backdropClick)="closeSidenav()" position="end">
|
||||
<div class="opt-side relative ">
|
||||
<div class="sidebar-container ">
|
||||
<div class="branding text-center">
|
||||
<h2><img src="assets/images/csr-img/tn_logo.png" height="500px">
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div class="text-left" style="margin: 5px;">
|
||||
<div class="close_icon" (click)="closeSidenav()">
|
||||
<mat-icon style="color: white">close</mat-icon>
|
||||
</div>
|
||||
<!-- <h2><img src="assets/images/csr-img/tn_logo.png" height="500px">
|
||||
</h2> -->
|
||||
</div>
|
||||
<div class="main-nav">
|
||||
<!-- <div class="user-pro-wrap">
|
||||
<div class="user-profile-thumb text-center">
|
||||
@ -84,7 +88,14 @@
|
||||
<img src="assets/images/csr-img/header-bg.png"/>
|
||||
</div> -->
|
||||
<mat-toolbar class="main-header" style="height: 95px !important;">
|
||||
|
||||
<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" class="header-logo"></a>
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
@ -94,16 +105,16 @@
|
||||
</form>
|
||||
</div>
|
||||
</div> -->
|
||||
<div fxFlex.sm="100" fxFlex.xs="100" fxFlex.md="33.33" fxFlex.lg="100.33" fxFlex.xl="33.33" fxFlex="100">
|
||||
<!-- <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:320px;height:80px;"></a>
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<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;margin-right: 40px;">
|
||||
</div> -->
|
||||
<div fxFlex.sm="100" fxFlex.xs="100" fxFlex.md="99.33" fxFlex.lg="63.33" fxFlex.xl="53.33" fxFlex="100" fxLayoutAlign="right">
|
||||
<div class="horizontal-menu" style="text-align: right;margin-left: 40px;position: relative;left:14%;">
|
||||
<nav>
|
||||
<ul class="main-h-list" style="font-size: 18px;font-weight: bold">
|
||||
<li *ngFor="let menuitem of horizontalMenuItems.getAll()" class="vertical_nav">
|
||||
|
||||
@ -75,6 +75,9 @@ export class AdminLayoutComponent implements OnInit, OnDestroy {
|
||||
}
|
||||
});
|
||||
}
|
||||
closeSidenav(){
|
||||
this.sidemenu.close()
|
||||
}
|
||||
changeName(value){
|
||||
console.log("admin",value)
|
||||
this.user_name=value
|
||||
|
||||
@ -267,6 +267,16 @@ display: none !important;
|
||||
position: relative;
|
||||
background-clip: text;
|
||||
}
|
||||
.header-logo{
|
||||
width: 320px;
|
||||
height: 80px;
|
||||
}
|
||||
@media(max-width:580px){
|
||||
.header-logo{
|
||||
width: 300px;
|
||||
height: 80px;
|
||||
}
|
||||
}
|
||||
// .footer {
|
||||
// margin:0;
|
||||
// width:100%;
|
||||
|
||||
@ -5,6 +5,6 @@
|
||||
|
||||
export const environment = {
|
||||
production: false,
|
||||
apiUrl:'https://lms.venbainfotech.com/csr/api/',
|
||||
apiUrl:'https://lms.venbainfotech.com/csrb/api/',
|
||||
// apiUrl:'https://contribute.tnschools.gov.in/csrb/api/'
|
||||
};
|
||||
|
||||
Loading…
Reference in New Issue
Block a user