Sineedge/sparqsineedge
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI Changes

Browse Source
This commit is contained in:
venbatechnologies@gmail.com 2018-12-15 11:38:01 +05:30
parent 1e87ecbdad
commit 2cd9a7539a
6 changed files with 320 additions and 133 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

67
ng6-seed/src/app/personal-discussion/manage-pd/list-pd/pd-report/pd-report.component.html
View File

@ -43,20 +43,35 @@
</div>
</mat-tab>
<mat-tab label="PD Report">
<div>
<div style="text-align: left; margin: 12px;" class="mb-1">
<button mat-raised-button color="primary" *ngIf="generateBtn" (click)="generateNewPDReport()">Generate Report</button>
<button mat-raised-button color="accent" *ngIf="reGenerateBtn" (click)="reGeneratePFReport()">Re-generate Report</button>
</div>
<div *ngIf="reGenerateBtn">
<div style="text-align: right;">
<mat-select style="width: 50%;" placeholder="Select PD Version" >
<mat-option>--</mat-option>
<mat-option *ngFor="let pd of pdReportVersionList" (click)="changeVersion(pd)" >
{{ pd.doc_name }} <span *ngIf="pd.is_latest == 1" [style.color]="'green'">( Current Version )</span>
</mat-option>
</mat-select>
</div>
<mat-card >
<mat-card-content>
<mat-sidenav-container class="app-inner background-none shadow-none mail-db">
<button matTooltip="Menu" matTooltipPosition="above" (click)="mailnav.toggle()" color="primary" fxHide="false" fxshow.gt-sm mat-icon-button mat-raised-button>
<mat-icon style="color: white;">short_text</mat-icon>
</button>
<mat-sidenav #mailnav [mode]="isOver() ? 'over' : 'side'" [opened]="!isOver()" class="mail-sidebar pl-xs pr-xs">
<mat-card style="text-align:center;"> <button mat-raised-button color="red" *ngIf="reGenerateBtn" (click)="reGeneratePFReport()" style="padding: 0 58px !important;">Re-generate Report</button></mat-card>
<button mat-menu-item *ngFor="let pd of pdReportVersionList" [ngClass]="{'active': selectedItem == item}" (click)="changeVersion(pd)" style="font-size: 0.9em !important;height:6% !important;line-height: normal !important;">
{{ pd.doc_name }}<span *ngIf="pd.is_latest == 1" [style.color]="'green'">( Current Version )</span><br>
<span style="color:rgba(117, 115, 115, 0.87)!important;font-size:13px !important;">{{pd.createdby}}</span><br>
<span style="color:rgba(117, 115, 115, 0.87)!important;font-size:13px !important;">{{pd.createdon}}</span>
<hr>
</button>
</mat-sidenav>
<div class="main-content" fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="100" fxFlex.lg="100" fxFlex.xl="100">
<figure>
<div *ngIf="latestPDDetails">
<div style="margin: 12px;
background: #ddd;
@ -64,16 +79,38 @@
<div style="text-align: right;" class="mb-1">
<button mat-raised-button mat-icon-button class="hover-icon " type="button" matTooltip="Edit" matTooltipPosition="above"
*ngIf="latestPDDetails.is_latest == 1" (click)="addNewQuestion()"><mat-icon>edit</mat-icon></button>
<button mat-stroked-button *ngIf="latestPDDetails.is_latest == 0" (click)="changeDocumentEdit()">Enable Editable</button>
<button mat-stroked-button *ngIf="latestPDDetails.is_latest == 0" (click)="changeDocumentEdit()">Restore</button>
</div>
<div>
<div *ngIf="reGenerateBtn">
<pdf-viewer [src]="latestPDDetails.doc_uri" [original-size]="false" [page]="1">
</pdf-viewer>
</div>
</div>
</div>
</figure>
</div>
</mat-sidenav-container>
</mat-card-content>
</mat-card>
</div>
<div *ngIf="generateBtn">
<div fxLayout="row wrap">
<div class="container" fxLayout fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="10px" fxLayoutGap.xs="0" style="padding: 10%;">
<div fxFlex="100">
<h5 style="text-align:center;color: black;"> {{message}}</h5>
<div style="text-align:center;">
<button mat-raised-button color="primary" *ngIf="generateBtn" (click)="generateNewPDReport()">Generate Report</button>
</div>
</div>
</div>
</div>
</div>
</mat-tab>
</mat-tab-group>
</mat-card-content>

