UI Changes

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

@@ -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)" >
+<mat-card >
-                            {{ pd.doc_name }} <span *ngIf="pd.is_latest == 1" [style.color]="'green'">( Current Version )</span>
+    
-                            </mat-option>
+    <mat-card-content>
-                        </mat-select>
+            
-                    </div>
+        <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>

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

@@ -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);
+                }
+               
+             
+            }
+        }
+    }
+   
+}
+ 
+

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

@@ -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{

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

@@ -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 {

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

@@ -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-card-header>
-  <mat-dialog-content formArrayName="neighbourhood_list" *ngIf="_neighbourhoodForm.controls.check_type.value==0">
+  <mat-card-content formArrayName="neighbourhood_list" *ngIf="_neighbourhoodForm.controls.check_type.value==0">
-      <mat-card>
           <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>
+    </mat-card-content>
-          <div fxFlex="100" align="end">
+    <mat-card-content formArrayName="referencecheck_list" *ngIf="_neighbourhoodForm.controls.check_type.value==1">
-          <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 *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-card-actions>
-        </mat-dialog-actions>
+
-        </mat-card>
+</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>
   
-  
-