feat(octra): new query parameter "bottomNav" for URL mode

IPS-LMU · Feb 13, 2025 · 5c8c18c · 5c8c18c
1 parent f831f87
commit 5c8c18c
Show file tree

Hide file tree

Showing 15 changed files with 275 additions and 173 deletions.
diff --git a/apps/octra/src/app/app.info.ts b/apps/octra/src/app/app.info.ts
@@ -42,7 +42,7 @@ export class AppInfo {
   static readonly maxAudioFileSize = 3000;
 
   public static readonly queryParamsHandling: NavigationExtras = {
-    queryParamsHandling: '',
+    queryParamsHandling: "merge",
     preserveFragment: false,
   };
 

diff --git a/apps/octra/src/app/core/component/transcr-editor/transcr-editor.component.ts b/apps/octra/src/app/core/component/transcr-editor/transcr-editor.component.ts
@@ -116,7 +116,8 @@ export class TranscrEditorComponent
   @ViewChild('jodit', { static: false }) joditComponent?: NgxJoditComponent;
   public focused = false;
 
-  public joditOptions: JoditConfig = {};
+  public joditOptions: JoditConfig = {
+  };
   private guidelines?: OctraGuidelines;
 
   private joditDefaultOptions: JoditConfig = {

diff --git a/...ctra/src/app/core/modals/transcription-stop-modal/transcription-stop-modal.component.html b/...ctra/src/app/core/modals/transcription-stop-modal/transcription-stop-modal.component.html
@@ -5,9 +5,14 @@ <h4 class="modal-title">
     </h4>
   </div>
   <div class="modal-body">
+    @if(appStore.useMode !== "url"){
     <div [innerHTML]="'modal.transcription.stop.text' | transloco"></div>
+    } @else if(appStore.useMode === "url") {
+    <div [innerHTML]="'modal.transcription.stop.url text' | transloco"></div>
+    }
   </div>
   <div class="row p-3 g-1">
+    @if (appStore.useMode !== "url") {
     <div class="col-12 col-lg-auto order-3 order-lg-1">
       <button
         type="button"
@@ -17,13 +22,28 @@ <h4 class="modal-title">
         {{ 'g.quit and release' | transloco }}
       </button>
     </div>
-    <div class="col-12 col-lg-auto order-2 order-lg-2">
+    }
+    <div
+      class="col-12 order-2 order-lg-2"
+      [ngClass]="{
+        'col-lg-auto': appStore.useMode !== 'url',
+        'col-lg': appStore.useMode === 'url'
+      }"
+    >
       <button
         type="button"
-        class="btn btn-raised btn-secondary w-100"
+        class="btn btn-raised w-100"
+        [ngClass]="{
+          'btn-secondary': appStore.useMode !== 'url',
+          'btn-danger': appStore.useMode === 'url'
+        }"
         (click)="close('QUIT')"
       >
+        @if (appStore.useMode !== "url") {
         {{ 'g.quit continue later' | transloco }}
+        } @else {
+        {{ 'g.quit discard' | transloco }}
+        }
       </button>
     </div>
     <div class="col-12 col-lg order-1 order-lg-3">

diff --git a/.../octra/src/app/core/modals/transcription-stop-modal/transcription-stop-modal.component.ts b/.../octra/src/app/core/modals/transcription-stop-modal/transcription-stop-modal.component.ts
@@ -2,6 +2,8 @@ import { Component, ViewChild } from '@angular/core';
 import { TranslocoPipe } from '@jsverse/transloco';
 import { NgbActiveModal, NgbModalOptions } from '@ng-bootstrap/ng-bootstrap';
 import { DefaultComponent } from '../../component/default.component';
