assessts view changes

This commit is contained in:
gandhimathi 2018-11-26 19:15:05 +05:30
parent c391d87ebe
commit c6de6f45b1
3 changed files with 72 additions and 36 deletions

View File

@ -61,8 +61,11 @@
<mat-expansion-panel>
<mat-expansion-panel-header>
<mat-panel-title>
<small class="expan_table_header">Sales Calculate Items Wise</small>
<small class="expan_table_header">Sales Calculate Item Wise</small>
</mat-panel-title>
<mat-panel-description class="subtitle_message">
{{salesCaluatedItem.length}} &nbsp;Items
</mat-panel-description>
</mat-expansion-panel-header>
<ng-template matExpansionPanelContent>
<div class="example-container mat-elevation-z8">
@ -103,11 +106,14 @@
<mat-expansion-panel>
<mat-expansion-panel-header>
<mat-panel-title>
<small class="expan_table_header">Sales Calculate Items Month Wise</small>
<small class="expan_table_header">Sales Calculate Month Wise</small>
</mat-panel-title>
<mat-panel-description class="subtitle_message">
{{salesMonthWiseExpandedItems.length}} &nbsp;Items
</mat-panel-description>
</mat-expansion-panel-header>
<ng-template matExpansionPanelContent>
<mat-accordion multi="true">
<!-- <mat-accordion multi="true">
<mat-expansion-panel *ngFor="let expandDetails of salesMonthWiseExpandedItems">
<mat-expansion-panel-header>
<mat-panel-title>
@ -115,31 +121,7 @@
</mat-panel-title>
</mat-expansion-panel-header>
<ng-template matExpansionPanelContent>
<div fxLayout="row wrap" style="display: flex">
<div fxFlex="50" *ngFor="let eachItem of expandDetails.expandElements" class="m-gap p-gap">
<h4 align="center" class="h4_font">{{eachItem.header}}</h4>
<table mat-table [dataSource]="eachItem.value" class="mat-elevation-z8">
<ng-container matColumnDef="Date">
<th mat-header-cell *matHeaderCellDef>Date</th>
<td mat-cell *matCellDef="let itemValue">{{itemValue.sales_date | date: 'dd-MM-yyyy'}} </td>
<td mat-footer-cell *matFooterCellDef> Total </td>
</ng-container>
<!-- Value Column-->
<ng-container matColumnDef="Amount">
<th mat-header-cell *matHeaderCellDef>Amount</th>
<td mat-cell *matCellDef="let itemValue">{{itemValue.sales_value}}</td>
<td mat-footer-cell *matFooterCellDef> {{getTotalCost(eachItem.value)}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="salesMonthItemColumns; sticky: true"></tr>
<tr mat-row *matRowDef="let row; columns: salesMonthItemColumns;"></tr>
<tr mat-footer-row *matFooterRowDef="salesMonthItemColumns; sticky: true"></tr>
</table>
</div>
</div>
</ng-template>
@ -152,7 +134,47 @@
</div>
</mat-action-row>
</mat-expansion-panel>
</mat-accordion>
</mat-accordion> -->
<mat-card *ngFor="let expandDetails of salesMonthWiseExpandedItems">
<mat-card-header>
<mat-card-title><small class="expan_table_header">{{expandDetails.salesItem}}</small></mat-card-title>
<mat-card-subtitle class="subtitle_message" *ngFor="let footer of expandDetails.footerMessage">
<div fxFlex="100">
{{footer.month_message}} &nbsp;&nbsp;{{footer.year_message}}
</div>
</mat-card-subtitle>
</mat-card-header>
<mat-divider></mat-divider>
<mat-card-content style="display: flex;margin-top: -20px;">
<!-- <div fxLayout="row wrap">
</div> -->
<div fxFlex="50" *ngFor="let eachItem of expandDetails.expandElements" class="m-gap p-gap">
<h4 align="center" class="h4_font">{{eachItem.header}}</h4>
<table mat-table [dataSource]="eachItem.value" class="mat-elevation-z8">
<ng-container matColumnDef="Date">
<th mat-header-cell *matHeaderCellDef>Date</th>
<td mat-cell *matCellDef="let itemValue">{{itemValue.sales_date | date: 'dd-MM-yyyy'}} </td>
<td mat-footer-cell *matFooterCellDef> Total </td>
</ng-container>
<!-- Value Column-->
<ng-container matColumnDef="Amount">
<th mat-header-cell *matHeaderCellDef>Amount</th>
<td mat-cell *matCellDef="let itemValue">{{itemValue.sales_value}}</td>
<td mat-footer-cell *matFooterCellDef> {{getTotalCost(eachItem.value)}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="salesMonthItemColumns; sticky: true"></tr>
<tr mat-row *matRowDef="let row; columns: salesMonthItemColumns;"></tr>
<tr mat-footer-row *matFooterRowDef="salesMonthItemColumns; sticky: true"></tr>
</table>
</div>
</mat-card-content>
</mat-card>
</ng-template>
</mat-expansion-panel>
@ -161,6 +183,9 @@
<mat-panel-title>
<small class="expan_table_header">Purchase Details</small>
</mat-panel-title>
<mat-panel-description class="subtitle_message">
{{purchaseDetails.length}} &nbsp;Items
</mat-panel-description>
</mat-expansion-panel-header>
<ng-template matExpansionPanelContent>
<div class="example-container mat-elevation-z8">
@ -203,6 +228,9 @@
<mat-panel-title>
<small class="expan_table_header">Business Expenses</small>
</mat-panel-title>
<mat-panel-description class="subtitle_message">
{{businessExpenses.length}} &nbsp;Items
</mat-panel-description>
</mat-expansion-panel-header>
<ng-template matExpansionPanelContent>
<div class="example-container mat-elevation-z8">
@ -240,6 +268,9 @@
<mat-panel-title>
<small class="expan_table_header">House Hold Expenses</small>
</mat-panel-title>
<mat-panel-description class="subtitle_message">
{{houseHoldExpenses.length}} &nbsp;Items
</mat-panel-description>
</mat-expansion-panel-header>
<ng-template matExpansionPanelContent>
<div class="example-container mat-elevation-z8">
@ -273,9 +304,6 @@
</mat-expansion-panel>
</mat-accordion>
</mat-card-content>
</mat-card>
</form>

View File

@ -1,5 +1,5 @@
.example-container {
max-height: 300px;
max-height: 500px;
overflow: auto;
}
@ -29,6 +29,9 @@ tr.mat-footer-row {
.h4_font {
font-size: 18px;
}
.subtitle_message {
color:#e00201 !important;
}
// table, th, td {
// border: 1px solid rgba(0, 0, 0, 0.12);
@ -43,4 +46,9 @@ tr.mat-footer-row {
// text-align: center;
// }
.row_border {
display: flex;
border:1px solid rgba(0, 0, 0, 0.12);
}

View File

@ -104,9 +104,9 @@ salesMonthWiseExpandedItems: any=[]
let convertYear : number = 12 / listItems.length;
let footerMessage: any=[];
footerMessage.push({
month_message: listItems.length + ' Months ' + itemElement.sales_item + ' Sales : '+ calculateAllItemsTotal,
month_message: listItems.length + ' Month Sales : '+ calculateAllItemsTotal,
month_value:calculateAllItemsTotal,
year_message: ' Yearly ' + itemElement.sales_item + ' Sales Arrived : '+ calculateAllItemsTotal * convertYear,
year_message: ' Yearly Sales Arrived : '+ calculateAllItemsTotal * convertYear,
year_value: calculateAllItemsTotal * convertYear,
})
// footerMessage.push({