Zettai-Backup/csr_webapp
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Login, Reegister and Contribute page done by suren

Browse Source
This commit is contained in:
sriram-at-840620226347 2019-09-25 10:49:32 +05:30
parent 0f49cee348
commit 477e11004c
18 changed files with 632 additions and 244 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
ng8-seed/src/app/app.module.ts
View File

@ -2,9 +2,9 @@ import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { RouterModule } from '@angular/router'; import { RouterModule } from '@angular/router';
import { NgModule } from '@angular/core'; import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms'; import { FormsModule, ReactiveFormsModule } from '@angular/forms';
// import { HttpModule, Http } from '@angular/'; // import { HttpModule, Http } from '@angular/';
import { HttpClientModule, HttpClient} from '@angular/common/http'; import { HttpClientModule, HttpClient, HTTP_INTERCEPTORS} from '@angular/common/http';
import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar'; import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
import { PERFECT_SCROLLBAR_CONFIG } from 'ngx-perfect-scrollbar'; import { PERFECT_SCROLLBAR_CONFIG } from 'ngx-perfect-scrollbar';
@ -46,6 +46,9 @@ import { ProjectsComponent } from './components/projects/projects.component';
import { PaymentComponent } from './components/payment/payment.component'; import { PaymentComponent } from './components/payment/payment.component';
import { PaymentConfirmationComponent } from './components/payment-confirmation/payment-confirmation.component'; import { PaymentConfirmationComponent } from './components/payment-confirmation/payment-confirmation.component';
import { MyAccountComponent } from './components/my-account/my-account.component'; 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 } from '@angular/material';
// import { AddEventModule } from './add-event.module'; // import { AddEventModule } from './add-event.module';
export function HttpLoaderFactory(http: HttpClient) { export function HttpLoaderFactory(http: HttpClient) {
@ -86,6 +89,7 @@ const DEFAULT_PERFECT_SCROLLBAR_CONFIG: PerfectScrollbarConfigInterface = {
MatListModule, MatListModule,
MatMenuModule, MatMenuModule,
MatToolbarModule, MatToolbarModule,
ReactiveFormsModule,
MatTabsModule, MatTabsModule,
NgxDatatableModule, NgxDatatableModule,
MatCheckboxModule, MatCheckboxModule,
@ -93,6 +97,7 @@ const DEFAULT_PERFECT_SCROLLBAR_CONFIG: PerfectScrollbarConfigInterface = {
SlickCarouselModule, SlickCarouselModule,
MatSelectModule, MatSelectModule,
MatCardModule, MatCardModule,
MatTableModule,
DemoMaterialModule, DemoMaterialModule,
HttpClientModule, HttpClientModule,
TranslateModule.forRoot({ TranslateModule.forRoot({
@ -112,7 +117,11 @@ const DEFAULT_PERFECT_SCROLLBAR_CONFIG: PerfectScrollbarConfigInterface = {
{ {
provide: PERFECT_SCROLLBAR_CONFIG, provide: PERFECT_SCROLLBAR_CONFIG,
useValue: DEFAULT_PERFECT_SCROLLBAR_CONFIG useValue: DEFAULT_PERFECT_SCROLLBAR_CONFIG
} },{
provide:HTTP_INTERCEPTORS,
useClass: TokenInterceptorService,
multi: true
},AuthGuardService,
], ],
entryComponents: [], entryComponents: [],
bootstrap: [AppComponent] bootstrap: [AppComponent]

253
ng8-seed/src/app/components/contribute/contribute.component.html
View File

@ -2,163 +2,134 @@
<!--starts--> <!--starts-->
<div fxLayout fxLayout="row" fxLayout.xs="column" fxLayoutGap.xs="0"> <div fxLayout fxLayout="row" fxLayout.xs="column" fxLayoutGap.xs="0">
<!-- <div fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="40" fxFlex.lg="1000" fxFlex.xl="40"> --> <!-- <div fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="40" fxFlex.lg="1000" fxFlex.xl="40"> -->
<mat-card class="p-2" fxFlex="60%" fxFlex.xs="100" fxFlex.sm="100"> <mat-card class="p-2" fxFlex="70%" fxFlex.xs="100" fxFlex.sm="100">
<mat-card-title><h5 class="mt-0">Be a Champion of Change </h5></mat-card-title> <mat-card-title class="mb-1"><h5 class="mt-0">Be a Champion of Change </h5></mat-card-title>
<hr> <hr>
<form method="post"> <form [formGroup]="Contribute">
<div fxLayout="row" fxLayoutAlign="start center" class="mb-2 pt-1"> <div fxLayout="row" fxLayoutAlign="start center" class="mb-2 pt-1">
<mat-form-field dividerColor="primary" class="ml-xs mr-xs" style="width: 100%;"> <mat-form-field dividerColor="primary" class="ml-xs mr-xs" style="width: 100%;">
<mat-select placeholder="Select District" [(ngModel)]="currentDrink" [required]="isRequired" [disabled]="isDisabled" #drinkControl="ngModel"> <mat-select placeholder="Select District" formControlName="district_id" [required]="isRequired" [disabled]="isDisabled">
<mat-option *ngFor="let item of districtList" [value]="item.id" > <mat-option *ngFor="let item of district" [value]="item.district_id" >
{{ item.value }} {{ item.district_name }}
</mat-option> </mat-option>
</mat-select> </mat-select>
</mat-form-field> </mat-form-field>
<mat-form-field dividerColor="accent" class="ml-xs mr-xs" style="width: 100%;"> <mat-form-field dividerColor="accent" class="ml-xs mr-xs" style="width: 100%;">
<mat-select placeholder="Select Schools" [(ngModel)]="currentDrink" [required]="isRequired" [disabled]="isDisabled" #drinkControl="ngModel"> <mat-select placeholder="Select Schools" formControlName="schoold_id" [required]="isRequired" [disabled]="isDisabled">
<mat-option *ngFor="let item of schoolList" [value]="item.id" > <mat-option *ngFor="let item of school" [value]="item.school_id" >
{{ item.value }} {{ item.school_name }}
</mat-option> </mat-option>
</mat-select> </mat-select>
</mat-form-field> </mat-form-field>
<mat-form-field dividerColor="warn" class="ml-xs mr-xs" style="width: 100%;"> <mat-form-field dividerColor="warn" class="ml-xs mr-xs" style="width: 100%;">
<mat-select placeholder="Select Category" [(ngModel)]="currentDrink" [required]="isRequired" [disabled]="isDisabled" #drinkControl="ngModel"> <mat-select placeholder="Select Category" formControlName="cad_id" [required]="isRequired" [disabled]="isDisabled">
<mat-option *ngFor="let item of categoryList" [value]="item.id" > <mat-option *ngFor="let item of category" [value]="item.cad_id" >
{{ item.value }} {{ item.cat_name }}
</mat-option> </mat-option>
</mat-select> </mat-select>
</mat-form-field> </mat-form-field>
</div> <mat-form-field dividerColor="warn" class="ml-xs mr-xs" style="width: 100%;">
<table class="shop-table table-responsive" cellspacing="0"> <mat-select placeholder="Material Name" formControlName="mat_id" [required]="isRequired" [disabled]="isDisabled">
<thead> <mat-option *ngFor="let item of material_category" [value]="item.mat_id" >
<tr> {{ item.material_name }}
<!-- <th class="product-remove">&nbsp;</th> --> </mat-option>
<th class="product-thumbnail">&nbsp;</th> </mat-select>
<th class="product-name">Requirement</th> </mat-form-field>
<th class="product-price">Quantity</th> </div>
<th class="product-quantity">Sponsor</th> <div fxLayout fxLayout="row" style="text-align: right;">
<!-- <th class="product-subtotal"></th> --> <div class="" fxFlex="100%" fxFlex.xs="100" fxFlex.sm="100">
</tr> <button mat-raised-button color="primary" (click)="getSchoolReqList()">Submit</button>
</thead> </div>
<tbody> </div>
<tr class="cart_item"> </form>
<!-- <td class="product-remove">
<a href="#" class="remove" title="Remove this item">×</a> </td> --> <!--*********************-->
<td class="product-thumbnail"> <mat-form-field>
<a href="#"><img src="assets/images/csr-img/donate.jpg" alt="" width="100"></a> <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
</td> </mat-form-field>
<td class="product-name">Student Benches required at Govt Girls School, Panruti, Villupuram Dt.</td>
<td class="product-price"> <div class="mat-elevation-z8">
<span class=" amount">30</span> <table mat-table [dataSource]="dataSource" matSort>
</td>
<td class="product-quantity" data-title="Quantity"> <!-- Requirement Column -->
<div class="quantity buttons_added"> <ng-container matColumnDef="Image" >
<input step="1" min="0" max="" value="3" title="Qty" class="text" size="4" type="number"> <th style="width: 15% !important;" mat-header-cell *matHeaderCellDef mat-sort-header>Image</th>
</div> <td style="width: 15% !important;" mat-cell *matCellDef="let row" class="product-thumbnail"><a href="#"><img src="{{row.img_url}}" alt="School Img" width="70"></a></td>
</td> </ng-container>
<!-- <td class="product-subtotal" data-title="Total">
<span class="price-amount"><span>&#8377;</span>69.00</span> <!-- Requirement Column -->
</td> --> <ng-container matColumnDef="Description">
</tr> <th style="width: 50% !important;" mat-header-cell *matHeaderCellDef mat-sort-header>Description</th>
<tr class="cart_item"> <td style="width: 50% !important;" mat-cell *matCellDef="let row">{{row.material_name}} required at {{row.school_name}}, {{row.block_name}} Block, {{row.district_name}} District.</td>
<!-- <td class="product-remove"> </ng-container>
<a href="#" class="remove" title="Remove this item">×</a> </td> -->
<td class="product-thumbnail"> <!-- Quantity Column -->
<a href="#"><img src="assets/images/csr-img/img1.jpeg" alt="" width="100"></a> <ng-container matColumnDef="Requirement Qty">
</td> <th style="width: 10% !important;" mat-header-cell *matHeaderCellDef mat-sort-header> Requirement Qty </th>
<td class="product-name"> <td style="width: 10% !important;" mat-cell *matCellDef="let row"> {{row.qty}}</td>
<a href="#">Desktop Computers require for GGHSS,Palacode</a> </td> </ng-container>
<td class="product-price">
<span class=" amount">15</span> <!-- Sponsor Column -->
</td> <ng-container matColumnDef="Sponsor">
<td class="product-quantity" data-title="Quantity"> <th style="width: 10% !important;" mat-header-cell *matHeaderCellDef mat-sort-header> Sponsor </th>
<div class="quantity buttons_added"> <td style="width: 10% !important;" mat-cell *matCellDef="let row;let i = index"> <input step="1" min="0" max="" title="Qty" class="text" size="2" type="number" (change)="somethingChanged($event.target.value,i,row.cost_per_unit)" style="width: 100% !important;border: none;border-bottom: 1px solid black;"> </td>
<input step="1" min="0" max="" value="3" title="Qty" class="text" size="4" type="number"> </ng-container>
</div>
</td> <!-- price Column -->
<!-- <td class="product-subtotal" data-title="Total"> <ng-container matColumnDef="Cost Per Unit">
<span class="price-amount"><span>&#8377;</span>69.00</span> <th style="width: 10% !important;" mat-header-cell *matHeaderCellDef mat-sort-header> Cost Per Unit </th>
</td> --> <td style="width: 10% !important;" mat-cell *matCellDef="let row;"> {{row.cost_per_unit === null?0:row.cost_per_unit}} </td>
</tr> <!-- <td mat-footer-cell *matFooterCellDef> Total </td> -->
<tr class="cart_item"> </ng-container>
<!-- <td class="product-remove">
<a href="#" class="remove" title="Remove this item">×</a> </td> --> <!-- Total Column -->
<td class="product-thumbnail"> <ng-container matColumnDef="Total">
<a href="#"><img src="assets/images/csr-img/img2.jpeg" alt="" width="100"></a> <th style="width: 15% !important;" mat-header-cell *matHeaderCellDef mat-sort-header> Total </th>
</td> <td style="width: 15% !important;" mat-cell *matCellDef="let row ;let i=index">{{Total[i]}} </td>
<td class="product-name"> <!-- <td mat-footer-cell *matFooterCellDef> {{somethingChanged()}} </td> -->
<a href="#">Smartboard required for CPS Kannammapey</a> </td> </ng-container>
<td class="product-price">
<span class=" amount">5</span> <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
</td> <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
<td class="product-quantity" data-title="Quantity"> <!-- <tr mat-footer-row *matFooterRowDef="tableColumns"></tr> -->
<div class="quantity buttons_added"> </table>
<input step="1" min="0" max="" value="3" title="Qty" class="text" size="4" type="number"> <div class="clearfix order-total" style="padding-bottom: 0px !important;">
</div> <div class="calculated-shipping" style="text-align: -webkit-right !important;">
</td> <table class="table-responsive" cellspacing="0" style="width: 50% !important;">
<!-- <td class="product-subtotal" data-title="Total"> <tr class="order-total" style="text-align: right;">
<span class="price-amount"><span>&#8377;</span>69.00</span> <td style="font-weight: bold;">Total</td>
</td> --> <td> <strong><span class="amount"><span class="currency-symbol">&#8377;</span>{{somethingChanged()}}</span></strong></td>
</tr> </tr>
<tr class="cart_item"> </table>
<!-- <td class="product-remove"> </div>
<a href="#" class="remove" title="Remove this item">×</a> </td> --> </div>
<td class="product-thumbnail"> <mat-paginator [pageSize]="pageSize" [pageSizeOptions]="[5, 10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
<a href="#"><img src="assets/images/csr-img/img3.jpg" alt="" width="100"></a>
</td> <div class="pt-1 pr-1" style="text-align: right;">
<td class="product-name"> <button mat-raised-button color="primary" class="mr-1 mb-1">Will Contribute the above in kind</button>
<a href="#">R.O Purifier required for 500 students in GHS, Periamedu</a> </td> <button [routerLink]="['../payment']" mat-raised-button style="background-color:rgb(69, 189, 189);color:white" >Proceed for Payment</button>
<td class="product-price"> </div>
<span class=" amount">2</span> </div>
</td> <!--*********************-->
<td class="product-quantity" data-title="Quantity"> <!-- <div class="clearfix order-total">
<div class="quantity buttons_added"> <div class="calculated-shipping">
<input step="1" min="0" max="" value="3" title="Qty" class="text" size="4" type="number"> <h4>Cart Totals</h4>
</div> <table class="table-responsive" cellspacing="0">
</td> <tr class="order-total">
<!-- <td class="product-subtotal" data-title="Total"> <th>Total</th>
<span class="price-amount"><span>&#8377;</span>69.00</span> <td><strong><span class="amount"><span class="currency-symbol">&#8377;</span>{{somethingChanged()}}</span></strong> </td>
</td> --> </tr>
</tr> </table>
<!-- <tr> <div class="order-checkout">
<td colspan="4" style="text-align: right;"> <button mat-raised-button color="primary" class="mr-1 mb-1">Will Contribute the above in kind</button>
<strong><span>Total</span></strong> <button [routerLink]="['../payment']" mat-raised-button style="background-color:rgb(69, 189, 189);color:white" >Proceed for Payment</button>
</td> </div>
<td class="product-subtotal" data-title="Total"> </div>
<strong><span class="amount"><span class="currency-symbol">&#8377;</span>167.00</span></strong> </div> -->
</td>
</tr> -->
</tbody>
</table>
<div class="pt-1" style="text-align: right;">
<button mat-raised-button color="primary" class="mr-1 mb-1">Will Contribute the above in kind</button>
<button [routerLink]="['../payment']" mat-raised-button style="background-color:rgb(69, 189, 189);color:white" >Proceed for Payment</button>
</div>
</form>
<!-- <div class="clearfix order-total">
<div class="calculated-shipping">
<h4>Cart Totals</h4>
<table class="table-responsive" cellspacing="0">
<tr class="cart-subtotal">
<th>Subtotal</th>
<td><span class="amount"><span class="currency-symbol">&#8377;</span>167.00</span>
</td>
</tr>
<tr class="order-total">
<th>Total</th>
<td><strong><span class="amount"><span class="currency-symbol">&#8377;</span>167.00</span></strong> </td>
</tr>
</table>
<div class="order-checkout">
<button mat-raised-button color="primary" class="mr-1">Checkout</button>
</div>
</div>
</div> -->
</mat-card> </mat-card>
<!-- <div fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="40" fxFlex.lg="20" fxFlex.xl="40"> --> <!-- <div fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="40" fxFlex.lg="20" fxFlex.xl="40"> -->
<mat-card class="support_mat" fxFlex="40%" fxFlex.xs="100" fxFlex.sm="100px"> <mat-card class="support_mat" fxFlex="30%" fxFlex.xs="100" fxFlex.sm="100px">
<mat-card-header> <mat-card-header>
<mat-card-title> <mat-card-title>
<h5>Or Contribute to General Development Fund</h5> <h5>Or Contribute to General Development Fund</h5>

16
ng8-seed/src/app/components/contribute/contribute.component.scss
View File

@ -1,4 +1,18 @@
.calculated-shipping[_ngcontent-gen-c13]{
padding: 0px !important;
}
table {
width: 100%;
}
.mat-form-field {
font-size: 14px;
width: 100%;
}
td, th {
width: 25%;
}
table.shop-table { table.shop-table {
// border-collapse: separate; // border-collapse: separate;
border-spacing: 0; border-spacing: 0;

204
ng8-seed/src/app/components/contribute/contribute.component.ts
View File

@ -1,4 +1,10 @@
import { Component, OnInit } from '@angular/core'; import { Component, OnInit, ViewChild } from '@angular/core';
import { environment } from '../../../environments/environment';
import { ApiService } from '../../shared/api.service';
import { FormGroup, FormBuilder, FormControl, Validators, } from '@angular/forms';
import { MatTableDataSource, MatPaginator, MatSort } from '@angular/material';
@Component({ @Component({
selector: 'app-contribute', selector: 'app-contribute',
@ -6,87 +12,143 @@ import { Component, OnInit } from '@angular/core';
styleUrls: ['./contribute.component.scss'] styleUrls: ['./contribute.component.scss']
}) })
export class ContributeComponent implements OnInit { export class ContributeComponent implements OnInit {
isRequired = false;
isDisabled = false;
currentDrink: string;
drinks = [{ displayedColumns: string[] = ['Image', 'Description', 'Requirement Qty', 'Sponsor', 'Cost Per Unit', 'Total'];
value: 'coke-0', dataSource:any = new MatTableDataSource();
viewValue: 'Coke' dataLength :number;
}, { @ViewChild(MatPaginator, {static: true}) paginator: MatPaginator;
value: 'sprite-1', @ViewChild(MatSort, {static: true}) sort: MatSort;
viewValue: 'Sprite' pageSize = 5;
}, { Contribute: FormGroup;
value: 'water-2', material_category: any = [];
viewValue: 'Water' district: any = [];
}, { school: any = [];
value: 'pepper-3', category: any = [];
viewValue: 'Dr. Pepper' Total: any = [];
}, {
value: 'coffee-4',
viewValue: 'Coffee'
}, {
value: 'tea-5',
viewValue: 'Tea'
}, {
value: 'juice-6',
viewValue: 'Orange juice'
}, {
value: 'wine-7',
viewValue: 'Wine'
}, {
value: 'milk-8',
viewValue: 'Milk'
}];
districtList=[{
id:"1",
value:"Chennai"
},{
id:"2",
value:"Vellore"
},{
id:"3",
value:"Thiruvannamalai"
},{
id:"4",
value:"Kanchipuram"
},{
id:"5",
value:"Nagapattinam"
},]
schoolList=[{
id:"1",
value:"Govt High School"
},
{
id:"2",
value:"Govt Primary School"
}]
categoryList=[{
id:"1",
value:"Building"
},
{
id:"2",
value:"Furnitures"
},
{
id:"2",
value:"Students kit"
}]
constructor() { }
ngOnInit() { constructor(public restApi:ApiService,public fb:FormBuilder) {
// Create 100 users
}
// ngOnInit() {
// this.dataSource.paginator = this.paginator;
// this.dataSource.sort = this.sort;
// }
applyFilter(filterValue: string) {
this.dataSource.filter = filterValue.trim().toLowerCase();
if (this.dataSource.paginator) {
this.dataSource.paginator.firstPage();
}
}
ngOnInit() {
// this.getSchoolReqList();
this.initForm();
this.getSchoolReqList();
this.getSchoolReqList2();
} }
initForm()
{
this.Contribute = this.fb.group(
{
schoold_id: new FormControl(''),
district_id: new FormControl(''),
cad_id: new FormControl(''),
mat_id: new FormControl('')
})
}
getSchoolReqList()
{
let url = `${environment.apiUrl}${'getSchoolReqList'}`;
let data = this.Contribute.value;
this.restApi.post(url,data).subscribe(schDet=>
{
if(schDet.dataStatus==true)
{
this.dataLength = schDet.records.length;
this.dataSource.data = schDet.records;
// console.log(this.material_category);
// this.dataSource.data = schDet.records.map((val, i)=>{
// val['SerialNo'] = i + 2;
// return val;
// })
// console.log(this.dataSource.data);
}
})
}
somethingChanged(e,i,item){
// console.log(e,i,item);
this.Total[i] = e*item;
// console.log(this.Total);
return ( this.Total.reduce((acc, value) => acc + value, 0));
}
getSchoolReqList2()
{
let url = `${environment.apiUrl}${'getSchoolReqList'}`;
let data = this.Contribute.value;
this.restApi.post(url,data).subscribe(schDet=>
{
if(schDet.dataStatus==true)
{
this.material_category = schDet.records.map(item=>({mat_id:item.mat_id,material_name:item.material_name}));
this.material_category = this.material_category.filter((test, index, array) =>
index === array.findIndex((findTest) =>
findTest.material_name === test.material_name
)
);
this.district = schDet.records.map(item=>({district_id:item.district_id,district_name:item.district_name}));
this.district = this.district.filter((test, index, array) =>
index === array.findIndex((findTest) =>
findTest.district_name === test.district_name
)
);
this.school = schDet.records.map(item=>({school_id:item.school_id,school_name:item.school_name}));
this.school = this.school.filter((test, index, array) =>
index === array.findIndex((findTest) =>
findTest.school_name === test.school_name
)
);
this.category = schDet.records.map(item=>({cad_id:item.cad_id,cat_name:item.cat_name}));
this.category = this.category.filter((test, index, array) =>
index === array.findIndex((findTest) =>
findTest.cat_name === test.cat_name
)
);
// console.log('mat'+JSON.stringify(this.material_category ));
// console.log('dis'+JSON.stringify(this.district ));
// console.log('sch'+JSON.stringify(this.school ));
}
})
// console.log('mat'+this.material_category);
}
ngAfterViewInit() { ngAfterViewInit() {
// Hack: Scrolls to top of Page after page view initialized // Hack: Scrolls to top of Page after page view initialized
let top = document.getElementById('top'); let top = document.getElementById('top');
console.log("d",top); // console.log("d",top);
if (top !== null) { if (top !== null) {
top.scrollIntoView(); top.scrollIntoView();
top = null; top = null;
} }
this.dataSource.paginator = this.paginator;
this.dataSource.sort = this.sort;
} }
} }

5
ng8-seed/src/app/dashboard/dashboard.module.ts
View File

@ -1,7 +1,7 @@
import { NgModule } from '@angular/core'; import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router'; import { RouterModule } from '@angular/router';
import { CommonModule } from '@angular/common'; import { CommonModule } from '@angular/common';
import { MatIconModule, MatCardModule, MatButtonModule, MatListModule, MatProgressBarModule, MatMenuModule, MatFormField, MatFormFieldModule, MatInputModule, MatButtonToggleModule, MatTabsModule,MatSelectModule, MatRadioModule } from '@angular/material'; import { MatIconModule, MatCardModule, MatButtonModule, MatListModule, MatProgressBarModule, MatMenuModule, MatFormField, MatFormFieldModule, MatInputModule, MatButtonToggleModule, MatTabsModule,MatSelectModule, MatRadioModule, MatTableDataSource, MatTableModule } from '@angular/material';
import { FlexLayoutModule } from '@angular/flex-layout'; import { FlexLayoutModule } from '@angular/flex-layout';
import { ChartsModule } from 'ng2-charts/ng2-charts'; import { ChartsModule } from 'ng2-charts/ng2-charts';
@ -18,12 +18,14 @@ import { ProjectDetailComponent } from 'app/components/project-detail/project-de
import {FooterComponent} from 'app/components/footer/footer.component' import {FooterComponent} from 'app/components/footer/footer.component'
import { SlickCarouselModule } from 'ngx-slick-carousel'; import { SlickCarouselModule } from 'ngx-slick-carousel';
@NgModule({ @NgModule({
imports: [ imports: [
CommonModule, CommonModule,
RouterModule.forChild(DashboardRoutes), RouterModule.forChild(DashboardRoutes),
MatIconModule, MatIconModule,
MatCardModule, MatCardModule,
ReactiveFormsModule,
MatButtonModule, MatButtonModule,
MatListModule, MatListModule,
MatProgressBarModule, MatProgressBarModule,
@ -32,6 +34,7 @@ import { SlickCarouselModule } from 'ngx-slick-carousel';
MatRadioModule, MatRadioModule,
SlickCarouselModule, SlickCarouselModule,
ChartsModule, ChartsModule,
MatTableModule,
// NgxChartsModule, // NgxChartsModule,
NgxDatatableModule, NgxDatatableModule,
FlexLayoutModule, FlexLayoutModule,

8
ng8-seed/src/app/session/login/login-component.html
View File

@ -6,15 +6,15 @@
<div> <div>
<h2 class="base-border">Login Form</h2> <h2 class="base-border">Login Form</h2>
<p>Enter Your Login Details</p> <p>Enter Your Login Details</p>
<form #form="ngForm" (ngSubmit)="login()"> <form [formGroup]="loginForm">
<div fxLayout="column" fxLayoutAlign="start stretch"> <div fxLayout="column" fxLayoutAlign="start stretch">
<mat-form-field style="width: 100%"> <mat-form-field style="width: 100%">
<input matInput placeholder="E-Mail" type="text" name="email" required [(ngModel)]="email"> <input matInput placeholder="E-Mail" type="text" name="email" required formControlName="email">
</mat-form-field> </mat-form-field>
<mat-form-field style="width: 100%" class="mb-1"> <mat-form-field style="width: 100%" class="mb-1">
<input matInput placeholder="Password" type="password" name="password" required [(ngModel)]="password"> <input matInput placeholder="Password" type="password" name="password" required formControlName="password">
</mat-form-field> </mat-form-field>
<button class="mat-green" mat-raised-button>SIGN IN</button> <button class="mat-green" mat-raised-button (click)="csrUserLogin()">SIGN IN</button>
<p class="mat-text-warn mb-0">Forgot password?</p> <p class="mat-text-warn mb-0">Forgot password?</p>
<p class="mb-0">Don't have an account? <a [routerLink]="['../register']" class="mat-text-primary">Register Here</a></p> <p class="mb-0">Don't have an account? <a [routerLink]="['../register']" class="mat-text-primary">Register Here</a></p>
</div> </div>

56
ng8-seed/src/app/session/login/login.component.ts
View File

@ -1,5 +1,8 @@
import { Component, OnInit ,ViewEncapsulation } from '@angular/core'; import { Component, OnInit ,ViewEncapsulation } from '@angular/core';
import {Router} from "@angular/router"; import {Router} from "@angular/router";
import { FormControl, FormBuilder } from '@angular/forms';
import { environment } from 'environments/environment';
import { ApiService } from 'app/shared/api.service';
@Component({ @Component({
selector: 'ms-login-session', selector: 'ms-login-session',
@ -11,11 +14,58 @@ export class LoginComponent {
email: string; email: string;
password: string; password: string;
loginForm: any;
constructor( constructor(public restApi:ApiService,public fb:FormBuilder,public router:Router) { }
private router: Router
) { }
ngOnInit() {
// this.getSchoolReqList();
this.initForm();
}
initForm()
{
this.loginForm = this.fb.group(
{
email: new FormControl(''),
password: new FormControl(''),
})
}
csrUserLogin()
{
// console.log(this.loginForm.value);return false;
let url = `${environment.apiUrl}${'csrUserLogin'}`;
let data = this.loginForm.value;
this.restApi.post(url,data).subscribe(schDet=>
{
// this.load.loadedDismiss();
// console.log(schDet);return false;
// if(schDet.dataStatus==true)
// {
// this.setTokenData(schDet.records);
this.restApi.setToken(schDet.token);
this.router.navigate(['/home']);
// window.localStorage.setItem('token','abcd');
// }else
// {
// // this.toast.apptoast(res.message,'danger');
// window.localStorage.clear();
// return false;
// }
})
}
// setTokenData(records: any) {
// throw new Error("Method not implemented.");
// }
login() { login() {
this.router.navigate(['/']); this.router.navigate(['/']);
} }

31
ng8-seed/src/app/session/register/register-component.html
View File

@ -7,40 +7,43 @@
<div> <div>
<h2 class="base-border">Register as a new user</h2> <h2 class="base-border">Register as a new user</h2>
<p>We would need some of your information to facilitate your contributions and keep you updated on the progress of the projects or new projects</p> <p>We would need some of your information to facilitate your contributions and keep you updated on the progress of the projects or new projects</p>
<form #form="ngForm"> <form [formGroup]="go_reg">
<div fxLayout="column" fxLayoutAlign="start stretch"> <div fxLayout="column" fxLayoutAlign="start stretch">
<mat-form-field style="width: 100%"> <mat-form-field style="width: 100%">
<input matInput placeholder="Name" type="text" name="name" required> <input matInput placeholder="Name" type="text" name="name" formControlName="name" required>
</mat-form-field> </mat-form-field>
<mat-form-field style="width: 100%"> <mat-form-field style="width: 100%">
<input matInput placeholder="E Mail" type="email" name="email" required> <input matInput placeholder="E Mail" type="email" name="email" formControlName="email" required>
</mat-form-field> </mat-form-field>
<mat-form-field style="width: 100%"> <mat-form-field style="width: 100%">
<input matInput placeholder="Phone Number" type="number" name="pnum" required> <input matInput placeholder="Phone Number" type="number" name="mobile" formControlName="mobile" required>
</mat-form-field> </mat-form-field>
<div fxLayout="row" fxLayoutAlign="start center" class="mb-2"> <mat-form-field style="width: 100%">
<input matInput placeholder="Password" type="password" name="password" formControlName="password" required>
</mat-form-field>
<!-- <div fxLayout="row" fxLayoutAlign="start center" class="mb-2">
<mat-form-field dividerColor="primary" class="ml-xs mr-xs" style="width: 25%;"> <mat-form-field dividerColor="primary" class="ml-xs mr-xs" style="width: 25%;">
<input matInput placeholder="Phone OTP" type="number" name="pOTP" required> <input matInput placeholder="Phone OTP" type="number" name="pOTP" formControlName="pOTP" required>
</mat-form-field> </mat-form-field>
<mat-form-field dividerColor="accent" class="ml-xs mr-xs" style="width: 25%;"> <mat-form-field dividerColor="accent" class="ml-xs mr-xs" style="width: 25%;">
<input matInput placeholder="Email OTP" type="emailOTP" name="emailOTP" required> <input matInput placeholder="Email OTP" type="emailOTP" name="emailOTP" formControlName="emailOTP" required>
</mat-form-field> </mat-form-field>
<button class="mat-green" mat-raised-button>Verify</button> <button class="mat-green" mat-raised-button>Verify</button>
</div> </div> -->
</div> </div>
<hr> <hr>
<div fxLayout="column" fxLayoutAlign="start stretch"> <div fxLayout="column" fxLayoutAlign="start stretch" formGroupName="org_info">
<mat-form-field style="width: 100%"> <mat-form-field style="width: 100%">
<input matInput placeholder="Organisation Name" type="text" name="OrganisationName" required> <input matInput placeholder="Organisation Name" type="text" name="orgname" formControlName="orgname" required>
</mat-form-field> </mat-form-field>
<mat-form-field style="width: 100%;"> <mat-form-field style="width: 100%;">
<textarea matInput placeholder="Register Address" name="radress" required></textarea> <textarea matInput placeholder="Register Address" name="org_address" formControlName="org_address" required></textarea>
</mat-form-field> </mat-form-field>
<mat-form-field style="width: 100%"> <mat-form-field style="width: 100%">
<input matInput placeholder="Pan of the Organisation" type="panOrganisation" name="panOrganisation" required> <input matInput placeholder="Pan of the Organisation" type="number" name="org_pan" formControlName="org_pan" required>
</mat-form-field> </mat-form-field>
<button class="mat-red" mat-raised-button>Register</button> <button class="mat-red" mat-raised-button (click)="csrUserRegistration()">Register</button>
</div> </div>
<!-- <div> <!-- <div>
<p>Sign Up Using</p> <a href="#" class="shared-icon mr-1 mat-blue"><i class="fa fa-facebook fa-lg mr-1"></i> Facebook</a><a href="#" class="shared-icon mat-red"><i class="fa fa-google fa-lg mr-1"></i>Google</a> <p>Sign Up Using</p> <a href="#" class="shared-icon mr-1 mat-blue"><i class="fa fa-facebook fa-lg mr-1"></i> Facebook</a><a href="#" class="shared-icon mat-red"><i class="fa fa-google fa-lg mr-1"></i>Google</a>

44
ng8-seed/src/app/session/register/register.component.ts
View File

@ -1,5 +1,8 @@
import { Component, OnInit,ViewEncapsulation } from '@angular/core'; import { Component, OnInit,ViewEncapsulation } from '@angular/core';
import {Router} from "@angular/router"; import {Router} from "@angular/router";
import { environment } from '../../../environments/environment';
import { ApiService } from '../../shared/api.service';
import { FormBuilder, FormControl } from '@angular/forms';
@Component({ @Component({
selector: 'ms-register-session', selector: 'ms-register-session',
@ -13,11 +16,46 @@ export class RegisterComponent {
email: string; email: string;
password: string; password: string;
passwordConfirm: string; passwordConfirm: string;
go_reg: any;
constructor( constructor(public restApi:ApiService,public fb:FormBuilder,public router:Router) { }
private router: Router
) { }
ngOnInit() {
// this.getSchoolReqList();
this.initForm();
}
initForm()
{
this.go_reg = this.fb.group(
{
id: new FormControl(''),
name: new FormControl(''),
email: new FormControl(''),
mobile: new FormControl(''),
password: new FormControl(''),
org_info: this.fb.group({
orgname: new FormControl(''),
org_address: new FormControl(''),
org_pan: new FormControl('')
}),
"created_by":"1",
"updated_by":"1"
})
}
csrUserRegistration()
{
// console.log(this.go_reg.value);return false;
let url = `${environment.apiUrl}${'csrUserRegistration'}`;
let data = this.go_reg.value;
this.restApi.post(url,data).subscribe(schDet=>
{
this.router.navigate(['/authentication/login']);
})
}
register() { register() {
this.router.navigate(['/']); this.router.navigate(['/']);
} }

3
ng8-seed/src/app/session/session.module.ts
View File

@ -8,7 +8,7 @@ import {
MatButtonModule, MatButtonModule,
MatProgressBarModule, MatProgressBarModule,
MatToolbarModule } from '@angular/material'; MatToolbarModule } from '@angular/material';
import { FormsModule } from '@angular/forms'; import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatIconModule} from '@angular/material'; import { MatIconModule} from '@angular/material';
import { FlexLayoutModule } from '@angular/flex-layout'; import { FlexLayoutModule } from '@angular/flex-layout';
import { LoginComponent } from './login/login.component'; import { LoginComponent } from './login/login.component';
@ -29,6 +29,7 @@ import { SessionRoutes } from './session.routing';
MatInputModule, MatInputModule,
MatRadioModule, MatRadioModule,
MatButtonModule, MatButtonModule,
ReactiveFormsModule,
MatProgressBarModule, MatProgressBarModule,
MatToolbarModule, MatToolbarModule,
FlexLayoutModule FlexLayoutModule

12
ng8-seed/src/app/shared/api.service.spec.ts Normal file
View File

@ -0,0 +1,12 @@
import { TestBed } from '@angular/core/testing';
import { ApiService } from './api.service';
describe('ApiService', () => {
beforeEach(() => TestBed.configureTestingModule({}));
it('should be created', () => {
const service: ApiService = TestBed.get(ApiService);
expect(service).toBeTruthy();
});
});

119
ng8-seed/src/app/shared/api.service.ts Normal file
View File

@ -0,0 +1,119 @@
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { environment } from '../../environments/environment';
import { Observable,from,of, BehaviorSubject } from 'rxjs';
import { delay } from 'rxjs/internal/operators';
import 'rxjs/Rx';
import 'rxjs/add/operator/toPromise';
// Api Url Enviroment
const apiUrl = environment.apiUrl;
@Injectable({
providedIn: 'root'
})
export class ApiService {
expToken = new BehaviorSubject(false);
constructor(public http:HttpClient) {
this.Token();
}
//POST
post(url:any,data:any): Observable<any>
{
return this.http.post(url,data).map(res=>
{
console.log("Api Call Success `"+url+"`");
return res;
});
}
//GET
get(url)
{
return this.http.get(url).map(res=>
{
console.log("Api Call Success `"+url+"`");
return res;
});
}
//PUT
//DELETE
//JWT Token Decode
jwtDecode(t) {
let token = {};
token['raw'] = t;
token['header'] = JSON.parse(window.atob(t.split('.')[0]));
token['payload'] = JSON.parse(window.atob(t.split('.')[1]));
return (token);
}
private extractData(response: Response) {
console.log(response);
let body = response.json();
return body || {};
}
private handleError(error: Response) {
console.log( 'Error in api service call :' + JSON.stringify( error));
console.log( 'Error in api service call :' + error.status);
// console.log("dataUrl in error post call::"+dataurl);
// console.log(dataurl.substring(dataurl.lastIndexOf("/")+1, dataurl.length));
return Observable.of(error);
// return Observable.throw(error);
}
setToken(token)
{
// console.log(token);
window.localStorage.setItem('token',token);
}
Token()
{
let currToken = window.localStorage.getItem('token');
// console.log(currToken);
if(currToken !=null)
{
this.expToken.next(true);
}else
{
this.expToken.next(false);
}
// console.log(this.expToken);
return currToken;
}
isToken()
{
return this.expToken.value;
}
}

12
ng8-seed/src/app/shared/guards/auth-guard.service.spec.ts Normal file
View File

@ -0,0 +1,12 @@
import { TestBed } from '@angular/core/testing';
import { AuthGuardService } from './auth-guard.service';
describe('AuthGuardService', () => {
beforeEach(() => TestBed.configureTestingModule({}));
it('should be created', () => {
const service: AuthGuardService = TestBed.get(AuthGuardService);
expect(service).toBeTruthy();
});
});

22
ng8-seed/src/app/shared/guards/auth-guard.service.ts Normal file
View File

@ -0,0 +1,22 @@
import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, CanActivateChild } from '@angular/router';
import { Router } from '@angular/router';
import { ApiService } from '../api.service';
@Injectable({
providedIn: 'root'
})
export class AuthGuardService implements CanActivate{
constructor(public router:Router,public api:ApiService) {
}
canActivate(): boolean {
return this.api.isToken();
}
}

12
ng8-seed/src/app/shared/guards/token-interceptor.service.spec.ts Normal file
View File

@ -0,0 +1,12 @@
import { TestBed } from '@angular/core/testing';
import { TokenInterceptorService } from './token-interceptor.service';
describe('TokenInterceptorService', () => {
beforeEach(() => TestBed.configureTestingModule({}));
it('should be created', () => {
const service: TokenInterceptorService = TestBed.get(TokenInterceptorService);
expect(service).toBeTruthy();
});
});

58
ng8-seed/src/app/shared/guards/token-interceptor.service.ts Normal file
View File

@ -0,0 +1,58 @@
import { Injectable } from '@angular/core';
import {
HttpRequest,
HttpHandler,
HttpEvent,
HttpInterceptor,
HttpHeaders
} from '@angular/common/http';
// import { AuthGuard } from './auth.guard';
import { Observable, of} from 'rxjs';
// import { Router } from '@angular/router';
import { catchError, map, tap } from 'rxjs/operators';
import { HttpErrorResponse } from "@angular/common/http";
@Injectable({
providedIn: 'root'
})
export class TokenInterceptorService implements HttpInterceptor {
constructor() { }
intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
//TODO Get the auth token from the service.
//TODO replace const authToken = this.auth.getAuthorizationToken();
let token = window.localStorage.getItem('token') || null;
let authReq;
if(token ==null){
authReq = req.clone({
setHeaders: {'Content-Type':'application/json','Authorization':'csr_dev'}
});
}else
{
authReq = req.clone({
setHeaders: {'Token':token,'Authorization':'csr_dev'}
});
}
return next.handle(authReq);
}
private handleError<T> (operation = 'operation', result?: T) {
return (error: any): Observable<T> => {
if(error instanceof HttpErrorResponse){
console.error("Error: " + error.status);
if(error.status == 401){
localStorage.clear();
// this.router.navigate(['/authentication/login']);
}
return of(result as T);
}
};
}
}

3
ng8-seed/src/environments/environment.prod.ts
View File

@ -1,3 +1,4 @@
export const environment = { export const environment = {
production: true production: true,
apiUrl:'https://lms.venbainfotech.com/csr/api/',
}; };

3
ng8-seed/src/environments/environment.ts
View File

@ -4,5 +4,6 @@
// The list of which env maps to which file can be found in `angular-cli.json`. // The list of which env maps to which file can be found in `angular-cli.json`.
export const environment = { export const environment = {
production: false production: false,
apiUrl:'https://lms.venbainfotech.com/csr/api/',
}; };