+import { ApplicationStoreService } from '../../store/application/application-store.service';
+import { NgClass } from '@angular/common';
 
 export enum TranscriptionStopModalAnswer {
   CONTINUE = 'CONTINUE',
@@ -13,7 +15,7 @@ export enum TranscriptionStopModalAnswer {
   selector: 'octra-transcription-stop-modal',
   templateUrl: './transcription-stop-modal.component.html',
   styleUrls: ['./transcription-stop-modal.component.scss'],
-  imports: [TranslocoPipe],
+  imports: [TranslocoPipe, NgClass],
 })
 export class TranscriptionStopModalComponent extends DefaultComponent {
   @ViewChild('modal', { static: true }) modal: any;
@@ -24,7 +26,10 @@ export class TranscriptionStopModalComponent extends DefaultComponent {
     backdrop: 'static',
   };
 
-  constructor(private activeModal: NgbActiveModal) {
+  constructor(
+    private activeModal: NgbActiveModal,
+    protected appStore: ApplicationStoreService
+  ) {
     super();
   }
 

diff --git a/apps/octra/src/app/core/pages/intern/transcription/transcription.component.html b/apps/octra/src/app/core/pages/intern/transcription/transcription.component.html
@@ -120,7 +120,8 @@
         <i class="bi bi-star-fill"></i>
         <i class="bi bi-star-fill"></i>
       </button>
-      } @else { @if (useMode !== 'url') {
+      } @else { @if (useMode !== 'url' ||
+      (routingService.staticQueryParams.bottomNav)) {
       <button
         (click)="abortTranscription()"
         type="button"
@@ -133,7 +134,8 @@
         </span>
         }
       </button>
-      } @if (useMode === 'local') {
+      } @if (useMode === 'local' || (useMode === "url" &&
+      routingService.staticQueryParams.bottomNav) ) {
       <button
         (click)="navbarServ.doclick('export')"
         class="col-md-6 btn btn-primary"
@@ -159,7 +161,8 @@
         }
         <i class="bi bi-send-fill"></i>
       </button>
-      } @if (useMode === 'url' && !routingService.staticQueryParams.readonly) {
+      } @if (useMode === 'url') {
+      @if(!routingService.staticQueryParams.readonly && routingService.staticQueryParams.embedded) {
       <button
         (click)="onSaveTranscriptionButtonClicked()"
         class="btn btn-primary"
@@ -168,7 +171,7 @@
         <i class="bi bi-floppy-fill"></i>
         <span> {{ 'g.save' | transloco }} </span>
       </button>
-      } }
+      } } }
     </div>
   </div>
 </div>