119
ng6-seed/src/app/personal-discussion/manage-pd/list-pd/pd-report/pd-report.component.scss
View File

@ -0,0 +1,119 @@
@import "./../../../../../assets/styles/scss/components/messages";
:host {
margin-left: -5px;
margin-right: -5px;
margin-top: -5px;
display: block;
}
:host /deep/ {
mat-sidenav {
width: 267px;
}
.mat-sidenav-content {
padding: 0;
}
@media (min-width: 959px) {
.mat-sidenav-side {
background-color: transparent;
box-shadow: none!important;
}
}
}
.mat-menu-item-active {
color: red !important;
}
.mat-expansion-panel-header-description {
color: rgba(0, 0, 0, 87);
}
.mat-card-content {
background-color: white;
}
.mat-card-actions {
background-color: white;
}
.text-ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.custm-list-item {
cursor: pointer;
}
$base-card-box-shadow:1.5px 2.6px 24px 0 rgba(0, 35, 136, 0.08) !important;
$product-bg-color-hover: rgba(103, 58, 183, 0.7);
.p-list-main {
background: white;
margin: auto;
position: relative;
overflow: hidden !important;
border-radius: 10px 10px 10px 10px;
box-shadow: $base-card-box-shadow;
transform: scale(0.95);
transition: box-shadow 0.5s, transform 0.5s;
&:hover {
transform: scale(1);
box-shadow: 5px 20px 30px rgba(0, 0, 0, 0.2);
}
.p-list {
position: relative;
.top {
height: 100%;
width: 100%;
// background: url(https://s-media-cache-ak0.pinimg.com/736x/49/80/6f/49806f3f1c7483093855ebca1b8ae2c4.jpg) no-repeat center center;
-webkit-background-size: 100%;
-moz-background-size: 100%;
-o-background-size: 100%;
background-size: 100%;
}
.bottom {
width: 200%;
height: 15%;
transition: transform 0.5s;
h1 {
margin: 0;
padding: 0;
}
p {
margin: 0;
padding: 0;
}
.left {
height: 100%;
width: 50%;
background: #f4f4f4;
position: relative;
float: left;
.details {
padding: 5px;
float: left;
// width: calc(70% - 40px);
}
}
.right {
width: 50%;
background: #A6CDDE;
color: white;
float: right;
height: 200%;
overflow: hidden;
.details {
padding: 20px;
float: right;
width: calc(70% - 40px);
}
}
}
}
}

33
ng6-seed/src/app/personal-discussion/manage-pd/list-pd/pd-report/pd-report.component.ts
View File

@ -32,6 +32,7 @@ export class PdReportComponent implements OnInit {
// public src;
pdReportRecords:any;
latestPDDetails: any;
message:any;
private notifier: NotifierService;
constructor(notifier: NotifierService, private fb: FormBuilder, private route: ActivatedRoute,
@ -52,6 +53,36 @@ export class PdReportComponent implements OnInit {
this.listPDComponent.showListView(false);
this.getPdReportDetails();
this.getPdReportVersionList();
// start
// end
const elemSidebar = <HTMLElement>document.querySelector('.app-inner .mail-sidebar');
const elemContent = <HTMLElement>document.querySelector('.app-inner .main-content');
if (window.matchMedia(`(min-width: 1560px)`).matches && !this.isMac()) {
// Ps.initialize(elemSidebar, { wheelSpeed: 2, suppressScrollX: true });
// Ps.initialize(elemContent, { wheelSpeed: 2, suppressScrollX: true });
}
// this.loadTemplates(this.startPD);
// this.next = 1;
// this.previous = 2;
}
isMac(): boolean {
let bool = false;
if (navigator.platform.toUpperCase().indexOf('MAC') >= 0 || navigator.platform.toUpperCase().indexOf('IPAD') >= 0) {
bool = true;
}
return bool;
}
isOver(): boolean {
return window.matchMedia(`(max-width: 1560px)`).matches;
}
reGeneratePFReport(){
@ -97,6 +128,7 @@ export class PdReportComponent implements OnInit {
} else {
// this.reGenerateBtn = true;
this.generateBtn = true;
this.message= data.msg;
}
}, err=> {
@ -139,6 +171,7 @@ export class PdReportComponent implements OnInit {
changeVersion(pd : any): void {
this.latestPDDetails = pd;
console.log(this.latestPDDetails);
}
changeDocumentEdit() : void{

3
ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/assessed-income/assessed-income.component.scss
View File

@ -48,6 +48,9 @@ tr.mat-footer-row {
mat-form-field {
margin: 0 2%;
}
::ng-deep .cdk-global-overlay-wrapper{
justify-content: center !important;
}
$base-card-box-shadow:1.5px 2.6px 24px 0 rgba(0, 35, 136, 0.08) !important;
$product-bg-color-hover: rgba(103, 58, 183, 0.7);
.p-list-main {

45
ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/neighbour-hood/neighbour-hood.component.html
View File

@ -1,7 +1,6 @@
<form [formGroup]="_neighbourhoodForm" novalidate>
<h2 mat-dialog-title class="paragraph_change">
<div fxFlex="70" align="left" style="padding: 10px !important;">
<div fxFlex="70" align="left">
<div fxLayout="row wrap">
<div fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="100" fxFlex.lg="100" fxFlex.xl="100">
{{pageTitle}}
@ -10,19 +9,21 @@
</div>
</div>
<div fxFlex="30" align="end" style="padding: 10px !important;">
<div fxFlex="30" align="end">
<button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" matTooltip="Close" matTooltipPosition="right" mat-dialog-close><mat-icon>close</mat-icon></button>
</div>
</h2>
<h6>
<mat-dialog-content>
<mat-card>
<mat-card-header>
<div fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="100" fxFlex.lg="100" fxFlex.xl="100">
<mat-radio-group formControlName="check_type" class="example-radio-group">
<mat-radio-button class="example-radio-button" color="primary" [value]="types.id" *ngFor="let types of check_type; let t = index">{{types.type_name}}</mat-radio-button>
</mat-radio-group>
</div>
</h6>
<mat-dialog-content formArrayName="neighbourhood_list" *ngIf="_neighbourhoodForm.controls.check_type.value==0">
<mat-card>
</mat-card-header>
<mat-card-content formArrayName="neighbourhood_list" *ngIf="_neighbourhoodForm.controls.check_type.value==0">
<mat-card *ngFor="let neighbourhood of _neighbourhoodForm.controls.neighbourhood_list['controls']; let n = index;" [formGroupName]="n">
<mat-card-content>
<mat-form-field style="width: 42%">
@ -49,15 +50,8 @@
<mat-icon>delete</mat-icon></button>
</mat-card-content>
</mat-card>
<mat-dialog-actions>
<div fxFlex="100" align="end">
<button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" matTooltip="Add More" matTooltipPosition="above" (click)="_neighbourhoodForm.controls.check_type.value==0 ? addNeighbourhood() : addReferencecheck()" color="primary"><mat-icon>add</mat-icon></button>
</div>
</mat-dialog-actions>
</mat-card>
</mat-dialog-content>
<mat-dialog-content formArrayName="referencecheck_list" *ngIf="_neighbourhoodForm.controls.check_type.value==1">
<mat-card>
</mat-card-content>
<mat-card-content formArrayName="referencecheck_list" *ngIf="_neighbourhoodForm.controls.check_type.value==1">
<mat-card *ngFor="let reference of _neighbourhoodForm.controls.referencecheck_list['controls']; let r = index;" [formGroupName]="r">
<mat-card-content>
<mat-form-field style="width: 28%">
@ -109,15 +103,18 @@
<mat-icon>delete</mat-icon></button>
</mat-card-content>
</mat-card>
<mat-dialog-actions>
<div fxFlex="100" align="end">
</mat-card-content>
<mat-card-actions align="end">
<button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" matTooltip="Add More" matTooltipPosition="above" (click)="_neighbourhoodForm.controls.check_type.value==0 ? addNeighbourhood() : addReferencecheck()" color="primary"><mat-icon>add</mat-icon></button>
</div>
</mat-dialog-actions>
</mat-card>
</mat-card-actions>
</mat-card>
</mat-dialog-content>
<mat-dialog-actions>
<mat-dialog-actions>
<div fxFlex="60" class="pb-0 text-sm-left" align="left">
<mat-form-field appearance="outline" style="width: 100%">
<mat-label>Remarks</mat-label>
@ -128,8 +125,6 @@
<button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" matTooltip="Save" matTooltipPosition="above" (click)="saveNeighbourhood(_neighbourhoodForm.value)"><mat-icon>save</mat-icon></button>
</div>
</mat-dialog-actions>
</mat-dialog-actions>
<notifier-container></notifier-container>