MOBILE-4628 course-storage: Add accordion management

src/addons/storagemanager/pages/course-storage/course-storage.html

@@ -45,15 +45,12 @@
                 </ion-button>
             </ion-card-header>
         </ion-card>
+
+        <ion-accordion-group [multiple]="true" (ionChange)="accordionGroupChange($event.detail)" #accordionGroup>
             <ng-container *ngFor="let section of sections">
                 <ion-card class="section" *ngIf="section.modules.length > 0">
-                <ion-card-header>
+                    <ion-accordion [value]="section.id" toggleIconSlot="start">
-                    <ion-item [lines]="section.expanded ? 'full' : 'none'" button [detail]="false" (click)="toggleExpand($event, section)"
+                        <ion-item [detail]="false" slot="header" class="card-header">
-                        [class.core-course-storage-section-expanded]="section.expanded"
-                        [attr.aria-label]="(section.expanded ? 'core.collapse' : 'core.expand') | translate"
-                        [attr.aria-expanded]="section.expanded" [attr.aria-controls]="'core-course-storage-section-' + section.id">
-                        <ion-icon name="fas-chevron-right" flip-rtl slot="start" class="expandable-status-icon"
-                            [class.expandable-status-icon-expanded]="section.expanded" aria-hidden="true" />
                             <ion-label>
                                 <p class="item-heading ion-text-wrap">
                                     <core-format-text [text]="section.name" contextLevel="course" [contextInstanceId]="section.course"
@@ -95,24 +92,24 @@
                                 </ion-button>
                             </div>
                         </ion-item>
-                </ion-card-header>
+                        <ion-card-content slot="content">
-                <ion-card-content id="core-course-storage-section-{{section.id}}">
                             <ng-container *ngIf="section.expanded">
                                 <ng-container *ngFor="let module of section.modules">
                                     <ion-item class="core-course-storage-activity"
                                         *ngIf="downloadEnabled || (!module.calculatingSize && module.totalSize > 0)">
                                         <core-mod-icon slot="start" *ngIf="module.handlerData.icon" [modicon]="module.handlerData.icon"
-                                    [modname]="module.modname" [componentId]="module.instance" [fallbackTranslation]="module.modplural"
+                                            [modname]="module.modname" [componentId]="module.instance"
-                                    [isBranded]="module.branded" />
+                                            [fallbackTranslation]="module.modplural" [isBranded]="module.branded" />
                                         <ion-label class="ion-text-wrap">
                                             <p class="item-heading {{module.handlerData!.class}} addon-storagemanager-module-size">
-                                        <core-format-text [text]="module.handlerData.title" [courseId]="module.course" contextLevel="module"
+                                                <core-format-text [text]="module.handlerData.title" [courseId]="module.course"
-                                            [contextInstanceId]="module.id" [adaptImg]="false" />
+                                                    contextLevel="module" [contextInstanceId]="module.id" [adaptImg]="false" />
                                             </p>
                                             <ion-badge [color]="module.downloadStatus === statusDownloaded ? 'success' : 'light'"
                                                 *ngIf="!module.calculatingSize && module.totalSize > 0">
                                                 <ion-icon name="fam-cloud-done" *ngIf="module.downloadStatus === statusDownloaded"
-                                            [attr.aria-label]="'core.downloaded' | translate" />{{ module.totalSize | coreBytesToSize }}
+                                                    [attr.aria-label]="'core.downloaded' | translate" />{{ module.totalSize |
+                                                coreBytesToSize }}
                                             </ion-badge>
                                             <ion-badge color="light" *ngIf="module.calculatingSize ||
                                         (section.isDownloading && module.downloadStatus === statusDownloaded)">
@@ -129,8 +126,8 @@
                                                 [statusSubject]="module.name" />
                                             <ion-button fill="clear" (click)="deleteForModule($event, module, section)"
                                                 *ngIf="!module.calculatingSize && module.totalSize > 0" color="danger">
-                                        <ion-icon name="fas-trash" slot="icon-only"
+                                                <ion-icon name="fas-trash" slot="icon-only" [attr.aria-label]="
-                                            [attr.aria-label]="'addon.storagemanager.deletedatafrom' | translate: { name: module.name }" />
+                                                    'addon.storagemanager.deletedatafrom' | translate: { name: module.name }" />
                                             </ion-button>
                                             <p *ngIf="!downloadEnabled || !module.handlerData?.showDownloadButton" class="sr-only">
                                                 {{ 'core.notdownloadable' | translate }}
@@ -140,7 +137,10 @@
                                 </ng-container>
                             </ng-container>
                         </ion-card-content>
+                    </ion-accordion>
                 </ion-card>
             </ng-container>
+        </ion-accordion-group>
+
     </core-loading>
 </ion-content>

src/addons/storagemanager/pages/course-storage/course-storage.scss

@@ -8,13 +8,20 @@
     }
 
     ion-card.section {
-        ion-card-header {
+        ion-item.card-header {
             padding: 0;
+            --border-width: 0px;
 
             .item-heading {
                 font: var(--mdl-typography-heading4-font);
             }
         }
+
+        .accordion-expanded {
+            ion-item.card-header {
+                --border-width: 0 0 1px 0;
+            }
+        }
         ion-card-content {
             padding: 0;
 

src/addons/storagemanager/pages/course-storage/course-storage.ts

@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import { CoreConstants, DownloadStatus } from '@/core/constants';
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, OnDestroy, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, OnDestroy, OnInit, ViewChild } from '@angular/core';
 import { CoreCourse, CoreCourseProvider } from '@features/course/services/course';
 import {
     CoreCourseHelper,
@@ -25,6 +25,7 @@ import {
     CoreCourseModulePrefetchDelegate,
     CoreCourseModulePrefetchHandler } from '@features/course/services/module-prefetch-delegate';
 import { CoreCourseAnyCourseData, CoreCourses } from '@features/courses/services/courses';
+import { AccordionGroupChangeEventDetail, IonAccordionGroup } from '@ionic/angular';
 import { CoreNavigator } from '@services/navigator';
 import { CoreSites } from '@services/sites';
 import { CoreDomUtils } from '@services/utils/dom';
@@ -40,11 +41,13 @@ import { CoreEventObserver, CoreEvents } from '@singletons/events';
 @Component({
     selector: 'page-addon-storagemanager-course-storage',
     templateUrl: 'course-storage.html',
-    styleUrls: ['course-storage.scss'],
+    styleUrl: 'course-storage.scss',
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AddonStorageManagerCourseStoragePage implements OnInit, OnDestroy {
 
+    @ViewChild('accordionGroup', { static: true }) accordionGroup!: IonAccordionGroup;
+
     courseId!: number;
     title = '';
     loaded = false;
@@ -64,7 +67,6 @@ export class AddonStorageManagerCourseStoragePage implements OnInit, OnDestroy {
 
     statusDownloaded = DownloadStatus.DOWNLOADED;
 
-    protected initialSectionId?: number;
     protected siteUpdatedObserver?: CoreEventObserver;
     protected courseStatusObserver?: CoreEventObserver;
     protected sectionStatusObserver?: CoreEventObserver;
@@ -106,7 +108,7 @@ export class AddonStorageManagerCourseStoragePage implements OnInit, OnDestroy {
         this.isGuest = CoreNavigator.getRouteBooleanParam('isGuest') ??
             (await CoreCourseHelper.courseUsesGuestAccessInfo(this.courseId)).guestAccess;
 
-        this.initialSectionId = CoreNavigator.getRouteNumberParam('sectionId');
+        const initialSectionId = CoreNavigator.getRouteNumberParam('sectionId');
 
         this.downloadCourseEnabled = !CoreCourses.isDownloadCourseDisabledInSite();
         this.downloadEnabled = !CoreSites.getRequiredCurrentSite().isOfflineDisabled();
@@ -118,7 +120,7 @@ export class AddonStorageManagerCourseStoragePage implements OnInit, OnDestroy {
                 ...section,
                 totalSize: 0,
                 calculatingSize: true,
-                expanded: section.id === this.initialSectionId,
+                expanded: section.id === initialSectionId,
                 modules: section.modules.map(module => ({
                     ...module,
                     calculatingSize: true,
@@ -127,9 +129,11 @@ export class AddonStorageManagerCourseStoragePage implements OnInit, OnDestroy {
 
         this.loaded = true;
 
+        this.accordionGroup.value = String(initialSectionId);
+
         CoreDom.scrollToElement(
             this.elementRef.nativeElement,
-            '.core-course-storage-section-expanded',
+            '.accordion-expanded',
             { addYAxis: -10 },
         );
 
@@ -719,12 +723,17 @@ export class AddonStorageManagerCourseStoragePage implements OnInit, OnDestroy {
      * Toggle expand status.
      *
      * @param event Event object.
-     * @param section Section to expand / collapse.
      */
-    toggleExpand(event: Event, section: AddonStorageManagerCourseSection): void {
+    accordionGroupChange(event: AccordionGroupChangeEventDetail): void {
-        section.expanded = !section.expanded;
+        this.sections.forEach((section) => {
-        event.stopPropagation();
+            section.expanded = false;
-        event.preventDefault();
+        });
+        event.value.forEach((sectionId) => {
+            const section = this.sections.find((section) => section.id === Number(sectionId));
+            if (section) {
+                section.expanded = true;
+            }
+        });
     }
 
     /**

src/addons/storagemanager/storagemanager-lazy.module.ts

@@ -40,4 +40,4 @@ const routes: Routes = [
         AddonStorageManagerCourseStoragePage,
     ],
 })
-export class AddonStorageManagerLazyModule {}
+export default class AddonStorageManagerLazyModule {}

src/addons/storagemanager/storagemanager.module.ts

@@ -23,7 +23,7 @@ import { AddonStorageManagerSettingsHandler } from './services/handlers/settings
 const routes: Routes = [
     {
         path: '',
-        loadChildren: () => import('@addons/storagemanager/storagemanager-lazy.module').then(m => m.AddonStorageManagerLazyModule),
+        loadChildren: () => import('@addons/storagemanager/storagemanager-lazy.module'),
     },
 ];