diff options
Diffstat (limited to 'src/app/components/admin-panel-page')
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-loading *ngIf="!dataArrived"></app-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); } - ); + }); } } |