Merge pull request #7 from Team-Kaleidoscope/devHEADv0.2main

Second Stage: Complete

3 files changed, 190 insertions, 185 deletions

diff --git a/src/app/components/admin-panel-page/admin-panel-page.component.css b/src/app/components/admin-panel-page/admin-panel-page.component.css
index 1f98e20..ec7aa5d 100644
--- a/src/app/components/admin-panel-page/admin-panel-page.component.css
+++ b/src/app/components/admin-panel-page/admin-panel-page.component.css
@@ -1,42 +1,5 @@
-#content {
-  max-width: 22em;
-  justify-content: start;
-}
-
-hr {
-  width: calc(100% - 1em);
-  color: black;
-  border: 1px solid black;
-}
-
-#navigation {
-  width: 100%;
-  display: flex;
-}
-
-#navigation > * {
-  flex: 1;
-  margin-left: .4em;
-}
-
-.submit-btn:first-of-type {
-  margin-left: 0 !important;
-}
-
-#all-languages, #all-technologies {
-  display: flex;
-  flex-wrap: wrap;
-}
-
-.flexbox {
-  display: flex;
-}
-
-.flexbox > * {
-  flex: 1;
-  margin-left: 1em;
-}
-
-.flexbox > *:first-child {
-  margin-left: 0;
+.sec-info {
+  width: fit-content;
+  background-color: #424242;
+  margin: 0 0.3em 0.3em 0;
 }
diff --git a/src/app/components/admin-panel-page/admin-panel-page.component.html b/src/app/components/admin-panel-page/admin-panel-page.component.html
index 980f12c..1074e51 100644
--- a/src/app/components/admin-panel-page/admin-panel-page.component.html
+++ b/src/app/components/admin-panel-page/admin-panel-page.component.html
@@ -1,85 +1,118 @@
-<!-- <app&#45;loading *ngIf="!dataArrived"></app&#45;loading> -->
+<app-navbar></app-navbar>
 
-<div id="content" *ngIf="!dataArrived">
-	<nav id="navigation">
-		<button class="submit-btn" (click)="backToProfile()">ᐊ Back to profile</button>
-		<button class="submit-btn" (click)="backToFeed()">ᐊ Back to feed</button>
-		<button class="submit-btn" (click)="logout()">Logout</button>
-	</nav>
-	<hr>
-	<div class="scroll-standalone">
-		<app-success-bar></app-success-bar>
-		<app-error-bar></app-error-bar>
+<app-loading *ngIf="!dataArrived"></app-loading>
 
-		<button type="button" class="submit-btn edit-btn" (click)="toggleLanguages()">▼ Edit Languages ▼</button>
-		<form [formGroup]="languageForm" (ngSubmit)="submitLanguages()" *ngIf="showLanguages">
-			<div class="input-selection">
-				<label>Create language:</label>
-				<input type="text" class="input-field" formControlName="languageCreate" placeholder="New language name">
-			</div>
-			<label>Update language:</label>
-			<div class="flexbox input-selection">
-				<input type="text" class="input-field" formControlName="updateLanguageOldName" placeholder="Old language name">
-				<input type="text" class="input-field" formControlName="updateLanguageNewName" placeholder="New language name">
-			</div>
-			<label>Delete language:</label>
-			<div class="flexbox input-selection">
-				<input type="text" class="input-field" formControlName="deleteLanguageName" placeholder="Language name">
-			</div>
-			<button class="submit-btn" type="submit">Modify languages</button>
-			<hr>
-			Available languages:
-			<div id="all-languages">
-				<div class="user-language" *ngFor="let lang of availableLanguages">
-					{{ lang.name }}
+<main class="scroll-standalone under-navbar centered-content flex-col" *ngIf="dataArrived">
+	<app-success-bar></app-success-bar>
+	<app-error-bar></app-error-bar>
+
+	<div class="card width-full">
+		<section>
+			<button type="button" class="fg-focus width-full border-faded-slim padding-dot3 lighter-hover click-effect" (click)="toggleLanguages()">
+				▼ Edit Languages ▼
+			</button>
+			<form class="flex-col margin-top-bot-dot3" [formGroup]="languageForm" (ngSubmit)="submitLanguages()" *ngIf="showLanguages">
+				<label class="fg-focus">
+					Create language:
+				</label>
+				<input type="text" class="fancy-input width-full border-faded-slim border-bottom-only" formControlName="languageCreate" placeholder="New language name">
+
+				<label class="fg-focus">
+					Update language:
+				</label>
+				<div class="flex-row flexible-children">
+					<input type="text" class="fancy-input border-faded-slim border-bottom-only margin-right-dot2" formControlName="updateLanguageOldName" placeholder="Old language name">
+					<input type="text" class="fancy-input border-faded-slim border-bottom-only" formControlName="updateLanguageNewName" placeholder="New language name">
 				</div>
-			</div>
-			<hr>
-		</form>
 
-		<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 }}
+				<label class="fg-focus">
+					Delete language:
+				</label>
+				<input type="text" class="fancy-input width-full border-faded-slim border-bottom-only" formControlName="deleteLanguageName" placeholder="Language name">
+
+				<button class="width-full border-faded-slim padding-dot3 lighter-hover click-effect border-radius-dot3" type="submit">
+					Modify languages
+				</button>
+				<section class="border-faded-slim padding-dot4 margin-top-dot4">
+					<div class="none-message" *ngIf="availableLanguages.length === 0">
+						No languages in database!
+					</div>
+					<div *ngIf="availableLanguages.length > 0">
+						Available languages:
+					</div>
+					<div class="flex-row margin-top-dot4">
+						<div class="sec-info border-radius-dot5r padding-dot2" *ngFor="let lang of availableLanguages">
+							{{ lang.name }}
+						</div>
+					</div>
+				</section>
+			</form>
+		</section>
+		<section>
+			<button type="button" class="fg-focus width-full border-faded-slim padding-dot3 lighter-hover click-effect margin-top-dot4" (click)="toggleTechnologies()">
+				▼ Edit Technologies ▼
+			</button>
+			<form class="flex-col margin-top-bot-dot3" [formGroup]="technologyForm" (ngSubmit)="submitTechnologies()" *ngIf="showTechnologies">
+				<label class="fg-focus">
+					Create technology:
+				</label>
+				<input type="text" class="fancy-input width-full border-faded-slim border-bottom-only" formControlName="technologyCreate" placeholder="New technology name">
+
+				<label class="fg-focus">
+					Update technology:
+				</label>
+				<div class="flex-row flexible-children">
+					<input type="text" class="fancy-input border-faded-slim border-bottom-only margin-right-dot2" formControlName="updateTechnologyOldName" placeholder="Old technology name">
+					<input type="text" class="fancy-input border-faded-slim border-bottom-only" formControlName="updateTechnologyNewName" placeholder="New technology name">
 				</div>
