diff options
Diffstat (limited to 'src/DevHive.Angular')
3 files changed, 140 insertions, 13 deletions
diff --git a/src/DevHive.Angular/src/app/components/admin-panel-page/admin-panel-page.component.html b/src/DevHive.Angular/src/app/components/admin-panel-page/admin-panel-page.component.html index c11f730..97504d0 100644 --- a/src/DevHive.Angular/src/app/components/admin-panel-page/admin-panel-page.component.html +++ b/src/DevHive.Angular/src/app/components/admin-panel-page/admin-panel-page.component.html @@ -35,20 +35,30 @@ </div> <hr> </form> - <button type="button" class="submit-btn edit-btn" (click)="toggleTechnologies()">▼ Edit Technologies ▼</button> - <div *ngIf="showTechnologies"> - <div class="input-selection"> - <input type="text" class="input-field" formControlName="technologyInput" required> - <div class="input-errors"> - <label class="error">Type in your desired technologies, separated by a space</label> - </div> + <button type="button" class="submit-btn edit-btn" (click)="toggleTechnologies()">▼ Edit Technologies ▼</button> + <form [formGroup]="technologyForm" (ngSubmit)="submitTechnologies()" *ngIf="showTechnologies"> + <div class="input-selection"> + <label>Create technology:</label> + <input type="text" class="input-field" formControlName="technologyCreate" placeholder="New technology name"> </div> + <label>Update technology:</label> + <div class="flexbox input-selection"> + <input type="text" class="input-field" formControlName="updateTechnologyOldName" placeholder="Old technology name"> + <input type="text" class="input-field" formControlName="updateTechnologyNewName" placeholder="New technology name"> + </div> + <label>Delete technology:</label> + <div class="flexbox input-selection"> + <input type="text" class="input-field" formControlName="deleteTechnologyName" placeholder="Technology name"> + </div> + <button class="submit-btn" type="submit">Modify technologies</button> + <hr> Available technologies: <div id="all-technologies"> <div class="user-technology" *ngFor="let tech of availableTechnologies"> {{ tech.name }} </div> </div> - </div> + <hr> + </form> </div> </div> diff --git a/src/DevHive.Angular/src/app/components/admin-panel-page/admin-panel-page.component.ts b/src/DevHive.Angular/src/app/components/admin-panel-page/admin-panel-page.component.ts index 0cb25ee..b4ce16e 100644 --- a/src/DevHive.Angular/src/app/components/admin-panel-page/admin-panel-page.component.ts +++ b/src/DevHive.Angular/src/app/components/admin-panel-page/admin-panel-page.component.ts @@ -27,6 +27,7 @@ export class AdminPanelPageComponent implements OnInit { public availableLanguages: Language[]; public availableTechnologies: Technology[]; public languageForm: FormGroup; + public technologyForm: FormGroup; constructor(private _router: Router, private _fb: FormBuilder, private _userService: UserService, private _languageService: LanguageService, private _technologyService: TechnologyService, private _tokenService: TokenService) { } @@ -39,7 +40,6 @@ export class AdminPanelPageComponent implements OnInit { this._userService.getUserFromSessionStorageRequest().subscribe( (result: object) => { - console.log('bruh'); const user = result as User; if (!user.roles.map(x => x.name).includes(AppConstants.ADMIN_ROLE_NAME)) { this._router.navigate(['/login']); @@ -57,6 +57,14 @@ export class AdminPanelPageComponent implements OnInit { deleteLanguageName: new FormControl('') }); + this.technologyForm = this._fb.group({ + technologyCreate: new FormControl(''), + updateTechnologyOldName: new FormControl(''), + updateTechnologyNewName: new FormControl(''), + deleteTechnologyName: new FormControl('') + }); + + this.loadAvailableLanguages(); this.loadAvailableTechnologies(); } @@ -155,6 +163,72 @@ export class AdminPanelPageComponent implements OnInit { // Technology modifying + toggleTechnologies(): void { + this.showTechnologies = !this.showTechnologies; + } + + submitTechnologies(): void { + this.tryCreateTechnology(); + this.tryUpdateTechnology(); + this.tryDeleteTechnology(); + } + + private tryCreateTechnology(): void { + const technologyCreate: string = this.technologyForm.get('technologyCreate')?.value; + + if (technologyCreate !== '' && technologyCreate !== null) { + this._technologyService.createTechnologyWithSessionStorageRequest(technologyCreate.trim()).subscribe( + (result: object) => { + this.technologyModifiedSuccess('Successfully updated technologies!'); + }, + (err: HttpErrorResponse) => { + this._errorBar.showError(err); + } + ); + } + } + + private tryUpdateTechnology(): void { + const updateTechnologyOldName: string = this.technologyForm.get('updateTechnologyOldName')?.value; + const updateTechnologyNewName: string = this.technologyForm.get('updateTechnologyNewName')?.value; + + if (updateTechnologyOldName !== '' && updateTechnologyOldName !== null && updateTechnologyNewName !== '' && updateTechnologyNewName !== null) { + const techId = this.availableTechnologies.filter(x => x.name === updateTechnologyOldName.trim())[0].id; + + this._technologyService.putTechnologyWithSessionStorageRequest(techId, updateTechnologyNewName.trim()).subscribe( + (result: object) => { + this.technologyModifiedSuccess('Successfully updated technologies!'); + }, + (err: HttpErrorResponse) => { + this._errorBar.showError(err); + } + ); + } + } + + private tryDeleteTechnology(): void { + const deleteTechnologyName: string = this.technologyForm.get('deleteTechnologyName')?.value; + + if (deleteTechnologyName !== '' && deleteTechnologyName !== null) { + const techId = this.availableTechnologies.filter(x => x.name === deleteTechnologyName.trim())[0].id; + + this._technologyService.deleteTechnologyWithSessionStorageRequest(techId).subscribe( + (result: object) => { + this.technologyModifiedSuccess('Successfully deleted technology!'); + }, + (err: HttpErrorResponse) => { + this._errorBar.showError(err); + } + ); + } + } + + private technologyModifiedSuccess(successMsg: string): void { + this._successBar.showMsg(successMsg); + this.loadAvailableTechnologies(); + this.technologyForm.reset(); + } + private loadAvailableTechnologies(): void { this._technologyService.getAllTechnologiesWithSessionStorageRequest().subscribe( (result: object) => { @@ -162,8 +236,4 @@ export class AdminPanelPageComponent implements OnInit { } ); } - - toggleTechnologies(): void { - this.showTechnologies = !this.showTechnologies; - } } diff --git a/src/DevHive.Angular/src/app/services/technology.service.ts b/src/DevHive.Angular/src/app/services/technology.service.ts index 3d0829b..dbdc039 100644 --- a/src/DevHive.Angular/src/app/services/technology.service.ts +++ b/src/DevHive.Angular/src/app/services/technology.service.ts @@ -15,14 +15,42 @@ export class TechnologyService { /* Requests from session storage */ + createTechnologyWithSessionStorageRequest(name: string): Observable<object> { + const token = this._tokenService.getTokenFromSessionStorage(); + + return this.createtTechnologyRequest(name, token); + } + getAllTechnologiesWithSessionStorageRequest(): Observable<object> { const token = this._tokenService.getTokenFromSessionStorage(); return this.getAllTechnologiesRequest(token); } + putTechnologyWithSessionStorageRequest(langId: Guid, newName: string): Observable<object> { + const token = this._tokenService.getTokenFromSessionStorage(); + + return this.putTechnologyRequest(token, langId, newName); + } + + deleteTechnologyWithSessionStorageRequest(langId: Guid): Observable<object> { + const token = this._tokenService.getTokenFromSessionStorage(); + + return this.deleteTechnologyRequest(token, langId); + } + /* Technology requests */ + createtTechnologyRequest(name: string, authToken: string): Observable<object> { + const body = { + name: name + }; + const options = { + headers: new HttpHeaders().set('Authorization', 'Bearer ' + authToken) + }; + return this._http.post(AppConstants.API_TECHNOLOGY_URL, body, options); + } + getTechnologyRequest(techId: Guid): Observable<object> { const options = { params: new HttpParams().set('Id', techId.toString()) @@ -63,4 +91,23 @@ export class TechnologyService { } }); } + + putTechnologyRequest(authToken: string, langId: Guid, newName: string): Observable<object> { + const body = { + name: newName + }; + const options = { + params: new HttpParams().set('Id', langId.toString()), + headers: new HttpHeaders().set('Authorization', 'Bearer ' + authToken) + }; + return this._http.put(AppConstants.API_TECHNOLOGY_URL, body, options); + } + + deleteTechnologyRequest(authToken: string, langId: Guid): Observable<object> { + const options = { + params: new HttpParams().set('Id', langId.toString()), + headers: new HttpHeaders().set('Authorization', 'Bearer ' + authToken) + }; + return this._http.delete(AppConstants.API_TECHNOLOGY_URL, options); + } } |