Latest code with contribute knowledge

ng8-seed/package.json

@@ -35,6 +35,7 @@
     "@ngx-translate/http-loader": "^3.0.1",
     "@swimlane/ngx-datatable": "^15.0.2",
     "angular-calendar": "^0.26.4",
+    "angular-notifier": "^6.0.1",
     "angular-socialshare": "^2.3.11",
     "angular-sortablejs": "^2.6.0",
     "angular-tree-component": "^8.4.0",
@@ -51,6 +52,7 @@
     "leaflet": "^1.3.4",
     "leaflet-map": "^0.2.1",
     "moment": "^2.22.2",
+    "ng-pick-datetime": "^7.0.0",
     "ng-simple-slideshow": "^1.2.9",
     "ng2-charts": "^1.6.0",
     "ng2-dragula": "^2.1.1",
@@ -63,7 +65,7 @@
     "ngx-slick-carousel": "^0.4.6",
     "ngx-social-button": "^1.0.4",
     "perfect-scrollbar": "^1.4.0",
-    "quill": "^1.3.6",
+    "quill": "^1.3.7",
     "rxjs": "^6.3.3",
     "rxjs-compat": "^6.3.3",
     "screenfull": "^3.3.3",
@@ -74,8 +76,8 @@
     "zone.js": "~0.9.1"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~0.802.2",
+    "@angular-devkit/build-angular": "^0.803.22",
-    "@angular/cli": "^8.2.2",
+    "@angular/cli": "^8.3.20",
     "@angular/compiler-cli": "^8.2.2",
     "@angular/language-service": "^8.2.2",
     "@types/d3": "^3.5.41",

ng8-seed/src/app/app.module.ts

@@ -48,7 +48,7 @@ import { PaymentConfirmationComponent } from './components/payment-confirmation/
 import { MyAccountComponent } from './components/my-account/my-account.component';
 import { TokenInterceptorService } from './shared/guards/token-interceptor.service';
 import { AuthGuardService } from './shared/guards/auth-guard.service';
-import { MatTableDataSource, MatTableModule, MatSlideToggleModule, MatRadioModule, MatButtonModule } from '@angular/material';
+import { MatTableDataSource, MatTableModule, MatSlideToggleModule, MatRadioModule, MatButtonModule, MatBottomSheetModule } from '@angular/material';
 import { SchoolDetailsService } from './shared/school-details.service';
 // import { AddEventModule } from './add-event.module';
 import {HashLocationStrategy,LocationStrategy,PathLocationStrategy} from '@angular/common';
@@ -69,7 +69,12 @@ import { PasswordChangeComponent } from './components/password-change/password-c
 import { ShareButtonsModule } from '@ngx-share/buttons';
 import { OnlyNumberDirective } from './directives/only-number.directive';
 import { DirectivesModuleModule } from './directives/directives-module/directives-module.module';
