Skip to content
Snippets Groups Projects
Commit 1ec81020 authored by alec.schmidt's avatar alec.schmidt
Browse files

admin users dashboard fully functional

parent e1baf6b1
No related branches found
No related tags found
No related merge requests found
Showing
with 214 additions and 14 deletions
No preview for this file type
......@@ -93,8 +93,7 @@ class DBHandler {
const a = req.body as User_t;
const request = "UPDATE users \
SET username = '"+ a.username +"', password = '"+ a.password +"' \
WHERE id = " + req.params.id;
SET username = '"+ a.username + "', type = '" + a.type + "' WHERE id = " + req.params.id;
asyncdb.all(request)
.then(() => res.status(StatusCodes.OK).end())
......
<button (click)="modalCreate=true;">Create User</button>
<table>
<thead>
<th>Username</th>
......@@ -7,7 +9,7 @@
<tr *ngFor="let user of users">
<td>{{user.username}}</td>
<td>{{user.type}}</td>
<td><button>UPDATE</button></td>
<td><button (click)="showUpdateModal(user)">UPDATE</button></td>
<td><button (click)="deleteUser(user)">DELETE</button></td>
</tr>
</tbody>
......@@ -27,3 +29,13 @@
</tr>
</tbody>
</table>
<div *ngIf="modalUpdate">
<app-update-user [user]="userToEdit" (closeModal)="modalUpdate=false;"></app-update-user>
</div>
<div *ngIf="modalCreate">
<app-create-user (closeModal)="modalCreate=false;"></app-create-user>
</div>
\ No newline at end of file
......@@ -3,6 +3,7 @@ import { HttpClient } from '@angular/common/http';
import { Answer, QandA, Question, User } from '../Types/types';
import { UsersService } from '../services/users.service';
import { QuestionsService } from '../services/questions.service';
import { Subscription } from 'rxjs';
@Component({
selector: 'app-admin',
......@@ -11,9 +12,14 @@ import { QuestionsService } from '../services/questions.service';
})
export class AdminComponent implements OnInit {
public data;
public users: User[] = [];
public questions: Question[] = [];
public answers: Answer[] = [];
public users!: User[];
public questions!: Question[];
public answers!: Answer[];
private usersSub!: Subscription;
userToEdit!: User;
modalUpdate: boolean = false;
modalCreate: boolean = false;
constructor(
private http: HttpClient,
......@@ -22,11 +28,14 @@ export class AdminComponent implements OnInit {
ngOnInit(): void {
this.http.get("http://0.0.0.0:30992/API/v1/user")
.subscribe(users => {
this.users = users as User[];
this.usersSub = this.userController.users.subscribe(userList => {
this.users = userList;
});
this.userController.fetchUsers();
this.http.get("http://0.0.0.0:30992/API/v1/question")
.subscribe(res => {
let questions = res as QandA;
......@@ -42,4 +51,14 @@ export class AdminComponent implements OnInit {
deleteQuestion(question: Question) {
this.questionController.deleteQuestion(question);
}
showUpdateModal(user: User){
this.userToEdit = user;
this.modalUpdate = true;
}
showCreateModal(){
this.modalCreate = true;
}
}
......@@ -9,13 +9,17 @@ import { LoginComponent } from './login/login.component';
import { ReactiveFormsModule } from '@angular/forms';
import { TokenInterceptor } from './interceptors/token-interceptor';
import { SignupComponent } from './signup/signup.component';
import { CreateUserComponent } from './create-user/create-user.component';
import { UpdateUserComponent } from './update-user/update-user.component';
@NgModule({
declarations: [
AppComponent,
AdminComponent,
LoginComponent,
SignupComponent
SignupComponent,
CreateUserComponent,
UpdateUserComponent
],
imports: [
BrowserModule,
......
<h1>Create User</h1>
<form [formGroup]="createUser" (ngSubmit)="onSubmit()">
<input type="text" placeholder="Username" formControlName="username">
<br>
<input type="password" placeholder="Password" formControlName="password">
<br>
<input type="type" placeholder="player" formControlName="type">
<br>
<button type="submit">Create</button>
</form>
\ No newline at end of file
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { CreateUserComponent } from './create-user.component';
describe('CreateUserComponent', () => {
let component: CreateUserComponent;
let fixture: ComponentFixture<CreateUserComponent>;
beforeEach(() => {
TestBed.configureTestingModule({
declarations: [CreateUserComponent]
});
fixture = TestBed.createComponent(CreateUserComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
import { Component, EventEmitter, Input, Output } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { User } from '../Types/types';
import { UsersService } from '../services/users.service';
@Component({
selector: 'app-create-user',
templateUrl: './create-user.component.html',
styleUrls: ['./create-user.component.css']
})
export class CreateUserComponent {
createUser: FormGroup
@Output() closeModal: EventEmitter<string> = new EventEmitter<string>();
constructor(private userController: UsersService) { }
ngOnInit(): void {
this.createUser = new FormGroup({
username: new FormControl('', Validators.required),
password: new FormControl('', Validators.required),
type: new FormControl('player', Validators.required)
});
}
onSubmit() {
const username = this.createUser.get("username")!.value;
const password = this.createUser.get("password")!.value;
const type = this.createUser.get("type")!.value;
const user: User = {
id: undefined,
username : username,
password: password,
type: type
}
this.userController.addUserAdmin(user);
this.closeModal.emit();
}
}
......@@ -2,6 +2,7 @@ import { Injectable } from '@angular/core';
import { User } from '../Types/types';
import { HttpClient } from '@angular/common/http';
import { AuthenticationService } from './authentication.service';
import { BehaviorSubject } from 'rxjs';
const ROUTE = "http://0.0.0.0:30992/API/v1/user"
......@@ -10,13 +11,15 @@ const ROUTE = "http://0.0.0.0:30992/API/v1/user"
})
export class UsersService {
private _users = new BehaviorSubject<User[]>([])
constructor(
private http: HttpClient,
private auth: AuthenticationService) { }
deleteUser(user: User) {
this.http.delete(ROUTE + "/" + user.id.toString()).subscribe(res => {
console.log("PLZ REFRESH")
this.fetchUsers();
});
}
......@@ -26,4 +29,25 @@ export class UsersService {
});
}
get users() {
return this._users.asObservable();
}
fetchUsers() {
this.http.get("http://0.0.0.0:30992/API/v1/user")
.subscribe(users => {
this._users.next(users as User[]);
});
}
addUserAdmin(user: User) {
this.http.post<User>(ROUTE, user).subscribe(res => {
this.fetchUsers();
});
}
updateUser(user:User) {
this.http.patch<User>(ROUTE + "/" + user.id.toString(), user).subscribe(res => this.fetchUsers())
}
}
<h1>Update User</h1>
<form [formGroup]="updateUser" (ngSubmit)="onSubmit()">
<input type="text" formControlName="username">
<br>
<input type="text" formControlName="type">
<br>
<button type="submit">Update</button>
</form>
\ No newline at end of file
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { UpdateUserComponent } from './update-user.component';
describe('UpdateUserComponent', () => {
let component: UpdateUserComponent;
let fixture: ComponentFixture<UpdateUserComponent>;
beforeEach(() => {
TestBed.configureTestingModule({
declarations: [UpdateUserComponent]
});
fixture = TestBed.createComponent(UpdateUserComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { User } from '../Types/types';
import { UsersService } from '../services/users.service';
@Component({
selector: 'app-update-user',
templateUrl: './update-user.component.html',
styleUrls: ['./update-user.component.css']
})
export class UpdateUserComponent implements OnInit {
updateUser: FormGroup
@Input() user!: User;
@Output() closeModal: EventEmitter<void> = new EventEmitter<void>();
constructor(private userController: UsersService) { }
ngOnInit(): void {
this.updateUser = new FormGroup({
username: new FormControl(this.user.username, Validators.required),
type: new FormControl(this.user.type, Validators.required)
});
}
onSubmit() {
const username = this.updateUser.get("username")!.value;
const type = this.updateUser.get("type")!.value;
const userToEdit: User = {
id: this.user.id,
username : username,
password: undefined,
type: type
}
this.userController.updateUser(userToEdit);
this.closeModal.emit();
}
}
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment