feat(octra): text editor in feedback modal is now WYSIWYG

IPS-LMU · Jan 26, 2024 · 7ea0b46 · 7ea0b46
1 parent 5fc3cb7
commit 7ea0b46
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 13 deletions.
diff --git a/apps/octra/src/app/core/modals/bugreport-modal/bugreport-modal.component.html b/apps/octra/src/app/core/modals/bugreport-modal/bugreport-modal.component.html
@@ -46,8 +46,8 @@ <h5 class="modal-title" id="modal-title">
               [(ngModel)]="profile.username"
             />
             <label for="inputName" class="form-label">{{
-              'g.name' | transloco
-            }}</label>
+                'g.name' | transloco
+              }}</label>
           </div>
         </div>
         <div class="col-6">
@@ -62,26 +62,25 @@ <h5 class="modal-title" id="modal-title">
               placeholder="[email protected]"
             />
             <label for="inputEmail" class="form-label">{{
-              'g.email' | transloco
-            }}</label>
+                'g.email' | transloco
+              }}</label>
           </div>
         </div>
       </div>
       <div class="row">
         <div class="col-12">
-          <div class="form-floating mb-3">
-            <textarea
+          <div class="d-block mb-3">
+            <label for="bgDescr">{{ 'g.description' | transloco }}:</label>
+            <ngx-jodit
               [(ngModel)]="bgdescr"
-              class="form-control"
+              [options]="joditOptions"
+              class="w-100"
+              style="display: flex !important; flex-direction: column; flex: auto; height: 100% !important;"
               aria-describedby="bgDescr"
-              [placeholder]="'g.description' | transloco"
               id="bgDescr"
               maxlength="1000"
-              rows="3"
               name="bgdescr"
-              style="height: 100px"
-            ></textarea>
-            <label for="bgDescr">{{ 'g.description' | transloco }}</label>
+            ></ngx-jodit>
             <div id="emailHelp" class="form-text">German or English</div>
           </div>
         </div>
@@ -99,7 +98,7 @@ <h5 class="modal-title" id="modal-title">
                 class="upload-screenshot"
               >
                 <span (click)="removeScreenshot(i)" class="cross rounded-circle"
-                  >X</span
+                >X</span
                 >
                 <input
                   #uploadInput2

diff --git a/apps/octra/src/app/core/modals/bugreport-modal/bugreport-modal.component.ts b/apps/octra/src/app/core/modals/bugreport-modal/bugreport-modal.component.ts
@@ -5,6 +5,7 @@ import { BugReportService } from '../../shared/service/bug-report.service';
 import { OctraModal } from '../types';
 import { NgbActiveModal, NgbModalOptions } from '@ng-bootstrap/ng-bootstrap';
 import { AuthenticationStoreService } from '../../store/authentication';
+import { JoditConfig } from 'ngx-jodit';
 
 @Component({
   selector: 'octra-bugreport-modal',
@@ -18,6 +19,11 @@ export class BugreportModalComponent extends OctraModal implements OnInit {
     backdrop: true,
   };
 
+  joditOptions: JoditConfig = {
+    maxHeight: 300,
+    statusbar: false,
+    placeholder: 'Please write a message in German or English...',
+  };
   public visible = false;
   public bgdescr = '';
   public sendProObj = true;
@@ -66,6 +72,15 @@ export class BugreportModalComponent extends OctraModal implements OnInit {
   }
 
   sendBugReport() {
+    if (this.bgdescr.length > 10000) {
+      alert(
+        `Please write a message with less 10000 letters. Remove ${
+          this.bgdescr.length - 10000
+        } letters.`
+      );
+      return;
+    }
+
     this.sendStatus = 'sending';
     this.subscrManager.add(
       this.bugService

diff --git a/apps/octra/src/app/core/modals/modals.module.ts b/apps/octra/src/app/core/modals/modals.module.ts
@@ -46,6 +46,7 @@ import { ReAuthenticationModalComponent } from './re-authentication-modal/re-aut
 import { AuthenticationComponent } from '../component/authentication-component/authentication-component.component';
 import { AboutModalComponent } from './about-modal/about-modal.component';
 import { FeedbackNoticeModalComponent } from './feedback-notice-modal/feedback-notice-modal.component';
+import { NgxJoditComponent } from 'ngx-jodit';
 
 @Injectable({ providedIn: 'root' })
 export class TranslocoHttpLoader implements TranslocoLoader {
@@ -100,6 +101,7 @@ export class TranslocoHttpLoader implements TranslocoLoader {
     NgbModalModule,
     OctraUtilitiesModule,
     NgbAccordionCollapse,
+    NgxJoditComponent,
   ],
   exports: [
     BugreportModalComponent,