-
+import {NotifierModule} from 'angular-notifier';
+import { EditUserDetailsComponent } from 'app/edit-user-details/edit-user-details.component';
+import { ConfirmationDialogComponent } from './common/confirmation-dialog/confirmation-dialog.component';
+import { VolunteerInfoComponent } from './components/user-profile/volunteer-info/volunteer-info.component';
+import { BottomSheetComponent } from './common/bottom-sheet/bottom-sheet.component';
+// import { ArticleShrinkComponent } from './knowledge-sharing/article-shrink/article-shrink.component';
 
 export function HttpLoaderFactory(http: HttpClient) {
     return new TranslateHttpLoader(http);
@@ -112,6 +117,9 @@ const DEFAULT_PERFECT_SCROLLBAR_CONFIG: PerfectScrollbarConfigInterface = {
     PrivacyPolicyComponent,
     PasswordChangeComponent,
     userCertificateDisplay,
+    EditUserDetailsComponent,
+    VolunteerInfoComponent,
+    BottomSheetComponent
     
     
     // ProjectListComponent
@@ -159,7 +167,9 @@ const DEFAULT_PERFECT_SCROLLBAR_CONFIG: PerfectScrollbarConfigInterface = {
     // MDBBootstrapModule.forRoot()
     NgxSocialButtonModule,
     ShareButtonsModule,
-    DirectivesModuleModule
+    DirectivesModuleModule,
+    NotifierModule,
+    MatBottomSheetModule
   ],
   providers: [
     TranslateService,
@@ -179,7 +189,7 @@ const DEFAULT_PERFECT_SCROLLBAR_CONFIG: PerfectScrollbarConfigInterface = {
       useFactory: getAuthServiceConfigs
   },
   ],
-  entryComponents: [PasswordChangeComponent,UserCertificateComponent],
+  entryComponents: [PasswordChangeComponent,UserCertificateComponent,EditUserDetailsComponent,BottomSheetComponent],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

ng8-seed/src/app/app.routing.ts

@@ -82,6 +82,9 @@ export const AppRoutes: Routes = [{
   {
     path:'privacy-policy',
     component:PrivacyPolicyComponent
+  },{
+    path:'knowledge-sharing',
+    loadChildren:'./knowledge-sharing/knowledge-sharing.module#KnowledgeSharingModule'
   }
 
   ]

ng8-seed/src/app/common/bottom-sheet/bottom-sheet.component.html

@@ -0,0 +1,3 @@
+<div>
+    <app-volunteer-info [displayData]="inputData"></app-volunteer-info>
+</div>

ng8-seed/src/app/common/bottom-sheet/bottom-sheet.component.scss

@@ -0,0 +1,4 @@
+::ng-deep .mat-bottom-sheet-container{
+    min-width: 80vw!important;
+    // min-height: 30vw!important
+  }

ng8-seed/src/app/common/bottom-sheet/bottom-sheet.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { BottomSheetComponent } from './bottom-sheet.component';
+
+describe('BottomSheetComponent', () => {
+  let component: BottomSheetComponent;
+  let fixture: ComponentFixture<BottomSheetComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ BottomSheetComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(BottomSheetComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

ng8-seed/src/app/common/bottom-sheet/bottom-sheet.component.ts

@@ -0,0 +1,22 @@
+import { Component, OnInit, Inject } from '@angular/core';
+import { MAT_BOTTOM_SHEET_DATA, MatBottomSheetRef } from '@angular/material';
+
+@Component({
+  selector: 'app-bottom-sheet',
+  templateUrl: './bottom-sheet.component.html',
+  styleUrls: ['./bottom-sheet.component.scss']
+})
+export class BottomSheetComponent implements OnInit {
+  inputData: any=[];
+
+  constructor(@Inject(MAT_BOTTOM_SHEET_DATA) public details: any,private _bottomSheetRef: MatBottomSheetRef<BottomSheetComponent>) { }
+
+
+  ngOnInit() {
+    this.details=this.details.datas
+    console.log("bottom",this.details)
+    this.inputData=this.details
+  }
+ 
+
+}

ng8-seed/src/app/common/confirmation-dialog/confirmation-dialog.component.html

@@ -0,0 +1,14 @@
+<h1 mat-dialog-title>
+        {{title}}
+      </h1>
+      
+      <div mat-dialog-content>
+        <p>{{message}}</p>
+      </div>
+      
+      <div mat-dialog-actions align="end" style="margin: 10px;">
+        <div fxLayout="row" fxLayoutGap="20px" fxLayoutAlign="flex-end">
+        <button  mat-stroked-button (click)="onDismiss()">No</button>
+        <button  mat-raised-button color="primary" (click)="onConfirm()">Yes</button>
+      </div>
+      </div>

ng8-seed/src/app/common/confirmation-dialog/confirmation-dialog.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ConfirmationDialogComponent } from './confirmation-dialog.component';
+
+describe('ConfirmationDialogComponent', () => {
+  let component: ConfirmationDialogComponent;
+  let fixture: ComponentFixture<ConfirmationDialogComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ConfirmationDialogComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ConfirmationDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

ng8-seed/src/app/common/confirmation-dialog/confirmation-dialog.component.ts

@@ -0,0 +1,40 @@
+import { Component, OnInit, Inject } from '@angular/core';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
+
+@Component({
+  selector: 'app-confirmation-dialog',
+  templateUrl: './confirmation-dialog.component.html',
+  styleUrls: ['./confirmation-dialog.component.scss']
+})
+
+export class ConfirmationDialogComponent implements OnInit {
+  // Update view with given values
+  title: string;
+  message: string;
+
+  constructor(public dialogRef: MatDialogRef<ConfirmationDialogComponent>,
+    @Inject(MAT_DIALOG_DATA) public data) {
+        // Update view with given values
+    this.title = data.title;
+    this.message = data.message;
+     }
+
+  ngOnInit() {
+  }
+  onConfirm(): void {
+    // Close the dialog, return true
+    this.dialogRef.close(true);
+  }
+  onDismiss(): void {
+    // Close the dialog, return false
+    this.dialogRef.close(false);
+  }
+
+
+}
+export class ConfirmDialogModel {
+
+  constructor(public title: string, public message: any) {
+  }
+}
+

ng8-seed/src/app/common/material.module.ts

@@ -0,0 +1,109 @@
+import { NgModule } from "@angular/core";
+import { CommonModule } from "@angular/common";
+// import { MatMomentDateModule } from "@angular/material-moment-adapter";
+import {
+  MatButtonModule,
+  MatIconModule,
+  MatCardModule,
+  MatFormFieldModule,
+  MatInputModule,
+  MatListModule,
+  MatDatepickerModule,
+  MatNativeDateModule,
+  MatSelectModule,
+  MatOptionModule,
+  MatCheckboxModule,
+  MatRadioModule,
+  MatDatepicker,
+  MatExpansionModule
+  
+} from "@angular/material";
+import { FlexLayoutModule } from "@angular/flex-layout";
+import { FormsModule ,ReactiveFormsModule} from "@angular/forms";
+import { NotifierOptions, NotifierModule } from "angular-notifier";
+
+const customNotifierOptions: NotifierOptions = {
+	position: {
+		horizontal: {
+			position: 'right',
+			distance: 12
+		},
+		vertical: {
+			position: 'top',
+			distance: 12,
+			gap: 10
+		}
+	},
+	theme: 'material',
+	behaviour: {
+		autoHide: 5000,
+		onClick: false,
+		onMouseover: 'pauseAutoHide',
+		showDismissButton: true,
+		stacking: 8
+	},
+	animations: {
+		enabled: true,
+		show: {
+			preset: 'slide',
+			speed: 300,
+			easing: 'ease'
+		},
+		hide: {
+			preset: 'fade',
+			speed: 300,
+			easing: 'ease',
+			offset: 50
+		},
+		shift: {
+			speed: 300,
+			easing: 'ease'
+		},
+		overlap: 150
+	}
+};
+@NgModule({
+  imports: [
+    MatButtonModule,
+    MatIconModule,
+    MatCardModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatListModule,
+    MatDatepickerModule,
+    MatNativeDateModule,
+    
+    MatSelectModule,
+    MatOptionModule,
+    MatCheckboxModule,
+    MatRadioModule,
+    FlexLayoutModule,
+    FormsModule,
+    ReactiveFormsModule,
+    MatExpansionModule,
+    NotifierModule.withConfig(customNotifierOptions)
+  ],
+  exports: [
+    MatButtonModule,
+    MatIconModule,
+    MatCardModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatListModule,
+    MatDatepickerModule,
+    MatNativeDateModule,
+    
+    MatSelectModule,
+    MatOptionModule,
+    MatCheckboxModule,
+    MatRadioModule,
+    FlexLayoutModule,
+    FormsModule,
+    ReactiveFormsModule,
+    NotifierModule,
+    MatExpansionModule
+  ],
+  declarations: [],
+
+})
+export class MaterialModule {}

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

@@ -1,5 +1,5 @@
 
   
-    <footer class="footer">
+    <div class="footer">
-            <h5>Copyright TN Schools</h5>
+            <h5>&#9400; TN Schools, All rights reserved &nbsp;&nbsp;|<span class="footer-web"><a class="footer-privacy" href="#/privacy-policy" target="_blank">Privacy Policy</a></span></h5>
-           </footer>
+    </div>

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

@@ -1,11 +1,48 @@
 .footer {
   // display: block;
+  
     position: absolute;
     // height: 100%;
     bottom: 0;
+    left: 0;
     width: 100%;
     /* Set the fixed height of the footer here */
-    height: 60px;
+    height: 40px;
-    line-height: 60px;
+    // line-height: 60px;
+    background-color:rgb(69, 189, 189);
+  }
+//   .footer {
+//     margin:0;
+//     width:100%;
+//     overflow: hidden;
+//   position: relative;
+//   // bottom: 10px;
+//   top:20px;
+//   // margin:0;
+//   width: 100%;
+//   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;
+    color:white;
+    font-weight: bold;
+    text-align: center;
+  // position: absolute;
+  // top: 1%;
+  // left: 50%;
+  // -moz-transform: translateX(-50%) translateY(-50%);
+  // -webkit-transform: translateX(-50%) translateY(-50%);
+  // transform: translateX(-50%) translateY(-50%);
+}
+.footer-privacy{
+    color:blue;
+    text-decoration: underline;
     
-  }
+}
+.footer-web{
+  // margin-left: 15px;
+}

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

@@ -68,6 +68,7 @@ this.previousUrl =  this.restApi.getPreviousUrl();
         // this.setTokenData(schDet.records);
        
         this.restApi.setToken(schDet.token);
+        localStorage.setItem('logged_user',JSON.stringify(schDet.userdata))
         if(this.router.url==this.previousUrl)
         {
         //  this.router.navigate(['/home']);

ng8-seed/src/app/components/user-profile/user-profile.component.scss

@@ -137,6 +137,9 @@
         .trackid-paid-web{
           display: none;
         }
+        .mat-column-view_btn{
+          justify-content: flex-end;
+        }
        
       }
       @media(min-width:590px){
@@ -218,4 +221,7 @@
   a{
     text-decoration: underline;
     color: blue;
+  }
+  .mat-column-view_btn{
+    justify-content: center;
   }

ng8-seed/src/app/components/user-profile/user-profile.component.ts

@@ -2,7 +2,7 @@ import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
 import { ApiService } from 'app/shared/api.service';
 import { FormGroup, FormBuilder, FormControl, Validators } from '@angular/forms';
 import {animate, state, style, transition, trigger} from '@angular/animations';
-import { MatTableDataSource, MatSnackBar, MatDialog } from '@angular/material';
+import { MatTableDataSource, MatSnackBar, MatDialog, MatBottomSheet, MatPaginator } from '@angular/material';
 import * as jspdf from 'jspdf';  
 import  {environment} from  'environments/environment'
   
@@ -10,6 +10,8 @@ import html2canvas from 'html2canvas';
 import { Router } from '@angular/router';
 import { UserCertificateComponent } from '../user-certificate/user-certificate.component';
 import { PasswordChangeComponent } from '../password-change/password-change.component';
+import { EditUserDetailsComponent } from 'app/edit-user-details/edit-user-details.component';
+import { BottomSheetComponent } from 'app/common/bottom-sheet/bottom-sheet.component';
 
 @Component({
   selector: 'app-user-profile',
@@ -27,9 +29,13 @@ export class UserProfileComponent implements OnInit {
   modal_hide:boolean=true
   profile_form:FormGroup;
   user_data:any;
+  req_id:any;
   contribution_data:any=[];
-  displayedColumns=['Date','contribute_type','payment_mode','trackid','ref_id','tot_amount','payment_ref']
+  kt_contribution_data:any=[];
+  displayedColumns1 =['Date','cont_type','Description','district_name','view_btn']
+  displayedColumns=['Date','contribute_type','payment_mode','trackid','ref_id','tot_amount','payment_ref','EditUser_Details']
   public dataSource = new MatTableDataSource();
+  public dataSource1 = new MatTableDataSource();
   isExpansionDetailRow = (i: number, row: Object) => row.hasOwnProperty('detailRow');
   expandedElement: any
   pdf_data_source: any={amount:'',name:'',org_pan:''};
@@ -38,8 +44,11 @@ export class UserProfileComponent implements OnInit {
  @ViewChild('table_element',{static:true}) table_element
   clientWidth: any;
   certificate_success_date: any='';
+  pageSize = 10;
+  @ViewChild(MatPaginator, {static: true}) paginator: MatPaginator;
+  @ViewChild('KTContribute', {static: true}) paginator1: MatPaginator;
   
-  constructor(private apiService:ApiService,private _fb:FormBuilder,private matSnackBar:MatSnackBar,public router:Router,private matDialog:MatDialog,private restApi:ApiService) { }
+  constructor(private apiService:ApiService,private _fb:FormBuilder,private matSnackBar:MatSnackBar,public router:Router,private matDialog:MatDialog,private restApi:ApiService,private _bottomSheet: MatBottomSheet) { }
 
   ngOnInit() {
     this.getProfile()
@@ -61,9 +70,18 @@ export class UserProfileComponent implements OnInit {
     })
     //this.generatePDF()
   }
+  // applyFilter(filterValue: string) {
+  //   this.dataSource.filter = filterValue.trim().toLowerCase();
+
+  //   if (this.dataSource.paginator) {
+  //     this.dataSource.paginator.firstPage();
+  //   }
+  // }
   ngAfterViewInit(){
     setTimeout(()=>{
-    console.log("table elemnt",this.table_element);
+    console.log("table elemnt",this.paginator,this.dataSource.paginator);
+    // this.dataSource.paginator = this.paginator;
+    this.dataSource1.paginator=this.paginator1
     // this.table_element=this.table_element.nativeElement.clientWidth
     this.clientWidth=this.table_element.nativeElement.clientWidth
     console.log("table elemnt",this.clientWidth);
@@ -87,6 +105,8 @@ export class UserProfileComponent implements OnInit {
       this.contribution_data.forEach(element=>{
         element.detailRow=true;
       })
+      
+     
       console.log("con",this.contribution_data,this.isExpansionDetailRow);
       this.contribution_data=this.contribution_data.filter(val=>{
         if(val.payment_mode ==  '0' &&  val.cont_type !=2){
@@ -96,9 +116,29 @@ export class UserProfileComponent implements OnInit {
           return  val;
         }
        })
+       this.kt_contribution_data=res['records'].kt_contribution_data
+      this.kt_contribution_data.forEach(element=>{
+        element.detailRow=true;
+      })
+
+      //console.log("con",this.kt_contribution_data,this.isExpansionDetailRow);
+      this.kt_contribution_data=this.kt_contribution_data.filter(val1=>{
+        if(val1.payment_mode ==  '0' &&  val1.cont_type !=2){
+
+        }
+        else
+        {
+          return  val1;
+        }
+       })
        this.certificate_success_date=this.contribution_data.filter(val=>val.txnstatus ==  'SUCCESS').map(val=>val.contribute_date)[0];
        console.log(this.certificate_success_date)
-      this.dataSource=this.contribution_data;
+      this.dataSource.data=this.contribution_data;
+      this.dataSource1.data=this.kt_contribution_data;
+      console.log(this.dataSource1);
+
+      setTimeout(() => {this.dataSource.paginator = this.paginator;this.dataSource1.paginator = this.paginator1
+      console.log("tiem",this.dataSource1.paginator,this.dataSource.paginator)});
       }
     })
   }
@@ -240,4 +280,44 @@ export class UserProfileComponent implements OnInit {
     })
   }
 
+  openUpdateStatusModel(det) {
+
+    this.apiService.getStatusUpdates(det.req_id).subscribe(res => {
+      if (res['dataStatus']) {
+        this.user_data = res['records']
+        console.log("FOR");
+        console.log(this.user_data);
+        console.log(det);
+
+
+        if (res['records'].length == 0) {
+
+          alert("No Details Found!!");
+        }
+        else {
+          // for(let i = 0; i < this.user_data.length; i++) {
+
+          this.matDialog.open(EditUserDetailsComponent, {
+            "height": "560px",
+            "width": "1020px",
+            panelClass: 'custom-modalbox',
+
+            data: { update: this.user_data, school: det.school_name }
+
+          })
+        }
+
+
+      }
+
+
+    })
+  }
+  viewKCDetails(datas){
+    console.log(datas)
+    this._bottomSheet.open(BottomSheetComponent, {panelClass:'bottom-sheet-width',
+      data: { datas: datas }})
+  }
+
+      
 }

ng8-seed/src/app/components/user-profile/volunteer-info/volunteer-info.component.html

@@ -0,0 +1,138 @@
+<div *ngIf="displayData.con_type == '1' && value_for_display.length > 0">
+        <h4>Books Information</h4>
+        <div  fxLayout="row wrap" fxLayoutGap.xs="5px grid" fxLayoutGap="20px grid" fxLayout.xs="column" *ngFor="let value of value_for_display;let i=index">
+            <!-- <div style="margin-bottom:5px;"> -->
+           <span class="index"> {{i+1}}</span>
+            <div fxLayout="row" fxLayoutGap="10px" fxLayoutGap.xs="5px">
+                <span >
+                    <mat-icon class="hm_icon">menu_book</mat-icon>
+                </span>
+                <span >
+                    <h6 class="hm_info">{{value.book}}</h6>
+                </span>
+            </div>
+           
+            <div fxLayout="row" fxLayoutGap="10px" fxLayoutGap.xs="5px">
+                    <span >
+                        <mat-icon class="hm_icon">person</mat-icon>
+                    </span>
+                    <span >
+                        <h6 class="hm_info">{{value.author}}</h6>
+                    </span>
+                </div>
+                <div fxLayout="row" fxLayoutGap="10px" fxLayoutGap.xs="5px" *ngIf="value.qty != null">
+                        <span >
+                           <mat-icon class="hm_icon">money</mat-icon>
+                        </span>
+                        <span >
+                            <h6 class="hm_info" >{{value.qty}} Nos</h6>
+                        </span>
+                    </div>
+                     <div fxLayout="row" fxLayoutGap="10px" fxLayoutGap.xs="5px" *ngIf="displayData.description != '' && displayData.description != null">
+                <span >
+                    <mat-icon class="hm_icon">note</mat-icon>
+                </span>
+                <span >
+                    <h6 class="hm_info">{{displayData.description}}</h6>
+                </span>
+            </div>
+                  <hr/>
+                <!-- </div> -->
+                   <!-- <span style="border-bottom: 2px solid gray"></span> -->
+        </div>
+        </div>
+
+        <div *ngIf="displayData.con_type == '2' && value_for_display.length > 0">
+            
+                <h4>{{displayData.con_sub_type == '1' ? 'Mobile' : displayData.con_sub_type == '2' ? 'Device' : displayData.electric_other}} Information</h4>
+                <div  fxLayout="row wrap" fxLayoutGap.xs="5px grid" fxLayoutGap="20px grid" fxLayout.xs="column" *ngFor="let value of value_for_display;let i=index">
+                    <!-- <div style="margin-bottom:5px;"> -->
+                   <span class="index"> {{i+1}}</span>
+                    <div fxLayout="row" fxLayoutGap="10px" fxLayoutGap.xs="5px">
+                        <span >
+                            <mat-icon class="hm_icon">dns</mat-icon>
+                        </span>
+                        <span >
+                            <h6 class="hm_info">{{value.model}}</h6>
+                        </span>
+                    </div>
+                   
+                    <div fxLayout="row" fxLayoutGap="10px" fxLayoutGap.xs="5px">
+                            <span >
+                                <mat-icon class="hm_icon">format_list_numbered_rtl</mat-icon>
+                            </span>
+                            <span >
+                                <h6 class="hm_info">{{value.serial_no}}</h6>
+                            </span>
+                        </div>
+                        <div fxLayout="row" fxLayoutGap="10px" fxLayoutGap.xs="5px" *ngIf="value.qty != null">
+                                <span >
+                                   <mat-icon class="hm_icon">settings_applications</mat-icon>
+                                </span>
+                                <span >
+                                    <h6 class="hm_info" >{{value.accessoris}} Nos</h6>
+                                </span>
+                            </div>
+                             <div fxLayout="row" fxLayoutGap="10px" fxLayoutGap.xs="5px" *ngIf="displayData.description != '' && displayData.description != null">
+                        <span >
+                            <mat-icon class="hm_icon">note</mat-icon>
+                        </span>
+                        <span >
+                            <h6 class="hm_info">{{displayData.description}}</h6>
+                        </span>
+                    </div>
+                          <hr/>
+                        <!-- </div> -->
+                           <!-- <span style="border-bottom: 2px solid gray"></span> -->
+                </div>
+          
+           
+                </div>
+
+                
+        <div *ngIf="displayData.con_type == '3' && value_for_display.length > 0">
+                <h4>Volunteer Information</h4>
+                <div  fxLayout="row wrap" fxLayoutGap.xs="5px grid" fxLayoutGap="20px grid" fxLayout.xs="column" *ngFor="let value of value_for_display;let i=index">
+                    <!-- <div style="margin-bottom:5px;"> -->
+                   <span class="index"> {{i+1}}</span>
+                    <div fxLayout="row" fxLayoutGap="10px" fxLayoutGap.xs="5px">
+                        <span >
+                            <mat-icon class="hm_icon">date_range</mat-icon>
+                        </span>
+                        <span >
+                            <h6 class="hm_info">{{value.date_from}} - {{value.date_to}}</h6>
+                        </span>
+                    </div>
+                   
+                    <div fxLayout="row" fxLayoutGap="10px" fxLayoutGap.xs="5px">
+                            <span >
+                                <mat-icon class="hm_icon">access_time</mat-icon>
+                            </span>
+                            <span >
+                                <h6 class="hm_info">{{value.time_from}} - {{value.time_to}}</h6>
+                            </span>
+                        </div>
+                        <div fxLayout="row" fxLayoutGap="10px" fxLayoutGap.xs="5px" *ngIf="value.subject != undefined">
+                                <span >
+                                   <mat-icon class="hm_icon">subject</mat-icon>
+                                </span>
+                                <span >
+                                    <h6 class="hm_info" >{{value.subject_names}}</h6>
+                                </span>
+                            </div>
+                             <div fxLayout="row" fxLayoutGap="10px" fxLayoutGap.xs="5px" *ngIf="value.kt_type_desc != '' && value.kt_type_desc != null">
+                        <span >
+                            <mat-icon class="hm_icon">note</mat-icon>
+                        </span>
+                        <span >
+                            <h6 class="hm_info">{{value.kt_type_desc}}</h6>
+                        </span>
+                    </div>
+                          <hr/>
+                        <!-- </div> -->
+                           <!-- <span style="border-bottom: 2px solid gray"></span> -->
+                </div>
+                </div>
+                <div *ngIf="value_for_display.length == 0">
+                        <h4>No Details Found</h4>
+                </div>

ng8-seed/src/app/components/user-profile/volunteer-info/volunteer-info.component.scss

@@ -0,0 +1,33 @@
+.hm_info{
+    display: inline;
+    // white-space: pre-wrap;
+    // word-wrap:break-word;
+    white-space: pre-wrap;
+  }
+  // .hm_icon{
+  //   // border-right: 2px solid black;
+  //   // border-bottom-left-radius: 10px;
+  //   // border-bottom-right-radius: 10px;
+  // }
+  @media(max-width:580px){
+    .hm_info{
+      display: inline;
+      font-size: 12px;
+      word-wrap: break-word;
+      white-space: pre-wrap;
+      // word-wrap:break-word;
+    //  white-space: pre;
+    } 
+  }
+  hr { color: gray; margin: 0.5em auto; margin-left: 0;
+    margin-right: 0;
+  }
+  .index{
+    display: inline;
+      white-space: pre;
+  }
+  @media(max-width:580px){
+    .index{
+        display: none;
+      } 
+  }

ng8-seed/src/app/components/user-profile/volunteer-info/volunteer-info.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { VolunteerInfoComponent } from './volunteer-info.component';
+
+describe('VolunteerInfoComponent', () => {
+  let component: VolunteerInfoComponent;
+  let fixture: ComponentFixture<VolunteerInfoComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ VolunteerInfoComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(VolunteerInfoComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

ng8-seed/src/app/components/user-profile/volunteer-info/volunteer-info.component.ts

@@ -0,0 +1,88 @@
+import { Component, OnInit, Input } from '@angular/core';
+import { ApiService } from 'app/shared/api.service';
+import { ApiServiceService } from 'app/knowledge-sharing/services/api-service.service';
+import { Subject } from 'rxjs';
+
+@Component({
+  selector: 'app-volunteer-info',
+  templateUrl: './volunteer-info.component.html',
+  styleUrls: ['./volunteer-info.component.scss']
+})
+export class VolunteerInfoComponent implements OnInit {
+  @Input()displayData:any=[];
+  subjectList: any=[];
+  value_for_display:any=[]
+  constructor(private apiService:ApiServiceService) {
+    console.log(this.displayData)
+   }
+
+  ngOnInit() {
+   
+    
+  }
+  ngOnChanges(){
+    console.log(this.displayData)
+    this.displayDataFun()
+
+  //  this.displayData.push(this.displayData[0])
+  //  this.displayData.push(this.displayData[0])
+  //  this.displayData.push(this.displayData[0])
+  }
+  displayDataFun(){
+    switch(this.displayData.con_type){
+      case '1':
+          if(this.displayData.hasOwnProperty('books_info')){
+            this.value_for_display=this.displayData.books_info
+          }
+        break;
+      case '2':
+          if(this.displayData.hasOwnProperty('devices_info')){
+            this.value_for_display=this.displayData.devices_info
+          }
+        break;
+      case '3':
+        if(this.displayData.hasOwnProperty('volunteer_info')){
+          if(this.subjectList.length == 0){
+          this.apiService.getListofSubjects().subscribe(response=>{
+            this.subjectList=response['records']
+           this.replaceSubjects()
+          })
+        }
+        else{
+          this.replaceSubjects()
+        }
+          // this.value_for_display=this.displayData.volunteer_info
+        }
+    }
+  }
+  replaceSubjects(){
+    console.log(this.subjectList)
+    this.value_for_display=this.displayData.volunteer_info
+    let alert_value_for_display=this.value_for_display
+   alert_value_for_display.forEach(val=>{
+     let local_val=val
+     local_val.subject=local_val.subject.replace('[','')
+     local_val.subject=local_val.subject.replace(']','')
+     local_val.subject=local_val.subject.replace(/"/g,'')
+      let subject_lis=local_val.subject.split(',')
+      console.log(local_val,subject_lis)
+      let alt_subject:string='';
+      subject_lis.forEach(subject_curr=>{
+      if(subject_curr != '0'){
+        console.log(this.subjectList.filter(subject=>subject.id == subject_curr).map(sub_name=>sub_name.subjects))
+        alt_subject+=', '+this.subjectList.filter(subject=>subject.id == subject_curr).map(sub_name=>sub_name.subjects)[0]
+      }
+      else{
+        alt_subject+=', '+local_val.subject_others
+      }
+    })
+    alt_subject=alt_subject.replace(',','')
+    local_val.subject_names=alt_subject
+    console.log(alt_subject,local_val)
+    val=local_val
+    })
+    this.value_for_display=alert_value_for_display
+    console.log(this.value_for_display)
+  }
+
+}

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

@@ -83,10 +83,13 @@ showCaptions="true"
             </div>
       </div> 
    </div>
-         <div fxLayout="row" class="text-center mt-1 mb-1">
+         <div fxLayout="row" fxLayoutGap="0px" class="text-center mt-1 mb-1" fxLayout.xs="column" fxLayoutGap.xs="20px">
-               <div fxFlex="100">
+               <div fxFlex="50" fxFlex.xs="100">
-                  <button mat-stroked-button class="text button" [routerLink]="['/contribute']"><span>Contribute</span></button>
+                  <button mat-stroked-button class="text button" [routerLink]="['/contribute']"><span>Contribute Funds</span></button>
                </div>
+               <div fxFlex="50" fxFlex.xs="100">
+                     <button  mat-stroked-button class="kG button" [routerLink]="['/knowledge-sharing']"><span>Contribute Knowledge</span></button>
+                  </div>
          </div>
 
 </div>

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

@@ -775,6 +775,23 @@ html body{
     transition: all 0.5s;
     cursor: pointer;
   }
+  .kG{
+    // border-radius: 4px;
+    background-color: #33bcce;
+    // border: none;
+    color: #FFFFFF;
+    text-align: center;
+    font-size: 16px;
+    padding: 5px;
+    width: 200px;
+    transition:font-size 0.5s;
+    cursor: pointer;
+  }
+  .kG:hover{
+   
+      font-size: 18px;
+    // transition: font-size 18px;
+  }
   
   .text span {
     cursor: pointer;