norbipeti/Szakdolgozat
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Add feature to assign user to course, add date editing support

Browse source 
It seems like the button click event doesn't work in an ngFor. That took a while to debug
This commit is contained in:
Norbi Peti 2022-05-14 17:42:27 +02:00
parent 0ea057eee1
commit ef5e2f6cfb
No known key found for this signature in database
GPG key ID: DBA4C4549A927E56
16 changed files with 109 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
backend/src/graphql-resolvers/course.resolver.ts
View file

@ -40,4 +40,13 @@ export class CourseResolver {
await this.courseRepo.create(input);
return true;
}
@mutation(returns => Boolean)
async courseAssignUser(@arg('course', returns => ID) course: number, @arg('user', returns => ID) user: number, @arg('role') role: string): Promise<boolean> {
if (role !== 'teacher' && role !== 'student') {
throw new Error('Érvénytelen szerepkör');
}
await this.courseRepo.users(course).link(user, {throughData: {role: role}});
return true;
}
}

13
frontend/src/app/auth/register/register.component.ts
View file

@ -1,8 +1,8 @@
import {Component, OnInit} from '@angular/core';
import {AbstractControl, FormControl, ValidationErrors, Validators} from '@angular/forms';
import {LoginService} from '../login.service';
import {Router} from '@angular/router';
import {FormErrorStateMatcher} from '../../utility/form-error-state-matcher';
import { Component, OnInit } from '@angular/core';
import { AbstractControl, FormControl, ValidationErrors, Validators } from '@angular/forms';
import { LoginService } from '../login.service';
import { Router } from '@angular/router';
import { FormErrorStateMatcher } from '../../utility/form-error-state-matcher';
@Component({
selector: 'app-register',
@ -74,8 +74,7 @@ export class RegisterComponent implements OnInit {
try {
await this.loginService.createUser(this.emailFormControl.value, this.passFormControl.value, this.nameFormControl.value);
await this.router.navigate(['/']);
} catch (e) {
alert(e);
} catch (e) { // A GraphQL már kiirja
}
}

4
frontend/src/app/graphql/course.graphql
View file

@ -35,3 +35,7 @@ mutation EditCourse($input: CourseUpdateInput!) {
mutation CreateCourse($input: CourseCreateInput!) {
courseCreate(course: $input)
}
mutation CourseAssignUser($user: ID!, $course: ID!, $role: String!) {
courseAssignUser(user: $user, course: $course, role: $role)
}

4
frontend/src/app/shared-components/edit/edit.component.html
View file

@ -13,7 +13,9 @@
</span>
<span *ngSwitchCase="'date'">
<mat-form-field>
<mat-datepicker [formControlName]="field.name" [ngModel]="item[field.name]"></mat-datepicker>
<input matInput [formControlName]="field.name" [matDatepicker]="datePicker" [value]="item[field.name]"/>
<mat-datepicker-toggle matSuffix [for]="datePicker"></mat-datepicker-toggle>
<mat-datepicker #datePicker></mat-datepicker>
</mat-form-field>
</span>
<mat-form-field *ngSwitchDefault>

2
frontend/src/app/shared-components/edit/edit.component.ts
View file

@ -15,7 +15,7 @@ export class EditComponent<T extends HasID, QT extends QueryResult<T>, UT extend
implements OnInit {
item?: T;
@Input() creating = false;
creating = false;
isLoading = true;
@Input() gql: Query<QT, HasID>;

4
frontend/src/app/shared-components/shared-components.module.ts
View file

@ -14,6 +14,7 @@ import { MatInputModule } from '@angular/material/input';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatTooltipModule } from '@angular/material/tooltip';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatNativeDateModule } from '@angular/material/core';
@NgModule({
@ -35,7 +36,8 @@ import { MatDatepickerModule } from '@angular/material/datepicker';
MatInputModule,
MatCheckboxModule,
MatTooltipModule,
MatDatepickerModule
MatDatepickerModule,
MatNativeDateModule
]
})
export class SharedComponentsModule {

9
frontend/src/app/shared-components/table/table.component.html
View file

@ -24,9 +24,12 @@
<button *ngIf="allowEditing" mat-icon-button color="primary" (click)="editItem.emit(item)">
<mat-icon>edit</mat-icon>
</button>
<button *ngFor="let action of customActions" mat-icon-button color="primary" (click)="action.action(item)">
<mat-icon [matTooltip]="action.label">{{ action.icon }}</mat-icon>
</button>
<ng-container *ngFor="let action of customActions">
<button *ngIf="action.icon" mat-icon-button color="primary" (click)="action.action(item)">
<mat-icon [matTooltip]="action.label">{{ action.icon }}</mat-icon>
</button>
<button *ngIf="!action.icon" mat-button (mouseup)="action.action(item)">{{ action.label }}</button>
</ng-container>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="getPropNames()"></tr>

3
frontend/src/app/shared-components/table/table.component.ts
View file

@ -24,6 +24,9 @@ export class TableComponent<T> implements OnInit {
}
ngOnInit(): void {
if (typeof this.allowEditing === 'string') {
throw new Error('use [allowEditing]');
}
}
getPropNames(): string[] {

7
frontend/src/app/subjects/subject-edit/courses/course-edit/course-edit.component.html
View file

@ -3,6 +3,7 @@
{title: 'Félév', name: 'semester'},
{title: 'Név', name: 'alias'}
]"></app-edit>
<button mat-raised-button style="margin-top: 20px" (click)="assignUsers()">Felhasználók hozzárendelése</button>
<mat-card style="margin-top: 50px">
<mat-card-header>
<h3>Teljesitési módok</h3>
@ -10,7 +11,7 @@
<mat-card-content>
<app-list [gql]="modeListGQL" [queryVariables]="{course: courseId}" [columns]="[
{prop: 'name', title: 'Név'}
]" allowEditing="true" allowNew="true" [editFunction]="editFulMode.bind(this)"
]" allowNew="true" [editFunction]="editFulMode.bind(this)"
[createFunction]="createFulMode.bind(this)"></app-list>
</mat-card-content>
</mat-card>
@ -40,7 +41,7 @@
{prop: 'minPoints', title: 'Minimum elérendő pontszám'},
{prop: 'maxPoints', title: 'Maximálisan elérhető pontszám'},
{prop: 'deadline', title: 'Határidő', type: 'date'}
]" allowEditing="true" allowNew="true" [editFunction]="editRequirement.bind(this)"
]" allowNew="true" [editFunction]="editRequirement.bind(this)"
[createFunction]="createRequirement.bind(this)"></app-list>
</mat-card-content>
</mat-card>
@ -49,7 +50,7 @@
{{ editedRequirement?.name || 'Új követelmény' }}
</mat-card-header>
<mat-card-content>
<app-edit [itemType]="editedRequirement" creating="true" [createMutation]="requirementCreateGQL"
<app-edit [itemType]="editedRequirement" [createMutation]="requirementCreateGQL"
[updateMutation]="requirementEditGQL" [customItem]="editedRequirement" [fields]="[
{name: 'name', title: 'Név'},
{name: 'description', title: 'Leirás'},