-			</div>
-			<hr>
-		</form>
 
-		<button type="button" class="submit-btn delete-btn" (click)="toggleDeletions()">▼ Deletions ▼</button>
-		<form [formGroup]="deleteForm" (ngSubmit)="submitDelete()" *ngIf="showDeletions">
-			<div class="input-selection">
-				<label>Delete user by Id:</label>
-				<input type="text" class="input-field" formControlName="deleteUser" placeholder="User Id">
-			</div>
+				<label class="fg-focus">
+					Delete technology:
+				</label>
+				<input type="text" class="fancy-input width-full border-faded-slim border-bottom-only" formControlName="deleteTechnologyName" placeholder="Technology name">
+
+				<button class="width-full border-faded-slim padding-dot3 lighter-hover click-effect border-radius-dot3" type="submit">
+					Modify technology
+				</button>
+				<section class="border-faded-slim padding-dot4 margin-top-dot4">
+					<div class="none-message" *ngIf="availableTechnologies.length === 0">
+						No technologies in database!
+					</div>
+					<div *ngIf="availableTechnologies.length > 0">
+						Available technologies:
+					</div>
+					<div class="flex-row margin-top-dot4">
+						<div class="sec-info border-radius-dot5r padding-dot2" *ngFor="let tech of availableTechnologies">
+							{{ tech.name }}
+						</div>
+					</div>
+				</section>
+			</form>
+		</section>
+		<section>
+			<button type="button" class="fg-focus width-full border-faded-slim padding-dot3 lighter-hover click-effect margin-top-dot4" (click)="toggleDeletions()">
+				▼ Deletions ▼
+			</button>
+			<form class="flex-col margin-top-bot-dot3" [formGroup]="deleteForm" (ngSubmit)="submitDelete()" *ngIf="showDeletions">
+				<label class="fg-focus">
+					Delete user by Id:
+				</label>
+				<input type="text" class="fancy-input width-full border-faded-slim border-bottom-only" formControlName="deleteUser" placeholder="User Id">
+
+				<label class="fg-focus">
+					Delete post by Id:
+				</label>
+				<input type="text" class="fancy-input width-full border-faded-slim border-bottom-only" formControlName="deletePost" placeholder="Post Id">
+
+				<label class="fg-focus">
+					Delete comment by Id:
+				</label>
+				<input type="text" class="fancy-input width-full border-faded-slim border-bottom-only" formControlName="deleteComment" placeholder="Comment Id">
 
