Add customizable edit page
Adding the item being edited to local storage, so it doesn't have to request it again
This commit is contained in:
parent
79fb876da8
commit
512cbb9af6
17 changed files with 164 additions and 19 deletions
|
@ -11,7 +11,7 @@ export class ApiService {
|
||||||
constructor(private http: HttpClient, private loginService: LoginService) {
|
constructor(private http: HttpClient, private loginService: LoginService) {
|
||||||
}
|
}
|
||||||
|
|
||||||
request(method: 'post' | 'get' | 'delete', url: string, body: any): Promise<any> {
|
request(method: 'post' | 'get' | 'delete' | 'patch', url: string, body: any): Promise<any> {
|
||||||
return this.http.request(method, environment.backendUrl + url, {
|
return this.http.request(method, environment.backendUrl + url, {
|
||||||
body,
|
body,
|
||||||
headers: {Authorization: 'Bearer ' + this.loginService.token}
|
headers: {Authorization: 'Bearer ' + this.loginService.token}
|
||||||
|
|
3
frontend/src/app/model/model.ts
Normal file
3
frontend/src/app/model/model.ts
Normal file
|
@ -0,0 +1,3 @@
|
||||||
|
export class Model {
|
||||||
|
id: number;
|
||||||
|
}
|
|
@ -1,4 +1,6 @@
|
||||||
export class User {
|
import { Model } from './model';
|
||||||
|
|
||||||
|
export class User extends Model {
|
||||||
name: string;
|
name: string;
|
||||||
isAdmin: boolean;
|
isAdmin: boolean;
|
||||||
}
|
}
|
||||||
|
|
12
frontend/src/app/shared-components/edit/edit.component.html
Normal file
12
frontend/src/app/shared-components/edit/edit.component.html
Normal file
|
@ -0,0 +1,12 @@
|
||||||
|
<div *ngIf="item; else loading">
|
||||||
|
<form [formGroup]="formGroup">
|
||||||
|
<mat-form-field *ngFor="let field of fields">
|
||||||
|
<mat-label>{{ field.title }}</mat-label>
|
||||||
|
<input matInput [formControlName]="field.name" type="text"/>
|
||||||
|
</mat-form-field>
|
||||||
|
<button mat-raised-button color="primary" (click)="submit()">Mentés</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
<ng-template #loading>
|
||||||
|
<mat-spinner [diameter]="100" [style.margin]="'auto'"></mat-spinner>
|
||||||
|
</ng-template>
|
|
@ -0,0 +1,25 @@
|
||||||
|
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||||
|
|
||||||
|
import { EditComponent } from './edit.component';
|
||||||
|
|
||||||
|
describe('EditComponent', () => {
|
||||||
|
let component: EditComponent;
|
||||||
|
let fixture: ComponentFixture<EditComponent>;
|
||||||
|
|
||||||
|
beforeEach(async () => {
|
||||||
|
await TestBed.configureTestingModule({
|
||||||
|
declarations: [ EditComponent ]
|
||||||
|
})
|
||||||
|
.compileComponents();
|
||||||
|
});
|
||||||
|
|
||||||
|
beforeEach(() => {
|
||||||
|
fixture = TestBed.createComponent(EditComponent);
|
||||||
|
component = fixture.componentInstance;
|
||||||
|
fixture.detectChanges();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should create', () => {
|
||||||
|
expect(component).toBeTruthy();
|
||||||
|
});
|
||||||
|
});
|
41
frontend/src/app/shared-components/edit/edit.component.ts
Normal file
41
frontend/src/app/shared-components/edit/edit.component.ts
Normal file
|
@ -0,0 +1,41 @@
|
||||||
|
import { Component, Input, OnInit } from '@angular/core';
|
||||||
|
import { ApiService } from '../../api.service';
|
||||||
|
import { ActivatedRoute, Router } from '@angular/router';
|
||||||
|
import { Model } from '../../model/model';
|
||||||
|
import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-edit',
|
||||||
|
templateUrl: './edit.component.html',
|
||||||
|
styleUrls: ['./edit.component.css']
|
||||||
|
})
|
||||||
|
export class EditComponent<T extends Model> implements OnInit {
|
||||||
|
|
||||||
|
item?: T;
|
||||||
|
|
||||||
|
@Input() apiPath: string;
|
||||||
|
@Input() fields: { title: string, name: string }[];
|
||||||
|
formGroup: FormGroup;
|
||||||
|
|
||||||
|
constructor(private api: ApiService, private router: Router, private fb: FormBuilder, private route: ActivatedRoute) {
|
||||||
|
}
|
||||||
|
|
||||||
|
async ngOnInit(): Promise<void> {
|
||||||
|
this.item = JSON.parse(window.localStorage.getItem(this.router.url));
|
||||||
|
window.localStorage.removeItem(this.router.url);
|
||||||
|
if (!this.item) {
|
||||||
|
this.item = await this.api.request('get', this.apiPath + '/' + this.route.snapshot.url[this.route.snapshot.url.length - 1], {});
|
||||||
|
}
|
||||||
|
this.formGroup = this.fb.group(this.fields.reduce((pv, cv) => Object.assign(pv, {[cv.name]: new FormControl()}), {}));
|
||||||
|
this.formGroup.patchValue(this.item);
|
||||||
|
}
|
||||||
|
|
||||||
|
async submit(): Promise<void> {
|
||||||
|
try {
|
||||||
|
await this.api.request('patch', this.apiPath + '/' + this.item.id, this.formGroup.value);
|
||||||
|
} catch (e) {
|
||||||
|
alert(e);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
|
@ -1,4 +1,4 @@
|
||||||
<app-table [items]="items" (pageChange)="handlePageChange($event)" [paginationData]="paginationData" [columns]="columns"
|
<app-table [items]="items" (pageChange)="handlePageChange($event)" [paginationData]="paginationData" [columns]="columns"
|
||||||
[loading]="loading">
|
[loading]="loading" (editItem)="editItem($event)">
|
||||||
|
|
||||||
</app-table>
|
</app-table>
|
||||||
|
|
|
@ -2,23 +2,25 @@ import { Component, Input, OnInit, Type } from '@angular/core';
|
||||||
import { PageEvent } from '@angular/material/paginator';
|
import { PageEvent } from '@angular/material/paginator';
|
||||||
import { PaginationData } from '../../utility/pagination-data';
|
import { PaginationData } from '../../utility/pagination-data';
|
||||||
import { ApiService } from '../../api.service';
|
import { ApiService } from '../../api.service';
|
||||||
|
import { Model } from '../../model/model';
|
||||||
|
import { Router } from '@angular/router';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-list',
|
selector: 'app-list',
|
||||||
templateUrl: './list.component.html',
|
templateUrl: './list.component.html',
|
||||||
styleUrls: ['./list.component.css']
|
styleUrls: ['./list.component.css']
|
||||||
})
|
})
|
||||||
export class ListComponent<T> implements OnInit {
|
export class ListComponent<T extends Model> implements OnInit {
|
||||||
|
|
||||||
@Input() apiPath: string;
|
@Input() apiPath: string;
|
||||||
@Input() itemType: Type<T>;
|
@Input() itemType: Type<T>;
|
||||||
@Input() columns: {title: string, prop: keyof T}[];
|
@Input() columns: { title: string, prop: keyof T }[];
|
||||||
|
|
||||||
paginationData: PaginationData = {};
|
paginationData: PaginationData = {};
|
||||||
items: T[] = [];
|
items: T[] = [];
|
||||||
loading = false;
|
loading = false;
|
||||||
|
|
||||||
constructor(private api: ApiService) {
|
constructor(private api: ApiService, private router: Router) {
|
||||||
}
|
}
|
||||||
|
|
||||||
ngOnInit(): void {
|
ngOnInit(): void {
|
||||||
|
@ -42,4 +44,8 @@ export class ListComponent<T> implements OnInit {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
async editItem(item: T): Promise<void> {
|
||||||
|
window.localStorage.setItem(this.router.url + '/' + item.id, JSON.stringify(item));
|
||||||
|
await this.router.navigate([this.router.url, item.id]);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -7,22 +7,30 @@ import { MatTableModule } from '@angular/material/table';
|
||||||
import { MatButtonModule } from '@angular/material/button';
|
import { MatButtonModule } from '@angular/material/button';
|
||||||
import { MatIconModule } from '@angular/material/icon';
|
import { MatIconModule } from '@angular/material/icon';
|
||||||
import { ListComponent } from './list/list.component';
|
import { ListComponent } from './list/list.component';
|
||||||
|
import { EditComponent } from './edit/edit.component';
|
||||||
|
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
|
||||||
|
import { ReactiveFormsModule } from '@angular/forms';
|
||||||
|
import { MatInputModule } from '@angular/material/input';
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
declarations: [TableComponent, ListComponent],
|
declarations: [TableComponent, ListComponent, EditComponent],
|
||||||
exports: [
|
exports: [
|
||||||
TableComponent,
|
TableComponent,
|
||||||
ListComponent
|
ListComponent,
|
||||||
|
EditComponent
|
||||||
],
|
],
|
||||||
imports: [
|
imports: [
|
||||||
CommonModule,
|
CommonModule,
|
||||||
MatProgressBarModule,
|
MatProgressBarModule,
|
||||||
MatPaginatorModule,
|
MatPaginatorModule,
|
||||||
MatTableModule,
|
MatTableModule,
|
||||||
MatButtonModule,
|
MatButtonModule,
|
||||||
MatIconModule
|
MatIconModule,
|
||||||
]
|
MatProgressSpinnerModule,
|
||||||
|
ReactiveFormsModule,
|
||||||
|
MatInputModule
|
||||||
|
]
|
||||||
})
|
})
|
||||||
export class SharedComponentsModule { }
|
export class SharedComponentsModule { }
|
||||||
|
|
|
@ -15,7 +15,7 @@
|
||||||
<ng-container matColumnDef="actions" stickyEnd>
|
<ng-container matColumnDef="actions" stickyEnd>
|
||||||
<th mat-header-cell *matHeaderCellDef style="width: 2rem"></th>
|
<th mat-header-cell *matHeaderCellDef style="width: 2rem"></th>
|
||||||
<td mat-cell *matCellDef="let item">
|
<td mat-cell *matCellDef="let item">
|
||||||
<button mat-icon-button color="primary"><mat-icon>edit</mat-icon></button>
|
<button mat-icon-button color="primary" (click)="editItem.emit(item)"><mat-icon>edit</mat-icon></button>
|
||||||
</td>
|
</td>
|
||||||
<tr mat-header-row *matHeaderRowDef="getPropNames()"></tr>
|
<tr mat-header-row *matHeaderRowDef="getPropNames()"></tr>
|
||||||
<tr mat-row *matRowDef="let row; columns: getPropNames()"></tr>
|
<tr mat-row *matRowDef="let row; columns: getPropNames()"></tr>
|
||||||
|
|
|
@ -16,6 +16,7 @@ export class TableComponent<T> implements OnInit {
|
||||||
@Input() paginationData: PaginationData = {page: 1, limit: 10};
|
@Input() paginationData: PaginationData = {page: 1, limit: 10};
|
||||||
|
|
||||||
@Output() pageChange = new EventEmitter<PageEvent>();
|
@Output() pageChange = new EventEmitter<PageEvent>();
|
||||||
|
@Output() editItem = new EventEmitter<T>();
|
||||||
|
|
||||||
constructor() {
|
constructor() {
|
||||||
}
|
}
|
||||||
|
|
0
frontend/src/app/users/user-edit/user-edit.component.css
Normal file
0
frontend/src/app/users/user-edit/user-edit.component.css
Normal file
|
@ -0,0 +1,5 @@
|
||||||
|
<app-edit [apiPath]="'/users'" [fields]="[
|
||||||
|
{title: 'E-mail', name: 'email'},
|
||||||
|
{title: 'Név', name: 'name'},
|
||||||
|
{title: 'Admin', name: 'isAdmin'}
|
||||||
|
]"></app-edit>
|
25
frontend/src/app/users/user-edit/user-edit.component.spec.ts
Normal file
25
frontend/src/app/users/user-edit/user-edit.component.spec.ts
Normal file
|
@ -0,0 +1,25 @@
|
||||||
|
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||||
|
|
||||||
|
import { UserEditComponent } from './user-edit.component';
|
||||||
|
|
||||||
|
describe('UserEditComponent', () => {
|
||||||
|
let component: UserEditComponent;
|
||||||
|
let fixture: ComponentFixture<UserEditComponent>;
|
||||||
|
|
||||||
|
beforeEach(async () => {
|
||||||
|
await TestBed.configureTestingModule({
|
||||||
|
declarations: [ UserEditComponent ]
|
||||||
|
})
|
||||||
|
.compileComponents();
|
||||||
|
});
|
||||||
|
|
||||||
|
beforeEach(() => {
|
||||||
|
fixture = TestBed.createComponent(UserEditComponent);
|
||||||
|
component = fixture.componentInstance;
|
||||||
|
fixture.detectChanges();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should create', () => {
|
||||||
|
expect(component).toBeTruthy();
|
||||||
|
});
|
||||||
|
});
|
15
frontend/src/app/users/user-edit/user-edit.component.ts
Normal file
15
frontend/src/app/users/user-edit/user-edit.component.ts
Normal file
|
@ -0,0 +1,15 @@
|
||||||
|
import { Component, OnInit } from '@angular/core';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-user-edit',
|
||||||
|
templateUrl: './user-edit.component.html',
|
||||||
|
styleUrls: ['./user-edit.component.css']
|
||||||
|
})
|
||||||
|
export class UserEditComponent implements OnInit {
|
||||||
|
|
||||||
|
constructor() { }
|
||||||
|
|
||||||
|
ngOnInit(): void {
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
|
@ -4,13 +4,15 @@ import { UserListComponent } from './user-list/user-list.component';
|
||||||
import { RouterModule, Routes } from '@angular/router';
|
import { RouterModule, Routes } from '@angular/router';
|
||||||
import { RouteData } from '../app-routing.module';
|
import { RouteData } from '../app-routing.module';
|
||||||
import { SharedComponentsModule } from '../shared-components/shared-components.module';
|
import { SharedComponentsModule } from '../shared-components/shared-components.module';
|
||||||
|
import { UserEditComponent } from './user-edit/user-edit.component';
|
||||||
|
|
||||||
const routes: Routes = [
|
const routes: Routes = [
|
||||||
{path: '', component: UserListComponent, data: {title: 'Felhasználók'} as RouteData}
|
{path: '', component: UserListComponent, data: {title: 'Felhasználók'} as RouteData},
|
||||||
|
{path: ':id', component: UserEditComponent, data: {title: 'Szerkesztés'}}
|
||||||
];
|
];
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
declarations: [UserListComponent],
|
declarations: [UserListComponent, UserEditComponent],
|
||||||
imports: [
|
imports: [
|
||||||
CommonModule,
|
CommonModule,
|
||||||
RouterModule.forChild(routes),
|
RouterModule.forChild(routes),
|
||||||
|
|
Loading…
Reference in a new issue