9
frontend/src/app/subjects/subject-edit/courses/course-edit/course-edit.component.ts
View file

@ -1,5 +1,5 @@
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { ActivatedRoute, Router } from '@angular/router';
import { CustomTitleComponent } from '../../../../app.component';
import {
Course,
@ -40,7 +40,8 @@ export class CourseEditComponent implements OnInit, CustomTitleComponent {
public itemGQL: CourseGQL, public editGQL: EditCourseGQL, public createGQL: CreateCourseGQL,
public modeListGQL: FulfillmentModeListGQL, public modeItemGQL: FulfillmentModeGQL, public modeEditGQL: EditFulfillmentModeGQL,
public modeCreateGQL: CreateFulfillmentModeGQL, public requirementListGQL: RequirementListGQL, public requirementGQL: RequirementGQL,
public requirementEditGQL: EditRequirementGQL, public requirementCreateGQL: CreateRequirementGQL) {
public requirementEditGQL: EditRequirementGQL, public requirementCreateGQL: CreateRequirementGQL,
private router: Router) {
this.subjectId = route.snapshot.params.subjectId;
this.courseId = route.snapshot.params.id;
}
@ -101,4 +102,8 @@ export class CourseEditComponent implements OnInit, CustomTitleComponent {
this.editingRequirement = false;
this.editedRequirement = null;
}
async assignUsers(): Promise<void> {
await this.router.navigate(['users', 'assign'], {queryParams: {course: this.courseId}});
}
}