-			<div class="input-selection">
-				<label>Delete post by Id:</label>
-				<input type="text" class="input-field" formControlName="deletePost" placeholder="Post Id">
-			</div>
-			<div class="input-selection">
-				<label>Delete comment by Id:</label>
-				<input type="text" class="input-field" formControlName="deleteComment" placeholder="Comment Id">
-			</div>
-			<button class="submit-btn" type="submit">Delete</button>
-			<hr>
-		</form>
+				<button class="width-full border-faded-slim padding-dot3 lighter-hover click-effect border-radius-dot3" type="submit">
+					Delete
+				</button>
+			</form>
+		</section>
 	</div>
-</div>
+</main>
diff --git a/src/app/components/admin-panel-page/admin-panel-page.component.ts b/src/app/components/admin-panel-page/admin-panel-page.component.ts
index 99c0721..d1070b5 100644
--- a/src/app/components/admin-panel-page/admin-panel-page.component.ts
+++ b/src/app/components/admin-panel-page/admin-panel-page.component.ts
@@ -11,9 +11,9 @@ import { PostService } from 'src/app/services/post.service';
 import { TechnologyService } from 'src/app/services/technology.service';
 import { TokenService } from 'src/app/services/token.service';
 import { UserService } from 'src/app/services/user.service';
-import { User } from 'src/models/identity/user';
-import { Language } from 'src/models/language';
-import { Technology } from 'src/models/technology';
+import { User } from 'src/models/identity/user.model';
+import { Language } from 'src/models/language.model';
+import { Technology } from 'src/models/technology.model';
 import { ErrorBarComponent } from '../error-bar/error-bar.component';
 import { SuccessBarComponent } from '../success-bar/success-bar.component';
 
@@ -46,17 +46,17 @@ export class AdminPanelPageComponent implements OnInit {
       return;
     }
 
