Bugfix/modal on create challenge (#210)

* fixed loader after closing * fixed sample test in full screen * fixed modals when challenge deleted * fixed builduing csharp code * fixed problems with build * fixed editor page opening
BinaryStudioAcademy · Sep 28, 2023 · 8ea3704 · 8ea3704
1 parent b6b053c
commit 8ea3704
Show file tree

Hide file tree

Showing 10 changed files with 85 additions and 76 deletions.
diff --git a/frontend/src/app/core/guards/unsaved-changes.guard.ts b/frontend/src/app/core/guards/unsaved-changes.guard.ts
@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core';
-import { CanDeactivate } from '@angular/router';
+import { CanDeactivate, Router } from '@angular/router';
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
 import { ConfirmationModalComponent } from '@shared/components/confirmation-modal/confirmation-modal.component';
 import { HasUnsavedChanges } from '@shared/models/unsaved-changes/has-unsaved-changes';
@@ -8,39 +8,41 @@ import { HasUnsavedChanges } from '@shared/models/unsaved-changes/has-unsaved-ch
     providedIn: 'root',
 })
 export class UnsavedChangesGuard<T extends HasUnsavedChanges> implements CanDeactivate<T> {
-    constructor(
-        private modalService: NgbModal,
-    ) {}
-
-    canDeactivate(component: T): Promise<boolean> {
-        return component.unsavedChanges
-            ? this.showConfirmationModal()
-            : Promise.resolve(true);
+    constructor(private modalService: NgbModal, private router: Router) {}
+
+    canDeactivate(component: T) {
+        if (this.router.getCurrentNavigation()?.extras?.state?.['canLeave']) {
+            return true;
+        }
+
+        if (component.unsavedChanges) {
+            return this.showConfirmationModal();
+        }
+
+        return true;
     }
 
-    private showConfirmationModal(): Promise<boolean> {
+    private showConfirmationModal() {
         const modalRef = this.modalService.open(ConfirmationModalComponent, { windowClass: 'delete-modal' });
 
         modalRef.componentInstance.titleText = 'Are you sure you want to leave this page?';
         modalRef.componentInstance.bodyText = 'All unsaved data will be lost.';
 
-        return new Promise<boolean>((resolve) => {
-            modalRef.componentInstance.buttons = [
-                {
-                    text: 'Yes',
-                    handler: () => {
-                        resolve(true);
-                        modalRef.close();
-                    },
+        modalRef.componentInstance.buttons = [
+            {
+                text: 'Yes',
+                handler: () => {
+                    modalRef.close();
                 },
-                {
-                    text: 'Cancel',
-                    handler: () => {
-                        resolve(false);
-                        modalRef.close();
-                    },
+            },
+            {
+                text: 'Cancel',
+                handler: () => {
+                    modalRef.dismiss();
                 },
-            ];
-        });
+            },
+        ];
+
+        return modalRef.closed;
     }
 }
diff --git a/frontend/src/app/core/services/code-run.service.ts b/frontend/src/app/core/services/code-run.service.ts
@@ -20,7 +20,7 @@ export class CodeRunService {
     }
 
     private showTestResults(testResults: ITestsOutput) {
-        if (testResults.isSuccess) {
+        if (testResults.isSuccess || testResults.failedCount === 0) {
             this.toastrService.showSuccess(`Tests were successful!\n Tests passed: ${testResults.passedCount}`);
         } else {
             this.toastrService.showError(`Tests failed \n Tests failed: ${testResults.failedCount}

diff --git a/frontend/src/app/modules/challenges/challenge-creation/challenge-creation.component.sass b/frontend/src/app/modules/challenges/challenge-creation/challenge-creation.component.sass
@@ -65,28 +65,6 @@
 .empty-container
     height: 20px
 
-@media (max-width: $small-challenge)
-  .buttons
-    flex-direction: column
-    align-items: center
-    padding-right: 0 !important
-    & .custom-button
-        width: 50%
-
-  .creation-wrapper
-        margin: auto
-
-  .language-block
-    display: flex
-    flex-direction: column
-    align-items: center
-    gap: 12px
-    &-dropdown
-      justify-content: center
-      width: 100%
-      & app-challenges-dropdown-select
-        width: 80%
-
 .cancel-btn
     color: $white-grey
     border: 1px solid $border-grey
@@ -101,8 +79,28 @@
     .modal-header
         color: $green
         .btn-close
-            background-color: $green
+            display: none
     .modal-body, .modal-footer button
         color: $white
-
-
+
+@media (max-width: $small-challenge)
+    .buttons
+        flex-direction: column
+        align-items: center
+        padding-right: 0 !important
+        & .custom-button
+            width: 50%
+
+    .creation-wrapper
+        margin: auto
+
+    .language-block
+        display: flex
+        flex-direction: column
+        align-items: center
+        gap: 12px
+        &-dropdown
+            justify-content: center
+            width: 100%
+        & app-challenges-dropdown-select
+            width: 80%
diff --git a/frontend/src/app/modules/challenges/challenge-creation/challenge-creation.component.ts b/frontend/src/app/modules/challenges/challenge-creation/challenge-creation.component.ts
@@ -227,7 +227,7 @@ export class ChallengeCreationComponent extends BaseComponent implements HasUnsa
             .subscribe({
                 next: () => {
                     this.toastrService.showSuccess('Challenge was successfully deleted');
-                    this.router.navigate(['/']);
+                    this.router.navigate(['/'], { state: { canLeave: true } });
                 },
                 error: () => {
                     this.toastrService.showError('Server connection error');

diff --git a/frontend/src/app/modules/challenges/challenge-creation/challenge-creation.utils.ts b/frontend/src/app/modules/challenges/challenge-creation/challenge-creation.utils.ts
@@ -128,7 +128,7 @@ export function getDropdownItems(names: string[]): IDropdownItem[] {
 }
 
 export function mapLanguageName(language: string): string {
-    return languageNameMap.get(language) || language.toLowerCase();
+    return languageNameMap.get(language) || language;
 }
 
 export const editorOptions: EditorOptions = {

diff --git a/frontend/src/app/modules/challenges/online-editor-page/online-editor-page.component.html b/frontend/src/app/modules/challenges/online-editor-page/online-editor-page.component.html
@@ -5,7 +5,7 @@
         <button class="custom-button accent" (click)="sendSubmitRequest()">Submit</button>
     </div>
     <as-split [direction]="splitDirection" [gutterSize]="8">
-        <as-split-area class="min-size" [size]="50">
+        <as-split-area class="min-size" [size]="45">
             <div class="problem-info h-100">
                 <div>
                     <ul ngbNav #nav="ngbNav" [(activeId)]="activeTab" class="nav-tabs">
@@ -31,8 +31,8 @@
             </div>
         </as-split-area>
 
-        <as-split-area [size]="50" [minSize]="splitRightMinSize">
-            <div class="editor h-50" #editorContainer>
+        <as-split-area [minSize]="splitRightMinSize" [size]="45" class="d-flex flex-column justify-content-between">
+            <div class="editor h-40" #editorContainer>
                 <div class="header">
                     <div class="language-selection">
                         <fa-icon [icon]="'info'" size="sm"></fa-icon>
@@ -64,14 +64,13 @@
                         class="fullscreen-button"
                         [icon]="'maximize'"></fa-icon>
                 </div>
-                <div class="editor-test" #editorTestContainer>
-                    <app-code-editor
-                        class="my-code-editor"
-                        [options]="editorOptions"
-                        [language]="selectedLanguage"
-                        (codeChanged)="onTestChanged($event)"
-                        [initText]="testCode!"></app-code-editor>
-                </div>
+                <app-code-editor
+                    class="my-code-editor"
+                    [options]="editorOptions"
+                    [language]="selectedLanguage"
+                    [(ngModel)]="testCode"
+                    (codeChanged)="onTestChanged($event)"
+                    [initText]="testCode!"></app-code-editor>
             </div>
         </as-split-area>
     </as-split>

diff --git a/frontend/src/app/modules/challenges/online-editor-page/online-editor-page.component.sass b/frontend/src/app/modules/challenges/online-editor-page/online-editor-page.component.sass
@@ -17,7 +17,7 @@
 
 .fullscreen-button
     position: absolute
-    right: 15px
+    right: 25px
     &:hover
         cursor: pointer
 
@@ -29,11 +29,7 @@
 
 .test-wrp
     height: 45%
-    margin-top: 5px
-    overflow: hidden
-
-.editor.h-50
-    overflow: hidden
+    margin-top: 10px
 
 .editor-test
     height: 100%
@@ -53,6 +49,7 @@
     background-color: $charcoal
     border-radius: 5px 5px 0px 0px
     border-bottom: 2px solid $green
+    position: relative
 
 .language-selection
     height: 100%
@@ -106,6 +103,9 @@ button span
     &-icon
         background-image: url("/assets/images/ellipsis.png") !important
 
+:host ::ng-deep .as-split-area
+    overflow: auto !important
+
 .centered-icon
     margin-left: 8px
     display: flex
@@ -225,3 +225,6 @@ button span
 
 .min-size
     min-width: 320px
+
+.h-40
+    height: 45%
diff --git a/frontend/src/app/modules/challenges/online-editor-page/online-editor-page.component.ts b/frontend/src/app/modules/challenges/online-editor-page/online-editor-page.component.ts
@@ -20,7 +20,7 @@ import { ITestsOutput } from '@shared/models/tests-output/tests-output';
 import { IUser } from '@shared/models/user/user';
 import { take, takeUntil } from 'rxjs';
 
-import { editorOptions } from '../challenge-creation/challenge-creation.utils';
+import { editorOptions, mapLanguageName } from '../challenge-creation/challenge-creation.utils';
 
 @Component({
     selector: 'app-online-editor-page',
@@ -38,6 +38,8 @@ export class OnlineEditorPageComponent extends BaseComponent implements OnDestro
 
     selectedLanguage: string;
 
+    mappedSelectedLanguage: string;
+
     languages: string[];
 
     initialSolution?: string;
@@ -91,8 +93,6 @@ export class OnlineEditorPageComponent extends BaseComponent implements OnDestro
     }
 
     ngOnInit() {
-        this.splitDirection = 'horizontal';
-
         this.activatedRoute.paramMap.subscribe((params: ParamMap) => {
             const challengeId = +params.get('id')!;
 
@@ -123,6 +123,11 @@ export class OnlineEditorPageComponent extends BaseComponent implements OnDestro
     }
 
     onSelectedLanguageChanged($event: string | string[]): void {
+        const selectedLang = $event as string;
+
+        this.selectedLanguage = selectedLang;
+        this.mappedSelectedLanguage = mapLanguageName(selectedLang);
+
         this.initialSolution = this.getInitialSolutionByLanguage($event as string)!;
 
         this.testCode = this.getInitialTestsByLanguage($event as string);
@@ -202,7 +207,7 @@ export class OnlineEditorPageComponent extends BaseComponent implements OnDestro
     private sendCode(isSubmitRequest: boolean = false): void {
         this.solution = {
             userConnectionId: this.user.id.toString(),
-            language: this.selectedLanguage,
+            language: this.mappedSelectedLanguage,
             userCode: this.initialSolution as string,
             tests: this.testCode,
             isSubmitRequest,
@@ -231,6 +236,7 @@ export class OnlineEditorPageComponent extends BaseComponent implements OnDestro
         this.languages = [...new Set(challenge.versions?.map((v) => v.language?.name))];
 
         [this.selectedLanguage] = this.languages;
+        this.mappedSelectedLanguage = mapLanguageName(this.selectedLanguage);
     }
 
     private setupEditorOptions() {

diff --git a/frontend/src/app/modules/user/badge/badge.component.sass b/frontend/src/app/modules/user/badge/badge.component.sass
@@ -57,6 +57,7 @@ img
     position: absolute
     top: -55%
     right: -28%
+    user-select: none
 
 @media screen and (max-width: $small-medium)
     .badges-container

diff --git a/frontend/src/app/modules/user/user-info-editor/user-info-editor.component.sass b/frontend/src/app/modules/user/user-info-editor/user-info-editor.component.sass
@@ -20,7 +20,7 @@
         scale: 97%
     &:hover,
     &:disabled
-        background-color: $dark-olive-green
+        background-color: $dark-green
 
 .form-wrapper
     max-width: 970px