Added person list control value accessor.
This commit is contained in:
parent
0d42b9e88a
commit
60e9074fc9
@ -17,6 +17,9 @@ import {ReactiveFormsModule} from "@angular/forms";
|
|||||||
import {MatInputModule} from "@angular/material/input";
|
import {MatInputModule} from "@angular/material/input";
|
||||||
import {MatDialog, MatDialogModule} from "@angular/material/dialog";
|
import {MatDialog, MatDialogModule} from "@angular/material/dialog";
|
||||||
import { GroupFormComponent } from './component/form/group-form/group-form.component';
|
import { GroupFormComponent } from './component/form/group-form/group-form.component';
|
||||||
|
import { PersonSelectorComponent } from './component/selector/person-selector/person-selector.component';
|
||||||
|
import { PersonListControlValueAccessorComponent } from './component/controlValueAccessor/person-list-control-value-accessor/person-list-control-value-accessor.component';
|
||||||
|
import { ImportExportComponent } from './component/import-export/import-export.component';
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
declarations: [
|
declarations: [
|
||||||
@ -24,7 +27,10 @@ import { GroupFormComponent } from './component/form/group-form/group-form.compo
|
|||||||
PersonListComponent,
|
PersonListComponent,
|
||||||
GroupListComponent,
|
GroupListComponent,
|
||||||
PersonFromComponent,
|
PersonFromComponent,
|
||||||
GroupFormComponent
|
GroupFormComponent,
|
||||||
|
PersonSelectorComponent,
|
||||||
|
PersonListControlValueAccessorComponent,
|
||||||
|
ImportExportComponent
|
||||||
],
|
],
|
||||||
imports: [
|
imports: [
|
||||||
BrowserModule,
|
BrowserModule,
|
||||||
|
@ -0,0 +1,45 @@
|
|||||||
|
<button type="button" mat-button (click)="openSelectorDialog()">
|
||||||
|
<mat-icon>add</mat-icon>
|
||||||
|
Dodaj
|
||||||
|
</button>
|
||||||
|
<div class="mat-elevation-z2">
|
||||||
|
<table mat-table [dataSource]="dataSource">
|
||||||
|
|
||||||
|
<ng-container matColumnDef="lp">
|
||||||
|
<th mat-header-cell *matHeaderCellDef>L.p.</th>
|
||||||
|
<td mat-cell *matCellDef="let element" class="mat-cell"> {{getElementNumber(element)}} </td>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<ng-container matColumnDef="id">
|
||||||
|
<th mat-header-cell *matHeaderCellDef>Id</th>
|
||||||
|
<td mat-cell *matCellDef="let element" class="mat-cell"> {{element.id}} </td>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<ng-container matColumnDef="name">
|
||||||
|
<th mat-header-cell *matHeaderCellDef>Imię</th>
|
||||||
|
<td mat-cell *matCellDef="let element" class="mat-cell"> {{element.name}} </td>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<ng-container matColumnDef="surname">
|
||||||
|
<th mat-header-cell *matHeaderCellDef>Nazwisko</th>
|
||||||
|
<td mat-cell *matCellDef="let element" class="mat-cell"> {{element.surname}} </td>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<ng-container matColumnDef="index">
|
||||||
|
<th mat-header-cell *matHeaderCellDef>Indeks</th>
|
||||||
|
<td mat-cell *matCellDef="let element" class="mat-cell"> {{element?.student?.index}} </td>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<ng-container matColumnDef="delete">
|
||||||
|
<th mat-header-cell *matHeaderCellDef>Usuń</th>
|
||||||
|
<td mat-cell *matCellDef="let element" class="mat-cell">
|
||||||
|
<button type="button" mat-icon-button (click)="deletePerson(element.id)">
|
||||||
|
<mat-icon>delete</mat-icon>
|
||||||
|
</button>
|
||||||
|
</td>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<tr mat-header-row *matHeaderRowDef="getDisplayedColumns()"></tr>
|
||||||
|
<tr mat-row *matRowDef="let row; columns: getDisplayedColumns();"></tr>
|
||||||
|
</table>
|
||||||
|
</div>
|
@ -0,0 +1,23 @@
|
|||||||
|
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||||
|
|
||||||
|
import { PersonListControlValueAccessorComponent } from './person-list-control-value-accessor.component';
|
||||||
|
|
||||||
|
describe('PersonListControlValueAccessorComponent', () => {
|
||||||
|
let component: PersonListControlValueAccessorComponent;
|
||||||
|
let fixture: ComponentFixture<PersonListControlValueAccessorComponent>;
|
||||||
|
|
||||||
|
beforeEach(async () => {
|
||||||
|
await TestBed.configureTestingModule({
|
||||||
|
declarations: [ PersonListControlValueAccessorComponent ]
|
||||||
|
})
|
||||||
|
.compileComponents();
|
||||||
|
|
||||||
|
fixture = TestBed.createComponent(PersonListControlValueAccessorComponent);
|
||||||
|
component = fixture.componentInstance;
|
||||||
|
fixture.detectChanges();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should create', () => {
|
||||||
|
expect(component).toBeTruthy();
|
||||||
|
});
|
||||||
|
});
|
@ -0,0 +1,85 @@
|
|||||||
|
import { Component } from '@angular/core';
|
||||||
|
import {Person} from "../../../model/person";
|
||||||
|
import {MatDialog} from "@angular/material/dialog";
|
||||||
|
import {tap} from "rxjs";
|
||||||
|
import {MatTableDataSource} from "@angular/material/table";
|
||||||
|
import {PersonSelectorComponent} from "../../selector/person-selector/person-selector.component";
|
||||||
|
import {ControlValueAccessor, NG_VALUE_ACCESSOR} from "@angular/forms";
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-person-list-control-value-accessor',
|
||||||
|
templateUrl: './person-list-control-value-accessor.component.html',
|
||||||
|
styleUrls: ['./person-list-control-value-accessor.component.sass'],
|
||||||
|
providers: [
|
||||||
|
{
|
||||||
|
provide: NG_VALUE_ACCESSOR,
|
||||||
|
multi: true,
|
||||||
|
useExisting: PersonListControlValueAccessorComponent
|
||||||
|
}
|
||||||
|
]
|
||||||
|
})
|
||||||
|
export class PersonListControlValueAccessorComponent implements ControlValueAccessor{
|
||||||
|
|
||||||
|
disabled = false;
|
||||||
|
dataSource: MatTableDataSource<Person>;
|
||||||
|
displayedColumns: Map<string, boolean> = new Map<string, boolean>([
|
||||||
|
['lp', true],
|
||||||
|
['id', true],
|
||||||
|
['name', true],
|
||||||
|
['surname', true],
|
||||||
|
['index', true],
|
||||||
|
['delete', true],
|
||||||
|
]);
|
||||||
|
|
||||||
|
constructor(
|
||||||
|
private dialog: MatDialog
|
||||||
|
) {
|
||||||
|
this.dataSource = new MatTableDataSource<Person>()
|
||||||
|
}
|
||||||
|
|
||||||
|
writeValue(people: Person[]): void {
|
||||||
|
this.dataSource.data = people;
|
||||||
|
}
|
||||||
|
registerOnChange(fn: (people: Person[] | null) => void): void {
|
||||||
|
this.onChange = fn;
|
||||||
|
}
|
||||||
|
registerOnTouched(fn: any): void {
|
||||||
|
this.onTouched = fn;
|
||||||
|
}
|
||||||
|
setDisabledState?(isDisabled: boolean): void {
|
||||||
|
this.disabled = isDisabled;
|
||||||
|
}
|
||||||
|
|
||||||
|
onChange = (people: Person[] | null) => {
|
||||||
|
}
|
||||||
|
|
||||||
|
onTouched = () => {
|
||||||
|
}
|
||||||
|
|
||||||
|
openSelectorDialog() {
|
||||||
|
const dialogRef = this.dialog.open(PersonSelectorComponent);
|
||||||
|
dialogRef.afterClosed().pipe(
|
||||||
|
tap(person => {
|
||||||
|
if (person != null) {
|
||||||
|
this.dataSource.data = [...this.dataSource.data, person];
|
||||||
|
this.onChange(this.dataSource.data);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
).subscribe()
|
||||||
|
}
|
||||||
|
|
||||||
|
deletePerson(id: number) {
|
||||||
|
this.dataSource.data = this.dataSource.data.filter(person => person.id !== id);
|
||||||
|
this.onChange(this.dataSource.data);
|
||||||
|
}
|
||||||
|
|
||||||
|
getDisplayedColumns(): string[] {
|
||||||
|
return [...this.displayedColumns.entries()]
|
||||||
|
.filter(column => column[1])
|
||||||
|
.map(column => column[0]);
|
||||||
|
}
|
||||||
|
|
||||||
|
getElementNumber(t: Person): number {
|
||||||
|
return (this.dataSource.data?.indexOf(t) ?? 0)+1;
|
||||||
|
}
|
||||||
|
}
|
Loading…
Reference in New Issue
Block a user