4
frontend/src/app/subjects/subjects.module.ts
View file

@ -11,6 +11,7 @@ import { MatCardModule } from '@angular/material/card';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { ReactiveFormsModule } from '@angular/forms';
import { MatButtonModule } from '@angular/material/button';
const routes: Routes = [
{path: '', component: SubjectListComponent, data: {title: ''} as RouteData},
@ -32,7 +33,8 @@ const routes: Routes = [
MatCardModule,
MatFormFieldModule,
MatInputModule,
ReactiveFormsModule
ReactiveFormsModule,
MatButtonModule
]
})
export class SubjectsModule {

0
frontend/src/app/users/assign-to-course/assign-to-course.component.css Normal file
View file

6
frontend/src/app/users/assign-to-course/assign-to-course.component.html Normal file
View file

@ -0,0 +1,6 @@
<app-list [itemType]="itemType" [allowEditing]="false" [gql]="listGQL" [customActions]="[
{action: assignAsTeacher.bind(this), label: 'Oktatóként', icon: ''},
{action: assignAsStudent.bind(this), label: 'Hallgatóként', icon: ''}
]" [columns]="[
{title: 'Név', prop: 'name'}
]"></app-list>

25
frontend/src/app/users/assign-to-course/assign-to-course.component.spec.ts Normal file
View file

@ -0,0 +1,25 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { AssignToCourseComponent } from './assign-to-course.component';
describe('AssignToCourseComponent', () => {
let component: AssignToCourseComponent;
let fixture: ComponentFixture<AssignToCourseComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [AssignToCourseComponent]
})
.compileComponents();
});
beforeEach(() => {
fixture = TestBed.createComponent(AssignToCourseComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

26
frontend/src/app/users/assign-to-course/assign-to-course.component.ts Normal file
View file

@ -0,0 +1,26 @@
import { Component, OnInit } from '@angular/core';
import { CourseAssignUserGQL, User, UserListGQL } from '../../services/graphql';
import { ActivatedRoute } from '@angular/router';
@Component({
selector: 'app-assign-to-course',
templateUrl: './assign-to-course.component.html',
styleUrls: ['./assign-to-course.component.css']
})
export class AssignToCourseComponent implements OnInit {
itemType: User;
constructor(public listGQL: UserListGQL, public assignGQL: CourseAssignUserGQL, private route: ActivatedRoute) {
}
ngOnInit(): void {
}
async assignAsTeacher(item: User): Promise<void> { // TODO: Remove assigned users from list
await this.assignGQL.mutate({course: this.route.snapshot.queryParams.course, user: item.id + '', role: 'teacher'}).toPromise();
}
async assignAsStudent(item: User): Promise<void> {
await this.assignGQL.mutate({course: this.route.snapshot.queryParams.course, user: item.id + '', role: 'student'}).toPromise();
}
}

4
frontend/src/app/users/users.module.ts
View file

@ -5,14 +5,16 @@ import { RouterModule, Routes } from '@angular/router';
import { RouteData } from '../app-routing.module';
import { SharedComponentsModule } from '../shared-components/shared-components.module';
import { UserEditComponent } from './user-edit/user-edit.component';
import { AssignToCourseComponent } from './assign-to-course/assign-to-course.component';
const routes: Routes = [
{path: '', component: UserListComponent, data: {title: ''} as RouteData},
{path: 'assign', component: AssignToCourseComponent, data: {title: 'Hozzárendelés kurzushoz'}},
{path: ':id', component: UserEditComponent, data: {title: 'Szerkesztés'}}
];
@NgModule({
declarations: [UserListComponent, UserEditComponent],
declarations: [UserListComponent, UserEditComponent, AssignToCourseComponent],
imports: [
CommonModule,
RouterModule.forChild(routes),