Wabe Release 4.3.4

.github/workflows/build.yml

@@ -53,6 +53,18 @@ jobs:
       - name: build - staging
         run: yarn nx run-many --target=build --all --parallel --configuration=staging
 
+      - name: Deploy wabe-staging
+        uses: appleboy/scp-action@v0.1.7
+        with:
+          host: ${{ secrets.SERVER }}
+          username: ${{ secrets.USER }}
+          key: ${{ secrets.SSH_PRIVATE_KEY }}
+          rm: true
+          source: 'dist/apps/wabe'
+          target: '${{ secrets.WABE_STAGING_DIRECTORY }}'
+          timeout: 2m
+          strip_components: 3
+
       - name: Deploy planty-staging
         uses: appleboy/scp-action@v0.1.7
         with:

apps/ais/src/styles.scss

@@ -29,7 +29,12 @@
 @include solid-core-theme($app-theme);
 @include solid-glossary-theme($app-theme);
 @include solid-profile-theme($app-theme);
-@include solid-quiz-theme($app-theme, $quiz-correct, $quiz-incorrect);
+@include solid-quiz-theme(
+  $app-theme,
+  $quiz-correct,
+  $quiz-incorrect,
+  $quiz-partiallyIncorrect
+);
 @include solid-skeleton-theme($app-theme);
 @include solid-slideshow-theme($app-theme);
 

apps/ais/src/theme.scss

@@ -80,6 +80,7 @@ $app-accent: mat.define-palette($ais-accent, 500);
 
 $quiz-correct: mat.define-palette(mat.$light-green-palette, 600, 200, 600);
 $quiz-incorrect: mat.define-palette(mat.$red-palette, 700, 200, 600);
+$quiz-partiallyIncorrect: mat.define-palette(mat.$gray-palette, 400, 200, 600);
 
 // The warn palette is optional (defaults to red).
 $app-warn: mat.define-palette(mat.$red-palette);

apps/dive/src/styles.scss

@@ -29,7 +29,12 @@
 @include solid-core-theme($app-theme);
 @include solid-glossary-theme($app-theme);
 @include solid-profile-theme($app-theme);
-@include solid-quiz-theme($app-theme, $quiz-correct, $quiz-incorrect);
+@include solid-quiz-theme(
+  $app-theme,
+  $quiz-correct,
+  $quiz-incorrect,
+  $quiz-partiallyIncorrect
+);
 @include solid-skeleton-theme($app-theme);
 @include solid-slideshow-theme($app-theme);
 

apps/dive/src/theme.scss

@@ -80,6 +80,7 @@ $app-accent: mat.define-palette($dive-secondary, 500);
 
 $quiz-correct: mat.define-palette(mat.$light-green-palette, 600, 200, 600);
 $quiz-incorrect: mat.define-palette(mat.$red-palette, 700, 200, 600);
+$quiz-partiallyIncorrect: mat.define-palette(mat.$gray-palette, 400, 200, 600);
 
 // The warn palette is optional (defaults to red).
 $app-warn: mat.define-palette(mat.$red-palette);

apps/geomat/src/styles.scss

@@ -29,7 +29,12 @@
 @include solid-core-theme($app-theme);
 @include solid-glossary-theme($app-theme);
 @include solid-profile-theme($app-theme);
-@include solid-quiz-theme($app-theme, $quiz-correct, $quiz-incorrect);
+@include solid-quiz-theme(
+  $app-theme,
+  $quiz-correct,
+  $quiz-incorrect,
+  $quiz-partiallyIncorrect
+);
 @include solid-skeleton-theme($app-theme);
 @include solid-slideshow-theme($app-theme);
 

apps/geomat/src/theme.scss

@@ -82,6 +82,7 @@ $app-accent: mat.define-palette($geomat-secondary, 400);
 
 $quiz-correct: mat.define-palette(mat.$light-green-palette, 600, 200, 600);
 $quiz-incorrect: mat.define-palette(mat.$red-palette, 700, 200, 600);
+$quiz-partiallyIncorrect: mat.define-palette(mat.$gray-palette, 400, 200, 600);
 
 // The warn palette is optional (defaults to red).
 $app-warn: mat.define-palette(mat.$red-palette);

apps/planty/src/styles.scss

@@ -29,7 +29,12 @@
 @include solid-core-theme($app-theme);
 @include solid-glossary-theme($app-theme);
 @include solid-profile-theme($app-theme);
-@include solid-quiz-theme($app-theme, $quiz-correct, $quiz-incorrect);
+@include solid-quiz-theme(
+  $app-theme,
+  $quiz-correct,
+  $quiz-incorrect,
+  $quiz-partiallyIncorrect
+);
 @include solid-skeleton-theme($app-theme);
 @include solid-slideshow-theme($app-theme);
 

apps/planty/src/theme.scss