diff --git a/apps/octra/src/app/core/pages/intern/transcription/transcription.component.ts b/apps/octra/src/app/core/pages/intern/transcription/transcription.component.ts
@@ -421,7 +421,7 @@ export class TranscriptionComponent
   }
 
   abortTranscription = () => {
-    if (this.appStorage.useMode === LoginMode.ONLINE) {
+    if ([LoginMode.ONLINE, LoginMode.URL].includes(this.appStorage.useMode)) {
       this.modService
         .openModal(
           TranscriptionStopModalComponent,

diff --git a/apps/octra/src/app/core/shared/service/routing.service.ts b/apps/octra/src/app/core/shared/service/routing.service.ts
@@ -20,6 +20,10 @@ export class RoutingService {
     private sessionStorage: SessionStorageService
   ) {}
 
+  clear() {
+    this._staticQueryParams = {};
+  }
+
   public removeStaticParam(name: string) {
     if (Object.keys(this._staticQueryParams).includes(name)) {
       this.staticQueryParams[name] = undefined;

diff --git a/apps/octra/src/app/core/store/application/application.effects.ts b/apps/octra/src/app/core/store/application/application.effects.ts
@@ -6,6 +6,7 @@ import { Action, Store } from '@ngrx/store';
 import { uniqueHTTPRequest } from '@octra/ngx-utilities';
 import { isNumber } from '@octra/utilities';
 import { findElements, getAttr } from '@octra/web-media';
+import { DateTime } from 'luxon';
 import { LocalStorageService, SessionStorageService } from 'ngx-webstorage';
 import {
   catchError,
@@ -42,7 +43,6 @@ import { IDBActions } from '../idb/idb.actions';
 import { getModeState, LoginMode, RootState } from '../index';
 import { LoginModeActions } from '../login-mode';
 import { AnnotationActions } from '../login-mode/annotation/annotation.actions';
-import { DateTime } from 'luxon';
 
 @Injectable({
   providedIn: 'root',
@@ -53,9 +53,9 @@ export class ApplicationEffects {
       ofType(ApplicationActions.initApplication.do),
       exhaustMap(() => {
         AppInfo.BUILD = (window as any).BUILD ?? AppInfo.BUILD;
-        AppInfo.BUILD.timestamp = DateTime.fromISO(AppInfo.BUILD.timestamp).toLocaleString(
-          DateTime.DATETIME_SHORT_WITH_SECONDS
-        );
+        AppInfo.BUILD.timestamp = DateTime.fromISO(
+          AppInfo.BUILD.timestamp
+        ).toLocaleString(DateTime.DATETIME_SHORT_WITH_SECONDS);
         this.appStorage.saveCurrentPageAsLastPage();
 
         const queryParams = {
@@ -66,6 +66,7 @@ export class ApplicationEffects {
           transcript: this.getParameterByName('transcript'),
           readonly: this.getParameterByName('readonly'),
           embedded: this.getParameterByName('embedded'),
+          bottomNav: this.getParameterByName('bottomNav'),
         };
 
         this.routerService.addStaticParams(queryParams);
@@ -679,7 +680,7 @@ export class ApplicationEffects {
                     clearSession: false,
                   })
                 );
-              } else {
+              } else if (!this.routerService.staticQueryParams.audio_url) {
                 this.store.dispatch(
                   ApplicationActions.redirectToLastPage.do({
                     mode: state.application.mode!,
@@ -866,6 +867,7 @@ export class ApplicationEffects {
             }
           }
 
+          console.log('CHECK AUDIO_URL PARAM');
           if (this.routerService.staticQueryParams?.audio_url) {
             this.store.dispatch(
               AuthenticationActions.loginURL.do({
@@ -913,11 +915,15 @@ export class ApplicationEffects {
         subject.next(LoginModeActions.clearSessionStorage.success());
         subject.complete();
 
+        this.routerService.clear();
         this.routerService
           .navigate(
             'after logout success',
             ['/login'],
-            AppInfo.queryParamsHandling
+            {
+              queryParams: {},
+            },
+            'replace'
           )
           .catch((error) => {
             console.error(error);

diff --git a/apps/octra/src/app/core/store/application/application.reducer.ts b/apps/octra/src/app/core/store/application/application.reducer.ts
@@ -153,7 +153,7 @@ export const reducer = createReducer(
     IDBActions.loadOptions.success,
     (state: ApplicationState, { applicationOptions }) => ({
       ...state,
-      mode: applicationOptions.useMode ?? undefined,
+      mode: applicationOptions.useMode ?? state.mode,
       language: applicationOptions.language ?? 'en',
       options: {
         ...state.options,

diff --git a/apps/octra/src/app/core/store/idb/idb-effects.service.ts b/apps/octra/src/app/core/store/idb/idb-effects.service.ts
@@ -173,7 +173,7 @@ export class IDBEffects {
                     projectID: action.demoOptions?.project?.id ?? '1234',
                     taskID: action.demoOptions?.transcriptID ?? '38295',
                     mode: this.routingService.staticQueryParams.audio_url
-                      ? LoginMode.URL
+                      ? undefined
                       : state.application.mode!,
                   })
                 );
@@ -201,7 +201,7 @@ export class IDBEffects {
         return forkJoin([
           this.idbService.loadAnnotation(LoginMode.ONLINE),
           this.idbService.loadAnnotation(LoginMode.LOCAL),
-          this.idbService.loadAnnotation(LoginMode.DEMO),
+          this.idbService.loadAnnotation(LoginMode.DEMO)
         ]).pipe(
           withLatestFrom(this.store),
           map(