UI New Design
This commit is contained in:
sriram-at-840620226347
parent
071adc8401
commit
b062cc24f7
@ -28,6 +28,7 @@ import {MatCheckboxModule} from '@angular/material/checkbox';
|
||||
import {MatProgressBarModule} from '@angular/material/progress-bar';
|
||||
import {MatSelectModule} from '@angular/material/select';
|
||||
import {MatCardModule} from '@angular/material/card';
|
||||
import {NgxDatatableModule} from '@swimlane/ngx-datatable';
|
||||
|
||||
import { AppRoutes } from './app.routing';
|
||||
import { AppComponent } from './app.component';
|
||||
@ -43,6 +44,7 @@ import { ContributeComponent } from './components/contribute/contribute.componen
|
||||
import { ProjectsComponent } from './components/projects/projects.component';
|
||||
import { PaymentComponent } from './components/payment/payment.component';
|
||||
import { PaymentConfirmationComponent } from './components/payment-confirmation/payment-confirmation.component';
|
||||
import { MyAccountComponent } from './components/my-account/my-account.component';
|
||||
// import { AddEventModule } from './add-event.module';
|
||||
|
||||
export function HttpLoaderFactory(http: HttpClient) {
|
||||
@ -67,7 +69,8 @@ const DEFAULT_PERFECT_SCROLLBAR_CONFIG: PerfectScrollbarConfigInterface = {
|
||||
ContributeComponent,
|
||||
ProjectsComponent,
|
||||
PaymentComponent,
|
||||
PaymentConfirmationComponent
|
||||
PaymentConfirmationComponent,
|
||||
MyAccountComponent
|
||||
// ProjectListComponent
|
||||
],
|
||||
imports: [
|
||||
@ -83,6 +86,7 @@ const DEFAULT_PERFECT_SCROLLBAR_CONFIG: PerfectScrollbarConfigInterface = {
|
||||
MatMenuModule,
|
||||
MatToolbarModule,
|
||||
MatTabsModule,
|
||||
NgxDatatableModule,
|
||||
MatCheckboxModule,
|
||||
MatProgressBarModule,
|
||||
MatSelectModule,
|
||||
|
||||
@ -7,7 +7,7 @@ import { ContributeComponent } from './components/contribute/contribute.componen
|
||||
import { ProjectsComponent } from './components/projects/projects.component';
|
||||
import { PaymentComponent } from './components/payment/payment.component';
|
||||
import { PaymentConfirmationComponent } from './components/payment-confirmation/payment-confirmation.component';
|
||||
|
||||
import { MyAccountComponent } from './components/my-account/my-account.component';
|
||||
export const AppRoutes: Routes = [{
|
||||
path: '',
|
||||
redirectTo: 'home',
|
||||
@ -34,6 +34,10 @@ export const AppRoutes: Routes = [{
|
||||
{
|
||||
path : 'paymentconfirmation',
|
||||
component:PaymentConfirmationComponent
|
||||
},
|
||||
{
|
||||
path : 'my-account',
|
||||
component:MyAccountComponent
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
@ -0,0 +1,70 @@
|
||||
<mat-card>
|
||||
<mat-tab-group class="mt-2 p-2">
|
||||
<mat-tab>
|
||||
<ng-template mat-tab-label>My Profile</ng-template>
|
||||
<mat-card-content>
|
||||
<form method="post">
|
||||
<div fxLayout="row" fxLayoutAlign="start center" class="mb-2 pt-1">
|
||||
<mat-form-field class="ml-xs mr-xs" style="width: 30%;">
|
||||
<input matInput placeholder="Name" type="text">
|
||||
</mat-form-field>
|
||||
<mat-slide-toggle name="slideToggle" required ngModel class="pl-2">
|
||||
Registered as Organistation
|
||||
</mat-slide-toggle>
|
||||
</div>
|
||||
<div fxLayout="row" fxLayoutAlign="start center" class="mb-2 pt-1">
|
||||
<mat-form-field class="ml-xs mr-xs" style="width: 30%;">
|
||||
<input matInput placeholder="Email" type="Email">
|
||||
</mat-form-field>
|
||||
<mat-form-field class="ml-xs mr-xs" style="width: 30%;">
|
||||
<input matInput placeholder="Phone" type="number">
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div fxLayout="row" fxLayoutAlign="start center" class="mb-2 pt-1">
|
||||
<mat-form-field class="ml-xs mr-xs" style="width: 60%;">
|
||||
<input matInput placeholder="Organistation Name" type="text">
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div fxLayout="row" fxLayoutAlign="start center" class="mb-2 pt-1">
|
||||
<mat-form-field class="ml-xs mr-xs" style="width: 60%;">
|
||||
<input matInput placeholder="PAN Number" type="number">
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div fxLayout="row" fxLayoutAlign="start center" class="mb-2 pt-1">
|
||||
<mat-form-field class="ml-xs mr-xs" style="width: 60%;">
|
||||
<textarea matInput placeholder="Register Address" value="Some Text ..."></textarea>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<button class="mat-green" mat-raised-button>Update</button>
|
||||
</form>
|
||||
</mat-card-content>
|
||||
</mat-tab>
|
||||
<mat-tab>
|
||||
<ng-template mat-tab-label>My Contributions</ng-template>
|
||||
<mat-card-content>
|
||||
<form #form="ngForm">
|
||||
<ngx-datatable
|
||||
class="material"
|
||||
[rows]="rows"
|
||||
[columns]="[{name:'Data of Contribution'},{name:'Amount'},{name:'Status'},{name:'Contribution Towards'},{name:'Receipt'}]"
|
||||
[columnMode]="'force'"
|
||||
[headerHeight]="50"
|
||||
[footerHeight]="50"
|
||||
[rowHeight]="'auto'"
|
||||
[externalPaging]="true"
|
||||
[count]="count"
|
||||
[offset]="offset"
|
||||
[limit]="limit"
|
||||
(page)='onPage($event)'>
|
||||
</ngx-datatable>
|
||||
</form>
|
||||
</mat-card-content>
|
||||
</mat-tab>
|
||||
<mat-tab>
|
||||
<ng-template mat-tab-label>FAQ / Support</ng-template>
|
||||
<mat-card-content>
|
||||
|
||||
</mat-card-content>
|
||||
</mat-tab>
|
||||
</mat-tab-group>
|
||||
</mat-card>
|
||||
@ -0,0 +1,25 @@
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { MyAccountComponent } from './my-account.component';
|
||||
|
||||
describe('MyAccountComponent', () => {
|
||||
let component: MyAccountComponent;
|
||||
let fixture: ComponentFixture<MyAccountComponent>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ MyAccountComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(MyAccountComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,51 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-my-account',
|
||||
templateUrl: './my-account.component.html',
|
||||
styleUrls: ['./my-account.component.scss']
|
||||
})
|
||||
export class MyAccountComponent implements OnInit {
|
||||
firstToggle: boolean;
|
||||
rows = [];
|
||||
count = 0;
|
||||
offset = 0;
|
||||
limit = 10;
|
||||
|
||||
ngOnInit() {
|
||||
this.page(this.offset, this.limit);
|
||||
}
|
||||
|
||||
page(offset, limit) {
|
||||
this.fetch((results) => {
|
||||
this.count = results.length;
|
||||
|
||||
const start = offset * limit;
|
||||
const end = start + limit;
|
||||
const rows = [...this.rows];
|
||||
|
||||
for (let i = start; i < end; i++) {
|
||||
rows[i] = results[i];
|
||||
}
|
||||
|
||||
this.rows = rows;
|
||||
console.log('Page Results', start, end, rows);
|
||||
});
|
||||
}
|
||||
|
||||
fetch(cb) {
|
||||
const req = new XMLHttpRequest();
|
||||
req.open('GET', `assets/data/company.json`);
|
||||
|
||||
req.onload = () => {
|
||||
cb(JSON.parse(req.response));
|
||||
};
|
||||
|
||||
req.send();
|
||||
}
|
||||
|
||||
onPage(event) {
|
||||
console.log('Page Event', event);
|
||||
this.page(event.offset, event.limit);
|
||||
}
|
||||
}
|
||||
@ -40,12 +40,12 @@ const HORIZONTALMENUITEMS = [
|
||||
{state: 'paymentconfirmation', name: 'PaymentConfirmation'}
|
||||
]
|
||||
},
|
||||
// {
|
||||
// state: 'projects',
|
||||
// name: 'Projects',
|
||||
// type: 'link',
|
||||
// icon: 'bookmark'
|
||||
// },
|
||||
{
|
||||
state: 'my-account',
|
||||
name: 'My-Account',
|
||||
type: 'link',
|
||||
icon: 'person'
|
||||
},
|
||||
// {
|
||||
// state: 'contribute',
|
||||
// name: 'Contribute',
|
||||
|
||||
Loading…
Reference in New Issue
Block a user