Fully impelemented technology modifying in admin panel

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);
+  }
 }