@@ -79,6 +79,7 @@ $app-accent: mat.define-palette($planty-accent, 300);
 
 $quiz-correct: mat.define-palette(mat.$light-green-palette, 600, 200, 600);
 $quiz-incorrect: mat.define-palette(mat.$red-palette, 700, 200, 600);
+$quiz-partiallyIncorrect: mat.define-palette(mat.$gray-palette, 400, 200, 600);
 
 // The warn palette is optional (defaults to red).
 $app-warn: mat.define-palette(mat.$red-palette);

apps/wabe/src/app/app.module.ts

@@ -93,5 +93,6 @@ export class AppModule {
     addIcon('feedback_outline');
     addIcon('assistant');
     addIcon('semicorrect');
+    addIcon('light');
   }
 }

apps/wabe/src/assets/data/guidedTour.json

@@ -63,8 +63,8 @@
 
   "profile": {
     "location": {
-      "treeNode": "/grundwortschatz/tree/1",
-      "profileTree": "/grundwortschatz/tree/"
+      "treeNode": "/grundwortschatz/word/1",
+      "profileTree": "/grundwortschatz/"
     },
     "steps": [
       {

apps/wabe/src/styles.scss

@@ -29,7 +29,12 @@
 @include solid-core-theme($app-theme);
 @include solid-glossary-theme($app-theme);
 @include solid-profile-theme($app-theme);
-@include solid-quiz-theme($app-theme, $quiz-correct, $quiz-incorrect);
+@include solid-quiz-theme(
+  $app-theme,
+  $quiz-correct,
+  $quiz-incorrect,
+  $quiz-partiallyIncorrect
+);
 @include solid-skeleton-theme($app-theme);
 @include solid-slideshow-theme($app-theme);
 

apps/wabe/src/theme.scss

@@ -80,6 +80,7 @@ $app-accent: mat.define-palette($wabe-accent, 500);
 
 $quiz-correct: mat.define-palette(mat.$light-green-palette, 600, 200, 600);
 $quiz-incorrect: mat.define-palette(mat.$red-palette, 700, 200, 600);
+$quiz-partiallyIncorrect: mat.define-palette(mat.$gray-palette, 400, 200, 600);
 
 // The warn palette is optional (defaults to red).
 $app-warn: mat.define-palette(mat.$red-palette);

libs/solid/core/src/lib/solid-core.module.ts

@@ -24,6 +24,7 @@ import { AudioToolbarComponent } from './components/audio-toolbar/audio-toolbar.
 import { AudioIconComponent } from './components/audio-icon/audio-icon.component';
 import { MEDIA_DIALOG_TOKEN } from './media-dialog-token';
 import { MatTooltipModule } from '@angular/material/tooltip';
+import { MatTabsModule } from '@angular/material/tabs';
 
 @NgModule({
   declarations: [
@@ -48,6 +49,7 @@ import { MatTooltipModule } from '@angular/material/tooltip';
     ScrollingModule,
     MatSliderModule,
     MatTooltipModule,
+    MatTabsModule,
   ],
   exports: [
     CommonModule,
@@ -58,6 +60,7 @@ import { MatTooltipModule } from '@angular/material/tooltip';
     MediaComponent,
     ScrollingModule,
     MatTooltipModule,
+    MatTabsModule,
   ],
   providers: [MarkdownService, TitleService],
 })

libs/solid/glossary/src/lib/components/glossary.component.html

@@ -5,37 +5,94 @@
     <mat-icon>{{ Filter.value === '' ? 'search' : 'close' }}</mat-icon>
   </button>
 </mat-form-field>
-<div class="scrollable-list">
-  <mat-list *ngIf="GlossaryEntries | async as state">
-    <ng-container *ngFor="let kvp of state.sections">
-      <h3 mat-subeader>{{ kvp[0] }}</h3>
-      <mat-list-item
-        *ngFor="let entryId of kvp[1]"
-        solidGlossaryEntry
-        [refId]="entryId"
-      >
-        <span class="mat-body-strong entry-header" mat-line>{{
-          state.entries[entryId].term
-        }}</span>
-        <div
-          [data]="state.entries[entryId].text"
-          markdown
-          [inline]="true"
-          mat-line
-        ></div>
-        <span
-          class="links"
-          *ngIf="state.entries[entryId].links.length > 0"
-          mat-line
-          >&rarr;<a
-            (click)="followRef(refId)"
-            *ngFor="let refId of state.entries[entryId].links; let i = index"
+
+<div class="scrollable-list" *ngIf="GlossaryEntries | async as state">
+  <!-- Single element case - no tabs needed -->
+  <ng-container *ngIf="Object.keys(state).length === 1">
+    <mat-list>
+      <ng-container *ngFor="let kvp of state['Glossar'].sections">
+        <h3 mat-subeader>{{ kvp[0] }}</h3>
+        <mat-list-item
+          *ngFor="let entryId of kvp[1]"
+          solidGlossaryEntry
+          [refId]="entryId"
+        >
+          <span class="mat-body-strong entry-header" mat-line>{{
+            state['Glossar'].entries[entryId].term
+          }}</span>
+          <div
+            [data]="state['Glossar'].entries[entryId].text"
+            markdown
+            [inline]="true"
+            mat-line
+          ></div>
+          <span
+            class="links"
+            *ngIf="state['Glossar'].entries[entryId].links.length > 0"
+            mat-line
+            >&rarr;<a
+              (click)="followRef(refId)"
+              *ngFor="
+                let refId of state['Glossar'].entries[entryId].links;
+                let i = index
+              "
+            >
+              {{ state['Glossar'].entries[refId].term
+              }}{{
+                i < state['Glossar'].entries[entryId].links.length - 1
+                  ? ','
+                  : ''
+              }}</a
+            >
+          </span>
+        </mat-list-item>
+      </ng-container>
+    </mat-list>
+  </ng-container>
+
+  <!-- Multiple elements case - use tabs -->
+  <mat-tab-group *ngIf="Object.keys(state).length > 1">
+    <mat-tab *ngFor="let tab of Object.keys(state)" [label]="tab">
+      <mat-list>
+        <ng-container *ngFor="let kvp of state[tab].sections">
+          <h3 mat-subeader>{{ kvp[0] }}</h3>
+          <mat-list-item
+            *ngFor="let entryId of kvp[1]"
+            solidGlossaryEntry
+            [refId]="entryId"
           >
-            {{ state.entries[refId].term
-            }}{{ i < state.entries[entryId].links.length - 1 ? ',' : '' }}</a
-          >
-        </span>
-      </mat-list-item>
-    </ng-container>
-  </mat-list>
+            <span class="mat-body-strong entry-header" mat-line>{{
+              state[tab].entries[entryId].term
+            }}</span>
+            <div
+              [data]="state[tab].entries[entryId].text"
+              markdown
+              [inline]="true"
+              mat-line
+            ></div>
+            <span
+              class="links"
+              *ngIf="
+                state[tab].entries[entryId].links.length > 0 &&
+                tab === 'Glossar'
+              "
+              mat-line
+              >&rarr;<a
+                (click)="followRef(refId)"
+                *ngFor="
+                  let refId of state[tab].entries[entryId].links;
+                  let i = index
+                "
+              >
+                {{ state[tab].entries[refId].term
+                }}{{
+                  i < state[tab].entries[entryId].links.length - 1 ? ',' : ''
+                }}
+              </a>
+            </span>
+          </mat-list-item>
+        </ng-container>
+      </mat-list>
+    </mat-tab>
+  </mat-tab-group>
 </div>

libs/solid/glossary/src/lib/components/glossary.component.ts

@@ -2,8 +2,9 @@
 import { Select, Store } from '@ngxs/store';
 import {
   GlossaryEntryModel,
+  ExtendedGlossaryEntryModel,
   GlossaryState,
   GlossaryStateModel,
 } from '../glossary.state';
 import { LoadGLossary } from '../glossary.actions';
 import { combineLatest, Observable, Subject } from 'rxjs';
@@ -22,8 +23,10 @@
   @ViewChildren(RefDirective, { read: RefDirective })
   public refElements!: QueryList<RefDirective>;
   @Select(GlossaryState.state)
-  public State!: Observable<GlossaryStateModel>;
-  public GlossaryEntries: Observable<GlossaryStateModel>;
+  public State!: Observable<ExtendedGlossaryEntryModel>;
+  public GlossaryEntries: Observable<ExtendedGlossaryEntryModel>;
+
+  protected Object = Object;
 
   constructor(store: Store) {
     store.dispatch(new LoadGLossary());
@@ -33,19 +36,24 @@
     ]).pipe(
       map((val) => {
         const filterStr: string = (val[0] as string).toLowerCase();
-        const state = val[1];
+        const state = { ...val[1] }; // Create a copy of the state to modify
+
         if (filterStr === '') {
           return state;
         }
-        const validEntryIds = Object.values(state.entries)
+
+        // Only filter the glossary section
+        const glossaryState = state['Glossar'];
+        const validEntryIds = Object.values(glossaryState.entries)
           .filter((entry: GlossaryEntryModel) => {
             return (
               entry.term.toLowerCase().includes(filterStr) ||
               entry.text.toLowerCase().includes(filterStr)
             );
           })
           .map((entry) => entry.id);
-        const filteredSections = state.sections
+
+        const filteredSections = glossaryState.sections
           .filter((section) => {
             return section[1].some((id) => validEntryIds.includes(id));
           })
@@ -55,7 +63,14 @@
               section[1].filter((id) => validEntryIds.includes(id)),
             ] as [string, number[]];
           });
-        return { sections: filteredSections, entries: state.entries };
+
+        // Update only the glossary section in the state copy
+        state['Glossar'] = {
+          sections: filteredSections,
+          entries: glossaryState.entries,
+        };
+
+        return state;
       }),
       takeUntil(this.$destroyed),
     );