-    this._userService.getUserFromSessionStorageRequest().subscribe(
-      (result: object) => {
+    this._userService.getUserFromSessionStorageRequest().subscribe({
+      next: (result: object) => {
         const user = result as User;
         if (!user.roles.map(x => x.name).includes(AppConstants.ADMIN_ROLE_NAME)) {
           this._router.navigate(['/login']);
         }
       },
-      (err: HttpErrorResponse) => {
+      error: () => {
         this._router.navigate(['/login']);
       }
-    );
+    });
 
     this.languageForm = this._fb.group({
       languageCreate: new FormControl(''),
@@ -65,9 +65,11 @@ export class AdminPanelPageComponent implements OnInit {
       deleteLanguageName: new FormControl('')
     });
 
-    this.languageForm.valueChanges.subscribe(() => {
-      this._successBar?.hideMsg();
-      this._errorBar?.hideError();
+    this.languageForm.valueChanges.subscribe({
+      next: () => {
+        this._successBar?.hideMsg();
+        this._errorBar?.hideError();
+      }
     });
 
     this.technologyForm = this._fb.group({
@@ -77,9 +79,11 @@ export class AdminPanelPageComponent implements OnInit {
       deleteTechnologyName: new FormControl('')
     });
 
-    this.technologyForm.valueChanges.subscribe(() => {
-      this._successBar?.hideMsg();
-      this._errorBar?.hideError();
+    this.technologyForm.valueChanges.subscribe({
+      next: () => {
+        this._successBar?.hideMsg();
+        this._errorBar?.hideError();
+      }
     });
 
     this.deleteForm = this._fb.group({
@@ -88,15 +92,35 @@ export class AdminPanelPageComponent implements OnInit {
       deleteComment: new FormControl('')
     });
 
-    this.deleteForm.valueChanges.subscribe(() => {
-      this._successBar?.hideMsg();
-      this._errorBar?.hideError();
+    this.deleteForm.valueChanges.subscribe({
+      next: () => {
+        this._successBar?.hideMsg();
+        this._errorBar?.hideError();
+      }
     });
 
     this.loadAvailableLanguages();
     this.loadAvailableTechnologies();
   }
 
+  private loadAvailableLanguages(): void {
+    this._languageService.getAllLanguagesWithSessionStorageRequest().subscribe({
+      next: (result: object) => {
+        this.availableLanguages = result as Language[];
+        this.dataArrived = true;
+      }
+    });
+  }
+
+  private loadAvailableTechnologies(): void {
+     this._technologyService.getAllTechnologiesWithSessionStorageRequest().subscribe({
+      next: (result: object) => {
+        this.availableTechnologies = result as Technology[];
+        this.dataArrived = true;
+      }
+     });
+  }
+
   // Navigation
 
   backToProfile(): void {
@@ -128,14 +152,14 @@ export class AdminPanelPageComponent implements OnInit {
     const languageCreate: string = this.languageForm.get('languageCreate')?.value;
 
     if (languageCreate !== '' && languageCreate !== null) {
-      this._languageService.createLanguageWithSessionStorageRequest(languageCreate.trim()).subscribe(
-        (result: object) => {
+      this._languageService.createLanguageWithSessionStorageRequest(languageCreate.trim()).subscribe({
+        next: () => {
           this.languageModifiedSuccess('Successfully updated languages!');
         },
-        (err: HttpErrorResponse) => {
+        error: (err: HttpErrorResponse) => {
           this._errorBar.showError(err);
         }
-      );
+      });
     }
   }
 
@@ -146,14 +170,14 @@ export class AdminPanelPageComponent implements OnInit {
     if (updateLanguageOldName !== '' && updateLanguageOldName !== null && updateLanguageNewName !== '' && updateLanguageNewName !== null) {
       const langId = this.availableLanguages.filter(x => x.name === updateLanguageOldName.trim())[0].id;
 
-      this._languageService.putLanguageWithSessionStorageRequest(langId, updateLanguageNewName.trim()).subscribe(
-        (result: object) => {
+      this._languageService.putLanguageWithSessionStorageRequest(langId, updateLanguageNewName.trim()).subscribe({
+        next: () => {
           this.languageModifiedSuccess('Successfully updated languages!');
         },
-        (err: HttpErrorResponse) => {
+        error: (err: HttpErrorResponse) => {
           this._errorBar.showError(err);
         }
-      );
+      });
     }
   }
 
@@ -163,14 +187,14 @@ export class AdminPanelPageComponent implements OnInit {
     if (deleteLanguageName !== '' && deleteLanguageName !== null) {
       const langId = this.availableLanguages.filter(x => x.name === deleteLanguageName.trim())[0].id;
 
-      this._languageService.deleteLanguageWithSessionStorageRequest(langId).subscribe(
-        (result: object) => {
+      this._languageService.deleteLanguageWithSessionStorageRequest(langId).subscribe({
+        next: () => {
           this.languageModifiedSuccess('Successfully deleted language!');
         },
-        (err: HttpErrorResponse) => {
+        error: (err: HttpErrorResponse) => {
           this._errorBar.showError(err);
         }
-      );
+      });
     }
   }
 
@@ -180,13 +204,6 @@ export class AdminPanelPageComponent implements OnInit {
     this.loadAvailableLanguages();
   }
 
-  private loadAvailableLanguages(): void {
-    this._languageService.getAllLanguagesWithSessionStorageRequest().subscribe(
-      (result: object) => {
-        this.availableLanguages = result as Language[];
-      }
-    );
-  }
 
   // Technology modifying
 
@@ -204,14 +221,14 @@ export class AdminPanelPageComponent implements OnInit {
     const technologyCreate: string = this.technologyForm.get('technologyCreate')?.value;
 
     if (technologyCreate !== '' && technologyCreate !== null) {
-      this._technologyService.createTechnologyWithSessionStorageRequest(technologyCreate.trim()).subscribe(
-        (result: object) => {
+      this._technologyService.createTechnologyWithSessionStorageRequest(technologyCreate.trim()).subscribe({
+        next: () => {
           this.technologyModifiedSuccess('Successfully updated technologies!');
         },
-        (err: HttpErrorResponse) => {
+        error: (err: HttpErrorResponse) => {
           this._errorBar.showError(err);
         }
-      );
+      });
     }
   }
 
@@ -222,14 +239,14 @@ export class AdminPanelPageComponent implements OnInit {
     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._technologyService.putTechnologyWithSessionStorageRequest(techId, updateTechnologyNewName.trim()).subscribe({
+        next: () => {
           this.technologyModifiedSuccess('Successfully updated technologies!');
         },
-        (err: HttpErrorResponse) => {
+        error: (err: HttpErrorResponse) => {
           this._errorBar.showError(err);
         }
-      );
+      });
     }
   }
 
@@ -239,14 +256,14 @@ export class AdminPanelPageComponent implements OnInit {
     if (deleteTechnologyName !== '' && deleteTechnologyName !== null) {
       const techId = this.availableTechnologies.filter(x => x.name === deleteTechnologyName.trim())[0].id;
 
-      this._technologyService.deleteTechnologyWithSessionStorageRequest(techId).subscribe(
-        (result: object) => {
+      this._technologyService.deleteTechnologyWithSessionStorageRequest(techId).subscribe({
+        next: () => {
           this.technologyModifiedSuccess('Successfully deleted technology!');
         },
-        (err: HttpErrorResponse) => {
+        error: (err: HttpErrorResponse) => {
           this._errorBar.showError(err);
         }
-      );
+      });
     }
   }
 
@@ -256,14 +273,6 @@ export class AdminPanelPageComponent implements OnInit {
     this.loadAvailableTechnologies();
   }
 
-  private loadAvailableTechnologies(): void {
-     this._technologyService.getAllTechnologiesWithSessionStorageRequest().subscribe(
-      (result: object) => {
-        this.availableTechnologies = result as Technology[];
-      }
-    );
-  }
-
   // Deletions
 
   toggleDeletions(): void {
@@ -282,14 +291,14 @@ export class AdminPanelPageComponent implements OnInit {
     if (deleteUser !== '' && deleteUser !== null) {
       const userId: Guid = Guid.parse(deleteUser);
 
-      this._userService.deleteUserRequest(userId, this._tokenService.getTokenFromSessionStorage()).subscribe(
-        (result: object) => {
+      this._userService.deleteUserRequest(userId, this._tokenService.getTokenFromSessionStorage()).subscribe({
+        next: () => {
           this.deletionSuccess('Successfully deleted user!');
         },
-        (err: HttpErrorResponse) => {
+        error: (err: HttpErrorResponse) => {
           this._errorBar.showError(err);
         }
-      );
+      });
     }
   }
 
@@ -299,14 +308,14 @@ export class AdminPanelPageComponent implements OnInit {
     if (deletePost !== '' && deletePost !== null) {
       const postId: Guid = Guid.parse(deletePost);
 
-      this._postService.deletePostRequest(postId, this._tokenService.getTokenFromSessionStorage()).subscribe(
-        (result: object) => {
+      this._postService.deletePostRequest(postId, this._tokenService.getTokenFromSessionStorage()).subscribe({
+        next: () => {
           this.deletionSuccess('Successfully deleted user!');
         },
-        (err: HttpErrorResponse) => {
+        error: (err: HttpErrorResponse) => {
           this._errorBar.showError(err);
         }
-      );
+      });
     }
   }
 
@@ -316,14 +325,14 @@ export class AdminPanelPageComponent implements OnInit {
     if (deleteComment !== '' && deleteComment !== null) {
       const commentId: Guid = Guid.parse(deleteComment);
 
-      this._commentService.deleteCommentWithSessionStorage(commentId).subscribe(
-        (result: object) => {
+      this._commentService.deleteCommentWithSessionStorage(commentId).subscribe({
+        next: () => {
           this.deletionSuccess('Successfully deleted comment!');
         },
-        (err: HttpErrorResponse) => {
+        error: (err: HttpErrorResponse) => {
           this._errorBar.showError(err);
         }
-      );
+      });
     }
   }