feat: expandable accordion in grades module

src/app/modules/data/detail/data-detail.component.ts

@@ -61,6 +61,8 @@ export class DataDetailComponent implements ViewWillEnter {
 
   @Input() isModal = false;
 
+  @Input() autoRouteDataPath = true;
+
   /**
    * The language of the item
    */

src/app/modules/data/detail/data-detail.html

@@ -46,7 +46,7 @@
   <div [ngSwitch]="true">
     <ng-container *ngSwitchCase="!item && (isDisconnected | async)">
       <div class="centeredMessageContainer">
-        <ion-icon name="no-connection"> </ion-icon>
+        <ion-icon name="no-connection"></ion-icon>
         <ion-label>
           {{ 'data.detail.COULD_NOT_CONNECT' | translate }}
         </ion-label>
@@ -54,7 +54,7 @@
     </ng-container>
     <ng-container *ngSwitchCase="item === null">
       <div class="centeredMessageContainer">
-        <ion-icon name="broken-link"> </ion-icon>
+        <ion-icon name="broken-link"></ion-icon>
         <ion-label>
           {{ 'data.detail.NOT_FOUND' | translate }}
         </ion-label>
@@ -65,7 +65,10 @@
       <stapps-skeleton-simple-card></stapps-skeleton-simple-card>
     </ng-container>
     <ng-container *ngSwitchDefault>
-      <stapps-data-path [item]="item"></stapps-data-path>
+      <stapps-data-path
+        [item]="item"
+        [autoRouting]="autoRouteDataPath"
+      ></stapps-data-path>
       <stapps-data-detail-content
         [item]="item"
         [contentTemplateRef]="contentTemplateRef"

src/app/modules/data/detail/data-path.component.ts

@@ -12,7 +12,7 @@
  *  You should have received a copy of the GNU General Public License along with
  *  this program. If not, see <https://www.gnu.org/licenses/>.
  */
-import {Component, Input, OnInit} from '@angular/core';
+import {Component, Input, OnDestroy, OnInit} from '@angular/core';
 import {RoutingStackService} from '../../../util/routing-stack.service';
 import {
   SCCatalog,
@@ -21,24 +21,24 @@ import {
   SCThingWithoutReferences,
 } from '@openstapps/core';
 import {DataProvider, DataScope} from '../data.provider';
-import {fromEvent, Observable} from 'rxjs';
-import {map} from 'rxjs/operators';
+import {fromEvent, Observable, Subscription} from 'rxjs';
+import {map, startWith} from 'rxjs/operators';
+import {DataRoutingService} from '../data-routing.service';
+import {NavController} from '@ionic/angular';
 
 @Component({
   selector: 'stapps-data-path',
   templateUrl: './data-path.html',
   styleUrls: ['./data-path.scss'],
 })
-export class DataPathComponent implements OnInit {
+export class DataPathComponent implements OnInit, OnDestroy {
   path: Promise<SCThingWithoutReferences[]>;
 
   $width: Observable<number>;
 
-  ngOnInit() {
-    this.$width = fromEvent(window, 'resize').pipe(
-      map(() => window.innerWidth),
-    );
-  }
+  subscriptions: Subscription[] = [];
+
+  @Input() autoRouting = true;
 
   @Input() set item(item: SCThings) {
     // eslint-disable-next-line unicorn/prefer-ternary
@@ -47,6 +47,11 @@ export class DataPathComponent implements OnInit {
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
         resolve([...item.superCatalogs!, item]),
       );
+    } else if (item.type === SCThingType.Assessment && item.superAssessments) {
+      this.path = new Promise(resolve =>
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        resolve([...item.superAssessments!, item]),
+      );
     } else if (
       item.type === SCThingType.AcademicEvent &&
       item.catalogs &&
@@ -76,7 +81,27 @@ export class DataPathComponent implements OnInit {
   }
 
   constructor(
+    readonly dataRoutingService: DataRoutingService,
+    readonly navController: NavController,
     readonly routeStack: RoutingStackService,
     readonly dataProvider: DataProvider,
   ) {}
+
+  ngOnInit() {
+    this.$width = fromEvent(window, 'resize').pipe(
+      map(() => window.innerWidth),
+      startWith(window.innerWidth),
+    );
+
+    if (!this.autoRouting) return;
+    this.subscriptions.push(
+      this.dataRoutingService.pathSelectListener().subscribe(item => {
+        void this.navController.navigateBack(['data-detail', item.uid]);
+      }),
+    );
+  }
+
+  ngOnDestroy() {
+    for (const sub of this.subscriptions) sub.unsubscribe();
+  }
 }

src/app/modules/data/detail/data-path.html

@@ -22,8 +22,7 @@
   >
     <ion-breadcrumb *ngFor="let fragment of stack">
       <ion-label
-        [routerLink]="['/data-detail', fragment.uid]"
-        [routerDirection]="'back'"
+        (click)="dataRoutingService.emitPathEvent(fragment)"
         [style.max-width]="
           stack.length === 1
             ? '100%'
@@ -42,10 +41,11 @@
     <ng-template>
       <ion-list>
         <ion-item
+          button
           *ngFor="let fragment of stack"
-          (click)="popover.dismiss()"
-          [routerLink]="['/data-detail', fragment.uid]"
-          [routerDirection]="'back'"
+          (click)="
+            dataRoutingService.emitPathEvent(fragment); popover.dismiss()
+          "
           >{{ 'name' | thingTranslate: $any(fragment) }}</ion-item
         >
       </ion-list>