UI New Design

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

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

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

@@ -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
 }
   ]
 },

ng8-seed/src/app/components/my-account/my-account.component.html

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

ng8-seed/src/app/components/my-account/my-account.component.spec.ts

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

ng8-seed/src/app/components/my-account/my-account.component.ts

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

ng8-seed/src/app/shared/menu-items/horizontal-menu-items.ts

@@ -40,12 +40,12 @@ const HORIZONTALMENUITEMS = [
       {state: 'paymentconfirmation', name: 'PaymentConfirmation'}
     ]
   },
-  // {
+  {
-  //   state: 'projects',
+    state: 'my-account',
-  //   name: 'Projects',
+    name: 'My-Account',
-  //   type: 'link',
+    type: 'link',
-  //   icon: 'bookmark'
+    icon: 'person'
-  // },
+  },
   // {
   //   state: 'contribute',
   //   name: 'Contribute',