From 501f4560eb1b14293555f8976cf1d3addb28668d Mon Sep 17 00:00:00 2001 From: Marcel Meyer Date: Fri, 4 Nov 2022 14:02:46 +0100 Subject: [PATCH 1/2] changed member ts and html --- src/app/app-routing.module.ts | 4 +- src/app/app.module.ts | 4 +- ...ponent.html => member-list.component.html} | 12 +- ...ponent.scss => member-list.component.scss} | 0 ....spec.ts => member-list.component.spec.ts} | 10 +- .../members/member-list.component.ts | 87 +++++++++++++++ .../members/members-list.component.ts | 103 ------------------ 7 files changed, 105 insertions(+), 115 deletions(-) rename src/app/components/members/{members-list.component.html => member-list.component.html} (86%) rename src/app/components/members/{members-list.component.scss => member-list.component.scss} (100%) rename src/app/components/members/{members-list.component.spec.ts => member-list.component.spec.ts} (58%) create mode 100644 src/app/components/members/member-list.component.ts delete mode 100644 src/app/components/members/members-list.component.ts diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 0b4edbe..f509107 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -1,6 +1,6 @@ import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; -import { MembersListComponent } from './components/members/members-list.component' +import { MemberListComponent } from './components/members/member-list.component' import {RoutesComponent} from "./components/routes/routes.component"; import {RouteComponent} from "./components/routes/route/route.component"; import {RouteDetailPageComponent} from "./components/routes/route/route-detail-page/route-detail-page.component"; @@ -8,7 +8,7 @@ import {AddRouteFormComponent} from "./components/routes/route/add-route-form/ad const routes: Routes = [ { - path:'members', component:MembersListComponent + path:'members', component:MemberListComponent }, { path: 'routes', diff --git a/src/app/app.module.ts b/src/app/app.module.ts index e194dbf..fa5f2f4 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -4,7 +4,7 @@ import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { MatMenuModule} from '@angular/material/menu'; -import { MembersListComponent } from './components/members/members-list.component'; +import { MemberListComponent } from './components/members/member-list.component'; import {FormsModule, ReactiveFormsModule} from "@angular/forms"; import {MatTableModule} from "@angular/material/table"; import {HttpClientModule} from "@angular/common/http"; @@ -27,7 +27,7 @@ import {RouteDetailPageComponent} from "./components/routes/route/route-detail-p @NgModule({ declarations: [ AppComponent, - MembersListComponent, + MemberListComponent, RoutesComponent, RouteComponent, AddRouteFormComponent, diff --git a/src/app/components/members/members-list.component.html b/src/app/components/members/member-list.component.html similarity index 86% rename from src/app/components/members/members-list.component.html rename to src/app/components/members/member-list.component.html index 06aa41f..a7d6a7e 100644 --- a/src/app/components/members/members-list.component.html +++ b/src/app/components/members/member-list.component.html @@ -1,14 +1,14 @@
- Member Table - + Filter Table +
- +
@@ -40,6 +40,12 @@ + + + + +
No. {{member.id}}
The filter does not match any + item in the data for this text {{input.value}}
diff --git a/src/app/components/members/members-list.component.scss b/src/app/components/members/member-list.component.scss similarity index 100% rename from src/app/components/members/members-list.component.scss rename to src/app/components/members/member-list.component.scss diff --git a/src/app/components/members/members-list.component.spec.ts b/src/app/components/members/member-list.component.spec.ts similarity index 58% rename from src/app/components/members/members-list.component.spec.ts rename to src/app/components/members/member-list.component.spec.ts index 63ccbba..5b518d3 100644 --- a/src/app/components/members/members-list.component.spec.ts +++ b/src/app/components/members/member-list.component.spec.ts @@ -1,18 +1,18 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'; -import { MembersListComponent } from './members-list.component'; +import { MemberListComponent } from './member-list.component'; describe('MembersComponent', () => { - let component: MembersListComponent; - let fixture: ComponentFixture; + let component: MemberListComponent; + let fixture: ComponentFixture; beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [ MembersListComponent ] + declarations: [ MemberListComponent ] }) .compileComponents(); - fixture = TestBed.createComponent(MembersListComponent); + fixture = TestBed.createComponent(MemberListComponent); component = fixture.componentInstance; fixture.detectChanges(); }); diff --git a/src/app/components/members/member-list.component.ts b/src/app/components/members/member-list.component.ts new file mode 100644 index 0000000..a69e3c3 --- /dev/null +++ b/src/app/components/members/member-list.component.ts @@ -0,0 +1,87 @@ +import {Component, OnInit, ViewChild} from '@angular/core'; +import {MemberService} from "../../services/member.service"; +import {Member} from "../../models/member"; +import {HttpErrorResponse} from "@angular/common/http"; +import {MatPaginator} from "@angular/material/paginator"; +import {MatSort, Sort} from "@angular/material/sort"; +import {LiveAnnouncer} from "@angular/cdk/a11y"; +import {MatTableDataSource} from "@angular/material/table"; + + + + + +@Component({ + selector: 'app-members', + templateUrl: './member-list.component.html', + styleUrls: ['./member-list.component.scss'] +}) +export class MemberListComponent implements OnInit{ + + title = 'Member-Table' + dataSource!: MatTableDataSource; + @ViewChild(MatPaginator) paginator!: MatPaginator; + @ViewChild(MatSort) sort!: MatSort; + posts: any; + displayedColumns: string[] = ['id', 'firstName', 'lastName', 'details', 'delete']; + + constructor(private memberService: MemberService) {} + + ngOnInit(): void { + this.getMembers(); + } + + public getMembers(): void { + this.memberService.getMembers().subscribe( + (data: Member[]) => { + console.log(data); + this.posts = data; + this.dataSource = new MatTableDataSource(this.posts); + this.dataSource.paginator = this.paginator; + this.dataSource.sort = this.sort; + + }, + (error: HttpErrorResponse) => { + alert(error.message); + } + ) + } + + applyFilter(event:Event){ + const filterValue = (event.target as HTMLInputElement).value; + this.dataSource.filter = filterValue.trim().toLowerCase(); + + if (this.dataSource.paginator) { + this.dataSource.paginator.firstPage(); + } + } + + // get filter(){ + // return this._filter; + // } + // + // set filter(value: string){ + // this._filter = value; + // this.filteredMembers = this.filterMembers(value); + // this.writeLog(value); + // this.writeLog(this.filteredMembers) + // } + + // writeLog(log: any){ + // console.log(log); + // } + // + // filterMembers(filter: string){ + // return this.filteredMembers.filter((member: Member) => member.lastName.includes(filter)); + // + // } + + + redirectToDetails(id: number) { + + } + + redirectToDelete(id: number) { + + } +} diff --git a/src/app/components/members/members-list.component.ts b/src/app/components/members/members-list.component.ts deleted file mode 100644 index 5049447..0000000 --- a/src/app/components/members/members-list.component.ts +++ /dev/null @@ -1,103 +0,0 @@ -import {AfterViewInit, Component, OnInit, ViewChild} from '@angular/core'; -import {MemberService} from "../../services/member.service"; -import {Member} from "../../models/member"; -import {HttpErrorResponse} from "@angular/common/http"; -import {MatPaginator} from "@angular/material/paginator"; -import {MatSort, Sort} from "@angular/material/sort"; -import {LiveAnnouncer} from "@angular/cdk/a11y"; -import {MatTableDataSource} from "@angular/material/table"; - - - - - -@Component({ - selector: 'app-members', - templateUrl: './members-list.component.html', - styleUrls: ['./members-list.component.scss'] -}) -export class MembersListComponent implements OnInit, AfterViewInit { - - private _filter!: string; - members: Member[] = []; - filteredMembers!: Member[]; - dataSource = new MatTableDataSource(this.members); - displayedColumns: string[] = ['id', 'firstName', 'lastName', 'details', 'delete']; - - constructor(private memberService: MemberService, private _liveAnnouncer: LiveAnnouncer) {} - - @ViewChild(MatPaginator) paginator!: MatPaginator; - @ViewChild(MatSort) sort!: MatSort; - - - ngOnInit(): void { - this.getMembers(); - } - - ngAfterViewInit(): void { - //this.dataSource.paginator = this.paginator; - //this.dataSource.sort = this.sort; - - } - - public getMembers(): void { - this.memberService.getMembers().subscribe( - (response:Member[]) => { - console.log(response); - this.members = response; - this.filteredMembers = response; - this.dataSource = new MatTableDataSource(response); - this.dataSource.paginator = this.paginator; - this.dataSource.sort = this.sort; - - }, - (error: HttpErrorResponse) => { - alert(error.message); - } - ) - } - - get filter(){ - return this._filter; - } - - set filter(value: string){ - this._filter = value; - this.filteredMembers = this.filterMembers(value); - this.writeLog(value); - this.writeLog(this.filteredMembers) - } - - writeLog(log: any){ - console.log(log); - } - - filterMembers(filter: string){ - return this.filteredMembers.filter((member: Member) => member.lastName.includes(filter)); - - } - - public deleteMember() { - - } - - public redirectToDetails = (id: number) => { - - } - - public redirectToUpdate = (id: string) => { - - } - - public redirectToDelete = (id: string) => { - - } - - announceSortChange(sortState: Sort) { - if (sortState.direction) { - this._liveAnnouncer.announce(`Sorted ${sortState.direction}ending`); - } else { - this._liveAnnouncer.announce('Sorting cleared'); - } - } -} -- GitLab From 90a898cb79a10adfd8609b5f6c27dae870ef2721 Mon Sep 17 00:00:00 2001 From: Marcel Meyer Date: Fri, 4 Nov 2022 14:57:56 +0100 Subject: [PATCH 2/2] finished member table --- .../members/member-list.component.html | 15 ++++------ .../members/member-list.component.ts | 28 +------------------ 2 files changed, 7 insertions(+), 36 deletions(-) diff --git a/src/app/components/members/member-list.component.html b/src/app/components/members/member-list.component.html index a7d6a7e..2aeb5b3 100644 --- a/src/app/components/members/member-list.component.html +++ b/src/app/components/members/member-list.component.html @@ -1,14 +1,11 @@
Filter Table - +
-
- - - - +
+
@@ -42,9 +39,9 @@ - - + +
No. {{member.id}}
The filter does not match any - item in the data for this text {{input.value}}
There is no + member with the lastname: {{input.value}}
member.lastName.includes(filter)); - // - // } - - redirectToDetails(id: number) { } -- GitLab