Add subject list, edit/create pages
This commit is contained in:
parent
ed266d440f
commit
079449d980
16 changed files with 142 additions and 7 deletions
|
@ -17,6 +17,11 @@ const routes: Routes = [
|
||||||
path: 'users',
|
path: 'users',
|
||||||
loadChildren: async () => (await import('./users/users.module')).UsersModule,
|
loadChildren: async () => (await import('./users/users.module')).UsersModule,
|
||||||
data: {title: 'Felhasználók'} as RouteData
|
data: {title: 'Felhasználók'} as RouteData
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: 'subjects',
|
||||||
|
loadChildren: async () => (await import('./subjects/subjects.module')).SubjectsModule,
|
||||||
|
data: {title: 'Tárgyak'}
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|
|
@ -23,7 +23,8 @@ export class AppComponent implements OnInit {
|
||||||
);
|
);
|
||||||
|
|
||||||
menu: MenuItem[] = [
|
menu: MenuItem[] = [
|
||||||
{path: 'users', requiredRole: 'admin'}
|
{path: 'users', requiredRole: 'admin'},
|
||||||
|
{path: 'subjects', requiredRole: 'admin'}
|
||||||
];
|
];
|
||||||
|
|
||||||
routeSegments: RouteSegment[];
|
routeSegments: RouteSegment[];
|
||||||
|
|
6
frontend/src/app/model/subject.model.ts
Normal file
6
frontend/src/app/model/subject.model.ts
Normal file
|
@ -0,0 +1,6 @@
|
||||||
|
import { Model } from './model';
|
||||||
|
|
||||||
|
export class Subject extends Model {
|
||||||
|
name: string;
|
||||||
|
description: string;
|
||||||
|
}
|
|
@ -2,7 +2,8 @@ import { Model } from './model';
|
||||||
|
|
||||||
export class User extends Model {
|
export class User extends Model {
|
||||||
name: string;
|
name: string;
|
||||||
isAdmin: boolean;
|
email: string;
|
||||||
|
isAdmin = false;
|
||||||
}
|
}
|
||||||
|
|
||||||
export type UserRole = 'teacher' | 'student';
|
export type UserRole = 'teacher' | 'student';
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
import { Component, Input, OnInit } from '@angular/core';
|
import { Component, Input, OnInit, Type } from '@angular/core';
|
||||||
import { ApiService } from '../../api.service';
|
import { ApiService } from '../../api.service';
|
||||||
import { ActivatedRoute, Router } from '@angular/router';
|
import { ActivatedRoute, Router } from '@angular/router';
|
||||||
import { Model } from '../../model/model';
|
import { Model } from '../../model/model';
|
||||||
|
@ -12,10 +12,12 @@ import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
|
||||||
export class EditComponent<T extends Model> implements OnInit {
|
export class EditComponent<T extends Model> implements OnInit {
|
||||||
|
|
||||||
item?: T;
|
item?: T;
|
||||||
|
creating = false;
|
||||||
isLoading = true;
|
isLoading = true;
|
||||||
|
|
||||||
@Input() apiPath: string;
|
@Input() apiPath: string;
|
||||||
@Input() fields: { title: string, name: string }[];
|
@Input() fields: { title: string, name: keyof T }[];
|
||||||
|
@Input() itemType: Type<T>;
|
||||||
formGroup: FormGroup;
|
formGroup: FormGroup;
|
||||||
|
|
||||||
constructor(private api: ApiService, private router: Router, private fb: FormBuilder, private route: ActivatedRoute) {
|
constructor(private api: ApiService, private router: Router, private fb: FormBuilder, private route: ActivatedRoute) {
|
||||||
|
@ -31,6 +33,9 @@ export class EditComponent<T extends Model> implements OnInit {
|
||||||
this.formGroup = this.fb.group(this.fields.reduce((pv, cv) => Object.assign(pv, {[cv.name]: new FormControl()}), {}));
|
this.formGroup = this.fb.group(this.fields.reduce((pv, cv) => Object.assign(pv, {[cv.name]: new FormControl()}), {}));
|
||||||
if (this.item) {
|
if (this.item) {
|
||||||
this.formGroup.patchValue(this.item);
|
this.formGroup.patchValue(this.item);
|
||||||
|
} else {
|
||||||
|
this.item = new this.itemType();
|
||||||
|
this.creating = true;
|
||||||
}
|
}
|
||||||
this.isLoading = false;
|
this.isLoading = false;
|
||||||
}
|
}
|
||||||
|
@ -38,14 +43,14 @@ export class EditComponent<T extends Model> implements OnInit {
|
||||||
async submit(): Promise<void> {
|
async submit(): Promise<void> {
|
||||||
this.isLoading = true;
|
this.isLoading = true;
|
||||||
try {
|
try {
|
||||||
if (this.item) {
|
if (this.item && !this.creating) {
|
||||||
await this.api.request('patch', this.apiPath + '/' + this.item.id, this.formGroup.value);
|
await this.api.request('patch', this.apiPath + '/' + this.item.id, this.formGroup.value);
|
||||||
} else {
|
} else {
|
||||||
await this.api.request('post', this.apiPath, this.formGroup.value);
|
await this.api.request('post', this.apiPath, this.formGroup.value);
|
||||||
}
|
}
|
||||||
await this.router.navigateByUrl(this.router.url.substring(0, this.router.url.lastIndexOf('/')));
|
await this.router.navigateByUrl(this.router.url.substring(0, this.router.url.lastIndexOf('/')));
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
alert(e);
|
alert(e.message);
|
||||||
}
|
}
|
||||||
this.isLoading = false;
|
this.isLoading = false;
|
||||||
}
|
}
|
||||||
|
|
|
@ -0,0 +1,4 @@
|
||||||
|
<app-edit [apiPath]="'/subjects'" [itemType]="itemType" [fields]="[
|
||||||
|
{title: 'Név', name: 'name'},
|
||||||
|
{title: 'Leirás', name: 'description'}
|
||||||
|
]"></app-edit>
|
|
@ -0,0 +1,25 @@
|
||||||
|
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||||
|
|
||||||
|
import { SubjectEditComponent } from './subject-edit.component';
|
||||||
|
|
||||||
|
describe('SubjectEditComponent', () => {
|
||||||
|
let component: SubjectEditComponent;
|
||||||
|
let fixture: ComponentFixture<SubjectEditComponent>;
|
||||||
|
|
||||||
|
beforeEach(async () => {
|
||||||
|
await TestBed.configureTestingModule({
|
||||||
|
declarations: [ SubjectEditComponent ]
|
||||||
|
})
|
||||||
|
.compileComponents();
|
||||||
|
});
|
||||||
|
|
||||||
|
beforeEach(() => {
|
||||||
|
fixture = TestBed.createComponent(SubjectEditComponent);
|
||||||
|
component = fixture.componentInstance;
|
||||||
|
fixture.detectChanges();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should create', () => {
|
||||||
|
expect(component).toBeTruthy();
|
||||||
|
});
|
||||||
|
});
|
|
@ -0,0 +1,17 @@
|
||||||
|
import { Component, OnInit } from '@angular/core';
|
||||||
|
import { Subject } from '../../model/subject.model';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-subject-edit',
|
||||||
|
templateUrl: './subject-edit.component.html',
|
||||||
|
styleUrls: ['./subject-edit.component.css']
|
||||||
|
})
|
||||||
|
export class SubjectEditComponent implements OnInit {
|
||||||
|
itemType = Subject;
|
||||||
|
|
||||||
|
constructor() { }
|
||||||
|
|
||||||
|
ngOnInit(): void {
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
|
@ -0,0 +1,4 @@
|
||||||
|
<app-list apiPath="/subjects" [itemType]="itemType" allowNew="true" [columns]="[
|
||||||
|
{title: 'Név', prop: 'name'},
|
||||||
|
{title: 'Leirás', prop: 'description'}
|
||||||
|
]"></app-list>
|
|
@ -0,0 +1,25 @@
|
||||||
|
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||||
|
|
||||||
|
import { SubjectListComponent } from './subject-list.component';
|
||||||
|
|
||||||
|
describe('SubjectListComponent', () => {
|
||||||
|
let component: SubjectListComponent;
|
||||||
|
let fixture: ComponentFixture<SubjectListComponent>;
|
||||||
|
|
||||||
|
beforeEach(async () => {
|
||||||
|
await TestBed.configureTestingModule({
|
||||||
|
declarations: [ SubjectListComponent ]
|
||||||
|
})
|
||||||
|
.compileComponents();
|
||||||
|
});
|
||||||
|
|
||||||
|
beforeEach(() => {
|
||||||
|
fixture = TestBed.createComponent(SubjectListComponent);
|
||||||
|
component = fixture.componentInstance;
|
||||||
|
fixture.detectChanges();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should create', () => {
|
||||||
|
expect(component).toBeTruthy();
|
||||||
|
});
|
||||||
|
});
|
|
@ -0,0 +1,17 @@
|
||||||
|
import { Component, OnInit } from '@angular/core';
|
||||||
|
import { Subject } from '../../model/subject.model';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-subject-list',
|
||||||
|
templateUrl: './subject-list.component.html',
|
||||||
|
styleUrls: ['./subject-list.component.css']
|
||||||
|
})
|
||||||
|
export class SubjectListComponent implements OnInit {
|
||||||
|
itemType = Subject;
|
||||||
|
|
||||||
|
constructor() { }
|
||||||
|
|
||||||
|
ngOnInit(): void {
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
23
frontend/src/app/subjects/subjects.module.ts
Normal file
23
frontend/src/app/subjects/subjects.module.ts
Normal file
|
@ -0,0 +1,23 @@
|
||||||
|
import { NgModule } from '@angular/core';
|
||||||
|
import { CommonModule } from '@angular/common';
|
||||||
|
import { SubjectListComponent } from './subject-list/subject-list.component';
|
||||||
|
import { SubjectEditComponent } from './subject-edit/subject-edit.component';
|
||||||
|
import { SharedComponentsModule } from '../shared-components/shared-components.module';
|
||||||
|
import { RouterModule, Routes } from '@angular/router';
|
||||||
|
import { RouteData } from '../app-routing.module';
|
||||||
|
|
||||||
|
const routes: Routes = [
|
||||||
|
{path: '', component: SubjectListComponent, data: {title: 'Tárgyak'} as RouteData},
|
||||||
|
{path: ':id', component: SubjectEditComponent, data: {title: 'Szerkesztés'}}
|
||||||
|
];
|
||||||
|
|
||||||
|
@NgModule({
|
||||||
|
declarations: [SubjectListComponent, SubjectEditComponent],
|
||||||
|
imports: [
|
||||||
|
CommonModule,
|
||||||
|
SharedComponentsModule,
|
||||||
|
RouterModule.forChild(routes)
|
||||||
|
]
|
||||||
|
})
|
||||||
|
export class SubjectsModule {
|
||||||
|
}
|
|
@ -1,4 +1,4 @@
|
||||||
<app-edit [apiPath]="'/users'" [fields]="[
|
<app-edit [apiPath]="'/users'" [itemType]="itemType" [fields]="[
|
||||||
{title: 'E-mail', name: 'email'},
|
{title: 'E-mail', name: 'email'},
|
||||||
{title: 'Név', name: 'name'},
|
{title: 'Név', name: 'name'},
|
||||||
{title: 'Admin', name: 'isAdmin'}
|
{title: 'Admin', name: 'isAdmin'}
|
||||||
|
|
|
@ -1,4 +1,5 @@
|
||||||
import { Component, OnInit } from '@angular/core';
|
import { Component, OnInit } from '@angular/core';
|
||||||
|
import { User } from '../../model/user.model';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-user-edit',
|
selector: 'app-user-edit',
|
||||||
|
@ -6,6 +7,7 @@ import { Component, OnInit } from '@angular/core';
|
||||||
styleUrls: ['./user-edit.component.css']
|
styleUrls: ['./user-edit.component.css']
|
||||||
})
|
})
|
||||||
export class UserEditComponent implements OnInit {
|
export class UserEditComponent implements OnInit {
|
||||||
|
itemType = User;
|
||||||
|
|
||||||
constructor() { }
|
constructor() { }
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue