MOBILE-4628 course-storage: Better translate status on download refresh

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

@@ -78,7 +78,8 @@
                                 <core-download-refresh *ngIf="!section.isDownloading && section.downloadStatus !== statusDownloaded"
                                     [status]="section.downloadStatus" [enabled]="true" (action)="prefecthSection(section)"
                                     [loading]="section.isDownloading || section.isCalculating" [canTrustDownload]="true"
-                                    [statusTranslatable]="'addon.storagemanager.downloaddatafrom' | translate: { name: section.name }" />
+                                    [statusesTranslatable]="{notdownloaded: 'addon.storagemanager.downloaddatafrom' }"
+                                    [statusSubject]="section.name" />
 
                                 <ion-badge class="core-course-download-section-progress"
                                     *ngIf="section.isDownloading && section.count < section.total" role="progressbar"
@@ -124,7 +125,8 @@
                                         module.downloadStatus !== statusDownloaded" [status]="module.downloadStatus" [enabled]="true"
                                         [canTrustDownload]="true" [loading]="module.spinner || module.handlerData.spinner"
                                         (action)="prefetchModule(module)"
-                                        [statusTranslatable]="'addon.storagemanager.downloaddatafrom' | translate: { name: module.name }" />
+                                        [statusesTranslatable]="{notdownloaded: 'addon.storagemanager.downloaddatafrom' }"
+                                        [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"

src/core/components/download-refresh/core-download-refresh.html

@@ -1,23 +1,25 @@
 <ng-container *ngIf="enabled && !loading">
     <!-- Download button. -->
     <ion-button *ngIf="status === statusNotDownloaded" fill="clear" (click)="download($event, false)" @coreShowHideAnimation
-        [ariaLabel]="(statusTranslatable || 'core.download') | translate">
+        [ariaLabel]="(statusTranslatable || translates.notdownloaded) | translate: { name : statusSubject }">
         <ion-icon slot="icon-only" name="fas-cloud-arrow-down" aria-hidden="true" />
     </ion-button>
 
     <!-- Refresh button. -->
     <ion-button *ngIf="status === statusOutdated || (status === statusDownloaded && !canTrustDownload)" fill="clear"
-        (click)="download($event, true)" @coreShowHideAnimation [ariaLabel]="(statusTranslatable || 'core.refresh') | translate">
+        (click)="download($event, true)" @coreShowHideAnimation
+        [ariaLabel]="(statusTranslatable || translates.outdated) | translate: { name : statusSubject }">
         <ion-icon slot="icon-only" name="fam-cloud-refresh" aria-hidden="true" />
     </ion-button>
 
     <!-- Downloaded status icon. -->
     <ion-icon *ngIf="status === statusDownloaded && canTrustDownload" class="core-icon-downloaded ion-padding-horizontal" color="success"
-        name="fam-cloud-done" [attr.aria-label]="(statusTranslatable || 'core.downloaded') | translate" role="status" />
+        name="fam-cloud-done" [attr.aria-label]="(statusTranslatable || translates.downloaded) | translate: { name : statusSubject }"
+        role="status" />
 
     <ion-spinner *ngIf="status === statusDownloading" @coreShowHideAnimation
-        [attr.aria-label]="(statusTranslatable || 'core.downloading') | translate" />
+        [attr.aria-label]="(statusTranslatable || translates.downloading) | translate: { name : statusSubject }" />
 </ng-container>
 
 <!-- Spinner. -->
-<ion-spinner *ngIf="loading" @coreShowHideAnimation [attr.aria-label]="'core.loading' | translate" />
+<ion-spinner *ngIf="loading" @coreShowHideAnimation [attr.aria-label]="translates.loading | translate: { name : statusSubject }" />

src/core/components/download-refresh/download-refresh.ts

@@ -12,7 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { Component, Input, Output, EventEmitter, OnInit } from '@angular/core';
 import { DownloadStatus } from '@/core/constants';
 import { CoreAnimations } from '@components/animations';
 
@@ -29,24 +29,45 @@ import { CoreAnimations } from '@components/animations';
     styleUrls: ['download-refresh.scss'],
     animations: [CoreAnimations.SHOW_HIDE],
 })
-export class CoreDownloadRefreshComponent {
+export class CoreDownloadRefreshComponent implements OnInit {
 
     @Input() status?: DownloadStatus; // Download status.
-    @Input() statusTranslatable?: string; // Download status translatable string.
+    @Input() statusesTranslatable?: Partial<CoreDownloadStatusTranslatable>; // Download statuses translatable strings.
+    @Input() statusSubject = ''; // Status subject to use on name filed in the translatable string.
     @Input() enabled = false; // Whether the download is enabled.
     @Input() loading = true; // Force loading status when is not downloading.
     @Input() canTrustDownload = false; // If false, refresh will be shown if downloaded.
     @Output() action: EventEmitter<boolean>; // Will emit an event when the item clicked.
 
+    /**
+     * @deprecated since 4.5. Use statusesTranslatable instead.
+     */
+    @Input() statusTranslatable?: string; // Download status translatable string.
+
     statusDownloaded = DownloadStatus.DOWNLOADED;
     statusNotDownloaded = DownloadStatus.DOWNLOADABLE_NOT_DOWNLOADED;
     statusOutdated = DownloadStatus.OUTDATED;
     statusDownloading = DownloadStatus.DOWNLOADING;
 
+    translates: CoreDownloadStatusTranslatable = {
+        downloaded: 'core.downloaded',
+        notdownloaded: 'core.download',
+        outdated: 'core.refresh',
+        downloading: 'core.downloading',
+        loading: 'core.loading',
+    };
+
     constructor() {
         this.action = new EventEmitter();
     }
 
+    /**
+     * @inheritdoc
+     */
+    ngOnInit(): void {
+        this.translates = Object.assign(this.translates, this.statusesTranslatable || {});
+    }
+
     /**
      * Download clicked.
      *
@@ -61,3 +82,11 @@ export class CoreDownloadRefreshComponent {
     }
 
 }
+
+export type CoreDownloadStatusTranslatable = {
+    downloaded: string;
+    notdownloaded: string;
+    outdated: string;
+    downloading: string;
+    loading: string;
+};

src/core/features/courses/components/course-list-item/core-courses-course-list-item.html

@@ -10,8 +10,8 @@
     <ng-container *ngIf="isEnrolled && layout !== 'summarycard'">
         <div class="core-button-spinner" *ngIf="!courseOptionMenuEnabled && showDownload">
             <core-download-refresh [status]="prefetchCourseData.status" [enabled]="showDownload"
-                [statusTranslatable]="prefetchCourseData.statusTranslatable" [canTrustDownload]="false"
+                [statusesTranslatable]="statusesTranslatable" [canTrustDownload]="false" [loading]="prefetchCourseData.loading"
-                [loading]="prefetchCourseData.loading" (action)="prefetchCourse()" />
+                (action)="prefetchCourse()" />
         </div>
 
         <div class="core-button-spinner" *ngIf="courseOptionMenuEnabled">

src/core/features/courses/components/course-list-item/course-list-item.ts

@@ -27,6 +27,7 @@ import { CoreCourseListItem, CoreCourses, CoreCoursesProvider } from '../../serv
 import { CoreCoursesHelper, CoreEnrolledCourseDataWithExtraInfoAndOptions } from '../../services/courses-helper';
 import { CoreCoursesCourseOptionsMenuComponent } from '../course-options-menu/course-options-menu';
 import { CoreEnrolHelper } from '@features/enrol/services/enrol-helper';
+import { CoreDownloadStatusTranslatable } from '@components/download-refresh/download-refresh';
 
 /**
  * This directive is meant to display an item for a list of courses.
@@ -55,6 +56,12 @@ export class CoreCoursesCourseListItemComponent implements OnInit, OnDestroy, On
         loading: true,
     };
 
+    statusesTranslatable: Partial<CoreDownloadStatusTranslatable> = {
+        downloaded: 'core.course.refreshcourse',
+        notdownloaded: 'core.course.downloadcourse',
+        outdated: 'core.course.downloadcourse',
+    };
+
     showSpinner = false;
     courseOptionMenuEnabled = false;
     progress = -1;